@nationalarchives/frontend 0.2.6 → 0.2.8

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

@@ -1 +1 @@
-{"version":3,"file":"components/tabs/tabs.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,g6CCLvD,IAAMC,EAAI,WAkGd,O,EAjGD,SAAAA,EAAYC,GAAS,IAAAC,EAAA,KASnB,G,4FATmBC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,SAAWJ,GAAWA,EAAQK,cAAc,mBACjDF,KAAKG,kBACHN,GACAG,KAAKC,UACLJ,EAAQO,iBAAiB,6BAC3BJ,KAAKK,UAAYR,GAAWA,EAAQO,iBAAiB,mBAGlDJ,KAAKH,SACLG,KAAKC,UACLD,KAAKG,mBACLH,KAAKK,WACNL,KAAKG,kBAAkBG,SAAWN,KAAKK,UAAUC,OALnD,CAUAN,KAAKO,OAASP,KAAKH,QAAQW,UAAUC,SAAS,oBAE9C,IAAMC,EAAiBC,OAAOC,SAASC,KAAKC,QAAQ,KAAM,IACpDC,EAA0BC,EAAIhB,KAAKK,WAAWY,MAClD,SAACC,GAAQ,OAAKA,EAASC,aAAa,QAAUT,CAAc,IAG9DV,KAAKoB,YAAcC,SAASC,cAAc,OAC1CtB,KAAKoB,YAAYG,aAAa,OAAQ,WACtCvB,KAAKoB,YAAYG,aAAa,QAASvB,KAAKC,SAASkB,aAAa,UAElEnB,KAAKK,UAAUmB,SAAQ,SAACN,EAAUO,GAChCP,EAASK,aAAa,OAAQ,YAC9BL,EAASK,aACP,kBAAiB,GAAAG,OACdR,EAASC,aAAa,MAAK,SAEhCD,EAASK,aAAa,WAAY,MAE/BR,GACCG,EAASC,aAAa,QAAUT,IAChCK,GAA2BU,EAAQ,IAErCP,EAASK,aAAa,UAAU,EAEpC,IAEAvB,KAAKG,kBAAkBqB,SAAQ,SAACG,GAAqB,IAAAC,EAC7CC,EAAqBR,SAASC,cAAc,UAClDO,EAAmBC,UAAYH,EAAiBG,UAChDD,EAAmBN,aACjB,QACAI,EAAiBR,aAAa,UAEhCU,EAAmBN,aAAa,OAAQ,OACxCM,EAAmBN,aACjB,KACAI,EAAiBR,aAAa,OAEhCU,EAAmBN,aACjB,gBACqC,QADtBK,EACfD,EAAiBR,aAAa,eAAO,IAAAS,OAAA,EAArCA,EAAuCd,QAAQ,KAAM,KAEvDe,EAAmBN,aAAa,WAAY,MAC5CzB,EAAKsB,YAAYW,YAAYF,EAC/B,IAEA7B,KAAKC,SAAS+B,YAAYhC,KAAKoB,aAE/BpB,KAAKG,kBAAoBH,KAAKH,QAAQO,iBACpC,6BAGFJ,KAAKG,kBAAkBqB,SAAQ,SAACG,EAAkBF,GAE7Cf,GACCiB,EAAiBR,aAAa,mBAAgB,GAAAO,OACzChB,KACLA,GAA4B,IAAVe,GAEpBE,EAAiBnB,UAAUyB,IAAI,sCAC/BN,EAAiBJ,aAAa,iBAAiB,GAC/CI,EAAiBJ,aAAa,WAAY,MAE1CI,EAAiBJ,aAAa,iBAAiB,GAGjDI,EAAiBO,iBACf,WACA,SAACC,GAAC,OAAKrC,EAAKsC,sBAAsBD,EAAE,IACpC,GAEFR,EAAiBO,iBACf,SACA,SAACC,GAAC,OAAKrC,EAAKuC,oBAAoBF,EAAE,IAClC,EAEJ,GA/EA,CAgFF,G,EAAC,EAAArD,IAAA,sBAAAa,MAED,SAAoB2C,GAClBA,EAAmBC,iBACnB,IAAMC,EACJF,EAAmBG,cAActB,aAAa,iBAEhDnB,KAAK0C,UAAUF,EACjB,GAAC,CAAA1D,IAAA,wBAAAa,MAED,SAAsBgD,GACpB,IAAMH,EAAaG,EAAqBF,cACpCG,GAAqB,EAEzB,OAAQD,EAAqB7D,KAC3B,IAAK,YACL,IAAK,UACHkB,KAAK6C,yBAAyBL,GAC9BI,GAAqB,EACrB,MAEF,IAAK,aACL,IAAK,YACH5C,KAAK8C,qBAAqBN,GAC1BI,GAAqB,EACrB,MAEF,IAAK,OACH5C,KAAK0C,UAAU1C,KAAKG,kBAAkB,GAAGgB,aAAa,kBACtDyB,GAAqB,EACrB,MAEF,IAAK,MACH5C,KAAK0C,UACH1C,KAAKG,kBACHH,KAAKG,kBAAkBG,OAAS,GAChCa,aAAa,kBAEjByB,GAAqB,EAOrBA,IACFD,EAAqBI,kBACrBJ,EAAqBJ,iBAEzB,GAAC,CAAAzD,IAAA,uBAAAa,MAED,SAAqB6C,GACnB,IAIIQ,EAJEC,EAAejC,EAAIhB,KAAKG,mBAAmB+C,WAC/C,SAACvB,GAAgB,OACfA,EAAiBR,aAAa,QAAUqB,EAAWrB,aAAa,KAAK,IAIvE6B,EADEC,EAAejD,KAAKG,kBAAkBG,OAAS,EACtC2C,EAAe,EAEf,EAEbjD,KAAK0C,UACH1C,KAAKG,kBAAkB6C,GAAU7B,aAAa,iBAElD,GAAC,CAAArC,IAAA,2BAAAa,MAED,SAAyB6C,GACvB,IAIIQ,EAJEC,EAAejC,EAAIhB,KAAKG,mBAAmB+C,WAC/C,SAACvB,GAAgB,OACfA,EAAiBR,aAAa,QAAUqB,EAAWrB,aAAa,KAAK,IAIvE6B,EADEC,GAAgB,EACPA,EAAe,EAEfjD,KAAKG,kBAAkBG,OAAS,EAE7CN,KAAK0C,UACH1C,KAAKG,kBAAkB6C,GAAU7B,aAAa,iBAElD,GAAC,CAAArC,IAAA,YAAAa,MAED,SAAUwD,GACRnD,KAAKG,kBAAkBqB,SAAQ,SAACG,GAC1BA,EAAiBR,aAAa,mBAAqBgC,GACrDxB,EAAiBnB,UAAUyB,IAAI,sCAC/BN,EAAiBJ,aAAa,iBAAiB,GAC/CI,EAAiBJ,aAAa,WAAY,KAC1CI,EAAiByB,UAEjBzB,EAAiBnB,UAAU6C,OAAO,sCAClC1B,EAAiBJ,aAAa,iBAAiB,GAC/CI,EAAiBJ,aAAa,WAAY,MAE9C,IAEAvB,KAAKK,UAAUmB,SAAQ,SAACN,GAClBA,EAASC,aAAa,QAAUgC,GAClCjC,EAASoC,gBAAgB,UACzBpC,EAASK,aAAa,WAAY,OAElCL,EAASK,aAAa,UAAU,GAChCL,EAASK,aAAa,WAAY,MAEtC,IAEIvB,KAAKO,SACHgD,QAAQC,aACVD,QAAQC,aAAa,KAAM,KAAM,IAAF9B,OAAMyB,IAErCvC,SAASC,KAAO,IAAHa,OAAOyB,GAG1B,M,6EAAC,CApNc,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\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 Tabs {\n  constructor($module) {\n    this.$module = $module;\n    this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n    this.$tabListItemLinks =\n      $module &&\n      this.$tabList &&\n      $module.querySelectorAll(\".tna-tabs__list-item-link\");\n    this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n    if (\n      !this.$module ||\n      !this.$tabList ||\n      !this.$tabListItemLinks ||\n      !this.$tabItems ||\n      this.$tabListItemLinks.length !== this.$tabItems.length\n    ) {\n      return;\n    }\n\n    this.sticky = this.$module.classList.contains(\"tna-tabs--sticky\");\n\n    const startingTarget = window.location.hash.replace(/^#/, \"\");\n    const doesStartingTargetExist = [...this.$tabItems].some(\n      ($tabItem) => $tabItem.getAttribute(\"id\") === startingTarget,\n    );\n\n    this.$newTabList = document.createElement(\"div\");\n    this.$newTabList.setAttribute(\"role\", \"tablist\");\n    this.$newTabList.setAttribute(\"class\", this.$tabList.getAttribute(\"class\"));\n\n    this.$tabItems.forEach(($tabItem, index) => {\n      $tabItem.setAttribute(\"role\", \"tabpanel\");\n      $tabItem.setAttribute(\n        \"aria-labelledby\",\n        `${$tabItem.getAttribute(\"id\")}-tab`,\n      );\n      $tabItem.setAttribute(\"tabindex\", \"0\");\n      if (\n        (doesStartingTargetExist &&\n          $tabItem.getAttribute(\"id\") !== startingTarget) ||\n        (!doesStartingTargetExist && index > 0)\n      ) {\n        $tabItem.setAttribute(\"hidden\", true);\n      }\n    });\n\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      const $replacementButton = document.createElement(\"button\");\n      $replacementButton.innerText = $tabListItemLink.innerText;\n      $replacementButton.setAttribute(\n        \"class\",\n        $tabListItemLink.getAttribute(\"class\"),\n      );\n      $replacementButton.setAttribute(\"role\", \"tab\");\n      $replacementButton.setAttribute(\n        \"id\",\n        $tabListItemLink.getAttribute(\"id\"),\n      );\n      $replacementButton.setAttribute(\n        \"aria-controls\",\n        $tabListItemLink.getAttribute(\"href\")?.replace(/^#/, \"\"),\n      );\n      $replacementButton.setAttribute(\"tabindex\", \"-1\");\n      this.$newTabList.appendChild($replacementButton);\n    });\n\n    this.$tabList.replaceWith(this.$newTabList);\n\n    this.$tabListItemLinks = this.$module.querySelectorAll(\n      \".tna-tabs__list-item-link\",\n    );\n\n    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n      if (\n        (startingTarget &&\n          $tabListItemLink.getAttribute(\"aria-controls\") ===\n            `${startingTarget}`) ||\n        (!startingTarget && index === 0)\n      ) {\n        $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n      }\n\n      $tabListItemLink.addEventListener(\n        \"keydown\",\n        (e) => this.handleItemLinkKeyDown(e),\n        true,\n      );\n      $tabListItemLink.addEventListener(\n        \"click\",\n        (e) => this.handleItemLinkClick(e),\n        true,\n      );\n    });\n  }\n\n  handleItemLinkClick(itemLinkClickEvent) {\n    itemLinkClickEvent.preventDefault();\n    const targetItem =\n      itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n\n    this.switchTab(targetItem);\n  }\n\n  handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n    const targetItem = itemLinkKeyDownEvent.currentTarget;\n    let overwriteKeyAction = false;\n\n    switch (itemLinkKeyDownEvent.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        this.setSelectedToPreviousTab(targetItem);\n        overwriteKeyAction = true;\n        break;\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        this.setSelectedToNextTab(targetItem);\n        overwriteKeyAction = true;\n        break;\n\n      case \"Home\":\n        this.switchTab(this.$tabListItemLinks[0].getAttribute(\"aria-controls\"));\n        overwriteKeyAction = true;\n        break;\n\n      case \"End\":\n        this.switchTab(\n          this.$tabListItemLinks[\n            this.$tabListItemLinks.length - 1\n          ].getAttribute(\"aria-controls\"),\n        );\n        overwriteKeyAction = true;\n        break;\n\n      default:\n        break;\n    }\n\n    if (overwriteKeyAction) {\n      itemLinkKeyDownEvent.stopPropagation();\n      itemLinkKeyDownEvent.preventDefault();\n    }\n  }\n\n  setSelectedToNextTab(targetItem) {\n    const currentIndex = [...this.$tabListItemLinks].findIndex(\n      ($tabListItemLink) =>\n        $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n    );\n    let newIndex;\n    if (currentIndex < this.$tabListItemLinks.length - 1) {\n      newIndex = currentIndex + 1;\n    } else {\n      newIndex = 0;\n    }\n    this.switchTab(\n      this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n    );\n  }\n\n  setSelectedToPreviousTab(targetItem) {\n    const currentIndex = [...this.$tabListItemLinks].findIndex(\n      ($tabListItemLink) =>\n        $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n    );\n    let newIndex;\n    if (currentIndex >= 1) {\n      newIndex = currentIndex - 1;\n    } else {\n      newIndex = this.$tabListItemLinks.length - 1;\n    }\n    this.switchTab(\n      this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n    );\n  }\n\n  switchTab(targetId) {\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      if ($tabListItemLink.getAttribute(\"aria-controls\") === targetId) {\n        $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n        $tabListItemLink.focus();\n      } else {\n        $tabListItemLink.classList.remove(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n        $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n\n    this.$tabItems.forEach(($tabItem) => {\n      if ($tabItem.getAttribute(\"id\") === targetId) {\n        $tabItem.removeAttribute(\"hidden\");\n        $tabItem.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabItem.setAttribute(\"hidden\", true);\n        $tabItem.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n\n    if (this.sticky) {\n      if (history.replaceState) {\n        history.replaceState(null, null, `#${targetId}`);\n      } else {\n        location.hash = `#${targetId}`;\n      }\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","Tabs","$module","_this","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","sticky","classList","contains","startingTarget","window","location","hash","replace","doesStartingTargetExist","_toConsumableArray","some","$tabItem","getAttribute","$newTabList","document","createElement","setAttribute","forEach","index","concat","$tabListItemLink","_$tabListItemLink$get","$replacementButton","innerText","appendChild","replaceWith","add","addEventListener","e","handleItemLinkKeyDown","handleItemLinkClick","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTab","itemLinkKeyDownEvent","overwriteKeyAction","setSelectedToPreviousTab","setSelectedToNextTab","stopPropagation","newIndex","currentIndex","findIndex","targetId","focus","remove","removeAttribute","history","replaceState"],"sourceRoot":""}
+{"version":3,"file":"components/tabs/tabs.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/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\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 Tabs {\n  constructor($module) {\n    this.$module = $module;\n    this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n    this.$tabListItemLinks =\n      $module &&\n      this.$tabList &&\n      this.$tabList.querySelectorAll(\".tna-tabs__button\");\n    this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n    if (\n      !this.$module ||\n      !this.$tabList ||\n      !this.$tabListItemLinks ||\n      !this.$tabItems ||\n      this.$tabListItemLinks.length !== this.$tabItems.length\n    ) {\n      return;\n    }\n\n    this.currentTabIndex = 0;\n    this.init();\n  }\n\n  init() {\n    this.$module.classList.add(\"tna-tabs--interactive\");\n    this.$tabList.removeAttribute(\"hidden\");\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      const tabPanelID = $tabListItemLink.getAttribute(\"aria-controls\");\n      $tabListItemLink.setAttribute(\"aria-selected\", false);\n      const $tabPanel = document.getElementById(tabPanelID);\n      $tabPanel.setAttribute(\"aria-labelledby\", $tabListItemLink.id);\n      $tabPanel.setAttribute(\"role\", \"tabpanel\");\n      $tabListItemLink.addEventListener(\n        \"click\",\n        (e) => this.handleItemLinkClick(e),\n        true,\n      );\n    });\n    this.switchTabByIndex(this.currentTabIndex);\n    this.$module.addEventListener(\"keydown\", (e) =>\n      this.handleItemLinkKeyDown(e),\n    );\n  }\n\n  handleItemLinkClick(itemLinkClickEvent) {\n    itemLinkClickEvent.preventDefault();\n    const targetItem =\n      itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n    this.switchTabByID(targetItem);\n  }\n\n  handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n    let preventDefaultKeyAction = false;\n    switch (itemLinkKeyDownEvent.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        this.previousTab();\n        preventDefaultKeyAction = true;\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        this.nextTab();\n        preventDefaultKeyAction = true;\n        break;\n      case \"Home\":\n        this.switchTabByIndex(0, true);\n        preventDefaultKeyAction = true;\n        break;\n      case \"End\":\n        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n        preventDefaultKeyAction = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefaultKeyAction) {\n      itemLinkKeyDownEvent.stopPropagation();\n      itemLinkKeyDownEvent.preventDefault();\n    }\n  }\n\n  nextTab() {\n    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {\n      this.switchTabByIndex(this.currentTabIndex + 1, true);\n    } else {\n      this.switchTabByIndex(0, true);\n    }\n  }\n\n  previousTab() {\n    if (this.currentTabIndex >= 1) {\n      this.switchTabByIndex(this.currentTabIndex - 1, true);\n    } else {\n      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n    }\n  }\n\n  switchTabByIndex(newIndex, switchFocus = false) {\n    this.currentTabIndex = newIndex;\n\n    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n      if (index === this.currentTabIndex) {\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n        if (switchFocus) {\n          $tabListItemLink.focus();\n        }\n      } else {\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n        $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n\n    this.$tabItems.forEach(($tabItem, index) => {\n      if (index === this.currentTabIndex) {\n        $tabItem.removeAttribute(\"hidden\");\n        $tabItem.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabItem.setAttribute(\"hidden\", \"until-found\");\n        $tabItem.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n  }\n\n  switchTabByID(targetId) {\n    const index = Array.from(this.$tabItems).findIndex(\n      ($tabItem) => $tabItem.getAttribute(\"id\") === targetId,\n    );\n    this.switchTabByIndex(index);\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","$module","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","init","_this","classList","add","removeAttribute","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","e","handleItemLinkClick","switchTabByIndex","handleItemLinkKeyDown","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","_this2","switchFocus","arguments","undefined","index","focus","$tabItem","targetId","Array","from","findIndex"],"sourceRoot":""}

