govuk-frontend - npm Package Compare versions

Comparing version 4.5.0 to 4.6.0

govuk-prototype-kit.config.json

 {
   "assets": [
-    "/govuk/assets"
+    "/govuk/assets",
+    "/govuk/all.js.map"
   ],
@@ -5,0 +6,0 @@ "sass": [

govuk-prototype-kit/init.js

@@ -0,1 +1,2 @@
+// @ts-nocheck
 if (window.GOVUKPrototypeKit &&
@@ -2,0 +3,0 @@ window.GOVUKPrototypeKit.documentReady &&

govuk/common.js

@@ -22,4 +22,6 @@ (function (global, factory) {
    *
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
-   * @param {nodeListIterator} callback - Callback function to run for each node
+   * @deprecated Will be made private in v5.0
+   * @template {Node} ElementType
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
+   * @param {nodeListIterator<ElementType>} callback - Callback function to run for each node
    * @returns {void}
@@ -41,2 +43,3 @@ */
    *
+   * @deprecated Will be made private in v5.0
    * @returns {string} Unique ID
@@ -63,2 +66,3 @@ */
    *
+   * @deprecated Will be made private in v5.0
    * @returns {Object<string, unknown>} A flattened object of key-value pairs.
@@ -78,2 +82,3 @@ */
       // Prepare an empty return object
+      /** @type {Object<string, unknown>} */
       var flattenedObject = {};
@@ -115,2 +120,3 @@
     // Start with an empty object as our base
+    /** @type {Object<string, unknown>} */
     var formattedConfigObject = {};
@@ -137,2 +143,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {Object<string, unknown>} configObject - The object to extract key-value pairs from.
@@ -149,6 +156,10 @@ * @param {string} namespace - The namespace to filter keys with.
     }
+
     if (!namespace || typeof namespace !== 'string') {
       throw new Error('Provide a `namespace` of type "string" to filter the `configObject` by.')
     }
+
+    /** @type {Object<string, unknown>} */
     var newObject = {};
+
     for (var key in configObject) {
@@ -174,6 +185,7 @@ // Split the key into parts, using . as our namespace separator
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
@@ -180,0 +192,0 @@ */

govuk/common/closest-attribute-value.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -32,2 +33,4 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/matches/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -59,11 +62,12 @@
    *
-   * @param {HTMLElement} $element - The element to start walking the DOM tree up
+   * @deprecated Will be made private in v5.0
+   * @param {Element} $element - The element to start walking the DOM tree up
    * @param {string} attributeName - The name of the attribute
-   * @returns {string | undefined} Attribute value
+   * @returns {string | null} Attribute value
    */
   function closestAttributeValue ($element, attributeName) {
-    var closestElementWithAttribute = $element.closest('[' + attributeName + ']');
-    if (closestElementWithAttribute) {
-      return closestElementWithAttribute.getAttribute(attributeName)
-    }
+    var $closestElementWithAttribute = $element.closest('[' + attributeName + ']');
+    return $closestElementWithAttribute
+      ? $closestElementWithAttribute.getAttribute(attributeName)
+      : null
   }
@@ -70,0 +74,0 @@

govuk/common/index.js

@@ -22,4 +22,6 @@ (function (global, factory) {
    *
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
-   * @param {nodeListIterator} callback - Callback function to run for each node
+   * @deprecated Will be made private in v5.0
+   * @template {Node} ElementType
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
+   * @param {nodeListIterator<ElementType>} callback - Callback function to run for each node
    * @returns {void}
@@ -41,2 +43,3 @@ */
    *
+   * @deprecated Will be made private in v5.0
    * @returns {string} Unique ID
@@ -63,2 +66,3 @@ */
    *
+   * @deprecated Will be made private in v5.0
    * @returns {Object<string, unknown>} A flattened object of key-value pairs.
@@ -78,2 +82,3 @@ */
       // Prepare an empty return object
+      /** @type {Object<string, unknown>} */
       var flattenedObject = {};
@@ -115,2 +120,3 @@
     // Start with an empty object as our base
+    /** @type {Object<string, unknown>} */
     var formattedConfigObject = {};
@@ -137,2 +143,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {Object<string, unknown>} configObject - The object to extract key-value pairs from.
@@ -149,6 +156,10 @@ * @param {string} namespace - The namespace to filter keys with.
     }
+
     if (!namespace || typeof namespace !== 'string') {
       throw new Error('Provide a `namespace` of type "string" to filter the `configObject` by.')
     }
+
+    /** @type {Object<string, unknown>} */
     var newObject = {};
+
     for (var key in configObject) {
@@ -174,6 +185,7 @@ // Split the key into parts, using . as our namespace separator
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
@@ -180,0 +192,0 @@ */

govuk/common/normalise-dataset.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -95,3 +96,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -123,2 +125,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -237,2 +241,4 @@
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -258,6 +264,6 @@
 	      var map = {};
-	  
+
 	      for (var i = 0; i < attributes.length; i++) {
 	        var attribute = attributes[i];
-	  
+
 	        // This regex has been edited from the original polyfill, to add
@@ -270,7 +276,7 @@ // support for period (.) separators in data-* attribute names. These
 	          var value = attribute.value;
-	  
+
 	          var propName = name.substr(5).replace(/-./g, function (prop) {
 	            return prop.charAt(1).toUpperCase();
 	          });
-	          
+
 	          // If this browser supports __defineGetter__ and __defineSetter__,
@@ -299,3 +305,3 @@ // continue using defineProperty. If not (like IE 8 and below), we use
 	      }
-	  
+
 	      return map;
@@ -307,7 +313,8 @@ }
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
 	    // Detection from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
 	    var detect = ('trim' in String.prototype);
-	    
+
 	    if (detect) return
@@ -335,2 +342,3 @@
 	 *
+	 * @deprecated Will be made private in v5.0
 	 * @param {string} value - The value to normalise
@@ -356,3 +364,3 @@ * @returns {string | boolean | number | undefined} Normalised data
 	  // the length of the trimmed string as well
-	  if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+	  if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
 	    return Number(trimmedValue)
@@ -369,2 +377,3 @@ }
 	 *
+	 * @deprecated Will be made private in v5.0
 	 * @param {DOMStringMap} dataset - HTML element dataset
@@ -374,2 +383,3 @@ * @returns {Object<string, unknown>} Normalised dataset
 	function normaliseDataset (dataset) {
+	  /** @type {Object<string, unknown>} */
 	  var out = {};
@@ -376,0 +386,0 @@

govuk/components/accordion/fixtures.json

@@ -28,3 +28,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n          \n            <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\n          \n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n            <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
@@ -61,3 +61,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n          \n            <p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n            <p class=\"govuk-body\">\n  We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description (wrapped in span)</span>\n            </div>\n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
@@ -94,3 +94,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-long-content-and-description\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-1\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-1\">\n              Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n            </div>\n          \n        </div>\n        <div id=\"with-long-content-and-description-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-1\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-2\">\n              Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>\n            </div>\n          \n        </div>\n        <div id=\"with-long-content-and-description-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-2\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-long-content-and-description\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-1\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-1\">\n              Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n            </div>\n        </div>\n        <div id=\"with-long-content-and-description-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-1\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-long-content-and-description-heading-2\">\n              Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n            </span>\n          </h2>\n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>\n            </div>\n        </div>\n        <div id=\"with-long-content-and-description-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
@@ -122,3 +122,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-1\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-2\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-1\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
@@ -151,3 +151,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-1\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-2\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-1\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
@@ -178,3 +178,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-1\">\n          \n            <a class=\"govuk-link\" href=\"#\">Link A</a>\n          \n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-2\">\n          \n            <a class=\"govuk-link\" href=\"#\">Link B</a>\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-1\">\n            <a class=\"govuk-link\" href=\"#\">Link A</a>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-2\">\n            <a class=\"govuk-link\" href=\"#\">Link B</a>\n        </div>\n      </div>\n</div>"
         },
@@ -211,3 +211,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-translations\" data-i18n.hide-all-sections=\"Collapse all sections\" data-i18n.hide-section=\"Collapse\" data-i18n.hide-section-aria-label=\"Collapse this section\" data-i18n.show-all-sections=\"Expand all sections\" data-i18n.show-section=\"Expand\" data-i18n.show-section-aria-label=\"Expand this section\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-translations-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-translations-heading-1\">\n          \n            <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\n          \n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-translations-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-translations-heading-2\">\n          \n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-translations\" data-i18n.hide-all-sections=\"Collapse all sections\" data-i18n.hide-section=\"Collapse\" data-i18n.hide-section-aria-label=\"Collapse this section\" data-i18n.show-all-sections=\"Expand all sections\" data-i18n.show-section=\"Expand\" data-i18n.show-section-aria-label=\"Expand this section\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-translations-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-translations-heading-1\">\n            <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-2\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"with-translations-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-translations-heading-2\">\n            <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n</div>"
         },
@@ -231,3 +231,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-classes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-classes-heading-1\">\n          \n            <p class=\"govuk-body\">Some content</p>\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-classes-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-classes-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
@@ -253,3 +253,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" data-attribute=\"value\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-attributes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-attributes-heading-1\">\n          \n            <p class=\"govuk-body\">Some content</p>\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" data-attribute=\"value\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-attributes-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-attributes-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
@@ -273,3 +273,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-heading-1\">\n          \n            <p class=\"govuk-body\">Some content</p>\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-heading-1\">\n              Section A\n            </span>\n          </h3>\n        </div>\n        <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
@@ -292,3 +292,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-html-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-html-heading-1\">\n          \n            <p class=\"govuk-body\">Some content</p>\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-html-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-html-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         },
@@ -322,5 +322,24 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-1\">\n          \n            <p class=\"govuk-body\">Some content</p>\n          \n        </div>\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-5\">\n          \n            <p class=\"govuk-body\">Some content</p>\n          \n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-5\">\n              Section B\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-5\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
+        },
+        {
+            "name": "with remember expanded off",
+            "options": {
+                "id": "accordion-remember-expanded-off",
+                "rememberExpanded": false,
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-remember-expanded-off\" data-remember-expanded=\"false\">\n      <div class=\"govuk-accordion__section\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-remember-expanded-off-heading-1\">\n              Section A\n            </span>\n          </h2>\n        </div>\n        <div id=\"accordion-remember-expanded-off-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-remember-expanded-off-heading-1\">\n            <p class=\"govuk-body\">Some content</p>\n        </div>\n      </div>\n</div>"
         }
     ]
-}
+}

govuk/components/accordion/macro-options.json

@@ -6,3 +6,3 @@ [
         "required": true,
-        "description": "Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
+        "description": "Must be unique across the domain of your service if `rememberExpanded` is `true` (as the expanded state of individual instances of the component persists across page loads using [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
     },
@@ -28,2 +28,8 @@ {
     {
+        "name": "rememberExpanded",
+        "type": "boolean",
+        "required": false,
+        "description": "Whether the expanded/collapsed state of the accordion should be saved when a user leaves the page and restored when they return. Default is `true`."
+    },
+    {
         "name": "hideAllSectionsText",
@@ -114,2 +120,2 @@ "type": "string",
     }
-]
+]

govuk/components/back-link/fixtures.json

@@ -62,2 +62,2 @@ {
     ]
-}
+}

govuk/components/back-link/macro-options.json

@@ -32,2 +32,2 @@ [
     }
-]
+]

govuk/components/breadcrumbs/fixtures.json

@@ -19,3 +19,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n  </ol>\n</div>"
         },
@@ -33,3 +33,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n  </ol>\n</div>"
         },
@@ -59,3 +59,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n    </li>\n  </ol>\n</div>"
         },
@@ -77,3 +77,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n    </li>\n  </ol>\n</div>"
         },
@@ -98,3 +98,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n  </ol>\n</div>"
         },
@@ -121,3 +121,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n    </li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n    </li>\n  </ol>\n</div>"
         },
@@ -135,3 +135,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n  </ol>\n</div>"
         },
@@ -152,3 +152,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n  </ol>\n</div>"
         },
@@ -170,3 +170,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n    </li>\n  </ol>\n</div>"
         },
@@ -183,3 +183,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n  </ol>\n</div>"
         },
@@ -200,5 +200,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n    \n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n    \n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs\">\n  <ol class=\"govuk-breadcrumbs__list\">\n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n    <li class=\"govuk-breadcrumbs__list-item\">\n      <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n    </li>\n  </ol>\n</div>"
         }
     ]
-}
+}

govuk/components/breadcrumbs/macro-options.json

@@ -52,2 +52,2 @@ [
     }
-]
+]

govuk/components/button/button.js

@@ -24,2 +24,3 @@ (function (global, factory) {
    *
+   * @deprecated Will be made private in v5.0
    * @returns {Object<string, unknown>} A flattened object of key-value pairs.
@@ -39,2 +40,3 @@ */
       // Prepare an empty return object
+      /** @type {Object<string, unknown>} */
       var flattenedObject = {};
@@ -76,2 +78,3 @@
     // Start with an empty object as our base
+    /** @type {Object<string, unknown>} */
     var formattedConfigObject = {};
@@ -95,10 +98,12 @@
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
    */
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -190,3 +195,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -218,2 +224,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -332,2 +340,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -353,6 +363,6 @@
         var map = {};
-    
+
         for (var i = 0; i < attributes.length; i++) {
           var attribute = attributes[i];
-    
+
           // This regex has been edited from the original polyfill, to add
@@ -365,7 +375,7 @@ // support for period (.) separators in data-* attribute names. These
             var value = attribute.value;
-    
+
             var propName = name.substr(5).replace(/-./g, function (prop) {
               return prop.charAt(1).toUpperCase();
             });
-            
+
             // If this browser supports __defineGetter__ and __defineSetter__,
@@ -394,3 +404,3 @@ // continue using defineProperty. If not (like IE 8 and below), we use
         }
-    
+
         return map;
@@ -402,7 +412,8 @@ }
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
       // Detection from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
       var detect = ('trim' in String.prototype);
-      
+
       if (detect) return
@@ -430,2 +441,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {string} value - The value to normalise
@@ -451,3 +463,3 @@ * @returns {string | boolean | number | undefined} Normalised data
     // the length of the trimmed string as well
-    if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+    if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
       return Number(trimmedValue)
@@ -464,2 +476,3 @@ }
    *
+   * @deprecated Will be made private in v5.0
    * @param {DOMStringMap} dataset - HTML element dataset
