@nationalarchives/frontend 0.32.0 → 0.33.0

package/nationalarchives/components/accordion/accordion.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:()=>n});const n=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)})}},815(t,e,r){r.d(e,{D:()=>o});var n=r(181),o=function(t){var e=!("true"===t.dataset.tableScrollInitialised),r=t.querySelector("caption");e&&(r?r.id||(r.id="table-caption-".concat((0,n.A)())):console.warn("Missing <caption> element on table",t),t.dataset.tableScrollInitialised="true"),t.scrollWidth>t.clientWidth?(t.setAttribute("tabindex","0"),t.setAttribute("role","region"),t.setAttribute("aria-labelledby",(null==r?void 0:r.id)||""),t.classList.add("tna-table-wrapper--scroll")):(t.removeAttribute("tabindex"),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.classList.remove("tna-table-wrapper--scroll"))}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},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 n={};r.r(n),r.d(n,{Accordion:()=>c});var o=r(815);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 a(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,l(n.key),n)}}function l(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=i(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}var c=function(){return t=function t(e){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$items=e&&e.querySelectorAll(".tna-accordion__item"),this.$module&&this.$items&&(this.allowMultipleItemsOpen="true"!==this.$module.dataset.singleOpenItem,this.$items.forEach(function(t){return r.initItem(t)}),this.initState(),this.$toggleAllButton=this.$module.querySelector(".tna-accordion__toggle-all"),this.$toggleAllButton&&(this.syncToggleAllButton(),this.$toggleAllButton.removeAttribute("hidden"),this.$toggleAllButton.addEventListener("click",function(){r.isAllOpen()?r.$items.forEach(function(t){return r.closeItem(t)}):r.$items.forEach(function(t){return r.openItem(t)}),r.syncToggleAllButton()})))},(e=[{key:"initItem",value:function(t){var e=this,r=t.querySelector(".tna-accordion__heading"),n=t.querySelector(".tna-accordion__body");if(r&&n){t.classList.add("tna-accordion__details"),t.classList.remove("tna-accordion__item"),r.removeAttribute("class"),n.classList.add("tna-accordion__content"),n.classList.remove("tna-accordion__body"),n.setAttribute("hidden","");var o=document.createElement("button");o.classList.add("tna-accordion__summary"),o.setAttribute("type","button"),o.setAttribute("aria-controls",n.id),o.innerText=r.innerText,r.innerText="",r.appendChild(o),o.addEventListener("click",function(){"true"===o.getAttribute("aria-expanded")?e.closeItem(t):e.openItem(t)})}}},{key:"initState",value:function(){var t=this;this.$items.forEach(function(e){"true"===e.dataset.isopen?t.openItem(e):t.closeItem(e),e.removeAttribute("data-isopen")})}},{key:"openItem",value:function(t){this.allowMultipleItemsOpen||this.closeAllItemsExcept(t);var e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","true"),e.setAttribute("aria-label","".concat(e.innerText.trim(),", Hide this section")),r.removeAttribute("hidden"),this.syncToggleAllButton();var n=r.querySelectorAll(".tna-table-wrapper");n&&n.forEach(function(t){(0,o.D)(t)})}},{key:"closeItem",value:function(t){var e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","false"),e.setAttribute("aria-label","".concat(e.innerText.trim(),", Show this section")),r.setAttribute("hidden",""),this.syncToggleAllButton()}},{key:"closeAllItemsExcept",value:function(t){var e=this;Array.from(this.$items).filter(function(e){return e.querySelector(".tna-accordion__summary")!==t&&"true"===e.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")}).forEach(function(t){return e.closeItem(t)})}},{key:"isAllOpen",value:function(){return Array.from(this.$items).every(function(t){return"true"===t.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")})}},{key:"syncToggleAllButton",value:function(){this.$toggleAllButton&&(this.isAllOpen()?this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.closeAllLabel||"Hide all sections":this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.openAllLabel||"Show all sections")}}])&&a(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return n})());
+!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={815(t,e,r){r.d(e,{D:()=>o});var n=r(181),o=function(t){var e=!("true"===t.dataset.tableScrollInitialised),r=t.querySelector("caption");e&&(r?r.id||(r.id="table-caption-".concat((0,n.A)())):console.warn("Missing <caption> element on table",t),t.dataset.tableScrollInitialised="true"),t.scrollWidth>t.clientWidth?(t.setAttribute("tabindex","0"),t.setAttribute("role","region"),t.setAttribute("aria-labelledby",(null==r?void 0:r.id)||""),t.classList.add("tna-table-wrapper--scroll")):(t.removeAttribute("tabindex"),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.classList.remove("tna-table-wrapper--scroll"))}},181(t,e,r){r.d(e,{A:()=>n});const n=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(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},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 n={};r.r(n),r.d(n,{Accordion:()=>c});var o=r(815);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 a(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,l(n.key),n)}}function l(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=i(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}var c=function(){return t=function t(e){var r=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$items=e&&e.querySelectorAll(".tna-accordion__item"),this.$module&&this.$items&&(this.allowMultipleItemsOpen="true"!==this.$module.dataset.singleOpenItem,this.$items.forEach(function(t){return r.initItem(t)}),this.initState(),this.$toggleAllButton=this.$module.querySelector(".tna-accordion__toggle-all"),this.$toggleAllButton&&(this.syncToggleAllButton(),this.$toggleAllButton.removeAttribute("hidden"),this.$toggleAllButton.addEventListener("click",function(){r.isAllOpen()?r.$items.forEach(function(t){return r.closeItem(t)}):r.$items.forEach(function(t){return r.openItem(t)}),r.syncToggleAllButton()})))},(e=[{key:"initItem",value:function(t){var e=this,r=t.querySelector(".tna-accordion__heading"),n=t.querySelector(".tna-accordion__body");if(r&&n){t.classList.add("tna-accordion__details"),t.classList.remove("tna-accordion__item"),r.removeAttribute("class"),n.classList.add("tna-accordion__content"),n.classList.remove("tna-accordion__body"),n.setAttribute("hidden","");var o=document.createElement("button");o.classList.add("tna-accordion__summary"),o.setAttribute("type","button"),o.setAttribute("aria-controls",n.id),o.innerText=r.innerText,r.innerText="",r.appendChild(o),o.addEventListener("click",function(){"true"===o.getAttribute("aria-expanded")?e.closeItem(t):e.openItem(t)})}}},{key:"initState",value:function(){var t=this;this.$items.forEach(function(e){"true"===e.dataset.isopen?t.openItem(e):t.closeItem(e),e.removeAttribute("data-isopen")})}},{key:"openItem",value:function(t){this.allowMultipleItemsOpen||this.closeAllItemsExcept(t);var e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","true"),e.setAttribute("aria-label","".concat(e.innerText.trim(),", Hide this section")),r.removeAttribute("hidden"),this.syncToggleAllButton();var n=r.querySelectorAll(".tna-table-wrapper");n&&n.forEach(function(t){(0,o.D)(t)})}},{key:"closeItem",value:function(t){var e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","false"),e.setAttribute("aria-label","".concat(e.innerText.trim(),", Show this section")),r.setAttribute("hidden",""),this.syncToggleAllButton()}},{key:"closeAllItemsExcept",value:function(t){var e=this;Array.from(this.$items).filter(function(e){return e.querySelector(".tna-accordion__summary")!==t&&"true"===e.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")}).forEach(function(t){return e.closeItem(t)})}},{key:"isAllOpen",value:function(){return Array.from(this.$items).every(function(t){return"true"===t.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")})}},{key:"syncToggleAllButton",value:function(){this.$toggleAllButton&&(this.isAllOpen()?this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.closeAllLabel||"Hide all sections":this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.openAllLabel||"Show all sections")}}])&&a(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return n})());
 //# sourceMappingURL=accordion.js.map

