@nationalarchives/frontend 1.3.1 → 1.4.1

package/nationalarchives/components/tabs/fixtures.json

@@ -24,6 +24,155 @@
         ]
       },
       "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></div><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
+    },
+    {
+      "name": "with item aria labels",
+      "options": {
+        "itemHeadingLevel": 3,
+        "items": [
+          {
+            "id": "unique-id-a",
+            "title": "Alpha section",
+            "ariaLabel": "Alpha section tab",
+            "body": "<p>Lorem ipsum</p>"
+          },
+          {
+            "id": "unique-id-b",
+            "title": "Beta section",
+            "ariaLabel": "Beta section tab",
+            "body": "<p>Lorem ipsum</p>"
+          },
+          {
+            "id": "unique-id-c",
+            "title": "Gamma section",
+            "ariaLabel": "Gamma section tab",
+            "body": "<p>Lorem ipsum</p>"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\" aria-label=\"Alpha section tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\" aria-label=\"Beta section tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\" aria-label=\"Gamma section tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></div><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
+    },
+    {
+      "name": "with item classes",
+      "options": {
+        "itemHeadingLevel": 3,
+        "items": [
+          {
+            "id": "unique-id-a",
+            "title": "Alpha section",
+            "body": "<p>Lorem ipsum</p>",
+            "classes": "tna-tabs__item--test-1"
+          },
+          {
+            "id": "unique-id-b",
+            "title": "Beta section",
+            "body": "<p>Lorem ipsum</p>",
+            "classes": "tna-tabs__item--test-2"
+          },
+          {
+            "id": "unique-id-c",
+            "title": "Gamma section",
+            "body": "<p>Lorem ipsum</p>",
+            "classes": "tna-tabs__item--test-3"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button tna-tabs__item--test-1\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button><button type=\"button\" class=\"tna-tabs__button tna-tabs__item--test-2\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button><button type=\"button\" class=\"tna-tabs__button tna-tabs__item--test-3\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></div><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
+    },
+    {
+      "name": "with item attributes",
+      "options": {
+        "itemHeadingLevel": 3,
+        "items": [
+          {
+            "id": "unique-id-a",
+            "title": "Alpha section",
+            "body": "<p>Lorem ipsum</p>",
+            "attributes": {
+              "data-fixturetest-a": "pass",
+              "data-fixturetest1": ""
+            }
+          },
+          {
+            "id": "unique-id-b",
+            "title": "Beta section",
+            "body": "<p>Lorem ipsum</p>",
+            "attributes": {
+              "data-fixturetest-b": "pass",
+              "data-fixturetest2": ""
+            }
+          },
+          {
+            "id": "unique-id-c",
+            "title": "Gamma section",
+            "body": "<p>Lorem ipsum</p>",
+            "attributes": {
+              "data-fixturetest-c": "pass",
+              "data-fixturetest3": ""
+            }
+          }
+        ]
+      },
+      "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\" data-fixturetest-a=\"pass\" data-fixturetest1><span class=\"tna-tabs__button-inner\">Alpha section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\" data-fixturetest-b=\"pass\" data-fixturetest2><span class=\"tna-tabs__button-inner\">Beta section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\" data-fixturetest-c=\"pass\" data-fixturetest3><span class=\"tna-tabs__button-inner\">Gamma section</span></button></div><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "itemHeadingLevel": 3,
+        "items": [
+          {
+            "id": "unique-id-a",
+            "title": "Alpha section",
+            "ariaLabel": "Alpha section tab",
+            "body": "<p>Lorem ipsum</p>"
+          },
+          {
+            "id": "unique-id-b",
+            "title": "Beta section",
+            "ariaLabel": "Beta section tab",
+            "body": "<p>Lorem ipsum</p>"
+          },
+          {
+            "id": "unique-id-c",
+            "title": "Gamma section",
+            "ariaLabel": "Gamma section tab",
+            "body": "<p>Lorem ipsum</p>"
+          }
+        ],
+        "classes": "tna-tabs--test"
+      },
+      "html": "<div class=\"tna-tabs tna-tabs--test\" data-module=\"tna-tabs\"><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\" aria-label=\"Alpha section tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\" aria-label=\"Beta section tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\" aria-label=\"Gamma section tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></div><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "itemHeadingLevel": 3,
+        "items": [
+          {
+            "id": "unique-id-a",
+            "title": "Alpha section",
+            "ariaLabel": "Alpha section tab",
+            "body": "<p>Lorem ipsum</p>"
+          },
+          {
+            "id": "unique-id-b",
+            "title": "Beta section",
+            "ariaLabel": "Beta section tab",
+            "body": "<p>Lorem ipsum</p>"
+          },
+          {
+            "id": "unique-id-c",
+            "title": "Gamma section",
+            "ariaLabel": "Gamma section tab",
+            "body": "<p>Lorem ipsum</p>"
+          }
+        ],
+        "attributes": {
+          "data-fixturetest": "pass",
+          "data-fixturetest2": ""
+        }
+      },
+      "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\" data-fixturetest=\"pass\" data-fixturetest2><div class=\"tna-tabs__list\" role=\"tablist\" hidden><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\" aria-label=\"Alpha section tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\" aria-label=\"Beta section tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\" aria-label=\"Gamma section tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></div><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
     }
   ]
 }

package/nationalarchives/components/tabs/macro-options.json

@@ -23,11 +23,29 @@
         "required": true,
         "description": "The title of the tab item."
       },
+      {
+        "name": "ariaLabel",
+        "type": "string",
+        "required": false,
+        "description": "An optional aria-label for the button of the tab item."
+      },
       {
         "name": "body",
         "type": "string",
         "required": true,
         "description": "The body content of the tab item."
+      },
+      {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the tab item button."
+      },
+      {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the tab item button."
       }
     ]
   },

package/nationalarchives/components/tabs/tabs.css

