@nationalarchives/frontend 0.22.0 → 0.23.1

package/nationalarchives/components/gallery/gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/gallery/gallery.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\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};","export class Gallery {\n  constructor($module) {\n    this.$module = $module;\n    this.$itemsContainer =\n      $module && $module.querySelector(\".tna-gallery__items\");\n    this.$items =\n      this.$itemsContainer &&\n      this.$itemsContainer.querySelectorAll(\".tna-gallery__item\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-gallery__navigation\");\n    this.$navigationItems =\n      this.$navigation &&\n      $module.querySelectorAll(\".tna-gallery__navigation-item\");\n    this.$options = $module && $module.querySelector(\".tna-gallery__options\");\n    this.$navigationButtons =\n      $module && $module.querySelector(\".tna-gallery__navigation-buttons\");\n\n    if (\n      !this.$module ||\n      !this.$itemsContainer ||\n      !this.$items ||\n      this.$items.length < 2 ||\n      !this.$navigation ||\n      !this.$navigationItems ||\n      !this.$options ||\n      !this.$navigationButtons\n    ) {\n      return;\n    }\n\n    this.$module.classList.add(\"tna-gallery--interactive\");\n\n    this.$showIndex = this.$options.querySelector('button[value=\"show-index\"]');\n    this.$enterFullscreen = this.$options.querySelector(\n      'button[value=\"enter-fullscreen\"]',\n    );\n    this.$exitFullscreen = this.$options.querySelector(\n      'button[value=\"exit-fullscreen\"]',\n    );\n\n    this.$navigationButtonPrev = this.$navigationButtons.querySelector(\n      \".tna-gallery__navigation-prev\",\n    );\n    this.$navigationButtonNext = this.$navigationButtons.querySelector(\n      \".tna-gallery__navigation-next\",\n    );\n\n    this.$module.addEventListener(\"fullscreenchange\", () =>\n      this.syncFullScreen(),\n    );\n\n    this.setup();\n    this.allowGridIndex = this.$module.dataset[\"showgrid\"] || false;\n    if (this.allowGridIndex) {\n      this.showIndex();\n    } else {\n      this.currentId = this.$items[0].id;\n      this.showItem(this.currentId);\n    }\n  }\n\n  setup() {\n    this.$items.forEach(($item) => {\n      $item.setAttribute(\"hidden\", \"\");\n      $item.setAttribute(\"aria-hidden\", \"true\");\n      $item\n        .querySelector(\".tna-gallery__item-header\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    });\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigationItems.forEach(($item) => {\n      $item.addEventListener(\"click\", () => {\n        this.showItem($item.getAttribute(\"aria-controls\"));\n        this.$itemsContainer.setAttribute(\"tabindex\", \"0\");\n        this.$itemsContainer.focus();\n      });\n    });\n    this.$module.addEventListener(\"keydown\", (e) => {\n      let preventDefaultKeyAction = false;\n      switch (e.key) {\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          this.showPreviousItem();\n          preventDefaultKeyAction = true;\n          break;\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          this.showNextItem();\n          preventDefaultKeyAction = true;\n          break;\n        case \"Home\":\n          this.showFirstItem();\n          preventDefaultKeyAction = true;\n          break;\n        case \"End\":\n          this.showLastItem();\n          preventDefaultKeyAction = true;\n          break;\n      }\n      if (preventDefaultKeyAction) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    });\n    this.$options.removeAttribute(\"hidden\");\n    if (\n      document.fullscreenEnabled &&\n      this.$enterFullscreen &&\n      this.$exitFullscreen\n    ) {\n      this.$enterFullscreen?.addEventListener(\"click\", () =>\n        this.enterFullScreen(),\n      );\n      this.$exitFullscreen?.addEventListener(\"click\", () =>\n        this.exitFullScreen(),\n      );\n      this.$enterFullscreen?.removeAttribute(\"hidden\");\n    }\n    this.$showIndex?.addEventListener(\"click\", () => this.showIndex());\n    this.$navigationButtons?.removeAttribute(\"hidden\");\n    this.$navigationButtonPrev?.addEventListener(\"click\", () => {\n      this.showPreviousItem();\n    });\n    this.$navigationButtonNext?.addEventListener(\"click\", () => {\n      this.showNextItem();\n    });\n\n    this.$liveRegion = document.createElement(\"div\");\n    this.$liveRegion.setAttribute(\"aria-live\", \"polite\");\n    this.$liveRegion.setAttribute(\"aria-atomic\", \"true\");\n    this.$liveRegion.setAttribute(\"class\", \"tna-gallery__item-header\");\n    this.$itemsContainer.prepend(this.$liveRegion);\n    this.$itemsContainer.classList.add(\"tna-gallery__items--hide-item-titles\");\n    this.$itemsContainer.addEventListener(\"blur\", () =>\n      this.$itemsContainer.removeAttribute(\"tabindex\"),\n    );\n  }\n\n  showIndex() {\n    this.showItem(\"\");\n    this.$itemsContainer.classList.add(\"tna-gallery__items--hide-items\");\n    this.$showIndex?.setAttribute(\"hidden\", \"\");\n  }\n\n  showItem(id) {\n    this.$items.forEach(($item) => {\n      if (id && $item.id === id) {\n        $item.removeAttribute(\"hidden\");\n        $item.removeAttribute(\"aria-hidden\");\n      } else {\n        $item.setAttribute(\"hidden\", \"\");\n        $item.setAttribute(\"aria-hidden\", \"true\");\n      }\n    });\n    this.$navigationItems.forEach(($item) => {\n      if (id) {\n        if ($item.getAttribute(\"aria-controls\") === id) {\n          $item.setAttribute(\"aria-current\", \"true\");\n          if (this.isFullScreen()) {\n            $item.scrollIntoView({ block: \"nearest\" });\n          }\n        } else {\n          $item.setAttribute(\"aria-current\", \"false\");\n        }\n      } else {\n        $item.setAttribute(\"aria-current\", \"false\");\n      }\n    });\n    if (this.allowGridIndex) {\n      this.$showIndex?.removeAttribute(\"hidden\");\n    }\n    this.$itemsContainer.classList.remove(\"tna-gallery__items--hide-items\");\n    this.currentId = id;\n    this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;\n  }\n\n  getCurrentItemIndex() {\n    return Array.from(this.$items).findIndex(\n      ($item) => $item.id === this.currentId,\n    );\n  }\n\n  showPreviousItem() {\n    let nextIndexToShow = this.getCurrentItemIndex() - 1;\n    if (nextIndexToShow < 0) {\n      nextIndexToShow = this.$items.length - 1;\n    }\n    this.showItem(this.$items[nextIndexToShow].id);\n  }\n\n  showNextItem() {\n    let nextIndexToShow = this.getCurrentItemIndex() + 1;\n    if (nextIndexToShow >= this.$items.length) {\n      nextIndexToShow = 0;\n    }\n    this.showItem(this.$items[nextIndexToShow].id);\n  }\n\n  showFirstItem() {\n    this.showItem(this.$items[0].id);\n  }\n\n  showLastItem() {\n    this.showItem(this.$items[this.$items.length - 1].id);\n  }\n\n  isFullScreen() {\n    return document.fullscreenElement;\n  }\n\n  enterFullScreen() {\n    this.$module.requestFullscreen();\n    this.syncFullScreen();\n    this.$module.focus();\n  }\n\n  exitFullScreen() {\n    document.exitFullscreen();\n    this.syncFullScreen();\n  }\n\n  syncFullScreen() {\n    if (this.isFullScreen()) {\n      this.$enterFullscreen.setAttribute(\"hidden\", \"\");\n      this.$exitFullscreen.removeAttribute(\"hidden\");\n    } else {\n      this.$exitFullscreen.setAttribute(\"hidden\", \"\");\n      this.$enterFullscreen.removeAttribute(\"hidden\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Gallery","$module","_this","_classCallCheck","this","$itemsContainer","querySelector","$items","querySelectorAll","$navigation","$navigationItems","$options","$navigationButtons","length","classList","add","$showIndex","$enterFullscreen","$exitFullscreen","$navigationButtonPrev","$navigationButtonNext","addEventListener","syncFullScreen","setup","allowGridIndex","dataset","showIndex","currentId","id","showItem","_this$$showIndex","_this$$navigationButt","_this$$navigationButt2","_this$$navigationButt3","_this$$enterFullscree","_this$$exitFullscreen","_this$$enterFullscree2","_this2","forEach","$item","_$item$querySelector","setAttribute","removeAttribute","getAttribute","focus","e","preventDefaultKeyAction","showPreviousItem","showNextItem","showFirstItem","showLastItem","stopPropagation","preventDefault","document","fullscreenEnabled","enterFullScreen","exitFullScreen","$liveRegion","createElement","prepend","_this$$showIndex2","_this$$showIndex3","_this3","isFullScreen","scrollIntoView","block","remove","textContent","concat","getCurrentItemIndex","_this4","Array","from","findIndex","nextIndexToShow","fullscreenElement","requestFullscreen","exitFullscreen"],"sourceRoot":""}
+{"version":3,"file":"components/gallery/gallery.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\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};","export class Gallery {\n  constructor($module) {\n    this.$module = $module;\n    this.$itemsContainer =\n      $module && $module.querySelector(\".tna-gallery__items\");\n    this.$items =\n      this.$itemsContainer &&\n      this.$itemsContainer.querySelectorAll(\".tna-gallery__item\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-gallery__navigation\");\n    this.$navigationItems =\n      this.$navigation &&\n      $module.querySelectorAll(\".tna-gallery__navigation-item\");\n    this.$options = $module && $module.querySelector(\".tna-gallery__options\");\n    this.$navigationButtons =\n      $module && $module.querySelector(\".tna-gallery__navigation-buttons\");\n\n    if (\n      !this.$module ||\n      !this.$itemsContainer ||\n      !this.$items ||\n      this.$items.length < 2 ||\n      !this.$navigation ||\n      !this.$navigationItems ||\n      !this.$options ||\n      !this.$navigationButtons\n    ) {\n      return;\n    }\n\n    this.$module.classList.add(\"tna-gallery--interactive\");\n\n    this.$showIndex = this.$options.querySelector('button[value=\"show-index\"]');\n    this.$enterFullscreen = this.$options.querySelector(\n      'button[value=\"enter-fullscreen\"]',\n    );\n    this.$exitFullscreen = this.$options.querySelector(\n      'button[value=\"exit-fullscreen\"]',\n    );\n\n    this.$navigationButtonPrev = this.$navigationButtons.querySelector(\n      \".tna-gallery__navigation-prev\",\n    );\n    this.$navigationButtonNext = this.$navigationButtons.querySelector(\n      \".tna-gallery__navigation-next\",\n    );\n\n    this.$module.addEventListener(\"fullscreenchange\", () =>\n      this.syncFullScreen(),\n    );\n\n    this.setup();\n    this.allowGridIndex = this.$module.dataset[\"showgrid\"] || false;\n    if (this.allowGridIndex) {\n      this.showIndex();\n    } else {\n      this.currentId = this.$items[0].id;\n      this.showItem(this.currentId);\n    }\n  }\n\n  setup() {\n    this.$items.forEach(($item) => {\n      $item.setAttribute(\"hidden\", \"\");\n      $item.setAttribute(\"aria-hidden\", \"true\");\n      $item\n        .querySelector(\".tna-gallery__item-header\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    });\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigationItems.forEach(($item) => {\n      $item.addEventListener(\"click\", () => {\n        this.showItem($item.getAttribute(\"aria-controls\"));\n        this.$itemsContainer.setAttribute(\"tabindex\", \"0\");\n        this.$itemsContainer.focus();\n      });\n    });\n    this.$module.addEventListener(\"keydown\", (e) => {\n      let preventDefaultKeyAction = false;\n      switch (e.key) {\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          this.showPreviousItem();\n          preventDefaultKeyAction = true;\n          break;\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          this.showNextItem();\n          preventDefaultKeyAction = true;\n          break;\n        case \"Home\":\n          this.showFirstItem();\n          preventDefaultKeyAction = true;\n          break;\n        case \"End\":\n          this.showLastItem();\n          preventDefaultKeyAction = true;\n          break;\n      }\n      if (preventDefaultKeyAction) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    });\n    this.$options.removeAttribute(\"hidden\");\n    if (\n      document.fullscreenEnabled &&\n      this.$enterFullscreen &&\n      this.$exitFullscreen\n    ) {\n      this.$enterFullscreen?.addEventListener(\"click\", () =>\n        this.enterFullScreen(),\n      );\n      this.$exitFullscreen?.addEventListener(\"click\", () =>\n        this.exitFullScreen(),\n      );\n      this.$enterFullscreen?.removeAttribute(\"hidden\");\n    }\n    this.$showIndex?.addEventListener(\"click\", () => this.showIndex());\n    this.$navigationButtons?.removeAttribute(\"hidden\");\n    this.$navigationButtonPrev?.addEventListener(\"click\", () => {\n      this.showPreviousItem();\n    });\n    this.$navigationButtonNext?.addEventListener(\"click\", () => {\n      this.showNextItem();\n    });\n\n    this.$liveRegion = document.createElement(\"div\");\n    this.$liveRegion.setAttribute(\"aria-live\", \"polite\");\n    this.$liveRegion.setAttribute(\"aria-atomic\", \"true\");\n    this.$liveRegion.setAttribute(\"class\", \"tna-gallery__item-header\");\n    this.$itemsContainer.prepend(this.$liveRegion);\n    this.$itemsContainer.classList.add(\"tna-gallery__items--hide-item-titles\");\n    this.$itemsContainer.addEventListener(\"blur\", () =>\n      this.$itemsContainer.removeAttribute(\"tabindex\"),\n    );\n  }\n\n  showIndex() {\n    this.showItem(\"\");\n    this.$itemsContainer.classList.add(\"tna-gallery__items--hide-items\");\n    this.$showIndex?.setAttribute(\"hidden\", \"\");\n  }\n\n  showItem(id) {\n    this.$items.forEach(($item) => {\n      if (id && $item.id === id) {\n        $item.removeAttribute(\"hidden\");\n        $item.removeAttribute(\"aria-hidden\");\n      } else {\n        $item.setAttribute(\"hidden\", \"\");\n        $item.setAttribute(\"aria-hidden\", \"true\");\n      }\n    });\n    this.$navigationItems.forEach(($item) => {\n      if (id) {\n        if ($item.getAttribute(\"aria-controls\") === id) {\n          $item.setAttribute(\"aria-current\", \"true\");\n          if (this.isFullScreen()) {\n            $item.scrollIntoView({ block: \"nearest\" });\n          }\n        } else {\n          $item.setAttribute(\"aria-current\", \"false\");\n        }\n      } else {\n        $item.setAttribute(\"aria-current\", \"false\");\n      }\n    });\n    if (this.allowGridIndex) {\n      this.$showIndex?.removeAttribute(\"hidden\");\n    }\n    this.$itemsContainer.classList.remove(\"tna-gallery__items--hide-items\");\n    this.currentId = id;\n    this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;\n  }\n\n  getCurrentItemIndex() {\n    return Array.from(this.$items).findIndex(\n      ($item) => $item.id === this.currentId,\n    );\n  }\n\n  showPreviousItem() {\n    let nextIndexToShow = this.getCurrentItemIndex() - 1;\n    if (nextIndexToShow < 0) {\n      nextIndexToShow = this.$items.length - 1;\n    }\n    this.showItem(this.$items[nextIndexToShow].id);\n  }\n\n  showNextItem() {\n    let nextIndexToShow = this.getCurrentItemIndex() + 1;\n    if (nextIndexToShow >= this.$items.length) {\n      nextIndexToShow = 0;\n    }\n    this.showItem(this.$items[nextIndexToShow].id);\n  }\n\n  showFirstItem() {\n    this.showItem(this.$items[0].id);\n  }\n\n  showLastItem() {\n    this.showItem(this.$items[this.$items.length - 1].id);\n  }\n\n  isFullScreen() {\n    return document.fullscreenElement;\n  }\n\n  enterFullScreen() {\n    this.$module.requestFullscreen();\n    this.syncFullScreen();\n    this.$module.focus();\n  }\n\n  exitFullScreen() {\n    document.exitFullscreen();\n    this.syncFullScreen();\n  }\n\n  syncFullScreen() {\n    if (this.isFullScreen()) {\n      this.$enterFullscreen.setAttribute(\"hidden\", \"\");\n      this.$exitFullscreen.removeAttribute(\"hidden\");\n    } else {\n      this.$exitFullscreen.setAttribute(\"hidden\", \"\");\n      this.$enterFullscreen.removeAttribute(\"hidden\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Gallery","$module","_this","_classCallCheck","this","$itemsContainer","querySelector","$items","querySelectorAll","$navigation","$navigationItems","$options","$navigationButtons","length","classList","add","$showIndex","$enterFullscreen","$exitFullscreen","$navigationButtonPrev","$navigationButtonNext","addEventListener","syncFullScreen","setup","allowGridIndex","dataset","showIndex","currentId","id","showItem","_this$$showIndex","_this$$navigationButt","_this$$navigationButt2","_this$$navigationButt3","_this$$enterFullscree","_this$$exitFullscreen","_this$$enterFullscree2","_this2","forEach","$item","_$item$querySelector","setAttribute","removeAttribute","getAttribute","focus","e","preventDefaultKeyAction","showPreviousItem","showNextItem","showFirstItem","showLastItem","stopPropagation","preventDefault","document","fullscreenEnabled","enterFullScreen","exitFullScreen","$liveRegion","createElement","prepend","_this$$showIndex2","_this$$showIndex3","_this3","isFullScreen","scrollIntoView","block","remove","textContent","concat","getCurrentItemIndex","_this4","Array","from","findIndex","nextIndexToShow","fullscreenElement","requestFullscreen","exitFullscreen"],"sourceRoot":""}