package/nationalarchives/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/accordion/accordion.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,KAAM,I,sDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,SAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,EACf,C,2CCJUC,EAAsB,SAACC,GAClC,IAAMC,IAC6C,SAAjDD,EAAcE,QAAQC,wBAElBC,EAAWJ,EAAcK,cAAc,WACzCJ,IACGG,EAEOA,EAASE,KACnBF,EAASE,GAAK,iBAAHC,QAAoBC,EAAAA,EAAAA,OAF/BC,QAAQC,KAAK,qCAAsCV,GAIrDA,EAAcE,QAAQC,uBAAyB,QAE7CH,EAAcW,YAAcX,EAAcY,aAC5CZ,EAAca,aAAa,WAAY,KACvCb,EAAca,aAAa,OAAQ,UACnCb,EAAca,aAAa,mBAAmBT,aAAQ,EAARA,EAAUE,KAAM,IAC9DN,EAAcc,UAAUC,IAAI,+BAE5Bf,EAAcgB,gBAAgB,YAC9BhB,EAAcgB,gBAAgB,QAC9BhB,EAAcgB,gBAAgB,mBAC9BhB,EAAcc,UAAUG,OAAO,6BAEnC,C,GCzBIC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAajC,QAGrB,IAAIC,EAAS6B,EAAyBE,GAAY,CAGjDhC,QAAS,CAAC,GAOX,OAHAmC,EAAoBH,GAAU/B,EAAQA,EAAOD,QAAS+B,GAG/C9B,EAAOD,OACf,CCrBA+B,EAAoBK,EAAI,CAACpC,EAASqC,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEvC,EAASsC,IAC5EE,OAAOC,eAAezC,EAASsC,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,MCJ3EP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFd,EAAoBkB,EAAKjD,IACH,oBAAXkD,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAezC,EAASkD,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAezC,EAAS,aAAc,CAAEoD,OAAO,K,wtBCHhD,IAAMC,EAAS,WA6BnB,O,EA5BD,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,OAASJ,GAAWA,EAAQK,iBAAiB,wBAC7CF,KAAKH,SAAYG,KAAKC,SAI3BD,KAAKG,uBACqC,SAAxCH,KAAKH,QAAQxC,QAAQ+C,eAEvBJ,KAAKC,OAAOI,QAAQ,SAACC,GAAK,OAAKR,EAAKS,SAASD,EAAM,GACnDN,KAAKQ,YAELR,KAAKS,iBAAmBT,KAAKH,QAAQrC,cACnC,8BAEEwC,KAAKS,mBACPT,KAAKU,sBACLV,KAAKS,iBAAiBtC,gBAAgB,UACtC6B,KAAKS,iBAAiBE,iBAAiB,QAAS,WAC1Cb,EAAKc,YACPd,EAAKG,OAAOI,QAAQ,SAACC,GAAK,OAAKR,EAAKe,UAAUP,EAAM,GAEpDR,EAAKG,OAAOI,QAAQ,SAACC,GAAK,OAAKR,EAAKgB,SAASR,EAAM,GAErDR,EAAKY,qBACP,IAEJ,G,EAAC,EAAA7B,IAAA,WAAAc,MAED,SAASW,GAAO,IAAAS,EAAA,KACRC,EAAWV,EAAM9C,cAAc,2BAC/ByD,EAAWX,EAAM9C,cAAc,wBAErC,GAAKwD,GAAaC,EAAlB,CAIAX,EAAMrC,UAAUC,IAAI,0BACpBoC,EAAMrC,UAAUG,OAAO,uBAEvB4C,EAAS7C,gBAAgB,SAEzB8C,EAAShD,UAAUC,IAAI,0BACvB+C,EAAShD,UAAUG,OAAO,uBAC1B6C,EAASjD,aAAa,SAAU,IAEhC,IAAMkD,EAAiBC,SAASC,cAAc,UAC9CF,EAAejD,UAAUC,IAAI,0BAC7BgD,EAAelD,aAAa,OAAQ,UACpCkD,EAAelD,aAAa,gBAAiBiD,EAASxD,IACtDyD,EAAeG,UAAYL,EAASK,UACpCL,EAASK,UAAY,GACrBL,EAASM,YAAYJ,GAErBA,EAAeP,iBAAiB,QAAS,WACyB,SAAjDO,EAAeK,aAAa,iBAEzCR,EAAKF,UAAUP,GAEfS,EAAKD,SAASR,EAElB,EA1BA,CA2BF,GAAC,CAAAzB,IAAA,YAAAc,MAED,WAAY,IAAA6B,EAAA,KACVxB,KAAKC,OAAOI,QAAQ,SAACC,GACa,SAA5BA,EAAMjD,QAAgB,OACxBmE,EAAKV,SAASR,GAEdkB,EAAKX,UAAUP,GAEjBA,EAAMnC,gBAAgB,cACxB,EACF,GAAC,CAAAU,IAAA,WAAAc,MAED,SAASW,GACFN,KAAKG,wBACRH,KAAKyB,oBAAoBnB,GAE3B,IAAMY,EAAiBZ,EAAM9C,cAAc,2BACrCyD,EAAWX,EAAM9C,cAAc,2BACrC0D,EAAelD,aAAa,gBAAiB,QAC7CkD,EAAelD,aACb,aAAY,GAAAN,OACTwD,EAAeG,UAAUK,OAAM,wBAEpCT,EAAS9C,gBAAgB,UAEzB6B,KAAKU,sBAEL,IAAMvD,EAAgB8D,EAASf,iBAAiB,sBAC5C/C,GACFA,EAAckD,QAAQ,SAACsB,IACrBzE,EAAAA,EAAAA,GAAoByE,EACtB,EAEJ,GAAC,CAAA9C,IAAA,YAAAc,MAED,SAAUW,GACR,IAAMY,EAAiBZ,EAAM9C,cAAc,2BACrCyD,EAAWX,EAAM9C,cAAc,2BACrC0D,EAAelD,aAAa,gBAAiB,SAC7CkD,EAAelD,aACb,aAAY,GAAAN,OACTwD,EAAeG,UAAUK,OAAM,wBAEpCT,EAASjD,aAAa,SAAU,IAEhCgC,KAAKU,qBACP,GAAC,CAAA7B,IAAA,sBAAAc,MAED,SAAoBiC,GAAc,IAAAC,EAAA,KAChCC,MAAMC,KAAK/B,KAAKC,QACb+B,OACC,SAAC1B,GAAK,OACJA,EAAM9C,cAAc,6BAA+BoE,GAGd,SAFrCtB,EACG9C,cAAc,2BACd+D,aAAa,gBAA2B,GAE9ClB,QAAQ,SAACC,GAAK,OAAKuB,EAAKhB,UAAUP,EAAM,EAC7C,GAAC,CAAAzB,IAAA,YAAAc,MAED,WACE,OAAOmC,MAAMC,KAAK/B,KAAKC,QAAQgC,MAC7B,SAAC3B,GAAK,MAGiC,SAFrCA,EACG9C,cAAc,2BACd+D,aAAa,gBAA2B,EAEjD,GAAC,CAAA1C,IAAA,sBAAAc,MAED,WACMK,KAAKS,mBACHT,KAAKY,YACPZ,KAAKS,iBAAiBY,UACpBrB,KAAKS,iBAAiBpD,QAAQ6E,eAAiB,oBAEjDlC,KAAKS,iBAAiBY,UACpBrB,KAAKS,iBAAiBpD,QAAQ8E,cAAgB,oBAGtD,M,6EAAC,CAhJmB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/./src/nationalarchives/lib/tables.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/accordion/accordion.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","import uuidv4 from \"./uuid.mjs\";\n\nexport const checkTableForScroll = ($tableWrapper) => {\n  const isUninitialised = !(\n    $tableWrapper.dataset.tableScrollInitialised === \"true\"\n  );\n  const $caption = $tableWrapper.querySelector(\"caption\");\n  if (isUninitialised) {\n    if (!$caption) {\n      console.warn(\"Missing <caption> element on table\", $tableWrapper);\n    } else if (!$caption.id) {\n      $caption.id = `table-caption-${uuidv4()}`;\n    }\n    $tableWrapper.dataset.tableScrollInitialised = \"true\";\n  }\n  if ($tableWrapper.scrollWidth > $tableWrapper.clientWidth) {\n    $tableWrapper.setAttribute(\"tabindex\", \"0\");\n    $tableWrapper.setAttribute(\"role\", \"region\");\n    $tableWrapper.setAttribute(\"aria-labelledby\", $caption?.id || \"\");\n    $tableWrapper.classList.add(\"tna-table-wrapper--scroll\");\n  } else {\n    $tableWrapper.removeAttribute(\"tabindex\");\n    $tableWrapper.removeAttribute(\"role\");\n    $tableWrapper.removeAttribute(\"aria-labelledby\");\n    $tableWrapper.classList.remove(\"tna-table-wrapper--scroll\");\n  }\n};\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 { checkTableForScroll } from \"../../lib/tables.mjs\";\n\nexport class Accordion {\n  constructor($module) {\n    this.$module = $module;\n    this.$items = $module && $module.querySelectorAll(\".tna-accordion__item\");\n    if (!this.$module || !this.$items) {\n      return;\n    }\n\n    this.allowMultipleItemsOpen =\n      this.$module.dataset.singleOpenItem !== \"true\";\n\n    this.$items.forEach(($item) => this.initItem($item));\n    this.initState();\n\n    this.$toggleAllButton = this.$module.querySelector(\n      \".tna-accordion__toggle-all\",\n    );\n    if (this.$toggleAllButton) {\n      this.syncToggleAllButton();\n      this.$toggleAllButton.removeAttribute(\"hidden\");\n      this.$toggleAllButton.addEventListener(\"click\", () => {\n        if (this.isAllOpen()) {\n          this.$items.forEach(($item) => this.closeItem($item));\n        } else {\n          this.$items.forEach(($item) => this.openItem($item));\n        }\n        this.syncToggleAllButton();\n      });\n    }\n  }\n\n  initItem($item) {\n    const $heading = $item.querySelector(\".tna-accordion__heading\");\n    const $content = $item.querySelector(\".tna-accordion__body\");\n\n    if (!$heading || !$content) {\n      return;\n    }\n\n    $item.classList.add(\"tna-accordion__details\");\n    $item.classList.remove(\"tna-accordion__item\");\n\n    $heading.removeAttribute(\"class\");\n\n    $content.classList.add(\"tna-accordion__content\");\n    $content.classList.remove(\"tna-accordion__body\");\n    $content.setAttribute(\"hidden\", \"\");\n\n    const $headingButton = document.createElement(\"button\");\n    $headingButton.classList.add(\"tna-accordion__summary\");\n    $headingButton.setAttribute(\"type\", \"button\");\n    $headingButton.setAttribute(\"aria-controls\", $content.id);\n    $headingButton.innerText = $heading.innerText;\n    $heading.innerText = \"\";\n    $heading.appendChild($headingButton);\n\n    $headingButton.addEventListener(\"click\", () => {\n      const isOpen = $headingButton.getAttribute(\"aria-expanded\") === \"true\";\n      if (isOpen) {\n        this.closeItem($item);\n      } else {\n        this.openItem($item);\n      }\n    });\n  }\n\n  initState() {\n    this.$items.forEach(($item) => {\n      if ($item.dataset[\"isopen\"] === \"true\") {\n        this.openItem($item);\n      } else {\n        this.closeItem($item);\n      }\n      $item.removeAttribute(\"data-isopen\");\n    });\n  }\n\n  openItem($item) {\n    if (!this.allowMultipleItemsOpen) {\n      this.closeAllItemsExcept($item);\n    }\n    const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n    const $content = $item.querySelector(\".tna-accordion__content\");\n    $headingButton.setAttribute(\"aria-expanded\", \"true\");\n    $headingButton.setAttribute(\n      \"aria-label\",\n      `${$headingButton.innerText.trim()}, Hide this section`,\n    );\n    $content.removeAttribute(\"hidden\");\n    // $content.setAttribute(\"tabindex\", \"0\");\n    this.syncToggleAllButton();\n\n    const $tableWrapper = $content.querySelectorAll(\".tna-table-wrapper\");\n    if ($tableWrapper) {\n      $tableWrapper.forEach(($wrapper) => {\n        checkTableForScroll($wrapper);\n      });\n    }\n  }\n\n  closeItem($item) {\n    const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n    const $content = $item.querySelector(\".tna-accordion__content\");\n    $headingButton.setAttribute(\"aria-expanded\", \"false\");\n    $headingButton.setAttribute(\n      \"aria-label\",\n      `${$headingButton.innerText.trim()}, Show this section`,\n    );\n    $content.setAttribute(\"hidden\", \"\");\n    // $content.setAttribute(\"tabindex\", \"-1\");\n    this.syncToggleAllButton();\n  }\n\n  closeAllItemsExcept($excludeItem) {\n    Array.from(this.$items)\n      .filter(\n        ($item) =>\n          $item.querySelector(\".tna-accordion__summary\") !== $excludeItem &&\n          $item\n            .querySelector(\".tna-accordion__summary\")\n            .getAttribute(\"aria-expanded\") === \"true\",\n      )\n      .forEach(($item) => this.closeItem($item));\n  }\n\n  isAllOpen() {\n    return Array.from(this.$items).every(\n      ($item) =>\n        $item\n          .querySelector(\".tna-accordion__summary\")\n          .getAttribute(\"aria-expanded\") === \"true\",\n    );\n  }\n\n  syncToggleAllButton() {\n    if (this.$toggleAllButton) {\n      if (this.isAllOpen()) {\n        this.$toggleAllButton.innerText =\n          this.$toggleAllButton.dataset.closeAllLabel || \"Hide all sections\";\n      } else {\n        this.$toggleAllButton.innerText =\n          this.$toggleAllButton.dataset.openAllLabel || \"Show all sections\";\n      }\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","checkTableForScroll","$tableWrapper","isUninitialised","dataset","tableScrollInitialised","$caption","querySelector","id","concat","uuidv4","console","warn","scrollWidth","clientWidth","setAttribute","classList","add","removeAttribute","remove","__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","Accordion","$module","_this","_classCallCheck","this","$items","querySelectorAll","allowMultipleItemsOpen","singleOpenItem","forEach","$item","initItem","initState","$toggleAllButton","syncToggleAllButton","addEventListener","isAllOpen","closeItem","openItem","_this2","$heading","$content","$headingButton","document","createElement","innerText","appendChild","getAttribute","_this3","closeAllItemsExcept","trim","$wrapper","$excludeItem","_this4","Array","from","filter","every","closeAllLabel","openAllLabel"],"ignoreList":[],"sourceRoot":""}
+{"version":3,"file":"components/accordion/accordion.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/tables.mjs","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/accordion/accordion.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 ","import uuidv4 from \"./uuid.mjs\";\n\nexport const checkTableForScroll = ($tableWrapper) => {\n  const isUninitialised = !(\n    $tableWrapper.dataset.tableScrollInitialised === \"true\"\n  );\n  const $caption = $tableWrapper.querySelector(\"caption\");\n  if (isUninitialised) {\n    if (!$caption) {\n      console.warn(\"Missing <caption> element on table\", $tableWrapper);\n    } else if (!$caption.id) {\n      $caption.id = `table-caption-${uuidv4()}`;\n    }\n    $tableWrapper.dataset.tableScrollInitialised = \"true\";\n  }\n  if ($tableWrapper.scrollWidth > $tableWrapper.clientWidth) {\n    $tableWrapper.setAttribute(\"tabindex\", \"0\");\n    $tableWrapper.setAttribute(\"role\", \"region\");\n    $tableWrapper.setAttribute(\"aria-labelledby\", $caption?.id || \"\");\n    $tableWrapper.classList.add(\"tna-table-wrapper--scroll\");\n  } else {\n    $tableWrapper.removeAttribute(\"tabindex\");\n    $tableWrapper.removeAttribute(\"role\");\n    $tableWrapper.removeAttribute(\"aria-labelledby\");\n    $tableWrapper.classList.remove(\"tna-table-wrapper--scroll\");\n  }\n};\n","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 { checkTableForScroll } from \"../../lib/tables.mjs\";\n\nexport class Accordion {\n  constructor($module) {\n    this.$module = $module;\n    this.$items = $module && $module.querySelectorAll(\".tna-accordion__item\");\n    if (!this.$module || !this.$items) {\n      return;\n    }\n\n    this.allowMultipleItemsOpen =\n      this.$module.dataset.singleOpenItem !== \"true\";\n\n    this.$items.forEach(($item) => this.initItem($item));\n    this.initState();\n\n    this.$toggleAllButton = this.$module.querySelector(\n      \".tna-accordion__toggle-all\",\n    );\n    if (this.$toggleAllButton) {\n      this.syncToggleAllButton();\n      this.$toggleAllButton.removeAttribute(\"hidden\");\n      this.$toggleAllButton.addEventListener(\"click\", () => {\n        if (this.isAllOpen()) {\n          this.$items.forEach(($item) => this.closeItem($item));\n        } else {\n          this.$items.forEach(($item) => this.openItem($item));\n        }\n        this.syncToggleAllButton();\n      });\n    }\n  }\n\n  initItem($item) {\n    const $heading = $item.querySelector(\".tna-accordion__heading\");\n    const $content = $item.querySelector(\".tna-accordion__body\");\n\n    if (!$heading || !$content) {\n      return;\n    }\n\n    $item.classList.add(\"tna-accordion__details\");\n    $item.classList.remove(\"tna-accordion__item\");\n\n    $heading.removeAttribute(\"class\");\n\n    $content.classList.add(\"tna-accordion__content\");\n    $content.classList.remove(\"tna-accordion__body\");\n    $content.setAttribute(\"hidden\", \"\");\n\n    const $headingButton = document.createElement(\"button\");\n    $headingButton.classList.add(\"tna-accordion__summary\");\n    $headingButton.setAttribute(\"type\", \"button\");\n    $headingButton.setAttribute(\"aria-controls\", $content.id);\n    $headingButton.innerText = $heading.innerText;\n    $heading.innerText = \"\";\n    $heading.appendChild($headingButton);\n\n    $headingButton.addEventListener(\"click\", () => {\n      const isOpen = $headingButton.getAttribute(\"aria-expanded\") === \"true\";\n      if (isOpen) {\n        this.closeItem($item);\n      } else {\n        this.openItem($item);\n      }\n    });\n  }\n\n  initState() {\n    this.$items.forEach(($item) => {\n      if ($item.dataset[\"isopen\"] === \"true\") {\n        this.openItem($item);\n      } else {\n        this.closeItem($item);\n      }\n      $item.removeAttribute(\"data-isopen\");\n    });\n  }\n\n  openItem($item) {\n    if (!this.allowMultipleItemsOpen) {\n      this.closeAllItemsExcept($item);\n    }\n    const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n    const $content = $item.querySelector(\".tna-accordion__content\");\n    $headingButton.setAttribute(\"aria-expanded\", \"true\");\n    $headingButton.setAttribute(\n      \"aria-label\",\n      `${$headingButton.innerText.trim()}, Hide this section`,\n    );\n    $content.removeAttribute(\"hidden\");\n    // $content.setAttribute(\"tabindex\", \"0\");\n    this.syncToggleAllButton();\n\n    const $tableWrapper = $content.querySelectorAll(\".tna-table-wrapper\");\n    if ($tableWrapper) {\n      $tableWrapper.forEach(($wrapper) => {\n        checkTableForScroll($wrapper);\n      });\n    }\n  }\n\n  closeItem($item) {\n    const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n    const $content = $item.querySelector(\".tna-accordion__content\");\n    $headingButton.setAttribute(\"aria-expanded\", \"false\");\n    $headingButton.setAttribute(\n      \"aria-label\",\n      `${$headingButton.innerText.trim()}, Show this section`,\n    );\n    $content.setAttribute(\"hidden\", \"\");\n    // $content.setAttribute(\"tabindex\", \"-1\");\n    this.syncToggleAllButton();\n  }\n\n  closeAllItemsExcept($excludeItem) {\n    Array.from(this.$items)\n      .filter(\n        ($item) =>\n          $item.querySelector(\".tna-accordion__summary\") !== $excludeItem &&\n          $item\n            .querySelector(\".tna-accordion__summary\")\n            .getAttribute(\"aria-expanded\") === \"true\",\n      )\n      .forEach(($item) => this.closeItem($item));\n  }\n\n  isAllOpen() {\n    return Array.from(this.$items).every(\n      ($item) =>\n        $item\n          .querySelector(\".tna-accordion__summary\")\n          .getAttribute(\"aria-expanded\") === \"true\",\n    );\n  }\n\n  syncToggleAllButton() {\n    if (this.$toggleAllButton) {\n      if (this.isAllOpen()) {\n        this.$toggleAllButton.innerText =\n          this.$toggleAllButton.dataset.closeAllLabel || \"Hide all sections\";\n      } else {\n        this.$toggleAllButton.innerText =\n          this.$toggleAllButton.dataset.openAllLabel || \"Show all sections\";\n      }\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","checkTableForScroll","$tableWrapper","isUninitialised","dataset","tableScrollInitialised","$caption","querySelector","id","concat","uuidv4","console","warn","scrollWidth","clientWidth","setAttribute","classList","add","removeAttribute","remove","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","Accordion","$module","_this","_classCallCheck","this","$items","querySelectorAll","allowMultipleItemsOpen","singleOpenItem","forEach","$item","initItem","initState","$toggleAllButton","syncToggleAllButton","addEventListener","isAllOpen","closeItem","openItem","_this2","$heading","$content","$headingButton","document","createElement","innerText","appendChild","getAttribute","_this3","closeAllItemsExcept","trim","$wrapper","$excludeItem","_this4","Array","from","filter","every","closeAllLabel","openAllLabel"],"sourceRoot":""}

