@nationalarchives/frontend 0.7.2 → 0.8.0

package/nationalarchives/components/picture/picture.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";var t={181:(t,e,r)=>{r.d(e,{A:()=>i});const i=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))}}},e={};function r(i){var n=e[i];if(void 0!==n)return n.exports;var o=e[i]={exports:{}};return t[i](o,o.exports,r),o.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};r.r(i),r.d(i,{Picture:()=>p});var n=r(181);function o(t){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function a(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,s(i.key),i)}}function s(t){var e=function(t){if("object"!=o(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==o(e)?e:e+""}var p=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$imageWrapper=e&&e.querySelector(".tna-picture__image-wrapper"),this.$transcriptToggle=this.$imageWrapper&&this.$imageWrapper.querySelector(".tna-picture__toggle-transcript"),this.$transcript=e&&e.querySelector(".tna-picture__transcript"),this.transcriptOpened=!1,this.$module&&this.$imageWrapper&&this.$transcriptToggle&&this.$transcript&&(this.openLabel=this.$module.dataset.informationLabelOpen||"Open transcript",this.closeLabel=this.$module.dataset.informationLabelClose||"Close transcript",this.init())},e=[{key:"init",value:function(){var t=this,e="tna-picture-".concat((0,n.A)());this.$transcriptToggle.removeAttribute("hidden"),this.$transcriptToggle.setAttribute("aria-controls",e),this.$transcriptToggle.innerText=this.openLabel,this.$transcriptToggle.addEventListener("click",(function(){return t.toggleTranscript()})),this.$transcript.setAttribute("id",e),this.$transcript.setAttribute("hidden",!0),this.$transcript.addEventListener("keydown",(function(e){"Escape"===e.key&&(t.toggleTranscript(),t.$transcriptToggle.focus())}))}},{key:"toggleTranscript",value:function(){this.transcriptOpened=!this.transcriptOpened,this.transcriptOpened?(this.$transcriptToggle.setAttribute("aria-expanded",!0),this.$transcriptToggle.innerText=this.closeLabel,this.$transcript.removeAttribute("hidden")):(this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText=this.openLabel,this.$transcript.setAttribute("hidden",!0))}}],e&&a(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return i})()));
+!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";var t={181:(t,e,r)=>{r.d(e,{A:()=>i});const i=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))}}},e={};function r(i){var n=e[i];if(void 0!==n)return n.exports;var o=e[i]={exports:{}};return t[i](o,o.exports,r),o.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};r.r(i),r.d(i,{Picture:()=>p});var n=r(181);function o(t){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function a(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,s(i.key),i)}}function s(t){var e=function(t){if("object"!=o(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==o(e)?e:e+""}var p=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$imageWrapper=e&&e.querySelector(".tna-picture__image-wrapper"),this.$transcriptToggle=this.$imageWrapper&&this.$imageWrapper.querySelector(".tna-picture__toggle-transcript"),this.$transcript=e&&e.querySelector(".tna-picture__transcript"),this.transcriptOpened=!1,this.$module&&this.$imageWrapper&&this.$transcriptToggle&&this.$transcript&&(this.openLabel=this.$module.dataset.informationLabelOpen||"Open transcript",this.closeLabel=this.$module.dataset.informationLabelClose||"Close transcript",this.init())},e=[{key:"init",value:function(){var t=this,e="tna-picture-".concat((0,n.A)());this.$transcriptToggle.removeAttribute("hidden"),this.$transcriptToggle.setAttribute("aria-controls",e),this.$transcriptToggle.innerText=this.openLabel,this.$transcriptToggle.addEventListener("click",(function(){return t.toggleTranscript()})),this.$transcript.setAttribute("id",e),this.$transcript.setAttribute("hidden",""),this.$transcript.addEventListener("keydown",(function(e){"Escape"===e.key&&(t.toggleTranscript(),t.$transcriptToggle.focus())}))}},{key:"toggleTranscript",value:function(){this.transcriptOpened=!this.transcriptOpened,this.transcriptOpened?(this.$transcriptToggle.setAttribute("aria-expanded",!0),this.$transcriptToggle.innerText=this.closeLabel,this.$transcript.removeAttribute("hidden")):(this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText=this.openLabel,this.$transcript.setAttribute("hidden",""))}}],e&&a(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return i})()));
 //# sourceMappingURL=picture.js.map