@@ -1 +1 @@
-.tna-tabs__button:active{outline:3px #010101 solid !important;outline-offset:3px !important;box-shadow:0 0 0 3px #fc0 !important;transition:outline-offset .1s,box-shadow .1s}.tna-template--dark-theme .tna-tabs__button:active{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-tabs__button:active{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}}.tna-tabs__item:focus:not(:focus-visible){outline:none !important;box-shadow:none !important}.tna-tabs{margin-top:2rem}.tna-tabs:first-child{margin-top:0}.tna-tabs__list{margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;position:relative;z-index:2;list-style:none}.tna-tabs__button{position:relative;text-align:center;background:rgba(0,0,0,0);border:none;border:1px rgba(0,0,0,0) solid;border-bottom:none;border-radius:2px;cursor:pointer}.tna-tabs__button[aria-selected=true]{padding-top:0;border-color:var(--keyline, rgba(38, 38, 42, 0.25));border-radius:2px 2px 0 0;background-color:var(--background, #f4f4f4)}.tna-tabs__button[aria-selected=true]:focus{border-radius:2px}.tna-tabs__button-inner{margin:0.25rem 0.25rem calc(0.25rem + 1px);padding:0.375rem 0.75rem;display:block;text-decoration:underline;color:var(--font-base, #343338);background-color:var(--background-tint, rgb(217, 217, 214));border-radius:2px}.tna-tabs--small .tna-tabs__button-inner{margin:0.125rem 0.125rem calc(0.125rem + 1px);padding:0.25rem 0.5rem;font-size:1rem}.tna-tabs__button:hover .tna-tabs__button-inner,.tna-tabs__button:focus-visible .tna-tabs__button-inner{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-tabs__button[aria-selected=true] .tna-tabs__button-inner{text-decoration:none;background:rgba(0,0,0,0);border-radius:1px 1px 0 0}.tna-tabs__items{display:flex;flex-direction:column;gap:2rem;position:relative;z-index:1}.tna-tabs__items:has(:focus-visible){z-index:3}.tna-tabs__item{margin-top:-1px;border-radius:.1px .1px 2px 2px}.tna-tabs--interactive .tna-tabs__item{padding:1rem;border:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}/*# sourceMappingURL=tabs.css.map */
+.tna-tabs__button:active{outline:3px #010101 solid !important;outline-offset:3px !important;box-shadow:0 0 0 3px #fc0 !important;transition:outline-offset .1s,box-shadow .1s}.tna-template--dark-theme .tna-tabs__button:active{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-tabs__button:active{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}}.tna-tabs__item:focus:not(:focus-visible){outline:none !important;box-shadow:none !important}.tna-tabs{margin-top:2rem}.tna-tabs:first-child{margin-top:0}.tna-tabs__list{margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;position:relative;z-index:2;list-style:none}.tna-tabs__button{position:relative;font-weight:inherit;text-align:center;background:rgba(0,0,0,0);border:none;border:1px rgba(0,0,0,0) solid;border-bottom:none;cursor:pointer;border-radius:2px}.tna-tabs__button[aria-selected=true]{padding-top:0;border-color:var(--keyline, rgba(38, 38, 42, 0.25));border-radius:2px 2px 0 0;background-color:var(--background, #f4f4f4)}.tna-tabs__button[aria-selected=true]:focus{border-radius:2px}.tna-tabs__button-inner{margin:0.25rem 0.25rem calc(0.25rem + 1px);padding:0.375rem 0.75rem;display:block;text-decoration:underline;color:var(--font-base, #343338);background-color:var(--background-tint, rgb(217, 217, 214));border-radius:2px}.tna-tabs--small .tna-tabs__button-inner{margin:0.125rem 0.125rem calc(0.125rem + 1px);padding:0.25rem 0.5rem;font-size:1rem}.tna-tabs__button:hover .tna-tabs__button-inner,.tna-tabs__button:focus-visible .tna-tabs__button-inner{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-tabs__button[aria-selected=true] .tna-tabs__button-inner{text-decoration:none;background:rgba(0,0,0,0);border-radius:1px 1px 0 0}.tna-tabs__items{display:flex;flex-direction:column;gap:2rem;position:relative;z-index:1}.tna-tabs__items:has(:focus-visible){z-index:3}.tna-tabs__item{margin-top:-1px;border-radius:.1px .1px 2px 2px}.tna-tabs--interactive .tna-tabs__item{padding:1rem;border:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}/*# sourceMappingURL=tabs.css.map */

package/nationalarchives/components/tabs/tabs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAyBA,yBACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,mDACE,8BAEA,wCAKA,mCADF,qDAEI,8BAEA,yCAyFJ,0CA9EA,wBAEA,2BClCF,UACE,gBAUA,sBACE,aC3BF,gBACE,SACA,UAEA,aACA,iBACA,oBAEA,kBACA,UAEA,gBAGF,kBACE,kBAEA,kBAEA,yBAEA,YAEA,+BACA,mBChCF,cCDsB,IFoCpB,eAMA,sCACE,cGsEA,oDHnEA,0BGkCJ,4CH7BI,4CClDJ,cCDsB,IFyDtB,wBACE,2CAEA,yBAEA,cAEA,0BGYF,gCAIA,4DF/EA,cCDsB,IF2EtB,yCACE,8CAEA,uBI1EF,eJ+EA,wGIlBA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OL4DpC,8DACE,qBAEA,yBAEA,0BAIF,iBACE,aACA,sBACA,SAEA,kBACA,UAEA,qCACE,UAIJ,gBACE,gBAEA,gCAMF,uCACE,aGZE","file":"tabs.css","sourcesContent":["@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n  width: 1px !important;\n  height: 1px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  overflow: hidden !important;\n\n  position: absolute !important;\n  top: -9999px !important;\n  left: -9999px !important;\n  z-index: -1 !important;\n\n  background-color: transparent !important;\n\n  border: 0 !important;\n\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n  outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n  outline-offset: a11y.$focus-outline-inner-width !important;\n\n  box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n    colour.brand-colour(\"yellow\") !important;\n\n  transition:\n    outline-offset 0.1s,\n    box-shadow 0.1s;\n\n  .tna-template--dark-theme & {\n    outline-color: colour.brand-colour(\"yellow\") !important;\n\n    box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n      colour.brand-colour(\"black\") !important;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      outline-color: colour.brand-colour(\"yellow\") !important;\n\n      box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n        colour.brand-colour(\"black\") !important;\n    }\n  }\n}\n\n@mixin focus-outline {\n  @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n  outline: none !important;\n\n  box-shadow: none !important;\n}\n\n%active-outline {\n  outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n    solid !important;\n  outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n  box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n    colour.brand-colour(\"yellow\") !important;\n\n  transition: none;\n\n  .tna-template--dark-theme & {\n    outline-color: colour.brand-colour(\"yellow\") !important;\n\n    box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n      colour.brand-colour(\"black\") !important;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      outline-color: colour.brand-colour(\"yellow\") !important;\n\n      box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n        colour.brand-colour(\"black\") !important;\n    }\n  }\n}\n\n@mixin active-outline {\n  @extend %active-outline;\n}\n\n%faux-full-outline {\n  position: relative;\n}\n\n%faux-full-outline-anchor {\n  &::before {\n    content: \"\";\n\n    position: absolute;\n    inset: 0;\n    z-index: 9;\n\n    @include borders.rounded-border;\n  }\n\n  &:focus,\n  &:active {\n    @include no-focus-outline;\n  }\n\n  &:focus {\n    &::before {\n      @include focus-outline;\n    }\n  }\n\n  &:active {\n    &::before {\n      @include active-outline;\n    }\n  }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n  @extend %faux-full-outline;\n\n  #{$anchor_selector} {\n    @extend %faux-full-outline-anchor;\n  }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n  &:focus:not(:focus-visible) {\n    @include no-focus-outline;\n  }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n  @extend %focus-indicator-only-on-keyboard-focus;\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/*\n * ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n */\n@function space($size) {\n  // @return #{$size * spacing.$spacing-unit-px}px;\n  @return #{$size}rem;\n}\n\n%space-above {\n  margin-top: space(2);\n  @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n  margin: #{space(2)} 0 0;\n  @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{space($amount)} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{space($amount)} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n  @include spacing.space-above;\n\n  &__list {\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: stretch;\n\n    position: relative;\n    z-index: 2;\n\n    list-style: none;\n  }\n\n  &__button {\n    position: relative;\n\n    text-align: center;\n\n    background: transparent;\n\n    border: none;\n\n    border: 1px transparent solid;\n    border-bottom: none;\n    @include borders.rounded-border;\n\n    cursor: pointer;\n\n    &:active {\n      @include a11y.focus-outline;\n    }\n\n    &[aria-selected=\"true\"] {\n      padding-top: 0;\n\n      @include colour.colour-border(\"keyline\");\n      border-radius: bordersVars.$rounded-border-radius\n        bordersVars.$rounded-border-radius 0 0;\n\n      @include colour.colour-background(\"background\");\n\n      &:focus {\n        @include borders.rounded-border;\n      }\n    }\n  }\n\n  &__button-inner {\n    margin: spacing.space(0.25) spacing.space(0.25)\n      calc(spacing.space(0.25) + 1px);\n    padding: spacing.space(0.375) spacing.space(0.75);\n\n    display: block;\n\n    text-decoration: underline;\n\n    @include colour.colour-font(\"font-base\");\n\n    // @include colour.base;\n    // @include colour.tint;\n    @include colour.colour-background(\"background-tint\");\n\n    @include borders.rounded-border;\n  }\n\n  &--small &__button-inner {\n    margin: spacing.space(0.125) spacing.space(0.125)\n      calc(spacing.space(0.125) + 1px);\n    padding: spacing.space(0.25) spacing.space(0.5);\n\n    @include typography.font-size(16);\n  }\n\n  &__button:hover &__button-inner,\n  &__button:focus-visible &__button-inner {\n    @include typography.interacted-text-decoration;\n  }\n\n  &__button[aria-selected=\"true\"] &__button-inner {\n    text-decoration: none;\n\n    background: transparent;\n\n    border-radius: #{bordersVars.$rounded-border-radius - 1px}\n      #{bordersVars.$rounded-border-radius - 1px} 0 0;\n  }\n\n  &__items {\n    display: flex;\n    flex-direction: column;\n    gap: spacing.space(2);\n\n    position: relative;\n    z-index: 1;\n\n    &:has(:focus-visible) {\n      z-index: 3;\n    }\n  }\n\n  &__item {\n    margin-top: -1px;\n\n    border-radius: 0.1px 0.1px #{bordersVars.$rounded-border-radius}\n      #{bordersVars.$rounded-border-radius};\n\n    @include a11y.focus-indicator-only-on-keyboard-focus;\n  }\n\n  &--interactive &__item {\n    padding: spacing.space(1);\n    @include colour.colour-border(\"keyline\", 1px, solid);\n  }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n  border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n  \"background\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  \"keyline\",\n  \"keyline-dark\"\n);\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n        --base-#{$name}: #{$value};\n      }\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour)\n    if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if(sass($important): !important; else: 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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if(sass($important): !important; else: null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if(sass($important): !important; else: null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      colour-var($colour)\n      $style\n      if(sass($important): !important; else: null);\n  } @else {\n    outline-color: colour-var($colour)\n      if(sass($important): !important; else: null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n  @include colour-font(\"input-foreground\");\n  @include colour-background(\"input-background\");\n  @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n  &:hover {\n    outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n  }\n}\n\n@mixin colour-input() {\n  @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline-dark\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"accent-border\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"accent-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      $border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"form-error-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n  } @else {\n    border: $border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width transparent solid;\n  } @else {\n    border: $border-width transparent solid;\n  }\n}\n\n%always-light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-border: var(--accent-border-bright);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-border: var(--accent-border-bright);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%base {\n  @each $name, $value in $base-colours {\n    --#{$name}: var(--base-#{$value});\n  }\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin base {\n  @extend %base;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--accent-background);\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      --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      --accent-border: var(--accent-font-dark);\n      --button-text: var(--accent-button-text);\n      --button-background: var(--accent-button-background);\n      --button-hover-text: var(--accent-button-hover-text);\n      --button-hover-background: var(--accent-button-hover-background);\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    --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    --accent-border: var(--accent-font-dark);\n    --button-text: var(--accent-button-text);\n    --button-background: var(--accent-button-background);\n    --button-hover-text: var(--accent-button-hover-text);\n    --button-hover-background: var(--accent-button-hover-background);\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"forest\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"navy\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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\n%image-loader-background {\n  background: linear-gradient(\n    -45deg,\n    rgb(0 0 0 / 25%),\n    rgb(255 255 255 / 25%),\n    rgb(0 0 0 / 25%)\n  );\n  background-size: 500% 500%;\n  background-position: 0 50%;\n\n  animation: image-loader-background ease-in-out 1.2s infinite;\n\n  @media (prefers-reduced-motion) {\n    animation: none !important;\n  }\n}\n\n@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    @extend %image-loader-background;\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-variation-settings: \"wdth\" 100;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\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  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n  text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAyBA,yBACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,mDACE,8BAEA,wCAKA,mCADF,qDAEI,8BAEA,yCA2FJ,0CAhFA,wBAEA,2BClCF,UACE,gBAUA,sBACE,aC3BF,gBACE,SACA,UAEA,aACA,iBACA,oBAEA,kBACA,UAEA,gBAGF,kBACE,kBAEA,oBAEA,kBAEA,yBAEA,YAEA,+BACA,mBAEA,eCpCF,cCDsB,IF4CpB,sCACE,cGoEA,oDHjEA,0BGgCJ,4CH3BI,4CCpDJ,cCDsB,IF2DtB,wBACE,2CAEA,yBAEA,cAEA,0BGUF,gCAIA,4DF/EA,cCDsB,IF6EtB,yCACE,8CAEA,uBI5EF,eJiFA,wGIpBA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OL8DpC,8DACE,qBAEA,yBAEA,0BAIF,iBACE,aACA,sBACA,SAEA,kBACA,UAEA,qCACE,UAIJ,gBACE,gBAEA,gCAMF,uCACE,aGdE","file":"tabs.css","sourcesContent":["@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n  width: 1px !important;\n  height: 1px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n\n  overflow: hidden !important;\n\n  position: absolute !important;\n  top: -9999px !important;\n  left: -9999px !important;\n  z-index: -1 !important;\n\n  background-color: transparent !important;\n\n  border: 0 !important;\n\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n  outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n  outline-offset: a11y.$focus-outline-inner-width !important;\n\n  box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n    colour.brand-colour(\"yellow\") !important;\n\n  transition:\n    outline-offset 0.1s,\n    box-shadow 0.1s;\n\n  .tna-template--dark-theme & {\n    outline-color: colour.brand-colour(\"yellow\") !important;\n\n    box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n      colour.brand-colour(\"black\") !important;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      outline-color: colour.brand-colour(\"yellow\") !important;\n\n      box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n        colour.brand-colour(\"black\") !important;\n    }\n  }\n}\n\n@mixin focus-outline {\n  @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n  outline: none !important;\n\n  box-shadow: none !important;\n}\n\n%active-outline {\n  outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n    solid !important;\n  outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n  box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n    colour.brand-colour(\"yellow\") !important;\n\n  transition: none;\n\n  .tna-template--dark-theme & {\n    outline-color: colour.brand-colour(\"yellow\") !important;\n\n    box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n      colour.brand-colour(\"black\") !important;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      outline-color: colour.brand-colour(\"yellow\") !important;\n\n      box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n        colour.brand-colour(\"black\") !important;\n    }\n  }\n}\n\n@mixin active-outline {\n  @extend %active-outline;\n}\n\n%faux-full-outline {\n  position: relative;\n}\n\n%faux-full-outline-anchor {\n  &::before {\n    content: \"\";\n\n    position: absolute;\n    inset: 0;\n    z-index: 9;\n\n    cursor: pointer;\n\n    @include borders.rounded-border;\n  }\n\n  &:focus,\n  &:active {\n    @include no-focus-outline;\n  }\n\n  &:focus {\n    &::before {\n      @include focus-outline;\n    }\n  }\n\n  &:active {\n    &::before {\n      @include active-outline;\n    }\n  }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n  @extend %faux-full-outline;\n\n  #{$anchor_selector} {\n    @extend %faux-full-outline-anchor;\n  }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n  &:focus:not(:focus-visible) {\n    @include no-focus-outline;\n  }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n  @extend %focus-indicator-only-on-keyboard-focus;\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/*\n * ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n */\n@function space($size) {\n  // @return #{$size * spacing.$spacing-unit-px}px;\n  @return #{$size}rem;\n}\n\n%space-above {\n  margin-top: space(2);\n  @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n  margin: #{space(2)} 0 0;\n  @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{space($amount)} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{space($amount)} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n  @include spacing.space-above;\n\n  &__list {\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: stretch;\n\n    position: relative;\n    z-index: 2;\n\n    list-style: none;\n  }\n\n  &__button {\n    position: relative;\n\n    font-weight: inherit;\n\n    text-align: center;\n\n    background: transparent;\n\n    border: none;\n\n    border: 1px transparent solid;\n    border-bottom: none;\n\n    cursor: pointer;\n    @include borders.rounded-border;\n\n    &:active {\n      @include a11y.focus-outline;\n    }\n\n    &[aria-selected=\"true\"] {\n      padding-top: 0;\n\n      @include colour.colour-border(\"keyline\");\n      border-radius: bordersVars.$rounded-border-radius\n        bordersVars.$rounded-border-radius 0 0;\n\n      @include colour.colour-background(\"background\");\n\n      &:focus {\n        @include borders.rounded-border;\n      }\n    }\n  }\n\n  &__button-inner {\n    margin: spacing.space(0.25) spacing.space(0.25)\n      calc(spacing.space(0.25) + 1px);\n    padding: spacing.space(0.375) spacing.space(0.75);\n\n    display: block;\n\n    text-decoration: underline;\n\n    @include colour.colour-font(\"font-base\");\n\n    // @include colour.base;\n    // @include colour.tint;\n    @include colour.colour-background(\"background-tint\");\n\n    @include borders.rounded-border;\n  }\n\n  &--small &__button-inner {\n    margin: spacing.space(0.125) spacing.space(0.125)\n      calc(spacing.space(0.125) + 1px);\n    padding: spacing.space(0.25) spacing.space(0.5);\n\n    @include typography.font-size(16);\n  }\n\n  &__button:hover &__button-inner,\n  &__button:focus-visible &__button-inner {\n    @include typography.interacted-text-decoration;\n  }\n\n  &__button[aria-selected=\"true\"] &__button-inner {\n    text-decoration: none;\n\n    background: transparent;\n\n    border-radius: #{bordersVars.$rounded-border-radius - 1px}\n      #{bordersVars.$rounded-border-radius - 1px} 0 0;\n  }\n\n  &__items {\n    display: flex;\n    flex-direction: column;\n    gap: spacing.space(2);\n\n    position: relative;\n    z-index: 1;\n\n    &:has(:focus-visible) {\n      z-index: 3;\n    }\n  }\n\n  &__item {\n    margin-top: -1px;\n\n    border-radius: 0.1px 0.1px #{bordersVars.$rounded-border-radius}\n      #{bordersVars.$rounded-border-radius};\n\n    @include a11y.focus-indicator-only-on-keyboard-focus;\n  }\n\n  &--interactive &__item {\n    padding: spacing.space(1);\n    @include colour.colour-border(\"keyline\", 1px, solid);\n  }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n  border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n  \"background\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  \"keyline\",\n  \"keyline-dark\"\n);\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n        --base-#{$name}: #{$value};\n      }\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour)\n    if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if(sass($important): !important; else: 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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if(sass($important): !important; else: null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if(sass($important): !important; else: null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      colour-var($colour)\n      $style\n      if(sass($important): !important; else: null);\n  } @else {\n    outline-color: colour-var($colour)\n      if(sass($important): !important; else: null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n  @include colour-font(\"input-foreground\");\n  @include colour-background(\"input-background\");\n  @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n  &:hover {\n    outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n  }\n}\n\n@mixin colour-input() {\n  @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline-dark\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"accent-border\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"accent-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      $border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"form-error-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n  } @else {\n    border: $border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width transparent solid;\n  } @else {\n    border: $border-width transparent solid;\n  }\n}\n\n%always-light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-border: var(--accent-border-bright);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-border: var(--accent-border-bright);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%base {\n  @each $name, $value in $base-colours {\n    --#{$name}: var(--base-#{$value});\n  }\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin base {\n  @extend %base;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--accent-background);\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      --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      --accent-border: var(--accent-font-dark);\n      --button-text: var(--accent-button-text);\n      --button-background: var(--accent-button-background);\n      --button-hover-text: var(--accent-button-hover-text);\n      --button-hover-background: var(--accent-button-hover-background);\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    --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    --accent-border: var(--accent-font-dark);\n    --button-text: var(--accent-button-text);\n    --button-background: var(--accent-button-background);\n    --button-hover-text: var(--accent-button-hover-text);\n    --button-hover-background: var(--accent-button-hover-background);\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"forest\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"navy\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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\n%image-loader-background {\n  background: linear-gradient(\n    -45deg,\n    rgb(0 0 0 / 25%),\n    rgb(255 255 255 / 25%),\n    rgb(0 0 0 / 25%)\n  );\n  background-size: 500% 500%;\n  background-position: 0 50%;\n\n  animation: image-loader-background ease-in-out 1.2s infinite;\n\n  @media (prefers-reduced-motion) {\n    animation: none !important;\n  }\n}\n\n@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    @extend %image-loader-background;\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-variation-settings: \"wdth\" 100;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\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  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n  text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}

package/nationalarchives/components/tabs/tabs.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";const t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{Tabs:()=>i});class i{constructor(t){this.$module=t,this.$tabList=t&&t.querySelector(".tna-tabs__list"),this.$tabListItemLinks=t&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=t&&t.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=this.$module.dataset.activeTabOnLoad?parseInt(this.$module.dataset.activeTabOnLoad,10):0,this.allowClose="true"===this.$module.dataset.allowClose,this.init())}init(){this.$module.classList.add("tna-tabs--interactive"),this.$tabList.removeAttribute("hidden"),this.$tabListItemLinks.forEach(t=>{const e=t.getAttribute("aria-controls");t.setAttribute("aria-selected",!1);const i=document.getElementById(e);i.setAttribute("aria-labelledby",t.id),i.setAttribute("role","tabpanel"),t.addEventListener("click",t=>this.handleItemLinkClick(t),!0)}),this.switchTabByIndex(this.currentTabIndex),this.$module.addEventListener("keydown",t=>this.handleItemLinkKeyDown(t))}handleItemLinkClick(t){t.preventDefault();const e=t.currentTarget.getAttribute("aria-controls");this.switchTabByID(e)}handleItemLinkKeyDown(t){let e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.previousTab(),e=!0;break;case"ArrowRight":case"ArrowDown":this.nextTab(),e=!0;break;case"Home":this.switchTabByIndex(0,!0,!0),e=!0;break;case"End":this.switchTabByIndex(this.$tabListItemLinks.length-1,!0,!0),e=!0}e&&(t.stopPropagation(),t.preventDefault())}nextTab(){this.currentTabIndex<this.$tabListItemLinks.length-1?this.switchTabByIndex(this.currentTabIndex+1,!0):this.switchTabByIndex(0,!0)}previousTab(){this.currentTabIndex>=1?this.switchTabByIndex(this.currentTabIndex-1,!0):this.switchTabByIndex(this.$tabListItemLinks.length-1,!0)}switchTabByIndex(t,e=!1,i=!1){this.currentTabIndex=t,"true"===this.$tabListItemLinks[this.currentTabIndex]?.getAttribute("aria-selected").toString()&&this.allowClose&&!i&&(this.currentTabIndex=-1),this.$tabListItemLinks.forEach((t,i)=>{i===this.currentTabIndex?(t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0"),e&&t.focus()):(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex",-1===this.currentTabIndex?"0":"-1"))}),this.$tabItems.forEach((t,e)=>{e===this.currentTabIndex?(t.removeAttribute("hidden"),t.setAttribute("tabindex","0")):(t.setAttribute("hidden",""),t.setAttribute("tabindex",-1===this.currentTabIndex?"0":"-1"))})}switchTabByID(t){const e=Array.from(this.$tabItems).findIndex(e=>e.getAttribute("id")===t);this.switchTabByIndex(e)}}return e})());
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";const t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{Tabs:()=>i});class i{constructor(t){this.$module=t,this.$tabList=t&&t.querySelector(".tna-tabs__list"),this.$tabListItemLinks=t&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=t&&t.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=this.$module.dataset.activeTabOnLoad?parseInt(this.$module.dataset.activeTabOnLoad,10):0,this.previousTabIndex=this.currentTabIndex,this.allowClose="true"===this.$module.dataset.allowClose,this.init())}init(){this.$module.classList.add("tna-tabs--interactive"),this.$tabList.removeAttribute("hidden"),this.$tabListItemLinks.forEach(t=>{const e=t.getAttribute("aria-controls");t.setAttribute("aria-selected",!1);const i=document.getElementById(e);i.setAttribute("aria-labelledby",t.id),i.setAttribute("role","tabpanel"),t.addEventListener("click",t=>this.handleItemLinkClick(t),!0)}),this.switchTabByIndex(this.currentTabIndex),this.$module.addEventListener("keydown",t=>this.handleItemLinkKeyDown(t))}handleItemLinkClick(t){t.preventDefault();const e=t.currentTarget.getAttribute("aria-controls");this.switchTabByID(e)}handleItemLinkKeyDown(t){let e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.previousTab(),e=!0;break;case"ArrowRight":case"ArrowDown":this.nextTab(),e=!0;break;case"Home":this.switchTabByIndex(0,!0,!0),e=!0;break;case"End":this.switchTabByIndex(this.$tabListItemLinks.length-1,!0,!0),e=!0}e&&(t.stopPropagation(),t.preventDefault())}nextTab(){this.previousTabIndex<this.$tabListItemLinks.length-1?this.switchTabByIndex(this.previousTabIndex+1,!0):this.switchTabByIndex(0,!0)}previousTab(){this.previousTabIndex>=1?this.switchTabByIndex(this.previousTabIndex-1,!0):this.switchTabByIndex(this.$tabListItemLinks.length-1,!0)}switchTabByIndex(t,e=!1,i=!1){this.currentTabIndex=t,this.previousTabIndex=this.currentTabIndex,"true"===this.$tabListItemLinks[this.currentTabIndex]?.getAttribute("aria-selected").toString()&&this.allowClose&&!i&&(this.currentTabIndex=-1),this.$tabListItemLinks.forEach((t,i)=>{i===this.currentTabIndex?(t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0"),e&&t.focus()):(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex",-1===this.currentTabIndex?"0":"-1"))}),this.$tabItems.forEach((t,e)=>{e===this.currentTabIndex?(t.removeAttribute("hidden"),t.setAttribute("tabindex","0")):(t.setAttribute("hidden",""),t.setAttribute("tabindex",-1===this.currentTabIndex?"0":"-1"))})}switchTabByID(t){const e=Array.from(this.$tabItems).findIndex(e=>e.getAttribute("id")===t);this.switchTabByIndex(e)}}return e})());
 //# sourceMappingURL=tabs.js.map

package/nationalarchives/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/tabs/tabs.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,0CCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,SAAWF,GAAWA,EAAQG,cAAc,mBACjDF,KAAKG,kBACHJ,GACAC,KAAKC,UACLD,KAAKC,SAASG,iBAAiB,qBACjCJ,KAAKK,UAAYN,GAAWA,EAAQK,iBAAiB,mBAGlDJ,KAAKD,SACLC,KAAKC,UACLD,KAAKG,mBACLH,KAAKK,WACNL,KAAKG,kBAAkBG,SAAWN,KAAKK,UAAUC,SAKnDN,KAAKO,gBAAkBP,KAAKD,QAAQS,QAAQC,gBACxCC,SAASV,KAAKD,QAAQS,QAAQC,gBAAiB,IAC/C,EACJT,KAAKW,WAAiD,SAApCX,KAAKD,QAAQS,QAAQG,WACvCX,KAAKY,OACP,CAEA,IAAAA,GACEZ,KAAKD,QAAQc,UAAUC,IAAI,yBAC3Bd,KAAKC,SAASc,gBAAgB,UAC9Bf,KAAKG,kBAAkBa,QAASC,IAC9B,MAAMC,EAAaD,EAAiBE,aAAa,iBACjDF,EAAiBG,aAAa,iBAAiB,GAC/C,MAAMC,EAAYC,SAASC,eAAeL,GAC1CG,EAAUD,aAAa,kBAAmBH,EAAiBO,IAC3DH,EAAUD,aAAa,OAAQ,YAC/BH,EAAiBQ,iBACf,QACCC,GAAU1B,KAAK2B,oBAAoBD,IACpC,KAGJ1B,KAAK4B,iBAAiB5B,KAAKO,iBAC3BP,KAAKD,QAAQ0B,iBAAiB,UAAYC,GACxC1B,KAAK6B,sBAAsBH,GAE/B,CAEA,mBAAAC,CAAoBG,GAClBA,EAAmBC,iBACnB,MAAMC,EACJF,EAAmBG,cAAcd,aAAa,iBAChDnB,KAAKkC,cAAcF,EACrB,CAEA,qBAAAH,CAAsBM,GACpB,IAAIC,GAA0B,EAC9B,OAAQD,EAAqBpD,KAC3B,IAAK,YACL,IAAK,UACHiB,KAAKqC,cACLD,GAA0B,EAC1B,MACF,IAAK,aACL,IAAK,YACHpC,KAAKsC,UACLF,GAA0B,EAC1B,MACF,IAAK,OAEHpC,KAAK4B,iBAAiB,GAAG,GAAM,GAC/BQ,GAA0B,EAC1B,MACF,IAAK,MAEHpC,KAAK4B,iBAAiB5B,KAAKG,kBAAkBG,OAAS,GAAG,GAAM,GAC/D8B,GAA0B,EAK1BA,IACFD,EAAqBI,kBACrBJ,EAAqBJ,iBAEzB,CAEA,OAAAO,GAEMtC,KAAKO,gBAAkBP,KAAKG,kBAAkBG,OAAS,EAEzDN,KAAK4B,iBAAiB5B,KAAKO,gBAAkB,GAAG,GAGhDP,KAAK4B,iBAAiB,GAAG,EAE7B,CAEA,WAAAS,GAEMrC,KAAKO,iBAAmB,EAE1BP,KAAK4B,iBAAiB5B,KAAKO,gBAAkB,GAAG,GAGhDP,KAAK4B,iBAAiB5B,KAAKG,kBAAkBG,OAAS,GAAG,EAE7D,CAEA,gBAAAsB,CAAiBY,EAAUC,GAAc,EAAOC,GAAgB,GAC9D1C,KAAKO,gBAAkBiC,EAIH,SAFlBxC,KAAKG,kBAAkBH,KAAKO,kBACxBY,aAAa,iBACdwB,YACuB3C,KAAKW,aAAe+B,IAC9C1C,KAAKO,iBAAmB,GAE1BP,KAAKG,kBAAkBa,QAAQ,CAACC,EAAkB2B,KAC5CA,IAAU5C,KAAKO,iBACjBU,EAAiBG,aAAa,iBAAiB,GAC/CH,EAAiBG,aAAa,WAAY,KACtCqB,GACFxB,EAAiB4B,UAGnB5B,EAAiBG,aAAa,iBAAiB,GAC/CH,EAAiBG,aACf,YAC0B,IAA1BpB,KAAKO,gBAAyB,IAAM,SAI1CP,KAAKK,UAAUW,QAAQ,CAAC8B,EAAUF,KAC5BA,IAAU5C,KAAKO,iBACjBuC,EAAS/B,gBAAgB,UACzB+B,EAAS1B,aAAa,WAAY,OAElC0B,EAAS1B,aAAa,SAAU,IAChC0B,EAAS1B,aACP,YAC0B,IAA1BpB,KAAKO,gBAAyB,IAAM,QAI5C,CAEA,aAAA2B,CAAca,GACZ,MAAMH,EAAQI,MAAMC,KAAKjD,KAAKK,WAAW6C,UACtCJ,GAAaA,EAAS3B,aAAa,QAAU4B,GAEhD/C,KAAK4B,iBAAiBgB,EACxB","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n  constructor($module) {\n    this.$module = $module;\n    this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n    this.$tabListItemLinks =\n      $module &&\n      this.$tabList &&\n      this.$tabList.querySelectorAll(\".tna-tabs__button\");\n    this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n    if (\n      !this.$module ||\n      !this.$tabList ||\n      !this.$tabListItemLinks ||\n      !this.$tabItems ||\n      this.$tabListItemLinks.length !== this.$tabItems.length\n    ) {\n      return;\n    }\n\n    this.currentTabIndex = this.$module.dataset.activeTabOnLoad\n      ? parseInt(this.$module.dataset.activeTabOnLoad, 10)\n      : 0;\n    this.allowClose = this.$module.dataset.allowClose === \"true\";\n    this.init();\n  }\n\n  init() {\n    this.$module.classList.add(\"tna-tabs--interactive\");\n    this.$tabList.removeAttribute(\"hidden\");\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      const tabPanelID = $tabListItemLink.getAttribute(\"aria-controls\");\n      $tabListItemLink.setAttribute(\"aria-selected\", false);\n      const $tabPanel = document.getElementById(tabPanelID);\n      $tabPanel.setAttribute(\"aria-labelledby\", $tabListItemLink.id);\n      $tabPanel.setAttribute(\"role\", \"tabpanel\");\n      $tabListItemLink.addEventListener(\n        \"click\",\n        (event) => this.handleItemLinkClick(event),\n        true,\n      );\n    });\n    this.switchTabByIndex(this.currentTabIndex);\n    this.$module.addEventListener(\"keydown\", (event) =>\n      this.handleItemLinkKeyDown(event),\n    );\n  }\n\n  handleItemLinkClick(itemLinkClickEvent) {\n    itemLinkClickEvent.preventDefault();\n    const targetItem =\n      itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n    this.switchTabByID(targetItem);\n  }\n\n  handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n    let preventDefaultKeyAction = false;\n    switch (itemLinkKeyDownEvent.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        this.previousTab();\n        preventDefaultKeyAction = true;\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        this.nextTab();\n        preventDefaultKeyAction = true;\n        break;\n      case \"Home\":\n        /* eslint-disable-next-line no-magic-numbers */\n        this.switchTabByIndex(0, true, true);\n        preventDefaultKeyAction = true;\n        break;\n      case \"End\":\n        /* eslint-disable-next-line no-magic-numbers */\n        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true, true);\n        preventDefaultKeyAction = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefaultKeyAction) {\n      itemLinkKeyDownEvent.stopPropagation();\n      itemLinkKeyDownEvent.preventDefault();\n    }\n  }\n\n  nextTab() {\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.currentTabIndex + 1, true);\n    } else {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(0, true);\n    }\n  }\n\n  previousTab() {\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.currentTabIndex >= 1) {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.currentTabIndex - 1, true);\n    } else {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n    }\n  }\n\n  switchTabByIndex(newIndex, switchFocus = false, disallowClose = false) {\n    this.currentTabIndex = newIndex;\n    const isTabAlreadySelected =\n      this.$tabListItemLinks[this.currentTabIndex]\n        ?.getAttribute(\"aria-selected\")\n        .toString() === \"true\";\n    if (isTabAlreadySelected && this.allowClose && !disallowClose) {\n      this.currentTabIndex = -1;\n    }\n    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n      if (index === this.currentTabIndex) {\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n        if (switchFocus) {\n          $tabListItemLink.focus();\n        }\n      } else {\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n        $tabListItemLink.setAttribute(\n          \"tabindex\",\n          this.currentTabIndex === -1 ? \"0\" : \"-1\",\n        );\n      }\n    });\n    this.$tabItems.forEach(($tabItem, index) => {\n      if (index === this.currentTabIndex) {\n        $tabItem.removeAttribute(\"hidden\");\n        $tabItem.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabItem.setAttribute(\"hidden\", \"\");\n        $tabItem.setAttribute(\n          \"tabindex\",\n          this.currentTabIndex === -1 ? \"0\" : \"-1\",\n        );\n      }\n    });\n  }\n\n  switchTabByID(targetId) {\n    const index = Array.from(this.$tabItems).findIndex(\n      ($tabItem) => $tabItem.getAttribute(\"id\") === targetId,\n    );\n    this.switchTabByIndex(index);\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","constructor","$module","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","dataset","activeTabOnLoad","parseInt","allowClose","init","classList","add","removeAttribute","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","event","handleItemLinkClick","switchTabByIndex","handleItemLinkKeyDown","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","switchFocus","disallowClose","toString","index","focus","$tabItem","targetId","Array","from","findIndex"],"sourceRoot":""}
+{"version":3,"file":"components/tabs/tabs.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,I,mBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,M,oCCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,SAAWF,GAAWA,EAAQG,cAAc,mBACjDF,KAAKG,kBACHJ,GACAC,KAAKC,UACLD,KAAKC,SAASG,iBAAiB,qBACjCJ,KAAKK,UAAYN,GAAWA,EAAQK,iBAAiB,mBAGlDJ,KAAKD,SACLC,KAAKC,UACLD,KAAKG,mBACLH,KAAKK,WACNL,KAAKG,kBAAkBG,SAAWN,KAAKK,UAAUC,SAKnDN,KAAKO,gBAAkBP,KAAKD,QAAQS,QAAQC,gBACxCC,SAASV,KAAKD,QAAQS,QAAQC,gBAAiB,IAC/C,EACJT,KAAKW,iBAAmBX,KAAKO,gBAC7BP,KAAKY,WAAiD,SAApCZ,KAAKD,QAAQS,QAAQI,WACvCZ,KAAKa,OACP,CAEA,IAAAA,GACEb,KAAKD,QAAQe,UAAUC,IAAI,yBAC3Bf,KAAKC,SAASe,gBAAgB,UAC9BhB,KAAKG,kBAAkBc,QAASC,IAC9B,MAAMC,EAAaD,EAAiBE,aAAa,iBACjDF,EAAiBG,aAAa,iBAAiB,GAC/C,MAAMC,EAAYC,SAASC,eAAeL,GAC1CG,EAAUD,aAAa,kBAAmBH,EAAiBO,IAC3DH,EAAUD,aAAa,OAAQ,YAC/BH,EAAiBQ,iBACf,QACCC,GAAU3B,KAAK4B,oBAAoBD,IACpC,KAGJ3B,KAAK6B,iBAAiB7B,KAAKO,iBAC3BP,KAAKD,QAAQ2B,iBAAiB,UAAYC,GACxC3B,KAAK8B,sBAAsBH,GAE/B,CAEA,mBAAAC,CAAoBG,GAClBA,EAAmBC,iBACnB,MAAMC,EACJF,EAAmBG,cAAcd,aAAa,iBAChDpB,KAAKmC,cAAcF,EACrB,CAEA,qBAAAH,CAAsBM,GACpB,IAAIC,GAA0B,EAC9B,OAAQD,EAAqBrD,KAC3B,IAAK,YACL,IAAK,UACHiB,KAAKsC,cACLD,GAA0B,EAC1B,MACF,IAAK,aACL,IAAK,YACHrC,KAAKuC,UACLF,GAA0B,EAC1B,MACF,IAAK,OAEHrC,KAAK6B,iBAAiB,GAAG,GAAM,GAC/BQ,GAA0B,EAC1B,MACF,IAAK,MAEHrC,KAAK6B,iBAAiB7B,KAAKG,kBAAkBG,OAAS,GAAG,GAAM,GAC/D+B,GAA0B,EAK1BA,IACFD,EAAqBI,kBACrBJ,EAAqBJ,iBAEzB,CAEA,OAAAO,GAEMvC,KAAKW,iBAAmBX,KAAKG,kBAAkBG,OAAS,EAE1DN,KAAK6B,iBAAiB7B,KAAKW,iBAAmB,GAAG,GAGjDX,KAAK6B,iBAAiB,GAAG,EAE7B,CAEA,WAAAS,GAEMtC,KAAKW,kBAAoB,EAE3BX,KAAK6B,iBAAiB7B,KAAKW,iBAAmB,GAAG,GAGjDX,KAAK6B,iBAAiB7B,KAAKG,kBAAkBG,OAAS,GAAG,EAE7D,CAEA,gBAAAuB,CAAiBY,EAAUC,GAAc,EAAOC,GAAgB,GAC9D3C,KAAKO,gBAAkBkC,EACvBzC,KAAKW,iBAAmBX,KAAKO,gBAIT,SAFlBP,KAAKG,kBAAkBH,KAAKO,kBACxBa,aAAa,iBACdwB,YACuB5C,KAAKY,aAAe+B,IAC9C3C,KAAKO,iBAAmB,GAE1BP,KAAKG,kBAAkBc,QAAQ,CAACC,EAAkB2B,KAC5CA,IAAU7C,KAAKO,iBACjBW,EAAiBG,aAAa,iBAAiB,GAC/CH,EAAiBG,aAAa,WAAY,KACtCqB,GACFxB,EAAiB4B,UAGnB5B,EAAiBG,aAAa,iBAAiB,GAC/CH,EAAiBG,aACf,YAC0B,IAA1BrB,KAAKO,gBAAyB,IAAM,SAI1CP,KAAKK,UAAUY,QAAQ,CAAC8B,EAAUF,KAC5BA,IAAU7C,KAAKO,iBACjBwC,EAAS/B,gBAAgB,UACzB+B,EAAS1B,aAAa,WAAY,OAElC0B,EAAS1B,aAAa,SAAU,IAChC0B,EAAS1B,aACP,YAC0B,IAA1BrB,KAAKO,gBAAyB,IAAM,QAI5C,CAEA,aAAA4B,CAAca,GACZ,MAAMH,EAAQI,MAAMC,KAAKlD,KAAKK,WAAW8C,UACtCJ,GAAaA,EAAS3B,aAAa,QAAU4B,GAEhDhD,KAAK6B,iBAAiBgB,EACxB,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n  constructor($module) {\n    this.$module = $module;\n    this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n    this.$tabListItemLinks =\n      $module &&\n      this.$tabList &&\n      this.$tabList.querySelectorAll(\".tna-tabs__button\");\n    this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n    if (\n      !this.$module ||\n      !this.$tabList ||\n      !this.$tabListItemLinks ||\n      !this.$tabItems ||\n      this.$tabListItemLinks.length !== this.$tabItems.length\n    ) {\n      return;\n    }\n\n    this.currentTabIndex = this.$module.dataset.activeTabOnLoad\n      ? parseInt(this.$module.dataset.activeTabOnLoad, 10)\n      : 0;\n    this.previousTabIndex = this.currentTabIndex;\n    this.allowClose = this.$module.dataset.allowClose === \"true\";\n    this.init();\n  }\n\n  init() {\n    this.$module.classList.add(\"tna-tabs--interactive\");\n    this.$tabList.removeAttribute(\"hidden\");\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      const tabPanelID = $tabListItemLink.getAttribute(\"aria-controls\");\n      $tabListItemLink.setAttribute(\"aria-selected\", false);\n      const $tabPanel = document.getElementById(tabPanelID);\n      $tabPanel.setAttribute(\"aria-labelledby\", $tabListItemLink.id);\n      $tabPanel.setAttribute(\"role\", \"tabpanel\");\n      $tabListItemLink.addEventListener(\n        \"click\",\n        (event) => this.handleItemLinkClick(event),\n        true,\n      );\n    });\n    this.switchTabByIndex(this.currentTabIndex);\n    this.$module.addEventListener(\"keydown\", (event) =>\n      this.handleItemLinkKeyDown(event),\n    );\n  }\n\n  handleItemLinkClick(itemLinkClickEvent) {\n    itemLinkClickEvent.preventDefault();\n    const targetItem =\n      itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n    this.switchTabByID(targetItem);\n  }\n\n  handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n    let preventDefaultKeyAction = false;\n    switch (itemLinkKeyDownEvent.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        this.previousTab();\n        preventDefaultKeyAction = true;\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        this.nextTab();\n        preventDefaultKeyAction = true;\n        break;\n      case \"Home\":\n        /* eslint-disable-next-line no-magic-numbers */\n        this.switchTabByIndex(0, true, true);\n        preventDefaultKeyAction = true;\n        break;\n      case \"End\":\n        /* eslint-disable-next-line no-magic-numbers */\n        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true, true);\n        preventDefaultKeyAction = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefaultKeyAction) {\n      itemLinkKeyDownEvent.stopPropagation();\n      itemLinkKeyDownEvent.preventDefault();\n    }\n  }\n\n  nextTab() {\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.previousTabIndex < this.$tabListItemLinks.length - 1) {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.previousTabIndex + 1, true);\n    } else {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(0, true);\n    }\n  }\n\n  previousTab() {\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.previousTabIndex >= 1) {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.previousTabIndex - 1, true);\n    } else {\n      /* eslint-disable-next-line no-magic-numbers */\n      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n    }\n  }\n\n  switchTabByIndex(newIndex, switchFocus = false, disallowClose = false) {\n    this.currentTabIndex = newIndex;\n    this.previousTabIndex = this.currentTabIndex;\n    const isTabAlreadySelected =\n      this.$tabListItemLinks[this.currentTabIndex]\n        ?.getAttribute(\"aria-selected\")\n        .toString() === \"true\";\n    if (isTabAlreadySelected && this.allowClose && !disallowClose) {\n      this.currentTabIndex = -1;\n    }\n    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n      if (index === this.currentTabIndex) {\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n        if (switchFocus) {\n          $tabListItemLink.focus();\n        }\n      } else {\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n        $tabListItemLink.setAttribute(\n          \"tabindex\",\n          this.currentTabIndex === -1 ? \"0\" : \"-1\",\n        );\n      }\n    });\n    this.$tabItems.forEach(($tabItem, index) => {\n      if (index === this.currentTabIndex) {\n        $tabItem.removeAttribute(\"hidden\");\n        $tabItem.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabItem.setAttribute(\"hidden\", \"\");\n        $tabItem.setAttribute(\n          \"tabindex\",\n          this.currentTabIndex === -1 ? \"0\" : \"-1\",\n        );\n      }\n    });\n  }\n\n  switchTabByID(targetId) {\n    const index = Array.from(this.$tabItems).findIndex(\n      ($tabItem) => $tabItem.getAttribute(\"id\") === targetId,\n    );\n    this.switchTabByIndex(index);\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","constructor","$module","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","dataset","activeTabOnLoad","parseInt","previousTabIndex","allowClose","init","classList","add","removeAttribute","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","event","handleItemLinkClick","switchTabByIndex","handleItemLinkKeyDown","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","switchFocus","disallowClose","toString","index","focus","$tabItem","targetId","Array","from","findIndex"],"sourceRoot":""}

