@nationalarchives/frontend 1.5.0 → 1.6.1

package/nationalarchives/all.mjs

@@ -15,7 +15,10 @@ import { Sidebar } from "./components/sidebar/sidebar.mjs";
 import { SkipLink } from "./components/skip-link/skip-link.mjs";
 import { Tabs } from "./components/tabs/tabs.mjs";
 import { TextInputPassword } from "./components/text-input/text-input.mjs";
-import { TextAreaItemisedRows } from "./components/textarea/textarea.mjs";
+import {
+  TextAreaCharacterCount,
+  TextAreaItemisedRows,
+} from "./components/textarea/textarea.mjs";
 import { checkTableForScroll, updateTimeElement } from "./lib/helpers.mjs";
 
 const initAll = (options = {}) => {
@@ -164,6 +167,13 @@ const initAll = (options = {}) => {
     new TextAreaItemisedRows($textAreaWithItemisedRows, { enhancedHint });
   });
 
+  const $textAreaCharacterCounts = $scope.querySelectorAll(
+    '[data-module="tna-textarea-character-count"]',
+  );
+  $textAreaCharacterCounts.forEach(($textAreaCharacterCount) => {
+    new TextAreaCharacterCount($textAreaCharacterCount);
+  });
+
   const $textInputPasswords = $scope.querySelectorAll(
     '[data-module="tna-text-input-password"]',
   );

package/nationalarchives/assets/images/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect x="0" y="0" width="64" height="64" fill="#fff"></rect>
+  <rect x="4" y="4" width="56" height="56" fill="#000"></rect>
+  <rect x="6" y="6" width="25" height="16" fill="#fff"></rect>
+  <rect x="6" y="24" width="52" height="16" fill="#fff"></rect>
+  <rect x="6" y="42" width="52" height="16" fill="#fff"></rect>
+</svg>

package/nationalarchives/components/TextAreaCharacterCount/TextAreaCharacterCount.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";const e={d:(t,r)=>{for(var a in r)e.o(r,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:r[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}};let t={};e.r(t),e.d(t,{default:()=>r});class r{constructor(e,t={}){this.$module=e,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldCharacterCount=this.$module&&this.$module.querySelector(".tna-textarea-count"),this.$formFieldCharacterCountScreenReader=this.$module&&this.$module.querySelector(".tna-textarea-count__screen-reader-status"),this.max=parseInt(this.$formFieldInput?.dataset?.maxLength,10),this.countType=this.$formFieldInput?.dataset?.countType||"characters",this.$module&&this.$formFieldInput&&this.$formFieldCharacterCount&&this.$formFieldCharacterCountScreenReader&&this.max&&this.init(t)}init(e){this.threshold=e.threshold||parseInt(this.$formFieldInput?.dataset?.countThreshold,10)||0,this.debounceDuration=e.debounceDuration||parseInt(this.$formFieldInput?.dataset?.debounceDuration,10)||1e3,this.intervalChecker=e.intervalChecker||1e3,this.debounceTimeout=null,this.lastInputValue="",this.$formFieldInput.addEventListener("input",()=>{this.handleInput(),this.lastInputTimestamp=Date.now()}),this.$formFieldInput.addEventListener("focus",()=>{this.handleFocus()}),this.$formFieldInput.addEventListener("blur",()=>{this.handleBlur()}),this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount()}handleFocus(){this.valueChecker=window.setInterval(()=>{(!this.lastInputTimestamp||Date.now()-this.intervalChecker/2>=this.lastInputTimestamp)&&this.updateIfValueChanged()},this.intervalChecker)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker),this.updateScreenReaderCharacterCount()}updateIfValueChanged(){this.$formFieldInput.value!==this.lastInputValue&&(this.lastInputValue=this.$formFieldInput.value,this.updateVisualCharacterCount(),this.updateScreenReaderCharacterCount())}handleInput(){this.updateVisualCharacterCount(),clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.updateScreenReaderCharacterCount()},this.debounceDuration)}getCurrentLength(){if("words"===this.countType){const e=this.$formFieldInput.value.trim();return""===e?0:e.split(/\s+/).length}return this.$formFieldInput.value.length}getCurrentLengthMessage(){const e=this.getCurrentLength();let t=this.countType;return 1===Math.abs(this.max-e)&&(t=t.replace(/s$/,"")),e>this.max?`You have ${(new Intl.NumberFormat).format(e-this.max)} ${t} too many`:`You have ${(new Intl.NumberFormat).format(this.max-e)} ${t} remaining`}isOverThreshold(){return this.getCurrentLength()>this.max}updateVisualCharacterCount(){this.threshold&&(this.getCurrentLength()>this.max*(this.threshold/100)?this.showCharacterCount():this.hideCharacterCount()),this.$formFieldCharacterCount.innerText=this.getCurrentLengthMessage(),this.isOverThreshold()?(this.$formFieldInput.classList.add("tna-textarea--error"),this.$formFieldCharacterCount.classList.add("tna-textarea-count--error")):(this.$formFieldInput.classList.remove("tna-textarea--error"),this.$formFieldCharacterCount.classList.remove("tna-textarea-count--error"))}updateScreenReaderCharacterCount(){const e=this.getCurrentLengthMessage();this.$formFieldCharacterCountScreenReader.innerText=e}showCharacterCount(){this.$formFieldCharacterCount.removeAttribute("hidden"),this.$formFieldCharacterCountScreenReader.removeAttribute("aria-hidden")}hideCharacterCount(){this.$formFieldCharacterCount.setAttribute("hidden",""),this.$formFieldCharacterCountScreenReader.setAttribute("aria-hidden","true")}}return t})());
+//# sourceMappingURL=TextAreaCharacterCount.js.map