package/nationalarchives/components/picture/picture.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/picture/picture.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,yDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,GACf,C,GCLCC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAad,QAGrB,IAAIC,EAASU,EAAyBE,GAAY,CAGjDb,QAAS,CAAC,GAOX,OAHAgB,EAAoBH,GAAUZ,EAAQA,EAAOD,QAASY,GAG/CX,EAAOD,OACf,CCrBAY,EAAoBK,EAAI,CAACjB,EAASkB,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEpB,EAASmB,IAC5EE,OAAOC,eAAetB,EAASmB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFd,EAAoBkB,EAAK9B,IACH,oBAAX+B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAetB,EAAS+B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAetB,EAAS,aAAc,CAAEiC,OAAO,GAAO,E,stBCHvD,IAAMC,EAAO,WA6BjB,O,EA5BD,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,cACHH,GAAWA,EAAQI,cAAc,+BAEnCF,KAAKG,kBACHH,KAAKC,eACLD,KAAKC,cAAcC,cAAc,mCAEnCF,KAAKI,YACHN,GAAWA,EAAQI,cAAc,4BACnCF,KAAKK,kBAAmB,EAGrBL,KAAKF,SACLE,KAAKC,eACLD,KAAKG,mBACLH,KAAKI,cAKRJ,KAAKM,UACHN,KAAKF,QAAQS,QAAQC,sBAAwB,kBAC/CR,KAAKS,WACHT,KAAKF,QAAQS,QAAQG,uBAAyB,mBAEhDV,KAAKW,OACP,E,EAAC,EAAA7B,IAAA,OAAAc,MAED,WAAO,IAAAgB,EAAA,KACCC,EAAW,eAAHC,QAAkBC,EAAAA,EAAAA,MAEhCf,KAAKG,kBAAkBa,gBAAgB,UACvChB,KAAKG,kBAAkBc,aAAa,gBAAiBJ,GACrDb,KAAKG,kBAAkBe,UAAYlB,KAAKM,UACxCN,KAAKG,kBAAkBgB,iBAAiB,SAAS,kBAC/CP,EAAKQ,kBAAkB,IAGzBpB,KAAKI,YAAYa,aAAa,KAAMJ,GACpCb,KAAKI,YAAYa,aAAa,UAAU,GAExCjB,KAAKI,YAAYe,iBAAiB,WAAW,SAACE,GAErC,WADCA,EAAEvC,MAEN8B,EAAKQ,mBACLR,EAAKT,kBAAkBmB,QAG7B,GACF,GAAC,CAAAxC,IAAA,mBAAAc,MAED,WACEI,KAAKK,kBAAoBL,KAAKK,iBAC1BL,KAAKK,kBACPL,KAAKG,kBAAkBc,aAAa,iBAAiB,GACrDjB,KAAKG,kBAAkBe,UAAYlB,KAAKS,WACxCT,KAAKI,YAAYY,gBAAgB,YAEjChB,KAAKG,kBAAkBc,aAAa,iBAAiB,GACrDjB,KAAKG,kBAAkBe,UAAYlB,KAAKM,UACxCN,KAAKI,YAAYa,aAAa,UAAU,GAE5C,I,gFAAC,CAjEiB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","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/picture/picture.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 ","const uuidv4 = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n    ).toString(16),\n  );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter 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\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Picture {\n  constructor($module) {\n    this.$module = $module;\n    this.$imageWrapper =\n      $module && $module.querySelector(\".tna-picture__image-wrapper\");\n\n    this.$transcriptToggle =\n      this.$imageWrapper &&\n      this.$imageWrapper.querySelector(\".tna-picture__toggle-transcript\");\n\n    this.$transcript =\n      $module && $module.querySelector(\".tna-picture__transcript\");\n    this.transcriptOpened = false;\n\n    if (\n      !this.$module ||\n      !this.$imageWrapper ||\n      !this.$transcriptToggle ||\n      !this.$transcript\n    ) {\n      return;\n    }\n\n    this.openLabel =\n      this.$module.dataset.informationLabelOpen || \"Open transcript\";\n    this.closeLabel =\n      this.$module.dataset.informationLabelClose || \"Close transcript\";\n\n    this.init();\n  }\n\n  init() {\n    const uniqueId = `tna-picture-${uuidv4()}`;\n\n    this.$transcriptToggle.removeAttribute(\"hidden\");\n    this.$transcriptToggle.setAttribute(\"aria-controls\", uniqueId);\n    this.$transcriptToggle.innerText = this.openLabel;\n    this.$transcriptToggle.addEventListener(\"click\", () =>\n      this.toggleTranscript(),\n    );\n\n    this.$transcript.setAttribute(\"id\", uniqueId);\n    this.$transcript.setAttribute(\"hidden\", true);\n\n    this.$transcript.addEventListener(\"keydown\", (e) => {\n      switch (e.key) {\n        case \"Escape\":\n          this.toggleTranscript();\n          this.$transcriptToggle.focus();\n          break;\n      }\n    });\n  }\n\n  toggleTranscript() {\n    this.transcriptOpened = !this.transcriptOpened;\n    if (this.transcriptOpened) {\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", true);\n      this.$transcriptToggle.innerText = this.closeLabel;\n      this.$transcript.removeAttribute(\"hidden\");\n    } else {\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n      this.$transcriptToggle.innerText = this.openLabel;\n      this.$transcript.setAttribute(\"hidden\", true);\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Picture","$module","_classCallCheck","this","$imageWrapper","querySelector","$transcriptToggle","$transcript","transcriptOpened","openLabel","dataset","informationLabelOpen","closeLabel","informationLabelClose","init","_this","uniqueId","concat","uuidv4","removeAttribute","setAttribute","innerText","addEventListener","toggleTranscript","e","focus"],"sourceRoot":""}
+{"version":3,"file":"components/picture/picture.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,yDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,GACf,C,GCLCC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAad,QAGrB,IAAIC,EAASU,EAAyBE,GAAY,CAGjDb,QAAS,CAAC,GAOX,OAHAgB,EAAoBH,GAAUZ,EAAQA,EAAOD,QAASY,GAG/CX,EAAOD,OACf,CCrBAY,EAAoBK,EAAI,CAACjB,EAASkB,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEpB,EAASmB,IAC5EE,OAAOC,eAAetB,EAASmB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFd,EAAoBkB,EAAK9B,IACH,oBAAX+B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAetB,EAAS+B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAetB,EAAS,aAAc,CAAEiC,OAAO,GAAO,E,stBCHvD,IAAMC,EAAO,WA6BjB,O,EA5BD,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,cACHH,GAAWA,EAAQI,cAAc,+BAEnCF,KAAKG,kBACHH,KAAKC,eACLD,KAAKC,cAAcC,cAAc,mCAEnCF,KAAKI,YACHN,GAAWA,EAAQI,cAAc,4BACnCF,KAAKK,kBAAmB,EAGrBL,KAAKF,SACLE,KAAKC,eACLD,KAAKG,mBACLH,KAAKI,cAKRJ,KAAKM,UACHN,KAAKF,QAAQS,QAAQC,sBAAwB,kBAC/CR,KAAKS,WACHT,KAAKF,QAAQS,QAAQG,uBAAyB,mBAEhDV,KAAKW,OACP,E,EAAC,EAAA7B,IAAA,OAAAc,MAED,WAAO,IAAAgB,EAAA,KACCC,EAAW,eAAHC,QAAkBC,EAAAA,EAAAA,MAEhCf,KAAKG,kBAAkBa,gBAAgB,UACvChB,KAAKG,kBAAkBc,aAAa,gBAAiBJ,GACrDb,KAAKG,kBAAkBe,UAAYlB,KAAKM,UACxCN,KAAKG,kBAAkBgB,iBAAiB,SAAS,kBAC/CP,EAAKQ,kBAAkB,IAGzBpB,KAAKI,YAAYa,aAAa,KAAMJ,GACpCb,KAAKI,YAAYa,aAAa,SAAU,IAExCjB,KAAKI,YAAYe,iBAAiB,WAAW,SAACE,GAErC,WADCA,EAAEvC,MAEN8B,EAAKQ,mBACLR,EAAKT,kBAAkBmB,QAG7B,GACF,GAAC,CAAAxC,IAAA,mBAAAc,MAED,WACEI,KAAKK,kBAAoBL,KAAKK,iBAC1BL,KAAKK,kBACPL,KAAKG,kBAAkBc,aAAa,iBAAiB,GACrDjB,KAAKG,kBAAkBe,UAAYlB,KAAKS,WACxCT,KAAKI,YAAYY,gBAAgB,YAEjChB,KAAKG,kBAAkBc,aAAa,iBAAiB,GACrDjB,KAAKG,kBAAkBe,UAAYlB,KAAKM,UACxCN,KAAKI,YAAYa,aAAa,SAAU,IAE5C,I,gFAAC,CAjEiB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","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/picture/picture.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 ","const uuidv4 = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n    ).toString(16),\n  );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter 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\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Picture {\n  constructor($module) {\n    this.$module = $module;\n    this.$imageWrapper =\n      $module && $module.querySelector(\".tna-picture__image-wrapper\");\n\n    this.$transcriptToggle =\n      this.$imageWrapper &&\n      this.$imageWrapper.querySelector(\".tna-picture__toggle-transcript\");\n\n    this.$transcript =\n      $module && $module.querySelector(\".tna-picture__transcript\");\n    this.transcriptOpened = false;\n\n    if (\n      !this.$module ||\n      !this.$imageWrapper ||\n      !this.$transcriptToggle ||\n      !this.$transcript\n    ) {\n      return;\n    }\n\n    this.openLabel =\n      this.$module.dataset.informationLabelOpen || \"Open transcript\";\n    this.closeLabel =\n      this.$module.dataset.informationLabelClose || \"Close transcript\";\n\n    this.init();\n  }\n\n  init() {\n    const uniqueId = `tna-picture-${uuidv4()}`;\n\n    this.$transcriptToggle.removeAttribute(\"hidden\");\n    this.$transcriptToggle.setAttribute(\"aria-controls\", uniqueId);\n    this.$transcriptToggle.innerText = this.openLabel;\n    this.$transcriptToggle.addEventListener(\"click\", () =>\n      this.toggleTranscript(),\n    );\n\n    this.$transcript.setAttribute(\"id\", uniqueId);\n    this.$transcript.setAttribute(\"hidden\", \"\");\n\n    this.$transcript.addEventListener(\"keydown\", (e) => {\n      switch (e.key) {\n        case \"Escape\":\n          this.toggleTranscript();\n          this.$transcriptToggle.focus();\n          break;\n      }\n    });\n  }\n\n  toggleTranscript() {\n    this.transcriptOpened = !this.transcriptOpened;\n    if (this.transcriptOpened) {\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", true);\n      this.$transcriptToggle.innerText = this.closeLabel;\n      this.$transcript.removeAttribute(\"hidden\");\n    } else {\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n      this.$transcriptToggle.innerText = this.openLabel;\n      this.$transcript.setAttribute(\"hidden\", \"\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Picture","$module","_classCallCheck","this","$imageWrapper","querySelector","$transcriptToggle","$transcript","transcriptOpened","openLabel","dataset","informationLabelOpen","closeLabel","informationLabelClose","init","_this","uniqueId","concat","uuidv4","removeAttribute","setAttribute","innerText","addEventListener","toggleTranscript","e","focus"],"sourceRoot":""}