@@ -469,2 +482,3 @@ * @returns {Object<string, unknown>} Normalised dataset
   function normaliseDataset (dataset) {
+    /** @type {Object<string, unknown>} */
     var out = {};
@@ -479,3 +493,4 @@
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -501,2 +516,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -751,2 +768,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -919,11 +938,14 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
    * @class
-   * @param {HTMLElement} $module - HTML element to use for button
+   * @param {Element} $module - HTML element to use for button
    * @param {ButtonConfig} [config] - Button config
    */
   function Button ($module, config) {
-    if (!$module) {
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 
+    /** @deprecated Will be made private in v5.0 */
     this.$module = $module;
+
+    /** @deprecated Will be made private in v5.0 */
     this.debounceFormSubmitTimer = null;
@@ -934,2 +956,7 @@
     };
+
+    /**
+     * @deprecated Will be made private in v5.0
+     * @type {ButtonConfig}
+     */
     this.config = mergeConfigs(
@@ -946,2 +973,3 @@ defaultConfig,
   Button.prototype.init = function () {
+    // Check that required elements are present
     if (!this.$module) {
@@ -963,2 +991,3 @@ return
    *
+   * @deprecated Will be made private in v5.0
    * @param {KeyboardEvent} event - Keydown event
@@ -969,3 +998,9 @@ */
 
-    if ($target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) {
+    // Handle space bar only
+    if (event.keyCode !== KEY_SPACE) {
+      return
+    }
+
+    // Handle elements with [role="button"] only
+    if ($target instanceof HTMLElement && $target.getAttribute('role') === 'button') {
       event.preventDefault(); // prevent the page from scrolling
@@ -983,2 +1018,3 @@ $target.click();
    *
+   * @deprecated Will be made private in v5.0
    * @param {MouseEvent} event - Mouse click event
@@ -1008,5 +1044,4 @@ * @returns {undefined | false} Returns undefined, or false when debounced
    * @typedef {object} ButtonConfig
-   * @property {boolean} [preventDoubleClick = false] -
-   *  Prevent accidental double clicks on submit buttons from submitting forms
-   *  multiple times.
+   * @property {boolean} [preventDoubleClick = false] - Prevent accidental double
+   *   clicks on submit buttons from submitting forms multiple times.
    */
@@ -1013,0 +1048,0 @@

govuk/components/button/fixtures.json

@@ -344,4 +344,14 @@ {
             "html": "<button data-prevent-double-click=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
+        },
+        {
+            "name": "id",
+            "options": {
+                "text": "Submit",
+                "element": "input",
+                "id": "submit"
+            },
+            "hidden": true,
+            "html": "<input value=\"Submit\" type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" id=\"submit\">"
         }
     ]
-}
+}

govuk/components/button/macro-options.json

@@ -73,3 +73,9 @@ [
         "description": "Use for the main call to action on your service's start page."
+    },
+    {
+        "name": "id",
+        "type": "string",
+        "required": false,
+        "description": "The ID of the button."
     }
-]
+]

govuk/components/character-count/fixtures.json

@@ -15,3 +15,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n</div>\n\n  \n  <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n</div>\n  \n  <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -27,3 +27,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n</div>\n\n  \n  <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n  Gallwch ddefnyddio hyd at 10 nod\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  \n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n</div>\n  \n  <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n  Gallwch ddefnyddio hyd at 10 nod\n</div>\n\n</div>"
         },
@@ -44,3 +44,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint\">\n    Can you provide more detail?\n  </label>\n\n  \n  \n  <div id=\"with-hint-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n</div>\n\n  \n  <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint\">\n    Can you provide more detail?\n  </label>\n  <div id=\"with-hint-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n</div>\n  \n  <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -59,3 +59,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-default-value\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n  \n  <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 100 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-default-value\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n  \n  <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 100 characters\n</div>\n\n</div>"
         },
@@ -77,3 +77,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n\n\n  \n  \n  <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </p>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n  \n  <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n  <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n  \n  <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -92,3 +92,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"custom-rows\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n</div>\n\n  \n  <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"custom-rows\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n</div>\n  \n  <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -108,3 +108,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n</div>\n\n  \n  <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n</div>\n  \n  <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -122,3 +122,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"word-count\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n</div>\n\n  \n  <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 words\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"word-count\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n</div>\n  \n  <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 words\n</div>\n\n</div>"
         },
@@ -137,3 +137,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-threshold\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n</div>\n\n  \n  <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-threshold\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n</div>\n  \n  <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -166,3 +166,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n\n   data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\"\n data-i18n.characters-at-limit=\"Zero characters left\"\n   data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\"\n\n   data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\"\n data-i18n.words-at-limit=\"Zero words left\"\n   data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n</div>\n\n  \n  <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n  <div class=\"govuk-form-group\">\n  \n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n</div>\n  \n  <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -181,3 +181,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n</div>\n\n  \n  <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n</div>\n  \n  <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -198,3 +198,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n</div>\n\n  \n  <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n</div>\n  \n  <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -215,3 +215,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group app-character-count--custom-modifier\">\n  <label class=\"govuk-label\" for=\"with-formgroup\">\n    With formgroup\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n</div>\n\n  \n  <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group app-character-count--custom-modifier\">\n  <label class=\"govuk-label\" for=\"with-formgroup\">\n    With formgroup\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n</div>\n  \n  <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -232,3 +232,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n    With custom countMessage class\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n</div>\n\n  \n  <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n    With custom countMessage class\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n</div>\n  \n  <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -247,3 +247,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-spellcheck\">\n    With spellcheck\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n</div>\n\n  \n  <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-spellcheck\">\n    With spellcheck\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n</div>\n  \n  <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -262,3 +262,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"without-spellcheck\">\n    Without spellcheck\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n</div>\n\n  \n  <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"without-spellcheck\">\n    Without spellcheck\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n</div>\n  \n  <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -280,3 +280,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n\n\n  \n  \n  <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n  \n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n  <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n  \n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -294,3 +294,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n</div>\n\n  \n  <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n</div>\n  \n  <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -308,3 +308,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"user1.profile[address]\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n</div>\n\n  \n  <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"user1.profile[address]\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n</div>\n  \n  <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -325,3 +325,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"maxlength-should-be-removed\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"maxlength-should-be-removed\" name=\"address\" rows=\"5\" aria-describedby=\"maxlength-should-be-removed-info\" maxlength=\"10\"></textarea>\n</div>\n\n  \n  <div id=\"maxlength-should-be-removed-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"maxlength-should-be-removed\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"maxlength-should-be-removed\" name=\"address\" rows=\"5\" aria-describedby=\"maxlength-should-be-removed-info\" maxlength=\"10\"></textarea>\n</div>\n  \n  <div id=\"maxlength-should-be-removed-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -338,3 +338,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"to-configure-in-javascript\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"to-configure-in-javascript\" name=\"address\" rows=\"5\" aria-describedby=\"to-configure-in-javascript-info\"></textarea>\n</div>\n\n  \n  <div id=\"to-configure-in-javascript-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"to-configure-in-javascript\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"to-configure-in-javascript\" name=\"address\" rows=\"5\" aria-describedby=\"to-configure-in-javascript-info\"></textarea>\n</div>\n  \n  <div id=\"to-configure-in-javascript-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
         },
@@ -352,3 +352,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\"\n\n   data-i18n.textarea-description.other=\"No more than %{count} characters\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n</div>\n\n  \n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-i18n.textarea-description.other=\"No more than %{count} characters\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n</div>\n  \n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
         },
@@ -365,5 +365,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\"\n>\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n</div>\n\n  \n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n</div>\n  \n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
         }
     ]
-}
+}

govuk/components/character-count/macro-options.json

@@ -130,3 +130,3 @@ [
     {
-        "name": "charactersUnderLimitText",
+        "name": "charactersOverLimitText",
         "type": "object",
@@ -149,3 +149,3 @@ "required": false,
     {
-        "name": "wordsUnderLimitText",
+        "name": "wordsOverLimitText",
         "type": "object",
@@ -155,2 +155,2 @@ "required": false,
     }
-]
+]

govuk/components/checkboxes/checkboxes.js

@@ -22,4 +22,6 @@ (function (global, factory) {
    *
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
-   * @param {nodeListIterator} callback - Callback function to run for each node
+   * @deprecated Will be made private in v5.0
+   * @template {Node} ElementType
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
+   * @param {nodeListIterator<ElementType>} callback - Callback function to run for each node
    * @returns {void}
@@ -37,10 +39,12 @@ */
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
    */
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -132,3 +136,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -398,3 +403,4 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -426,2 +432,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -540,2 +548,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -631,3 +641,4 @@
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -653,2 +664,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -903,2 +916,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -1068,7 +1083,19 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
    * @class
-   * @param {HTMLElement} $module - HTML element to use for checkboxes
+   * @param {Element} $module - HTML element to use for checkboxes
    */
   function Checkboxes ($module) {
+    if (!($module instanceof HTMLElement)) {
+      return this
+    }
+
+    var $inputs = $module.querySelectorAll('input[type="checkbox"]');
+    if (!$inputs.length) {
+      return this
+    }
+
+    /** @deprecated Will be made private in v5.0 */
     this.$module = $module;
-    this.$inputs = $module.querySelectorAll('input[type="checkbox"]');
+
+    /** @deprecated Will be made private in v5.0 */
+    this.$inputs = $inputs;
   }
@@ -1091,2 +1118,7 @@
   Checkboxes.prototype.init = function () {
+    // Check that required elements are present
+    if (!this.$module || !this.$inputs) {
+      return
+    }
+
     var $module = this.$module;
@@ -1114,7 +1146,6 @@ var $inputs = this.$inputs;
     // that support it.
-    if ('onpageshow' in window) {
-      window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
-    } else {
-      window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
-    }
+    window.addEventListener(
+      'onpageshow' in window ? 'pageshow' : 'DOMContentLoaded',
+      this.syncAllConditionalReveals.bind(this)
+    );
 
@@ -1132,2 +1163,4 @@ // Although we've set up handlers to sync state on the pageshow or
    * Sync the conditional reveal states for all checkboxes in this $module.
+   *
+   * @deprecated Will be made private in v5.0
    */
@@ -1144,11 +1177,16 @@ Checkboxes.prototype.syncAllConditionalReveals = function () {
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLInputElement} $input - Checkbox input
    */
   Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
-    var $target = document.getElementById($input.getAttribute('aria-controls'));
+    var targetId = $input.getAttribute('aria-controls');
+    if (!targetId) {
+      return
+    }
 
+    var $target = document.getElementById(targetId);
     if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
       var inputIsChecked = $input.checked;
 
-      $input.setAttribute('aria-expanded', inputIsChecked);
+      $input.setAttribute('aria-expanded', inputIsChecked.toString());
       $target.classList.toggle('govuk-checkboxes__conditional--hidden', !inputIsChecked);
@@ -1164,7 +1202,14 @@ }
    *
-   * @param {HTMLElement} $input - Checkbox input
+   * @deprecated Will be made private in v5.0
+   * @param {HTMLInputElement} $input - Checkbox input
    */
   Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
-    var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]');
+    var $component = this;
 
+    /** @type {NodeListOf<HTMLInputElement>} */
+    // @ts-expect-error `NodeListOf<HTMLInputElement>` type expected
+    var allInputsWithSameName = document.querySelectorAll(
+      'input[type="checkbox"][name="' + $input.name + '"]'
+    );
+
     nodeListForEach(allInputsWithSameName, function ($inputWithSameName) {
@@ -1174,5 +1219,5 @@ var hasSameFormOwner = ($input.form === $inputWithSameName.form);
         $inputWithSameName.checked = false;
-        this.syncConditionalRevealWithInputState($inputWithSameName);
+        $component.syncConditionalRevealWithInputState($inputWithSameName);
       }
-    }.bind(this));
+    });
   };
@@ -1187,5 +1232,10 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLInputElement} $input - Checkbox input
    */
   Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
+    var $component = this;
+
+    /** @type {NodeListOf<HTMLInputElement>} */
+    // @ts-expect-error `NodeListOf<HTMLInputElement>` type expected
     var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
@@ -1199,5 +1249,5 @@ 'input[data-behaviour="exclusive"][type="checkbox"][name="' + $input.name + '"]'
         $exclusiveInput.checked = false;
-        this.syncConditionalRevealWithInputState($exclusiveInput);
+        $component.syncConditionalRevealWithInputState($exclusiveInput);
       }
-    }.bind(this));
+    });
   };
@@ -1211,2 +1261,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {MouseEvent} event - Click event
@@ -1218,3 +1269,3 @@ */
     // Ignore clicks on things that aren't checkbox inputs
-    if ($clickedInput.type !== 'checkbox') {
+    if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== 'checkbox') {
       return
@@ -1221,0 +1272,0 @@ }

govuk/components/checkboxes/macro-options.json

@@ -167,2 +167,2 @@ [
     }
-]
+]

govuk/components/cookie-banner/fixtures.json

@@ -33,3 +33,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this government service</h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n          \n        \n          \n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n          \n        \n          \n            \n              \n              \n              <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this government service</h2>\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n              <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n      </div>\n    </div>\n</div>"
         },
@@ -53,3 +53,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n      </div>\n    </div>\n</div>"
         },
@@ -73,3 +73,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n      </div>\n    </div>\n</div>"
         },
@@ -127,3 +127,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n          \n        \n          \n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n          \n        \n          \n            \n              \n              \n              <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n              <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n      </div>\n    </div>\n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n      </div>\n    </div>\n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n      </div>\n    </div>\n</div>"
         },
@@ -159,3 +159,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on <span>my service</span></h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies in <span>our service</span>.</p><p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n          \n        \n          \n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n          \n        \n          \n            \n              \n              \n              <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on <span>my service</span></h2>\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies in <span>our service</span>.</p><p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n              <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n      </div>\n    </div>\n</div>"
         },
@@ -172,3 +172,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on <span>my service</span></h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on <span>my service</span></h2>\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n    </div>\n</div>"
         },
@@ -185,3 +185,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on &lt;span&gt;my service&lt;/span&gt;</h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on &lt;span&gt;my service&lt;/span&gt;</h2>\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n    </div>\n</div>"
         },
@@ -198,3 +198,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies in <span>our service</span>.</p></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies in <span>our service</span>.</p></div>\n      </div>\n    </div>\n\n    </div>\n</div>"
         },
@@ -211,3 +211,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n      \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container app-my-class\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container app-my-class\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n    </div>\n</div>"
         },
@@ -226,3 +226,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" data-attribute=\"my-value\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" data-attribute=\"my-value\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n    </div>\n</div>"
         },
@@ -240,3 +240,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookies on GOV.UK\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies on GOV.UK</p></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookies on GOV.UK\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies on GOV.UK</p></div>\n      </div>\n    </div>\n\n    </div>\n</div>"
         },
@@ -253,3 +253,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n    </div>\n</div>"
         },
@@ -266,3 +266,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n    </div>\n</div>"
         },
@@ -283,3 +283,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button class=\"govuk-button\" data-module=\"govuk-button\">\n              This is a button\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button class=\"govuk-button\" data-module=\"govuk-button\">\n              This is a button\n            </button>\n      </div>\n    </div>\n</div>"
         },
@@ -301,3 +301,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n              \n              \n              <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n              <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n      </div>\n    </div>\n</div>"
         },
@@ -321,3 +321,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n              \n              \n              <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n              <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n      </div>\n    </div>\n</div>"
         },
@@ -340,3 +340,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n              <a href=\"/link\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n              This is a link\n            </a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n              <a href=\"/link\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n              This is a link\n            </a>\n      </div>\n    </div>\n</div>"
         },
@@ -358,3 +358,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Button\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Button\n            </button>\n      </div>\n    </div>\n</div>"
         },
@@ -376,3 +376,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button class=\"govuk-button my-button-class app-button-class\" data-module=\"govuk-button\">\n              Button with custom classes\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button class=\"govuk-button my-button-class app-button-class\" data-module=\"govuk-button\">\n              Button with custom classes\n            </button>\n      </div>\n    </div>\n</div>"
         },
