@nationalarchives/frontend 0.1.48 → 0.1.50

package/nationalarchives/components/cookie-banner/fixtures.json

@@ -7,7 +7,7 @@
         "serviceName": "My service",
         "cookiesUrl": "/cookies"
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "custom preferences set key",
@@ -16,7 +16,7 @@
         "cookiesUrl": "/cookies",
         "cookiesPreferencesSetKey": "custom"
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "custom policies",
@@ -25,7 +25,7 @@
         "cookiesUrl": "/cookies",
         "policies": "custom"
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"custom\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"custom\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "custom policies key",
@@ -34,7 +34,7 @@
         "cookiesUrl": "/cookies",
         "policiesKey": "custom_key"
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"custom_key\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"custom_key\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "with domain",
@@ -43,7 +43,7 @@
         "cookiesUrl": "/cookies",
         "cookiesDomain": "nationalarchives.gov.uk"
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"nationalarchives.gov.uk\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"nationalarchives.gov.uk\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "with path",
@@ -52,7 +52,7 @@
         "cookiesUrl": "/cookies",
         "cookiesPath": "/my-service"
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"/my-service\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"/my-service\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "with preferences set key",
@@ -61,7 +61,7 @@
         "cookiesUrl": "/cookies",
         "preferencesSetKey": "custom_preferences_set_key"
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"custom_preferences_set_key\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"custom_preferences_set_key\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "insecure",
@@ -70,7 +70,7 @@
         "cookiesUrl": "/cookies",
         "allowInsecure": true
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"true\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"true\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "with classes",
@@ -79,7 +79,7 @@
         "cookiesUrl": "/cookies",
         "classes": "tna-cookie-banner--fixture"
       },
-      "html": "<section class=\"tna-cookie-banner tna-cookie-banner--fixture\" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner tna-cookie-banner--fixture\" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     },
     {
       "name": "with attributes",
@@ -90,7 +90,7 @@
           "data-fixturetest": "pass"
         }
       },
-      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" role=\"region\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" data-fixturetest=\"pass\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
+      "html": "<section class=\"tna-cookie-banner \" data-module=\"tna-cookie-banner\" data-policies=\"\" data-preferenceskey=\"\" data-policieskey=\"\" data-domain=\"\" data-path=\"\" data-insecure=\"false\" aria-label=\"Cookies on My service\" data-fixturetest=\"pass\" hidden><div class=\"tna-container\"><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt\"><h2 class=\"tna-heading-m\">This website uses cookies</h2><p>We use some essential cookies to make this service work.</p><p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"accept\">Accept cookies</button><button class=\"tna-button\" type=\"button\" value=\"reject\">Reject cookies</button><a href=\"/cookies\" class=\"tna-button tna-button--plain\">Set cookie preferences</a></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted\" tabindex=\"0\" hidden><p>You have accepted optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div><div class=\"tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected\" tabindex=\"0\" hidden><p>You have rejected optional cookies. You can change your cookie settings on the <a href=\"/cookies\">Cookies page</a>.</p><div class=\"tna-button-group\"><button class=\"tna-button\" type=\"button\" value=\"close\">Close this message</button></div></div></div></section>"
     }
   ]
 }

package/nationalarchives/components/cookie-banner/template.njk

@@ -8,7 +8,7 @@
 {%- elseif params.style == "tint" -%}
   {%- set containerClasses = containerClasses.concat('tna-cookie-banner--tint') -%}
 {%- endif -%}
-<section class="tna-cookie-banner {{ containerClasses | join(' ') }}" data-module="tna-cookie-banner" role="region" data-policies="{{ params.policies if params.policies }}" data-preferenceskey="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policieskey="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ true if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} hidden>
+<section class="tna-cookie-banner {{ containerClasses | join(' ') }}" data-module="tna-cookie-banner" data-policies="{{ params.policies if params.policies }}" data-preferenceskey="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policieskey="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ true if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} hidden>
   <div class="tna-container">
     <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt">
       <h2 class="tna-heading-m">This website uses cookies</h2>

package/nationalarchives/components/date-input/date-input.css