package/nationalarchives/components/gallery/gallery.scss

@@ -338,11 +338,11 @@
 
   &--bounded {
     @include borders.rounded-border;
+    @include colour.tint;
   }
 
-  &--bounded,
   &:fullscreen {
-    @include colour.tint;
+    @include colour.contrast;
   }
 
   &--bounded &__header,

package/nationalarchives/components/global-header/global-header.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,o(n.key),n)}}function o(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{GlobalHeader:()=>a});var a=function(){return t=function t(e){var i=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-global-header__navigation-button"),this.$navigation=e&&e.querySelector(".tna-global-header__navigation-wrapper"),this.$topNavigation=e&&e.querySelector(".tna-global-header__top-navigation-wrapper"),this.$links=e&&(this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']")||this.$topNavigation&&this.$topNavigation.querySelectorAll("[tabindex='0']")),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&(this.$navigation||this.$topNavigation)&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return i.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return i.syncState()})):this.mql.addListener((function(){return i.syncState()})),this.$module.addEventListener("keyup",(function(t){"Escape"===t.code&&i.mql.matches&&i.menuOpened&&(i.menuOpened=!1,i.syncState(),i.$toggleButton.focus())})))},(e=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"hide",value:function(){this.$navigation&&(this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true")),this.$topNavigation&&(this.$topNavigation.hidden=!0,this.$topNavigation.setAttribute("aria-hidden","true")),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-global-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}},{key:"show",value:function(){this.$navigation&&(this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false")),this.$topNavigation&&(this.$topNavigation.hidden=!1,this.$topNavigation.setAttribute("aria-hidden","false")),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-global-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}}])&&n(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,o(n.key),n)}}function o(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{GlobalHeader:()=>a});var a=function(){return t=function t(e){var i=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-global-header__navigation-button"),this.$navigation=e&&e.querySelector(".tna-global-header__navigation-wrapper"),this.$topNavigation=e&&e.querySelector(".tna-global-header__top-navigation-wrapper"),this.$links=e&&(this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']")||this.$topNavigation&&this.$topNavigation.querySelectorAll("[tabindex='0']")),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&(this.$navigation||this.$topNavigation)&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",function(){return i.handleToggleNavigation()}),"addEventListener"in this.mql?this.mql.addEventListener("change",function(){return i.syncState()}):this.mql.addListener(function(){return i.syncState()}),this.$module.addEventListener("keyup",function(t){"Escape"===t.code&&i.mql.matches&&i.menuOpened&&(i.menuOpened=!1,i.syncState(),i.$toggleButton.focus())}))},(e=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"hide",value:function(){this.$navigation&&(this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true")),this.$topNavigation&&(this.$topNavigation.hidden=!0,this.$topNavigation.setAttribute("aria-hidden","true")),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-global-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}},{key:"show",value:function(){this.$navigation&&(this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false")),this.$topNavigation&&(this.$topNavigation.hidden=!1,this.$topNavigation.setAttribute("aria-hidden","false")),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-global-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}}])&&n(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})());
 //# sourceMappingURL=global-header.js.map

package/nationalarchives/components/global-header/global-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/global-header/global-header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\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};","export class GlobalHeader {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-global-header__navigation-button\");\n    this.$navigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__navigation-wrapper\");\n    this.$topNavigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n    this.$links =\n      $module &&\n      ((this.$navigation &&\n        this.$navigation.querySelectorAll(\"[tabindex='0']\")) ||\n        (this.$topNavigation &&\n          this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n    if (\n      !this.$module ||\n      !this.$toggleButton ||\n      (!this.$navigation && !this.$topNavigation)\n    ) {\n      return;\n    }\n\n    this.$toggleButton.removeAttribute(\"hidden\");\n    this.syncState();\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n    } else {\n      this.mql.addListener(() => this.syncState());\n    }\n\n    this.$module.addEventListener(\"keyup\", (e) => {\n      if (e.code === \"Escape\" && this.mql.matches) {\n        if (this.menuOpened) {\n          this.menuOpened = false;\n          this.syncState();\n          this.$toggleButton.focus();\n        }\n      }\n    });\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.show();\n      } else {\n        this.hide();\n      }\n    } else {\n      this.show();\n    }\n  }\n\n  hide() {\n    if (this.$navigation) {\n      this.$navigation.hidden = true;\n      this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.hidden = true;\n      this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n    }\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-global-header__navigation-button--opened\",\n    );\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n\n  show() {\n    if (this.$navigation) {\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.hidden = false;\n      this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n    }\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\n      \"tna-global-header__navigation-button--opened\",\n    );\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"0\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","GlobalHeader","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","matches","focus","show","hide","hidden","setAttribute","classList","remove","i","length","add"],"sourceRoot":""}
+{"version":3,"file":"components/global-header/global-header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\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};","export class GlobalHeader {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-global-header__navigation-button\");\n    this.$navigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__navigation-wrapper\");\n    this.$topNavigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n    this.$links =\n      $module &&\n      ((this.$navigation &&\n        this.$navigation.querySelectorAll(\"[tabindex='0']\")) ||\n        (this.$topNavigation &&\n          this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n    if (\n      !this.$module ||\n      !this.$toggleButton ||\n      (!this.$navigation && !this.$topNavigation)\n    ) {\n      return;\n    }\n\n    this.$toggleButton.removeAttribute(\"hidden\");\n    this.syncState();\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n    } else {\n      this.mql.addListener(() => this.syncState());\n    }\n\n    this.$module.addEventListener(\"keyup\", (e) => {\n      if (e.code === \"Escape\" && this.mql.matches) {\n        if (this.menuOpened) {\n          this.menuOpened = false;\n          this.syncState();\n          this.$toggleButton.focus();\n        }\n      }\n    });\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.show();\n      } else {\n        this.hide();\n      }\n    } else {\n      this.show();\n    }\n  }\n\n  hide() {\n    if (this.$navigation) {\n      this.$navigation.hidden = true;\n      this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.hidden = true;\n      this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n    }\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-global-header__navigation-button--opened\",\n    );\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n\n  show() {\n    if (this.$navigation) {\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.hidden = false;\n      this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n    }\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\n      \"tna-global-header__navigation-button--opened\",\n    );\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"0\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","GlobalHeader","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","matches","focus","show","hide","hidden","setAttribute","classList","remove","i","length","add"],"sourceRoot":""}

package/nationalarchives/components/header/header.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return n="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},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.r(e),t.d(e,{Header:()=>a});var a=function(){return t=function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-header__navigation-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return n.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return n.syncState()})):this.mql.addListener((function(){return n.syncState()})),this.$module.addEventListener("keyup",(function(t){"Escape"===t.code&&n.menuOpened&&n.mql.matches&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))},(e=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return n="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},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.r(e),t.d(e,{Header:()=>a});var a=function(){return t=function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-header__navigation-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",function(){return n.handleToggleNavigation()}),"addEventListener"in this.mql?this.mql.addEventListener("change",function(){return n.syncState()}):this.mql.addListener(function(){return n.syncState()}),this.$module.addEventListener("keyup",function(t){"Escape"===t.code&&n.menuOpened&&n.mql.matches&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())}))},(e=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})());
 //# sourceMappingURL=header.js.map

package/nationalarchives/components/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/header/header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\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};","export class Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-header__navigation-button\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n    if (!this.$module || !this.$toggleButton || !this.$navigation) {\n      return;\n    }\n\n    this.$toggleButton.removeAttribute(\"hidden\");\n    this.syncState();\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n    } else {\n      this.mql.addListener(() => this.syncState());\n    }\n\n    this.$module.addEventListener(\"keyup\", (e) => {\n      if (e.code === \"Escape\") {\n        if (this.menuOpened && this.mql.matches) {\n          this.menuOpened = false;\n          this.syncState();\n          this.$toggleButton.focus();\n        }\n      }\n    });\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.show();\n      } else {\n        this.hide();\n      }\n    } else {\n      this.show();\n    }\n  }\n\n  show() {\n    this.$navigation.classList.add(\"tna-header__navigation--open\");\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\"tna-header__navigation-button--opened\");\n\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"0\");\n    }\n  }\n\n  hide() {\n    this.$navigation.classList.remove(\"tna-header__navigation--open\");\n    this.$navigation.hidden = true;\n    this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-header__navigation-button--opened\",\n    );\n\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","matches","focus","show","hide","classList","add","setAttribute","i","length","remove","hidden"],"sourceRoot":""}
+{"version":3,"file":"components/header/header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\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};","export class Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-header__navigation-button\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n    if (!this.$module || !this.$toggleButton || !this.$navigation) {\n      return;\n    }\n\n    this.$toggleButton.removeAttribute(\"hidden\");\n    this.syncState();\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n    } else {\n      this.mql.addListener(() => this.syncState());\n    }\n\n    this.$module.addEventListener(\"keyup\", (e) => {\n      if (e.code === \"Escape\") {\n        if (this.menuOpened && this.mql.matches) {\n          this.menuOpened = false;\n          this.syncState();\n          this.$toggleButton.focus();\n        }\n      }\n    });\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.show();\n      } else {\n        this.hide();\n      }\n    } else {\n      this.show();\n    }\n  }\n\n  show() {\n    this.$navigation.classList.add(\"tna-header__navigation--open\");\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\"tna-header__navigation-button--opened\");\n\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"0\");\n    }\n  }\n\n  hide() {\n    this.$navigation.classList.remove(\"tna-header__navigation--open\");\n    this.$navigation.hidden = true;\n    this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-header__navigation-button--opened\",\n    );\n\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","matches","focus","show","hide","classList","add","setAttribute","i","length","remove","hidden"],"sourceRoot":""}

package/nationalarchives/components/hero/fixtures.json

@@ -208,7 +208,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" aria-label=\"Additional information\nabout the featured image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></header>"
     },
     {
       "name": "image with caption",
@@ -219,7 +219,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" aria-label=\"Additional information\nabout the featured image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with alternative image sources",
@@ -236,7 +236,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" aria-label=\"Additional information\nabout the featured image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with alternative image sources with media queries",
@@ -254,7 +254,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" aria-label=\"Additional information\nabout the featured image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with alternative image sources with different width/heights",
@@ -273,7 +273,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" aria-label=\"Additional information\nabout the featured image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with actions",
@@ -315,7 +315,7 @@
         "imageCaption": "An interesting photo by a famous photographer ©2023",
         "classes": "hero__test-class"
       },