@@ -396,3 +396,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button class=\"govuk-button\" data-module=\"govuk-button\" data-button-attribute=\"my-value\">\n              Button with attributes\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button class=\"govuk-button\" data-module=\"govuk-button\" data-button-attribute=\"my-value\">\n              Button with attributes\n            </button>\n      </div>\n    </div>\n</div>"
         },
@@ -415,3 +415,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n              \n              \n                \n              \n              <a class=\"govuk-link my-link-class app-link-class\" href=\"/my-link\">Link with custom classes</a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n              <a class=\"govuk-link my-link-class app-link-class\" href=\"/my-link\">Link with custom classes</a>\n      </div>\n    </div>\n</div>"
         },
@@ -436,3 +436,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n              \n              \n              <a class=\"govuk-link\" href=\"/link\" data-link-attribute=\"my-value\">Link with attributes</a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n              <a class=\"govuk-link\" href=\"/link\" data-link-attribute=\"my-value\">Link with attributes</a>\n      </div>\n    </div>\n</div>"
         },
@@ -493,5 +493,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\" hidden data-hide-cookie-banner=\"true\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n          \n        \n          \n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n          \n        \n          \n            \n              \n              \n              <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n            \n          \n        \n      </div>\n      \n    </div>\n  \n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>"
+            "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\" hidden data-hide-cookie-banner=\"true\">\n    <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n              <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n      </div>\n    </div>\n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n      </div>\n    </div>\n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      <div class=\"govuk-button-group\">\n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide cookie message\n            </button>\n      </div>\n    </div>\n</div>"
         }
     ]
-}
+}

govuk/components/cookie-banner/macro-options.json

@@ -132,2 +132,2 @@ [
     }
-]
+]

govuk/components/date-input/fixtures.json

@@ -10,3 +10,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -42,3 +42,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -73,3 +73,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -107,3 +107,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -142,3 +142,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -177,3 +177,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -212,3 +212,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -230,3 +230,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -251,3 +251,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -286,3 +286,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -327,3 +327,3 @@ {
             "hidden": false,
-            "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>"
+            "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>"
         },
@@ -337,3 +337,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -349,3 +349,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -359,3 +359,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -374,3 +374,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -390,3 +390,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -410,3 +410,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -433,3 +433,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -453,3 +453,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -477,3 +477,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -495,3 +495,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -513,3 +513,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -527,3 +527,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -550,3 +550,3 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         },
@@ -570,5 +570,5 @@ {
             "hidden": true,
-            "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>"
+            "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>"
         }
     ]
-}
+}

govuk/components/date-input/macro-options.json

@@ -117,2 +117,2 @@ [
     }
-]
+]

govuk/components/details/details.js

@@ -22,2 +22,3 @@ (function (global, factory) {
    *
+   * @deprecated Will be made private in v5.0
    * @returns {string} Unique ID
@@ -38,10 +39,12 @@ */
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
    */
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -67,3 +70,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -95,2 +99,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -209,3 +215,4 @@
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -297,2 +304,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -547,2 +556,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -715,6 +726,17 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
    * @class
-   * @param {HTMLElement} $module - HTML element to use for details
+   * @param {Element} $module - HTML element to use for details
    */
   function Details ($module) {
+    if (!($module instanceof HTMLElement)) {
+      return this
+    }
+
+    /** @deprecated Will be made private in v5.0 */
     this.$module = $module;
+
+    /** @deprecated Will be made private in v5.0 */
+    this.$summary = null;
+
+    /** @deprecated Will be made private in v5.0 */
+    this.$content = null;
   }
@@ -726,2 +748,3 @@
   Details.prototype.init = function () {
+    // Check that required elements are present
     if (!this.$module) {
@@ -732,9 +755,8 @@ return
     // If there is native details support, we want to avoid running code to polyfill native behaviour.
-    var hasNativeDetails = typeof this.$module.open === 'boolean';
+    var hasNativeDetails = 'HTMLDetailsElement' in window &&
+      this.$module instanceof HTMLDetailsElement;
 
-    if (hasNativeDetails) {
-      return
+    if (!hasNativeDetails) {
+      this.polyfillDetails();
     }
-
-    this.polyfillDetails();
   };
@@ -744,2 +766,4 @@
    * Polyfill component in older browsers
+   *
+   * @deprecated Will be made private in v5.0
    */
@@ -795,2 +819,3 @@ Details.prototype.polyfillDetails = function () {
    *
+   * @deprecated Will be made private in v5.0
    * @returns {boolean} Returns true
@@ -815,2 +840,3 @@ */
    *
+   * @deprecated Will be made private in v5.0
    * @param {polyfillHandleInputsCallback} callback - function
@@ -823,3 +849,3 @@ */
       if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
-        if ($target.nodeName.toLowerCase() === 'summary') {
+        if ($target instanceof HTMLElement && $target.nodeName.toLowerCase() === 'summary') {
           // Prevent space from scrolling the page
@@ -843,3 +869,3 @@ // and enter from submitting a form
       if (event.keyCode === KEY_SPACE) {
-        if ($target.nodeName.toLowerCase() === 'summary') {
+        if ($target instanceof HTMLElement && $target.nodeName.toLowerCase() === 'summary') {
           event.preventDefault();
@@ -846,0 +872,0 @@ }

govuk/components/details/fixtures.json

@@ -103,2 +103,2 @@ {
     ]
-}
+}

govuk/components/details/macro-options.json

@@ -56,2 +56,2 @@ [
     }
-]
+]

govuk/components/error-message/fixtures.json

@@ -10,3 +10,3 @@ {
             "hidden": false,
-            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</p>"
+            "html": "<p class=\"govuk-error-message\">\n<span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</p>"
         },
@@ -20,3 +20,3 @@ {
             "hidden": false,
-            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Gwall:</span> Neges gwall am yr enw llawn yn mynd yma\n</p>"
+            "html": "<p class=\"govuk-error-message\">\n<span class=\"govuk-visually-hidden\">Gwall:</span> Neges gwall am yr enw llawn yn mynd yma\n</p>"
         },
@@ -30,3 +30,3 @@ {
             "hidden": true,
-            "html": "<p id=\"my-error-message-id\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
+            "html": "<p id=\"my-error-message-id\" class=\"govuk-error-message\">\n<span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
         },
@@ -40,3 +40,3 @@ {
             "hidden": true,
-            "html": "<p class=\"govuk-error-message custom-class\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
+            "html": "<p class=\"govuk-error-message custom-class\">\n<span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
         },
@@ -49,3 +49,3 @@ {
             "hidden": true,
-            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; in body\n</p>"
+            "html": "<p class=\"govuk-error-message\">\n<span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; in body\n</p>"
         },
@@ -58,3 +58,3 @@ {
             "hidden": true,
-            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</p>"
+            "html": "<p class=\"govuk-error-message\">\n<span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</p>"
         },
@@ -71,3 +71,3 @@ {
             "hidden": true,
-            "html": "<p class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
+            "html": "<p class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n<span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
         },
@@ -81,3 +81,3 @@ {
             "hidden": true,
-            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</p>"
+            "html": "<p class=\"govuk-error-message\">\n<span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</p>"
         },
@@ -91,5 +91,5 @@ {
             "hidden": true,
-            "html": "<p class=\"govuk-error-message\">\n  There is an error on line 42\n</p>"
+            "html": "<p class=\"govuk-error-message\">\nThere is an error on line 42\n</p>"
         }
     ]
-}
+}

govuk/components/error-message/macro-options.json

@@ -38,2 +38,2 @@ [
     }
-]
+]

govuk/components/error-summary/error-summary.js

@@ -24,2 +24,3 @@ (function (global, factory) {
    *
+   * @deprecated Will be made private in v5.0
    * @returns {Object<string, unknown>} A flattened object of key-value pairs.
@@ -39,2 +40,3 @@ */
       // Prepare an empty return object
+      /** @type {Object<string, unknown>} */
       var flattenedObject = {};
@@ -76,2 +78,3 @@
     // Start with an empty object as our base
+    /** @type {Object<string, unknown>} */
     var formattedConfigObject = {};
@@ -95,10 +98,12 @@
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
    */
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -190,3 +195,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -218,2 +224,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -332,2 +340,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -353,6 +363,6 @@
         var map = {};
-    
+
         for (var i = 0; i < attributes.length; i++) {
           var attribute = attributes[i];
-    
+
           // This regex has been edited from the original polyfill, to add
@@ -365,7 +375,7 @@ // support for period (.) separators in data-* attribute names. These
             var value = attribute.value;
-    
+
             var propName = name.substr(5).replace(/-./g, function (prop) {
               return prop.charAt(1).toUpperCase();
             });
-            
+
             // If this browser supports __defineGetter__ and __defineSetter__,
@@ -394,3 +404,3 @@ // continue using defineProperty. If not (like IE 8 and below), we use
         }
-    
+
         return map;
@@ -402,7 +412,8 @@ }
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
       // Detection from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
       var detect = ('trim' in String.prototype);
-      
+
       if (detect) return
@@ -430,2 +441,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {string} value - The value to normalise
@@ -451,3 +463,3 @@ * @returns {string | boolean | number | undefined} Normalised data
     // the length of the trimmed string as well
-    if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+    if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
       return Number(trimmedValue)
@@ -464,2 +476,3 @@ }
    *
+   * @deprecated Will be made private in v5.0
    * @param {DOMStringMap} dataset - HTML element dataset
@@ -469,2 +482,3 @@ * @returns {Object<string, unknown>} Normalised dataset
   function normaliseDataset (dataset) {
+    /** @type {Object<string, unknown>} */
     var out = {};
@@ -479,3 +493,4 @@
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -504,2 +519,4 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/matches/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -528,3 +545,4 @@
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -550,2 +568,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -800,2 +820,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -967,3 +989,3 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
    * @class
-   * @param {HTMLElement} $module - HTML element to use for error summary
+   * @param {Element} $module - HTML element to use for error summary
    * @param {ErrorSummaryConfig} [config] - Error summary config
@@ -979,3 +1001,3 @@ */
     // working the same now we read the elements data attributes
-    if (!$module) {
+    if (!($module instanceof HTMLElement)) {
       // Little safety in case code gets ported as-is
@@ -986,2 +1008,3 @@ // into and ES6 class constructor, where the return value matters
 
+    /** @deprecated Will be made private in v5.0 */
     this.$module = $module;
@@ -992,2 +1015,7 @@
     };
+
+    /**
+     * @deprecated Will be made private in v5.0
+     * @type {ErrorSummaryConfig}
+     */
     this.config = mergeConfigs(
@@ -1004,7 +1032,9 @@ defaultConfig,
   ErrorSummary.prototype.init = function () {
-    var $module = this.$module;
-    if (!$module) {
+    // Check that required elements are present
+    if (!this.$module) {
       return
     }
 
+    var $module = this.$module;
+
     this.setFocus();
@@ -1016,2 +1046,4 @@ $module.addEventListener('click', this.handleClick.bind(this));
    * Focus the error summary
+   *
+   * @deprecated Will be made private in v5.0
    */
@@ -1039,2 +1071,3 @@ ErrorSummary.prototype.setFocus = function () {
    *
+   * @deprecated Will be made private in v5.0
    * @param {MouseEvent} event - Click event
@@ -1064,2 +1097,3 @@ */
    *
+   * @deprecated Will be made private in v5.0
    * @param {EventTarget} $target - Event target
@@ -1070,3 +1104,3 @@ * @returns {boolean} True if the target was able to be focussed
     // If the element that was clicked was not a link, return early
-    if ($target.tagName !== 'A' || $target.href === false) {
+    if (!($target instanceof HTMLAnchorElement)) {
       return false
@@ -1076,2 +1110,6 @@ }
     var inputId = this.getFragmentFromUrl($target.href);
+    if (!inputId) {
+      return false
+    }
+
     var $input = document.getElementById(inputId);
@@ -1102,8 +1140,9 @@ if (!$input) {
    *
+   * @deprecated Will be made private in v5.0
    * @param {string} url - URL
-   * @returns {string} Fragment from URL, without the hash
+   * @returns {string | undefined} Fragment from URL, without the hash
    */
   ErrorSummary.prototype.getFragmentFromUrl = function (url) {
     if (url.indexOf('#') === -1) {
-      return false
+      return undefined
     }
@@ -1125,5 +1164,6 @@
    *
-   * @param {HTMLElement} $input - The input
-   * @returns {HTMLElement} Associated legend or label, or null if no associated
-   *                        legend or label can be found
+   * @deprecated Will be made private in v5.0
+   * @param {Element} $input - The input
+   * @returns {Element | null} Associated legend or label, or null if no associated
+   *   legend or label can be found
    */
@@ -1141,3 +1181,3 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
         // is one.
-        if ($input.type === 'checkbox' || $input.type === 'radio') {
+        if ($input instanceof HTMLInputElement && ($input.type === 'checkbox' || $input.type === 'radio')) {
           return $candidateLegend
@@ -1175,4 +1215,4 @@ }
    * @typedef {object} ErrorSummaryConfig
-   * @property {boolean} [disableAutoFocus = false] -
-   *  If set to `true` the error summary will not be focussed when the page loads.
+   * @property {boolean} [disableAutoFocus = false] - If set to `true` the error
+   *   summary will not be focussed when the page loads.
    */
@@ -1179,0 +1219,0 @@

govuk/components/error-summary/fixtures.json

@@ -20,3 +20,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n          \n          </li>\n        \n          <li>\n          \n            <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n          </li>\n          <li>\n            <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -34,3 +34,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -52,3 +52,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n          <li>\n          \n            <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n          <li>\n            <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -71,3 +71,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n        <p>\n          Please fix the errors below.\n        </p>\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n          <li>\n          \n            <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <p>\n          Please fix the errors below.\n        </p>\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n          <li>\n            <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -85,3 +85,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Alert, &lt;em&gt;alert&lt;/em&gt;\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Alert, &lt;em&gt;alert&lt;/em&gt;\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -99,3 +99,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Alert, <em>alert</em>\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Alert, <em>alert</em>\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -114,3 +114,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n        <p>\n          Lorem ipsum\n        </p>\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <p>\n          Lorem ipsum\n        </p>\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -129,3 +129,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n        <p>\n          See errors below (&gt;)\n        </p>\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <p>\n          See errors below (&gt;)\n        </p>\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -144,3 +144,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n        <p>\n          See <span>errors</span> below\n        </p>\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n        <p>\n          See <span>errors</span> below\n        </p>\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -159,3 +159,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary extra-class one-more-class\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary extra-class one-more-class\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -177,3 +177,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Invalid username or password\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -196,3 +196,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -210,3 +210,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -224,3 +224,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            The date your passport was issued <b>must</b> be in the past\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            The date your passport was issued <b>must</b> be in the past\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -239,3 +239,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -254,3 +254,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n          <li>\n            <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n          </li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -264,3 +264,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"true\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"true\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n      </ul>\n    </div>\n  </div>\n</div>"
         },
@@ -274,5 +274,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"false\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"false\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n      </ul>\n    </div>\n  </div>\n</div>"
         }
     ]
-}
+}

govuk/components/error-summary/macro-options.json

@@ -82,2 +82,2 @@ [
     }
-]
+]

govuk/components/fieldset/fixtures.json

@@ -12,3 +12,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
@@ -24,3 +24,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
@@ -36,3 +36,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
@@ -48,3 +48,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
@@ -60,3 +60,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
@@ -73,3 +73,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
@@ -86,3 +86,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
@@ -99,3 +99,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
@@ -112,3 +112,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
@@ -124,3 +124,3 @@ {
             "hidden": false,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  </legend>\n</fieldset>"
         },
@@ -136,3 +136,3 @@ {
             "hidden": true,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n  <div class=\"my-content\">\n  <p>This is some content to put inside the fieldset</p>\n</div>\n\n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your address?\n  </legend>\n  <div class=\"my-content\">\n  <p>This is some content to put inside the fieldset</p>\n</div>\n\n</fieldset>"
         },
@@ -148,3 +148,3 @@ {
             "hidden": true,
-            "html": "<fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    Which option?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n  <legend class=\"govuk-fieldset__legend\">\n    Which option?\n  </legend>\n</fieldset>"
         },
@@ -159,3 +159,3 @@ {
             "hidden": true,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is &lt;b&gt;your&lt;/b&gt; address?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is &lt;b&gt;your&lt;/b&gt; address?\n  </legend>\n</fieldset>"
         },
@@ -170,3 +170,3 @@ {
             "hidden": true,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is <b>your</b> address?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is <b>your</b> address?\n  </legend>\n</fieldset>"
         },
@@ -182,3 +182,3 @@ {
             "hidden": true,
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend my-custom-class\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend my-custom-class\">\n    What is your address?\n  </legend>\n</fieldset>"
         },
@@ -194,3 +194,3 @@ {
             "hidden": true,
-            "html": "<fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    Which option?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\">\n  <legend class=\"govuk-fieldset__legend\">\n    Which option?\n  </legend>\n</fieldset>"
         },
@@ -206,3 +206,3 @@ {
             "hidden": true,
-            "html": "<fieldset class=\"govuk-fieldset\" role=\"group\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    Which option?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\" role=\"group\">\n  <legend class=\"govuk-fieldset__legend\">\n    Which option?\n  </legend>\n</fieldset>"
         },
@@ -220,5 +220,5 @@ {
             "hidden": true,
-            "html": "<fieldset class=\"govuk-fieldset\" data-attribute=\"value\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    Which option?\n  \n  </legend>\n  \n\n</fieldset>"
+            "html": "<fieldset class=\"govuk-fieldset\" data-attribute=\"value\">\n  <legend class=\"govuk-fieldset__legend\">\n    Which option?\n  </legend>\n</fieldset>"
         }
     ]
-}
+}