package/nationalarchives/components/back-link/back-link.css

@@ -1 +1 @@
-.tna-back-link{display:inline-flex;gap:8px}.tna-back-link,.tna-back-link:visited{color:var(--font-base, #343338)}.tna-back-link,.tna-back-link:hover,.tna-back-link:focus-visible{text-decoration:none}.tna-back-link__inner{text-decoration:underline;text-decoration-thickness:0.09375rem;text-underline-offset:.125em}.tna-back-link:hover .tna-back-link__inner{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-back-link::before{content:"‹";content:"‹"/""}/*# sourceMappingURL=back-link.css.map */
+.tna-back-link{display:inline-flex;gap:0.5rem}.tna-back-link,.tna-back-link:visited{color:var(--font-base, #343338)}.tna-back-link,.tna-back-link:hover,.tna-back-link:focus-visible{text-decoration:none}.tna-back-link__inner{text-decoration:underline;text-decoration-thickness:0.09375rem;text-underline-offset:.125em}.tna-back-link:hover .tna-back-link__inner{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-back-link::before{content:"‹";content:"‹"/""}/*# sourceMappingURL=back-link.css.map */

package/nationalarchives/components/back-link/back-link.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/back-link/back-link.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAIA,eACE,oBACA,QAEA,sCCgFA,gCD3EA,iEAGE,qBAGF,sBACE,0BE0CF,0BC/BuC,WDgCvC,sBCjCoC,OHNpC,2CE2CA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHFpC,uBACE,YACA","file":"back-link.css","sourcesContent":["@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-back-link {\n  display: inline-flex;\n  gap: spacing.space(0.5);\n\n  &,\n  &:visited {\n    @include colour.colour-font(\"font-base\");\n  }\n\n  &,\n  &:hover,\n  &:focus-visible {\n    text-decoration: none;\n  }\n\n  &__inner {\n    text-decoration: underline;\n    @include typography.interactable-text-decoration;\n  }\n\n  &:hover &__inner {\n    @include typography.interacted-text-decoration;\n  }\n\n  &::before {\n    content: \"\\2039\";\n    content: \"\\2039\" / \"\";\n  }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\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  // \"background-tint\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  // \"focus-outline\",\n  \"keyline\",\n  \"keyline-dark\",\n  // \"input-foreground\",\n  // \"input-background\",\n  // \"input-border\",\n  // \"form-error-border\",\n  // \"form-error-text\",\n  // \"button-text\",\n  // \"button-background\",\n  // \"button-hover-text\",\n   // \"button-hover-background\",\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\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// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    // @include colour-css-vars-high-contrast(\n    //   \"form-error-border\",\n    //   \"focus-outline\"\n    // );\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\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%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-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(\"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.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  --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%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-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 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"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/back-link/back-link.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAIA,eACE,oBACA,WAEA,sCCgFA,gCD3EA,iEAGE,qBAGF,sBACE,0BE0CF,0BC/BuC,WDgCvC,sBCjCoC,OHNpC,2CE2CA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHFpC,uBACE,YACA","file":"back-link.css","sourcesContent":["@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-back-link {\n  display: inline-flex;\n  gap: spacing.space(0.5);\n\n  &,\n  &:visited {\n    @include colour.colour-font(\"font-base\");\n  }\n\n  &,\n  &:hover,\n  &:focus-visible {\n    text-decoration: none;\n  }\n\n  &__inner {\n    text-decoration: underline;\n    @include typography.interactable-text-decoration;\n  }\n\n  &:hover &__inner {\n    @include typography.interacted-text-decoration;\n  }\n\n  &::before {\n    content: \"\\2039\";\n    content: \"\\2039\" / \"\";\n  }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\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  // \"background-tint\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  // \"focus-outline\",\n  \"keyline\",\n  \"keyline-dark\",\n  // \"input-foreground\",\n  // \"input-background\",\n  // \"input-border\",\n  // \"form-error-border\",\n  // \"form-error-text\",\n  // \"button-text\",\n  // \"button-background\",\n  // \"button-hover-text\",\n   // \"button-hover-background\",\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\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// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    // @include colour-css-vars-high-contrast(\n    //   \"form-error-border\",\n    //   \"focus-outline\"\n    // );\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\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%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-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(\"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.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  --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%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-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 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"]}

package/nationalarchives/components/breadcrumbs/breadcrumbs.css

@@ -1 +1 @@
-.tna-breadcrumbs{border-radius:.1px}.tna-breadcrumbs__list{margin:0;padding:0;display:flex;flex-wrap:wrap;list-style:none}.tna-breadcrumbs__item{display:flex}.tna-breadcrumbs__item+.tna-breadcrumbs__item::before{content:"›";content:"›"/"";margin:0 12px;display:inline-block;vertical-align:baseline}.tna-breadcrumbs__item--expandable{display:none}@media(max-width: 48em){.tna-breadcrumbs__item--expandable{display:inline-block !important}}.tna-breadcrumbs__link{display:inline-block}.tna-breadcrumbs__link,.tna-breadcrumbs__link:link,.tna-breadcrumbs__link:visited{color:var(--font-base, #343338)}.tna-breadcrumbs button.tna-breadcrumbs__link{height:100%;margin:0;padding:0;appearance:none;line-height:inherit;background-color:rgba(0,0,0,0);border:none;border-radius:.1px;cursor:pointer}.tna-breadcrumbs button.tna-breadcrumbs__link:hover{color:inherit;text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em;background-color:rgba(0,0,0,0)}@media(max-width: 48em){.tna-breadcrumbs--collapsed .tna-breadcrumbs__item:not(:first-child,.tna-breadcrumbs__item--expandable,:last-child){display:none}}@media(prefers-contrast: more){.tna-breadcrumbs__link,.tna-breadcrumbs__link:link,.tna-breadcrumbs__link:visited{color:var(--link, #005fa3)}}/*# sourceMappingURL=breadcrumbs.css.map */
+.tna-breadcrumbs{border-radius:.1px}.tna-breadcrumbs__list{margin:0;padding:0;display:flex;flex-wrap:wrap;list-style:none}.tna-breadcrumbs__item{display:flex}.tna-breadcrumbs__item+.tna-breadcrumbs__item::before{content:"›";content:"›"/"";margin:0 0.75rem;display:inline-block;vertical-align:baseline}.tna-breadcrumbs__item--expandable{display:none}@media(max-width: 48em){.tna-breadcrumbs__item--expandable{display:inline-block !important}}.tna-breadcrumbs__link{display:inline-block}.tna-breadcrumbs__link,.tna-breadcrumbs__link:link,.tna-breadcrumbs__link:visited{color:var(--font-base, #343338)}.tna-breadcrumbs button.tna-breadcrumbs__link{height:100%;margin:0;padding:0;appearance:none;line-height:inherit;background-color:rgba(0,0,0,0);border:none;border-radius:.1px;cursor:pointer}.tna-breadcrumbs button.tna-breadcrumbs__link:hover{color:inherit;text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em;background-color:rgba(0,0,0,0)}@media(max-width: 48em){.tna-breadcrumbs--collapsed .tna-breadcrumbs__item:not(:first-child,.tna-breadcrumbs__item--expandable,:last-child){display:none}}@media(prefers-contrast: more){.tna-breadcrumbs__link,.tna-breadcrumbs__link:link,.tna-breadcrumbs__link:visited{color:var(--link, #005fa3)}}/*# sourceMappingURL=breadcrumbs.css.map */

package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/breadcrumbs/breadcrumbs.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAKA,iBACE,mBAEA,uBACE,SACA,UAEA,aACA,eAEA,gBAGF,uBACE,aAGE,sDACE,YACA,eAEA,cAEA,qBAEA,wBAIJ,mCACE,aC+CJ,wBDhDE,mCAII,iCAKN,uBACE,qBAEA,kFE0CF,gCFnCA,8CACE,YACA,SACA,UAEA,gBAEA,oBAEA,+BAEA,YACA,mBAEA,eAEA,oDACE,cGHJ,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OJ2ChC,+BCSJ,wBDJE,oHACE,cE0bJ,+BFpbI,kFEGJ","file":"breadcrumbs.css","sourcesContent":["@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-breadcrumbs {\n  border-radius: 0.1px;\n\n  &__list {\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-wrap: wrap;\n\n    list-style: none;\n  }\n\n  &__item {\n    display: flex;\n\n    + .tna-breadcrumbs__item {\n      &::before {\n        content: \"\\203A\";\n        content: \"\\203A\" / \"\";\n\n        margin: 0 spacing.space(0.75);\n\n        display: inline-block;\n\n        vertical-align: baseline;\n      }\n    }\n\n    &--expandable {\n      display: none;\n\n      @include media.on-mobile {\n        display: inline-block !important;\n      }\n    }\n  }\n\n  &__link {\n    display: inline-block;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-base\");\n    }\n  }\n\n  button#{&}__link {\n    height: 100%;\n    margin: 0;\n    padding: 0;\n\n    appearance: none;\n\n    line-height: inherit;\n\n    background-color: transparent;\n\n    border: none;\n    border-radius: 0.1px;\n\n    cursor: pointer;\n\n    &:hover {\n      color: inherit;\n      @include typography.interacted-text-decoration;\n\n      background-color: transparent;\n    }\n  }\n\n  @include media.on-mobile {\n    &--collapsed &__item:not(:first-child, &__item--expandable, :last-child) {\n      display: none;\n    }\n  }\n\n  @include colour.on-high-contrast {\n    &__link {\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"link\");\n      }\n    }\n  }\n}\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","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\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  // \"background-tint\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  // \"focus-outline\",\n  \"keyline\",\n  \"keyline-dark\",\n  // \"input-foreground\",\n  // \"input-background\",\n  // \"input-border\",\n  // \"form-error-border\",\n  // \"form-error-text\",\n  // \"button-text\",\n  // \"button-background\",\n  // \"button-hover-text\",\n   // \"button-hover-background\",\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\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// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    // @include colour-css-vars-high-contrast(\n    //   \"form-error-border\",\n    //   \"focus-outline\"\n    // );\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\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%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-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(\"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.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  --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%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-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 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"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/breadcrumbs/breadcrumbs.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAKA,iBACE,mBAEA,uBACE,SACA,UAEA,aACA,eAEA,gBAGF,uBACE,aAGE,sDACE,YACA,eAEA,iBAEA,qBAEA,wBAIJ,mCACE,aC+CJ,wBDhDE,mCAII,iCAKN,uBACE,qBAEA,kFE0CF,gCFnCA,8CACE,YACA,SACA,UAEA,gBAEA,oBAEA,+BAEA,YACA,mBAEA,eAEA,oDACE,cGHJ,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OJ2ChC,+BCSJ,wBDJE,oHACE,cE0bJ,+BFpbI,kFEGJ","file":"breadcrumbs.css","sourcesContent":["@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-breadcrumbs {\n  border-radius: 0.1px;\n\n  &__list {\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-wrap: wrap;\n\n    list-style: none;\n  }\n\n  &__item {\n    display: flex;\n\n    + .tna-breadcrumbs__item {\n      &::before {\n        content: \"\\203A\";\n        content: \"\\203A\" / \"\";\n\n        margin: 0 spacing.space(0.75);\n\n        display: inline-block;\n\n        vertical-align: baseline;\n      }\n    }\n\n    &--expandable {\n      display: none;\n\n      @include media.on-mobile {\n        display: inline-block !important;\n      }\n    }\n  }\n\n  &__link {\n    display: inline-block;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-base\");\n    }\n  }\n\n  button#{&}__link {\n    height: 100%;\n    margin: 0;\n    padding: 0;\n\n    appearance: none;\n\n    line-height: inherit;\n\n    background-color: transparent;\n\n    border: none;\n    border-radius: 0.1px;\n\n    cursor: pointer;\n\n    &:hover {\n      color: inherit;\n      @include typography.interacted-text-decoration;\n\n      background-color: transparent;\n    }\n  }\n\n  @include media.on-mobile {\n    &--collapsed &__item:not(:first-child, &__item--expandable, :last-child) {\n      display: none;\n    }\n  }\n\n  @include colour.on-high-contrast {\n    &__link {\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"link\");\n      }\n    }\n  }\n}\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","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\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  // \"background-tint\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  // \"focus-outline\",\n  \"keyline\",\n  \"keyline-dark\",\n  // \"input-foreground\",\n  // \"input-background\",\n  // \"input-border\",\n  // \"form-error-border\",\n  // \"form-error-text\",\n  // \"button-text\",\n  // \"button-background\",\n  // \"button-hover-text\",\n   // \"button-hover-background\",\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\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// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  // @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    // @include colour-css-vars-high-contrast(\n    //   \"form-error-border\",\n    //   \"focus-outline\"\n    // );\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\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%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-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(\"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.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  --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%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-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 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"]}

package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/breadcrumbs/breadcrumbs.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,KAAM,I,sDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,SAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,EACf,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,MCJ3EP,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,K,s0BCHhD,IAAMC,EAAWC,EACtB,SAAAD,EAAYE,GAAS,IAAAC,EAAA,KASnB,G,4FATmBC,CAAA,KAAAJ,GACnBK,KAAKH,QAAUA,EACfG,KAAKC,iBACHJ,GAAWA,EAAQK,cAAc,0BACnCF,KAAKG,aACHN,GACAG,KAAKC,kBACLJ,EAAQO,iBAAiB,0BAEvBJ,KAAKH,SAAWG,KAAKC,kBAAoBD,KAAKG,cAE9CH,KAAKG,aAAaE,OAAS,IAC1BL,KAAKH,QAAQS,UAAUC,SAAS,gCACjC,CACA,IAAMC,EAAW,mBAAHC,QAAsBC,EAAAA,EAAAA,MAE9BC,EAAcC,SAASC,cAAc,MAC3CF,EAAYL,UAAUQ,IACpB,wBACA,qCAEFH,EAAYI,MAAMC,QAAU,OAE5B,IAAMC,EAAgBL,SAASC,cAAc,UAC7CI,EAAcX,UAAUQ,IAAI,yBAC5BG,EAAcC,UACZ,yEACFD,EAAcE,aAAa,OAAQ,UACnCF,EAAcE,aAAa,gBAAiB,SAC5CF,EAAcE,aAAa,gBAAiBX,GAC5CS,EAAcG,iBAAiB,QAAS,WACtCtB,EAAKD,QAAQS,UAAUe,OAAO,8BAC9BV,EAAYU,SACZvB,EAAKD,QAAQsB,aAAa,WAAY,KACtCrB,EAAKD,QAAQyB,QACbxB,EAAKD,QAAQuB,iBACX,OACA,WACEtB,EAAKD,QAAQ0B,gBAAgB,WAC/B,EACA,CAAEC,MAAM,GAEZ,GACAb,EAAYc,YAAYR,GAExBjB,KAAKC,iBAAiBkB,aAAa,KAAMX,GACzCR,KAAKC,iBAAiByB,aACpBf,EACAX,KAAKG,aAAaH,KAAKG,aAAaE,OAAS,GAAGsB,aAGlD3B,KAAKH,QAAQS,UAAUQ,IAAI,6BAC7B,CAEJ,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/breadcrumbs/breadcrumbs.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 Breadcrumbs {\n  constructor($module) {\n    this.$module = $module;\n    this.$breadcrumbsList =\n      $module && $module.querySelector(\".tna-breadcrumbs__list\");\n    this.$breadcrumbs =\n      $module &&\n      this.$breadcrumbsList &&\n      $module.querySelectorAll(\".tna-breadcrumbs__item\");\n\n    if (this.$module && this.$breadcrumbsList && this.$breadcrumbs) {\n      if (\n        this.$breadcrumbs.length > 2 &&\n        !this.$module.classList.contains(\"tna-breadcrumbs--no-collapse\")\n      ) {\n        const uniqueId = `tna-breadcrumbs-${uuidv4()}`;\n\n        const $expandable = document.createElement(\"li\");\n        $expandable.classList.add(\n          \"tna-breadcrumbs__item\",\n          \"tna-breadcrumbs__item--expandable\",\n        );\n        $expandable.style.display = \"none\";\n\n        const $expandButton = document.createElement(\"button\");\n        $expandButton.classList.add(\"tna-breadcrumbs__link\");\n        $expandButton.innerHTML =\n          \"<span class='tna-!--visually-hidden'>Expand breadcrumbs</span>&hellip;\";\n        $expandButton.setAttribute(\"type\", \"button\");\n        $expandButton.setAttribute(\"aria-expanded\", \"false\");\n        $expandButton.setAttribute(\"aria-controls\", uniqueId);\n        $expandButton.addEventListener(\"click\", () => {\n          this.$module.classList.remove(\"tna-breadcrumbs--collapsed\");\n          $expandable.remove();\n          this.$module.setAttribute(\"tabindex\", \"0\");\n          this.$module.focus();\n          this.$module.addEventListener(\n            \"blur\",\n            () => {\n              this.$module.removeAttribute(\"tabindex\");\n            },\n            { once: true },\n          );\n        });\n        $expandable.appendChild($expandButton);\n\n        this.$breadcrumbsList.setAttribute(\"id\", uniqueId);\n        this.$breadcrumbsList.insertBefore(\n          $expandable,\n          this.$breadcrumbs[this.$breadcrumbs.length - 2].nextSibling,\n        );\n\n        this.$module.classList.add(\"tna-breadcrumbs--collapsed\");\n      }\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","Breadcrumbs","_createClass","$module","_this","_classCallCheck","this","$breadcrumbsList","querySelector","$breadcrumbs","querySelectorAll","length","classList","contains","uniqueId","concat","uuidv4","$expandable","document","createElement","add","style","display","$expandButton","innerHTML","setAttribute","addEventListener","remove","focus","removeAttribute","once","appendChild","insertBefore","nextSibling"],"ignoreList":[],"sourceRoot":""}
+{"version":3,"file":"components/breadcrumbs/breadcrumbs.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,KAAM,I,sDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,SAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,EACf,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,MCJ3EP,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,K,s0BCHhD,IAAMC,EAAWC,EACtB,SAAAD,EAAYE,GAAS,IAAAC,EAAA,KASnB,G,4FATmBC,CAAA,KAAAJ,GACnBK,KAAKH,QAAUA,EACfG,KAAKC,iBACHJ,GAAWA,EAAQK,cAAc,0BACnCF,KAAKG,aACHN,GACAG,KAAKC,kBACLJ,EAAQO,iBAAiB,0BAEvBJ,KAAKH,SAAWG,KAAKC,kBAAoBD,KAAKG,cAE9CH,KAAKG,aAAaE,OAAS,IAC1BL,KAAKH,QAAQS,UAAUC,SAAS,gCACjC,CACA,IAAMC,EAAW,mBAAHC,QAAsBC,EAAAA,EAAAA,MAE9BC,EAAcC,SAASC,cAAc,MAC3CF,EAAYL,UAAUQ,IACpB,wBACA,qCAEFH,EAAYI,MAAMC,QAAU,OAE5B,IAAMC,EAAgBL,SAASC,cAAc,UAC7CI,EAAcX,UAAUQ,IAAI,yBAC5BG,EAAcC,UACZ,yEACFD,EAAcE,aAAa,OAAQ,UACnCF,EAAcE,aAAa,gBAAiB,SAC5CF,EAAcE,aAAa,gBAAiBX,GAC5CS,EAAcG,iBAAiB,QAAS,WACtCtB,EAAKD,QAAQS,UAAUe,OAAO,8BAC9BV,EAAYU,SACZvB,EAAKD,QAAQsB,aAAa,WAAY,KACtCrB,EAAKD,QAAQyB,QACbxB,EAAKD,QAAQuB,iBACX,OACA,WACEtB,EAAKD,QAAQ0B,gBAAgB,WAC/B,EACA,CAAEC,MAAM,GAEZ,GACAb,EAAYc,YAAYR,GAExBjB,KAAKC,iBAAiBkB,aAAa,KAAMX,GACzCR,KAAKC,iBAAiByB,aACpBf,EACAX,KAAKG,aAAaH,KAAKG,aAAaE,OAAS,GAAGsB,aAGlD3B,KAAKH,QAAQS,UAAUQ,IAAI,6BAC7B,CAEJ,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/breadcrumbs/breadcrumbs.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 Breadcrumbs {\n  constructor($module) {\n    this.$module = $module;\n    this.$breadcrumbsList =\n      $module && $module.querySelector(\".tna-breadcrumbs__list\");\n    this.$breadcrumbs =\n      $module &&\n      this.$breadcrumbsList &&\n      $module.querySelectorAll(\".tna-breadcrumbs__item\");\n\n    if (this.$module && this.$breadcrumbsList && this.$breadcrumbs) {\n      if (\n        this.$breadcrumbs.length > 2 &&\n        !this.$module.classList.contains(\"tna-breadcrumbs--no-collapse\")\n      ) {\n        const uniqueId = `tna-breadcrumbs-${uuidv4()}`;\n\n        const $expandable = document.createElement(\"li\");\n        $expandable.classList.add(\n          \"tna-breadcrumbs__item\",\n          \"tna-breadcrumbs__item--expandable\",\n        );\n        $expandable.style.display = \"none\";\n\n        const $expandButton = document.createElement(\"button\");\n        $expandButton.classList.add(\"tna-breadcrumbs__link\");\n        $expandButton.innerHTML =\n          \"<span class='tna-!--visually-hidden'>Expand breadcrumbs</span>&hellip;\";\n        $expandButton.setAttribute(\"type\", \"button\");\n        $expandButton.setAttribute(\"aria-expanded\", \"false\");\n        $expandButton.setAttribute(\"aria-controls\", uniqueId);\n        $expandButton.addEventListener(\"click\", () => {\n          this.$module.classList.remove(\"tna-breadcrumbs--collapsed\");\n          $expandable.remove();\n          this.$module.setAttribute(\"tabindex\", \"0\");\n          this.$module.focus();\n          this.$module.addEventListener(\n            \"blur\",\n            () => {\n              this.$module.removeAttribute(\"tabindex\");\n            },\n            { once: true },\n          );\n        });\n        $expandable.appendChild($expandButton);\n\n        this.$breadcrumbsList.setAttribute(\"id\", uniqueId);\n        this.$breadcrumbsList.insertBefore(\n          $expandable,\n          this.$breadcrumbs[this.$breadcrumbs.length - 2].nextSibling,\n        );\n\n        this.$module.classList.add(\"tna-breadcrumbs--collapsed\");\n      }\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","Breadcrumbs","_createClass","$module","_this","_classCallCheck","this","$breadcrumbsList","querySelector","$breadcrumbs","querySelectorAll","length","classList","contains","uniqueId","concat","uuidv4","$expandable","document","createElement","add","style","display","$expandButton","innerHTML","setAttribute","addEventListener","remove","focus","removeAttribute","once","appendChild","insertBefore","nextSibling"],"sourceRoot":""}

package/nationalarchives/components/button/button.css

@@ -1 +1 @@
-.tna-button-group{margin-top:32px}.tna-button-group:first-child{margin-top:0}.tna-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:16px}@media(max-width: 30em){.tna-button-group{flex-direction:column;align-items:stretch}}.tna-button-group--small{gap:8px}.tna-button-group--centred{justify-content:center}.tna-button-group--full{justify-content:stretch}@media(max-width: 48em){.tna-button-group--full{flex-direction:column;align-items:stretch}}.tna-button-group--full .tna-button{margin:0;flex:1}.tna-button{padding:4px 16px;display:inline-flex;align-items:baseline;justify-content:center;gap:12px;line-height:2rem;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:1.125rem;font-weight:700;background-color:var(--button-background, rgb(1, 1, 1));border:4px var(--button-background, rgb(1, 1, 1)) solid;border-radius:2px}.tna-button,.tna-button:link,.tna-button:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-button:hover{color:var(--button-hover-text, rgb(1, 1, 1));text-decoration:none;background:rgba(0,0,0,0)}.tna-button .fa-solid{display:block}.tna-button svg{height:1.1em;flex-shrink:0;align-self:center;fill:currentColor}.tna-button--plain{font-weight:400;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-radius:.1px}.tna-button--plain,.tna-button--plain:link,.tna-button--plain:visited,.tna-button--plain:hover{color:var(--link, #005fa3)}.tna-button--plain:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-button--accent{background-color:var(--button-accented-background, rgb(140, 150, 148));border-color:var(--button-accented-background, rgb(140, 150, 148))}.tna-button--accent,.tna-button--accent:link,.tna-button--accent:visited{color:var(--button-accented-text, rgb(1, 1, 1))}.tna-button--accent:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-button--icon-right{flex-direction:row-reverse}.tna-button--icon-right:has(.fa-solid){align-items:center}.tna-button--small,.tna-button-group--small .tna-button{padding:0 8px;font-size:0.875rem;line-height:1.5rem}.tna-button--icon-only{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only .fa-solid{width:2.5rem;line-height:2rem;font-size:1.125rem}.tna-button--icon-only svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only,.tna-button-group--small .tna-button--icon-only{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only .fa-solid,.tna-button-group--small .tna-button--icon-only .fa-solid{width:1.5rem;line-height:1.5rem}.tna-button--small.tna-button--icon-only svg,.tna-button-group--small .tna-button--icon-only svg{height:1.2rem;margin:.5rem}@media(max-width: 48em){.tna-button--icon-only-mobile{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only-mobile .fa-solid{width:2.5rem;line-height:2rem;font-size:1.125rem}.tna-button--icon-only-mobile svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only-mobile,.tna-button-group--small .tna-button--icon-only-mobile{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only-mobile .fa-solid,.tna-button-group--small .tna-button--icon-only-mobile .fa-solid{width:1.5rem;line-height:1.5rem}.tna-button--small.tna-button--icon-only-mobile svg,.tna-button-group--small .tna-button--icon-only-mobile svg{height:1.2rem;margin:.5rem}}.tna-button--solid-hover:not(.tna-button--plain):hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}.tna-background-accent .tna-button:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-background-accent .tna-button--accent,.tna-background-accent .tna-button--accent:link,.tna-background-accent .tna-button--accent:visited,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:hover{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent:hover{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}}@media(forced-colors: active){.tna-button:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}}/*# sourceMappingURL=button.css.map */
+.tna-button-group{margin-top:2rem}.tna-button-group:first-child{margin-top:0}.tna-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}@media(max-width: 30em){.tna-button-group{flex-direction:column;align-items:stretch}}.tna-button-group--small{gap:0.5rem}.tna-button-group--centred{justify-content:center}.tna-button-group--full{justify-content:stretch}@media(max-width: 48em){.tna-button-group--full{flex-direction:column;align-items:stretch}}.tna-button-group--full .tna-button{margin:0;flex:1}.tna-button{padding:0.25rem 1rem;display:inline-flex;align-items:baseline;justify-content:center;gap:0.75rem;line-height:2rem;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:1.125rem;font-weight:700;background-color:var(--button-background, rgb(1, 1, 1));border:4px var(--button-background, rgb(1, 1, 1)) solid;border-radius:2px}.tna-button,.tna-button:link,.tna-button:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-button:hover{color:var(--button-hover-text, rgb(1, 1, 1));text-decoration:none;background:rgba(0,0,0,0)}.tna-button .fa-solid{display:block}.tna-button svg{height:1.1em;flex-shrink:0;align-self:center;fill:currentColor}.tna-button--plain{font-weight:400;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-radius:.1px}.tna-button--plain,.tna-button--plain:link,.tna-button--plain:visited,.tna-button--plain:hover{color:var(--link, #005fa3)}.tna-button--plain:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-button--accent{background-color:var(--button-accented-background, rgb(140, 150, 148));border-color:var(--button-accented-background, rgb(140, 150, 148))}.tna-button--accent,.tna-button--accent:link,.tna-button--accent:visited{color:var(--button-accented-text, rgb(1, 1, 1))}.tna-button--accent:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-button--icon-right{flex-direction:row-reverse}.tna-button--icon-right:has(.fa-solid){align-items:center}.tna-button--small,.tna-button-group--small .tna-button{padding:0 0.5rem;font-size:0.875rem;line-height:1.5rem}.tna-button--icon-only{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only .fa-solid{width:2.5rem;line-height:2rem;font-size:1.125rem}.tna-button--icon-only svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only,.tna-button-group--small .tna-button--icon-only{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only .fa-solid,.tna-button-group--small .tna-button--icon-only .fa-solid{width:1.5rem;line-height:1.5rem}.tna-button--small.tna-button--icon-only svg,.tna-button-group--small .tna-button--icon-only svg{height:1.2rem;margin:.5rem}@media(max-width: 48em){.tna-button--icon-only-mobile{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only-mobile .fa-solid{width:2.5rem;line-height:2rem;font-size:1.125rem}.tna-button--icon-only-mobile svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only-mobile,.tna-button-group--small .tna-button--icon-only-mobile{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only-mobile .fa-solid,.tna-button-group--small .tna-button--icon-only-mobile .fa-solid{width:1.5rem;line-height:1.5rem}.tna-button--small.tna-button--icon-only-mobile svg,.tna-button-group--small .tna-button--icon-only-mobile svg{height:1.2rem;margin:.5rem}}.tna-button--solid-hover:not(.tna-button--plain):hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}.tna-background-accent .tna-button:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-background-accent .tna-button--accent,.tna-background-accent .tna-button--accent:link,.tna-background-accent .tna-button--accent:visited,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent:hover,.tna-template--dark-theme .tna-background-accent-light .tna-button--accent:hover{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent{background-color:var(--contrast-button-background, rgb(255, 255, 255));border-color:var(--contrast-button-background, rgb(255, 255, 255))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:link,.tna-template--system-theme .tna-background-accent-light .tna-button--accent:visited{color:var(--contrast-button-text, rgb(1, 1, 1))}.tna-template--system-theme .tna-background-accent-light .tna-button--accent:hover{color:var(--contrast-font-dark, rgb(255, 255, 255));background-color:var(--contrast-background, #1e1e1e)}}@media(forced-colors: active){.tna-button:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}}/*# sourceMappingURL=button.css.map */