govuk-frontend - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

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

@@ -82,2 +82,42 @@ [
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before the textarea used by the character count component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before the textarea. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before the textarea. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after the textarea used by the character count component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after the textarea. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after the textarea. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
@@ -84,0 +124,0 @@ ]

dist/govuk/components/checkboxes/macro-options.json

@@ -46,2 +46,42 @@ [
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInputs",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before all checkbox items within the checkboxes component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before all checkbox items. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before all checkbox items. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInputs",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after all checkbox items within the checkboxes component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after all checkbox items. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after all checkbox items. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
@@ -48,0 +88,0 @@ ]

dist/govuk/components/cookie-banner/fixtures.json

@@ -35,3 +35,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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\">\n          Cookies on this government service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p>\n        </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\n  </div>\n</div>"
         },
@@ -57,3 +57,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </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\n  </div>\n</div>"
         },
@@ -79,3 +79,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </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\n  </div>\n</div>"
         },
@@ -135,3 +135,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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    <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    <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>"
+            "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\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </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\n  </div>\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        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </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\n  </div>\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        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </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\n  </div>\n</div>"
         },
@@ -169,3 +169,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>\n<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>\n</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>"
+            "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\">\n          Cookies on <span>my service</span>\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>\n          <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>\n        </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\n  </div>\n</div>"
         },
@@ -184,3 +184,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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\">\n          Cookies on <span>my service</span>\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -199,3 +199,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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\">\n          Cookies on &lt;span&gt;my service&lt;/span&gt;\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -214,3 +214,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -229,3 +229,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <div class=\"govuk-cookie-banner__message app-my-class 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>"
+            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message app-my-class govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -246,3 +246,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -262,3 +262,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookies on GOV.UK\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies on GOV.UK</p>\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -277,3 +277,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -292,3 +292,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -311,3 +311,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\">\n              This is a button\n            </button>\n      </div>\n    </div>\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        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        This is a button\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
@@ -331,3 +331,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </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\n  </div>\n</div>"
         },
@@ -353,3 +353,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </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\n  </div>\n</div>"
         },
@@ -374,3 +374,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </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\n  </div>\n</div>"
         },
@@ -394,3 +394,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </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\n  </div>\n</div>"
         },
@@ -414,3 +414,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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=\"submit\" 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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button my-button-class app-button-class\" data-module=\"govuk-button\">\n        Button with custom classes\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
@@ -436,3 +436,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" data-button-attribute=\"my-value\">\n              Button with attributes\n            </button>\n      </div>\n    </div>\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        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\" data-button-attribute=\"my-value\">\n        Button with attributes\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
@@ -457,3 +457,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </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\n  </div>\n</div>"
         },
@@ -480,3 +480,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">    <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>"
+            "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        <div class=\"govuk-cookie-banner__content\">\n        </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\n  </div>\n</div>"
         },
@@ -539,5 +539,5 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\" hidden data-hide-cookie-banner=\"true\">    <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    <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 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>"
+            "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\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </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\n  </div>\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        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </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\n  </div>\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        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </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\n  </div>\n</div>"
         }
     ]
 }

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

@@ -101,2 +101,42 @@ [
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInputs",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before the inputs used by the date input component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before the inputs. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before the inputs. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInputs",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after the inputs used by the date input component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after the inputs. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after the inputs. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
@@ -103,0 +143,0 @@ ]

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

@@ -70,2 +70,42 @@ [
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before the input used by the file upload component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before the input. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before the input. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after the input used by the file upload component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after the input. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after the input. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
@@ -72,0 +112,0 @@ ]

dist/govuk/components/header/macro-options.json

@@ -110,4 +110,4 @@ [
         "required": false,
-        "description": "If `true`, the header uses the Tudor crown from King Charles III's royal cypher. This will become the default in a future version of GOV.UK Frontend."
+        "description": "Deprecated. If `true`, uses the Tudor crown from King Charles III's royal cypher. Otherwise, uses the St. Edward's crown. Default is `true`."
     }
 ]

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

@@ -133,3 +133,3 @@ [
         "required": false,
-        "description": "Additional options for the form group containing the text-input component.",
+        "description": "Additional options for the form group containing the text input component.",
         "params": [
@@ -147,2 +147,42 @@ {
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before the input used by the text input component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before the input. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before the input. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after the input used by the text input component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after the input. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after the input. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
@@ -149,0 +189,0 @@ ]

dist/govuk/components/inset-text/fixtures.json

@@ -22,3 +22,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-inset-text\">\n  <p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n<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    You can be fined up to £5,000 if you don’t register.\n  </strong>\n</div>\n<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n\n</div>"
+            "html": "<div class=\"govuk-inset-text\">\n  <p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n  <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      You can be fined up to £5,000 if you don’t register.\n    </strong>\n  </div>\n  <p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n</div>"
         },
@@ -25,0 +25,0 @@ {

dist/govuk/components/notification-banner/fixtures.json

@@ -12,3 +12,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -23,3 +23,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\"><p class=\"govuk-notification-banner__heading\">You have 9 days to send a response.</p>\n</div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">You have 9 days to send a response.</p>\n  </div>\n</div>"
         },
@@ -29,3 +29,3 @@ {
             "options": {
-                "html": "<h3 class=\"govuk-notification-banner__heading\">\n  This publication was withdrawn on 7 March 2014\n</h3>\n<p class=\"govuk-body\">Archived and replaced by the <a href=\"#\" class=\"govuk-notification-banner__link\">new planning guidance</a> launched 6 March 2014 on an external website</p>\n"
+                "html": "<h3 class=\"govuk-notification-banner__heading\">\n  This publication was withdrawn on 7 March 2014\n</h3>\n<p class=\"govuk-body\">\n  Archived and replaced by the <a href=\"#\" class=\"govuk-notification-banner__link\">new planning guidance</a> launched 6 March 2014 on an external website\n</p>\n"
             },
@@ -35,3 +35,3 @@ "hidden": false,
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\"><h3 class=\"govuk-notification-banner__heading\">\n  This publication was withdrawn on 7 March 2014\n</h3>\n<p class=\"govuk-body\">Archived and replaced by the <a href=\"#\" class=\"govuk-notification-banner__link\">new planning guidance</a> launched 6 March 2014 on an external website</p>\n</div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <h3 class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014\n    </h3>\n    <p class=\"govuk-body\">\n      Archived and replaced by the <a href=\"#\" class=\"govuk-notification-banner__link\">new planning guidance</a> launched 6 March 2014 on an external website\n    </p>\n  </div>\n</div>"
         },
@@ -47,3 +47,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">Email sent to [e-mail]</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      Email sent to [e-mail]\n    </p>\n  </div>\n</div>"
         },
@@ -59,3 +59,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\"><h3 class=\"govuk-notification-banner__heading\">\n  4 files uploaded\n</h3>\n<ul class=\"govuk-!-margin-0 govuk-list\">\n  <li><a href=\"link-1\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n  <li><a href=\"link-2\" class=\"govuk-notification-banner__link\">government-strategy-v1.pdf</a></li>\n</ul>\n</div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <h3 class=\"govuk-notification-banner__heading\">\n      4 files uploaded\n    </h3>\n    <ul class=\"govuk-!-margin-0 govuk-list\">\n      <li><a href=\"link-1\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n      <li><a href=\"link-2\" class=\"govuk-notification-banner__link\">government-strategy-v1.pdf</a></li>\n    </ul>\n  </div>\n</div>"
         },
@@ -70,3 +70,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\"><h3 class=\"govuk-notification-banner__heading\">4 files uploaded</h3>\n<ul class=\"govuk-list govuk-list--bullet govuk-!-margin-bottom-0\">\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v2.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v3-FINAL.pdf</a></li>\n  <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v4-FINAL-v2.pdf</a></li>\n</ul>\n</div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <h3 class=\"govuk-notification-banner__heading\">4 files uploaded</h3>\n    <ul class=\"govuk-list govuk-list--bullet govuk-!-margin-bottom-0\">\n      <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy.pdf</a></li>\n      <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v2.pdf</a></li>\n      <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v3-FINAL.pdf</a></li>\n      <li><a href=\"#\" class=\"govuk-notification-banner__link\">government-strategy-v4-FINAL-v2.pdf</a></li>\n    </ul>\n  </div>\n</div>"
         },
@@ -81,3 +81,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters.\n    </p>\n  </div>\n</div>"
         },
@@ -87,3 +87,3 @@ {
             "options": {
-                "html": "<h3 class=\"govuk-notification-banner__heading\">\n  Check if you need to apply the reverse charge to this application\n</h3>\n<p class=\"govuk-body\">You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:</p>\n<ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n  <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>\n  <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>\n</ul>\n"
+                "html": "<h3 class=\"govuk-notification-banner__heading\">\n  Check if you need to apply the reverse charge to this application\n</h3>\n<p class=\"govuk-body\">\n  You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:\n</p>\n<ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n  <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>\n  <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>\n</ul>\n"
             },
@@ -93,3 +93,3 @@ "hidden": false,
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\"><h3 class=\"govuk-notification-banner__heading\">\n  Check if you need to apply the reverse charge to this application\n</h3>\n<p class=\"govuk-body\">You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:</p>\n<ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n  <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>\n  <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>\n</ul>\n</div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <h3 class=\"govuk-notification-banner__heading\">\n      Check if you need to apply the reverse charge to this application\n    </h3>\n    <p class=\"govuk-body\">\n      You will have to apply the <a href=\"#\" class=\"govuk-notification-banner__link\">reverse charge</a> if the applicant supplies any of these services:\n    </p>\n    <ul class=\"govuk-list govuk-list--bullet govuk-list--spaced\">\n      <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>\n      <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>\n    </ul>\n  </div>\n</div>"
         },
@@ -106,3 +106,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" data-disable-auto-focus=\"true\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">Email sent to [e-mail]</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" data-disable-auto-focus=\"true\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      Email sent to [e-mail]\n    </p>\n  </div>\n</div>"
         },
@@ -119,3 +119,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" data-disable-auto-focus=\"false\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">Email sent to [e-mail]</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" data-disable-auto-focus=\"false\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      Email sent to [e-mail]\n    </p>\n  </div>\n</div>"
         },
@@ -132,3 +132,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">Email sent to [e-mail]</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      Email sent to [e-mail]\n    </p>\n  </div>\n</div>"
         },
@@ -147,3 +147,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" tabindex=\"2\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">Email sent to [e-mail]</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" tabindex=\"2\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      Email sent to [e-mail]\n    </p>\n  </div>\n</div>"
         },
@@ -159,3 +159,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important information\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important information\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -171,3 +171,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      <span>Important information</span>\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      <span>Important information</span>\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -183,3 +183,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      &lt;span&gt;Important information&lt;/span&gt;\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      &lt;span&gt;Important information&lt;/span&gt;\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -195,3 +195,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h3 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h3>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h3 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h3>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -207,3 +207,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"my-id\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"my-id\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"my-id\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"my-id\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -220,3 +220,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"my-id\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"my-id\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">Email sent to [e-mail]</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner govuk-notification-banner--success\" role=\"alert\" aria-labelledby=\"my-id\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"my-id\">\n      Success\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      Email sent to [e-mail]\n    </p>\n  </div>\n</div>"
         },
@@ -231,3 +231,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -242,3 +242,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">&lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      &lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;\n    </p>\n  </div>\n</div>"
         },
@@ -254,3 +254,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"banner\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"banner\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -266,3 +266,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner app-my-class\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner app-my-class\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -280,3 +280,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" my-attribute=\"value\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\" my-attribute=\"value\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         },
@@ -292,5 +292,5 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n      <p class=\"govuk-notification-banner__heading\">This publication was withdrawn on 7 March 2014.</p></div>\n</div>"
+            "html": "<div class=\"govuk-notification-banner\" role=\"region\" aria-labelledby=\"govuk-notification-banner-title\" data-module=\"govuk-notification-banner\">\n  <div class=\"govuk-notification-banner__header\">\n    <h2 class=\"govuk-notification-banner__title\" id=\"govuk-notification-banner-title\">\n      Important\n    </h2>\n  </div>\n  <div class=\"govuk-notification-banner__content\">\n    <p class=\"govuk-notification-banner__heading\">\n      This publication was withdrawn on 7 March 2014.\n    </p>\n  </div>\n</div>"
         }
     ]
 }

dist/govuk/components/pagination/fixtures.json

@@ -32,3 +32,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></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 class=\"govuk-visually-hidden\"> page</span></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>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <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>\n    <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>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </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>\n    </a>\n  </div>\n</nav>"
         },
@@ -64,3 +64,3 @@ {
             "previewLayoutModifiers": [],
-            "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 class=\"govuk-visually-hidden\"> page</span></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 class=\"govuk-visually-hidden\"> page</span></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>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"search\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <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>\n    <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>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </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>\n    </a>\n  </div>\n</nav>"
         },
@@ -97,3 +97,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><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>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous page\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <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>\n    <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>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next page\n      </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>\n    </a>\n  </div>\n</nav>"
         },
@@ -131,3 +131,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></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 class=\"govuk-visually-hidden\"> page</span></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>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <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>\n    <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>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </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>\n    </a>\n  </div>\n</nav>"
         },
@@ -184,3 +184,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></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 class=\"govuk-visually-hidden\"> page</span></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>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">\n      &ctdot;\n    </li>\n    <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>\n    <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>\n    <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>\n    <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>\n    <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>\n    <li class=\"govuk-pagination__item govuk-pagination__item--ellipses\">\n      &ctdot;\n    </li>\n    <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>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </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>\n    </a>\n  </div>\n</nav>"
         },
@@ -212,3 +212,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></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>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\">\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <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>\n    <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>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </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>\n    </a>\n  </div>\n</nav>"
         },
@@ -240,3 +240,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></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=\"Pagination\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <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>\n    <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>\n  </ul>\n</nav>"
         },
@@ -256,3 +256,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></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 class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </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\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n</nav>"
         },
@@ -276,3 +276,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><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\">Paying VAT and duty</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\">Registering an imported vehicle</span></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous page\n      </span>\n      <span class=\"govuk-visually-hidden\">:</span>\n      <span class=\"govuk-pagination__link-label\">Paying VAT and duty</span>\n    </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\">\n        Next page\n      </span>\n      <span class=\"govuk-visually-hidden\">:</span>\n      <span class=\"govuk-pagination__link-label\">Registering an imported vehicle</span>\n    </a>\n  </div>\n</nav>"
         },
@@ -296,3 +296,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><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>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous page\n      </span>\n      <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>\n    </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\">\n        Next page\n      </span>\n      <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>\n    </a>\n  </div>\n</nav>"
         },
@@ -314,3 +314,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><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>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        précédente\n      </span>\n    </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\">\n        suivante\n      </span>\n    </a>\n  </div>\n</nav>"
         },
@@ -327,3 +327,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div>\n</nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n</nav>"
         },
@@ -340,3 +340,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></span></a>\n    </div></nav>"
+            "html": "<nav class=\"govuk-pagination govuk-pagination--block\" role=\"navigation\" aria-label=\"Pagination\">\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\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n</nav>"
         },
@@ -372,3 +372,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination my-custom-class\" role=\"navigation\" aria-label=\"Pagination\"><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 class=\"govuk-visually-hidden\"> page</span></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 class=\"govuk-visually-hidden\"> page</span></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>"
+            "html": "<nav class=\"govuk-pagination my-custom-class\" role=\"navigation\" aria-label=\"Pagination\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <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>\n    <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>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </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>\n    </a>\n  </div>\n</nav>"
         },