govuk/components/fieldset/macro-options.json

@@ -70,2 +70,2 @@ [
     }
-]
+]

govuk/components/file-upload/fixtures.json

@@ -14,3 +14,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
         },
@@ -30,3 +30,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-2\">\n    Upload your photo\n  </label>\n\n  \n  \n  <div id=\"file-upload-2-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-2\" name=\"file-upload-2\" type=\"file\" aria-describedby=\"file-upload-2-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-2\">\n    Upload your photo\n  </label>\n  <div id=\"file-upload-2-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n  <input class=\"govuk-file-upload\" id=\"file-upload-2\" name=\"file-upload-2\" type=\"file\" aria-describedby=\"file-upload-2-hint\">\n</div>"
         },
@@ -49,3 +49,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-3\">\n    Upload a file\n  </label>\n\n  \n  \n  <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n\n\n  \n  \n  <p id=\"file-upload-3-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-3\">\n    Upload a file\n  </label>\n  <div id=\"file-upload-3-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n  <p id=\"file-upload-3-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-3\" name=\"file-upload-3\" type=\"file\" aria-describedby=\"file-upload-3-hint file-upload-3-error\">\n</div>"
         },
@@ -63,3 +63,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-4\">\n    Upload a photo\n  </label>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-4\" name=\"file-upload-4\" type=\"file\" value=\"C:\\fakepath\\myphoto.jpg\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-4\">\n    Upload a photo\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-4\" name=\"file-upload-4\" type=\"file\" value=\"C:&#92;fakepath&#92;myphoto.jpg\">\n</div>"
         },
@@ -78,3 +78,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"file-upload-1\">\n      Upload a file\n    </label>\n    </h1>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"file-upload-1\">\n      Upload a file\n    </label>\n    </h1>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
         },
@@ -94,3 +94,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"file-upload-1\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-1\" name=\"file-upload-1\" type=\"file\">\n</div>"
         },
@@ -110,3 +110,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-attributes\">\n    Upload a file\n  </label>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-attributes\" name=\"file-upload-attributes\" type=\"file\" accept=\".jpg, .jpeg, .png\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-attributes\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-attributes\" name=\"file-upload-attributes\" type=\"file\" accept=\".jpg, .jpeg, .png\">\n</div>"
         },
@@ -124,3 +124,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-classes\">\n    Upload a file\n  </label>\n\n\n  <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"file-upload-classes\" name=\"file-upload-classes\" type=\"file\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-classes\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"file-upload-classes\" name=\"file-upload-classes\" type=\"file\">\n</div>"
         },
@@ -138,3 +138,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-describedby\">\n    Upload a file\n  </label>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-describedby\" name=\"file-upload-describedby\" type=\"file\" aria-describedby=\"some-id\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-describedby\">\n    Upload a file\n  </label>\n  <input class=\"govuk-file-upload\" id=\"file-upload-describedby\" name=\"file-upload-describedby\" type=\"file\" aria-describedby=\"some-id\">\n</div>"
         },
@@ -155,3 +155,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-hint-describedby\">\n    Upload a file\n  </label>\n\n  \n  \n  <div id=\"file-upload-hint-describedby-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-hint-describedby\" name=\"file-upload-hint-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-hint-describedby-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-hint-describedby\">\n    Upload a file\n  </label>\n  <div id=\"file-upload-hint-describedby-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n  <input class=\"govuk-file-upload\" id=\"file-upload-hint-describedby\" name=\"file-upload-hint-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-hint-describedby-hint\">\n</div>"
         },
@@ -171,3 +171,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-with-error\">\n    Upload a file\n  </label>\n\n\n  \n  \n  <p id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"file-upload-with-error\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-with-error\">\n    Upload a file\n  </label>\n  <p id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"file-upload-with-error\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>"
         },
@@ -188,3 +188,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-error-describedby\">\n    Upload a file\n  </label>\n\n\n  \n  \n  <p id=\"file-upload-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby\" name=\"file-upload-error-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-error-describedby\">\n    Upload a file\n  </label>\n  <p id=\"file-upload-error-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby\" name=\"file-upload-error-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-error\">\n</div>"
         },
@@ -208,5 +208,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-error-describedby-hint\">\n    Upload a file\n  </label>\n\n  \n  \n  <div id=\"file-upload-error-describedby-hint-hint\" class=\"govuk-hint\">\n    hint\n  </div>\n\n\n  \n  \n  <p id=\"file-upload-error-describedby-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby-hint\" name=\"file-upload-error-describedby-hint\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-hint-hint file-upload-error-describedby-hint-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-error-describedby-hint\">\n    Upload a file\n  </label>\n  <div id=\"file-upload-error-describedby-hint-hint\" class=\"govuk-hint\">\n    hint\n  </div>\n  <p id=\"file-upload-error-describedby-hint-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby-hint\" name=\"file-upload-error-describedby-hint\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-hint-hint file-upload-error-describedby-hint-error\">\n</div>"
         }
     ]
-}
+}

govuk/components/file-upload/macro-options.json

@@ -21,2 +21,8 @@ [
     {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": "If `true`, file input will be disabled."
+    },
+    {
         "name": "describedBy",
@@ -74,2 +80,2 @@ "type": "string",
     }
-]
+]

govuk/components/footer/macro-options.json

@@ -164,2 +164,2 @@ [
     }
-]
+]

govuk/components/header/header.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -29,3 +30,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -57,2 +59,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -171,3 +175,4 @@
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -259,2 +264,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -509,2 +516,4 @@
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -674,7 +683,16 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
 	 * @class
-	 * @param {HTMLElement} $module - HTML element to use for header
+	 * @param {Element} $module - HTML element to use for header
 	 */
 	function Header ($module) {
+	  if (!($module instanceof HTMLElement)) {
+	    return this
+	  }
+
+	  /** @deprecated Will be made private in v5.0 */
 	  this.$module = $module;
-	  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
+
+	  /** @deprecated Will be made private in v5.0 */
+	  this.$menuButton = $module.querySelector('.govuk-js-header-toggle');
+
+	  /** @deprecated Will be made private in v5.0 */
 	  this.$menu = this.$menuButton && $module.querySelector(
@@ -684,11 +702,19 @@ '#' + this.$menuButton.getAttribute('aria-controls')
 
-	  // Save the opened/closed state for the nav in memory so that we can
-	  // accurately maintain state when the screen is changed from small to
-	  // big and back to small
+	  /**
+	   * Save the opened/closed state for the nav in memory so that we can
+	   * accurately maintain state when the screen is changed from small to
+	   * big and back to small
+	   *
+	   * @deprecated Will be made private in v5.0
+	   */
 	  this.menuIsOpen = false;
 
-	  // A global const for storing a matchMedia instance which we'll use to
-	  // detect when a screen size change happens. We set this later during the
-	  // init function and rely on it being null if the feature isn't available
-	  // to initially apply hidden attributes
+	  /**
+	   * A global const for storing a matchMedia instance which we'll use to
+	   * detect when a screen size change happens. We set this later during the
+	   * init function and rely on it being null if the feature isn't available
+	   * to initially apply hidden attributes
+	   *
+	   * @deprecated Will be made private in v5.0
+	   */
 	  this.mql = null;
@@ -708,2 +734,3 @@ }
 	Header.prototype.init = function () {
+	  // Check that required elements are present
 	  if (!this.$module || !this.$menuButton || !this.$menu) {
@@ -721,4 +748,5 @@ return
 	      // addListener is a deprecated function, however addEventListener
-	      // isn't supported by IE or Safari. We therefore add this in as
+	      // isn't supported by IE or Safari < 14. We therefore add this in as
 	      // a fallback for those browsers
+	      // @ts-expect-error Property 'addListener' does not exist
 	      this.mql.addListener(this.syncState.bind(this));
@@ -741,2 +769,4 @@ }
 	 * hidden if the matchMedia is triggered to desktop.
+	 *
+	 * @deprecated Will be made private in v5.0
 	 */
@@ -749,3 +779,3 @@ Header.prototype.syncState = function () {
 	    this.$menuButton.removeAttribute('hidden');
-	    this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen);
+	    this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
 
@@ -765,2 +795,4 @@ if (this.menuIsOpen) {
 	 * sync the accessibility state and menu button state
+	 *
+	 * @deprecated Will be made private in v5.0
 	 */
@@ -767,0 +799,0 @@ Header.prototype.handleMenuButtonClick = function () {

govuk/components/header/macro-options.json

@@ -112,2 +112,2 @@ [
     }
-]
+]

govuk/components/hint/fixtures.json

@@ -59,2 +59,2 @@ {
     ]
-}
+}

govuk/components/hint/macro-options.json

@@ -32,2 +32,2 @@ [
     }
-]
+]

govuk/components/input/fixtures.json

@@ -14,3 +14,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
         },
@@ -30,3 +30,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-hint-text\">\n    National insurance number\n  </label>\n\n  \n  \n  <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-hint-text\">\n    National insurance number\n  </label>\n  <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>"
         },
@@ -49,3 +49,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-error-message\">\n    National Insurance number\n  </label>\n\n  \n  \n  <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n\n  \n  \n  <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-error-message\">\n    National Insurance number\n  </label>\n  <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>"
         },
@@ -66,3 +66,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-2\">\n    National insurance number\n  </label>\n\n  \n  \n  <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-2\">\n    National insurance number\n  </label>\n  <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n</div>"
         },
@@ -83,3 +83,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-3\">\n    National insurance number\n  </label>\n\n  \n  \n  <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-3\">\n    National insurance number\n  </label>\n  <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n</div>"
         },
@@ -100,3 +100,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-4\">\n    National insurance number\n  </label>\n\n  \n  \n  <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-4\">\n    National insurance number\n  </label>\n  <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n</div>"
         },
@@ -117,3 +117,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-5\">\n    National insurance number\n  </label>\n\n  \n  \n  <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-5\">\n    National insurance number\n  </label>\n  <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n</div>"
         },
@@ -134,3 +134,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-10\">\n    National insurance number\n  </label>\n\n  \n  \n  <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-10\">\n    National insurance number\n  </label>\n  <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n</div>"
         },
@@ -151,3 +151,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-20\">\n    National insurance number\n  </label>\n\n  \n  \n  <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-20\">\n    National insurance number\n  </label>\n  <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n</div>"
         },
@@ -168,3 +168,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-30\">\n    National insurance number\n  </label>\n\n  \n  \n  <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-30\">\n    National insurance number\n  </label>\n  <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n</div>"
         },
@@ -183,3 +183,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"input-with-page-heading\">\n      National Insurance number\n    </label>\n    </h1>\n\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"input-with-page-heading\">\n      National Insurance number\n    </label>\n    </h1>\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>"
         },
@@ -199,3 +199,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
         },
@@ -213,3 +213,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n    Postcode\n  </label>\n\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n    Postcode\n  </label>\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>"
         },
@@ -228,3 +228,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n    Numbers only\n  </label>\n\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n    Numbers only\n  </label>\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>"
         },
@@ -243,3 +243,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>"
         },
@@ -258,3 +258,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>"
         },
@@ -274,3 +274,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n  <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
         },
@@ -290,3 +290,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n</div>\n</div>"
         },
@@ -309,3 +309,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n  <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
         },
@@ -328,3 +328,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds, per household member\n  </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n  <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds, per household member\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n</div>\n</div>"
         },
@@ -350,3 +350,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n\n\n  \n  \n  <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n  <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n  <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
         },
@@ -370,5 +370,18 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n  <input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
         },
         {
+            "name": "with extra letter spacing",
+            "options": {
+                "id": "input-with-extra-letter-spacing",
+                "label": {
+                    "text": "National insurance number"
+                },
+                "classes": "govuk-input--width-30 govuk-input--extra-letter-spacing",
+                "value": "QQ 12 34 56 C"
+            },
+            "hidden": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-extra-letter-spacing\">\n    National insurance number\n  </label>\n<input class=\"govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing\" id=\"input-with-extra-letter-spacing\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
+        },
+        {
             "name": "classes",
@@ -384,3 +397,3 @@ "options": {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>"
         },
@@ -398,3 +411,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-type\">\n    With custom type\n  </label>\n\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-type\">\n    With custom type\n  </label>\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>"
         },
@@ -412,3 +425,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-value\">\n    With value\n  </label>\n\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-value\">\n    With value\n  </label>\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
         },
@@ -426,3 +439,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"some-id\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"some-id\">\n</div>"
         },
@@ -442,3 +455,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>"
         },
@@ -459,3 +472,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint describedBy\n  </label>\n\n  \n  \n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-hint-describedby-hint\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint describedBy\n  </label>\n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-hint-describedby-hint\">\n</div>"
         },