-      "html": "<div class=\"tna-hero hero__test-class\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" aria-label=\"Additional information\nabout the featured image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero hero__test-class\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with attributes",
@@ -329,7 +329,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-hero\" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" aria-label=\"Additional information\nabout the featured image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero\" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     }
   ]
 }

package/nationalarchives/components/hero/hero.css

@@ -1 +1 @@
-.tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover,.tna-hero__details-summary:focus-visible{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem;border-bottom-left-radius:4px}.tna-hero__information p+p{margin-top:8px}.tna-hero__image{position:absolute;inset:0;z-index:1;background:linear-gradient(-45deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));background-size:500% 500%;background-position:0 50%;animation:image-loader-background ease-in-out 1.2s infinite}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after,.tna-hero__details[open] .tna-hero__details-summary:focus-visible::before,.tna-hero__details[open] .tna-hero__details-summary:focus-visible::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4);border-radius:4px}.tna-hero--left-border .tna-hero__content-inner{border-left:8px var(--accent-border, rgb(140, 150, 148)) solid}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0;border-left:none}@media(min-width: 48.0625em){.tna-hero--shift{margin-bottom:48px}.tna-hero--shift.tna-hero--narrow{margin-bottom:32px}}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0;border-bottom-left-radius:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0;border-left:none}.tna-hero__body{margin-top:16px}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}/*# sourceMappingURL=hero.css.map */
+.tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{position:absolute;top:8px;right:8px;z-index:2}.tna-hero__details-summary:hover,.tna-hero__details-summary:focus{color:var(--font-dark, rgb(1, 1, 1)) !important;background-color:var(--background, #f4f4f4) !important}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem;border-bottom-left-radius:4px}.tna-hero__information p+p{margin-top:8px}.tna-hero__image{position:absolute;inset:0;z-index:1;background:linear-gradient(-45deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));background-size:500% 500%;background-position:0 50%;animation:image-loader-background ease-in-out 1.2s infinite}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary{width:2rem;height:2rem;padding:0;font-size:0;line-height:2rem;text-align:center;border:none}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after,.tna-hero__details[open] .tna-hero__details-summary:focus-visible::before,.tna-hero__details[open] .tna-hero__details-summary:focus-visible::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4);border-radius:4px}.tna-hero--left-border .tna-hero__content-inner{border-left:8px var(--accent-border, rgb(140, 150, 148)) solid}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0;border-left:none}@media(min-width: 48.0625em){.tna-hero--shift{margin-bottom:48px}.tna-hero--shift.tna-hero--narrow{margin-bottom:32px}}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__details-summary{top:4px;right:4px}.tna-hero__details[open] .tna-hero__details-summary{top:8px;right:8px}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0;border-bottom-left-radius:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0;border-left:none}.tna-hero__body{margin-top:16px}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}/*# sourceMappingURL=hero.css.map */

package/nationalarchives/components/hero/hero.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_borders.scss"],"names":[],"mappings":"AA4OA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA/JA,4CAJA,gCCJA,wBDkLF,4EAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxLF,4CAJA,iCAgOF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEA1OA,4CAJA,gCEnEA,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,UAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,QACA,UACA,UAEA,YACA,mBACA,kBAEA,gBAEA,mBAEA,eFgDE,4CE1CF,0EFWF,iCAIA,2CEPA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UC7FF,eDmGE,0BEvGoB,IFyGpB,2BACE,eAIJ,iBACE,kBACA,QACA,UF0ZA,wGAMA,0BACA,0BAEA,4DE/ZA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SFnDJ,gDEwDE,4DACE,8CAGF,2DACE,+CAKA,sRAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aF1FF,4CKvFA,cDDsB,IFyLtB,gDFhFI,+DE6FJ,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UAEA,iBDpKF,6BCwKE,iBACE,mBAGF,kCACE,oBAIJ,0CACE,kBACA,SAMF,oCACE,2BACA,iBACA,oBD1KF,wBC8KE,4BACE,gBACA,UAEA,sBAGF,mBACE,QAYF,+DAEE,WACA,eAEA,OAEA,4BAGF,iBACE,WAEA,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAEA,iBAMF,gBACE,gBAMF,oCACE,WACA,mBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,0CACE,iBACA","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\", $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\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\n      \"form-error-border\",\n      \"focus-outline\"\n    );\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%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@mixin image-loader-background {\n  @if features.$image-loader-animations {\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}\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:math\";\n\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$padding-units-top: 10 !default;\n$padding-units-bottom: 2 !default;\n$padding-units-narrow: 3 !default;\n$shift-units: 5 !default;\n$layer-padding-units: 3 !default;\n$layer-shift-units: 2 !default;\n\n.tna-hero {\n  &__figure {\n    min-height: clamp(\n      #{spacing.space($padding-units-top + $padding-units-bottom)},\n      calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),\n      50rem\n    );\n    margin: 0;\n    padding-top: spacing.space($padding-units-top);\n    padding-bottom: spacing.space($padding-units-bottom);\n\n    display: flex;\n    align-items: flex-end;\n\n    position: relative;\n  }\n\n  &__caption {\n    width: 100%;\n\n    overflow: visible;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 5;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    width: 1.5rem;\n    height: 1.5rem;\n\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    font-size: 0;\n    line-height: 1.5rem;\n    text-align: center;\n\n    list-style: none;\n\n    border-radius: 100%;\n\n    cursor: pointer;\n\n    @include colour.accent;\n\n    @include colour.colour-border(\"background\", 4px);\n\n    &:hover,\n    &:focus-visible {\n      @include colour.colour-font(\"background\");\n\n      @include colour.colour-background(\"font-base\");\n    }\n  }\n\n  &__details-summary-icon {\n    font-size: 1.25rem;\n    font-weight: 700;\n    font-style: normal;\n    text-transform: lowercase;\n  }\n\n  &__information {\n    width: 45rem;\n    max-width: 75vw;\n    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n      spacing.space(1);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n\n    @include colour.contrast;\n\n    @include typography.font-size(16);\n\n    border-bottom-left-radius: bordersVars.$rounded-border-radius;\n\n    p + p {\n      margin-top: spacing.space(0.5);\n    }\n  }\n\n  &__image {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    @include colour.image-loader-background;\n\n    img {\n      width: 100%;\n      height: 100%;\n\n      object-fit: cover;\n    }\n  }\n\n  &__details[open] &__details-summary {\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 1.5rem;\n      height: 0.125rem;\n\n      display: block;\n\n      position: absolute;\n      top: 50%;\n      left: 50%;\n\n      @include colour.colour-background(\"font-dark\");\n    }\n\n    &::before {\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    &::after {\n      transform: translate(-50%, -50%) rotate(-45deg);\n    }\n\n    &:hover,\n    &:focus-visible {\n      &::before,\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    &-icon {\n      font-size: 0;\n    }\n  }\n\n  &__inner {\n    position: relative;\n    z-index: 4;\n  }\n\n  &:not(.tna-background-accent, .tna-background-tint) &__inner {\n    @include colour.contrast-on-mobile;\n  }\n\n  &__content {\n  }\n\n  &__content-inner {\n    padding: spacing.space(2);\n\n    @include colour.colour-background(\"background\");\n\n    @include borders.rounded-border;\n  }\n\n  &--left-border &__content-inner {\n    @include colour.thick-keyline-accent(left, true);\n  }\n\n  &__heading {\n  }\n\n  &__body {\n  }\n\n  &--split {\n  }\n\n  &--split &__figure {\n    min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);\n    padding-top: spacing.space(2);\n    padding-bottom: spacing.space(2);\n\n    align-items: center;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__information {\n    max-width: 50%;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__image {\n    left: 50%;\n  }\n\n  &--split &__content {\n    width: 50%;\n    padding-right: grid.gutter-width();\n  }\n\n  &--split &__content-inner {\n    padding: 0;\n\n    border-left: none;\n  }\n\n  @include media.on-larger-than-mobile {\n    &--shift {\n      margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n    }\n\n    &--shift#{&}--narrow {\n      margin-bottom: spacing.space($shift-units - $padding-units-narrow);\n    }\n  }\n\n  &--shift &__content-inner {\n    position: relative;\n    top: spacing.space($shift-units);\n  }\n\n  &--narrow {\n  }\n\n  &--narrow &__figure {\n    min-height: max(#{spacing.space($padding-units-narrow * 2)}, 20rem);\n    padding-top: spacing.space($padding-units-narrow);\n    padding-bottom: spacing.space($padding-units-narrow);\n  }\n\n  @include media.on-mobile {\n    & &__figure {\n      min-height: auto;\n      padding: 0;\n\n      flex-direction: column;\n    }\n\n    &__caption {\n      order: 2;\n    }\n\n    &__details {\n    }\n\n    &__details-summary {\n    }\n\n    &__details-summary-icon {\n    }\n\n    &__information,\n    &--split &__information {\n      width: auto;\n      max-width: none;\n\n      left: 0;\n\n      border-bottom-left-radius: 0;\n    }\n\n    &__image {\n      width: 100%;\n\n      position: static;\n\n      order: 1;\n\n      img {\n        height: auto;\n      }\n    }\n\n    &__inner {\n      order: 3;\n    }\n\n    &__content {\n    }\n\n    &__content-inner {\n      padding-right: 0;\n      padding-left: 0;\n\n      border-left: none;\n    }\n\n    &__heading {\n    }\n\n    &__body {\n      margin-top: spacing.space(1);\n    }\n\n    &--shift {\n    }\n\n    &--split &__content {\n      width: 100%;\n      padding-right: grid.gutter-width-half();\n    }\n\n    &--shift &__content-inner {\n      position: static;\n    }\n\n    &--split &__figure {\n      min-height: auto;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    &--split &__content-inner {\n      padding-top: spacing.space(2);\n      padding-bottom: spacing.space(2);\n    }\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","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 4px !default;\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n  border-radius: borders.$rounded-border-radius;\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_borders.scss"],"names":[],"mappings":"AA4OA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA/JA,4CAJA,gCCJA,wBDkLF,4EAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxLF,4CAJA,iCEnEA,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,UAGF,mBACE,WAEA,iBAGF,2BACE,kBACA,QACA,UACA,UAEA,kEF4BF,gDAIA,uDErBA,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCxEF,eD8EE,0BElFoB,IFoFpB,2BACE,eAIJ,iBACE,kBACA,QACA,UF+aA,wGAMA,0BACA,0BAEA,4DEpbA,qBACE,WACA,YAEA,iBAIJ,oDACE,WACA,YACA,UAEA,YACA,iBACA,kBAEA,YAIA,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SFxCJ,gDE6CE,4DACE,8CAGF,2DACE,+CAKA,sRAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aF/EF,4CKvFA,cDDsB,IF8KtB,gDFrEI,+DEkFJ,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UAEA,iBDzJF,6BC6JE,iBACE,mBAGF,kCACE,oBAIJ,0CACE,kBACA,SAMF,oCACE,2BACA,iBACA,oBD/JF,wBCmKE,4BACE,gBACA,UAEA,sBAGF,mBACE,QAMF,2BACE,QACA,UAGF,oDACE,QACA,UAMF,+DAEE,WACA,eAEA,OAEA,4BAGF,iBACE,WAEA,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAEA,iBAMF,gBACE,gBAMF,oCACE,WACA,mBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,0CACE,iBACA","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\", $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\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\n      \"form-error-border\",\n      \"focus-outline\"\n    );\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%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@mixin image-loader-background {\n  @if features.$image-loader-animations {\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}\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:math\";\n\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$padding-units-top: 10 !default;\n$padding-units-bottom: 2 !default;\n$padding-units-narrow: 3 !default;\n$shift-units: 5 !default;\n$layer-padding-units: 3 !default;\n$layer-shift-units: 2 !default;\n\n.tna-hero {\n  &__figure {\n    min-height: clamp(\n      #{spacing.space($padding-units-top + $padding-units-bottom)},\n      calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),\n      50rem\n    );\n    margin: 0;\n    padding-top: spacing.space($padding-units-top);\n    padding-bottom: spacing.space($padding-units-bottom);\n\n    display: flex;\n    align-items: flex-end;\n\n    position: relative;\n  }\n\n  &__caption {\n    width: 100%;\n\n    overflow: visible;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 5;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    &:hover,\n    &:focus {\n      @include colour.colour-font(\"font-dark\", true);\n\n      @include colour.colour-background(\"background\", true);\n    }\n  }\n\n  &__details-summary-icon {\n  }\n\n  &__information {\n    width: 45rem;\n    max-width: 75vw;\n    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n      spacing.space(1);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n\n    @include colour.contrast;\n\n    @include typography.font-size(16);\n\n    border-bottom-left-radius: bordersVars.$rounded-border-radius;\n\n    p + p {\n      margin-top: spacing.space(0.5);\n    }\n  }\n\n  &__image {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    @include colour.image-loader-background;\n\n    img {\n      width: 100%;\n      height: 100%;\n\n      object-fit: cover;\n    }\n  }\n\n  &__details[open] &__details-summary {\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n\n    font-size: 0;\n    line-height: 2rem;\n    text-align: center;\n\n    border: none;\n\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 1.5rem;\n      height: 0.125rem;\n\n      display: block;\n\n      position: absolute;\n      top: 50%;\n      left: 50%;\n\n      @include colour.colour-background(\"font-dark\");\n    }\n\n    &::before {\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    &::after {\n      transform: translate(-50%, -50%) rotate(-45deg);\n    }\n\n    &:hover,\n    &:focus-visible {\n      &::before,\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    &-icon {\n      font-size: 0;\n    }\n  }\n\n  &__inner {\n    position: relative;\n    z-index: 4;\n  }\n\n  &:not(.tna-background-accent, .tna-background-tint) &__inner {\n    @include colour.contrast-on-mobile;\n  }\n\n  &__content {\n  }\n\n  &__content-inner {\n    padding: spacing.space(2);\n\n    @include colour.colour-background(\"background\");\n\n    @include borders.rounded-border;\n  }\n\n  &--left-border &__content-inner {\n    @include colour.thick-keyline-accent(left, true);\n  }\n\n  &__heading {\n  }\n\n  &__body {\n  }\n\n  &--split {\n  }\n\n  &--split &__figure {\n    min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);\n    padding-top: spacing.space(2);\n    padding-bottom: spacing.space(2);\n\n    align-items: center;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__information {\n    max-width: 50%;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__image {\n    left: 50%;\n  }\n\n  &--split &__content {\n    width: 50%;\n    padding-right: grid.gutter-width();\n  }\n\n  &--split &__content-inner {\n    padding: 0;\n\n    border-left: none;\n  }\n\n  @include media.on-larger-than-mobile {\n    &--shift {\n      margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n    }\n\n    &--shift#{&}--narrow {\n      margin-bottom: spacing.space($shift-units - $padding-units-narrow);\n    }\n  }\n\n  &--shift &__content-inner {\n    position: relative;\n    top: spacing.space($shift-units);\n  }\n\n  &--narrow {\n  }\n\n  &--narrow &__figure {\n    min-height: max(#{spacing.space($padding-units-narrow * 2)}, 20rem);\n    padding-top: spacing.space($padding-units-narrow);\n    padding-bottom: spacing.space($padding-units-narrow);\n  }\n\n  @include media.on-mobile {\n    & &__figure {\n      min-height: auto;\n      padding: 0;\n\n      flex-direction: column;\n    }\n\n    &__caption {\n      order: 2;\n    }\n\n    &__details {\n    }\n\n    &__details-summary {\n      top: spacing.space(0.25);\n      right: spacing.space(0.25);\n    }\n\n    &__details[open] &__details-summary {\n      top: spacing.space(0.5);\n      right: spacing.space(0.5);\n    }\n\n    &__details-summary-icon {\n    }\n\n    &__information,\n    &--split &__information {\n      width: auto;\n      max-width: none;\n\n      left: 0;\n\n      border-bottom-left-radius: 0;\n    }\n\n    &__image {\n      width: 100%;\n\n      position: static;\n\n      order: 1;\n\n      img {\n        height: auto;\n      }\n    }\n\n    &__inner {\n      order: 3;\n    }\n\n    &__content {\n    }\n\n    &__content-inner {\n      padding-right: 0;\n      padding-left: 0;\n\n      border-left: none;\n    }\n\n    &__heading {\n    }\n\n    &__body {\n      margin-top: spacing.space(1);\n    }\n\n    &--shift {\n    }\n\n    &--split &__content {\n      width: 100%;\n      padding-right: grid.gutter-width-half();\n    }\n\n    &--shift &__content-inner {\n      position: static;\n    }\n\n    &--split &__figure {\n      min-height: auto;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    &--split &__content-inner {\n      padding-top: spacing.space(2);\n      padding-bottom: spacing.space(2);\n    }\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","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 4px !default;\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n  border-radius: borders.$rounded-border-radius;\n}\n"]}