package/nationalarchives/components/TextAreaCharacterCount/TextAreaCharacterCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/TextAreaCharacterCount/TextAreaCharacterCount.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/textarea/TextAreaCharacterCount.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export default class TextAreaCharacterCount {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldCharacterCount =\n      this.$module && this.$module.querySelector(\".tna-textarea-count\");\n    this.$formFieldCharacterCountScreenReader =\n      this.$module &&\n      this.$module.querySelector(\".tna-textarea-count__screen-reader-status\");\n    this.max = parseInt(this.$formFieldInput?.dataset?.maxLength, 10);\n    this.countType = this.$formFieldInput?.dataset?.countType || \"characters\";\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldCharacterCount ||\n      !this.$formFieldCharacterCountScreenReader ||\n      !this.max\n    ) {\n      return;\n    }\n\n    this.init(options);\n  }\n\n  init(options) {\n    this.threshold =\n      options.threshold ||\n      parseInt(this.$formFieldInput?.dataset?.countThreshold, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      0;\n    this.debounceDuration =\n      options.debounceDuration ||\n      parseInt(this.$formFieldInput?.dataset?.debounceDuration, 10) ||\n      /* eslint-disable-next-line no-magic-numbers */\n      1000;\n    /* eslint-disable-next-line no-magic-numbers */\n    this.intervalChecker = options.intervalChecker || 1000;\n    this.debounceTimeout = null;\n    this.lastInputValue = \"\";\n\n    this.$formFieldInput.addEventListener(\"input\", () => {\n      this.handleInput();\n      this.lastInputTimestamp = Date.now();\n    });\n    this.$formFieldInput.addEventListener(\"focus\", () => {\n      this.handleFocus();\n    });\n    this.$formFieldInput.addEventListener(\"blur\", () => {\n      this.handleBlur();\n    });\n    this.updateVisualCharacterCount();\n    this.updateScreenReaderCharacterCount();\n  }\n\n  handleFocus() {\n    this.valueChecker = window.setInterval(() => {\n      if (\n        !this.lastInputTimestamp ||\n        /* eslint-disable-next-line no-magic-numbers */\n        Date.now() - this.intervalChecker / 2 >= this.lastInputTimestamp\n      ) {\n        this.updateIfValueChanged();\n      }\n    }, this.intervalChecker);\n  }\n\n  handleBlur() {\n    if (this.valueChecker) {\n      window.clearInterval(this.valueChecker);\n    }\n    this.updateScreenReaderCharacterCount();\n  }\n\n  updateIfValueChanged() {\n    if (this.$formFieldInput.value !== this.lastInputValue) {\n      this.lastInputValue = this.$formFieldInput.value;\n      this.updateVisualCharacterCount();\n      this.updateScreenReaderCharacterCount();\n    }\n  }\n\n  handleInput() {\n    this.updateVisualCharacterCount();\n    clearTimeout(this.debounceTimeout);\n    this.debounceTimeout = setTimeout(() => {\n      this.updateScreenReaderCharacterCount();\n    }, this.debounceDuration);\n  }\n\n  getCurrentLength() {\n    if (this.countType === \"words\") {\n      const trimmedValue = this.$formFieldInput.value.trim();\n      if (trimmedValue === \"\") {\n        /* eslint-disable-next-line no-magic-numbers */\n        return 0;\n      }\n      return trimmedValue.split(/\\s+/).length;\n    }\n    return this.$formFieldInput.value.length;\n  }\n\n  getCurrentLengthMessage() {\n    const currentLength = this.getCurrentLength();\n    let typeLabel = this.countType;\n    /* eslint-disable-next-line no-magic-numbers */\n    if (Math.abs(this.max - currentLength) === 1) {\n      typeLabel = typeLabel.replace(/s$/, \"\");\n    }\n    if (currentLength > this.max) {\n      return `You have ${new Intl.NumberFormat().format(currentLength - this.max)} ${typeLabel} too many`;\n    }\n    return `You have ${new Intl.NumberFormat().format(this.max - currentLength)} ${typeLabel} remaining`;\n  }\n\n  isOverThreshold() {\n    return this.getCurrentLength() > this.max;\n  }\n\n  updateVisualCharacterCount() {\n    if (this.threshold) {\n      /* eslint-disable-next-line no-magic-numbers */\n      if (this.getCurrentLength() > this.max * (this.threshold / 100)) {\n        this.showCharacterCount();\n      } else {\n        this.hideCharacterCount();\n      }\n    }\n\n    this.$formFieldCharacterCount.innerText = this.getCurrentLengthMessage();\n    if (this.isOverThreshold()) {\n      this.$formFieldInput.classList.add(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.add(\"tna-textarea-count--error\");\n    } else {\n      this.$formFieldInput.classList.remove(\"tna-textarea--error\");\n      this.$formFieldCharacterCount.classList.remove(\n        \"tna-textarea-count--error\",\n      );\n    }\n  }\n\n  updateScreenReaderCharacterCount() {\n    const currentLengthMessage = this.getCurrentLengthMessage();\n    this.$formFieldCharacterCountScreenReader.innerText = currentLengthMessage;\n  }\n\n  showCharacterCount() {\n    this.$formFieldCharacterCount.removeAttribute(\"hidden\");\n    this.$formFieldCharacterCountScreenReader.removeAttribute(\"aria-hidden\");\n  }\n\n  hideCharacterCount() {\n    this.$formFieldCharacterCount.setAttribute(\"hidden\", \"\");\n    this.$formFieldCharacterCountScreenReader.setAttribute(\n      \"aria-hidden\",\n      \"true\",\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","TextAreaCharacterCount","constructor","$module","options","this","$formFieldInput","querySelector","$formFieldCharacterCount","$formFieldCharacterCountScreenReader","max","parseInt","dataset","maxLength","countType","init","threshold","countThreshold","debounceDuration","intervalChecker","debounceTimeout","lastInputValue","addEventListener","handleInput","lastInputTimestamp","Date","now","handleFocus","handleBlur","updateVisualCharacterCount","updateScreenReaderCharacterCount","valueChecker","window","setInterval","updateIfValueChanged","clearInterval","clearTimeout","setTimeout","getCurrentLength","trimmedValue","trim","split","length","getCurrentLengthMessage","currentLength","typeLabel","Math","abs","replace","Intl","NumberFormat","format","isOverThreshold","showCharacterCount","hideCharacterCount","innerText","classList","add","remove","currentLengthMessage","removeAttribute","setAttribute"],"sourceRoot":""}