@@ -407,5 +407,5 @@ {
             "previewLayoutModifiers": [],
-            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\" 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 class=\"govuk-visually-hidden\"> page</span></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 class=\"govuk-visually-hidden\"> page</span></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>"
+            "html": "<nav class=\"govuk-pagination\" role=\"navigation\" aria-label=\"Pagination\" data-attribute-1=\"value-1\" data-attribute-2=\"value-2\">\n  <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\">\n        Previous<span class=\"govuk-visually-hidden\"> page</span>\n      </span>\n    </a>\n  </div>\n  <ul class=\"govuk-pagination__list\">\n    <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>\n    <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>\n    <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>\n  </ul>\n  <div class=\"govuk-pagination__next\">\n    <a class=\"govuk-link govuk-pagination__link\" href=\"/next\" rel=\"next\">\n      <span class=\"govuk-pagination__link-title\">\n        Next<span class=\"govuk-visually-hidden\"> page</span>\n      </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>\n    </a>\n  </div>\n</nav>"
         }
     ]
 }

dist/govuk/components/radios/macro-options.json

@@ -40,2 +40,42 @@ [
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInputs",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before all radio items within the checkboxes component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before all radio items. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before all radio items. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInputs",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after all radio items within the checkboxes component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after all radio items. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after all radio items. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
@@ -54,3 +94,3 @@ ]
         "required": true,
-        "description": "Name attribute for all radio items."
+        "description": "Name attribute for the radio items."
     },
@@ -57,0 +97,0 @@ {

dist/govuk/components/select/fixtures.json

@@ -32,3 +32,3 @@ {
             "previewLayoutModifiers": [],
-            "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      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\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>"
         },
@@ -78,3 +78,3 @@ {
             "previewLayoutModifiers": [],
-            "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      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\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>"
         },
@@ -113,3 +113,3 @@ {
             "previewLayoutModifiers": [],
-            "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      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\">GOV.UK frontend option 2</option>\n      \n      <option value=\"3\">GOV.UK frontend option 3</option>\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>"
         },
@@ -146,3 +146,3 @@ {
             "previewLayoutModifiers": [],
-            "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  <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n  </select>\n</div>"
+            "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  <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>"
         },
@@ -178,3 +178,3 @@ {
             "previewLayoutModifiers": [],
-            "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      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\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>"
         },
@@ -213,3 +213,3 @@ {
             "previewLayoutModifiers": [],
-            "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      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n      \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\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>"
         },
@@ -239,3 +239,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"test-target-element\">\n      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"test-target-element\">\n    <option value=\"1\">GOV.UK frontend option 1</option>\n    <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
         },
@@ -267,3 +267,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    Label text goes here\n  </label>\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>"
         },
@@ -301,3 +301,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-item-attributes\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n      \n      <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n      \n      <option value=\"2\" selected data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-item-attributes\">\n    Label text goes here\n  </label>\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>"
         },
@@ -329,3 +329,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-falsey-items\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-falsey-items\" name=\"with-falsey-items\">\n      \n      <option value=\"1\">Option 1</option>\n      \n      <option value=\"2\">Options 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-falsey-items\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"with-falsey-items\" name=\"with-falsey-items\">\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\">Options 2</option>\n  </select>\n</div>"
         },
@@ -375,3 +375,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-with-hint\">\n    Label text goes here\n  </label>\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=\"test-target-element select-with-hint-hint\">\n      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-with-hint\">\n    Label text goes here\n  </label>\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=\"test-target-element 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>"
         },
@@ -403,3 +403,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-with-error\">\n    Label text goes here\n  </label>\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      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-with-error\">\n    Label text goes here\n  </label>\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>"
         },
@@ -432,3 +432,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-with-error\">\n    Label text goes here\n  </label>\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=\"test-target-element select-with-error-error\">\n      \n      <option value=\"1\">GOV.UK frontend option 1</option>\n      \n      <option value=\"2\">GOV.UK frontend option 2</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-with-error\">\n    Label text goes here\n  </label>\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=\"test-target-element 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>"
         },
@@ -458,3 +458,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n      \n      <option>Red</option>\n      \n      <option>Green</option>\n      \n      <option>Blue</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n    <option>Red</option>\n    <option>Green</option>\n    <option>Blue</option>\n  </select>\n</div>"
         },
@@ -485,3 +485,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n      \n      <option>Red</option>\n      \n      <option selected>Green</option>\n      \n      <option>Blue</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n    <option>Red</option>\n    <option selected>Green</option>\n    <option>Blue</option>\n  </select>\n</div>"
         },
@@ -514,3 +514,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"falsey-values\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"falsey-values\" name=\"falsey-values\">\n      \n      <option value=\"\">Empty string</option>\n      \n      <option value=\"false\">Boolean false</option>\n      \n      <option value=\"0\">Number zero</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"falsey-values\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"falsey-values\" name=\"falsey-values\">\n    <option value=\"\">Empty string</option>\n    <option value=\"false\">Boolean false</option>\n    <option value=\"0\">Number zero</option>\n  </select>\n</div>"
         },
@@ -545,5 +545,5 @@ {
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\n  <select class=\"govuk-select\" id=\"colors\" name=\"colors\">\n      \n      <option value=\"red\">Red</option>\n      \n      <option value=\"green\">Green</option>\n      \n      <option value=\"blue\">Blue</option>\n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"colors\">\n    Label text goes here\n  </label>\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>"
         }
     ]
 }

dist/govuk/components/select/macro-options.json

@@ -108,2 +108,42 @@ [
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before the select used by the select component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before the select. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before the select. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after the select used by the select component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after the select. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after the select. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
@@ -110,0 +150,0 @@ ]

dist/govuk/components/table/fixtures.json

@@ -52,3 +52,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -116,3 +116,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -183,5 +183,56 @@ {
             "previewLayoutModifiers": [],
-            "html": "<table class=\"govuk-table\">\n  <caption class=\"govuk-table__caption govuk-table__caption--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>"
+            "html": "<table class=\"govuk-table\">\n  <caption class=\"govuk-table__caption govuk-table__caption--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>"
         },
         {
+            "name": "with small text modifier for tables with a lot of data",
+            "options": {
+                "classes": "govuk-table--small-text-until-tablet",
+                "rows": [
+                    [
+                        {
+                            "text": "January"
+                        },
+                        {
+                            "text": "£85",
+                            "format": "numeric"
+                        },
+                        {
+                            "text": "£95",
+                            "format": "numeric"
+                        }
+                    ],
+                    [
+                        {
+                            "text": "February"
+                        },
+                        {
+                            "text": "£75",
+                            "format": "numeric"
+                        },
+                        {
+                            "text": "£55",
+                            "format": "numeric"
+                        }
+                    ],
+                    [
+                        {
+                            "text": "March"
+                        },
+                        {
+                            "text": "£165",
+                            "format": "numeric"
+                        },
+                        {
+                            "text": "£125",
+                            "format": "numeric"
+                        }
+                    ]
+                ]
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<table class=\"govuk-table govuk-table--small-text-until-tablet\">\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>"
+        },
+        {
             "name": "classes",
@@ -204,3 +255,3 @@ "options": {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -227,3 +278,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -249,3 +300,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -271,3 +322,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -297,3 +348,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -324,3 +375,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -352,3 +403,3 @@ {
             "previewLayoutModifiers": [],
-            "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\">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>"
+            "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\">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>"
         },
@@ -404,3 +455,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -423,3 +474,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -441,3 +492,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -459,3 +510,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -479,3 +530,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -500,3 +551,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -538,3 +589,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -556,3 +607,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -575,3 +626,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -595,5 +646,5 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         }
     ]
 }

dist/govuk/components/tabs/fixtures.json

@@ -41,3 +41,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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  </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  </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  </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>"
         },
@@ -67,3 +67,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <h2 class=\"govuk-heading-l\">Tab 2</h2>\n  </div>\n</div>"
         },
@@ -87,3 +87,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -107,3 +107,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -127,3 +127,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -149,3 +149,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -172,3 +172,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -195,3 +195,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -245,3 +245,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -270,3 +270,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -296,3 +296,3 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         },
@@ -322,5 +322,5 @@ {
             "previewLayoutModifiers": [],
-            "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>"
+            "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>"
         }
     ]
 }

dist/govuk/components/task-list/fixtures.json

@@ -46,3 +46,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Company Directors</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Completed\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Registered company details</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Incomplete\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">Business plan</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Incomplete\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -103,3 +103,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Company Directors</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Completed\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Registered company details</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag govuk-tag--light-blue\">\n      Not started\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">Business plan</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      In progress\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">Documentation</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n          <strong class=\"govuk-tag govuk-tag--light-blue\">\n      Not started\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        In progress\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Documentation\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -187,3 +187,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Company Directors</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Completed\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Registered company details</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag govuk-tag--light-blue\">\n      Not started\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-hint task-list-3-status\">Business plan</a>\n          <div id=\"task-list-3-hint\" class=\"govuk-task-list__hint\">\n            Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--pink\">\n      Review\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">Documentation</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      In progress\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">Charitable status</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n          <strong class=\"govuk-tag govuk-tag--red\">\n      Error\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <div>Payment</div>\n          <div id=\"task-list-6-hint\" class=\"govuk-task-list__hint\">\n            It will cost between £15 and £75\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-6-status\">\n          Cannot start yet\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Not started\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-hint task-list-3-status\">\n        Business plan\n      </a>\n      <div id=\"task-list-3-hint\" class=\"govuk-task-list__hint\">\n        Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--pink\">\n        Review\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Documentation\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        In progress\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Charitable status\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Error\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        Payment\n      </div>\n      <div id=\"task-list-6-hint\" class=\"govuk-task-list__hint\">\n        It will cost between £15 and £75\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-6-status\">\n      Cannot start yet\n    </div>\n  </li>\n</ul>"
         },
@@ -338,3 +338,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Task A</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Text colour\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Task B</a>\n      </div>\n      <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-2-status\">\n          Secondary text colour\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">Task C</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--grey\">\n      Grey\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">Task D</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Blue\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">Task E</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n          <strong class=\"govuk-tag govuk-tag--light-blue\">\n      Light blue\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">Task F</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n          <strong class=\"govuk-tag govuk-tag--turquoise\">\n      Turquoise\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-7-status\">Task G</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-7-status\">\n          <strong class=\"govuk-tag govuk-tag--green\">\n      Green\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-8-status\">Task H</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-8-status\">\n          <strong class=\"govuk-tag govuk-tag--purple\">\n      Purple\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-9-status\">Task I</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-9-status\">\n          <strong class=\"govuk-tag govuk-tag--pink\">\n      Pink\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-10-status\">Task J</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-10-status\">\n          <strong class=\"govuk-tag govuk-tag--red\">\n      Red\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-11-status\">Task K</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-11-status\">\n          <strong class=\"govuk-tag govuk-tag--orange\">\n      Orange\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-12-status\">Task L</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-12-status\">\n          <strong class=\"govuk-tag govuk-tag--yellow\">\n      Yellow\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Task A\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Task B\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status govuk-task-list__status--cannot-start-yet\" id=\"task-list-2-status\">\n      Secondary text colour\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Task C\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--grey\">\n        Grey\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-4-status\">\n        Task D\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-4-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-5-status\">\n        Task E\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-5-status\">\n      <strong class=\"govuk-tag govuk-tag--light-blue\">\n        Light blue\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-6-status\">\n        Task F\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-6-status\">\n      <strong class=\"govuk-tag govuk-tag--turquoise\">\n        Turquoise\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-7-status\">\n        Task G\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-7-status\">\n      <strong class=\"govuk-tag govuk-tag--green\">\n        Green\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-8-status\">\n        Task H\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-8-status\">\n      <strong class=\"govuk-tag govuk-tag--purple\">\n        Purple\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-9-status\">\n        Task I\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-9-status\">\n      <strong class=\"govuk-tag govuk-tag--pink\">\n        Pink\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-10-status\">\n        Task J\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-10-status\">\n      <strong class=\"govuk-tag govuk-tag--red\">\n        Red\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-11-status\">\n        Task K\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-11-status\">\n      <strong class=\"govuk-tag govuk-tag--orange\">\n        Orange\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-12-status\">\n        Task L\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-12-status\">\n      <strong class=\"govuk-tag govuk-tag--yellow\">\n        Yellow\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -383,3 +383,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">Company Directors</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          Completed\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">Registered company details</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Incomplete\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">A very very very long Business plan</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n          <strong class=\"govuk-tag govuk-tag--blue\">\n      Thisisaverylongwaytosaythatsomethingisincomplete\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        A very very very long Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Thisisaverylongwaytosaythatsomethingisincomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -422,3 +422,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list custom-class-on-component\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link custom-class-on-task\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link custom-class-on-linked-title\" href=\"#\" aria-describedby=\"task-list-1-status\">A Link</a>\n      </div>\n      <div class=\"govuk-task-list__status custom-class-on-status\" id=\"task-list-1-status\">\n          <strong class=\"govuk-tag custom-class-on-tag\">\n      Status\n    </strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <div class=\"custom-class-on-unlinked-title\">Not a link</div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n          <strong class=\"govuk-tag\">\n      Status\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list custom-class-on-component\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link custom-class-on-task\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link custom-class-on-linked-title\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        A Link\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status custom-class-on-status\" id=\"task-list-1-status\">\n      <strong class=\"govuk-tag custom-class-on-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div class=\"custom-class-on-unlinked-title\">\n        Not a link\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -451,3 +451,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\" data-custom-attribute=\"custom-value\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">A Link</a>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n          <strong class=\"govuk-tag\" data-tag-attribute=\"tag-value\">\n      Status\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\" data-custom-attribute=\"custom-value\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        A Link\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      <strong class=\"govuk-tag\" data-tag-attribute=\"tag-value\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -478,3 +478,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">A Link</a>\n          <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n            Hint text\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n          <strong class=\"govuk-tag\">\n      Status\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        A Link\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        Hint text\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      <strong class=\"govuk-tag\">\n        Status\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -513,3 +513,3 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">&lt;strong&gt;Linked Title&lt;/strong&gt;</a>\n          <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n            &lt;strong&gt;Hint&lt;/strong&gt;\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n          &lt;strong&gt;Status&lt;/strong&gt;\n      </div>\n    </li>\n<li class=\"govuk-task-list__item\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <div>&lt;strong&gt;Unlinked Title&lt;/strong&gt;</div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n          <strong class=\"govuk-tag\">\n      &lt;strong&gt;Tag&lt;/strong&gt;\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        &lt;strong&gt;Linked Title&lt;/strong&gt;\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        &lt;strong&gt;Hint&lt;/strong&gt;\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      &lt;strong&gt;Status&lt;/strong&gt;\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        &lt;strong&gt;Unlinked Title&lt;/strong&gt;\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n      <strong class=\"govuk-tag\">\n        &lt;strong&gt;Tag&lt;/strong&gt;\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
@@ -548,5 +548,5 @@ {
             "previewLayoutModifiers": [],
-            "html": "<ul class=\"govuk-task-list\">\n<li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\"><strong>Linked Title</strong></a>\n          <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n            <strong>Hint</strong>\n          </div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n          <strong>Status</strong>\n      </div>\n    </li>\n<li class=\"govuk-task-list__item\">\n      <div class=\"govuk-task-list__name-and-hint\">\n          <div><strong>Unlinked Title</strong></div>\n      </div>\n      <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n          <strong class=\"govuk-tag\">\n      <strong>Tag</strong>\n    </strong>\n      </div>\n    </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"my-custom-id-1-hint my-custom-id-1-status\">\n        <strong>Linked Title</strong>\n      </a>\n      <div id=\"my-custom-id-1-hint\" class=\"govuk-task-list__hint\">\n        <strong>Hint</strong>\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-1-status\">\n      <strong>Status</strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <div>\n        <strong>Unlinked Title</strong>\n      </div>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"my-custom-id-2-status\">\n      <strong class=\"govuk-tag\">\n        <strong>Tag</strong>\n      </strong>\n    </div>\n  </li>\n</ul>"
         }
     ]
 }