package/nationalarchives/components/tabs/tabs.mjs

@@ -5,7 +5,7 @@ export class Tabs {
     this.$tabListItemLinks =
       $module &&
       this.$tabList &&
-      $module.querySelectorAll(".tna-tabs__list-item-link");
+      this.$tabList.querySelectorAll(".tna-tabs__button");
     this.$tabItems = $module && $module.querySelectorAll(".tna-tabs__item");
 
     if (
@@ -18,197 +18,115 @@ export class Tabs {
       return;
     }
 
-    this.sticky = this.$module.classList.contains("tna-tabs--sticky");
-
-    const startingTarget = window.location.hash.replace(/^#/, "");
-    const doesStartingTargetExist = [...this.$tabItems].some(
-      ($tabItem) => $tabItem.getAttribute("id") === startingTarget,
-    );
-
-    this.$newTabList = document.createElement("div");
-    this.$newTabList.setAttribute("role", "tablist");
-    this.$newTabList.setAttribute("class", this.$tabList.getAttribute("class"));
-
-    this.$tabItems.forEach(($tabItem, index) => {
-      $tabItem.setAttribute("role", "tabpanel");
-      $tabItem.setAttribute(
-        "aria-labelledby",
-        `${$tabItem.getAttribute("id")}-tab`,
-      );
-      $tabItem.setAttribute("tabindex", "0");
-      if (
-        (doesStartingTargetExist &&
-          $tabItem.getAttribute("id") !== startingTarget) ||
-        (!doesStartingTargetExist && index > 0)
-      ) {
-        $tabItem.setAttribute("hidden", true);
-      }
-    });
+    this.currentTabIndex = 0;
+    this.init();
+  }
 
+  init() {
+    this.$module.classList.add("tna-tabs--interactive");
+    this.$tabList.removeAttribute("hidden");
     this.$tabListItemLinks.forEach(($tabListItemLink) => {
-      const $replacementButton = document.createElement("button");
-      $replacementButton.innerText = $tabListItemLink.innerText;
-      $replacementButton.setAttribute(
-        "class",
-        $tabListItemLink.getAttribute("class"),
-      );
-      $replacementButton.setAttribute("role", "tab");
-      $replacementButton.setAttribute(
-        "id",
-        $tabListItemLink.getAttribute("id"),
-      );
-      $replacementButton.setAttribute(
-        "aria-controls",
-        $tabListItemLink.getAttribute("href")?.replace(/^#/, ""),
-      );
-      $replacementButton.setAttribute("tabindex", "-1");
-      this.$newTabList.appendChild($replacementButton);
-    });
-
-    this.$tabList.replaceWith(this.$newTabList);
-
-    this.$tabListItemLinks = this.$module.querySelectorAll(
-      ".tna-tabs__list-item-link",
-    );
-
-    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
-      if (
-        (startingTarget &&
-          $tabListItemLink.getAttribute("aria-controls") ===
-            `${startingTarget}`) ||
-        (!startingTarget && index === 0)
-      ) {
-        $tabListItemLink.classList.add("tna-tabs__list-item-link--selected");
-        $tabListItemLink.setAttribute("aria-selected", true);
-        $tabListItemLink.setAttribute("tabindex", "0");
-      } else {
-        $tabListItemLink.setAttribute("aria-selected", false);
-      }
-
-      $tabListItemLink.addEventListener(
-        "keydown",
-        (e) => this.handleItemLinkKeyDown(e),
-        true,
-      );
+      const tabPanelID = $tabListItemLink.getAttribute("aria-controls");
+      $tabListItemLink.setAttribute("aria-selected", false);
+      const $tabPanel = document.getElementById(tabPanelID);
+      $tabPanel.setAttribute("aria-labelledby", $tabListItemLink.id);
+      $tabPanel.setAttribute("role", "tabpanel");
       $tabListItemLink.addEventListener(
         "click",
         (e) => this.handleItemLinkClick(e),
         true,
       );
     });
+    this.switchTabByIndex(this.currentTabIndex);
+    this.$module.addEventListener("keydown", (e) =>
+      this.handleItemLinkKeyDown(e),
+    );
   }
 
   handleItemLinkClick(itemLinkClickEvent) {
     itemLinkClickEvent.preventDefault();
     const targetItem =
       itemLinkClickEvent.currentTarget.getAttribute("aria-controls");
-
-    this.switchTab(targetItem);
+    this.switchTabByID(targetItem);
   }
 
   handleItemLinkKeyDown(itemLinkKeyDownEvent) {
-    const targetItem = itemLinkKeyDownEvent.currentTarget;
-    let overwriteKeyAction = false;
-
+    let preventDefaultKeyAction = false;
     switch (itemLinkKeyDownEvent.key) {
       case "ArrowLeft":
       case "ArrowUp":
-        this.setSelectedToPreviousTab(targetItem);
-        overwriteKeyAction = true;
+        this.previousTab();
+        preventDefaultKeyAction = true;
         break;
-
       case "ArrowRight":
       case "ArrowDown":
-        this.setSelectedToNextTab(targetItem);
-        overwriteKeyAction = true;
+        this.nextTab();
+        preventDefaultKeyAction = true;
         break;
-
       case "Home":
-        this.switchTab(this.$tabListItemLinks[0].getAttribute("aria-controls"));
-        overwriteKeyAction = true;
+        this.switchTabByIndex(0, true);
+        preventDefaultKeyAction = true;
         break;
-
       case "End":
-        this.switchTab(
-          this.$tabListItemLinks[
-            this.$tabListItemLinks.length - 1
-          ].getAttribute("aria-controls"),
-        );
-        overwriteKeyAction = true;
+        this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);
+        preventDefaultKeyAction = true;
         break;
-
       default:
         break;
     }
-
-    if (overwriteKeyAction) {
+    if (preventDefaultKeyAction) {
       itemLinkKeyDownEvent.stopPropagation();
       itemLinkKeyDownEvent.preventDefault();
     }
   }
 
-  setSelectedToNextTab(targetItem) {
-    const currentIndex = [...this.$tabListItemLinks].findIndex(
-      ($tabListItemLink) =>
-        $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
-    );
-    let newIndex;
-    if (currentIndex < this.$tabListItemLinks.length - 1) {
-      newIndex = currentIndex + 1;
+  nextTab() {
+    if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {
+      this.switchTabByIndex(this.currentTabIndex + 1, true);
     } else {
-      newIndex = 0;
+      this.switchTabByIndex(0, true);
     }
-    this.switchTab(
-      this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
-    );
   }
 
-  setSelectedToPreviousTab(targetItem) {
-    const currentIndex = [...this.$tabListItemLinks].findIndex(
-      ($tabListItemLink) =>
-        $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
-    );
-    let newIndex;
-    if (currentIndex >= 1) {
-      newIndex = currentIndex - 1;
+  previousTab() {
+    if (this.currentTabIndex >= 1) {
+      this.switchTabByIndex(this.currentTabIndex - 1, true);
     } else {
-      newIndex = this.$tabListItemLinks.length - 1;
+      this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);
     }
-    this.switchTab(
-      this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
-    );
   }
 
-  switchTab(targetId) {
-    this.$tabListItemLinks.forEach(($tabListItemLink) => {
-      if ($tabListItemLink.getAttribute("aria-controls") === targetId) {
-        $tabListItemLink.classList.add("tna-tabs__list-item-link--selected");
+  switchTabByIndex(newIndex, switchFocus = false) {
+    this.currentTabIndex = newIndex;
+
+    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
+      if (index === this.currentTabIndex) {
         $tabListItemLink.setAttribute("aria-selected", true);
         $tabListItemLink.setAttribute("tabindex", "0");
-        $tabListItemLink.focus();
+        if (switchFocus) {
+          $tabListItemLink.focus();
+        }
       } else {
-        $tabListItemLink.classList.remove("tna-tabs__list-item-link--selected");
         $tabListItemLink.setAttribute("aria-selected", false);
         $tabListItemLink.setAttribute("tabindex", "-1");
       }
     });
 
-    this.$tabItems.forEach(($tabItem) => {
-      if ($tabItem.getAttribute("id") === targetId) {
+    this.$tabItems.forEach(($tabItem, index) => {
+      if (index === this.currentTabIndex) {
         $tabItem.removeAttribute("hidden");
         $tabItem.setAttribute("tabindex", "0");
       } else {
-        $tabItem.setAttribute("hidden", true);
+        $tabItem.setAttribute("hidden", "until-found");
         $tabItem.setAttribute("tabindex", "-1");
       }
     });
+  }
 
-    if (this.sticky) {
-      if (history.replaceState) {
-        history.replaceState(null, null, `#${targetId}`);
-      } else {
-        location.hash = `#${targetId}`;
-      }
-    }
+  switchTabByID(targetId) {
+    const index = Array.from(this.$tabItems).findIndex(
+      ($tabItem) => $tabItem.getAttribute("id") === targetId,
+    );
+    this.switchTabByIndex(index);
   }
 }

package/nationalarchives/components/tabs/tabs.scss

@@ -1,3 +1,6 @@
+@use "../../variables/a11y" as a11yVariables;
+@use "../../variables/borders";
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -7,135 +10,147 @@
   @include spacing.space-above;
 
   &__list {
-    margin: 0 0 spacing.space(1);
+    margin: 0;
     padding: 0;
 
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
-    gap: spacing.space(1);
+    gap: spacing.space(0.5);
+
+    position: relative;
+    z-index: 2;
 
     list-style: none;
   }
 
-  &__list-item {
+  &--small &__list {
+    gap: spacing.space(0.25);
   }
 
-  &__list-item-link {
-    padding: spacing.space(0.5) 0;
-
-    display: flex;
+  &__list-item {
+  }
 
-    align-items: center;
+  &__button {
+    padding: borders.$thick-border-width 0;
 
     position: relative;
 
     text-align: center;
-    text-decoration: none;
 
     background: transparent;
 
     border: none;
 
     cursor: pointer;
+  }
 
-    @include typography.font-size(20);
-    @include typography.heading-font;
+  &--interactive &__button {
+    background: transparent;
 
-    &,
-    &:link,
-    &:visited {
-      @include colour.colour-font("font-dark");
-    }
+    border: 1px transparent solid;
+    border-bottom: none;
+  }
+
+  &--interactive &__button[aria-selected="true"] {
+    padding-top: 0;
+
+    @include colour.colour-border("keyline");
 
     &::after {
       content: "";
 
+      height: 1px;
+
       position: absolute;
+      top: 100%;
       right: 0;
-      bottom: 0;
       left: 0;
+
+      @include colour.colour-background("background");
     }
+  }
 
-    &:hover,
-    &--selected,
-    &--selected:hover {
-      text-decoration: none;
+  &__button-inner {
+    padding: spacing.space(0.5) spacing.space(0.75);
 
-      &::after {
-        @include colour.thick-keyline-dark(top);
-      }
-    }
+    display: block;
 
-    .tna-template--js-enabled & {
-      @include colour.colour-font("font-light");
+    text-decoration: underline;
 
-      &:hover {
-        &::after {
-          @include colour.thick-keyline(top);
-        }
-      }
+    @include colour.colour-font("font-dark");
+  }
 
-      &--selected {
-        @include colour.colour-font("font-dark");
+  &--small &__button-inner {
+    padding: spacing.space(0.25) spacing.space(0.5) spacing.space(0.125);
 
-        &::after,
-        &:hover::after {
-          @include colour.thick-keyline-dark(top);
-        }
-      }
-    }
+    @include typography.font-size(16);
   }
 
-  &__items {
-    // &:not(:target-within) {
-    //   .tna-tabs__item:first-child {
-    //     display: block;
-    //   }
-    // }
+  &__button:hover &__button-inner {
+    @include typography.interacted-text-decoration;
   }
 
-  &__item {
-    display: none;
+  &__button[aria-selected="true"] &__button-inner {
+    text-decoration: none;
 
-    &:first-child {
-      display: block;
-    }
+    @include colour.thick-keyline-accent(top);
+  }
 
-    &:has(~ :target) {
-      display: none;
-    }
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: spacing.space(2);
 
-    &:target {
-      display: block;
-    }
+    position: relative;
+    z-index: 1;
+  }
 
-    .tna-template--js-enabled & {
-      display: block;
+  &__item {
+    border-radius: 0.1px;
+    @include a11y.no-focus-outline-on-click;
 
-      &[hidden] {
-        display: none;
-      }
+    &:focus {
+      outline-offset: -#{a11yVariables.$focus-outline-width};
     }
+  }
 
-    .tna-template--clicked &:focus {
-      outline: none;
-    }
+  &--interactive &__item {
+    padding: spacing.space(1);
+    @include colour.colour-border("keyline", 1px, solid);
   }
 
-  @include colour.on-high-contrast-and-forced-colours {
-    &__list {
-      @include colour.colour-border("keyline-dark", 1px, solid, bottom);
-    }
+  &--tint#{&}--interactive &__button[aria-selected="true"],
+  &--tint#{&}--interactive &__button:hover &__button-inner,
+  &--tint#{&}--interactive &__items {
+    @include colour.tint;
   }
 
-  // @include colour.on-forced-colours {
-  //   &__list-item-link {
-  //     &--selected {
-  //       padding-bottom: spacing.space(0.125);
+  // &--contrast#{&}--interactive &__button[aria-selected="true"],
+  // &--contrast#{&}--interactive &__button:hover &__button-inner,
+  // &--contrast#{&}--interactive &__items {
+  //   @include colour.contrast;
+  // }
+
+  // &--accent#{&}--interactive &__button[aria-selected="true"],
+  // &--accent#{&}--interactive &__button:hover &__button-inner,
+  // &--accent#{&}--interactive &__items {
+  //   @include colour.accent;
+  // }
 
-  //       border-bottom-width: 0.375rem;
-  //     }
-  //   }
+  // &--contrast &__list,
+  // &--contrast &__button,
+  // &--contrast &__item,
+  // &--accent &__list,
+  // &--accent &__button,
+  // &--accent &__item {
+  //   border: none;
   // }
+
+  @include colour.on-forced-colours {
+    // &__button,
+    // &__item {
+    //   @include colour.colour-border("keyline", 1px, solid);
+    // }
+  }
 }

package/nationalarchives/components/tabs/template.njk

@@ -4,16 +4,23 @@
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <div class="tna-tabs{% if classes %} {{ classes }}{% endif %}" data-module="tna-tabs"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-  <ul class="tna-tabs__list">
+  <ul class="tna-tabs__list" role="tablist" hidden>
   {%- for item in params.items %}
     <li class="tna-tabs__list-item">
-      <a href="#{{ item.id }}" class="tna-tabs__list-item-link" id="{{ item.id }}-tab">{{ item.title }}</a>
+      <button type="button" class="tna-tabs__button" id="{{ item.id }}-tab" aria-controls="{{ item.id }}" role="tab">
+        <span class="tna-tabs__button-inner">
+          {{ item.title }}
+        </span>
+      </button>
     </li>
   {%- endfor %}
   </ul>
   <div class="tna-tabs__items">
   {%- for item in params.items %}
     <section id="{{ item.id }}" class="tna-tabs__item">
+      <h{{ params.itemHeadingLevel }} class="tna-tabs__heading tna-heading-m">
+        {{ item.title }}
+      </h{{ params.itemHeadingLevel }}>
       {{ item.body | safe }}
     </section>
   {%- endfor %}

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/text-input/text-input.scss"],"names":[],"mappings":"AA6KA,gBAhKM,oxDAmKJ,+BAHF,gBAhJM,8vDCzBN,gBACE,WACA,cAEA,cACA,sBDyCA,4CCrCA,iBDyCA,6DA0BI,mDC9DJ,mBAEA,wCDiEI,+CC7DJ,oBACE,eAGF,mBACE,gBAGF,mBACE,gBAGF,mBACE,gBAGF,oBACE","file":"text-input.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@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)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\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(--font-base);\n  --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%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-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"pink\")} !important;\n  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n.tna-text-input {\n  width: 100%;\n  padding: 0 spacing.space(0.375);\n\n  display: block;\n  box-sizing: border-box;\n\n  @include colour.always-light;\n  @include colour.colour-font(\"input-foreground\");\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0.1px;\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error-border\");\n  }\n\n  &--xs {\n    max-width: 5rem;\n  }\n\n  &--s {\n    max-width: 10rem;\n  }\n\n  &--m {\n    max-width: 20rem;\n  }\n\n  &--l {\n    max-width: 40rem;\n  }\n\n  &--xl {\n    max-width: 80rem;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/text-input/text-input.scss"],"names":[],"mappings":"AAsLA,gBAxKM,oxDA2KJ,+BAHF,gBAxJM,8vDC1BN,gBACE,WACA,cAEA,cACA,sBD0CA,4CCtCA,iBD0CA,6DA0BI,mDC/DJ,mBAEA,wCDkEI,+CC9DJ,oBACE,eAGF,mBACE,gBAGF,mBACE,gBAGF,mBACE,gBAGF,oBACE","file":"text-input.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@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width transparent solid;\n  } @else {\n    border: borders.$thick-border-width transparent solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\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(--font-base);\n  --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%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-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"pink\")} !important;\n  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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  --accent-list-marker: #{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 not features.$disable-image-loader-animations {\n    background: linear-gradient(\n      -45deg,\n      rgba(0 0 0 / 25%),\n      rgba(255 255 255 / 25%),\n      rgba(0 0 0 / 25%)\n    );\n    background-size: 500% 500%;\n    background-position: 0 50%;\n\n    animation: image-loader-background ease-in-out 1.2s infinite;\n  }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n\n.tna-text-input {\n  width: 100%;\n  padding: 0 spacing.space(0.375);\n\n  display: block;\n  box-sizing: border-box;\n\n  @include colour.always-light;\n  @include colour.colour-font(\"input-foreground\");\n  line-height: 2rem;\n\n  @include colour.colour-background(\"input-background\");\n\n  @include colour.colour-border(\"input-border\", forms.$form-field-border-width);\n  border-radius: 0.1px;\n\n  .tna-form__group--error & {\n    @include colour.colour-border(\"form-error-border\");\n  }\n\n  &--xs {\n    max-width: 5rem;\n  }\n\n  &--s {\n    max-width: 10rem;\n  }\n\n  &--m {\n    max-width: 20rem;\n  }\n\n  &--l {\n    max-width: 40rem;\n  }\n\n  &--xl {\n    max-width: 80rem;\n  }\n}\n"]}