package/nationalarchives/components/TextAreaItemisedRows/TextAreaItemisedRows.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";const t={d:(e,i)=>{for(var 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=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{default:()=>i});class i{constructor(t,e={}){if(this.$module=t,this.$formFieldInput=this.$module&&this.$module.querySelector(".tna-textarea"),this.$formFieldInputHint=this.$module&&this.$module.querySelector(".tna-form-item__hint"),this.$formFieldBody=this.$module&&this.$module.querySelector(".tna-form-item__body"),!this.$module||!this.$formFieldInput||!this.$formFieldBody||null!==this.$formFieldInput.getAttribute("hidden"))return;if(!(this.$formFieldInput instanceof HTMLTextAreaElement))throw new Error("Expected a textarea element");const{enhancedHint:i}=e;this.enhancedHint=i||"Enter an item and press enter",this.values=this.$formFieldInput.value.split("\n").map(t=>t.trim()).filter(t=>t),this.id=this.$formFieldInput.id,this.init()}init(){this.$formFieldNewInput=document.createElement("input"),this.$formFieldNewInput.classList.add("tna-text-input"),["id","aria-describedby"].forEach(t=>{this.$formFieldNewInput.setAttribute(t,this.$formFieldInput.getAttribute(t)),this.$formFieldInput.removeAttribute(t)}),this.$formFieldBody.appendChild(this.$formFieldNewInput),this.$formFieldInput.setAttribute("hidden",""),this.$formFieldInput.addEventListener("keyup",()=>this.updateList()),this.$formFieldNewInput.addEventListener("keypress",t=>{"Enter"===t.key&&this.appendValue(t.target.value)}),this.$formFieldNewInputAddButton=document.createElement("button"),this.$formFieldNewInputAddButton.setAttribute("type","button"),this.$formFieldNewInputAddButton.classList.add("tna-button","tna-button--small"),this.$formFieldNewInputAddButtonInner=document.createElement("span"),this.$formFieldNewInputAddButtonInner.innerText="Add",this.$formFieldNewInputAddButtonInnerExtra=document.createElement("span"),this.$formFieldNewInputAddButtonInnerExtra.classList.add("tna-visually-hidden"),this.$formFieldNewInputAddButtonInnerExtra.innerText=" to list",this.$formFieldNewInputAddButtonInner.appendChild(this.$formFieldNewInputAddButtonInnerExtra),this.$formFieldNewInputAddButton.appendChild(this.$formFieldNewInputAddButtonInner),this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton),this.$formFieldNewInputAddButton.addEventListener("click",()=>{this.appendValue(this.$formFieldNewInput.value)}),this.$formFieldLiveAria=document.createElement("div"),this.$formFieldLiveAria.setAttribute("aria-live","polite"),this.$formFieldLiveAria.classList.add("tna-visually-hidden"),this.$module.appendChild(this.$formFieldLiveAria),this.$formFieldCounter=document.createElement("p"),this.$formFieldCounter.id=`${this.id}-list-helper`,this.$formFieldCounter.classList.add("tna-!--margin-top-xs"),this.$module.appendChild(this.$formFieldCounter),this.$formFieldNewInput.setAttribute("aria-describedby",`${this.$formFieldNewInput.getAttribute("aria-describedby")} ${this.$formFieldCounter.id}`),this.$valuesList=document.createElement("ul"),this.$valuesList.classList.add("tna-compound-filters","tna-!--margin-top-xs"),this.$valuesList.addEventListener("blur",()=>{this.$valuesList.removeAttribute("tabindex"),this.updateAriaText("")}),this.$module.appendChild(this.$valuesList),this.$formFieldInputHint||(this.$formFieldInputHint=document.createElement("p"),this.$formFieldInputHint.classList.add("tna-form-item__hint"),this.$formFieldBody.parentNode.insertBefore(this.$formFieldInputHint,this.$formFieldBody)),this.$formFieldInputHint.innerText=this.enhancedHint,this.updateList()}updateAriaText(t){this.$formFieldLiveAria.innerText=t}normaliseValue(t){return t.replace(/\s{2,}/u," ").trim()}isValueInList(t){return this.values.map(t=>this.normaliseValue(t).toLowerCase()).includes(t.toLowerCase().trim())}appendValue(t){const e=this.normaliseValue(t);e?this.isValueInList(e)?this.updateAriaText(`'${e}' already added`):(this.values.push(e),this.$formFieldInput.value=this.values.join("\n"),this.updateList(),this.updateAriaText(`'${e}' added`)):this.updateAriaText("Enter an item to add"),this.$formFieldNewInput.value="",this.$formFieldNewInput.focus()}removeValue(t){const e=this.normaliseValue(t);e&&this.isValueInList(e)&&(this.values=this.values.filter(t=>t!==e),this.$formFieldInput.value=this.values.join("\n"),this.updateList(),this.updateAriaText(`'${e}' removed`)),this.values.length?(this.$valuesList.setAttribute("tabindex","0"),this.$valuesList.focus()):this.$formFieldNewInput.focus()}updateList(){this.$valuesList.innerHTML="",this.values.map(t=>{const e=document.createElement("li");e.classList.add("tna-compound-filters__item");const i=document.createElement("span");i.innerText=t,e.appendChild(i);const n=document.createElement("button");return n.innerText=`Remove '${t}'`,n.setAttribute("type","button"),n.classList.add("tna-compound-filters__link"),n.addEventListener("click",()=>{this.removeValue(t)}),e.appendChild(n),e}).forEach(t=>this.$valuesList.appendChild(t));let t="item";1!==this.values.length&&(t+="s");const e=`${(new Intl.NumberFormat).format(this.values.length)} ${t} added`;this.$formFieldCounter.innerText=e}}return e})());
+//# sourceMappingURL=TextAreaItemisedRows.js.map