dist/govuk/components/textarea/macro-options.json

@@ -82,2 +82,42 @@ [
                 "description": "HTML attributes (for example data attributes) to add to the form group."
+            },
+            {
+                "name": "beforeInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add before the textarea used by the textarea component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add before the textarea. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add before the textarea. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
+            },
+            {
+                "name": "afterInput",
+                "type": "object",
+                "required": false,
+                "description": "Content to add after the textarea used by the textarea component.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "Text to add after the textarea. If `html` is provided, the `text` option will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "HTML to add after the textarea. If `html` is provided, the `text` option will be ignored."
+                    }
+                ]
             }
@@ -84,0 +124,0 @@ ]

dist/govuk/govuk-frontend.min.js

@@ -1,1 +0,1 @@
-const version="5.1.0";function mergeConfigs(...t){function flattenObject(t){const e={};return function flattenLoop(t,n){for(const[i,s]of Object.entries(t)){const t=n?`${n}.${i}`:i;s&&"object"==typeof s?flattenLoop(s,t):e[t]=s}}(t),e}const e={};for(const n of t){const t=flattenObject(n);for(const[n,i]of Object.entries(t))e[n]=i}return e}function extractConfigByNamespace(t,e){const n={};for(const[i,s]of Object.entries(t)){const t=i.split(".");if(t[0]===e){t.length>1&&t.shift();n[t.join(".")]=s}}return n}function getFragmentFromUrl(t){if(t.includes("#"))return t.split("#").pop()}function getBreakpoint(t){const e=`--govuk-frontend-breakpoint-${t}`;return{property:e,value:window.getComputedStyle(document.documentElement).getPropertyValue(e)||void 0}}function setFocus(t,e={}){var n;const i=t.getAttribute("tabindex");function onBlur(){var n;null==(n=e.onBlur)||n.call(t),i||t.removeAttribute("tabindex")}i||t.setAttribute("tabindex","-1"),t.addEventListener("focus",(function(){t.addEventListener("blur",onBlur,{once:!0})}),{once:!0}),null==(n=e.onBeforeFocus)||n.call(t),t.focus()}function isSupported(t=document.body){return!!t&&t.classList.contains("govuk-frontend-supported")}function normaliseString(t){if("string"!=typeof t)return t;const e=t.trim();return"true"===e||"false"!==e&&(e.length>0&&isFinite(Number(e))?Number(e):t)}function normaliseDataset(t){const e={};for(const[n,i]of Object.entries(t))e[n]=normaliseString(i);return e}class GOVUKFrontendError extends Error{constructor(...t){super(...t),this.name="GOVUKFrontendError"}}class SupportError extends GOVUKFrontendError{constructor(t=document.body){const e="noModule"in HTMLScriptElement.prototype?'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet':"GOV.UK Frontend is not supported in this browser";super(t?e:'GOV.UK Frontend initialised without `<script type="module">`'),this.name="SupportError"}}class ConfigError extends GOVUKFrontendError{constructor(...t){super(...t),this.name="ConfigError"}}class ElementError extends GOVUKFrontendError{constructor(t){let e="string"==typeof t?t:"";if("object"==typeof t){const{componentName:n,identifier:i,element:s,expectedType:o}=t;e=`${n}: ${i}`,e+=s?` is not of type ${null!=o?o:"HTMLElement"}`:" not found"}super(e),this.name="ElementError"}}class GOVUKFrontendComponent{constructor(){this.checkSupport()}checkSupport(){if(!isSupported())throw new SupportError}}class I18n{constructor(t={},e={}){var n;this.translations=void 0,this.locale=void 0,this.translations=t,this.locale=null!=(n=e.locale)?n:document.documentElement.lang||"en"}t(t,e){if(!t)throw new Error("i18n: lookup key missing");"number"==typeof(null==e?void 0:e.count)&&(t=`${t}.${this.getPluralSuffix(t,e.count)}`);const n=this.translations[t];if("string"==typeof n){if(n.match(/%{(.\S+)}/)){if(!e)throw new Error("i18n: cannot replace placeholders in string if no option data provided");return this.replacePlaceholders(n,e)}return n}return t}replacePlaceholders(t,e){const n=Intl.NumberFormat.supportedLocalesOf(this.locale).length?new Intl.NumberFormat(this.locale):void 0;return t.replace(/%{(.\S+)}/g,(function(t,i){if(Object.prototype.hasOwnProperty.call(e,i)){const t=e[i];return!1===t||"number"!=typeof t&&"string"!=typeof t?"":"number"==typeof t?n?n.format(t):`${t}`:t}throw new Error(`i18n: no data found to replace ${t} placeholder in string`)}))}hasIntlPluralRulesSupport(){return Boolean("PluralRules"in window.Intl&&Intl.PluralRules.supportedLocalesOf(this.locale).length)}getPluralSuffix(t,e){if(e=Number(e),!isFinite(e))return"other";const n=this.hasIntlPluralRulesSupport()?new Intl.PluralRules(this.locale).select(e):this.selectPluralFormUsingFallbackRules(e);if(`${t}.${n}`in this.translations)return n;if(`${t}.other`in this.translations)return console.warn(`i18n: Missing plural form ".${n}" for "${this.locale}" locale. Falling back to ".other".`),"other";throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`)}selectPluralFormUsingFallbackRules(t){t=Math.abs(Math.floor(t));const e=this.getPluralRulesForLocale();return e?I18n.pluralRules[e](t):"other"}getPluralRulesForLocale(){const t=this.locale.split("-")[0];for(const e in I18n.pluralRulesMap){const n=I18n.pluralRulesMap[e];if(n.includes(this.locale)||n.includes(t))return e}}}I18n.pluralRulesMap={arabic:["ar"],chinese:["my","zh","id","ja","jv","ko","ms","th","vi"],french:["hy","bn","fr","gu","hi","fa","pa","zu"],german:["af","sq","az","eu","bg","ca","da","nl","en","et","fi","ka","de","el","hu","lb","no","so","sw","sv","ta","te","tr","ur"],irish:["ga"],russian:["ru","uk"],scottish:["gd"],spanish:["pt-PT","it","es"],welsh:["cy"]},I18n.pluralRules={arabic:t=>0===t?"zero":1===t?"one":2===t?"two":t%100>=3&&t%100<=10?"few":t%100>=11&&t%100<=99?"many":"other",chinese:()=>"other",french:t=>0===t||1===t?"one":"other",german:t=>1===t?"one":"other",irish:t=>1===t?"one":2===t?"two":t>=3&&t<=6?"few":t>=7&&t<=10?"many":"other",russian(t){const e=t%100,n=e%10;return 1===n&&11!==e?"one":n>=2&&n<=4&&!(e>=12&&e<=14)?"few":0===n||n>=5&&n<=9||e>=11&&e<=14?"many":"other"},scottish:t=>1===t||11===t?"one":2===t||12===t?"two":t>=3&&t<=10||t>=13&&t<=19?"few":"other",spanish:t=>1===t?"one":t%1e6==0&&0!==t?"many":"other",welsh:t=>0===t?"zero":1===t?"one":2===t?"two":3===t?"few":6===t?"many":"other"};class Accordion extends GOVUKFrontendComponent{constructor(e,n={}){if(super(),this.$module=void 0,this.config=void 0,this.i18n=void 0,this.controlsClass="govuk-accordion__controls",this.showAllClass="govuk-accordion__show-all",this.showAllTextClass="govuk-accordion__show-all-text",this.sectionClass="govuk-accordion__section",this.sectionExpandedClass="govuk-accordion__section--expanded",this.sectionButtonClass="govuk-accordion__section-button",this.sectionHeaderClass="govuk-accordion__section-header",this.sectionHeadingClass="govuk-accordion__section-heading",this.sectionHeadingDividerClass="govuk-accordion__section-heading-divider",this.sectionHeadingTextClass="govuk-accordion__section-heading-text",this.sectionHeadingTextFocusClass="govuk-accordion__section-heading-text-focus",this.sectionShowHideToggleClass="govuk-accordion__section-toggle",this.sectionShowHideToggleFocusClass="govuk-accordion__section-toggle-focus",this.sectionShowHideTextClass="govuk-accordion__section-toggle-text",this.upChevronIconClass="govuk-accordion-nav__chevron",this.downChevronIconClass="govuk-accordion-nav__chevron--down",this.sectionSummaryClass="govuk-accordion__section-summary",this.sectionSummaryFocusClass="govuk-accordion__section-summary-focus",this.sectionContentClass="govuk-accordion__section-content",this.$sections=void 0,this.browserSupportsSessionStorage=!1,this.$showAllButton=null,this.$showAllIcon=null,this.$showAllText=null,!(e instanceof HTMLElement))throw new ElementError({componentName:"Accordion",element:e,identifier:"Root element (`$module`)"});this.$module=e,this.config=mergeConfigs(Accordion.defaults,n,normaliseDataset(e.dataset)),this.i18n=new I18n(extractConfigByNamespace(this.config,"i18n"));const i=this.$module.querySelectorAll(`.${this.sectionClass}`);if(!i.length)throw new ElementError({componentName:"Accordion",identifier:`Sections (\`<div class="${this.sectionClass}">\`)`});this.$sections=i,this.browserSupportsSessionStorage=t.checkForSessionStorage(),this.initControls(),this.initSectionHeaders();const s=this.checkIfAllSectionsOpen();this.updateShowAllButton(s)}initControls(){this.$showAllButton=document.createElement("button"),this.$showAllButton.setAttribute("type","button"),this.$showAllButton.setAttribute("class",this.showAllClass),this.$showAllButton.setAttribute("aria-expanded","false"),this.$showAllIcon=document.createElement("span"),this.$showAllIcon.classList.add(this.upChevronIconClass),this.$showAllButton.appendChild(this.$showAllIcon);const t=document.createElement("div");t.setAttribute("class",this.controlsClass),t.appendChild(this.$showAllButton),this.$module.insertBefore(t,this.$module.firstChild),this.$showAllText=document.createElement("span"),this.$showAllText.classList.add(this.showAllTextClass),this.$showAllButton.appendChild(this.$showAllText),this.$showAllButton.addEventListener("click",(()=>this.onShowOrHideAllToggle())),"onbeforematch"in document&&document.addEventListener("beforematch",(t=>this.onBeforeMatch(t)))}initSectionHeaders(){this.$sections.forEach(((t,e)=>{const n=t.querySelector(`.${this.sectionHeaderClass}`);if(!n)throw new ElementError({componentName:"Accordion",identifier:`Section headers (\`<div class="${this.sectionHeaderClass}">\`)`});this.constructHeaderMarkup(n,e),this.setExpanded(this.isExpanded(t),t),n.addEventListener("click",(()=>this.onSectionToggle(t))),this.setInitialState(t)}))}constructHeaderMarkup(t,e){const n=t.querySelector(`.${this.sectionButtonClass}`),i=t.querySelector(`.${this.sectionHeadingClass}`),s=t.querySelector(`.${this.sectionSummaryClass}`);if(!i)throw new ElementError({componentName:"Accordion",identifier:`Section heading (\`.${this.sectionHeadingClass}\`)`});if(!n)throw new ElementError({componentName:"Accordion",identifier:`Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`});const o=document.createElement("button");o.setAttribute("type","button"),o.setAttribute("aria-controls",`${this.$module.id}-content-${e+1}`);for(const d of Array.from(n.attributes))"id"!==d.nodeName&&o.setAttribute(d.nodeName,`${d.nodeValue}`);const r=document.createElement("span");r.classList.add(this.sectionHeadingTextClass),r.id=n.id;const a=document.createElement("span");a.classList.add(this.sectionHeadingTextFocusClass),r.appendChild(a),a.innerHTML=n.innerHTML;const l=document.createElement("span");l.classList.add(this.sectionShowHideToggleClass),l.setAttribute("data-nosnippet","");const c=document.createElement("span");c.classList.add(this.sectionShowHideToggleFocusClass),l.appendChild(c);const h=document.createElement("span"),u=document.createElement("span");if(u.classList.add(this.upChevronIconClass),c.appendChild(u),h.classList.add(this.sectionShowHideTextClass),c.appendChild(h),o.appendChild(r),o.appendChild(this.getButtonPunctuationEl()),null!=s&&s.parentNode){const t=document.createElement("span"),e=document.createElement("span");e.classList.add(this.sectionSummaryFocusClass),t.appendChild(e);for(const n of Array.from(s.attributes))t.setAttribute(n.nodeName,`${n.nodeValue}`);e.innerHTML=s.innerHTML,s.parentNode.replaceChild(t,s),o.appendChild(t),o.appendChild(this.getButtonPunctuationEl())}o.appendChild(l),i.removeChild(n),i.appendChild(o)}onBeforeMatch(t){const e=t.target;if(!(e instanceof Element))return;const n=e.closest(`.${this.sectionClass}`);n&&this.setExpanded(!0,n)}onSectionToggle(t){const e=this.isExpanded(t);this.setExpanded(!e,t),this.storeState(t)}onShowOrHideAllToggle(){const t=!this.checkIfAllSectionsOpen();this.$sections.forEach((e=>{this.setExpanded(t,e),this.storeState(e)})),this.updateShowAllButton(t)}setExpanded(t,e){const n=e.querySelector(`.${this.upChevronIconClass}`),i=e.querySelector(`.${this.sectionShowHideTextClass}`),s=e.querySelector(`.${this.sectionButtonClass}`),o=e.querySelector(`.${this.sectionContentClass}`);if(!o)throw new ElementError({componentName:"Accordion",identifier:`Section content (\`<div class="${this.sectionContentClass}">\`)`});if(!n||!i||!s)return;const r=t?this.i18n.t("hideSection"):this.i18n.t("showSection");i.textContent=r,s.setAttribute("aria-expanded",`${t}`);const a=[],l=e.querySelector(`.${this.sectionHeadingTextClass}`);l&&a.push(`${l.textContent}`.trim());const c=e.querySelector(`.${this.sectionSummaryClass}`);c&&a.push(`${c.textContent}`.trim());const h=t?this.i18n.t("hideSectionAriaLabel"):this.i18n.t("showSectionAriaLabel");a.push(h),s.setAttribute("aria-label",a.join(" , ")),t?(o.removeAttribute("hidden"),e.classList.add(this.sectionExpandedClass),n.classList.remove(this.downChevronIconClass)):(o.setAttribute("hidden","until-found"),e.classList.remove(this.sectionExpandedClass),n.classList.add(this.downChevronIconClass));const u=this.checkIfAllSectionsOpen();this.updateShowAllButton(u)}isExpanded(t){return t.classList.contains(this.sectionExpandedClass)}checkIfAllSectionsOpen(){return this.$sections.length===this.$module.querySelectorAll(`.${this.sectionExpandedClass}`).length}updateShowAllButton(t){this.$showAllButton&&this.$showAllText&&this.$showAllIcon&&(this.$showAllButton.setAttribute("aria-expanded",t.toString()),this.$showAllText.textContent=t?this.i18n.t("hideAllSections"):this.i18n.t("showAllSections"),this.$showAllIcon.classList.toggle(this.downChevronIconClass,!t))}storeState(t){if(this.browserSupportsSessionStorage&&this.config.rememberExpanded){const e=t.querySelector(`.${this.sectionButtonClass}`);if(e){const t=e.getAttribute("aria-controls"),n=e.getAttribute("aria-expanded");t&&n&&window.sessionStorage.setItem(t,n)}}}setInitialState(t){if(this.browserSupportsSessionStorage&&this.config.rememberExpanded){const e=t.querySelector(`.${this.sectionButtonClass}`);if(e){const n=e.getAttribute("aria-controls"),i=n?window.sessionStorage.getItem(n):null;null!==i&&this.setExpanded("true"===i,t)}}}getButtonPunctuationEl(){const t=document.createElement("span");return t.classList.add("govuk-visually-hidden",this.sectionHeadingDividerClass),t.innerHTML=", ",t}}Accordion.moduleName="govuk-accordion",Accordion.defaults=Object.freeze({i18n:{hideAllSections:"Hide all sections",hideSection:"Hide",hideSectionAriaLabel:"Hide this section",showAllSections:"Show all sections",showSection:"Show",showSectionAriaLabel:"Show this section"},rememberExpanded:!0});const t={checkForSessionStorage:function(){const t="this is the test string";let e;try{return window.sessionStorage.setItem(t,t),e=window.sessionStorage.getItem(t)===t.toString(),window.sessionStorage.removeItem(t),e}catch(n){return!1}}};class Button extends GOVUKFrontendComponent{constructor(t,e={}){if(super(),this.$module=void 0,this.config=void 0,this.debounceFormSubmitTimer=null,!(t instanceof HTMLElement))throw new ElementError({componentName:"Button",element:t,identifier:"Root element (`$module`)"});this.$module=t,this.config=mergeConfigs(Button.defaults,e,normaliseDataset(t.dataset)),this.$module.addEventListener("keydown",(t=>this.handleKeyDown(t))),this.$module.addEventListener("click",(t=>this.debounce(t)))}handleKeyDown(t){const e=t.target;32===t.keyCode&&e instanceof HTMLElement&&"button"===e.getAttribute("role")&&(t.preventDefault(),e.click())}debounce(t){if(this.config.preventDoubleClick)return this.debounceFormSubmitTimer?(t.preventDefault(),!1):void(this.debounceFormSubmitTimer=window.setTimeout((()=>{this.debounceFormSubmitTimer=null}),1e3))}}function closestAttributeValue(t,e){const n=t.closest(`[${e}]`);return n?n.getAttribute(e):null}Button.moduleName="govuk-button",Button.defaults=Object.freeze({preventDoubleClick:!1});class CharacterCount extends GOVUKFrontendComponent{constructor(t,e={}){var n,i;if(super(),this.$module=void 0,this.$textarea=void 0,this.$visibleCountMessage=void 0,this.$screenReaderCountMessage=void 0,this.lastInputTimestamp=null,this.lastInputValue="",this.valueChecker=null,this.config=void 0,this.i18n=void 0,this.maxLength=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Character count",element:t,identifier:"Root element (`$module`)"});const s=t.querySelector(".govuk-js-character-count");if(!(s instanceof HTMLTextAreaElement||s instanceof HTMLInputElement))throw new ElementError({componentName:"Character count",element:s,expectedType:"HTMLTextareaElement or HTMLInputElement",identifier:"Form field (`.govuk-js-character-count`)"});const o=normaliseDataset(t.dataset);let r={};("maxwords"in o||"maxlength"in o)&&(r={maxlength:void 0,maxwords:void 0}),this.config=mergeConfigs(CharacterCount.defaults,e,r,o);const a=function(t,e){const n=[];for(const[i,s]of Object.entries(t)){const t=[];for(const{required:n,errorMessage:i}of s)n.every((t=>!!e[t]))||t.push(i);"anyOf"!==i||s.length-t.length>=1||n.push(...t)}return n}(CharacterCount.schema,this.config);if(a[0])throw new ConfigError(`Character count: ${a[0]}`);this.i18n=new I18n(extractConfigByNamespace(this.config,"i18n"),{locale:closestAttributeValue(t,"lang")}),this.maxLength=null!=(n=null!=(i=this.config.maxwords)?i:this.config.maxlength)?n:1/0,this.$module=t,this.$textarea=s;const l=`${this.$textarea.id}-info`,c=document.getElementById(l);if(!c)throw new ElementError({componentName:"Character count",element:c,identifier:`Count message (\`id="${l}"\`)`});`${c.textContent}`.match(/^\s*$/)&&(c.textContent=this.i18n.t("textareaDescription",{count:this.maxLength})),this.$textarea.insertAdjacentElement("afterend",c);const h=document.createElement("div");h.className="govuk-character-count__sr-status govuk-visually-hidden",h.setAttribute("aria-live","polite"),this.$screenReaderCountMessage=h,c.insertAdjacentElement("afterend",h);const u=document.createElement("div");u.className=c.className,u.classList.add("govuk-character-count__status"),u.setAttribute("aria-hidden","true"),this.$visibleCountMessage=u,c.insertAdjacentElement("afterend",u),c.classList.add("govuk-visually-hidden"),this.$textarea.removeAttribute("maxlength"),this.bindChangeEvents(),window.addEventListener("pageshow",(()=>this.updateCountMessage())),this.updateCountMessage()}bindChangeEvents(){this.$textarea.addEventListener("keyup",(()=>this.handleKeyUp())),this.$textarea.addEventListener("focus",(()=>this.handleFocus())),this.$textarea.addEventListener("blur",(()=>this.handleBlur()))}handleKeyUp(){this.updateVisibleCountMessage(),this.lastInputTimestamp=Date.now()}handleFocus(){this.valueChecker=window.setInterval((()=>{(!this.lastInputTimestamp||Date.now()-500>=this.lastInputTimestamp)&&this.updateIfValueChanged()}),1e3)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker)}updateIfValueChanged(){this.$textarea.value!==this.lastInputValue&&(this.lastInputValue=this.$textarea.value,this.updateCountMessage())}updateCountMessage(){this.updateVisibleCountMessage(),this.updateScreenReaderCountMessage()}updateVisibleCountMessage(){const t=this.maxLength-this.count(this.$textarea.value)<0;this.$visibleCountMessage.classList.toggle("govuk-character-count__message--disabled",!this.isOverThreshold()),this.$textarea.classList.toggle("govuk-textarea--error",t),this.$visibleCountMessage.classList.toggle("govuk-error-message",t),this.$visibleCountMessage.classList.toggle("govuk-hint",!t),this.$visibleCountMessage.textContent=this.getCountMessage()}updateScreenReaderCountMessage(){this.isOverThreshold()?this.$screenReaderCountMessage.removeAttribute("aria-hidden"):this.$screenReaderCountMessage.setAttribute("aria-hidden","true"),this.$screenReaderCountMessage.textContent=this.getCountMessage()}count(t){if(this.config.maxwords){var e;return(null!=(e=t.match(/\S+/g))?e:[]).length}return t.length}getCountMessage(){const t=this.maxLength-this.count(this.$textarea.value),e=this.config.maxwords?"words":"characters";return this.formatCountMessage(t,e)}formatCountMessage(t,e){if(0===t)return this.i18n.t(`${e}AtLimit`);const n=t<0?"OverLimit":"UnderLimit";return this.i18n.t(`${e}${n}`,{count:Math.abs(t)})}isOverThreshold(){if(!this.config.threshold)return!0;const t=this.count(this.$textarea.value);return this.maxLength*this.config.threshold/100<=t}}CharacterCount.moduleName="govuk-character-count",CharacterCount.defaults=Object.freeze({threshold:0,i18n:{charactersUnderLimit:{one:"You have %{count} character remaining",other:"You have %{count} characters remaining"},charactersAtLimit:"You have 0 characters remaining",charactersOverLimit:{one:"You have %{count} character too many",other:"You have %{count} characters too many"},wordsUnderLimit:{one:"You have %{count} word remaining",other:"You have %{count} words remaining"},wordsAtLimit:"You have 0 words remaining",wordsOverLimit:{one:"You have %{count} word too many",other:"You have %{count} words too many"},textareaDescription:{other:""}}}),CharacterCount.schema=Object.freeze({anyOf:[{required:["maxwords"],errorMessage:'Either "maxlength" or "maxwords" must be provided'},{required:["maxlength"],errorMessage:'Either "maxlength" or "maxwords" must be provided'}]});class Checkboxes extends GOVUKFrontendComponent{constructor(t){if(super(),this.$module=void 0,this.$inputs=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Checkboxes",element:t,identifier:"Root element (`$module`)"});const e=t.querySelectorAll('input[type="checkbox"]');if(!e.length)throw new ElementError({componentName:"Checkboxes",identifier:'Form inputs (`<input type="checkbox">`)'});this.$module=t,this.$inputs=e,this.$inputs.forEach((t=>{const e=t.getAttribute("data-aria-controls");if(e){if(!document.getElementById(e))throw new ElementError({componentName:"Checkboxes",identifier:`Conditional reveal (\`id="${e}"\`)`});t.setAttribute("aria-controls",e),t.removeAttribute("data-aria-controls")}})),window.addEventListener("pageshow",(()=>this.syncAllConditionalReveals())),this.syncAllConditionalReveals(),this.$module.addEventListener("click",(t=>this.handleClick(t)))}syncAllConditionalReveals(){this.$inputs.forEach((t=>this.syncConditionalRevealWithInputState(t)))}syncConditionalRevealWithInputState(t){const e=t.getAttribute("aria-controls");if(!e)return;const n=document.getElementById(e);if(n&&n.classList.contains("govuk-checkboxes__conditional")){const e=t.checked;t.setAttribute("aria-expanded",e.toString()),n.classList.toggle("govuk-checkboxes__conditional--hidden",!e)}}unCheckAllInputsExcept(t){document.querySelectorAll(`input[type="checkbox"][name="${t.name}"]`).forEach((e=>{t.form===e.form&&e!==t&&(e.checked=!1,this.syncConditionalRevealWithInputState(e))}))}unCheckExclusiveInputs(t){document.querySelectorAll(`input[data-behaviour="exclusive"][type="checkbox"][name="${t.name}"]`).forEach((e=>{t.form===e.form&&(e.checked=!1,this.syncConditionalRevealWithInputState(e))}))}handleClick(t){const e=t.target;if(!(e instanceof HTMLInputElement)||"checkbox"!==e.type)return;if(e.getAttribute("aria-controls")&&this.syncConditionalRevealWithInputState(e),!e.checked)return;"exclusive"===e.getAttribute("data-behaviour")?this.unCheckAllInputsExcept(e):this.unCheckExclusiveInputs(e)}}Checkboxes.moduleName="govuk-checkboxes";class ErrorSummary extends GOVUKFrontendComponent{constructor(t,e={}){if(super(),this.$module=void 0,this.config=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Error summary",element:t,identifier:"Root element (`$module`)"});this.$module=t,this.config=mergeConfigs(ErrorSummary.defaults,e,normaliseDataset(t.dataset)),this.config.disableAutoFocus||setFocus(this.$module),this.$module.addEventListener("click",(t=>this.handleClick(t)))}handleClick(t){const e=t.target;e&&this.focusTarget(e)&&t.preventDefault()}focusTarget(t){if(!(t instanceof HTMLAnchorElement))return!1;const e=getFragmentFromUrl(t.href);if(!e)return!1;const n=document.getElementById(e);if(!n)return!1;const i=this.getAssociatedLegendOrLabel(n);return!!i&&(i.scrollIntoView(),n.focus({preventScroll:!0}),!0)}getAssociatedLegendOrLabel(t){var e;const n=t.closest("fieldset");if(n){const e=n.getElementsByTagName("legend");if(e.length){const n=e[0];if(t instanceof HTMLInputElement&&("checkbox"===t.type||"radio"===t.type))return n;const i=n.getBoundingClientRect().top,s=t.getBoundingClientRect();if(s.height&&window.innerHeight){if(s.top+s.height-i<window.innerHeight/2)return n}}}return null!=(e=document.querySelector(`label[for='${t.getAttribute("id")}']`))?e:t.closest("label")}}ErrorSummary.moduleName="govuk-error-summary",ErrorSummary.defaults=Object.freeze({disableAutoFocus:!1});class ExitThisPage extends GOVUKFrontendComponent{constructor(t,e={}){if(super(),this.$module=void 0,this.config=void 0,this.i18n=void 0,this.$button=void 0,this.$skiplinkButton=null,this.$updateSpan=null,this.$indicatorContainer=null,this.$overlay=null,this.keypressCounter=0,this.lastKeyWasModified=!1,this.timeoutTime=5e3,this.keypressTimeoutId=null,this.timeoutMessageId=null,!(t instanceof HTMLElement))throw new ElementError({componentName:"Exit this page",element:t,identifier:"Root element (`$module`)"});const n=t.querySelector(".govuk-exit-this-page__button");if(!(n instanceof HTMLAnchorElement))throw new ElementError({componentName:"Exit this page",element:n,expectedType:"HTMLAnchorElement",identifier:"Button (`.govuk-exit-this-page__button`)"});this.config=mergeConfigs(ExitThisPage.defaults,e,normaliseDataset(t.dataset)),this.i18n=new I18n(extractConfigByNamespace(this.config,"i18n")),this.$module=t,this.$button=n;const i=document.querySelector(".govuk-js-exit-this-page-skiplink");i instanceof HTMLAnchorElement&&(this.$skiplinkButton=i),this.buildIndicator(),this.initUpdateSpan(),this.initButtonClickHandler(),"govukFrontendExitThisPageKeypress"in document.body.dataset||(document.addEventListener("keyup",this.handleKeypress.bind(this),!0),document.body.dataset.govukFrontendExitThisPageKeypress="true"),window.addEventListener("pageshow",this.resetPage.bind(this))}initUpdateSpan(){this.$updateSpan=document.createElement("span"),this.$updateSpan.setAttribute("role","status"),this.$updateSpan.className="govuk-visually-hidden",this.$module.appendChild(this.$updateSpan)}initButtonClickHandler(){this.$button.addEventListener("click",this.handleClick.bind(this)),this.$skiplinkButton&&this.$skiplinkButton.addEventListener("click",this.handleClick.bind(this))}buildIndicator(){this.$indicatorContainer=document.createElement("div"),this.$indicatorContainer.className="govuk-exit-this-page__indicator",this.$indicatorContainer.setAttribute("aria-hidden","true");for(let t=0;t<3;t++){const t=document.createElement("div");t.className="govuk-exit-this-page__indicator-light",this.$indicatorContainer.appendChild(t)}this.$button.appendChild(this.$indicatorContainer)}updateIndicator(){if(!this.$indicatorContainer)return;this.$indicatorContainer.classList.toggle("govuk-exit-this-page__indicator--visible",this.keypressCounter>0);this.$indicatorContainer.querySelectorAll(".govuk-exit-this-page__indicator-light").forEach(((t,e)=>{t.classList.toggle("govuk-exit-this-page__indicator-light--on",e<this.keypressCounter)}))}exitPage(){this.$updateSpan&&(this.$updateSpan.textContent="",document.body.classList.add("govuk-exit-this-page-hide-content"),this.$overlay=document.createElement("div"),this.$overlay.className="govuk-exit-this-page-overlay",this.$overlay.setAttribute("role","alert"),document.body.appendChild(this.$overlay),this.$overlay.textContent=this.i18n.t("activated"),window.location.href=this.$button.href)}handleClick(t){t.preventDefault(),this.exitPage()}handleKeypress(t){this.$updateSpan&&("Shift"!==t.key&&16!==t.keyCode&&16!==t.which||this.lastKeyWasModified?this.keypressTimeoutId&&this.resetKeypressTimer():(this.keypressCounter+=1,this.updateIndicator(),this.timeoutMessageId&&(window.clearTimeout(this.timeoutMessageId),this.timeoutMessageId=null),this.keypressCounter>=3?(this.keypressCounter=0,this.keypressTimeoutId&&(window.clearTimeout(this.keypressTimeoutId),this.keypressTimeoutId=null),this.exitPage()):1===this.keypressCounter?this.$updateSpan.textContent=this.i18n.t("pressTwoMoreTimes"):this.$updateSpan.textContent=this.i18n.t("pressOneMoreTime"),this.setKeypressTimer()),this.lastKeyWasModified=t.shiftKey)}setKeypressTimer(){this.keypressTimeoutId&&window.clearTimeout(this.keypressTimeoutId),this.keypressTimeoutId=window.setTimeout(this.resetKeypressTimer.bind(this),this.timeoutTime)}resetKeypressTimer(){if(!this.$updateSpan)return;this.keypressTimeoutId&&(window.clearTimeout(this.keypressTimeoutId),this.keypressTimeoutId=null);const t=this.$updateSpan;this.keypressCounter=0,t.textContent=this.i18n.t("timedOut"),this.timeoutMessageId=window.setTimeout((()=>{t.textContent=""}),this.timeoutTime),this.updateIndicator()}resetPage(){document.body.classList.remove("govuk-exit-this-page-hide-content"),this.$overlay&&(this.$overlay.remove(),this.$overlay=null),this.$updateSpan&&(this.$updateSpan.setAttribute("role","status"),this.$updateSpan.textContent=""),this.updateIndicator(),this.keypressTimeoutId&&window.clearTimeout(this.keypressTimeoutId),this.timeoutMessageId&&window.clearTimeout(this.timeoutMessageId)}}ExitThisPage.moduleName="govuk-exit-this-page",ExitThisPage.defaults=Object.freeze({i18n:{activated:"Loading.",timedOut:"Exit this page expired.",pressTwoMoreTimes:"Shift, press 2 more times to exit.",pressOneMoreTime:"Shift, press 1 more time to exit."}});class Header extends GOVUKFrontendComponent{constructor(t){if(super(),this.$module=void 0,this.$menuButton=void 0,this.$menu=void 0,this.menuIsOpen=!1,this.mql=null,!t)throw new ElementError({componentName:"Header",element:t,identifier:"Root element (`$module`)"});this.$module=t;const e=t.querySelector(".govuk-js-header-toggle");if(!e)return this;const n=e.getAttribute("aria-controls");if(!n)throw new ElementError({componentName:"Header",identifier:'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'});const i=document.getElementById(n);if(!i)throw new ElementError({componentName:"Header",element:i,identifier:`Navigation (\`<ul id="${n}">\`)`});this.$menu=i,this.$menuButton=e,this.setupResponsiveChecks(),this.$menuButton.addEventListener("click",(()=>this.handleMenuButtonClick()))}setupResponsiveChecks(){const t=getBreakpoint("desktop");if(!t.value)throw new ElementError({componentName:"Header",identifier:`CSS custom property (\`${t.property}\`) on pseudo-class \`:root\``});this.mql=window.matchMedia(`(min-width: ${t.value})`),"addEventListener"in this.mql?this.mql.addEventListener("change",(()=>this.checkMode())):this.mql.addListener((()=>this.checkMode())),this.checkMode()}checkMode(){this.mql&&this.$menu&&this.$menuButton&&(this.mql.matches?(this.$menu.removeAttribute("hidden"),this.$menuButton.setAttribute("hidden","")):(this.$menuButton.removeAttribute("hidden"),this.$menuButton.setAttribute("aria-expanded",this.menuIsOpen.toString()),this.menuIsOpen?this.$menu.removeAttribute("hidden"):this.$menu.setAttribute("hidden","")))}handleMenuButtonClick(){this.menuIsOpen=!this.menuIsOpen,this.checkMode()}}Header.moduleName="govuk-header";class NotificationBanner extends GOVUKFrontendComponent{constructor(t,e={}){if(super(),this.$module=void 0,this.config=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Notification banner",element:t,identifier:"Root element (`$module`)"});this.$module=t,this.config=mergeConfigs(NotificationBanner.defaults,e,normaliseDataset(t.dataset)),"alert"!==this.$module.getAttribute("role")||this.config.disableAutoFocus||setFocus(this.$module)}}NotificationBanner.moduleName="govuk-notification-banner",NotificationBanner.defaults=Object.freeze({disableAutoFocus:!1});class Radios extends GOVUKFrontendComponent{constructor(t){if(super(),this.$module=void 0,this.$inputs=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Radios",element:t,identifier:"Root element (`$module`)"});const e=t.querySelectorAll('input[type="radio"]');if(!e.length)throw new ElementError({componentName:"Radios",identifier:'Form inputs (`<input type="radio">`)'});this.$module=t,this.$inputs=e,this.$inputs.forEach((t=>{const e=t.getAttribute("data-aria-controls");if(e){if(!document.getElementById(e))throw new ElementError({componentName:"Radios",identifier:`Conditional reveal (\`id="${e}"\`)`});t.setAttribute("aria-controls",e),t.removeAttribute("data-aria-controls")}})),window.addEventListener("pageshow",(()=>this.syncAllConditionalReveals())),this.syncAllConditionalReveals(),this.$module.addEventListener("click",(t=>this.handleClick(t)))}syncAllConditionalReveals(){this.$inputs.forEach((t=>this.syncConditionalRevealWithInputState(t)))}syncConditionalRevealWithInputState(t){const e=t.getAttribute("aria-controls");if(!e)return;const n=document.getElementById(e);if(null!=n&&n.classList.contains("govuk-radios__conditional")){const e=t.checked;t.setAttribute("aria-expanded",e.toString()),n.classList.toggle("govuk-radios__conditional--hidden",!e)}}handleClick(t){const e=t.target;if(!(e instanceof HTMLInputElement)||"radio"!==e.type)return;const n=document.querySelectorAll('input[type="radio"][aria-controls]'),i=e.form,s=e.name;n.forEach((t=>{const e=t.form===i;t.name===s&&e&&this.syncConditionalRevealWithInputState(t)}))}}Radios.moduleName="govuk-radios";class SkipLink extends GOVUKFrontendComponent{constructor(t){var e;if(super(),this.$module=void 0,!(t instanceof HTMLAnchorElement))throw new ElementError({componentName:"Skip link",element:t,expectedType:"HTMLAnchorElement",identifier:"Root element (`$module`)"});this.$module=t;const n=this.$module.hash,i=null!=(e=this.$module.getAttribute("href"))?e:"";let s;try{s=new window.URL(this.$module.href)}catch(a){throw new ElementError(`Skip link: Target link (\`href="${i}"\`) is invalid`)}if(s.origin!==window.location.origin||s.pathname!==window.location.pathname)return;const o=getFragmentFromUrl(n);if(!o)throw new ElementError(`Skip link: Target link (\`href="${i}"\`) has no hash fragment`);const r=document.getElementById(o);if(!r)throw new ElementError({componentName:"Skip link",element:r,identifier:`Target content (\`id="${o}"\`)`});this.$module.addEventListener("click",(()=>setFocus(r,{onBeforeFocus(){r.classList.add("govuk-skip-link-focused-element")},onBlur(){r.classList.remove("govuk-skip-link-focused-element")}})))}}SkipLink.moduleName="govuk-skip-link";class Tabs extends GOVUKFrontendComponent{constructor(t){if(super(),this.$module=void 0,this.$tabs=void 0,this.$tabList=void 0,this.$tabListItems=void 0,this.keys={left:37,right:39,up:38,down:40},this.jsHiddenClass="govuk-tabs__panel--hidden",this.changingHash=!1,this.boundTabClick=void 0,this.boundTabKeydown=void 0,this.boundOnHashChange=void 0,this.mql=null,!t)throw new ElementError({componentName:"Tabs",element:t,identifier:"Root element (`$module`)"});const e=t.querySelectorAll("a.govuk-tabs__tab");if(!e.length)throw new ElementError({componentName:"Tabs",identifier:'Links (`<a class="govuk-tabs__tab">`)'});this.$module=t,this.$tabs=e,this.boundTabClick=this.onTabClick.bind(this),this.boundTabKeydown=this.onTabKeydown.bind(this),this.boundOnHashChange=this.onHashChange.bind(this);const n=this.$module.querySelector(".govuk-tabs__list"),i=this.$module.querySelectorAll("li.govuk-tabs__list-item");if(!n)throw new ElementError({componentName:"Tabs",identifier:'List (`<ul class="govuk-tabs__list">`)'});if(!i.length)throw new ElementError({componentName:"Tabs",identifier:'List items (`<li class="govuk-tabs__list-item">`)'});this.$tabList=n,this.$tabListItems=i,this.setupResponsiveChecks()}setupResponsiveChecks(){const t=getBreakpoint("tablet");if(!t.value)throw new ElementError({componentName:"Tabs",identifier:`CSS custom property (\`${t.property}\`) on pseudo-class \`:root\``});this.mql=window.matchMedia(`(min-width: ${t.value})`),"addEventListener"in this.mql?this.mql.addEventListener("change",(()=>this.checkMode())):this.mql.addListener((()=>this.checkMode())),this.checkMode()}checkMode(){var t;null!=(t=this.mql)&&t.matches?this.setup():this.teardown()}setup(){var t;this.$tabList.setAttribute("role","tablist"),this.$tabListItems.forEach((t=>{t.setAttribute("role","presentation")})),this.$tabs.forEach((t=>{this.setAttributes(t),t.addEventListener("click",this.boundTabClick,!0),t.addEventListener("keydown",this.boundTabKeydown,!0),this.hideTab(t)}));const e=null!=(t=this.getTab(window.location.hash))?t:this.$tabs[0];this.showTab(e),window.addEventListener("hashchange",this.boundOnHashChange,!0)}teardown(){this.$tabList.removeAttribute("role"),this.$tabListItems.forEach((t=>{t.removeAttribute("role")})),this.$tabs.forEach((t=>{t.removeEventListener("click",this.boundTabClick,!0),t.removeEventListener("keydown",this.boundTabKeydown,!0),this.unsetAttributes(t)})),window.removeEventListener("hashchange",this.boundOnHashChange,!0)}onHashChange(){const t=window.location.hash,e=this.getTab(t);if(!e)return;if(this.changingHash)return void(this.changingHash=!1);const n=this.getCurrentTab();n&&(this.hideTab(n),this.showTab(e),e.focus())}hideTab(t){this.unhighlightTab(t),this.hidePanel(t)}showTab(t){this.highlightTab(t),this.showPanel(t)}getTab(t){return this.$module.querySelector(`a.govuk-tabs__tab[href="${t}"]`)}setAttributes(t){const e=getFragmentFromUrl(t.href);if(!e)return;t.setAttribute("id",`tab_${e}`),t.setAttribute("role","tab"),t.setAttribute("aria-controls",e),t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1");const n=this.getPanel(t);n&&(n.setAttribute("role","tabpanel"),n.setAttribute("aria-labelledby",t.id),n.classList.add(this.jsHiddenClass))}unsetAttributes(t){t.removeAttribute("id"),t.removeAttribute("role"),t.removeAttribute("aria-controls"),t.removeAttribute("aria-selected"),t.removeAttribute("tabindex");const e=this.getPanel(t);e&&(e.removeAttribute("role"),e.removeAttribute("aria-labelledby"),e.classList.remove(this.jsHiddenClass))}onTabClick(t){const e=this.getCurrentTab(),n=t.currentTarget;e&&n instanceof HTMLAnchorElement&&(t.preventDefault(),this.hideTab(e),this.showTab(n),this.createHistoryEntry(n))}createHistoryEntry(t){const e=this.getPanel(t);if(!e)return;const n=e.id;e.id="",this.changingHash=!0,window.location.hash=n,e.id=n}onTabKeydown(t){switch(t.keyCode){case this.keys.left:case this.keys.up:this.activatePreviousTab(),t.preventDefault();break;case this.keys.right:case this.keys.down:this.activateNextTab(),t.preventDefault()}}activateNextTab(){const t=this.getCurrentTab();if(null==t||!t.parentElement)return;const e=t.parentElement.nextElementSibling;if(!e)return;const n=e.querySelector("a.govuk-tabs__tab");n&&(this.hideTab(t),this.showTab(n),n.focus(),this.createHistoryEntry(n))}activatePreviousTab(){const t=this.getCurrentTab();if(null==t||!t.parentElement)return;const e=t.parentElement.previousElementSibling;if(!e)return;const n=e.querySelector("a.govuk-tabs__tab");n&&(this.hideTab(t),this.showTab(n),n.focus(),this.createHistoryEntry(n))}getPanel(t){const e=getFragmentFromUrl(t.href);return e?this.$module.querySelector(`#${e}`):null}showPanel(t){const e=this.getPanel(t);e&&e.classList.remove(this.jsHiddenClass)}hidePanel(t){const e=this.getPanel(t);e&&e.classList.add(this.jsHiddenClass)}unhighlightTab(t){t.parentElement&&(t.setAttribute("aria-selected","false"),t.parentElement.classList.remove("govuk-tabs__list-item--selected"),t.setAttribute("tabindex","-1"))}highlightTab(t){t.parentElement&&(t.setAttribute("aria-selected","true"),t.parentElement.classList.add("govuk-tabs__list-item--selected"),t.setAttribute("tabindex","0"))}getCurrentTab(){return this.$module.querySelector(".govuk-tabs__list-item--selected a.govuk-tabs__tab")}}function initAll(t){var e;if(t=void 0!==t?t:{},!isSupported())return void console.log(new SupportError);const n=[[Accordion,t.accordion],[Button,t.button],[CharacterCount,t.characterCount],[Checkboxes],[ErrorSummary,t.errorSummary],[ExitThisPage,t.exitThisPage],[Header],[NotificationBanner,t.notificationBanner],[Radios],[SkipLink],[Tabs]],i=null!=(e=t.scope)?e:document;n.forEach((([t,e])=>{i.querySelectorAll(`[data-module="${t.moduleName}"]`).forEach((n=>{try{"defaults"in t?new t(n,e):new t(n)}catch(i){console.log(i)}}))}))}Tabs.moduleName="govuk-tabs";export{Accordion,Button,CharacterCount,Checkboxes,ErrorSummary,ExitThisPage,Header,NotificationBanner,Radios,SkipLink,Tabs,initAll,version};//# sourceMappingURL=govuk-frontend.min.js.map
+const version="5.2.0";function mergeConfigs(...t){function flattenObject(t){const e={};return function flattenLoop(t,n){for(const[i,s]of Object.entries(t)){const t=n?`${n}.${i}`:i;s&&"object"==typeof s?flattenLoop(s,t):e[t]=s}}(t),e}const e={};for(const n of t){const t=flattenObject(n);for(const[n,i]of Object.entries(t))e[n]=i}return e}function extractConfigByNamespace(t,e){const n={};for(const[i,s]of Object.entries(t)){const t=i.split(".");if(t[0]===e){t.length>1&&t.shift();n[t.join(".")]=s}}return n}function getFragmentFromUrl(t){if(t.includes("#"))return t.split("#").pop()}function getBreakpoint(t){const e=`--govuk-frontend-breakpoint-${t}`;return{property:e,value:window.getComputedStyle(document.documentElement).getPropertyValue(e)||void 0}}function setFocus(t,e={}){var n;const i=t.getAttribute("tabindex");function onBlur(){var n;null==(n=e.onBlur)||n.call(t),i||t.removeAttribute("tabindex")}i||t.setAttribute("tabindex","-1"),t.addEventListener("focus",(function(){t.addEventListener("blur",onBlur,{once:!0})}),{once:!0}),null==(n=e.onBeforeFocus)||n.call(t),t.focus()}function isSupported(t=document.body){return!!t&&t.classList.contains("govuk-frontend-supported")}function normaliseString(t){if("string"!=typeof t)return t;const e=t.trim();return"true"===e||"false"!==e&&(e.length>0&&isFinite(Number(e))?Number(e):t)}function normaliseDataset(t){const e={};for(const[n,i]of Object.entries(t))e[n]=normaliseString(i);return e}class GOVUKFrontendError extends Error{constructor(...t){super(...t),this.name="GOVUKFrontendError"}}class SupportError extends GOVUKFrontendError{constructor(t=document.body){const e="noModule"in HTMLScriptElement.prototype?'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet':"GOV.UK Frontend is not supported in this browser";super(t?e:'GOV.UK Frontend initialised without `<script type="module">`'),this.name="SupportError"}}class ConfigError extends GOVUKFrontendError{constructor(...t){super(...t),this.name="ConfigError"}}class ElementError extends GOVUKFrontendError{constructor(t){let e="string"==typeof t?t:"";if("object"==typeof t){const{componentName:n,identifier:i,element:s,expectedType:o}=t;e=`${n}: ${i}`,e+=s?` is not of type ${null!=o?o:"HTMLElement"}`:" not found"}super(e),this.name="ElementError"}}class GOVUKFrontendComponent{constructor(){this.checkSupport()}checkSupport(){if(!isSupported())throw new SupportError}}class I18n{constructor(t={},e={}){var n;this.translations=void 0,this.locale=void 0,this.translations=t,this.locale=null!=(n=e.locale)?n:document.documentElement.lang||"en"}t(t,e){if(!t)throw new Error("i18n: lookup key missing");"number"==typeof(null==e?void 0:e.count)&&(t=`${t}.${this.getPluralSuffix(t,e.count)}`);const n=this.translations[t];if("string"==typeof n){if(n.match(/%{(.\S+)}/)){if(!e)throw new Error("i18n: cannot replace placeholders in string if no option data provided");return this.replacePlaceholders(n,e)}return n}return t}replacePlaceholders(t,e){const n=Intl.NumberFormat.supportedLocalesOf(this.locale).length?new Intl.NumberFormat(this.locale):void 0;return t.replace(/%{(.\S+)}/g,(function(t,i){if(Object.prototype.hasOwnProperty.call(e,i)){const t=e[i];return!1===t||"number"!=typeof t&&"string"!=typeof t?"":"number"==typeof t?n?n.format(t):`${t}`:t}throw new Error(`i18n: no data found to replace ${t} placeholder in string`)}))}hasIntlPluralRulesSupport(){return Boolean("PluralRules"in window.Intl&&Intl.PluralRules.supportedLocalesOf(this.locale).length)}getPluralSuffix(t,e){if(e=Number(e),!isFinite(e))return"other";const n=this.hasIntlPluralRulesSupport()?new Intl.PluralRules(this.locale).select(e):this.selectPluralFormUsingFallbackRules(e);if(`${t}.${n}`in this.translations)return n;if(`${t}.other`in this.translations)return console.warn(`i18n: Missing plural form ".${n}" for "${this.locale}" locale. Falling back to ".other".`),"other";throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`)}selectPluralFormUsingFallbackRules(t){t=Math.abs(Math.floor(t));const e=this.getPluralRulesForLocale();return e?I18n.pluralRules[e](t):"other"}getPluralRulesForLocale(){const t=this.locale.split("-")[0];for(const e in I18n.pluralRulesMap){const n=I18n.pluralRulesMap[e];if(n.includes(this.locale)||n.includes(t))return e}}}I18n.pluralRulesMap={arabic:["ar"],chinese:["my","zh","id","ja","jv","ko","ms","th","vi"],french:["hy","bn","fr","gu","hi","fa","pa","zu"],german:["af","sq","az","eu","bg","ca","da","nl","en","et","fi","ka","de","el","hu","lb","no","so","sw","sv","ta","te","tr","ur"],irish:["ga"],russian:["ru","uk"],scottish:["gd"],spanish:["pt-PT","it","es"],welsh:["cy"]},I18n.pluralRules={arabic:t=>0===t?"zero":1===t?"one":2===t?"two":t%100>=3&&t%100<=10?"few":t%100>=11&&t%100<=99?"many":"other",chinese:()=>"other",french:t=>0===t||1===t?"one":"other",german:t=>1===t?"one":"other",irish:t=>1===t?"one":2===t?"two":t>=3&&t<=6?"few":t>=7&&t<=10?"many":"other",russian(t){const e=t%100,n=e%10;return 1===n&&11!==e?"one":n>=2&&n<=4&&!(e>=12&&e<=14)?"few":0===n||n>=5&&n<=9||e>=11&&e<=14?"many":"other"},scottish:t=>1===t||11===t?"one":2===t||12===t?"two":t>=3&&t<=10||t>=13&&t<=19?"few":"other",spanish:t=>1===t?"one":t%1e6==0&&0!==t?"many":"other",welsh:t=>0===t?"zero":1===t?"one":2===t?"two":3===t?"few":6===t?"many":"other"};class Accordion extends GOVUKFrontendComponent{constructor(e,n={}){if(super(),this.$module=void 0,this.config=void 0,this.i18n=void 0,this.controlsClass="govuk-accordion__controls",this.showAllClass="govuk-accordion__show-all",this.showAllTextClass="govuk-accordion__show-all-text",this.sectionClass="govuk-accordion__section",this.sectionExpandedClass="govuk-accordion__section--expanded",this.sectionButtonClass="govuk-accordion__section-button",this.sectionHeaderClass="govuk-accordion__section-header",this.sectionHeadingClass="govuk-accordion__section-heading",this.sectionHeadingDividerClass="govuk-accordion__section-heading-divider",this.sectionHeadingTextClass="govuk-accordion__section-heading-text",this.sectionHeadingTextFocusClass="govuk-accordion__section-heading-text-focus",this.sectionShowHideToggleClass="govuk-accordion__section-toggle",this.sectionShowHideToggleFocusClass="govuk-accordion__section-toggle-focus",this.sectionShowHideTextClass="govuk-accordion__section-toggle-text",this.upChevronIconClass="govuk-accordion-nav__chevron",this.downChevronIconClass="govuk-accordion-nav__chevron--down",this.sectionSummaryClass="govuk-accordion__section-summary",this.sectionSummaryFocusClass="govuk-accordion__section-summary-focus",this.sectionContentClass="govuk-accordion__section-content",this.$sections=void 0,this.browserSupportsSessionStorage=!1,this.$showAllButton=null,this.$showAllIcon=null,this.$showAllText=null,!(e instanceof HTMLElement))throw new ElementError({componentName:"Accordion",element:e,identifier:"Root element (`$module`)"});this.$module=e,this.config=mergeConfigs(Accordion.defaults,n,normaliseDataset(e.dataset)),this.i18n=new I18n(extractConfigByNamespace(this.config,"i18n"));const i=this.$module.querySelectorAll(`.${this.sectionClass}`);if(!i.length)throw new ElementError({componentName:"Accordion",identifier:`Sections (\`<div class="${this.sectionClass}">\`)`});this.$sections=i,this.browserSupportsSessionStorage=t.checkForSessionStorage(),this.initControls(),this.initSectionHeaders();const s=this.checkIfAllSectionsOpen();this.updateShowAllButton(s)}initControls(){this.$showAllButton=document.createElement("button"),this.$showAllButton.setAttribute("type","button"),this.$showAllButton.setAttribute("class",this.showAllClass),this.$showAllButton.setAttribute("aria-expanded","false"),this.$showAllIcon=document.createElement("span"),this.$showAllIcon.classList.add(this.upChevronIconClass),this.$showAllButton.appendChild(this.$showAllIcon);const t=document.createElement("div");t.setAttribute("class",this.controlsClass),t.appendChild(this.$showAllButton),this.$module.insertBefore(t,this.$module.firstChild),this.$showAllText=document.createElement("span"),this.$showAllText.classList.add(this.showAllTextClass),this.$showAllButton.appendChild(this.$showAllText),this.$showAllButton.addEventListener("click",(()=>this.onShowOrHideAllToggle())),"onbeforematch"in document&&document.addEventListener("beforematch",(t=>this.onBeforeMatch(t)))}initSectionHeaders(){this.$sections.forEach(((t,e)=>{const n=t.querySelector(`.${this.sectionHeaderClass}`);if(!n)throw new ElementError({componentName:"Accordion",identifier:`Section headers (\`<div class="${this.sectionHeaderClass}">\`)`});this.constructHeaderMarkup(n,e),this.setExpanded(this.isExpanded(t),t),n.addEventListener("click",(()=>this.onSectionToggle(t))),this.setInitialState(t)}))}constructHeaderMarkup(t,e){const n=t.querySelector(`.${this.sectionButtonClass}`),i=t.querySelector(`.${this.sectionHeadingClass}`),s=t.querySelector(`.${this.sectionSummaryClass}`);if(!i)throw new ElementError({componentName:"Accordion",identifier:`Section heading (\`.${this.sectionHeadingClass}\`)`});if(!n)throw new ElementError({componentName:"Accordion",identifier:`Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`});const o=document.createElement("button");o.setAttribute("type","button"),o.setAttribute("aria-controls",`${this.$module.id}-content-${e+1}`);for(const d of Array.from(n.attributes))"id"!==d.nodeName&&o.setAttribute(d.nodeName,`${d.nodeValue}`);const r=document.createElement("span");r.classList.add(this.sectionHeadingTextClass),r.id=n.id;const a=document.createElement("span");a.classList.add(this.sectionHeadingTextFocusClass),r.appendChild(a),a.innerHTML=n.innerHTML;const l=document.createElement("span");l.classList.add(this.sectionShowHideToggleClass),l.setAttribute("data-nosnippet","");const c=document.createElement("span");c.classList.add(this.sectionShowHideToggleFocusClass),l.appendChild(c);const h=document.createElement("span"),u=document.createElement("span");if(u.classList.add(this.upChevronIconClass),c.appendChild(u),h.classList.add(this.sectionShowHideTextClass),c.appendChild(h),o.appendChild(r),o.appendChild(this.getButtonPunctuationEl()),null!=s&&s.parentNode){const t=document.createElement("span"),e=document.createElement("span");e.classList.add(this.sectionSummaryFocusClass),t.appendChild(e);for(const n of Array.from(s.attributes))t.setAttribute(n.nodeName,`${n.nodeValue}`);e.innerHTML=s.innerHTML,s.parentNode.replaceChild(t,s),o.appendChild(t),o.appendChild(this.getButtonPunctuationEl())}o.appendChild(l),i.removeChild(n),i.appendChild(o)}onBeforeMatch(t){const e=t.target;if(!(e instanceof Element))return;const n=e.closest(`.${this.sectionClass}`);n&&this.setExpanded(!0,n)}onSectionToggle(t){const e=this.isExpanded(t);this.setExpanded(!e,t),this.storeState(t)}onShowOrHideAllToggle(){const t=!this.checkIfAllSectionsOpen();this.$sections.forEach((e=>{this.setExpanded(t,e),this.storeState(e)})),this.updateShowAllButton(t)}setExpanded(t,e){const n=e.querySelector(`.${this.upChevronIconClass}`),i=e.querySelector(`.${this.sectionShowHideTextClass}`),s=e.querySelector(`.${this.sectionButtonClass}`),o=e.querySelector(`.${this.sectionContentClass}`);if(!o)throw new ElementError({componentName:"Accordion",identifier:`Section content (\`<div class="${this.sectionContentClass}">\`)`});if(!n||!i||!s)return;const r=t?this.i18n.t("hideSection"):this.i18n.t("showSection");i.textContent=r,s.setAttribute("aria-expanded",`${t}`);const a=[],l=e.querySelector(`.${this.sectionHeadingTextClass}`);l&&a.push(`${l.textContent}`.trim());const c=e.querySelector(`.${this.sectionSummaryClass}`);c&&a.push(`${c.textContent}`.trim());const h=t?this.i18n.t("hideSectionAriaLabel"):this.i18n.t("showSectionAriaLabel");a.push(h),s.setAttribute("aria-label",a.join(" , ")),t?(o.removeAttribute("hidden"),e.classList.add(this.sectionExpandedClass),n.classList.remove(this.downChevronIconClass)):(o.setAttribute("hidden","until-found"),e.classList.remove(this.sectionExpandedClass),n.classList.add(this.downChevronIconClass));const u=this.checkIfAllSectionsOpen();this.updateShowAllButton(u)}isExpanded(t){return t.classList.contains(this.sectionExpandedClass)}checkIfAllSectionsOpen(){return this.$sections.length===this.$module.querySelectorAll(`.${this.sectionExpandedClass}`).length}updateShowAllButton(t){this.$showAllButton&&this.$showAllText&&this.$showAllIcon&&(this.$showAllButton.setAttribute("aria-expanded",t.toString()),this.$showAllText.textContent=t?this.i18n.t("hideAllSections"):this.i18n.t("showAllSections"),this.$showAllIcon.classList.toggle(this.downChevronIconClass,!t))}storeState(t){if(this.browserSupportsSessionStorage&&this.config.rememberExpanded){const e=t.querySelector(`.${this.sectionButtonClass}`);if(e){const t=e.getAttribute("aria-controls"),n=e.getAttribute("aria-expanded");t&&n&&window.sessionStorage.setItem(t,n)}}}setInitialState(t){if(this.browserSupportsSessionStorage&&this.config.rememberExpanded){const e=t.querySelector(`.${this.sectionButtonClass}`);if(e){const n=e.getAttribute("aria-controls"),i=n?window.sessionStorage.getItem(n):null;null!==i&&this.setExpanded("true"===i,t)}}}getButtonPunctuationEl(){const t=document.createElement("span");return t.classList.add("govuk-visually-hidden",this.sectionHeadingDividerClass),t.innerHTML=", ",t}}Accordion.moduleName="govuk-accordion",Accordion.defaults=Object.freeze({i18n:{hideAllSections:"Hide all sections",hideSection:"Hide",hideSectionAriaLabel:"Hide this section",showAllSections:"Show all sections",showSection:"Show",showSectionAriaLabel:"Show this section"},rememberExpanded:!0});const t={checkForSessionStorage:function(){const t="this is the test string";let e;try{return window.sessionStorage.setItem(t,t),e=window.sessionStorage.getItem(t)===t.toString(),window.sessionStorage.removeItem(t),e}catch(n){return!1}}};class Button extends GOVUKFrontendComponent{constructor(t,e={}){if(super(),this.$module=void 0,this.config=void 0,this.debounceFormSubmitTimer=null,!(t instanceof HTMLElement))throw new ElementError({componentName:"Button",element:t,identifier:"Root element (`$module`)"});this.$module=t,this.config=mergeConfigs(Button.defaults,e,normaliseDataset(t.dataset)),this.$module.addEventListener("keydown",(t=>this.handleKeyDown(t))),this.$module.addEventListener("click",(t=>this.debounce(t)))}handleKeyDown(t){const e=t.target;32===t.keyCode&&e instanceof HTMLElement&&"button"===e.getAttribute("role")&&(t.preventDefault(),e.click())}debounce(t){if(this.config.preventDoubleClick)return this.debounceFormSubmitTimer?(t.preventDefault(),!1):void(this.debounceFormSubmitTimer=window.setTimeout((()=>{this.debounceFormSubmitTimer=null}),1e3))}}function closestAttributeValue(t,e){const n=t.closest(`[${e}]`);return n?n.getAttribute(e):null}Button.moduleName="govuk-button",Button.defaults=Object.freeze({preventDoubleClick:!1});class CharacterCount extends GOVUKFrontendComponent{constructor(t,e={}){var n,i;if(super(),this.$module=void 0,this.$textarea=void 0,this.$visibleCountMessage=void 0,this.$screenReaderCountMessage=void 0,this.lastInputTimestamp=null,this.lastInputValue="",this.valueChecker=null,this.config=void 0,this.i18n=void 0,this.maxLength=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Character count",element:t,identifier:"Root element (`$module`)"});const s=t.querySelector(".govuk-js-character-count");if(!(s instanceof HTMLTextAreaElement||s instanceof HTMLInputElement))throw new ElementError({componentName:"Character count",element:s,expectedType:"HTMLTextareaElement or HTMLInputElement",identifier:"Form field (`.govuk-js-character-count`)"});const o=normaliseDataset(t.dataset);let r={};("maxwords"in o||"maxlength"in o)&&(r={maxlength:void 0,maxwords:void 0}),this.config=mergeConfigs(CharacterCount.defaults,e,r,o);const a=function(t,e){const n=[];for(const[i,s]of Object.entries(t)){const t=[];for(const{required:n,errorMessage:i}of s)n.every((t=>!!e[t]))||t.push(i);"anyOf"!==i||s.length-t.length>=1||n.push(...t)}return n}(CharacterCount.schema,this.config);if(a[0])throw new ConfigError(`Character count: ${a[0]}`);this.i18n=new I18n(extractConfigByNamespace(this.config,"i18n"),{locale:closestAttributeValue(t,"lang")}),this.maxLength=null!=(n=null!=(i=this.config.maxwords)?i:this.config.maxlength)?n:1/0,this.$module=t,this.$textarea=s;const l=`${this.$textarea.id}-info`,c=document.getElementById(l);if(!c)throw new ElementError({componentName:"Character count",element:c,identifier:`Count message (\`id="${l}"\`)`});`${c.textContent}`.match(/^\s*$/)&&(c.textContent=this.i18n.t("textareaDescription",{count:this.maxLength})),this.$textarea.insertAdjacentElement("afterend",c);const h=document.createElement("div");h.className="govuk-character-count__sr-status govuk-visually-hidden",h.setAttribute("aria-live","polite"),this.$screenReaderCountMessage=h,c.insertAdjacentElement("afterend",h);const u=document.createElement("div");u.className=c.className,u.classList.add("govuk-character-count__status"),u.setAttribute("aria-hidden","true"),this.$visibleCountMessage=u,c.insertAdjacentElement("afterend",u),c.classList.add("govuk-visually-hidden"),this.$textarea.removeAttribute("maxlength"),this.bindChangeEvents(),window.addEventListener("pageshow",(()=>this.updateCountMessage())),this.updateCountMessage()}bindChangeEvents(){this.$textarea.addEventListener("keyup",(()=>this.handleKeyUp())),this.$textarea.addEventListener("focus",(()=>this.handleFocus())),this.$textarea.addEventListener("blur",(()=>this.handleBlur()))}handleKeyUp(){this.updateVisibleCountMessage(),this.lastInputTimestamp=Date.now()}handleFocus(){this.valueChecker=window.setInterval((()=>{(!this.lastInputTimestamp||Date.now()-500>=this.lastInputTimestamp)&&this.updateIfValueChanged()}),1e3)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker)}updateIfValueChanged(){this.$textarea.value!==this.lastInputValue&&(this.lastInputValue=this.$textarea.value,this.updateCountMessage())}updateCountMessage(){this.updateVisibleCountMessage(),this.updateScreenReaderCountMessage()}updateVisibleCountMessage(){const t=this.maxLength-this.count(this.$textarea.value)<0;this.$visibleCountMessage.classList.toggle("govuk-character-count__message--disabled",!this.isOverThreshold()),this.$textarea.classList.toggle("govuk-textarea--error",t),this.$visibleCountMessage.classList.toggle("govuk-error-message",t),this.$visibleCountMessage.classList.toggle("govuk-hint",!t),this.$visibleCountMessage.textContent=this.getCountMessage()}updateScreenReaderCountMessage(){this.isOverThreshold()?this.$screenReaderCountMessage.removeAttribute("aria-hidden"):this.$screenReaderCountMessage.setAttribute("aria-hidden","true"),this.$screenReaderCountMessage.textContent=this.getCountMessage()}count(t){if(this.config.maxwords){var e;return(null!=(e=t.match(/\S+/g))?e:[]).length}return t.length}getCountMessage(){const t=this.maxLength-this.count(this.$textarea.value),e=this.config.maxwords?"words":"characters";return this.formatCountMessage(t,e)}formatCountMessage(t,e){if(0===t)return this.i18n.t(`${e}AtLimit`);const n=t<0?"OverLimit":"UnderLimit";return this.i18n.t(`${e}${n}`,{count:Math.abs(t)})}isOverThreshold(){if(!this.config.threshold)return!0;const t=this.count(this.$textarea.value);return this.maxLength*this.config.threshold/100<=t}}CharacterCount.moduleName="govuk-character-count",CharacterCount.defaults=Object.freeze({threshold:0,i18n:{charactersUnderLimit:{one:"You have %{count} character remaining",other:"You have %{count} characters remaining"},charactersAtLimit:"You have 0 characters remaining",charactersOverLimit:{one:"You have %{count} character too many",other:"You have %{count} characters too many"},wordsUnderLimit:{one:"You have %{count} word remaining",other:"You have %{count} words remaining"},wordsAtLimit:"You have 0 words remaining",wordsOverLimit:{one:"You have %{count} word too many",other:"You have %{count} words too many"},textareaDescription:{other:""}}}),CharacterCount.schema=Object.freeze({anyOf:[{required:["maxwords"],errorMessage:'Either "maxlength" or "maxwords" must be provided'},{required:["maxlength"],errorMessage:'Either "maxlength" or "maxwords" must be provided'}]});class Checkboxes extends GOVUKFrontendComponent{constructor(t){if(super(),this.$module=void 0,this.$inputs=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Checkboxes",element:t,identifier:"Root element (`$module`)"});const e=t.querySelectorAll('input[type="checkbox"]');if(!e.length)throw new ElementError({componentName:"Checkboxes",identifier:'Form inputs (`<input type="checkbox">`)'});this.$module=t,this.$inputs=e,this.$inputs.forEach((t=>{const e=t.getAttribute("data-aria-controls");if(e){if(!document.getElementById(e))throw new ElementError({componentName:"Checkboxes",identifier:`Conditional reveal (\`id="${e}"\`)`});t.setAttribute("aria-controls",e),t.removeAttribute("data-aria-controls")}})),window.addEventListener("pageshow",(()=>this.syncAllConditionalReveals())),this.syncAllConditionalReveals(),this.$module.addEventListener("click",(t=>this.handleClick(t)))}syncAllConditionalReveals(){this.$inputs.forEach((t=>this.syncConditionalRevealWithInputState(t)))}syncConditionalRevealWithInputState(t){const e=t.getAttribute("aria-controls");if(!e)return;const n=document.getElementById(e);if(n&&n.classList.contains("govuk-checkboxes__conditional")){const e=t.checked;t.setAttribute("aria-expanded",e.toString()),n.classList.toggle("govuk-checkboxes__conditional--hidden",!e)}}unCheckAllInputsExcept(t){document.querySelectorAll(`input[type="checkbox"][name="${t.name}"]`).forEach((e=>{t.form===e.form&&e!==t&&(e.checked=!1,this.syncConditionalRevealWithInputState(e))}))}unCheckExclusiveInputs(t){document.querySelectorAll(`input[data-behaviour="exclusive"][type="checkbox"][name="${t.name}"]`).forEach((e=>{t.form===e.form&&(e.checked=!1,this.syncConditionalRevealWithInputState(e))}))}handleClick(t){const e=t.target;if(!(e instanceof HTMLInputElement)||"checkbox"!==e.type)return;if(e.getAttribute("aria-controls")&&this.syncConditionalRevealWithInputState(e),!e.checked)return;"exclusive"===e.getAttribute("data-behaviour")?this.unCheckAllInputsExcept(e):this.unCheckExclusiveInputs(e)}}Checkboxes.moduleName="govuk-checkboxes";class ErrorSummary extends GOVUKFrontendComponent{constructor(t,e={}){if(super(),this.$module=void 0,this.config=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Error summary",element:t,identifier:"Root element (`$module`)"});this.$module=t,this.config=mergeConfigs(ErrorSummary.defaults,e,normaliseDataset(t.dataset)),this.config.disableAutoFocus||setFocus(this.$module),this.$module.addEventListener("click",(t=>this.handleClick(t)))}handleClick(t){const e=t.target;e&&this.focusTarget(e)&&t.preventDefault()}focusTarget(t){if(!(t instanceof HTMLAnchorElement))return!1;const e=getFragmentFromUrl(t.href);if(!e)return!1;const n=document.getElementById(e);if(!n)return!1;const i=this.getAssociatedLegendOrLabel(n);return!!i&&(i.scrollIntoView(),n.focus({preventScroll:!0}),!0)}getAssociatedLegendOrLabel(t){var e;const n=t.closest("fieldset");if(n){const e=n.getElementsByTagName("legend");if(e.length){const n=e[0];if(t instanceof HTMLInputElement&&("checkbox"===t.type||"radio"===t.type))return n;const i=n.getBoundingClientRect().top,s=t.getBoundingClientRect();if(s.height&&window.innerHeight){if(s.top+s.height-i<window.innerHeight/2)return n}}}return null!=(e=document.querySelector(`label[for='${t.getAttribute("id")}']`))?e:t.closest("label")}}ErrorSummary.moduleName="govuk-error-summary",ErrorSummary.defaults=Object.freeze({disableAutoFocus:!1});class ExitThisPage extends GOVUKFrontendComponent{constructor(t,e={}){if(super(),this.$module=void 0,this.config=void 0,this.i18n=void 0,this.$button=void 0,this.$skiplinkButton=null,this.$updateSpan=null,this.$indicatorContainer=null,this.$overlay=null,this.keypressCounter=0,this.lastKeyWasModified=!1,this.timeoutTime=5e3,this.keypressTimeoutId=null,this.timeoutMessageId=null,!(t instanceof HTMLElement))throw new ElementError({componentName:"Exit this page",element:t,identifier:"Root element (`$module`)"});const n=t.querySelector(".govuk-exit-this-page__button");if(!(n instanceof HTMLAnchorElement))throw new ElementError({componentName:"Exit this page",element:n,expectedType:"HTMLAnchorElement",identifier:"Button (`.govuk-exit-this-page__button`)"});this.config=mergeConfigs(ExitThisPage.defaults,e,normaliseDataset(t.dataset)),this.i18n=new I18n(extractConfigByNamespace(this.config,"i18n")),this.$module=t,this.$button=n;const i=document.querySelector(".govuk-js-exit-this-page-skiplink");i instanceof HTMLAnchorElement&&(this.$skiplinkButton=i),this.buildIndicator(),this.initUpdateSpan(),this.initButtonClickHandler(),"govukFrontendExitThisPageKeypress"in document.body.dataset||(document.addEventListener("keyup",this.handleKeypress.bind(this),!0),document.body.dataset.govukFrontendExitThisPageKeypress="true"),window.addEventListener("pageshow",this.resetPage.bind(this))}initUpdateSpan(){this.$updateSpan=document.createElement("span"),this.$updateSpan.setAttribute("role","status"),this.$updateSpan.className="govuk-visually-hidden",this.$module.appendChild(this.$updateSpan)}initButtonClickHandler(){this.$button.addEventListener("click",this.handleClick.bind(this)),this.$skiplinkButton&&this.$skiplinkButton.addEventListener("click",this.handleClick.bind(this))}buildIndicator(){this.$indicatorContainer=document.createElement("div"),this.$indicatorContainer.className="govuk-exit-this-page__indicator",this.$indicatorContainer.setAttribute("aria-hidden","true");for(let t=0;t<3;t++){const t=document.createElement("div");t.className="govuk-exit-this-page__indicator-light",this.$indicatorContainer.appendChild(t)}this.$button.appendChild(this.$indicatorContainer)}updateIndicator(){if(!this.$indicatorContainer)return;this.$indicatorContainer.classList.toggle("govuk-exit-this-page__indicator--visible",this.keypressCounter>0);this.$indicatorContainer.querySelectorAll(".govuk-exit-this-page__indicator-light").forEach(((t,e)=>{t.classList.toggle("govuk-exit-this-page__indicator-light--on",e<this.keypressCounter)}))}exitPage(){this.$updateSpan&&(this.$updateSpan.textContent="",document.body.classList.add("govuk-exit-this-page-hide-content"),this.$overlay=document.createElement("div"),this.$overlay.className="govuk-exit-this-page-overlay",this.$overlay.setAttribute("role","alert"),document.body.appendChild(this.$overlay),this.$overlay.textContent=this.i18n.t("activated"),window.location.href=this.$button.href)}handleClick(t){t.preventDefault(),this.exitPage()}handleKeypress(t){this.$updateSpan&&("Shift"!==t.key&&16!==t.keyCode&&16!==t.which||this.lastKeyWasModified?this.keypressTimeoutId&&this.resetKeypressTimer():(this.keypressCounter+=1,this.updateIndicator(),this.timeoutMessageId&&(window.clearTimeout(this.timeoutMessageId),this.timeoutMessageId=null),this.keypressCounter>=3?(this.keypressCounter=0,this.keypressTimeoutId&&(window.clearTimeout(this.keypressTimeoutId),this.keypressTimeoutId=null),this.exitPage()):1===this.keypressCounter?this.$updateSpan.textContent=this.i18n.t("pressTwoMoreTimes"):this.$updateSpan.textContent=this.i18n.t("pressOneMoreTime"),this.setKeypressTimer()),this.lastKeyWasModified=t.shiftKey)}setKeypressTimer(){this.keypressTimeoutId&&window.clearTimeout(this.keypressTimeoutId),this.keypressTimeoutId=window.setTimeout(this.resetKeypressTimer.bind(this),this.timeoutTime)}resetKeypressTimer(){if(!this.$updateSpan)return;this.keypressTimeoutId&&(window.clearTimeout(this.keypressTimeoutId),this.keypressTimeoutId=null);const t=this.$updateSpan;this.keypressCounter=0,t.textContent=this.i18n.t("timedOut"),this.timeoutMessageId=window.setTimeout((()=>{t.textContent=""}),this.timeoutTime),this.updateIndicator()}resetPage(){document.body.classList.remove("govuk-exit-this-page-hide-content"),this.$overlay&&(this.$overlay.remove(),this.$overlay=null),this.$updateSpan&&(this.$updateSpan.setAttribute("role","status"),this.$updateSpan.textContent=""),this.updateIndicator(),this.keypressTimeoutId&&window.clearTimeout(this.keypressTimeoutId),this.timeoutMessageId&&window.clearTimeout(this.timeoutMessageId)}}ExitThisPage.moduleName="govuk-exit-this-page",ExitThisPage.defaults=Object.freeze({i18n:{activated:"Loading.",timedOut:"Exit this page expired.",pressTwoMoreTimes:"Shift, press 2 more times to exit.",pressOneMoreTime:"Shift, press 1 more time to exit."}});class Header extends GOVUKFrontendComponent{constructor(t){if(super(),this.$module=void 0,this.$menuButton=void 0,this.$menu=void 0,this.menuIsOpen=!1,this.mql=null,!t)throw new ElementError({componentName:"Header",element:t,identifier:"Root element (`$module`)"});this.$module=t;const e=t.querySelector(".govuk-js-header-toggle");if(!e)return this;const n=e.getAttribute("aria-controls");if(!n)throw new ElementError({componentName:"Header",identifier:'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'});const i=document.getElementById(n);if(!i)throw new ElementError({componentName:"Header",element:i,identifier:`Navigation (\`<ul id="${n}">\`)`});this.$menu=i,this.$menuButton=e,this.setupResponsiveChecks(),this.$menuButton.addEventListener("click",(()=>this.handleMenuButtonClick()))}setupResponsiveChecks(){const t=getBreakpoint("desktop");if(!t.value)throw new ElementError({componentName:"Header",identifier:`CSS custom property (\`${t.property}\`) on pseudo-class \`:root\``});this.mql=window.matchMedia(`(min-width: ${t.value})`),"addEventListener"in this.mql?this.mql.addEventListener("change",(()=>this.checkMode())):this.mql.addListener((()=>this.checkMode())),this.checkMode()}checkMode(){this.mql&&this.$menu&&this.$menuButton&&(this.mql.matches?(this.$menu.removeAttribute("hidden"),this.$menuButton.setAttribute("hidden","")):(this.$menuButton.removeAttribute("hidden"),this.$menuButton.setAttribute("aria-expanded",this.menuIsOpen.toString()),this.menuIsOpen?this.$menu.removeAttribute("hidden"):this.$menu.setAttribute("hidden","")))}handleMenuButtonClick(){this.menuIsOpen=!this.menuIsOpen,this.checkMode()}}Header.moduleName="govuk-header";class NotificationBanner extends GOVUKFrontendComponent{constructor(t,e={}){if(super(),this.$module=void 0,this.config=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Notification banner",element:t,identifier:"Root element (`$module`)"});this.$module=t,this.config=mergeConfigs(NotificationBanner.defaults,e,normaliseDataset(t.dataset)),"alert"!==this.$module.getAttribute("role")||this.config.disableAutoFocus||setFocus(this.$module)}}NotificationBanner.moduleName="govuk-notification-banner",NotificationBanner.defaults=Object.freeze({disableAutoFocus:!1});class Radios extends GOVUKFrontendComponent{constructor(t){if(super(),this.$module=void 0,this.$inputs=void 0,!(t instanceof HTMLElement))throw new ElementError({componentName:"Radios",element:t,identifier:"Root element (`$module`)"});const e=t.querySelectorAll('input[type="radio"]');if(!e.length)throw new ElementError({componentName:"Radios",identifier:'Form inputs (`<input type="radio">`)'});this.$module=t,this.$inputs=e,this.$inputs.forEach((t=>{const e=t.getAttribute("data-aria-controls");if(e){if(!document.getElementById(e))throw new ElementError({componentName:"Radios",identifier:`Conditional reveal (\`id="${e}"\`)`});t.setAttribute("aria-controls",e),t.removeAttribute("data-aria-controls")}})),window.addEventListener("pageshow",(()=>this.syncAllConditionalReveals())),this.syncAllConditionalReveals(),this.$module.addEventListener("click",(t=>this.handleClick(t)))}syncAllConditionalReveals(){this.$inputs.forEach((t=>this.syncConditionalRevealWithInputState(t)))}syncConditionalRevealWithInputState(t){const e=t.getAttribute("aria-controls");if(!e)return;const n=document.getElementById(e);if(null!=n&&n.classList.contains("govuk-radios__conditional")){const e=t.checked;t.setAttribute("aria-expanded",e.toString()),n.classList.toggle("govuk-radios__conditional--hidden",!e)}}handleClick(t){const e=t.target;if(!(e instanceof HTMLInputElement)||"radio"!==e.type)return;const n=document.querySelectorAll('input[type="radio"][aria-controls]'),i=e.form,s=e.name;n.forEach((t=>{const e=t.form===i;t.name===s&&e&&this.syncConditionalRevealWithInputState(t)}))}}Radios.moduleName="govuk-radios";class SkipLink extends GOVUKFrontendComponent{constructor(t){var e;if(super(),this.$module=void 0,!(t instanceof HTMLAnchorElement))throw new ElementError({componentName:"Skip link",element:t,expectedType:"HTMLAnchorElement",identifier:"Root element (`$module`)"});this.$module=t;const n=this.$module.hash,i=null!=(e=this.$module.getAttribute("href"))?e:"";let s;try{s=new window.URL(this.$module.href)}catch(a){throw new ElementError(`Skip link: Target link (\`href="${i}"\`) is invalid`)}if(s.origin!==window.location.origin||s.pathname!==window.location.pathname)return;const o=getFragmentFromUrl(n);if(!o)throw new ElementError(`Skip link: Target link (\`href="${i}"\`) has no hash fragment`);const r=document.getElementById(o);if(!r)throw new ElementError({componentName:"Skip link",element:r,identifier:`Target content (\`id="${o}"\`)`});this.$module.addEventListener("click",(()=>setFocus(r,{onBeforeFocus(){r.classList.add("govuk-skip-link-focused-element")},onBlur(){r.classList.remove("govuk-skip-link-focused-element")}})))}}SkipLink.moduleName="govuk-skip-link";class Tabs extends GOVUKFrontendComponent{constructor(t){if(super(),this.$module=void 0,this.$tabs=void 0,this.$tabList=void 0,this.$tabListItems=void 0,this.keys={left:37,right:39,up:38,down:40},this.jsHiddenClass="govuk-tabs__panel--hidden",this.changingHash=!1,this.boundTabClick=void 0,this.boundTabKeydown=void 0,this.boundOnHashChange=void 0,this.mql=null,!t)throw new ElementError({componentName:"Tabs",element:t,identifier:"Root element (`$module`)"});const e=t.querySelectorAll("a.govuk-tabs__tab");if(!e.length)throw new ElementError({componentName:"Tabs",identifier:'Links (`<a class="govuk-tabs__tab">`)'});this.$module=t,this.$tabs=e,this.boundTabClick=this.onTabClick.bind(this),this.boundTabKeydown=this.onTabKeydown.bind(this),this.boundOnHashChange=this.onHashChange.bind(this);const n=this.$module.querySelector(".govuk-tabs__list"),i=this.$module.querySelectorAll("li.govuk-tabs__list-item");if(!n)throw new ElementError({componentName:"Tabs",identifier:'List (`<ul class="govuk-tabs__list">`)'});if(!i.length)throw new ElementError({componentName:"Tabs",identifier:'List items (`<li class="govuk-tabs__list-item">`)'});this.$tabList=n,this.$tabListItems=i,this.setupResponsiveChecks()}setupResponsiveChecks(){const t=getBreakpoint("tablet");if(!t.value)throw new ElementError({componentName:"Tabs",identifier:`CSS custom property (\`${t.property}\`) on pseudo-class \`:root\``});this.mql=window.matchMedia(`(min-width: ${t.value})`),"addEventListener"in this.mql?this.mql.addEventListener("change",(()=>this.checkMode())):this.mql.addListener((()=>this.checkMode())),this.checkMode()}checkMode(){var t;null!=(t=this.mql)&&t.matches?this.setup():this.teardown()}setup(){var t;this.$tabList.setAttribute("role","tablist"),this.$tabListItems.forEach((t=>{t.setAttribute("role","presentation")})),this.$tabs.forEach((t=>{this.setAttributes(t),t.addEventListener("click",this.boundTabClick,!0),t.addEventListener("keydown",this.boundTabKeydown,!0),this.hideTab(t)}));const e=null!=(t=this.getTab(window.location.hash))?t:this.$tabs[0];this.showTab(e),window.addEventListener("hashchange",this.boundOnHashChange,!0)}teardown(){this.$tabList.removeAttribute("role"),this.$tabListItems.forEach((t=>{t.removeAttribute("role")})),this.$tabs.forEach((t=>{t.removeEventListener("click",this.boundTabClick,!0),t.removeEventListener("keydown",this.boundTabKeydown,!0),this.unsetAttributes(t)})),window.removeEventListener("hashchange",this.boundOnHashChange,!0)}onHashChange(){const t=window.location.hash,e=this.getTab(t);if(!e)return;if(this.changingHash)return void(this.changingHash=!1);const n=this.getCurrentTab();n&&(this.hideTab(n),this.showTab(e),e.focus())}hideTab(t){this.unhighlightTab(t),this.hidePanel(t)}showTab(t){this.highlightTab(t),this.showPanel(t)}getTab(t){return this.$module.querySelector(`a.govuk-tabs__tab[href="${t}"]`)}setAttributes(t){const e=getFragmentFromUrl(t.href);if(!e)return;t.setAttribute("id",`tab_${e}`),t.setAttribute("role","tab"),t.setAttribute("aria-controls",e),t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1");const n=this.getPanel(t);n&&(n.setAttribute("role","tabpanel"),n.setAttribute("aria-labelledby",t.id),n.classList.add(this.jsHiddenClass))}unsetAttributes(t){t.removeAttribute("id"),t.removeAttribute("role"),t.removeAttribute("aria-controls"),t.removeAttribute("aria-selected"),t.removeAttribute("tabindex");const e=this.getPanel(t);e&&(e.removeAttribute("role"),e.removeAttribute("aria-labelledby"),e.classList.remove(this.jsHiddenClass))}onTabClick(t){const e=this.getCurrentTab(),n=t.currentTarget;e&&n instanceof HTMLAnchorElement&&(t.preventDefault(),this.hideTab(e),this.showTab(n),this.createHistoryEntry(n))}createHistoryEntry(t){const e=this.getPanel(t);if(!e)return;const n=e.id;e.id="",this.changingHash=!0,window.location.hash=n,e.id=n}onTabKeydown(t){switch(t.keyCode){case this.keys.left:case this.keys.up:this.activatePreviousTab(),t.preventDefault();break;case this.keys.right:case this.keys.down:this.activateNextTab(),t.preventDefault()}}activateNextTab(){const t=this.getCurrentTab();if(null==t||!t.parentElement)return;const e=t.parentElement.nextElementSibling;if(!e)return;const n=e.querySelector("a.govuk-tabs__tab");n&&(this.hideTab(t),this.showTab(n),n.focus(),this.createHistoryEntry(n))}activatePreviousTab(){const t=this.getCurrentTab();if(null==t||!t.parentElement)return;const e=t.parentElement.previousElementSibling;if(!e)return;const n=e.querySelector("a.govuk-tabs__tab");n&&(this.hideTab(t),this.showTab(n),n.focus(),this.createHistoryEntry(n))}getPanel(t){const e=getFragmentFromUrl(t.href);return e?this.$module.querySelector(`#${e}`):null}showPanel(t){const e=this.getPanel(t);e&&e.classList.remove(this.jsHiddenClass)}hidePanel(t){const e=this.getPanel(t);e&&e.classList.add(this.jsHiddenClass)}unhighlightTab(t){t.parentElement&&(t.setAttribute("aria-selected","false"),t.parentElement.classList.remove("govuk-tabs__list-item--selected"),t.setAttribute("tabindex","-1"))}highlightTab(t){t.parentElement&&(t.setAttribute("aria-selected","true"),t.parentElement.classList.add("govuk-tabs__list-item--selected"),t.setAttribute("tabindex","0"))}getCurrentTab(){return this.$module.querySelector(".govuk-tabs__list-item--selected a.govuk-tabs__tab")}}function initAll(t){var e;if(t=void 0!==t?t:{},!isSupported())return void console.log(new SupportError);const n=[[Accordion,t.accordion],[Button,t.button],[CharacterCount,t.characterCount],[Checkboxes],[ErrorSummary,t.errorSummary],[ExitThisPage,t.exitThisPage],[Header],[NotificationBanner,t.notificationBanner],[Radios],[SkipLink],[Tabs]],i=null!=(e=t.scope)?e:document;n.forEach((([t,e])=>{i.querySelectorAll(`[data-module="${t.moduleName}"]`).forEach((n=>{try{"defaults"in t?new t(n,e):new t(n)}catch(i){console.log(i)}}))}))}Tabs.moduleName="govuk-tabs";export{Accordion,Button,CharacterCount,Checkboxes,ErrorSummary,ExitThisPage,Header,NotificationBanner,Radios,SkipLink,Tabs,initAll,version};//# sourceMappingURL=govuk-frontend.min.js.map

govuk-prototype-kit.config.json

@@ -6,3 +6,3 @@ {
       "documentation": "https://design-system.service.gov.uk/",
-      "releaseNotes": "https://github.com/alphagov/govuk-frontend/releases/tag/v5.1.0",
+      "releaseNotes": "https://github.com/alphagov/govuk-frontend/releases/tag/v5.2.0",
       "versionHistory": "https://github.com/alphagov/govuk-frontend/releases"
@@ -9,0 +9,0 @@ }

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": "5.1.0",
+  "version": "5.2.0",
   "main": "dist/govuk/all.bundle.js",
@@ -82,6 +82,6 @@ "module": "dist/govuk/all.mjs",
     "outdent": "^0.8.0",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-scss": "^4.0.9",
-    "puppeteer": "^21.10.0",
-    "rollup": "^4.9.6",
+    "puppeteer": "^22.1.0",
+    "rollup": "^4.12.0",
     "sass-color-helpers": "^2.1.1",
@@ -88,0 +88,0 @@ "sass-embedded": "^1.70.0",

No alert changes

Improved metrics

Total package byte prevSize

5109442

increased by0.38%

Number of package files

834

increased by0.24%

Lines of code

33319

increased by1.1%

No dependency changes