package/nationalarchives/components/picture/picture.mjs

@@ -42,7 +42,7 @@ export class Picture {
     );
 
     this.$transcript.setAttribute("id", uniqueId);
-    this.$transcript.setAttribute("hidden", true);
+    this.$transcript.setAttribute("hidden", "");
 
     this.$transcript.addEventListener("keydown", (e) => {
       switch (e.key) {
@@ -63,7 +63,7 @@ export class Picture {
     } else {
       this.$transcriptToggle.setAttribute("aria-expanded", false);
       this.$transcriptToggle.innerText = this.openLabel;
-      this.$transcript.setAttribute("hidden", true);
+      this.$transcript.setAttribute("hidden", "");
     }
   }
 }

package/nationalarchives/components/secondary-navigation/_index.scss

@@ -0,0 +1 @@
+@use "secondary-navigation";

package/nationalarchives/components/secondary-navigation/fixtures.json

@@ -0,0 +1,150 @@
+{
+  "component": "secondary navigation",
+  "fixtures": [
+    {
+      "name": "default",
+      "options": {
+        "title": "Title",
+        "headingLevel": 2,
+        "items": [
+          {
+            "name": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "name": "Beta",
+            "href": "#/beta",
+            "current": true
+          },
+          {
+            "name": "Gamma",
+            "href": "#/gamma"
+          }
+        ]
+      },
+      "html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
+    },
+    {
+      "name": "no bottom border",
+      "options": {
+        "title": "Title",
+        "headingLevel": 2,
+        "items": [
+          {
+            "name": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "name": "Beta",
+            "href": "#/beta",
+            "current": true
+          },
+          {
+            "name": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "noBottomBorder": true
+      },
+      "html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--no-bottom-border tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
+    },
+    {
+      "name": "overflow",
+      "options": {
+        "title": "Title",
+        "headingLevel": 2,
+        "items": [
+          {
+            "name": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "name": "Beta",
+            "href": "#/beta",
+            "current": true
+          },
+          {
+            "name": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "overflow": true
+      },
+      "html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--overflow tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
+    },
+    {
+      "name": "no unindentation",
+      "options": {
+        "title": "Title",
+        "headingLevel": 2,
+        "items": [
+          {
+            "name": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "name": "Beta",
+            "href": "#/beta",
+            "current": true
+          },
+          {
+            "name": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "noUnindentation": true
+      },
+      "html": "<nav class=\"tna-secondary-navigation\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "title": "Title",
+        "headingLevel": 2,
+        "items": [
+          {
+            "name": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "name": "Beta",
+            "href": "#/beta",
+            "current": true
+          },
+          {
+            "name": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "classes": "secondary-navigation__test-class"
+      },
+      "html": "<nav class=\"tna-secondary-navigation secondary-navigation__test-class tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "title": "Title",
+        "headingLevel": 2,
+        "items": [
+          {
+            "name": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "name": "Beta",
+            "href": "#/beta",
+            "current": true
+          },
+          {
+            "name": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "attributes": {
+          "data-testattribute": "foobar"
+        }
+      },
+      "html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--unindent\" aria-label=\"Title\" data-testattribute=\"foobar\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
+    }
+  ]
+}

package/nationalarchives/components/secondary-navigation/macro-options.json

@@ -0,0 +1,70 @@
+[
+  {
+    "name": "title",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "headingLevel",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "current",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "noBottomBorder",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "overflow",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "noUnindentation",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the secondary navigation."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the secondary navigation."
+  }
+]

package/nationalarchives/components/secondary-navigation/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaSecondaryNavigation(params) %}
+  {%- include "nationalarchives/components/secondary-navigation/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/secondary-navigation/secondary-navigation.css

@@ -0,0 +1 @@
+.tna-secondary-navigation{display:flex;flex-flow:row wrap;gap:0 32px;line-height:1.35}.tna-secondary-navigation__heading{padding-bottom:8px;align-self:flex-end;line-height:inherit;border-bottom:5px rgba(0,0,0,0) solid}.tna-secondary-navigation__items{display:flex;align-items:flex-end;justify-content:flex-start;gap:32px;list-style:none}.tna-secondary-navigation__link{width:100%;padding:8px 0;display:block;box-sizing:border-box;line-height:inherit;text-align:left;text-decoration:underline;background:none;border:none;border-top:5px rgba(0,0,0,0) solid;border-bottom:5px rgba(0,0,0,0) solid;cursor:pointer}.tna-secondary-navigation__link,.tna-secondary-navigation__link:link{color:var(--link, #005fa3)}.tna-secondary-navigation__link:visited{color:var(--link-visited, #634abb)}.tna-secondary-navigation__link:hover,.tna-secondary-navigation__link:focus{text-decoration:underline;text-decoration-thickness:3.5px}.tna-secondary-navigation__item--current .tna-secondary-navigation__link{color:var(--font-base, #343338);text-decoration:none;border-bottom:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-secondary-navigation__item--current .tna-secondary-navigation__link:hover,.tna-secondary-navigation__item--current .tna-secondary-navigation__link:focus{text-decoration:underline;text-decoration-thickness:3.5px}.tna-secondary-navigation--overflow{overflow-x:auto}.tna-secondary-navigation::after{content:"";width:100%;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-secondary-navigation--no-bottom-border::after{display:none}.tna-secondary-navigation--unindent::after{width:calc(100% + 64px);margin-right:-32px;margin-left:-32px}@media(max-width: 64em){.tna-secondary-navigation{flex-direction:column;gap:0}.tna-secondary-navigation__heading{width:100%;border-bottom:none;align-self:flex-start}}@media(max-width: 48em){.tna-secondary-navigation{border-bottom:none}.tna-secondary-navigation__items{flex-direction:column;align-items:stretch;gap:0;position:relative}.tna-secondary-navigation__item{position:relative;border-top:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-secondary-navigation__item--current::before{content:"";position:absolute;top:0;bottom:0;left:0;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-secondary-navigation__link{padding:8px 16px}.tna-secondary-navigation__link,.tna-secondary-navigation__item--current .tna-secondary-navigation__link{border-top:none;border-bottom:none}.tna-secondary-navigation--overflow{overflow-x:visible}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-secondary-navigation--unindent .tna-secondary-navigation__items{margin-right:-32px;margin-left:-32px}.tna-secondary-navigation--unindent .tna-secondary-navigation__link{padding:8px 32px}}@media(max-width: 30em){.tna-secondary-navigation--unindent .tna-secondary-navigation__items{margin-right:-16px;margin-left:-16px}.tna-secondary-navigation--unindent .tna-secondary-navigation__link{padding:8px 16px}}/*# sourceMappingURL=secondary-navigation.css.map */

package/nationalarchives/components/secondary-navigation/secondary-navigation.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/secondary-navigation/secondary-navigation.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAOA,0BACE,aACA,mBAEA,WAEA,iBAEA,mCACE,mBAEA,oBAEA,oBC4JA,sCDvJF,iCACE,aACA,qBACA,2BACA,SAEA,gBAMF,gCACE,WACA,cAEA,cAEA,sBAEA,oBAEA,gBACA,0BAEA,gBAEA,YC4HA,yEDxHA,eAEA,qECPF,2BDYE,wCCZF,mCDgBE,4EELF,0BACA,0BCpCsC,MH8CtC,yECtBA,gCDwBE,qBCHE,iEDMF,8JEhBF,0BACA,0BCpCsC,MHyDtC,oCACE,gBAGF,iCACE,WAEA,WCnBE,+DDwBJ,mDACE,aAGF,2CACE,wBACA,mBACA,kBI3BF,wBJrEF,0BAoGI,sBACA,MAEA,mCACE,WAEA,mBAEA,uBIjCJ,wBJ3EF,0BAiHI,mBAEA,iCACE,sBACA,oBACA,MAEA,kBAIF,gCACE,kBC5DA,4DDiEE,iDACE,WAEA,kBACA,MACA,SACA,OCvEJ,+DD6EF,gCACE,iBAGF,yGAEE,gBACA,mBAGF,oCACE,oBI5GJ,kDJiHE,qEACE,mBACA,kBAGF,oEACE,kBIjHJ,wBJsHE,qEACE,mBACA,kBAGF,oEACE","file":"secondary-navigation.css","sourcesContent":["@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-secondary-navigation {\n  display: flex;\n  flex-flow: row wrap;\n\n  gap: 0 spacing.space(2);\n\n  line-height: 1.35;\n\n  &__heading {\n    padding-bottom: spacing.space(0.5);\n\n    align-self: flex-end;\n\n    line-height: inherit;\n\n    @include colour.thick-keyline-transparent(bottom);\n  }\n\n  &__items {\n    display: flex;\n    align-items: flex-end;\n    justify-content: flex-start;\n    gap: spacing.space(2);\n\n    list-style: none;\n  }\n\n  &__item {\n  }\n\n  &__link {\n    width: 100%;\n    padding: spacing.space(0.5) 0;\n\n    display: block;\n\n    box-sizing: border-box;\n\n    line-height: inherit;\n\n    text-align: left;\n    text-decoration: underline;\n\n    background: none;\n\n    border: none;\n    @include colour.thick-keyline-transparent(top);\n    @include colour.thick-keyline-transparent(bottom);\n\n    cursor: pointer;\n\n    &,\n    &:link {\n      @include colour.colour-font(\"link\");\n    }\n\n    &:visited {\n      @include colour.colour-font(\"link-visited\");\n    }\n\n    &:hover,\n    &:focus {\n      @include typography.interacted-text-decoration;\n    }\n  }\n\n  &__item--current &__link {\n    @include colour.colour-font(\"font-base\");\n    text-decoration: none;\n    @include colour.thick-keyline-accent(bottom);\n\n    &:hover,\n    &:focus {\n      @include typography.interacted-text-decoration;\n    }\n  }\n\n  &--overflow {\n    overflow-x: auto;\n  }\n\n  &::after {\n    content: \"\";\n\n    width: 100%;\n\n    @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n  }\n\n  &--no-bottom-border::after {\n    display: none;\n  }\n\n  &--unindent::after {\n    width: calc(100% + #{grid.gutter-width-double()});\n    margin-right: -#{grid.gutter-width()};\n    margin-left: -#{grid.gutter-width()};\n  }\n\n  @include media.on-smaller-than-large {\n    flex-direction: column;\n    gap: 0;\n\n    &__heading {\n      width: 100%;\n      // padding-bottom: 0;\n      border-bottom: none;\n\n      align-self: flex-start;\n    }\n  }\n\n  @include media.on-mobile {\n    border-bottom: none;\n\n    &__items {\n      flex-direction: column;\n      align-items: stretch;\n      gap: 0;\n\n      position: relative;\n      // @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n    }\n\n    &__item {\n      position: relative;\n\n      @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n      &--current {\n        &::before {\n          content: \"\";\n\n          position: absolute;\n          top: 0;\n          bottom: 0;\n          left: 0;\n          @include colour.thick-keyline-accent(left);\n        }\n      }\n    }\n\n    &__link {\n      padding: spacing.space(0.5) spacing.space(1);\n    }\n\n    &__link,\n    &__item--current &__link {\n      border-top: none;\n      border-bottom: none;\n    }\n\n    &--overflow {\n      overflow-x: visible;\n    }\n  }\n\n  @include media.on-small {\n    &--unindent &__items {\n      margin-right: -#{grid.gutter-width()};\n      margin-left: -#{grid.gutter-width()};\n    }\n\n    &--unindent &__link {\n      padding: spacing.space(0.5) grid.gutter-width();\n    }\n  }\n\n  @include media.on-tiny {\n    &--unindent &__items {\n      margin-right: -#{grid.gutter-width-tiny()};\n      margin-left: -#{grid.gutter-width-tiny()};\n    }\n\n    &--unindent &__link {\n      padding: spacing.space(0.5) grid.gutter-width-tiny();\n    }\n  }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width transparent solid;\n  } @else {\n    border: borders.$thick-border-width transparent solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\n      \"form-error-border\",\n      \"focus-outline\"\n    );\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\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\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%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  // @include colour-font(\"font-base\");\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-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.45)} !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(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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  --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(\"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(\"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(\"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(\"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@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    background: linear-gradient(\n      -45deg,\n      rgba(0 0 0 / 25%),\n      rgba(255 255 255 / 25%),\n      rgba(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}\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-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $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","/*\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !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.6 !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}

package/nationalarchives/components/secondary-navigation/secondary-navigation.scss

@@ -0,0 +1,186 @@
+@use "../../tools/a11y";
+@use "../../tools/colour";
+@use "../../tools/grid";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
+
+.tna-secondary-navigation {
+  display: flex;
+  flex-flow: row wrap;
+
+  gap: 0 spacing.space(2);
+
+  line-height: 1.35;
+
+  &__heading {
+    padding-bottom: spacing.space(0.5);
+
+    align-self: flex-end;
+
+    line-height: inherit;
+
+    @include colour.thick-keyline-transparent(bottom);
+  }
+
+  &__items {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-start;
+    gap: spacing.space(2);
+
+    list-style: none;
+  }
+
+  &__item {
+  }
+
+  &__link {
+    width: 100%;
+    padding: spacing.space(0.5) 0;
+
+    display: block;
+
+    box-sizing: border-box;
+
+    line-height: inherit;
+
+    text-align: left;
+    text-decoration: underline;
+
+    background: none;
+
+    border: none;
+    @include colour.thick-keyline-transparent(top);
+    @include colour.thick-keyline-transparent(bottom);
+
+    cursor: pointer;
+
+    &,
+    &:link {
+      @include colour.colour-font("link");
+    }
+
+    &:visited {
+      @include colour.colour-font("link-visited");
+    }
+
+    &:hover,
+    &:focus {
+      @include typography.interacted-text-decoration;
+    }
+  }
+
+  &__item--current &__link {
+    @include colour.colour-font("font-base");
+    text-decoration: none;
+    @include colour.thick-keyline-accent(bottom);
+
+    &:hover,
+    &:focus {
+      @include typography.interacted-text-decoration;
+    }
+  }
+
+  &--overflow {
+    overflow-x: auto;
+  }
+
+  &::after {
+    content: "";
+
+    width: 100%;
+
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+  }
+
+  &--no-bottom-border::after {
+    display: none;
+  }
+
+  &--unindent::after {
+    width: calc(100% + #{grid.gutter-width-double()});
+    margin-right: -#{grid.gutter-width()};
+    margin-left: -#{grid.gutter-width()};
+  }
+
+  @include media.on-smaller-than-large {
+    flex-direction: column;
+    gap: 0;
+
+    &__heading {
+      width: 100%;
+      // padding-bottom: 0;
+      border-bottom: none;
+
+      align-self: flex-start;
+    }
+  }
+
+  @include media.on-mobile {
+    border-bottom: none;
+
+    &__items {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0;
+
+      position: relative;
+      // @include colour.colour-border("keyline", 1px, solid, bottom);
+    }
+
+    &__item {
+      position: relative;
+
+      @include colour.colour-border("keyline", 1px, solid, top);
+
+      &--current {
+        &::before {
+          content: "";
+
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          @include colour.thick-keyline-accent(left);
+        }
+      }
+    }
+
+    &__link {
+      padding: spacing.space(0.5) spacing.space(1);
+    }
+
+    &__link,
+    &__item--current &__link {
+      border-top: none;
+      border-bottom: none;
+    }
+
+    &--overflow {
+      overflow-x: visible;
+    }
+  }
+
+  @include media.on-small {
+    &--unindent &__items {
+      margin-right: -#{grid.gutter-width()};
+      margin-left: -#{grid.gutter-width()};
+    }
+
+    &--unindent &__link {
+      padding: spacing.space(0.5) grid.gutter-width();
+    }
+  }
+
+  @include media.on-tiny {
+    &--unindent &__items {
+      margin-right: -#{grid.gutter-width-tiny()};
+      margin-left: -#{grid.gutter-width-tiny()};
+    }
+
+    &--unindent &__link {
+      padding: spacing.space(0.5) grid.gutter-width-tiny();
+    }
+  }
+}

package/nationalarchives/components/secondary-navigation/template.njk

@@ -0,0 +1,23 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- if params.noBottomBorder -%}
+  {%- set containerClasses = containerClasses.concat('tna-secondary-navigation--no-bottom-border') -%}
+{%- endif -%}
+{%- if params.overflow -%}
+  {%- set containerClasses = containerClasses.concat('tna-secondary-navigation--overflow') -%}
+{%- endif -%}
+{%- if not params.noUnindentation -%}
+  {%- set containerClasses = containerClasses.concat('tna-secondary-navigation--unindent') -%}
+{%- endif -%}
+{%- set classes = containerClasses | join(' ') -%}
+<nav class="tna-secondary-navigation{% if classes %} {{ classes }}{% endif %}" aria-label="{{ params.title }}"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+  <h{{ params.headingLevel }} class="tna-secondary-navigation__heading tna-heading-s">
+    {{ params.title }}
+  </h{{ params.headingLevel }}>
+  <ul class="tna-secondary-navigation__items">
+    {%- for item in params.items %}
+    <li class="tna-secondary-navigation__item{{ ' tna-secondary-navigation__item--current' if item.current else '' }}">
+      <a href="{{ item.href }}" class="tna-secondary-navigation__link">{{ item.name }}</a>
+    </li>
+    {%- endfor %}
+  </ul>
+</nav>

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";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,r(n.key),n)}}function r(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{Tabs:()=>a});var a=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$tabList=e&&e.querySelector(".tna-tabs__list"),this.$tabListItemLinks=e&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=e&&e.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=0,this.init())},e=[{key:"init",value:function(){var t=this;this.$module.classList.add("tna-tabs--interactive"),this.$tabList.removeAttribute("hidden"),this.$tabListItemLinks.forEach((function(e){var i=e.getAttribute("aria-controls");e.setAttribute("aria-selected",!1);var n=document.getElementById(i);n.setAttribute("aria-labelledby",e.id),n.setAttribute("role","tabpanel"),e.addEventListener("click",(function(e){return t.handleItemLinkClick(e)}),!0)})),this.switchTabByIndex(this.currentTabIndex),this.$module.addEventListener("keydown",(function(e){return t.handleItemLinkKeyDown(e)}))}},{key:"handleItemLinkClick",value:function(t){t.preventDefault();var e=t.currentTarget.getAttribute("aria-controls");this.switchTabByID(e)}},{key:"handleItemLinkKeyDown",value:function(t){var 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),e=!0;break;case"End":this.switchTabByIndex(this.$tabListItemLinks.length-1,!0),e=!0}e&&(t.stopPropagation(),t.preventDefault())}},{key:"nextTab",value:function(){this.currentTabIndex<this.$tabListItemLinks.length-1?this.switchTabByIndex(this.currentTabIndex+1,!0):this.switchTabByIndex(0,!0)}},{key:"previousTab",value:function(){this.currentTabIndex>=1?this.switchTabByIndex(this.currentTabIndex-1,!0):this.switchTabByIndex(this.$tabListItemLinks.length-1,!0)}},{key:"switchTabByIndex",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.currentTabIndex=t,this.$tabListItemLinks.forEach((function(t,n){n===e.currentTabIndex?(t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0"),i&&t.focus()):(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex","-1"))})),this.$tabItems.forEach((function(t,i){i===e.currentTabIndex?(t.removeAttribute("hidden"),t.setAttribute("tabindex","0")):(t.setAttribute("hidden",!0),t.setAttribute("tabindex","-1"))}))}},{key:"switchTabByID",value:function(t){var e=Array.from(this.$tabItems).findIndex((function(e){return e.getAttribute("id")===t}));this.switchTabByIndex(e)}}],e&&n(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,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";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,r(n.key),n)}}function r(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{Tabs:()=>a});var a=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$tabList=e&&e.querySelector(".tna-tabs__list"),this.$tabListItemLinks=e&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=e&&e.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=0,this.init())},e=[{key:"init",value:function(){var t=this;this.$module.classList.add("tna-tabs--interactive"),this.$tabList.removeAttribute("hidden"),this.$tabListItemLinks.forEach((function(e){var i=e.getAttribute("aria-controls");e.setAttribute("aria-selected",!1);var n=document.getElementById(i);n.setAttribute("aria-labelledby",e.id),n.setAttribute("role","tabpanel"),e.addEventListener("click",(function(e){return t.handleItemLinkClick(e)}),!0)})),this.switchTabByIndex(this.currentTabIndex),this.$module.addEventListener("keydown",(function(e){return t.handleItemLinkKeyDown(e)}))}},{key:"handleItemLinkClick",value:function(t){t.preventDefault();var e=t.currentTarget.getAttribute("aria-controls");this.switchTabByID(e)}},{key:"handleItemLinkKeyDown",value:function(t){var 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),e=!0;break;case"End":this.switchTabByIndex(this.$tabListItemLinks.length-1,!0),e=!0}e&&(t.stopPropagation(),t.preventDefault())}},{key:"nextTab",value:function(){this.currentTabIndex<this.$tabListItemLinks.length-1?this.switchTabByIndex(this.currentTabIndex+1,!0):this.switchTabByIndex(0,!0)}},{key:"previousTab",value:function(){this.currentTabIndex>=1?this.switchTabByIndex(this.currentTabIndex-1,!0):this.switchTabByIndex(this.$tabListItemLinks.length-1,!0)}},{key:"switchTabByIndex",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.currentTabIndex=t,this.$tabListItemLinks.forEach((function(t,n){n===e.currentTabIndex?(t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0"),i&&t.focus()):(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex","-1"))})),this.$tabItems.forEach((function(t,i){i===e.currentTabIndex?(t.removeAttribute("hidden"),t.setAttribute("tabindex","0")):(t.setAttribute("hidden",""),t.setAttribute("tabindex","-1"))}))}},{key:"switchTabByID",value:function(t){var e=Array.from(this.$tabItems).findIndex((function(e){return e.getAttribute("id")===t}));this.switchTabByIndex(e)}}],e&&n(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
 //# sourceMappingURL=tabs.js.map