package/nationalarchives/components/TextAreaItemisedRows/TextAreaItemisedRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/TextAreaItemisedRows/TextAreaItemisedRows.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/textarea/TextAreaItemisedRows.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export default class TextAreaItemisedRows {\n  constructor($module, options = {}) {\n    this.$module = $module;\n    this.$formFieldInput =\n      this.$module && this.$module.querySelector(\".tna-textarea\");\n    this.$formFieldInputHint =\n      this.$module && this.$module.querySelector(\".tna-form-item__hint\");\n    this.$formFieldBody =\n      this.$module && this.$module.querySelector(\".tna-form-item__body\");\n\n    if (\n      !this.$module ||\n      !this.$formFieldInput ||\n      !this.$formFieldBody ||\n      this.$formFieldInput.getAttribute(\"hidden\") !== null\n    ) {\n      return;\n    }\n\n    if (!(this.$formFieldInput instanceof HTMLTextAreaElement)) {\n      throw new Error(\"Expected a textarea element\");\n    }\n\n    const { enhancedHint } = options;\n    this.enhancedHint = enhancedHint || \"Enter an item and press enter\";\n\n    this.values = this.$formFieldInput.value\n      .split(\"\\n\")\n      .map((value) => value.trim())\n      .filter((value) => value);\n\n    this.id = this.$formFieldInput.id;\n\n    this.init();\n  }\n\n  init() {\n    this.$formFieldNewInput = document.createElement(\"input\");\n    this.$formFieldNewInput.classList.add(\"tna-text-input\");\n    [\"id\", \"aria-describedby\"].forEach((attribute) => {\n      this.$formFieldNewInput.setAttribute(\n        attribute,\n        this.$formFieldInput.getAttribute(attribute),\n      );\n      this.$formFieldInput.removeAttribute(attribute);\n    });\n    this.$formFieldBody.appendChild(this.$formFieldNewInput);\n    this.$formFieldInput.setAttribute(\"hidden\", \"\");\n    this.$formFieldInput.addEventListener(\"keyup\", () => this.updateList());\n    this.$formFieldNewInput.addEventListener(\"keypress\", (event) => {\n      if (event.key === \"Enter\") {\n        this.appendValue(event.target.value);\n      }\n    });\n\n    this.$formFieldNewInputAddButton = document.createElement(\"button\");\n    this.$formFieldNewInputAddButton.setAttribute(\"type\", \"button\");\n    this.$formFieldNewInputAddButton.classList.add(\n      \"tna-button\",\n      \"tna-button--small\",\n    );\n    this.$formFieldNewInputAddButtonInner = document.createElement(\"span\");\n    this.$formFieldNewInputAddButtonInner.innerText = \"Add\";\n    this.$formFieldNewInputAddButtonInnerExtra = document.createElement(\"span\");\n    this.$formFieldNewInputAddButtonInnerExtra.classList.add(\n      \"tna-visually-hidden\",\n    );\n    this.$formFieldNewInputAddButtonInnerExtra.innerText = \" to list\";\n    this.$formFieldNewInputAddButtonInner.appendChild(\n      this.$formFieldNewInputAddButtonInnerExtra,\n    );\n    this.$formFieldNewInputAddButton.appendChild(\n      this.$formFieldNewInputAddButtonInner,\n    );\n    this.$formFieldBody.appendChild(this.$formFieldNewInputAddButton);\n    this.$formFieldNewInputAddButton.addEventListener(\"click\", () => {\n      this.appendValue(this.$formFieldNewInput.value);\n    });\n\n    this.$formFieldLiveAria = document.createElement(\"div\");\n    this.$formFieldLiveAria.setAttribute(\"aria-live\", \"polite\");\n    this.$formFieldLiveAria.classList.add(\"tna-visually-hidden\");\n    this.$module.appendChild(this.$formFieldLiveAria);\n\n    this.$formFieldCounter = document.createElement(\"p\");\n    this.$formFieldCounter.id = `${this.id}-list-helper`;\n    this.$formFieldCounter.classList.add(\"tna-!--margin-top-xs\");\n    this.$module.appendChild(this.$formFieldCounter);\n\n    this.$formFieldNewInput.setAttribute(\n      \"aria-describedby\",\n      `${this.$formFieldNewInput.getAttribute(\"aria-describedby\")} ${\n        this.$formFieldCounter.id\n      }`,\n    );\n\n    this.$valuesList = document.createElement(\"ul\");\n    this.$valuesList.classList.add(\n      \"tna-compound-filters\",\n      \"tna-!--margin-top-xs\",\n    );\n    this.$valuesList.addEventListener(\"blur\", () => {\n      this.$valuesList.removeAttribute(\"tabindex\");\n      this.updateAriaText(\"\");\n    });\n    this.$module.appendChild(this.$valuesList);\n\n    if (!this.$formFieldInputHint) {\n      this.$formFieldInputHint = document.createElement(\"p\");\n      this.$formFieldInputHint.classList.add(\"tna-form-item__hint\");\n      this.$formFieldBody.parentNode.insertBefore(\n        this.$formFieldInputHint,\n        this.$formFieldBody,\n      );\n    }\n    this.$formFieldInputHint.innerText = this.enhancedHint;\n\n    this.updateList();\n  }\n\n  updateAriaText(content) {\n    this.$formFieldLiveAria.innerText = content;\n  }\n\n  /* eslint-disable-next-line class-methods-use-this */\n  normaliseValue(value) {\n    return value.replace(/\\s{2,}/u, \" \").trim();\n  }\n\n  isValueInList(value) {\n    return this.values\n      .map((eachValue) => this.normaliseValue(eachValue).toLowerCase())\n      .includes(value.toLowerCase().trim());\n  }\n\n  appendValue(value) {\n    const newValue = this.normaliseValue(value);\n    if (newValue) {\n      if (this.isValueInList(newValue)) {\n        this.updateAriaText(`'${newValue}' already added`);\n      } else {\n        this.values.push(newValue);\n        this.$formFieldInput.value = this.values.join(\"\\n\");\n        this.updateList();\n        this.updateAriaText(`'${newValue}' added`);\n      }\n    } else {\n      this.updateAriaText(\"Enter an item to add\");\n    }\n    this.$formFieldNewInput.value = \"\";\n    this.$formFieldNewInput.focus();\n  }\n\n  removeValue(value) {\n    const removeValue = this.normaliseValue(value);\n    if (removeValue && this.isValueInList(removeValue)) {\n      this.values = this.values.filter(\n        (existingValue) => existingValue !== removeValue,\n      );\n      this.$formFieldInput.value = this.values.join(\"\\n\");\n      this.updateList();\n      this.updateAriaText(`'${removeValue}' removed`);\n    }\n    if (this.values.length) {\n      this.$valuesList.setAttribute(\"tabindex\", \"0\");\n      this.$valuesList.focus();\n    } else {\n      this.$formFieldNewInput.focus();\n    }\n  }\n\n  updateList() {\n    this.$valuesList.innerHTML = \"\";\n    this.values\n      .map((value) => {\n        const $item = document.createElement(\"li\");\n        $item.classList.add(\"tna-compound-filters__item\");\n        const $itemLabel = document.createElement(\"span\");\n        $itemLabel.innerText = value;\n        $item.appendChild($itemLabel);\n\n        const $removeItemButton = document.createElement(\"button\");\n        $removeItemButton.innerText = `Remove '${value}'`;\n        $removeItemButton.setAttribute(\"type\", \"button\");\n        $removeItemButton.classList.add(\"tna-compound-filters__link\");\n        $removeItemButton.addEventListener(\"click\", () => {\n          this.removeValue(value);\n        });\n        $item.appendChild($removeItemButton);\n        return $item;\n      })\n      .forEach(($item) => this.$valuesList.appendChild($item));\n\n    let innerTextItemValue = \"item\";\n    /* eslint-disable-next-line no-magic-numbers */\n    if (this.values.length !== 1) {\n      innerTextItemValue += \"s\";\n    }\n    const innerTextValue = `${new Intl.NumberFormat().format(this.values.length)} ${innerTextItemValue} added`;\n    this.$formFieldCounter.innerText = innerTextValue;\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","TextAreaItemisedRows","constructor","$module","options","this","$formFieldInput","querySelector","$formFieldInputHint","$formFieldBody","getAttribute","HTMLTextAreaElement","Error","enhancedHint","values","split","map","trim","filter","id","init","$formFieldNewInput","document","createElement","classList","add","forEach","attribute","setAttribute","removeAttribute","appendChild","addEventListener","updateList","event","appendValue","target","$formFieldNewInputAddButton","$formFieldNewInputAddButtonInner","innerText","$formFieldNewInputAddButtonInnerExtra","$formFieldLiveAria","$formFieldCounter","$valuesList","updateAriaText","parentNode","insertBefore","content","normaliseValue","replace","isValueInList","eachValue","toLowerCase","includes","newValue","push","join","focus","removeValue","existingValue","length","innerHTML","$item","$itemLabel","$removeItemButton","innerTextItemValue","innerTextValue","Intl","NumberFormat","format"],"sourceRoot":""}

package/nationalarchives/components/button/fixtures.json

@@ -24,7 +24,7 @@
         "href": "#",
         "title": "Log in to the service"
       },