@@ -476,3 +489,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-describedby\">\n    With error describedBy\n  </label>\n\n\n  \n  \n  <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-describedby\">\n    With error describedBy\n  </label>\n  <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n</div>"
         },
@@ -495,3 +508,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    With error and hint\n  </label>\n\n  \n  \n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    With error and hint\n  </label>\n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>"
         },
@@ -515,3 +528,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n    With error, hint and describedBy\n  </label>\n\n  \n  \n  <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n    With error, hint and describedBy\n  </label>\n  <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>"
         },
@@ -529,3 +542,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-inputmode\">\n    With inputmode\n  </label>\n\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-inputmode\">\n    With inputmode\n  </label>\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>"
         },
@@ -545,3 +558,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n  <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
         },
@@ -561,3 +574,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n  <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
         },
@@ -578,3 +591,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n  <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>"
         },
@@ -597,3 +610,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n  <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>"
         },
@@ -613,3 +626,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n</div>\n</div>"
         },
@@ -629,3 +642,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n</div>\n</div>"
         },
@@ -646,3 +659,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n</div>\n</div>"
         },
@@ -665,5 +678,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n</div>\n</div>"
         }
     ]
-}
+}

govuk/components/input/macro-options.json

@@ -33,2 +33,8 @@ [
     {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": "If `true`, input will be disabled."
+    },
+    {
         "name": "describedBy",
@@ -168,2 +174,2 @@ "type": "string",
     }
-]
+]

govuk/components/inset-text/fixtures.json

@@ -58,2 +58,2 @@ {
     ]
-}
+}

govuk/components/inset-text/macro-options.json

@@ -38,2 +38,2 @@ [
     }
-]
+]

govuk/components/label/fixtures.json

@@ -65,3 +65,3 @@ {
             "hidden": false,
-            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--xl\">\n    National Insurance number\n  </label>\n  </h1>"
+            "html": "<h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--xl\">\n    National Insurance number\n  </label>\n  </h1>"
         },
@@ -76,3 +76,3 @@ {
             "hidden": false,
-            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--l\">\n    National Insurance number\n  </label>\n  </h1>"
+            "html": "<h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\">\n    National Insurance number\n  </label>\n  </h1>"
         },
@@ -87,3 +87,3 @@ {
             "hidden": false,
-            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--m\">\n    National Insurance number\n  </label>\n  </h1>"
+            "html": "<h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--m\">\n    National Insurance number\n  </label>\n  </h1>"
         },
@@ -98,3 +98,3 @@ {
             "hidden": false,
-            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--s\">\n    National Insurance number\n  </label>\n  </h1>"
+            "html": "<h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--s\">\n    National Insurance number\n  </label>\n  </h1>"
         },
@@ -108,3 +108,3 @@ {
             "hidden": false,
-            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label\">\n    National Insurance number\n  </label>\n  </h1>"
+            "html": "<h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label\">\n    National Insurance number\n  </label>\n  </h1>"
         },
@@ -164,2 +164,2 @@ {
     ]
-}
+}

govuk/components/label/macro-options.json

@@ -38,2 +38,2 @@ [
     }
-]
+]

govuk/components/notification-banner/fixtures.json

@@ -222,2 +222,2 @@ {
     ]
-}
+}

govuk/components/notification-banner/macro-options.json

@@ -74,2 +74,2 @@ [
     }
-]
+]

govuk/components/notification-banner/notification-banner.js

@@ -24,2 +24,3 @@ (function (global, factory) {
    *
+   * @deprecated Will be made private in v5.0
    * @returns {Object<string, unknown>} A flattened object of key-value pairs.
@@ -39,2 +40,3 @@ */
       // Prepare an empty return object
+      /** @type {Object<string, unknown>} */
       var flattenedObject = {};
@@ -76,2 +78,3 @@
     // Start with an empty object as our base
+    /** @type {Object<string, unknown>} */
     var formattedConfigObject = {};
@@ -95,10 +98,12 @@
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
    */
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -190,3 +195,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -218,2 +224,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -332,2 +340,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -353,6 +363,6 @@
         var map = {};
-    
+
         for (var i = 0; i < attributes.length; i++) {
           var attribute = attributes[i];
-    
+
           // This regex has been edited from the original polyfill, to add
@@ -365,7 +375,7 @@ // support for period (.) separators in data-* attribute names. These
             var value = attribute.value;
-    
+
             var propName = name.substr(5).replace(/-./g, function (prop) {
               return prop.charAt(1).toUpperCase();
             });
-            
+
             // If this browser supports __defineGetter__ and __defineSetter__,
@@ -394,3 +404,3 @@ // continue using defineProperty. If not (like IE 8 and below), we use
         }
-    
+
         return map;
@@ -402,7 +412,8 @@ }
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
       // Detection from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
       var detect = ('trim' in String.prototype);
-      
+
       if (detect) return
@@ -430,2 +441,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {string} value - The value to normalise
@@ -451,3 +463,3 @@ * @returns {string | boolean | number | undefined} Normalised data
     // the length of the trimmed string as well
-    if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+    if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
       return Number(trimmedValue)
@@ -464,2 +476,3 @@ }
    *
+   * @deprecated Will be made private in v5.0
    * @param {DOMStringMap} dataset - HTML element dataset
@@ -469,2 +482,3 @@ * @returns {Object<string, unknown>} Normalised dataset
   function normaliseDataset (dataset) {
+    /** @type {Object<string, unknown>} */
     var out = {};
@@ -479,3 +493,4 @@
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -501,2 +516,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -755,6 +772,11 @@
    * @class
-   * @param {HTMLElement} $module - HTML element to use for notification banner
+   * @param {Element} $module - HTML element to use for notification banner
    * @param {NotificationBannerConfig} [config] - Notification banner config
    */
   function NotificationBanner ($module, config) {
+    if (!($module instanceof HTMLElement)) {
+      return this
+    }
+
+    /** @deprecated Will be made private in v5.0 */
     this.$module = $module;
@@ -765,2 +787,7 @@
     };
+
+    /**
+     * @deprecated Will be made private in v5.0
+     * @type {NotificationBannerConfig}
+     */
     this.config = mergeConfigs(
@@ -777,5 +804,4 @@ defaultConfig,
   NotificationBanner.prototype.init = function () {
-    var $module = this.$module;
-    // Check for module
-    if (!$module) {
+    // Check that required elements are present
+    if (!this.$module) {
       return
@@ -796,2 +822,4 @@ }
    * with another element which should be focused when the page loads.
+   *
+   * @deprecated Will be made private in v5.0
    */
@@ -827,7 +855,6 @@ NotificationBanner.prototype.setFocus = function () {
    * @typedef {object} NotificationBannerConfig
-   * @property {boolean} [disableAutoFocus = false] -
-   *   If set to `true` the notification banner will not be focussed when the page
-   *   loads. This only applies if the component has a `role` of `alert` – in
-   *   other cases the component will not be focused on page load, regardless of
-   *   this option.
+   * @property {boolean} [disableAutoFocus = false] - If set to `true` the
+   *   notification banner will not be focussed when the page loads. This only
+   *   applies if the component has a `role` of `alert` – in other cases the
+   *   component will not be focused on page load, regardless of this option.
    */
@@ -834,0 +861,0 @@

govuk/components/pagination/fixtures.json

@@ -30,3 +30,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n  <ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n        <span class=\"govuk-pagination__link-title\">Next</span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
         },
@@ -60,3 +60,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"search\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n  <ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n        <span class=\"govuk-pagination__link-title\">Next</span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"search\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
         },
@@ -91,3 +91,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span></a>\n    </div>\n  <ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page one\">\n              one\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page two\" aria-current=\"page\">\n              two\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page three\">\n              three\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n        <span class=\"govuk-pagination__link-title\">Next page</span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page one\">\n              one\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page two\" aria-current=\"page\">\n              two\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page three\">\n              three\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next page</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
         },
@@ -123,3 +123,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n  <ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"1st page\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"2nd page (you are currently on this page)\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"3rd page\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n        <span class=\"govuk-pagination__link-title\">Next</span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"1st page\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"2nd page (you are currently on this page)\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"3rd page\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
         },
@@ -174,3 +174,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n  <ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">&ctdot;</li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/8\" aria-label=\"Page 8\">\n              8\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/9\" aria-label=\"Page 9\">\n              9\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/10\" aria-label=\"Page 10\" aria-current=\"page\">\n              10\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/11\" aria-label=\"Page 11\">\n              11\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/12\" aria-label=\"Page 12\">\n              12\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">&ctdot;</li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/40\" aria-label=\"Page 40\">\n              40\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n        <span class=\"govuk-pagination__link-title\">Next</span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">&ctdot;</li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/8\" aria-label=\"Page 8\">\n              8\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/9\" aria-label=\"Page 9\">\n              9\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/10\" aria-label=\"Page 10\" aria-current=\"page\">\n              10\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/11\" aria-label=\"Page 11\">\n              11\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/12\" aria-label=\"Page 12\">\n              12\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">&ctdot;</li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/40\" aria-label=\"Page 40\">\n              40\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
         },
@@ -200,3 +200,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\" aria-current=\"page\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n        <span class=\"govuk-pagination__link-title\">Next</span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\" aria-current=\"page\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
         },
@@ -226,3 +226,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n  <ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\" aria-current=\"page\">\n              3\n            </a>\n          </li></ul></nav>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\" aria-current=\"page\">\n              3\n            </a>\n          </li></ul></nav>"
         },
@@ -240,3 +240,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Previous</span></a>\n    </div>\n  <div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Next</span></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Previous</span></a>\n    </div>\n<div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Next</span></a>\n    </div></nav>"
         },
@@ -258,3 +258,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">1 of 3</span></a>\n    </div>\n  <div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n        <span class=\"govuk-pagination__link-title\">Next page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">3 of 3</span></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">1 of 3</span></a>\n    </div>\n<div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title\">Next page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">3 of 3</span></a>\n    </div></nav>"
         },
@@ -276,3 +276,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></a>\n    </div>\n  <div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n        <span class=\"govuk-pagination__link-title\">Next page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></a>\n    </div>\n<div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title\">Next page</span><span class=\"govuk-visually-hidden\">:</span>\n          <span class=\"govuk-pagination__link-label\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></a>\n    </div></nav>"
         },
@@ -294,3 +294,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">précédente</span></a>\n    </div>\n  <div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">suivante</span></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">précédente</span></a>\n    </div>\n<div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">suivante</span></a>\n    </div></nav>"
         },
@@ -305,3 +305,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Previous</span></a>\n    </div>\n  </nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Previous</span></a>\n    </div>\n</nav>"
         },
@@ -316,3 +316,3 @@ {
             "hidden": false,
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>\n        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Next</span></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg>        <span class=\"govuk-pagination__link-title govuk-pagination__link-title--decorated\">Next</span></a>\n    </div></nav>"
         },
@@ -346,3 +346,3 @@ {
             "hidden": true,
-            "html": "<nav class=\"govuk-pagination my-custom-class\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n  <ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n        <span class=\"govuk-pagination__link-title\">Next</span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination my-custom-class\" role=\"navigation\" aria-label=\"results\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
         },
@@ -379,5 +379,5 @@ {
             "hidden": true,
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\" data-attribute-1=\"value-1\" data-attribute-2=\"value-2\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n  <ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n        <span class=\"govuk-pagination__link-title\">Next</span>\n      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"results\" data-attribute-1=\"value-1\" data-attribute-2=\"value-2\"><div class=\"govuk-pagination__prev\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/previous\" rel=\"prev\">\n        <svg class=\"govuk-pagination__icon govuk-pagination__icon--prev\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n          <path d=\"m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z\"></path>\n        </svg>\n        <span class=\"govuk-pagination__link-title\">Previous</span></a>\n    </div>\n<ul class=\"govuk-pagination__list\"><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/1\" aria-label=\"Page 1\">\n              1\n            </a>\n          </li><li class=\"govuk-pagination__item govuk-pagination__item--current\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/2\" aria-label=\"Page 2\" aria-current=\"page\">\n              2\n            </a>\n          </li><li class=\"govuk-pagination__item\">\n            <a class=\"govuk-link govuk-pagination__link\" href=\"/page/3\" aria-label=\"Page 3\">\n              3\n            </a>\n          </li></ul><div class=\"govuk-pagination__next\">\n      <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">        <span class=\"govuk-pagination__link-title\">Next</span>      <svg class=\"govuk-pagination__icon govuk-pagination__icon--next\" xmlns=\"http://www.w3.org/2000/svg\" height=\"13\" width=\"15\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 15 13\">\n        <path d=\"m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z\"></path>\n      </svg></a>\n    </div></nav>"
         }
     ]
-}
+}

govuk/components/pagination/macro-options.json

@@ -128,2 +128,2 @@ [
     }
-]
+]

govuk/components/panel/fixtures.json

@@ -11,3 +11,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n</div>"
         },
@@ -22,3 +22,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h2 class=\"govuk-panel__title\">\n    Application complete\n  </h2>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h2 class=\"govuk-panel__title\">\n    Application complete\n  </h2>\n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n</div>"
         },
@@ -32,3 +32,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application &lt;strong&gt;not&lt;/strong&gt; complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Please complete form 1\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application &lt;strong&gt;not&lt;/strong&gt; complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Please complete form 1\n  </div>\n</div>"
         },
@@ -42,3 +42,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application <strong>not</strong> complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Please complete <strong>form 1</strong>\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application <strong>not</strong> complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Please complete <strong>form 1</strong>\n  </div>\n</div>"
         },
@@ -52,3 +52,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n  </div>\n</div>"
         },
@@ -62,3 +62,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number<br><strong>HDJ2123F</strong>\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number<br><strong>HDJ2123F</strong>\n  </div>\n</div>"
         },
@@ -73,3 +73,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n</div>"
         },
@@ -87,3 +87,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"foo\" second-attribute=\"bar\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"foo\" second-attribute=\"bar\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n</div>"
         },
@@ -96,5 +96,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n</div>"
         }
     ]
-}
+}

govuk/components/panel/macro-options.json

@@ -50,2 +50,2 @@ [
     }
-]
+]

govuk/components/phase-banner/fixtures.json

@@ -76,2 +76,2 @@ {
     ]
-}
+}

govuk/components/phase-banner/macro-options.json

@@ -33,2 +33,2 @@ [
     }
-]
+]

govuk/components/radios/macro-options.json

@@ -149,2 +149,2 @@ [
     }
-]
+]

govuk/components/radios/radios.js