package/nationalarchives/components/tabs/tabs.mjs

@@ -21,6 +21,7 @@ export class Tabs {
     this.currentTabIndex = this.$module.dataset.activeTabOnLoad
       ? parseInt(this.$module.dataset.activeTabOnLoad, 10)
       : 0;
+    this.previousTabIndex = this.currentTabIndex;
     this.allowClose = this.$module.dataset.allowClose === "true";
     this.init();
   }
@@ -87,9 +88,9 @@ export class Tabs {
 
   nextTab() {
     /* eslint-disable-next-line no-magic-numbers */
-    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {
+    if (this.previousTabIndex < this.$tabListItemLinks.length - 1) {
       /* eslint-disable-next-line no-magic-numbers */
-      this.switchTabByIndex(this.currentTabIndex + 1, true);
+      this.switchTabByIndex(this.previousTabIndex + 1, true);
     } else {
       /* eslint-disable-next-line no-magic-numbers */
       this.switchTabByIndex(0, true);
@@ -98,9 +99,9 @@ export class Tabs {
 
   previousTab() {
     /* eslint-disable-next-line no-magic-numbers */
-    if (this.currentTabIndex >= 1) {
+    if (this.previousTabIndex >= 1) {
       /* eslint-disable-next-line no-magic-numbers */
-      this.switchTabByIndex(this.currentTabIndex - 1, true);
+      this.switchTabByIndex(this.previousTabIndex - 1, true);
     } else {
       /* eslint-disable-next-line no-magic-numbers */
       this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);
@@ -109,6 +110,7 @@ export class Tabs {
 
   switchTabByIndex(newIndex, switchFocus = false, disallowClose = false) {
     this.currentTabIndex = newIndex;
+    this.previousTabIndex = this.currentTabIndex;
     const isTabAlreadySelected =
       this.$tabListItemLinks[this.currentTabIndex]
         ?.getAttribute("aria-selected")

package/nationalarchives/components/tabs/tabs.scss

@@ -26,6 +26,8 @@
   &__button {
     position: relative;
 
+    font-weight: inherit;
+
     text-align: center;
 
     background: transparent;
@@ -34,9 +36,9 @@
 
     border: 1px transparent solid;
     border-bottom: none;
-    @include borders.rounded-border;
 
     cursor: pointer;
+    @include borders.rounded-border;
 
     &:active {
       @include a11y.focus-outline;

package/nationalarchives/components/tabs/template.njk

@@ -6,7 +6,7 @@
 <div class="tna-tabs{% if classes %} {{ classes }}{% endif %}" data-module="tna-tabs"{% if params.activeTabOnLoad %} data-active-tab-on-load="{{ params.activeTabOnLoad }}"{% endif %}{% if params.allowClose %} data-allow-close="true"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
   <div class="tna-tabs__list" role="tablist" hidden>
   {%- for item in params.items %}
-      <button type="button" class="tna-tabs__button" id="{{ item.id }}-tab" aria-controls="{{ item.id }}" role="tab">
+      <button type="button" class="tna-tabs__button{% if item.classes %} {{ item.classes }}{% endif %}" id="{{ item.id }}-tab" aria-controls="{{ item.id }}" role="tab"{% if item.ariaLabel %} aria-label="{{ item.ariaLabel }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
         <span class="tna-tabs__button-inner">
           {{ item.title }}
         </span>

package/nationalarchives/components/text-input/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/text-input/text-input.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,uDCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,OAASF,GAAWA,EAAQG,cAAc,mBAG5CF,KAAKD,SACLC,KAAKC,QAC+B,aAArCD,KAAKC,OAAOE,aAAa,UAK3BH,KAAKI,kBAAoBC,SAASC,cAAc,OAChDN,KAAKI,kBAAkBG,UAAUC,IAAI,0BAErCR,KAAKS,yBAA2BJ,SAASC,cAAc,UACvDN,KAAKS,yBAAyBC,aAAa,OAAQ,UACnDV,KAAKS,yBAAyBF,UAAUC,IACtC,aACA,oBACA,yBAEFR,KAAKS,yBAAyBC,aAAa,gBAAiBV,KAAKC,OAAOU,IACxEX,KAAKY,iCAELZ,KAAKI,kBAAkBS,YAAYb,KAAKC,QACxCD,KAAKI,kBAAkBS,YAAYb,KAAKS,0BACxCT,KAAKD,QAAQc,YAAYb,KAAKI,mBAE9BJ,KAAKS,yBAAyBK,iBAAiB,QAAS,KACtDd,KAAKe,qBACLf,KAAKC,OAAOe,UAEhB,CAEA,kBAAAD,GAC2C,aAArCf,KAAKC,OAAOE,aAAa,QAC3BH,KAAKC,OAAOS,aAAa,OAAQ,QAEjCV,KAAKC,OAAOS,aAAa,OAAQ,YAEnCV,KAAKY,gCACP,CAEA,8BAAAA,GAC2C,aAArCZ,KAAKC,OAAOE,aAAa,SAC3BH,KAAKS,yBAAyBQ,UAAY,+9BAC1CjB,KAAKS,yBAAyBC,aAAa,QAAS,iBACpDV,KAAKS,yBAAyBC,aAAa,aAAc,mBAEzDV,KAAKS,yBAAyBQ,UAAY,orCAC1CjB,KAAKS,yBAAyBC,aAAa,QAAS,iBACpDV,KAAKS,yBAAyBC,aAAa,aAAc,iBAE7D","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/text-input/text-input.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class TextInputPassword {\n  constructor($module) {\n    this.$module = $module;\n    this.$input = $module && $module.querySelector(\".tna-text-input\");\n\n    if (\n      !this.$module ||\n      !this.$input ||\n      this.$input.getAttribute(\"type\") !== \"password\"\n    ) {\n      return;\n    }\n\n    this.$textInputWrapper = document.createElement(\"div\");\n    this.$textInputWrapper.classList.add(\"tna-text-input-wrapper\");\n\n    this.$textInputPasswordToggle = document.createElement(\"button\");\n    this.$textInputPasswordToggle.setAttribute(\"type\", \"button\");\n    this.$textInputPasswordToggle.classList.add(\n      \"tna-button\",\n      \"tna-button--small\",\n      \"tna-button--icon-only\",\n    );\n    this.$textInputPasswordToggle.setAttribute(\"aria-controls\", this.$input.id);\n    this.updateTogglePasswordButtonText();\n\n    this.$textInputWrapper.appendChild(this.$input);\n    this.$textInputWrapper.appendChild(this.$textInputPasswordToggle);\n    this.$module.appendChild(this.$textInputWrapper);\n\n    this.$textInputPasswordToggle.addEventListener(\"click\", () => {\n      this.togglePasswordType();\n      this.$input.focus();\n    });\n  }\n\n  togglePasswordType() {\n    if (this.$input.getAttribute(\"type\") === \"password\") {\n      this.$input.setAttribute(\"type\", \"text\");\n    } else {\n      this.$input.setAttribute(\"type\", \"password\");\n    }\n    this.updateTogglePasswordButtonText();\n  }\n\n  updateTogglePasswordButtonText() {\n    if (this.$input.getAttribute(\"type\") === \"password\") {\n      this.$textInputPasswordToggle.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z\" /></svg>Show password`;\n      this.$textInputPasswordToggle.setAttribute(\"title\", \"Show password\");\n      this.$textInputPasswordToggle.setAttribute(\"aria-label\", \"Show password\");\n    } else {\n      this.$textInputPasswordToggle.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM236.5 202.7C260 185.9 288.9 176 320 176C399.5 176 464 240.5 464 320C464 351.1 454.1 379.9 437.3 403.5L402.6 368.8C415.3 347.4 419.6 321.1 412.7 295.1C399 243.9 346.3 213.5 295.1 227.2C286.5 229.5 278.4 232.9 271.1 237.2L236.4 202.5zM357.3 459.1C345.4 462.3 332.9 464 320 464C240.5 464 176 399.5 176 320C176 307.1 177.7 294.6 180.9 282.7L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L357.4 459.2z\" /></svg>Hide password`;\n      this.$textInputPasswordToggle.setAttribute(\"title\", \"Hide password\");\n      this.$textInputPasswordToggle.setAttribute(\"aria-label\", \"Hide password\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","TextInputPassword","constructor","$module","this","$input","querySelector","getAttribute","$textInputWrapper","document","createElement","classList","add","$textInputPasswordToggle","setAttribute","id","updateTogglePasswordButtonText","appendChild","addEventListener","togglePasswordType","focus","innerHTML"],"sourceRoot":""}
+{"version":3,"file":"components/text-input/text-input.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,I,mBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,M,iDCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,OAASF,GAAWA,EAAQG,cAAc,mBAG5CF,KAAKD,SACLC,KAAKC,QAC+B,aAArCD,KAAKC,OAAOE,aAAa,UAK3BH,KAAKI,kBAAoBC,SAASC,cAAc,OAChDN,KAAKI,kBAAkBG,UAAUC,IAAI,0BAErCR,KAAKS,yBAA2BJ,SAASC,cAAc,UACvDN,KAAKS,yBAAyBC,aAAa,OAAQ,UACnDV,KAAKS,yBAAyBF,UAAUC,IACtC,aACA,oBACA,yBAEFR,KAAKS,yBAAyBC,aAAa,gBAAiBV,KAAKC,OAAOU,IACxEX,KAAKY,iCAELZ,KAAKI,kBAAkBS,YAAYb,KAAKC,QACxCD,KAAKI,kBAAkBS,YAAYb,KAAKS,0BACxCT,KAAKD,QAAQc,YAAYb,KAAKI,mBAE9BJ,KAAKS,yBAAyBK,iBAAiB,QAAS,KACtDd,KAAKe,qBACLf,KAAKC,OAAOe,UAEhB,CAEA,kBAAAD,GAC2C,aAArCf,KAAKC,OAAOE,aAAa,QAC3BH,KAAKC,OAAOS,aAAa,OAAQ,QAEjCV,KAAKC,OAAOS,aAAa,OAAQ,YAEnCV,KAAKY,gCACP,CAEA,8BAAAA,GAC2C,aAArCZ,KAAKC,OAAOE,aAAa,SAC3BH,KAAKS,yBAAyBQ,UAAY,+9BAC1CjB,KAAKS,yBAAyBC,aAAa,QAAS,iBACpDV,KAAKS,yBAAyBC,aAAa,aAAc,mBAEzDV,KAAKS,yBAAyBQ,UAAY,orCAC1CjB,KAAKS,yBAAyBC,aAAa,QAAS,iBACpDV,KAAKS,yBAAyBC,aAAa,aAAc,iBAE7D,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/text-input/text-input.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class TextInputPassword {\n  constructor($module) {\n    this.$module = $module;\n    this.$input = $module && $module.querySelector(\".tna-text-input\");\n\n    if (\n      !this.$module ||\n      !this.$input ||\n      this.$input.getAttribute(\"type\") !== \"password\"\n    ) {\n      return;\n    }\n\n    this.$textInputWrapper = document.createElement(\"div\");\n    this.$textInputWrapper.classList.add(\"tna-text-input-wrapper\");\n\n    this.$textInputPasswordToggle = document.createElement(\"button\");\n    this.$textInputPasswordToggle.setAttribute(\"type\", \"button\");\n    this.$textInputPasswordToggle.classList.add(\n      \"tna-button\",\n      \"tna-button--small\",\n      \"tna-button--icon-only\",\n    );\n    this.$textInputPasswordToggle.setAttribute(\"aria-controls\", this.$input.id);\n    this.updateTogglePasswordButtonText();\n\n    this.$textInputWrapper.appendChild(this.$input);\n    this.$textInputWrapper.appendChild(this.$textInputPasswordToggle);\n    this.$module.appendChild(this.$textInputWrapper);\n\n    this.$textInputPasswordToggle.addEventListener(\"click\", () => {\n      this.togglePasswordType();\n      this.$input.focus();\n    });\n  }\n\n  togglePasswordType() {\n    if (this.$input.getAttribute(\"type\") === \"password\") {\n      this.$input.setAttribute(\"type\", \"text\");\n    } else {\n      this.$input.setAttribute(\"type\", \"password\");\n    }\n    this.updateTogglePasswordButtonText();\n  }\n\n  updateTogglePasswordButtonText() {\n    if (this.$input.getAttribute(\"type\") === \"password\") {\n      this.$textInputPasswordToggle.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M320 96C239.2 96 174.5 132.8 127.4 176.6C80.6 220.1 49.3 272 34.4 307.7C31.1 315.6 31.1 324.4 34.4 332.3C49.3 368 80.6 420 127.4 463.4C174.5 507.1 239.2 544 320 544C400.8 544 465.5 507.2 512.6 463.4C559.4 419.9 590.7 368 605.6 332.3C608.9 324.4 608.9 315.6 605.6 307.7C590.7 272 559.4 220 512.6 176.6C465.5 132.9 400.8 96 320 96zM176 320C176 240.5 240.5 176 320 176C399.5 176 464 240.5 464 320C464 399.5 399.5 464 320 464C240.5 464 176 399.5 176 320zM320 256C320 291.3 291.3 320 256 320C244.5 320 233.7 317 224.3 311.6C223.3 322.5 224.2 333.7 227.2 344.8C240.9 396 293.6 426.4 344.8 412.7C396 399 426.4 346.3 412.7 295.1C400.5 249.4 357.2 220.3 311.6 224.3C316.9 233.6 320 244.4 320 256z\" /></svg>Show password`;\n      this.$textInputPasswordToggle.setAttribute(\"title\", \"Show password\");\n      this.$textInputPasswordToggle.setAttribute(\"aria-label\", \"Show password\");\n    } else {\n      this.$textInputPasswordToggle.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L504.5 470.8C507.2 468.4 509.9 466 512.5 463.6C559.3 420.1 590.6 368.2 605.5 332.5C608.8 324.6 608.8 315.8 605.5 307.9C590.6 272.2 559.3 220.2 512.5 176.8C465.4 133.1 400.7 96.2 319.9 96.2C263.1 96.2 214.3 114.4 173.9 140.4L73 39.1zM236.5 202.7C260 185.9 288.9 176 320 176C399.5 176 464 240.5 464 320C464 351.1 454.1 379.9 437.3 403.5L402.6 368.8C415.3 347.4 419.6 321.1 412.7 295.1C399 243.9 346.3 213.5 295.1 227.2C286.5 229.5 278.4 232.9 271.1 237.2L236.4 202.5zM357.3 459.1C345.4 462.3 332.9 464 320 464C240.5 464 176 399.5 176 320C176 307.1 177.7 294.6 180.9 282.7L101.4 203.2C68.8 240 46.4 279 34.5 307.7C31.2 315.6 31.2 324.4 34.5 332.3C49.4 368 80.7 420 127.5 463.4C174.6 507.1 239.3 544 320.1 544C357.4 544 391.3 536.1 421.6 523.4L357.4 459.2z\" /></svg>Hide password`;\n      this.$textInputPasswordToggle.setAttribute(\"title\", \"Hide password\");\n      this.$textInputPasswordToggle.setAttribute(\"aria-label\", \"Hide password\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","TextInputPassword","constructor","$module","this","$input","querySelector","getAttribute","$textInputWrapper","document","createElement","classList","add","$textInputPasswordToggle","setAttribute","id","updateTogglePasswordButtonText","appendChild","addEventListener","togglePasswordType","focus","innerHTML"],"sourceRoot":""}