-      "html": "<a href=\"#\" class=\"tna-button\" aria-label=\"Log in to the service\" title=\"Log in to the service\">Log in</a>"
+      "html": "<a href=\"#\" class=\"tna-button\" title=\"Log in to the service\">Log in</a>"
     },
     {
       "name": "accent",

package/nationalarchives/components/button/template.njk

@@ -16,7 +16,7 @@
   {%- set containerClasses = containerClasses.concat('tna-button--icon-right') -%}
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
-<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button{% if classes %} {{ classes }}{% endif %}"{%- if params.buttonElement %} type="{{ params.buttonType or 'button' }}"{% endif -%}{%- if params.title %} aria-label="{{ params.title }}" title="{{ params.title }}"{% elif params.iconOnly and params.text %} title="{{ params.text }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button{% if classes %} {{ classes }}{% endif %}"{%- if params.buttonElement %} type="{{ params.buttonType or 'button' }}"{% endif -%}{%- if params.title %} title="{{ params.title }}"{% elif params.iconOnly and params.text %} title="{{ params.text }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
   {% if params.icon -%}
   <i class="fa-solid fa-{{ params.icon }}" aria-hidden="true"></i>
   {% elif params.iconSvg -%}

package/nationalarchives/components/card/fixtures.json

@@ -229,7 +229,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" aria-label=\"Go and do the action\" title=\"Go and do the action\">Card action</a></div></div></article>"
+      "html": "<article class=\"tna-card\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></div></article>"
     },
     {
       "name": "with actions with classes",

package/nationalarchives/components/card/template.njk

@@ -102,7 +102,7 @@
     {%- if params.actions %}
       <div class="tna-card__actions">
       {%- for item in params.actions %}
-        <a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} aria-label="{{ item.title }}" title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+        <a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
           {{ item.text }}
         </a>
       {%- endfor %}

package/nationalarchives/components/code-block/fixtures.json

@@ -14,7 +14,7 @@
         "filename": "example.txt",
         "code": "Plaintext code block"
       },
-      "html": "<div class=\"tna-code-block\" title=\"example.txt\"><button class=\"tna-button tna-code-block__copy tna-button--small tna-button--plain\" type=\"button\" aria-label=\"Copy code for example.txt\" title=\"Copy code for example.txt\" hidden aria-live=\"assertive\">Copy code</button><pre class=\"tna-code-block__pre\" tabindex=\"0\" role=\"region\" aria-label=\"Code block: example.txt\"><code class=\"language-plain\">Plaintext code block</code></pre></div>"
+      "html": "<div class=\"tna-code-block\" title=\"example.txt\"><button class=\"tna-button tna-code-block__copy tna-button--small tna-button--plain\" type=\"button\" title=\"Copy code for example.txt\" hidden aria-live=\"assertive\">Copy code</button><pre class=\"tna-code-block__pre\" tabindex=\"0\" role=\"region\" aria-label=\"Code block: example.txt\"><code class=\"language-plain\">Plaintext code block</code></pre></div>"
     },
     {
       "name": "with language",

package/nationalarchives/components/date-input/macro-options.json

@@ -40,7 +40,8 @@
     "name": "fields",
     "type": "array",
     "required": false,
-    "description": "An array of fields to display. Can be `d`, `m` or `y`. Order is preserved unless `progressive` is true."
+    "description": "An array of fields to display. Can be `d`, `m` or `y`. Order is preserved unless `progressive` is true.",
+    "default": ["d", "m", "y"]
   },
   {
     "name": "value",

package/nationalarchives/components/footer/fixtures.json

@@ -182,7 +182,7 @@
         "themeSelector": true,
         "cookiesUrl": "/cookies/"
       },