@@ -22,4 +22,6 @@ (function (global, factory) {
    *
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
-   * @param {nodeListIterator} callback - Callback function to run for each node
+   * @deprecated Will be made private in v5.0
+   * @template {Node} ElementType
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
+   * @param {nodeListIterator<ElementType>} callback - Callback function to run for each node
    * @returns {void}
@@ -37,10 +39,12 @@ */
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
    */
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -132,3 +136,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -398,3 +403,4 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -426,2 +432,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -540,2 +548,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -631,3 +641,4 @@
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -653,2 +664,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -903,2 +916,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -1068,7 +1083,19 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
    * @class
-   * @param {HTMLElement} $module - HTML element to use for radios
+   * @param {Element} $module - HTML element to use for radios
    */
   function Radios ($module) {
+    if (!($module instanceof HTMLElement)) {
+      return this
+    }
+
+    var $inputs = $module.querySelectorAll('input[type="radio"]');
+    if (!$inputs.length) {
+      return this
+    }
+
+    /** @deprecated Will be made private in v5.0 */
     this.$module = $module;
-    this.$inputs = $module.querySelectorAll('input[type="radio"]');
+
+    /** @deprecated Will be made private in v5.0 */
+    this.$inputs = $inputs;
   }
@@ -1091,2 +1118,7 @@
   Radios.prototype.init = function () {
+    // Check that required elements are present
+    if (!this.$module || !this.$inputs) {
+      return
+    }
+
     var $module = this.$module;
@@ -1114,7 +1146,6 @@ var $inputs = this.$inputs;
     // that support it.
-    if ('onpageshow' in window) {
-      window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this));
-    } else {
-      window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this));
-    }
+    window.addEventListener(
+      'onpageshow' in window ? 'pageshow' : 'DOMContentLoaded',
+      this.syncAllConditionalReveals.bind(this)
+    );
 
@@ -1132,2 +1163,4 @@ // Although we've set up handlers to sync state on the pageshow or
    * Sync the conditional reveal states for all radio buttons in this $module.
+   *
+   * @deprecated Will be made private in v5.0
    */
@@ -1144,11 +1177,16 @@ Radios.prototype.syncAllConditionalReveals = function () {
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLInputElement} $input - Radio input
    */
   Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
-    var $target = document.getElementById($input.getAttribute('aria-controls'));
+    var targetId = $input.getAttribute('aria-controls');
+    if (!targetId) {
+      return
+    }
 
+    var $target = document.getElementById(targetId);
     if ($target && $target.classList.contains('govuk-radios__conditional')) {
       var inputIsChecked = $input.checked;
 
-      $input.setAttribute('aria-expanded', inputIsChecked);
+      $input.setAttribute('aria-expanded', inputIsChecked.toString());
       $target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked);
@@ -1166,9 +1204,11 @@ }
    *
+   * @deprecated Will be made private in v5.0
    * @param {MouseEvent} event - Click event
    */
   Radios.prototype.handleClick = function (event) {
+    var $component = this;
     var $clickedInput = event.target;
 
     // Ignore clicks on things that aren't radio buttons
-    if ($clickedInput.type !== 'radio') {
+    if (!($clickedInput instanceof HTMLInputElement) || $clickedInput.type !== 'radio') {
       return
@@ -1181,10 +1221,13 @@ }
 
+    var $clickedInputForm = $clickedInput.form;
+    var $clickedInputName = $clickedInput.name;
+
     nodeListForEach($allInputs, function ($input) {
-      var hasSameFormOwner = ($input.form === $clickedInput.form);
-      var hasSameName = ($input.name === $clickedInput.name);
+      var hasSameFormOwner = $input.form === $clickedInputForm;
+      var hasSameName = $input.name === $clickedInputName;
 
       if (hasSameName && hasSameFormOwner) {
-        this.syncConditionalRevealWithInputState($input);
+        $component.syncConditionalRevealWithInputState($input);
       }
-    }.bind(this));
+    });
   };
@@ -1191,0 +1234,0 @@

govuk/components/select/fixtures.json

@@ -30,3 +30,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n\n\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
@@ -44,3 +44,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Horse with no name\n  </label>\n\n\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Horse with no name\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n  </select>\n</div>"
         },
@@ -62,4 +62,3 @@ {
                         "value": 2,
-                        "text": "GOV.UK frontend option 2",
-                        "selected": true
+                        "text": "GOV.UK frontend option 2"
                     },
@@ -72,6 +71,6 @@ {
                 ],
-                "value": 3
+                "value": 2
             },
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n\n\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" selected disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
@@ -108,3 +107,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-2\">\n    Label text goes here\n  </label>\n\n  \n  \n  <div id=\"select-2-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  \n  \n  <p id=\"select-2-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\">GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-2\">\n    Label text goes here\n  </label>\n  <div id=\"select-2-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <p id=\"select-2-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n      <option value=\"3\">GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
@@ -139,3 +138,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"select-3\">\n      Label text goes here\n    </label>\n    </h1>\n\n\n  <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"select-3\">\n      Label text goes here\n    </label>\n    </h1>\n  <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
@@ -169,3 +168,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n\n\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
@@ -202,3 +201,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n\n\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
         },
@@ -223,3 +222,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -246,3 +245,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -275,3 +274,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n  \n    \n      <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n    \n  \n    \n      <option value=\"2\" selected data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n      <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n      <option value=\"2\" selected data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n  </select>\n</div>"
         },
@@ -298,3 +297,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n  \n    \n      <option value=\"1\">Option 1</option>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <option value=\"2\">Options 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Options 2</option>\n  </select>\n</div>"
         },
@@ -311,3 +310,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n  </select>\n</div>"
         },
@@ -335,3 +334,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -358,3 +357,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -382,3 +381,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n  <p id=\"select-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n      <option value=\"1\">GOV.UK frontend option 1</option>\n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -408,5 +407,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n  \n    \n      <option value=\"red\">Red</option>\n    \n  \n    \n      <option value=\"green\">Green</option>\n    \n  \n    \n      <option value=\"blue\">Blue</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n      <option value=\"red\">Red</option>\n      <option value=\"green\">Green</option>\n      <option value=\"blue\">Blue</option>\n  </select>\n</div>"
         }
     ]
-}
+}

govuk/components/select/macro-options.json

@@ -59,2 +59,8 @@ [
     {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": "If `true`, select box will be disabled. Use the `disabled` option on each individual item to only disable certain options."
+    },
+    {
         "name": "describedBy",
@@ -112,2 +118,2 @@ "type": "string",
     }
-]
+]

govuk/components/skip-link/fixtures.json

@@ -86,2 +86,2 @@ {
     ]
-}
+}

govuk/components/skip-link/macro-options.json

@@ -32,2 +32,2 @@ [
     }
-]
+]

govuk/components/skip-link/skip-link.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -95,3 +96,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -361,3 +363,4 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -389,2 +392,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -503,2 +508,4 @@
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -594,3 +601,4 @@
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -616,2 +624,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -866,2 +876,4 @@
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -1031,7 +1043,16 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
 	 * @class
-	 * @param {HTMLElement} $module - HTML element to use for skip link
+	 * @param {Element} $module - HTML element to use for skip link
 	 */
 	function SkipLink ($module) {
+	  if (!($module instanceof HTMLAnchorElement)) {
+	    return this
+	  }
+
+	  /** @deprecated Will be made private in v5.0 */
 	  this.$module = $module;
+
+	  /** @deprecated Will be made private in v5.0 */
 	  this.$linkedElement = null;
+
+	  /** @deprecated Will be made private in v5.0 */
 	  this.linkedElementListener = false;
@@ -1044,3 +1065,3 @@ }
 	SkipLink.prototype.init = function () {
-	  // Check for module
+	  // Check that required elements are present
 	  if (!this.$module) {
@@ -1051,7 +1072,8 @@ return
 	  // Check for linked element
-	  this.$linkedElement = this.getLinkedElement();
-	  if (!this.$linkedElement) {
+	  var $linkedElement = this.getLinkedElement();
+	  if (!$linkedElement) {
 	    return
 	  }
 
+	  this.$linkedElement = $linkedElement;
 	  this.$module.addEventListener('click', this.focusLinkedElement.bind(this));
@@ -1063,9 +1085,9 @@ };
 	 *
-	 * @returns {HTMLElement} $linkedElement - DOM element linked to from the skip link
+	 * @deprecated Will be made private in v5.0
+	 * @returns {HTMLElement | null} $linkedElement - DOM element linked to from the skip link
 	 */
 	SkipLink.prototype.getLinkedElement = function () {
 	  var linkedElementId = this.getFragmentFromUrl();
-
 	  if (!linkedElementId) {
-	    return false
+	    return null
 	  }
@@ -1080,2 +1102,4 @@
 	 * Set tabindex and helper CSS class. Set listener to remove them on blur.
+	 *
+	 * @deprecated Will be made private in v5.0
 	 */
@@ -1096,2 +1120,3 @@ SkipLink.prototype.focusLinkedElement = function () {
 	  }
+
 	  $linkedElement.focus();
@@ -1105,2 +1130,4 @@ };
 	 * Remove the CSS class that removes the native focus styles.
+	 *
+	 * @deprecated Will be made private in v5.0
 	 */
@@ -1118,3 +1145,4 @@ SkipLink.prototype.removeFocusProperties = function () {
 	 *
-	 * @returns {string} Fragment from URL, without the hash symbol
+	 * @deprecated Will be made private in v5.0
+	 * @returns {string | undefined} Fragment from URL, without the hash symbol
 	 */
@@ -1124,3 +1152,3 @@ SkipLink.prototype.getFragmentFromUrl = function () {
 	  if (!this.$module.hash) {
-	    return false
+	    return
 	  }
@@ -1127,0 +1155,0 @@

govuk/components/summary-list/macro-options.json

@@ -223,2 +223,2 @@ [
     }
-]
+]

govuk/components/table/fixtures.json

@@ -50,3 +50,3 @@ {
             "hidden": false,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >January</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£85</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£95</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >February</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£75</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£55</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >March</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£165</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£125</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">January</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">February</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">March</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -112,3 +112,3 @@ {
             "hidden": false,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n    \n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n    \n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >January</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£85</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£95</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >February</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£75</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£55</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >March</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£165</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£125</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">January</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">February</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">March</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -177,3 +177,3 @@ {
             "hidden": false,
-            "html": "<table class=\"govuk-table\">\n  \n  <caption class=\"govuk-table__caption govuk-heading-m\">Caption 1: Months and rates</caption>\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n    \n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n    \n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\"\n          >January</th>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£85</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£95</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\"\n          >February</th>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£75</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£55</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\"\n          >March</th>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£165</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£125</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <caption class=\"govuk-table__caption govuk-heading-m\">Caption 1: Months and rates</caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">January</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">February</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">March</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -196,3 +196,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table custom-class-goes-here\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table custom-class-goes-here\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Jan</td>\n          <td class=\"govuk-table__cell\">Feb</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -217,3 +217,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\" data-foo=\"bar\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\" data-foo=\"bar\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Jan</td>\n          <td class=\"govuk-table__cell\">Feb</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -237,3 +237,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -257,3 +257,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\">Foo <span>bar</span></th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Foo <span>bar</span></td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Foo <span>bar</span></th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Foo <span>bar</span></td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -281,3 +281,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header my-custom-class\">Foo</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header my-custom-class\">Foo</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Jan</td>\n          <td class=\"govuk-table__cell\">Feb</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -306,3 +306,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Jan</td>\n          <td class=\"govuk-table__cell\">Feb</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -331,3 +331,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\"></th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\"></th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Jan</td>\n          <td class=\"govuk-table__cell\">Feb</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -381,3 +381,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\"\n          >January</th>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£85</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£95</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\"\n          >February</th>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£75</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£55</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\"\n          >March</th>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£165</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell govuk-table__cell--numeric\"\n          >£125</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">January</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">February</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">March</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -398,3 +398,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header my-custom-class\"\n          >Foo</th>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header my-custom-class\">Foo</th>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -414,3 +414,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\"\n          >Foo <span>bar</span></th>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">Foo <span>bar</span></th>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -430,3 +430,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\"\n          >Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -448,3 +448,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\"\n          >Foo</th>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -467,3 +467,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <th scope=\"row\" class=\"govuk-table__header\" data-fizz=\"buzz\"\n          >Foo</th>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\" data-fizz=\"buzz\">Foo</th>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -503,3 +503,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >A</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >1</td>\n          \n        \n        </tr>\n      \n    \n      \n    \n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >B</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >2</td>\n          \n        \n        </tr>\n      \n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >C</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >3</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">A</td>\n          <td class=\"govuk-table__cell\">1</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">B</td>\n          <td class=\"govuk-table__cell\">2</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">C</td>\n          <td class=\"govuk-table__cell\">3</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -519,3 +519,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell my-custom-class\"\n          >Foo</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell my-custom-class\">Foo</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -536,3 +536,3 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\" colspan=\"2\" rowspan=\"2\"\n          >Foo</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\" colspan=\"2\" rowspan=\"2\">Foo</td>\n        </tr>\n  </tbody>\n</table>"
         },
@@ -554,5 +554,5 @@ {
             "hidden": true,
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\" data-fizz=\"buzz\"\n          >Foo</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\" data-fizz=\"buzz\">Foo</td>\n        </tr>\n  </tbody>\n</table>"
         }
     ]
-}
+}

govuk/components/table/macro-options.json

@@ -132,2 +132,2 @@ [
     }
-]
+]

govuk/components/tabs/fixtures.json

@@ -39,3 +39,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n            Past day\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n            Past week\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n            Past month\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n            Past year\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"past-day\">\n        \n          <h2 class=\"govuk-heading-l\">Past day</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">3</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">2</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n  </tbody>\n</table>\n\n        \n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n        \n          <h2 class=\"govuk-heading-l\">Past week</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">18</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">16</td>\n      <td class=\"govuk-table__cell\">20</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">27</td>\n    </tr>\n  </tbody>\n</table>\n\n        \n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n        \n          <h2 class=\"govuk-heading-l\">Past month</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">98</td>\n      <td class=\"govuk-table__cell\">95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">122</td>\n      <td class=\"govuk-table__cell\">131</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">126</td>\n      <td class=\"govuk-table__cell\">142</td>\n    </tr>\n  </tbody>\n</table>\n\n        \n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n        \n          <p class=\"govuk-body\">There is no data for this year yet, check back later</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n            Past day\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n            Past week\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n            Past month\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n            Past year\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"past-day\">\n          <h2 class=\"govuk-heading-l\">Past day</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">3</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">2</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n  </tbody>\n</table>\n\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n          <h2 class=\"govuk-heading-l\">Past week</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">18</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">16</td>\n      <td class=\"govuk-table__cell\">20</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">27</td>\n    </tr>\n  </tbody>\n</table>\n\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n          <h2 class=\"govuk-heading-l\">Past month</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">98</td>\n      <td class=\"govuk-table__cell\">95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">122</td>\n      <td class=\"govuk-table__cell\">131</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">126</td>\n      <td class=\"govuk-table__cell\">142</td>\n    </tr>\n  </tbody>\n</table>\n\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n          <p class=\"govuk-body\">There is no data for this year yet, check back later</p>\n      </div>\n</div>"
         },
@@ -63,3 +63,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <h2 class=\"govuk-heading-l\">Tab 1</h2>\n<p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n<p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n<p class=\"govuk-body\"><a id=\"anchor\" tabindex=\"0\">Anchor Point</a></p>\n\n        \n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n        \n          <h2 class=\"govuk-heading-l\">Tab 2</h2>\n\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <h2 class=\"govuk-heading-l\">Tab 1</h2>\n<p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n<p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n<p class=\"govuk-body\"><a id=\"anchor\" tabindex=\"0\">Anchor Point</a></p>\n\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n          <h2 class=\"govuk-heading-l\">Tab 2</h2>\n\n      </div>\n</div>"
         },
@@ -81,3 +81,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <p class=\"govuk-body\">Information about tabs</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
         },