package/nationalarchives/components/hero/hero.scss

@@ -51,41 +51,20 @@ $layer-shift-units: 2 !default;
   }
 
   &__details-summary {
-    width: 1.5rem;
-    height: 1.5rem;
-
     position: absolute;
     top: spacing.space(0.5);
     right: spacing.space(0.5);
     z-index: 2;
 
-    font-size: 0;
-    line-height: 1.5rem;
-    text-align: center;
-
-    list-style: none;
-
-    border-radius: 100%;
-
-    cursor: pointer;
-
-    @include colour.accent;
-
-    @include colour.colour-border("background", 4px);
-
     &:hover,
-    &:focus-visible {
-      @include colour.colour-font("background");
+    &:focus {
+      @include colour.colour-font("font-dark", true);
 
-      @include colour.colour-background("font-base");
+      @include colour.colour-background("background", true);
     }
   }
 
   &__details-summary-icon {
-    font-size: 1.25rem;
-    font-weight: 700;
-    font-style: normal;
-    text-transform: lowercase;
   }
 
   &__information {
@@ -126,6 +105,16 @@ $layer-shift-units: 2 !default;
   }
 
   &__details[open] &__details-summary {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+
+    font-size: 0;
+    line-height: 2rem;
+    text-align: center;
+
+    border: none;
+
     @include colour.contrast;
 
     &::before,
@@ -269,6 +258,13 @@ $layer-shift-units: 2 !default;
     }
 
     &__details-summary {
+      top: spacing.space(0.25);
+      right: spacing.space(0.25);
+    }
+
+    &__details[open] &__details-summary {
+      top: spacing.space(0.5);
+      right: spacing.space(0.5);
     }
 
     &__details-summary-icon {

package/nationalarchives/components/hero/template.njk

@@ -76,9 +76,9 @@
     {%- if params.imageCaption %}
     <figcaption class="tna-hero__caption">
       <details class="tna-hero__details">
-        <summary class="tna-hero__details-summary" aria-label="Additional information
-about the featured image">
-          About this <span class="tna-hero__details-summary-icon">i</span>mage
+        <summary class="tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile" aria-label="Additional information about this image">
+          <i class="fa-solid fa-circle-info tna-hero__details-summary-icon" aria-hidden="true"></i>
+          About this image
         </summary>
         <div class="tna-hero__information">{{ params.imageCaption | safe }}</div>
       </details>