-      "html": "<footer class=\"tna-footer\" data-module=\"tna-footer\"><section class=\"tna-footer__theme-selector tna-background-tint\" data-theme-on-load=\"light\" hidden><div class=\"tna-container tna-!--padding-vertical-xs\"><div class=\"tna-column tna-column--flex-1\"><h2 class=\"tna-visually-hidden\">Change the site theme</h2></div><div class=\"tna-column tna-column--full-small tna-column--full-tiny\"><div class=\"tna-button-group tna-button-group--small\"><button class=\"tna-button tna-footer__theme-selector-button tna-button--plain\" type=\"button\" aria-label=\"Change to using the system theme\" title=\"Change to using the system theme\" value=\"system\" aria-current=\"false\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M512 320C512 214 426 128 320 128L320 512C426 512 512 426 512 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z\" /></svg>System theme</button><button class=\"tna-button tna-footer__theme-selector-button\" type=\"button\" aria-label=\"Change to using the light theme\" title=\"Change to using the light theme\" value=\"light\" aria-current=\"true\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M320 32C328.4 32 336.3 36.4 340.6 43.7L396.1 136.3L500.9 110C509.1 108 517.8 110.4 523.7 116.3C529.6 122.2 532 131 530 139.1L503.7 243.8L596.4 299.3C603.6 303.6 608.1 311.5 608.1 319.9C608.1 328.3 603.7 336.2 596.4 340.5L503.7 396.1L530 500.8C532 509 529.6 517.7 523.7 523.6C517.8 529.5 509 532 500.9 530L396.2 503.7L340.7 596.4C336.4 603.6 328.5 608.1 320.1 608.1C311.7 608.1 303.8 603.7 299.5 596.4L243.9 503.7L139.2 530C131 532 122.4 529.6 116.4 523.7C110.4 517.8 108 509 110 500.8L136.2 396.1L43.6 340.6C36.4 336.2 32 328.4 32 320C32 311.6 36.4 303.7 43.7 299.4L136.3 243.9L110 139.1C108 130.9 110.3 122.3 116.3 116.3C122.3 110.3 131 108 139.2 110L243.9 136.2L299.4 43.6L301.2 41C305.7 35.3 312.6 31.9 320 31.9zM320 176C240.5 176 176 240.5 176 320C176 399.5 240.5 464 320 464C399.5 464 464 399.5 464 320C464 240.5 399.5 176 320 176zM320 416C267 416 224 373 224 320C224 267 267 224 320 224C373 224 416 267 416 320C416 373 373 416 320 416z\" /></svg>Light theme</button><button class=\"tna-button tna-footer__theme-selector-button tna-button--plain\" type=\"button\" aria-label=\"Change to using the dark theme\" title=\"Change to using the dark theme\" value=\"dark\" aria-current=\"false\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z\" /></svg>Dark theme</button></div><div class=\"tna-footer__theme-selector-notice\" hidden><p>To save your preference, <button type=\"button\" class=\"tna-footer__theme-selector-enable-settings-cookies\">enable settings cookies</button>. Review your <a href=\"/cookies/\">cookie preferences</a>.</p></div></div></div></section><div class=\"tna-footer__inner\"><div class=\"tna-container\"><div class=\"tna-column tna-column--flex-1\" itemscope itemtype=\"https://schema.org/Organization\"><span class=\"tna-logo\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\" aria-hidden=\"true\" focusable=\"false\"><path class=\"tna-logo__background\" fill=\"transparent\" d=\"M0 0h160v160H0z\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 1.9V52.7H79.05V1.9H1.9Zm79.05 0V52.7H158.1V1.9H80.95ZM1.9 54.6v50.8H158.1V54.6H1.9Zm0 52.7v50.8H158.1V107.3H1.9M0 0H160V160H0V0Z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></span><h2 class=\"tna-heading-m tna-footer__title\" itemprop=\"name\" translate=\"no\">The National Archives</h2><address class=\"tna-footer__address\" translate=\"no\" itemprop=\"address\" itemscope itemtype=\"https://schema.org/PostalAddress\"><meta itemprop=\"streetAddress\" content=\"Bessant Drive\"><span itemprop=\"addressLocality\">Kew</span>, <span itemprop=\"addressRegion\">Richmond</span><br><span itemprop=\"postalCode\">TW9 4DU</span><meta itemprop=\"addressCountry\" content=\"GB\"></address><meta itemprop=\"foundingDate\" content=\"2003-04\"><div itemprop=\"parentOrganization\" itemscope itemtype=\"https://schema.org/Organization\"><meta itemprop=\"name\" content=\"Department for Culture, Media and Sport\"><meta itemprop=\"url\" content=\"https://gov.uk/dcms\"></div></div></div><div class=\"tna-container\"><div class=\"tna-column--full\"><hr></div></div><div class=\"tna-container tna-footer__licence\"><div class=\"tna-column tna-column--full-tiny\"><svg class=\"tna-footer__licence-logo\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 483.2 195.7\" width=\"60\" height=\"24\"><title>Open Government Licence</title><path fill=\"currentColor\" d=\"M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145\" /></svg></div><div class=\"tna-column tna-column--flex-1\"><p>All content is available under the <a href=\"https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/\" class=\"tna-footer__link\">Open Government Licence v3.0</a>, except where otherwise stated</p></div><div class=\"tna-column tna-column--full-small tna-column--full-tiny tna-footer__govuk\"><a href=\"https://www.gov.uk/\" class=\"tna-footer__govuk-link\"><svg aria-hidden=\"true\" class=\"tna-footer__govuk-logotype-crown\" width=\"32\" height=\"30\" focusable=\"false\" viewBox=\"0 0 32 30\" xmlns=\"http://www.w3.org/2000/svg\"><title translate=\"no\">GOV.UK</title><path d=\"M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8\" fill=\"currentColor\" fill-rule=\"evenodd\" /></svg>GOV.UK</a></div></div></div></footer>"
+      "html": "<footer class=\"tna-footer\" data-module=\"tna-footer\"><section class=\"tna-footer__theme-selector tna-background-tint\" data-theme-on-load=\"light\" hidden><div class=\"tna-container tna-!--padding-vertical-xs\"><div class=\"tna-column tna-column--flex-1\"><h2 class=\"tna-visually-hidden\">Change the site theme</h2></div><div class=\"tna-column tna-column--full-small tna-column--full-tiny\"><div class=\"tna-button-group tna-button-group--small\"><button class=\"tna-button tna-footer__theme-selector-button tna-button--plain\" type=\"button\" title=\"Change to using the system theme\" value=\"system\" aria-current=\"false\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M512 320C512 214 426 128 320 128L320 512C426 512 512 426 512 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z\" /></svg>System theme</button><button class=\"tna-button tna-footer__theme-selector-button\" type=\"button\" title=\"Change to using the light theme\" value=\"light\" aria-current=\"true\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d=\"M320 32C328.4 32 336.3 36.4 340.6 43.7L396.1 136.3L500.9 110C509.1 108 517.8 110.4 523.7 116.3C529.6 122.2 532 131 530 139.1L503.7 243.8L596.4 299.3C603.6 303.6 608.1 311.5 608.1 319.9C608.1 328.3 603.7 336.2 596.4 340.5L503.7 396.1L530 500.8C532 509 529.6 517.7 523.7 523.6C517.8 529.5 509 532 500.9 530L396.2 503.7L340.7 596.4C336.4 603.6 328.5 608.1 320.1 608.1C311.7 608.1 303.8 603.7 299.5 596.4L243.9 503.7L139.2 530C131 532 122.4 529.6 116.4 523.7C110.4 517.8 108 509 110 500.8L136.2 396.1L43.6 340.6C36.4 336.2 32 328.4 32 320C32 311.6 36.4 303.7 43.7 299.4L136.3 243.9L110 139.1C108 130.9 110.3 122.3 116.3 116.3C122.3 110.3 131 108 139.2 110L243.9 136.2L299.4 43.6L301.2 41C305.7 35.3 312.6 31.9 320 31.9zM320 176C240.5 176 176 240.5 176 320C176 399.5 240.5 464 320 464C399.5 464 464 399.5 464 320C464 240.5 399.5 176 320 176zM320 416C267 416 224 373 224 320C224 267 267 224 320 224C373 224 416 267 416 320C416 373 373 416 320 416z\" /></svg>Light theme</button><button class=\"tna-button tna-footer__theme-selector-button tna-button--plain\" type=\"button\" title=\"Change to using the dark theme\" value=\"dark\" aria-current=\"false\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z\" /></svg>Dark theme</button></div><div class=\"tna-footer__theme-selector-notice\" hidden><p>To save your preference, <button type=\"button\" class=\"tna-footer__theme-selector-enable-settings-cookies\">enable settings cookies</button>. Review your <a href=\"/cookies/\">cookie preferences</a>.</p></div></div></div></section><div class=\"tna-footer__inner\"><div class=\"tna-container\"><div class=\"tna-column tna-column--flex-1\" itemscope itemtype=\"https://schema.org/Organization\"><span class=\"tna-logo\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\" aria-hidden=\"true\" focusable=\"false\"><path class=\"tna-logo__background\" fill=\"transparent\" d=\"M0 0h160v160H0z\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 1.9V52.7H79.05V1.9H1.9Zm79.05 0V52.7H158.1V1.9H80.95ZM1.9 54.6v50.8H158.1V54.6H1.9Zm0 52.7v50.8H158.1V107.3H1.9M0 0H160V160H0V0Z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></span><h2 class=\"tna-heading-m tna-footer__title\" itemprop=\"name\" translate=\"no\">The National Archives</h2><address class=\"tna-footer__address\" translate=\"no\" itemprop=\"address\" itemscope itemtype=\"https://schema.org/PostalAddress\"><meta itemprop=\"streetAddress\" content=\"Bessant Drive\"><span itemprop=\"addressLocality\">Kew</span>, <span itemprop=\"addressRegion\">Richmond</span><br><span itemprop=\"postalCode\">TW9 4DU</span><meta itemprop=\"addressCountry\" content=\"GB\"></address><meta itemprop=\"foundingDate\" content=\"2003-04\"><div itemprop=\"parentOrganization\" itemscope itemtype=\"https://schema.org/Organization\"><meta itemprop=\"name\" content=\"Department for Culture, Media and Sport\"><meta itemprop=\"url\" content=\"https://gov.uk/dcms\"></div></div></div><div class=\"tna-container\"><div class=\"tna-column--full\"><hr></div></div><div class=\"tna-container tna-footer__licence\"><div class=\"tna-column tna-column--full-tiny\"><svg class=\"tna-footer__licence-logo\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 483.2 195.7\" width=\"60\" height=\"24\"><title>Open Government Licence</title><path fill=\"currentColor\" d=\"M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145\" /></svg></div><div class=\"tna-column tna-column--flex-1\"><p>All content is available under the <a href=\"https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/\" class=\"tna-footer__link\">Open Government Licence v3.0</a>, except where otherwise stated</p></div><div class=\"tna-column tna-column--full-small tna-column--full-tiny tna-footer__govuk\"><a href=\"https://www.gov.uk/\" class=\"tna-footer__govuk-link\"><svg aria-hidden=\"true\" class=\"tna-footer__govuk-logotype-crown\" width=\"32\" height=\"30\" focusable=\"false\" viewBox=\"0 0 32 30\" xmlns=\"http://www.w3.org/2000/svg\"><title translate=\"no\">GOV.UK</title><path d=\"M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8\" fill=\"currentColor\" fill-rule=\"evenodd\" /></svg>GOV.UK</a></div></div></div></footer>"
     },
     {
       "name": "with classes",

package/nationalarchives/components/hero/fixtures.json

@@ -345,7 +345,7 @@
           }
         ]
       },