@@ -99,3 +99,3 @@ {
             "hidden": true,
-            "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <p class=\"govuk-body\">Information about tabs</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
         },
@@ -117,3 +117,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <p class=\"govuk-body\">Information about tabs</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
         },
@@ -137,3 +137,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <p class=\"govuk-body\">Information about tabs</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
         },
@@ -158,3 +158,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <p class=\"govuk-body\">Information about tabs</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Information about tabs</p>\n      </div>\n</div>"
         },
@@ -179,3 +179,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n        \n          <p class=\"govuk-body\">Panel text</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n          <p class=\"govuk-body\">Panel text</p>\n      </div>\n</div>"
         },
@@ -189,3 +189,3 @@ {
             "hidden": true,
-            "html": "<div id=\"my-tabs\" class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  \n</div>"
+            "html": "<div id=\"my-tabs\" class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
         },
@@ -198,3 +198,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
         },
@@ -225,3 +225,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n    \n      \n    \n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <p class=\"govuk-body\">Panel 1 content</p>\n        \n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n        \n          <p class=\"govuk-body\">Panel 2 content</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">Panel 1 content</p>\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n          <p class=\"govuk-body\">Panel 2 content</p>\n      </div>\n</div>"
         },
@@ -248,3 +248,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n        \n          <p class=\"govuk-body\">Panel 1 content</p>\n        \n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n        \n          <p class=\"govuk-body\">Panel 2 content</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n          <p class=\"govuk-body\">Panel 1 content</p>\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n          <p class=\"govuk-body\">Panel 2 content</p>\n      </div>\n</div>"
         },
@@ -272,3 +272,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <p class=\"govuk-body\">&lt;p&gt;Panel 1 content&lt;/p&gt;</p>\n        \n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n        \n          <p class=\"govuk-body\">&lt;p&gt;Panel 2 content&lt;/p&gt;</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p class=\"govuk-body\">&lt;p&gt;Panel 1 content&lt;/p&gt;</p>\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n          <p class=\"govuk-body\">&lt;p&gt;Panel 2 content&lt;/p&gt;</p>\n      </div>\n</div>"
         },
@@ -296,5 +296,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n          <p>Panel 1 content</p>\n        \n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n        \n          <p>Panel 2 content</p>\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n  </ul>\n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n          <p>Panel 1 content</p>\n      </div>\n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n          <p>Panel 2 content</p>\n      </div>\n</div>"
         }
     ]
-}
+}

govuk/components/tabs/macro-options.json

@@ -84,2 +84,2 @@ [
     }
-]
+]

govuk/components/tabs/tabs.js

@@ -22,4 +22,6 @@ (function (global, factory) {
    *
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
-   * @param {nodeListIterator} callback - Callback function to run for each node
+   * @deprecated Will be made private in v5.0
+   * @template {Node} ElementType
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
+   * @param {nodeListIterator<ElementType>} callback - Callback function to run for each node
    * @returns {void}
@@ -37,10 +39,12 @@ */
   /**
+   * @template {Node} ElementType
    * @callback nodeListIterator
-   * @param {Element} value - The current node being iterated on
+   * @param {ElementType} value - The current node being iterated on
    * @param {number} index - The current index in the iteration
-   * @param {NodeListOf<Element>} nodes - NodeList from querySelectorAll()
+   * @param {NodeListOf<ElementType>} nodes - NodeList from querySelectorAll()
    * @returns {void}
    */
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -132,3 +136,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -398,3 +403,4 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -426,2 +432,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -540,2 +548,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -631,2 +641,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -652,2 +664,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -673,3 +687,4 @@
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -695,2 +710,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -945,2 +962,4 @@
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -1110,10 +1129,39 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js
    * @class
-   * @param {HTMLElement} $module - HTML element to use for tabs
+   * @param {Element} $module - HTML element to use for tabs
    */
   function Tabs ($module) {
+    if (!($module instanceof HTMLElement)) {
+      return this
+    }
+
+    var $tabs = $module.querySelectorAll('a.govuk-tabs__tab');
+    if (!$tabs.length) {
+      return this
+    }
+
+    /** @deprecated Will be made private in v5.0 */
     this.$module = $module;
-    this.$tabs = $module.querySelectorAll('.govuk-tabs__tab');
 
+    /** @deprecated Will be made private in v5.0 */
+    this.$tabs = $tabs;
+
+    /** @deprecated Will be made private in v5.0 */
     this.keys = { left: 37, right: 39, up: 38, down: 40 };
+
+    /** @deprecated Will be made private in v5.0 */
     this.jsHiddenClass = 'govuk-tabs__panel--hidden';
+
+    // Save bounded functions to use when removing event listeners during teardown
+
+    /** @deprecated Will be made private in v5.0 */
+    this.boundTabClick = this.onTabClick.bind(this);
+
+    /** @deprecated Will be made private in v5.0 */
+    this.boundTabKeydown = this.onTabKeydown.bind(this);
+
+    /** @deprecated Will be made private in v5.0 */
+    this.boundOnHashChange = this.onHashChange.bind(this);
+
+    /** @deprecated Will be made private in v5.0 */
+    this.changingHash = false;
   }
@@ -1125,2 +1173,7 @@
   Tabs.prototype.init = function () {
+    // Check that required elements are present
+    if (!this.$module || !this.$tabs) {
+      return
+    }
+
     if (typeof window.matchMedia === 'function') {
@@ -1135,4 +1188,7 @@ this.setupResponsiveChecks();
    * Setup viewport resize check
+   *
+   * @deprecated Will be made private in v5.0
    */
   Tabs.prototype.setupResponsiveChecks = function () {
+    /** @deprecated Will be made private in v5.0 */
     this.mql = window.matchMedia('(min-width: 40.0625em)');
@@ -1145,2 +1201,4 @@ this.mql.addListener(this.checkMode.bind(this));
    * Setup or teardown handler for viewport resize check
+   *
+   * @deprecated Will be made private in v5.0
    */
@@ -1157,4 +1215,7 @@ Tabs.prototype.checkMode = function () {
    * Setup tab component
+   *
+   * @deprecated Will be made private in v5.0
    */
   Tabs.prototype.setup = function () {
+    var $component = this;
     var $module = this.$module;
@@ -1177,23 +1238,22 @@ var $tabs = this.$tabs;
       // Set HTML attributes
-      this.setAttributes($tab);
+      $component.setAttributes($tab);
 
-      // Save bounded functions to use when removing event listeners during teardown
-      $tab.boundTabClick = this.onTabClick.bind(this);
-      $tab.boundTabKeydown = this.onTabKeydown.bind(this);
-
       // Handle events
-      $tab.addEventListener('click', $tab.boundTabClick, true);
-      $tab.addEventListener('keydown', $tab.boundTabKeydown, true);
+      $tab.addEventListener('click', $component.boundTabClick, true);
+      $tab.addEventListener('keydown', $component.boundTabKeydown, true);
 
       // Remove old active panels
-      this.hideTab($tab);
-    }.bind(this));
+      $component.hideTab($tab);
+    });
 
     // Show either the active tab according to the URL's hash or the first tab
     var $activeTab = this.getTab(window.location.hash) || this.$tabs[0];
+    if (!$activeTab) {
+      return
+    }
+
     this.showTab($activeTab);
 
     // Handle hashchange events
-    $module.boundOnHashChange = this.onHashChange.bind(this);
-    window.addEventListener('hashchange', $module.boundOnHashChange, true);
+    window.addEventListener('hashchange', this.boundOnHashChange, true);
   };
@@ -1203,8 +1263,11 @@
    * Teardown tab component
+   *
+   * @deprecated Will be made private in v5.0
    */
   Tabs.prototype.teardown = function () {
+    var $component = this;
     var $module = this.$module;
     var $tabs = this.$tabs;
     var $tabList = $module.querySelector('.govuk-tabs__list');
-    var $tabListItems = $module.querySelectorAll('.govuk-tabs__list-item');
+    var $tabListItems = $module.querySelectorAll('a.govuk-tabs__list-item');
 
@@ -1218,3 +1281,3 @@ if (!$tabs || !$tabList || !$tabListItems) {
     nodeListForEach($tabListItems, function ($item) {
-      $item.removeAttribute('role', 'presentation');
+      $item.removeAttribute('role');
     });
@@ -1224,11 +1287,11 @@
       // Remove events
-      $tab.removeEventListener('click', $tab.boundTabClick, true);
-      $tab.removeEventListener('keydown', $tab.boundTabKeydown, true);
+      $tab.removeEventListener('click', $component.boundTabClick, true);
+      $tab.removeEventListener('keydown', $component.boundTabKeydown, true);
 
       // Unset HTML attributes
-      this.unsetAttributes($tab);
-    }.bind(this));
+      $component.unsetAttributes($tab);
+    });
 
     // Remove hashchange event handler
-    window.removeEventListener('hashchange', $module.boundOnHashChange, true);
+    window.removeEventListener('hashchange', this.boundOnHashChange, true);
   };
@@ -1239,6 +1302,6 @@
    *
-   * @param {HashChangeEvent} event - Hash change event
+   * @deprecated Will be made private in v5.0
    * @returns {void | undefined} Returns void, or undefined when prevented
    */
-  Tabs.prototype.onHashChange = function (event) {
+  Tabs.prototype.onHashChange = function () {
     var hash = window.location.hash;
@@ -1258,2 +1321,5 @@ var $tabWithHash = this.getTab(hash);
     var $previousTab = this.getCurrentTab();
+    if (!$previousTab) {
+      return
+    }
 
@@ -1268,2 +1334,3 @@ this.hideTab($previousTab);
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
@@ -1279,2 +1346,3 @@ */
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
@@ -1290,2 +1358,3 @@ */
    *
+   * @deprecated Will be made private in v5.0
    * @param {string} hash - Hash fragment including #
@@ -1295,3 +1364,4 @@ * @returns {HTMLAnchorElement | null} Tab link
   Tabs.prototype.getTab = function (hash) {
-    return this.$module.querySelector('.govuk-tabs__tab[href="' + hash + '"]')
+    // @ts-expect-error `HTMLAnchorElement` type expected
+    return this.$module.querySelector('a.govuk-tabs__tab[href="' + hash + '"]')
   };
@@ -1302,2 +1372,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
@@ -1316,2 +1387,6 @@ */
     var $panel = this.getPanel($tab);
+    if (!$panel) {
+      return
+    }
+
     $panel.setAttribute('role', 'tabpanel');
@@ -1325,2 +1400,3 @@ $panel.setAttribute('aria-labelledby', $tab.id);
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
@@ -1338,2 +1414,6 @@ */
     var $panel = this.getPanel($tab);
+    if (!$panel) {
+      return
+    }
+
     $panel.removeAttribute('role');
@@ -1347,16 +1427,19 @@ $panel.removeAttribute('aria-labelledby');
    *
+   * @deprecated Will be made private in v5.0
    * @param {MouseEvent} event - Mouse click event
-   * @returns {void | false} Returns void, or false within tab link
+   * @returns {void} Returns void
    */
   Tabs.prototype.onTabClick = function (event) {
-    if (!event.target.classList.contains('govuk-tabs__tab')) {
-      // Allow events on child DOM elements to bubble up to tab parent
-      return false
+    var $currentTab = this.getCurrentTab();
+    var $nextTab = event.currentTarget;
+
+    if (!$currentTab || !($nextTab instanceof HTMLAnchorElement)) {
+      return
     }
+
     event.preventDefault();
-    var $newTab = event.target;
-    var $currentTab = this.getCurrentTab();
+
     this.hideTab($currentTab);
-    this.showTab($newTab);
-    this.createHistoryEntry($newTab);
+    this.showTab($nextTab);
+    this.createHistoryEntry($nextTab);
   };
@@ -1370,2 +1453,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
@@ -1375,2 +1459,5 @@ */
     var $panel = this.getPanel($tab);
+    if (!$panel) {
+      return
+    }
 
@@ -1392,2 +1479,3 @@ // Save and restore the id
    *
+   * @deprecated Will be made private in v5.0
    * @param {KeyboardEvent} event - Keydown event
@@ -1412,6 +1500,8 @@ */
    * Activate next tab
+   *
+   * @deprecated Will be made private in v5.0
    */
   Tabs.prototype.activateNextTab = function () {
     var $currentTab = this.getCurrentTab();
-    if (!$currentTab) {
+    if (!$currentTab || !$currentTab.parentElement) {
       return
@@ -1425,9 +1515,11 @@ }
 
-    var $nextTab = $nextTabListItem.querySelector('.govuk-tabs__tab');
-    if ($nextTab) {
-      this.hideTab($currentTab);
-      this.showTab($nextTab);
-      $nextTab.focus();
-      this.createHistoryEntry($nextTab);
+    var $nextTab = $nextTabListItem.querySelector('a.govuk-tabs__tab');
+    if (!$nextTab) {
+      return
     }
+
+    this.hideTab($currentTab);
+    this.showTab($nextTab);
+    $nextTab.focus();
+    this.createHistoryEntry($nextTab);
   };
@@ -1437,6 +1529,8 @@
    * Activate previous tab
+   *
+   * @deprecated Will be made private in v5.0
    */
   Tabs.prototype.activatePreviousTab = function () {
     var $currentTab = this.getCurrentTab();
-    if (!$currentTab) {
+    if (!$currentTab || !$currentTab.parentElement) {
       return
@@ -1450,9 +1544,11 @@ }
 
-    var $previousTab = $previousTabListItem.querySelector('.govuk-tabs__tab');
-    if ($previousTab) {
-      this.hideTab($currentTab);
-      this.showTab($previousTab);
-      $previousTab.focus();
-      this.createHistoryEntry($previousTab);
+    var $previousTab = $previousTabListItem.querySelector('a.govuk-tabs__tab');
+    if (!$previousTab) {
+      return
     }
+
+    this.hideTab($currentTab);
+    this.showTab($previousTab);
+    $previousTab.focus();
+    this.createHistoryEntry($previousTab);
   };
@@ -1463,8 +1559,8 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
-   * @returns {HTMLDivElement} Tab panel
+   * @returns {Element | null} Tab panel
    */
   Tabs.prototype.getPanel = function ($tab) {
-    var $panel = this.$module.querySelector(this.getHref($tab));
-    return $panel
+    return this.$module.querySelector(this.getHref($tab))
   };
@@ -1475,2 +1571,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
@@ -1480,2 +1577,6 @@ */
     var $panel = this.getPanel($tab);
+    if (!$panel) {
+      return
+    }
+
     $panel.classList.remove(this.jsHiddenClass);
@@ -1487,2 +1588,3 @@ };
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
@@ -1492,2 +1594,6 @@ */
     var $panel = this.getPanel($tab);
+    if (!$panel) {
+      return
+    }
+
     $panel.classList.add(this.jsHiddenClass);
@@ -1499,7 +1605,12 @@ };
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
    */
   Tabs.prototype.unhighlightTab = function ($tab) {
+    if (!$tab.parentElement) {
+      return
+    }
+
     $tab.setAttribute('aria-selected', 'false');
-    $tab.parentNode.classList.remove('govuk-tabs__list-item--selected');
+    $tab.parentElement.classList.remove('govuk-tabs__list-item--selected');
     $tab.setAttribute('tabindex', '-1');
@@ -1511,7 +1622,12 @@ };
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
    */
   Tabs.prototype.highlightTab = function ($tab) {
+    if (!$tab.parentElement) {
+      return
+    }
+
     $tab.setAttribute('aria-selected', 'true');
-    $tab.parentNode.classList.add('govuk-tabs__list-item--selected');
+    $tab.parentElement.classList.add('govuk-tabs__list-item--selected');
     $tab.setAttribute('tabindex', '0');
@@ -1523,6 +1639,7 @@ };
    *
-   * @returns {HTMLAnchorElement | undefined} Tab link
+   * @deprecated Will be made private in v5.0
+   * @returns {HTMLAnchorElement | null} Tab link
    */
   Tabs.prototype.getCurrentTab = function () {
-    return this.$module.querySelector('.govuk-tabs__list-item--selected .govuk-tabs__tab')
+    return this.$module.querySelector('.govuk-tabs__list-item--selected a.govuk-tabs__tab')
   };
@@ -1537,2 +1654,3 @@
    *
+   * @deprecated Will be made private in v5.0
    * @param {HTMLAnchorElement} $tab - Tab link
@@ -1539,0 +1657,0 @@ * @returns {string} Hash fragment including #

govuk/components/tag/fixtures.json

@@ -131,2 +131,2 @@ {
     ]
-}
+}

govuk/components/tag/macro-options.json

@@ -26,2 +26,2 @@ [
     }
-]
+]

govuk/components/textarea/fixtures.json

@@ -14,3 +14,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>"
         },
