@nationalarchives/frontend 0.1.40 → 0.1.42

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

@@ -7,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "custom preferences set key",
@@ -17,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "custom policies",
@@ -27,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "custom policies key",
@@ -37,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "with domain",
@@ -47,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "with path",
@@ -57,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "with preferences set key",
@@ -67,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "insecure",
@@ -77,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "with classes",
@@ -87,8 +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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "with attributes",
@@ -99,8 +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>",
-      "hidden": false
+      "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>"
     }
   ]
 }

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);--form-error: #c00;--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);--form-error: #c00;--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);--form-error: #c00;--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:1px #000 solid;border:1px 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: #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 */

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":"AAwJA,4BA9II,4hDAiJF,+BAHF,4BAlII,+9CAyIF,+DAzIE,89CClBJ,gBACE,aACA,SAGE,4BACE,cCLJ,eDUE,4BACE,WACA,kBAEA,cACA,sBD4DJ,WACA,8BCzDI,kBACA,iBD4DJ,sBAEA,yCAgCI,sBAIA,qCC1FA,gBAEA,mCACE,aAGF,oDDsFA,kBAEA","file":"date-input.css","sourcesContent":["@use \"sass:map\";\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() {\n  @each $name, $value in colour.$colour-palette-default {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-dark() {\n  @each $name, $value in colour.$colour-palette-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast() {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    --#{$name}: #{$value};\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-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%light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark;\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":"AAiKA,4BArJM,ygDAwJJ,+BAHF,4BArIM,48CA4IJ,+DA5II,28CCxBN,gBACE,aACA,SAGE,4BACE,cCLJ,eDUE,4BACE,WACA,kBAEA,cACA,sBDqEJ,WACA,8BClEI,kBACA,iBDqEJ,sBAEA,yCAgCI,sBAIA,qCCnGA,gBAEA,mCACE,aAGF,oDD+FA,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-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%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"]}

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

@@ -10,8 +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=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "date input with a preselected value",
@@ -27,8 +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=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"24\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"09\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__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>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "date input with a hint",
@@ -40,8 +38,7 @@
         "name": "date",
         "hint": "The earliest date of the record."
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"tna-form__date-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"tna-form__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=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "date input with an error",
@@ -55,8 +52,7 @@
           "text": "Date is not valid"
         }
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" tna-form__date-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"tna-form__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=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
-      "hidden": false
+      "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>"
     },
     {
       "name": "inline date input",
@@ -68,8 +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=\"tna-form__date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"tna-form__date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"tna-form__date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"tna-form__date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"tna-form__date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>",
-      "hidden": false
+      "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>"
     }
   ]
 }

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

@@ -3,40 +3,40 @@
   {%- 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 -%}tna-form__{{ params.id }}-hint{%- endif %} {% if params.error -%}tna-form__{{ 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 %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
         {{ params.label }}
       </h{{ params.headingLevel }}>
     </legend>
     {%- if params.hint %}
-    <p id="tna-form__{{ params.id }}-hint" class="tna-form__hint">
+    <p id="{{ params.id }}-hint" class="tna-form__hint">
       {{ params.hint }}
     </p>
     {%- endif %}
     {%- if params.error %}
-    <p id="tna-form__{{ params.id }}-error" class="tna-form__error-message">
+    <p id="{{ params.id }}-error" class="tna-form__error-message">
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
     <div class="tna-date-input{% if params.inline %} tna-date-input--inline{% endif %}">
       <div class="tna-date-input__item">
-        <label for="tna-form__{{ params.id }}-day" class="tna-date-input__item-label">
+        <label for="{{ params.id }}-day" class="tna-date-input__item-label">
           Day
         </label>
-        <input type="text" id="tna-form__{{ params.id }}-day" value="{{ params.value.day if params.value }}" name="{{ params.name }}-day" class="tna-date-input__item-input" inputmode="numeric">
+        <input type="text" id="{{ params.id }}-day" value="{{ params.value.day if params.value }}" name="{{ params.name }}-day" class="tna-date-input__item-input" inputmode="numeric">
       </div>
       <div class="tna-date-input__item">
-        <label for="tna-form__{{ params.id }}-month" class="tna-date-input__item-label">
+        <label for="{{ params.id }}-month" class="tna-date-input__item-label">
           Month
         </label>
-        <input type="text" id="tna-form__{{ params.id }}-month" value="{{ params.value.month if params.value }}" name="{{ params.name }}-month" class="tna-date-input__item-input" inputmode="numeric">
+        <input type="text" id="{{ params.id }}-month" value="{{ params.value.month if params.value }}" name="{{ params.name }}-month" class="tna-date-input__item-input" inputmode="numeric">
       </div>
       <div class="tna-date-input__item">
-        <label for="tna-form__{{ params.id }}-year" class="tna-date-input__item-label">
+        <label for="{{ params.id }}-year" class="tna-date-input__item-label">
           Year
         </label>
-        <input type="text" id="tna-form__{{ params.id }}-year" value="{{ params.value.year if params.value }}" name="{{ params.name }}-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
+        <input type="text" id="{{ params.id }}-year" value="{{ params.value.year if params.value }}" name="{{ params.name }}-year" class="tna-date-input__item-input tna-date-input__item-input--wider" inputmode="numeric">
       </div>
     </div>
   </fieldset>

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);--form-error: #c00;--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);--form-error: #c00;--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);--form-error: #c00;--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:1px #000 solid;border:1px 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: #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 */

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":"AAwJA,iBA9II,4hDAiJF,+BAHF,iBAlII,+9CAyIF,oDAzIE,89CCnBJ,iBACE,eACA,kBAEA,cACA,sBDwEA,WACA,8BCrEA,kBACA,iBDwEA,sBAEA,yCAgCI,sBAIA,qCCzGJ,gBAEA,yCDyGI,kBAEA,+BCvGJ,4BACE","file":"date-search.css","sourcesContent":["@use \"sass:map\";\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() {\n  @each $name, $value in colour.$colour-palette-default {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-dark() {\n  @each $name, $value in colour.$colour-palette-dark {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast() {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    --#{$name}: #{$value};\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    --#{$name}: #{$value};\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-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%light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark;\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":"AAiKA,iBArJM,ygDAwJJ,+BAHF,iBArIM,48CA4IJ,oDA5II,28CCzBN,iBACE,eACA,kBAEA,cACA,sBDiFA,WACA,8BC9EA,kBACA,iBDiFA,sBAEA,yCAgCI,sBAIA,qCClHJ,gBAEA,yCDkHI,kBAEA,+BChHJ,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-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%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"]}

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

@@ -0,0 +1,7 @@
+{% macro tnaDateSearchElement(params, extraAttributes) %}
+  {%- set inputClasses = [params.classes] if params.classes else [] -%}
+  <input type="date" id="{{ params.id }}" class="tna-date-search{% if params.maxWidth %} tna-date-search--max-width{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}"
+  {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+  {%- for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% endmacro %}