-      "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--width-5-6-medium 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><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class=\"tna-button-group tna-hero__actions\"><a href=\"#\" class=\"tna-button\">Action 1</a><a href=\"#\" class=\"tna-button\"><i class=\"fa-solid fa-globe\" aria-hidden=\"true\"></i>Action 2</a><a href=\"#\" class=\"tna-button tna-button--icon-right\" aria-label=\"Go and do the action\" title=\"Go and do the action\"><i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"></i>Action 3</a></div></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></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--width-5-6-medium 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><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class=\"tna-button-group tna-hero__actions\"><a href=\"#\" class=\"tna-button\">Action 1</a><a href=\"#\" class=\"tna-button\"><i class=\"fa-solid fa-globe\" aria-hidden=\"true\"></i>Action 2</a><a href=\"#\" class=\"tna-button tna-button--icon-right\" title=\"Go and do the action\"><i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"></i>Action 3</a></div></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></figure></header>"
     },
     {
       "name": "with classes",

package/nationalarchives/components/pagination/fixtures.json

@@ -40,7 +40,7 @@
           "href": "#next"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
     },
     {
       "name": "simple with no numbers",
@@ -68,7 +68,7 @@
           "title": "Next page"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#backwards\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" aria-label=\"Previous page\" title=\"Previous page\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Backwards</span></span></a></div><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#forwards\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" aria-label=\"Next page\" title=\"Next page\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Forwards</span></span></a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#backwards\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" title=\"Previous page\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Backwards</span></span></a></div><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#forwards\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" title=\"Next page\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Forwards</span></span></a></div></nav>"
     },
     {
       "name": "no numbers and prev/next descriptions",
@@ -124,7 +124,7 @@
         },
         "classes": "pagination__test-class"
       },