@@ -30,3 +30,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n  \n  \n  <div id=\"more-detail-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n\n\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-hint\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <div id=\"more-detail-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-hint\"></textarea>\n</div>"
         },
@@ -46,3 +46,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"no-ni-reason\">\n    Why can’t you provide a National Insurance number?\n  </label>\n\n\n  \n  \n  <p id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n  </p>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"no-ni-reason\">\n    Why can’t you provide a National Insurance number?\n  </label>\n  <p id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>"
         },
@@ -60,3 +60,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"5\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"5\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>"
         },
@@ -74,3 +74,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"8\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"8\"></textarea>\n</div>"
         },
@@ -89,3 +89,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
         },
@@ -105,3 +105,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
         },
@@ -119,3 +119,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-autocomplete-attribute\" name=\"address\" rows=\"5\" autocomplete=\"street-address\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-autocomplete-attribute\" name=\"address\" rows=\"5\" autocomplete=\"street-address\"></textarea>\n</div>"
         },
@@ -133,3 +133,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-enabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"true\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-enabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"true\"></textarea>\n</div>"
         },
@@ -147,3 +147,3 @@ {
             "hidden": false,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>"
         },
@@ -161,3 +161,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n\n\n  <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\"></textarea>\n</div>"
         },
@@ -177,3 +177,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>"
         },
@@ -191,3 +191,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"with-describedby\" name=\"with-describedby\" rows=\"5\" aria-describedby=\"some-id\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"with-describedby\" name=\"with-describedby\" rows=\"5\" aria-describedby=\"some-id\"></textarea>\n</div>"
         },
@@ -208,3 +208,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint and describedBy\n  </label>\n\n  \n  \n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n\n  <textarea class=\"govuk-textarea\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-describedby-hint\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint and describedBy\n  </label>\n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <textarea class=\"govuk-textarea\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-describedby-hint\"></textarea>\n</div>"
         },
@@ -225,3 +225,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"textarea-with-error\">\n    Textarea with error\n  </label>\n\n\n  \n  \n  <p id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"textarea-with-error\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"textarea-with-error\">\n    Textarea with error\n  </label>\n  <p id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"textarea-with-error\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>"
         },
@@ -244,3 +244,3 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error\">\n    With hint and error\n  </label>\n\n  \n  \n  <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <p id=\"with-hint-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error\" name=\"with-hint-error\" rows=\"5\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error\">\n    With hint and error\n  </label>\n  <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-hint-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error\" name=\"with-hint-error\" rows=\"5\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n</div>"
         },
@@ -264,5 +264,5 @@ {
             "hidden": true,
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n    With hint, error and describedBy\n  </label>\n\n  \n  \n  <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <p id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error-describedby\" name=\"with-hint-error-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n    With hint, error and describedBy\n  </label>\n  <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error-describedby\" name=\"with-hint-error-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n</div>"
         }
     ]
-}
+}

govuk/components/textarea/macro-options.json

@@ -33,2 +33,8 @@ [
     {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": "If `true`, textarea will be disabled."
+    },
+    {
         "name": "describedBy",
@@ -92,2 +98,2 @@ "type": "string",
     }
-]
+]

govuk/components/warning-text/fixtures.json

@@ -26,3 +26,2 @@ {
                 "text": "You can be fined up to £5,000 if you don’t register.",
-                "iconFallbackText": "Warning",
                 "attributes": {
@@ -40,3 +39,2 @@ "id": "my-warning-text",
                 "text": "Warning text",
-                "iconFallbackText": "Warning",
                 "classes": "govuk-warning-text--custom-class"
@@ -51,3 +49,2 @@ },
                 "text": "You can be fined up to £5,000 if you don’t register.",
-                "iconFallbackText": "Warning",
                 "html": "<span>Some custom warning text</span>"
@@ -61,3 +58,2 @@ },
             "options": {
-                "iconFallbackText": "Warning",
                 "text": "<span>Some custom warning text</span>"
@@ -75,4 +71,12 @@ },
             "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Some custom fallback text</span>\n    \n  </strong>\n</div>"
+        },
+        {
+            "name": "no icon fallback text",
+            "options": {
+                "text": "This is a warning"
+            },
+            "hidden": true,
+            "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    This is a warning\n  </strong>\n</div>"
         }
     ]
-}
+}

govuk/components/warning-text/macro-options.json

@@ -17,4 +17,4 @@ [
         "type": "string",
-        "required": true,
-        "description": "The fallback text for the icon."
+        "required": false,
+        "description": "The fallback text for the icon. Defaults to 'Warning'"
     },
@@ -33,2 +33,2 @@ {
     }
-]
+]

govuk/i18n.js

@@ -42,5 +42,5 @@ (function (global, factory) {
     // If the `count` option is set, determine which plural suffix is needed and
-    // change the lookupKey to match. We check to see if it's undefined instead of
+    // change the lookupKey to match. We check to see if it's numeric instead of
     // falsy, as this could legitimately be 0.
-    if (options && typeof options.count !== 'undefined') {
+    if (options && typeof options.count === 'number') {
       // Get the plural suffix
@@ -50,6 +50,6 @@ lookupKey = lookupKey + '.' + this.getPluralSuffix(lookupKey, options.count);
 
-    if (lookupKey in this.translations) {
-      // Fetch the translation string for that lookup key
-      var translationString = this.translations[lookupKey];
+    // Fetch the translation string for that lookup key
+    var translationString = this.translations[lookupKey];
 
+    if (typeof translationString === 'string') {
       // Check for ${} placeholders in the translation string
@@ -81,2 +81,3 @@ if (translationString.match(/%{(.\S+)}/)) {
   I18n.prototype.replacePlaceholders = function (translationString, options) {
+    /** @type {Intl.NumberFormat | undefined} */
     var formatter;
@@ -88,22 +89,35 @@
 
-    return translationString.replace(/%{(.\S+)}/g, function (placeholderWithBraces, placeholderKey) {
-      if (Object.prototype.hasOwnProperty.call(options, placeholderKey)) {
-        var placeholderValue = options[placeholderKey];
+    return translationString.replace(
+      /%{(.\S+)}/g,
 
-        // If a user has passed `false` as the value for the placeholder
-        // treat it as though the value should not be displayed
-        if (placeholderValue === false) {
-          return ''
-        }
+      /**
+       * Replace translation string placeholders
+       *
+       * @param {string} placeholderWithBraces - Placeholder with braces
+       * @param {string} placeholderKey - Placeholder key
+       * @returns {string} Placeholder value
+       */
+      function (placeholderWithBraces, placeholderKey) {
+        if (Object.prototype.hasOwnProperty.call(options, placeholderKey)) {
+          var placeholderValue = options[placeholderKey];
 
-        // If the placeholder's value is a number, localise the number formatting
-        if (typeof placeholderValue === 'number' && formatter) {
-          return formatter.format(placeholderValue)
+          // If a user has passed `false` as the value for the placeholder
+          // treat it as though the value should not be displayed
+          if (placeholderValue === false || (
+            typeof placeholderValue !== 'number' &&
+            typeof placeholderValue !== 'string')
+          ) {
+            return ''
+          }
+
+          // If the placeholder's value is a number, localise the number formatting
+          if (typeof placeholderValue === 'number') {
+            return formatter ? formatter.format(placeholderValue) : placeholderValue.toString()
+          }
+
+          return placeholderValue
+        } else {
+          throw new Error('i18n: no data found to replace ' + placeholderWithBraces + ' placeholder in string')
         }
-
-        return placeholderValue
-      } else {
-        throw new Error('i18n: no data found to replace ' + placeholderWithBraces + ' placeholder in string')
-      }
-    })
+      })
   };
@@ -224,3 +238,3 @@
    *
-   * @returns {PluralRuleName | undefined} The name of the pluralisation rule to use (a key for one
+   * @returns {string | undefined} The name of the pluralisation rule to use (a key for one
    *   of the functions in this.pluralRules)
@@ -276,3 +290,3 @@ */
    *
-   * @type {Object<PluralRuleName, string[]>}
+   * @type {Object<string, string[]>}
    */
@@ -366,8 +380,2 @@ I18n.pluralRulesMap = {
   /**
-   * Supported languages for plural rules
-   *
-   * @typedef {'arabic' | 'chinese' | 'french' | 'german' | 'irish' | 'russian' | 'scottish' | 'spanish' | 'welsh'} PluralRuleName
-   */
-
-  /**
    * Plural rule category mnemonic tags
@@ -374,0 +382,0 @@ *

govuk/vendor/polyfills/Date/now.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-    (function(undefined) {
+    // @ts-nocheck
+    (function (undefined) {
 
@@ -10,0 +11,0 @@ // Detection from https://github.com/Financial-Times/polyfill-library/blob/v3.111.0/polyfills/Date/now/detect.js

govuk/vendor/polyfills/Document.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -10,0 +11,0 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js

govuk/vendor/polyfills/DOMTokenList.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-    (function(undefined) {
+    // @ts-nocheck
+    (function (undefined) {
 
@@ -10,0 +11,0 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js

govuk/vendor/polyfills/Element.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -35,2 +36,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -37,0 +40,0 @@

govuk/vendor/polyfills/Element/prototype/classList.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -95,3 +96,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -361,3 +363,4 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/master/packages/polyfill-library/polyfills/DOMTokenList/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -389,2 +392,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -503,2 +508,4 @@
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -505,0 +512,0 @@

govuk/vendor/polyfills/Element/prototype/closest.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -32,2 +33,4 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/matches/detect.js
 
+  // @ts-nocheck
+
   (function(undefined) {
@@ -34,0 +37,0 @@

govuk/vendor/polyfills/Element/prototype/dataset.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -95,3 +96,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -123,2 +125,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -237,2 +241,4 @@
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -258,6 +264,6 @@
 	      var map = {};
-	  
+
 	      for (var i = 0; i < attributes.length; i++) {
 	        var attribute = attributes[i];
-	  
+
 	        // This regex has been edited from the original polyfill, to add
@@ -270,7 +276,7 @@ // support for period (.) separators in data-* attribute names. These
 	          var value = attribute.value;
-	  
+
 	          var propName = name.substr(5).replace(/-./g, function (prop) {
 	            return prop.charAt(1).toUpperCase();
 	          });
-	          
+
 	          // If this browser supports __defineGetter__ and __defineSetter__,
@@ -299,3 +305,3 @@ // continue using defineProperty. If not (like IE 8 and below), we use
 	      }
-	  
+
 	      return map;
@@ -302,0 +308,0 @@ }

govuk/vendor/polyfills/Element/prototype/matches.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-  (function(undefined) {
+  // @ts-nocheck
+  (function (undefined) {
 
@@ -10,0 +11,0 @@ // Detection from https://raw.githubusercontent.com/Financial-Times/polyfill-service/1f3c09b402f65bf6e393f933a15ba63f1b86ef1f/packages/polyfill-library/polyfills/Element/prototype/matches/detect.js

govuk/vendor/polyfills/Element/prototype/nextElementSibling.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -95,3 +96,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -123,2 +125,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -237,2 +241,4 @@
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -239,0 +245,0 @@

govuk/vendor/polyfills/Element/prototype/previousElementSibling.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -95,3 +96,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -123,2 +125,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -237,2 +241,4 @@
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -239,0 +245,0 @@

govuk/vendor/polyfills/Event.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -29,3 +30,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -57,2 +59,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Document/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -171,3 +175,4 @@
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -259,2 +264,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -261,0 +268,0 @@

govuk/vendor/polyfills/Function/prototype/bind.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -95,2 +96,4 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js
 
+	// @ts-nocheck
+
 	(function(undefined) {
@@ -97,0 +100,0 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js

govuk/vendor/polyfills/Object/defineProperty.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -10,0 +11,0 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Object/defineProperty/detect.js

govuk/vendor/polyfills/String/prototype/trim.js

@@ -7,7 +7,8 @@ (function (global, factory) {
 
-    (function(undefined) {
+    // @ts-nocheck
+    (function (undefined) {
 
         // Detection from https://github.com/mdn/content/blob/cf607d68522cd35ee7670782d3ee3a361eaef2e4/files/en-us/web/javascript/reference/global_objects/string/trim/index.md#polyfill
         var detect = ('trim' in String.prototype);
-        
+
         if (detect) return
@@ -14,0 +15,0 @@

govuk/vendor/polyfills/Window.js

@@ -7,3 +7,4 @@ (function (global, factory) {
 
-	(function(undefined) {
+	// @ts-nocheck
+	(function (undefined) {
 
@@ -10,0 +11,0 @@ // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Window/detect.js

package.json

 {
   "name": "govuk-frontend",
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "main": "govuk/all.js",
@@ -14,3 +14,4 @@ "module": "govuk-esm/all.mjs",
     "./govuk/": "./govuk/",
-    "./govuk-esm/": "./govuk-esm/"
+    "./govuk-esm/": "./govuk-esm/",
+    "./package.json": "./package.json"
   },
@@ -17,0 +18,0 @@ "sideEffects": [

README.md

@@ -39,5 +39,5 @@ # GOV.UK Frontend
 
-  ```scss
-  @import "node_modules/govuk-frontend/govuk/all";
-  ```
+```scss
+@import "node_modules/govuk-frontend/govuk/all";
+```
 
@@ -57,2 +57,3 @@ [More details on importing styles](https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#css)
 ```
+
 Next you need to initialise the script by adding:
@@ -66,3 +67,2 @@
 
-
 ## Importing assets
@@ -74,3 +74,2 @@
 
-
 ## Getting updates
@@ -77,0 +76,0 @@

No alert changes

Improved metrics

Total package byte prevSize

4330535

increased by7.3%

Number of package files

443

increased by9.11%

Lines of code

40312

increased by3.86%

Worsened metrics

Number of lines in readme file

90

decreased by-1.1%

No dependency changes