@@ -1 +1 @@
-.tna-date-input__item-input{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-date-input__item-input{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-date-input__item-input{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-date-input{display:flex;gap:1rem}.tna-date-input__item-label{display:block;font-size:1rem}.tna-date-input__item-input{width:3rem;padding:0 .375rem;display:block;box-sizing:border-box;color:#000;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border:2px #000 solid;border:2px var(--input-border) solid;border-radius:0}.tna-date-input__item-input--wider{width:4.5rem}.tna-form__group--error .tna-date-input__item-input{border-color:#c00;border-color:var(--form-error)}/*# sourceMappingURL=date-input.css.map */
+.tna-date-input__item-input{--page-background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-date-input__item-input{--page-background: rgb(255, 255, 255);--background-tint: rgb(217, 217, 214);--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(1, 1, 1);--contrast-font-dark: rgb(1, 1, 1);--contrast-font-light: rgb(1, 1, 1);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(1, 1, 1);--contrast-keyline-dark: rgb(1, 1, 1);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(1, 1, 1);--contrast-button-hover-text: rgb(1, 1, 1);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-date-input__item-input{--page-background: rgb(255, 255, 255);--background-tint: rgb(217, 217, 214);--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(1, 1, 1);--contrast-font-dark: rgb(1, 1, 1);--contrast-font-light: rgb(1, 1, 1);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(1, 1, 1);--contrast-keyline-dark: rgb(1, 1, 1);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(1, 1, 1);--contrast-button-hover-text: rgb(1, 1, 1);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}.tna-date-input{display:flex;gap:16px}.tna-date-input__item-label{display:block;font-size:1rem}.tna-date-input__item-input{width:3rem;padding:0 6px;display:block;box-sizing:border-box;color:#010101;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border:2px #010101 solid;border:2px var(--input-border) solid;border-radius:0}.tna-date-input__item-input--wider{width:4.5rem}.tna-form__group--error .tna-date-input__item-input{border-color:#c00;border-color:var(--form-error)}/*# sourceMappingURL=date-input.css.map */

package/nationalarchives/components/date-input/date-input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/date-input/date-input.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAyLA,4BA7KM,ygDAgLJ,+BAHF,4BA7JM,48CAoKJ,+DApKI,28CCxBN,gBACE,aACA,SAGE,4BACE,cCLJ,eDUE,4BACE,WACA,kBAEA,cACA,sBDqEJ,WACA,8BClEI,kBACA,iBDqEJ,sBAEA,yCAoCI,sBAIA,qCCvGA,gBAEA,mCACE,aAGF,oDDmGA,kBAEA","file":"date-input.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n\n.tna-date-input {\n  display: flex;\n  gap: 1rem;\n\n  &__item {\n    &-label {\n      display: block;\n\n      @include typography.relative-font-size(16);\n    }\n\n    &-input {\n      width: 3rem;\n      padding: 0 0.375rem;\n\n      display: block;\n      box-sizing: border-box;\n\n      @include colour.light;\n      @include colour.colour-font(\"input-foreground\");\n      font-size: inherit;\n      line-height: 2rem;\n\n      @include colour.colour-background(\"input-background\");\n\n      @include colour.colour-border(\n        \"input-border\",\n        forms.$form-field-border-width\n      );\n      border-radius: 0;\n\n      &--wider {\n        width: 4.5rem;\n      }\n\n      .tna-form__group--error & {\n        @include colour.colour-border(\"form-error\");\n      }\n    }\n  }\n\n  &--inline {\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/date-input/date-input.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AA8IA,4BAlIM,ggDAqIJ,+BAHF,4BAlHM,m8CAyHJ,+DAzHI,k8CCvBN,gBACE,aACA,SAGE,4BACE,cCLJ,eDUE,4BACE,WACA,cAEA,cACA,sBDyBJ,cACA,8BCtBI,kBACA,iBDyBJ,sBAEA,yCAoCI,yBAIA,qCC3DA,gBAEA,mCACE,aAGF,oDDuDA,kBAEA","file":"date-input.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-date-input {\n  display: flex;\n  gap: spacing.space(1);\n\n  &__item {\n    &-label {\n      display: block;\n\n      @include typography.relative-font-size(16);\n    }\n\n    &-input {\n      width: 3rem;\n      padding: 0 spacing.space(0.375);\n\n      display: block;\n      box-sizing: border-box;\n\n      @include colour.light;\n      @include colour.colour-font(\"input-foreground\");\n      font-size: inherit;\n      line-height: 2rem;\n\n      @include colour.colour-background(\"input-background\");\n\n      @include colour.colour-border(\n        \"input-border\",\n        forms.$form-field-border-width\n      );\n      border-radius: 0;\n\n      &--wider {\n        width: 4.5rem;\n      }\n\n      .tna-form__group--error & {\n        @include colour.colour-border(\"form-error\");\n      }\n    }\n  }\n\n  &--inline {\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: 1.1;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  @include relative-font-size($font-size-default);\n  line-height: $line-height;\n\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include relative-font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include relative-font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include relative-font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include relative-font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include relative-font-size($font-size-medium);\n      }\n    }\n  }\n}\n"]}

package/nationalarchives/components/date-input/date-input.scss

@@ -1,10 +1,11 @@
 @use "../../variables/forms";
 @use "../../tools/colour";
+@use "../../tools/spacing";
 @use "../../tools/typography";
 
 .tna-date-input {
   display: flex;
-  gap: 1rem;
+  gap: spacing.space(1);
 
   &__item {
     &-label {
@@ -15,7 +16,7 @@
 
     &-input {
       width: 3rem;
-      padding: 0 0.375rem;
+      padding: 0 spacing.space(0.375);
 
       display: block;
       box-sizing: border-box;

package/nationalarchives/components/date-input/fixtures.json

@@ -10,7 +10,7 @@
         "id": "date",
         "name": "date"
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "date input with a preselected value",
@@ -26,7 +26,7 @@
           "year": "1986"
         }
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"24\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"09\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"1986\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"24\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"09\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"1986\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "date input with a hint",
@@ -38,7 +38,7 @@
         "name": "date",
         "hint": "The earliest date of the record."
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"date-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"date-hint \" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "date input with an error",
@@ -52,7 +52,7 @@
           "text": "Date is not valid"
         }
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" date-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" date-error\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "inline date input",
@@ -64,7 +64,7 @@
         "name": "date",
         "inline": true
       },
-      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Enter a start date</h4></legend><div class=\"tna-date-input tna-date-input--inline\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Enter a start date</h4></legend><div class=\"tna-date-input tna-date-input--inline\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     }
   ]
 }

package/nationalarchives/components/date-input/template.njk

@@ -3,7 +3,7 @@
   {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%}
 {%- endif -%}
 <div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
+  <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %} role="group">
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}

package/nationalarchives/components/date-search/date-search.css

@@ -1 +1 @@
-.tna-date-search{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-date-search{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-date-search{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-date-search{max-width:100%;padding:0 .375rem;display:block;box-sizing:border-box;color:#000;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border:2px #000 solid;border:2px var(--input-border) solid;border-radius:0}.tna-form__group--error .tna-date-search{border-color:#c00;border-color:var(--form-error)}.tna-date-search--max-width{width:100%}/*# sourceMappingURL=date-search.css.map */
+.tna-date-search{--page-background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-date-search{--page-background: rgb(255, 255, 255);--background-tint: rgb(217, 217, 214);--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(1, 1, 1);--contrast-font-dark: rgb(1, 1, 1);--contrast-font-light: rgb(1, 1, 1);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(1, 1, 1);--contrast-keyline-dark: rgb(1, 1, 1);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(1, 1, 1);--contrast-button-hover-text: rgb(1, 1, 1);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-date-search{--page-background: rgb(255, 255, 255);--background-tint: rgb(217, 217, 214);--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(1, 1, 1);--contrast-font-dark: rgb(1, 1, 1);--contrast-font-light: rgb(1, 1, 1);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(1, 1, 1);--contrast-keyline-dark: rgb(1, 1, 1);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(1, 1, 1);--contrast-button-hover-text: rgb(1, 1, 1);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}.tna-date-search{max-width:100%;padding:0 6px;display:block;box-sizing:border-box;color:#010101;color:var(--input-foreground);font-size:inherit;line-height:2rem;background-color:#fff;background-color:var(--input-background);border:2px #010101 solid;border:2px var(--input-border) solid;border-radius:0}.tna-form__group--error .tna-date-search{border-color:#c00;border-color:var(--form-error)}.tna-date-search--max-width{width:100%}/*# sourceMappingURL=date-search.css.map */

package/nationalarchives/components/date-search/date-search.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/date-search/date-search.scss"],"names":[],"mappings":"AAyLA,iBA7KM,ygDAgLJ,+BAHF,iBA7JM,48CAoKJ,oDApKI,28CCzBN,iBACE,eACA,kBAEA,cACA,sBDiFA,WACA,8BC9EA,kBACA,iBDiFA,sBAEA,yCAoCI,sBAIA,qCCtHJ,gBAEA,yCDsHI,kBAEA,+BCpHJ,4BACE","file":"date-search.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n\n.tna-date-search {\n  max-width: 100%;\n  padding: 0 0.375rem;\n\n  display: block;\n  box-sizing: border-box;\n\n  @include colour.light;\n  @include colour.colour-font(\"input-foreground\");\n  font-size: inherit;\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0;\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error\");\n  }\n\n  &--max-width {\n    width: 100%;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/date-search/date-search.scss"],"names":[],"mappings":"AA8IA,iBAlIM,ggDAqIJ,+BAHF,iBAlHM,m8CAyHJ,oDAzHI,k8CCxBN,iBACE,eACA,cAEA,cACA,sBDqCA,cACA,8BClCA,kBACA,iBDqCA,sBAEA,yCAoCI,yBAIA,qCC1EJ,gBAEA,yCD0EI,kBAEA,+BCxEJ,4BACE","file":"date-search.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n.tna-date-search {\n  max-width: 100%;\n  padding: 0 spacing.space(0.375);\n\n  display: block;\n  box-sizing: border-box;\n\n  @include colour.light;\n  @include colour.colour-font(\"input-foreground\");\n  font-size: inherit;\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0;\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error\");\n  }\n\n  &--max-width {\n    width: 100%;\n  }\n}\n"]}

package/nationalarchives/components/date-search/date-search.scss

@@ -1,9 +1,10 @@
 @use "../../variables/forms";
 @use "../../tools/colour";
+@use "../../tools/spacing";
 
 .tna-date-search {
   max-width: 100%;
-  padding: 0 0.375rem;
+  padding: 0 spacing.space(0.375);
 
   display: block;
   box-sizing: border-box;