-      "html": "<nav class=\"tna-pagination pagination__test-class\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
+      "html": "<nav class=\"tna-pagination pagination__test-class\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
     },
     {
       "name": "with attributes",
@@ -168,7 +168,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\" data-testattribute=\"foobar\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 1\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 6\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"Page 7\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 8\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"Page 42\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\" data-testattribute=\"foobar\"><div class=\"tna-pagination__prev-next tna-pagination__prev-next--prev\"><a href=\"#previous\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Previous</span></span></a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 1\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 6\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" title=\"Page 7\" aria-current=\"page\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 8\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" title=\"Page 42\">42</a></li></ul><div class=\"tna-pagination__prev-next tna-pagination__prev-next--next\"><a href=\"#next\" class=\"tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d=\"M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z\" /></svg><span class=\"tna-pagination__prev-next-button-text\"><span class=\"tna-pagination__prev-next-button-title\">Next</span></span></a></div></nav>"
     }
   ]
 }

package/nationalarchives/components/textarea/TextAreaCharacterCount.mjs

@@ -0,0 +1,160 @@
+export default class TextAreaCharacterCount {
+  constructor($module, options = {}) {
+    this.$module = $module;
+    this.$formFieldInput =
+      this.$module && this.$module.querySelector(".tna-textarea");
+    this.$formFieldCharacterCount =
+      this.$module && this.$module.querySelector(".tna-textarea-count");
+    this.$formFieldCharacterCountScreenReader =
+      this.$module &&
+      this.$module.querySelector(".tna-textarea-count__screen-reader-status");
+    this.max = parseInt(this.$formFieldInput?.dataset?.maxLength, 10);
+    this.countType = this.$formFieldInput?.dataset?.countType || "characters";
+
+    if (
+      !this.$module ||
+      !this.$formFieldInput ||
+      !this.$formFieldCharacterCount ||
+      !this.$formFieldCharacterCountScreenReader ||
+      !this.max
+    ) {
+      return;
+    }
+
+    this.init(options);
+  }
+
+  init(options) {
+    this.threshold =
+      options.threshold ||
+      parseInt(this.$formFieldInput?.dataset?.countThreshold, 10) ||
+      /* eslint-disable-next-line no-magic-numbers */
+      0;
+    this.debounceDuration =
+      options.debounceDuration ||
+      parseInt(this.$formFieldInput?.dataset?.debounceDuration, 10) ||
+      /* eslint-disable-next-line no-magic-numbers */
+      1000;
+    /* eslint-disable-next-line no-magic-numbers */
+    this.intervalChecker = options.intervalChecker || 1000;
+    this.debounceTimeout = null;
+    this.lastInputValue = "";
+
+    this.$formFieldInput.addEventListener("input", () => {
+      this.handleInput();
+      this.lastInputTimestamp = Date.now();
+    });
+    this.$formFieldInput.addEventListener("focus", () => {
+      this.handleFocus();
+    });
+    this.$formFieldInput.addEventListener("blur", () => {
+      this.handleBlur();
+    });
+    this.updateVisualCharacterCount();
+    this.updateScreenReaderCharacterCount();
+  }
+
+  handleFocus() {
+    this.valueChecker = window.setInterval(() => {
+      if (
+        !this.lastInputTimestamp ||
+        /* eslint-disable-next-line no-magic-numbers */
+        Date.now() - this.intervalChecker / 2 >= this.lastInputTimestamp
+      ) {
+        this.updateIfValueChanged();
+      }
+    }, this.intervalChecker);
+  }
+
+  handleBlur() {
+    if (this.valueChecker) {
+      window.clearInterval(this.valueChecker);
+    }
+    this.updateScreenReaderCharacterCount();
+  }
+
+  updateIfValueChanged() {
+    if (this.$formFieldInput.value !== this.lastInputValue) {
+      this.lastInputValue = this.$formFieldInput.value;
+      this.updateVisualCharacterCount();
+      this.updateScreenReaderCharacterCount();
+    }
+  }
+
+  handleInput() {
+    this.updateVisualCharacterCount();
+    clearTimeout(this.debounceTimeout);
+    this.debounceTimeout = setTimeout(() => {
+      this.updateScreenReaderCharacterCount();
+    }, this.debounceDuration);
+  }
+
+  getCurrentLength() {
+    if (this.countType === "words") {
+      const trimmedValue = this.$formFieldInput.value.trim();
+      if (trimmedValue === "") {
+        /* eslint-disable-next-line no-magic-numbers */
+        return 0;
+      }
+      return trimmedValue.split(/\s+/).length;
+    }
+    return this.$formFieldInput.value.length;
+  }
+
+  getCurrentLengthMessage() {
+    const currentLength = this.getCurrentLength();
+    let typeLabel = this.countType;
+    /* eslint-disable-next-line no-magic-numbers */
+    if (Math.abs(this.max - currentLength) === 1) {
+      typeLabel = typeLabel.replace(/s$/, "");
+    }
+    if (currentLength > this.max) {
+      return `You have ${new Intl.NumberFormat().format(currentLength - this.max)} ${typeLabel} too many`;
+    }
+    return `You have ${new Intl.NumberFormat().format(this.max - currentLength)} ${typeLabel} remaining`;
+  }
+
+  isOverThreshold() {
+    return this.getCurrentLength() > this.max;
+  }
+
+  updateVisualCharacterCount() {
+    if (this.threshold) {
+      /* eslint-disable-next-line no-magic-numbers */
+      if (this.getCurrentLength() > this.max * (this.threshold / 100)) {
+        this.showCharacterCount();
+      } else {
+        this.hideCharacterCount();
+      }
+    }
+
+    this.$formFieldCharacterCount.innerText = this.getCurrentLengthMessage();
+    if (this.isOverThreshold()) {
+      this.$formFieldInput.classList.add("tna-textarea--error");
+      this.$formFieldCharacterCount.classList.add("tna-textarea-count--error");
+    } else {
+      this.$formFieldInput.classList.remove("tna-textarea--error");
+      this.$formFieldCharacterCount.classList.remove(
+        "tna-textarea-count--error",
+      );
+    }
+  }
+
+  updateScreenReaderCharacterCount() {
+    const currentLengthMessage = this.getCurrentLengthMessage();
+    this.$formFieldCharacterCountScreenReader.innerText = currentLengthMessage;
+  }
+
+  showCharacterCount() {
+    this.$formFieldCharacterCount.removeAttribute("hidden");
+    this.$formFieldCharacterCountScreenReader.removeAttribute("aria-hidden");
+  }
+
+  hideCharacterCount() {
+    this.$formFieldCharacterCount.setAttribute("hidden", "");
+    this.$formFieldCharacterCountScreenReader.setAttribute(
+      "aria-hidden",
+      "true",
+    );
+  }
+}