npm - @nationalarchives/frontend - Versions diffs - 0.1.65 → 0.2.1 - Mend

@nationalarchives/frontend 0.1.65 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (237) hide show

package/nationalarchives/components/error-summary/error-summary.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_imports.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/variables/_a11y.scss","../../../../src/nationalarchives/utilities/_areas.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_forms.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/utilities/_reset.scss","../../../../src/nationalarchives/utilities/_tables.scss","../../../../src/nationalarchives/components/error-summary/error-summary.scss"],"names":[],"mappings":"CAuDU,wHCkHV,cA5JM,qkDA+JJ,+BAHF,cA5IM,+iDAwJN,yUACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA7IA,4CAJA,gCAyLF,qKACE,qCAtLA,4CAJA,gCAqMF,+KACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCA5MA,4CAJA,gCA2NF,6BACE,6CACA,qBACA,0BACA,8BACA,iCACA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CAIA,kCACA,uCA7OA,4CAJA,gCAoPE,mCADF,yDAEI,gBACA,yBAIJ,uDACE,gBACA,wBAYJ,mBA7SM,qkDAyCJ,4CAuQA,+BAHF,mBA7RM,+iDAqSF,mCADF,+CA5SI,unDAiTF,+DALF,+CA5RI,gmDAsSJ,6CAtTI,snDAyTF,+BAHF,6CAtSI,gmDAqTN,kEACE,iDACA,yDACA,6CACA,kDACA,4CACA,4CACA,+CACA,gDACA,uCACA,+CACA,4CACA,iDACA,oDACA,wDAOF,wTACE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAGF,+DACE,6CACA,yDACA,yCACA,oDACA,8CACA,0DAQF,4DACE,iDACA,yDACA,6CACA,kDACA,wDAQF,kEACE,iDACA,yDACA,4CACA,iDACA,wDAQF,+DACE,+CACA,yDACA,8CACA,mDACA,sDAQF,4DACE,gDACA,yDACA,6CACA,kDACA,uDC3aF,2QACE,gBAEA,meACE,aAIJ,sBACE,gBAEA,8CACE,aCpBJ,8CAEE,qBACA,sBACA,oBACA,qBAEA,2BAEA,6BACA,uBACA,wBACA,sBAEA,0CAEA,oBAEA,iCAQF,QACE,UFmEE,yDGvFF,eCRqB,IF+CvB,SCnCE,iBDyCA,qDACE,aGnDJ,aACE,iBACA,oBC4EA,wBD9EF,aAKI,iBACA,qBAIJ,WACE,aCmEA,wBDpEF,WAMI,cLgbF,8BKtbF,WLkEM,+CA8WJ,+BKhbF,WLkEM,+CKrDJ,kBACE,aE1BJ,cPoDE,4CO9CE,mCADF,4BPcI,6oDOTF,+DALF,4BP8BI,snDOpBJ,0BPII,4oDODF,+BAHF,0BPoBI,snDOgCJ,oBPWI,oDOPJ,yBPOI,8CQ7EN,aACE,gBAEA,gBACE,eAGF,gBACE,eF+CF,wBEvDF,aAYI,iBFqCF,kDEhCI,sBACE,aAFS,EACX,sBACE,aAFS,EACX,sBACE,aAFS,EACX,sBACE,aAFS,GFuCf,wBE9BI,qBACE,aAFS,EACX,qBACE,aAFS,EACX,qBACE,aAFS,EACX,qBACE,aAFS,GAOf,oBACE,mBAGF,mDACE,eC/BJ,cT0CE,gCUvBA,YCIA,qBDHA,kBACA,yBACA,mCAfA,YCkBiB,IFtBjB,cACA,kCACA,8BACA,sBACA,kCACA,mCAGF,oBACE,cCdA,mBDgBA,YEGiB,KLyDjB,wBG/DF,oBCbE,qBDuBF,OCNE,YCYsB,IFCtB,IACE,gBAIJ,EACE,gCAEA,mBAEA,STIA,2BSCA,UTDA,mCSKA,iBCOA,0BACA,0BCpCsC,MFkCpC,qCTXF,2BSiBF,MC7DE,qBDiEF,sDACE,sBACA,gBAEA,aACA,mBACA,QT3BA,gCUNA,YCuBA,sBDtBA,kBACA,yBAIE,YCmBiB,ID/DnB,mBAmDA,gBACA,yBDuBA,cACA,kBAES,yDACP,0BAEA,2ECzBF,0BACA,0BCpCsC,MF+DlC,yGACE,cAKN,oFT9CA,4CA4YA,+BS9VA,oFT9CA,qBSuDF,uGACE,UAEA,+BAEA,YAGE,mJACE,cAKN,wJTvCM,mDS4CJ,iCACA,yBAEA,gTT1CI,iDSqFN,eAGE,aACA,eACA,aAEA,gBAEA,qBACE,aACA,mBAIJ,8STvIE,qCSyIA,iBAEA,wUACE,qBAEA,mBAEA,maACE,YAEA,iBAEA,qBAEA,gBAIA,ifACE,kBAKN,yYACE,oBAIJ,yECjLE,YCcA,gDDbA,YCgBoB,IDsBpB,gBAxEA,eJwCA,kDG0KF,yEClNE,gBJ4EA,wBGsIF,yEClNE,mBD+NF,sEC9LE,YCcA,gDDbA,YCgBoB,IDsBpB,YCMsB,ID9EtB,kBJwCA,kDGuLF,sEC/NE,oBJ8CA,kDGiLF,sEC/NE,mBJoDA,wBG2KF,sEC/NE,qBD4OF,sEC3NE,YCYsB,ID2CtB,YCYsB,IDpFtB,mBJwCA,kDGoMF,sEC5OE,qBJ8CA,kDG8LF,sEC5OE,mBJoDA,wBGwLF,sEC5OE,qBDyPF,sECxOE,YCYsB,ID2CtB,YCkBsB,ID1FtB,mBDsQF,sHAEE,gBACA,iBAEA,sNACE,cAGF,sIACE,gBA2BE,qCACE,aAcN,wBACE,eAaF,mBACE,SAEA,cAoBJ,gBAEE,eACA,gBACA,cACA,4BTpSI,+DSwSJ,uBC3VA,YCewB,IF8UtB,YACA,eAEA,4CACE,mBAGF,0CACE,oBAIJ,0BACE,gBCvXF,eD2XE,kCACE,gBACA,mBHzUJ,wBG2SF,gBAmCI,0BAMJ,qBCxYE,mBV4CA,qCMgCA,wBG4TF,qBCxYE,mBDmZF,kBC7WE,YCuBA,sBDtBA,kBACA,yBAIE,YCmBiB,IXnBnB,qCU5CA,mBDyZA,gBH7UA,wBGuUF,kBCnZE,mBD+ZA,oBACE,gCAEA,0BC1WF,0BACA,0BCpCsC,MCrBxC,oBAGE,mBAOE,wBACE,kBZqDA,8CY/CJ,oBACE,OAEA,YAGF,qCAEE,aACA,sBACA,uBACA,QAGF,sEAEE,mBACA,uBN0CF,wBM7CA,sEAMI,uBAIJ,0BACE,aAGF,kBACE,kBAGF,mBACE,SAoBA,uBACE,cFlDJ,YCIA,qBDHA,kBACA,yBACA,mCAfA,YCkBiB,ICoDjB,gBACE,aFhFF,eV4CA,yCY0CA,yBACE,aZ3CF,8BU3BA,YCYsB,IEnCxB,cASE,gBACA,WACA,YAUA,iCAGF,oBACE,gBACA,SACA,UAEA,6FACE,aACA,sBAIJ,UACE,OC9BF,QACE,qBAGF,gBAEE,gBAEA,mBAEA,wCACE,aAGF,8BACE,eAEA,gBAGF,4EACE,kBAIA,sCdmBF,iDU3BA,YCYsB,IGGpB,sDACE,cdWJ,yCUnCA,YCkBiB,IGanB,cAGE,aACA,eACA,cAIA,iBACE,kBAEA,YAOF,mCACE,eAGF,wCACE,aAWF,0Cd/BA,2Bc8EF,QAGE,aACA,eAEA,oBACE,aAGF,sBAEE,SACA,iBAEA,sBAEA,kBAEA,qBAIA,kBACE,cACA,eAGF,kBACE,cACA,gBAIJ,WACE,UJ5IF,YCYsB,IGqItB,WACE,UAEA,cACE,gBAKF,yBACE,6BAEA,kBAEA,mCACE,iBAEA,kBACA,QACA,UdzIN,4Cc4IM,gBAEA,2BAMJ,uCACE,6BAEA,iDACE,gBAEA,OAIJ,uCACE,kBR7JJ,kDQ0KE,WACE,UAGF,WACE,UAEA,cACE,iBA/IN,wCAEE,WACA,cAGF,oBACE,kBAIA,kCACE,cACA,iBAEA,4CACE,aAIJ,kCACE,cACA,cAKF,wCd5DF,4DAJA,gCcsEE,wCACE,cAEA,oCRjEJ,wBQ6BA,sBAEE,WACA,cAGF,WACE,kBAIA,yBACE,cACA,iBAEA,mCACE,aAIJ,yBACE,cACA,cAKF,+Bd5DF,4DAJA,gCcsEE,+BACE,cAEA,qCdyUJ,8BcpUF,Qd1DM,qDcgLF,sBAEE,oCdlLA,mDAwXJ,+Bc9TF,Qd1DM,qDcgLF,sBAEE,oCdlLA,mDCvBE,mDAEE,wBAFF,sDAEE,2BAFF,qDAEE,yBAFF,wDAEE,4BA2BE,mDAEE,0BAFF,iDAEE,2BAFF,iDAEE,2BAFF,iDAEE,2BAFF,mDAEE,2BAFF,qDAEE,4BAFF,sDAEE,6BAFF,oDAEE,8BAFF,oDAEE,8BAFF,oDAEE,8BAFF,sDAEE,8BAFF,wDAEE,+BAFF,qDAEE,2BAFF,mDAEE,4BAFF,mDAEE,4BAFF,mDAEE,4BAFF,qDAEE,4BAFF,uDAEE,6BAFF,wDAEE,8BAFF,sDAEE,+BAFF,sDAEE,+BAFF,sDAEE,+BAFF,wDAEE,+BAFF,0DAEE,gCKIZ,wBLwBY,mDAEE,0BAFF,iDAEE,2BAFF,iDAEE,2BAFF,iDAEE,2BAFF,mDAEE,2BAFF,qDAEE,2BAFF,sDAEE,6BAFF,oDAEE,8BAFF,oDAEE,8BAFF,oDAEE,8BAFF,sDAEE,8BAFF,wDAEE,8BAFF,qDAEE,2BAFF,mDAEE,4BAFF,mDAEE,4BAFF,mDAEE,4BAFF,qDAEE,4BAFF,uDAEE,4BAFF,wDAEE,8BAFF,sDAEE,+BAFF,sDAEE,+BAFF,sDAEE,+BAFF,wDAEE,+BAFF,0DAEE,gCKpEd,6BLOM,+DAEE,wBAFF,kEAEE,2BAFF,iEAEE,yBAFF,oEAEE,4Bc5CR,uBACE,yBTwCF,kDLCM,iEAEE,wBAFF,oEAEE,2BAFF,mEAEE,yBAFF,sEAEE,4Bc5CR,wBACE,yBT8CF,kDLLM,+DAEE,wBAFF,kEAEE,2BAFF,iEAEE,yBAFF,oEAEE,4Bc5CR,uBACE,yBToDF,wBLXM,6DAEE,wBAFF,gEAEE,2BAFF,+DAEE,yBAFF,kEAEE,4Bc5CR,sBACE,yBA4BF,aADF,uBAEI,cCjCJ,EACE,SACA,UAEA,+BAJF,EAKI,0BACA,4BAGF,+BATF,EAUI,uBAIJ,6BAKE,eACA,YAEA,cAGF,aAEE,WAGF,SACE,wBAGF,GACE,qBhBgDI,gDgB9CJ,mBC/BF,WACE,WAEA,gBAEA,yBAGA,oBACE,iBAEA,oBPbF,eOkBA,iBACE,sBAGF,iBACE,mBAGF,iBPTA,YCYsB,IMDpB,mBAYF,oCAEE,iBjBsBE,2DiBlBF,4DACE,eAGF,0DACE,gBAGF,sDACE,iBAIJ,oCjBKI,qDiBDJ,sEjBCI,kDiBKF,eACE,eAKN,mBACE,WACA,mBACA,kBAEA,cAEA,kBACA,WX/BA,wBWuBF,mBAYI,mBACA,kBAEA,YC1FJ,mBAEE,alB8CA,4CA0BI,8CkBhEJ,yBACE,aAGF,yBACE,eAEA,gBAMF,yBRNA,YCYsB,IOHpB,wFlBkBF","file":"error-summary.css","sourcesContent":["@use \"../variables/assets\";\n@use \"../variables/typography\";\n@use \"../lib/functions\";\n\n@if typography.$use-local-fonts {\n @font-face {\n font-family: typography.$main-font-family-name;\n src: url(\"#{assets.$tna-font-path}/#{typography.$main-font-file}\");\n font-weight: typography.$main-font-weight;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: typography.$main-font-family-name;\n src: url(\"#{assets.$tna-font-path}/#{typography.$main-font-file-medium}\");\n font-weight: typography.$main-font-weight-medium;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: typography.$main-font-family-name;\n src: url(\"#{assets.$tna-font-path}/#{typography.$main-font-file-bold}\");\n font-weight: typography.$main-font-weight-bold;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: typography.$detail-font-family-name;\n src: url(\"#{assets.$tna-font-path}/#{typography.$detail-font-file}\");\n font-weight: typography.$detail-font-weight;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: typography.$detail-font-family-name;\n src: url(\"#{assets.$tna-font-path}/#{typography.$detail-font-file-bold}\");\n font-weight: typography.$detail-font-weight-bold;\n font-style: normal;\n font-display: swap;\n }\n} @else {\n $main-font-family-name: functions.str-replace(\n typography.$main-font-family-name,\n \" \",\n \"+\"\n );\n $detail-font-family-name: functions.str-replace(\n typography.$detail-font-family-name,\n \" \",\n \"+\"\n );\n @import url(\"https://fonts.googleapis.com/css2?family=#{$main-font-family-name}:wght@#{typography.$main-font-weight}..#{typography.$main-font-weight-bold}&family=#{$detail-font-family-name}:wght@#{typography.$detail-font-weight}..#{typography.$detail-font-weight-bold}&display=swap\"); /* stylelint-disable-line /\n}\n","@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\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error\", borders.$thick-border-width, solid);\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\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %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\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 .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 @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-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-accent-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-accent-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-accent-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-accent-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 \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../tools/a11y\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n // &::before,\n // &::after {\n // content: \"\\00a0\";\n // }\n}\n\n:focus {\n z-index: 9;\n\n @include a11y.focus-outline;\n}\n\n// :focus-visible {\n// z-index: 9;\n\n// @include a11y.focus-outline;\n// }\n\n// @supports not selector(:focus-visible) {\n// :focus {\n// z-index: 9;\n\n// @include a11y.focus-outline;\n// }\n// }\n\n:active {\n @include a11y.active-outline;\n}\n\n.tna-\\!--no-focus-style,\n[tabindex=\"-1\"] {\n &:focus {\n outline: none;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-active-outline {\n outline-offset: a11y.$focus-outline-offset;\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n.tna-section {\n padding-top: spacing.space(3);\n padding-bottom: spacing.space(3);\n\n @include media.on-mobile {\n padding-top: spacing.space(2);\n padding-bottom: spacing.space(2);\n }\n}\n\n.tna-aside {\n padding: spacing.space(2);\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: spacing.space(1);\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: spacing.space(1);\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../tools/colour\";\n\n.tna-template {\n @include colour.light;\n\n @include colour.colour-background(\"background\");\n\n &--system-theme {\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--black-accent {\n @include colour.black-accent;\n }\n\n &--pink-accent {\n @include colour.pink-accent;\n }\n\n &--orange-accent {\n @include colour.orange-accent;\n }\n\n &--yellow-accent {\n @include colour.yellow-accent;\n }\n\n &--green-accent {\n @include colour.green-accent;\n }\n\n &--blue-accent {\n @include colour.blue-accent;\n }\n}\n\n.tna-background {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n}\n\n.tna-border {\n &-keyline {\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &-keyline-dark {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n\n.tna-accent {\n &-black {\n @include colour.black-accent;\n }\n\n &-pink {\n @include colour.pink-accent;\n }\n\n &-orange {\n @include colour.orange-accent;\n }\n\n &-yellow {\n @include colour.yellow-accent;\n }\n\n &-green {\n @include colour.green-accent;\n }\n\n &-blue {\n @include colour.blue-accent;\n }\n}\n","@use \"../tools/grid\";\n@use \"../tools/media\";\n\n.tna-columns {\n column-gap: grid.gutter-width();\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.gutter-width-tiny();\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../variables/typography\" as typographyVars;\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n direction: ltr;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n text-size-adjust: none;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.font-size(typographyVars.$body-font-size-px-mobile);\n }\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p {\n margin-top: spacing.space(1);\n }\n}\n\na {\n text-decoration-thickness: 1.5px;\n\n border-radius: 0.1px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n}\n\nsmall {\n @include typography.font-size(typographyVars.$body-font-size-px 0.85);\n}\n\n%chip {\n max-width: max-content;\n padding: spacing.space(0.125) spacing.space(0.25);\n\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n @include colour.colour-font(\"font-base\");\n @include typography.detail-font-small;\n line-height: 1;\n text-align: center;\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: underline;\n\n &:hover {\n @include typography.interacted-text-decoration;\n\n .fa-solid {\n color: inherit;\n }\n }\n }\n\n .fa-solid {\n @include colour.colour-font(\"icon-light\");\n\n @include colour.on-high-contrast {\n @include colour.colour-font(\"icon\");\n }\n }\n}\n\n%chip-plain {\n padding: 0;\n\n background-color: transparent;\n\n border: none;\n\n @at-root #{selector.unify(\"a\", &)} {\n .fa-solid {\n color: inherit;\n }\n }\n}\n\n%chip-accent {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 2px);\n\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n\n .tna-background-accent & {\n @include colour.contrast;\n\n @include colour.colour-border(\"contrast-background\");\n }\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &--black {\n @include colour.black-accent;\n }\n\n &--pink {\n @include colour.pink-accent;\n }\n\n &--orange {\n @include colour.orange-accent;\n }\n\n &--yellow {\n @include colour.yellow-accent;\n }\n\n &--green {\n @include colour.green-accent;\n }\n\n &--blue {\n @include colour.blue-accent;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n list-style: none;\n\n &__item {\n display: flex;\n align-items: center;\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n text-wrap: pretty;\n\n a {\n display: inline-block;\n\n vertical-align: top;\n\n &::after {\n content: \"\\203A\";\n\n padding-left: spacing.space(0.5);\n\n display: inline-block;\n\n font-weight: 700;\n }\n\n &:hover {\n &::after {\n padding-left: spacing.space(0.75);\n }\n }\n }\n\n strong {\n font-weight: inherit;\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.heading-generator(\n typographyVars.$heading-xl-font-size-default,\n typographyVars.$heading-xl-font-size-medium,\n typographyVars.$heading-xl-font-size-small,\n typographyVars.$heading-xl-font-size-tiny,\n typographyVars.$heading-xl-line-height\n );\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.heading-generator(\n typographyVars.$heading-l-font-size-default,\n typographyVars.$heading-l-font-size-medium,\n typographyVars.$heading-l-font-size-small,\n typographyVars.$heading-l-font-size-tiny,\n typographyVars.$heading-l-line-height\n );\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.heading-generator(\n typographyVars.$heading-m-font-size-default,\n typographyVars.$heading-m-font-size-medium,\n typographyVars.$heading-m-font-size-small,\n typographyVars.$heading-m-font-size-tiny,\n typographyVars.$heading-m-line-height\n );\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.heading-generator(\n typographyVars.$heading-s-font-size-default,\n typographyVars.$heading-s-font-size-medium,\n typographyVars.$heading-s-font-size-small,\n typographyVars.$heading-s-font-size-tiny,\n typographyVars.$heading-s-line-height\n );\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: spacing.space(1) 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p {\n margin-top: spacing.space(1);\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n\n &--no-link-arrow {\n a {\n &::after {\n display: none;\n }\n }\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 spacing.space(0.25);\n\n @extend %chip;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: spacing.space(1) spacing.space(1) spacing.space(1) spacing.space(2);\n\n @include colour.thick-keyline-accent(left);\n\n &__quote {\n @include typography.main-font-weight-medium;\n quotes: auto;\n quotes: \"‘\" \"’\";\n\n :first-child::before {\n content: open-quote;\n }\n\n :last-child::after {\n content: close-quote;\n }\n }\n\n &__citation {\n margin-top: spacing.space(1);\n\n @include typography.font-size(16);\n\n &::before {\n content: \"\\2014\" \" \";\n content: \"\\2014\" \" \" / \"\";\n }\n }\n\n @include media.on-tiny {\n padding: spacing.space(0.5) spacing.space(0.5) spacing.space(0.5) #{spacing.space(\n 1\n )};\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.font-size(22);\n @include colour.colour-font(\"font-dark\");\n\n @include media.on-mobile {\n @include typography.font-size(20);\n }\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(22);\n line-height: 1.7;\n\n @include media.on-mobile {\n @include typography.font-size(20);\n }\n\n a {\n text-decoration-thickness: 1.5px;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n /\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"../utilities/typography\" as typographyUtilities;\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\nbutton,\ninput,\nselect {\n border-radius: 0.1px;\n}\n\n.tna-form {\n &__group {\n @include spacing.space-above;\n\n &--error {\n padding-left: spacing.space(1);\n\n @include colour.thick-keyline-error(left);\n }\n }\n\n &__fieldset {\n flex: 1;\n\n border: none;\n }\n\n &__group,\n &__fieldset {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: spacing.space(0.5);\n }\n\n &__group--inline,\n &__group--inline &__fieldset {\n flex-direction: row;\n align-items: flex-start;\n\n @include media.on-mobile {\n flex-direction: column;\n }\n }\n\n &__group-contents {\n flex: 0 0 39%;\n }\n\n &__legend {\n margin-bottom: spacing.space(0.5);\n }\n\n &__heading {\n margin: 0;\n\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n\n &--xs {\n font-size: 1em;\n @include typography.main-font;\n }\n }\n\n &__label {\n }\n\n &__hint {\n margin-top: 0;\n\n @include typography.font-size(16);\n @include colour.colour-font(\"font-light\");\n }\n\n &__error-message {\n margin-top: 0;\n\n @include colour.colour-font(\"form-error\");\n @include typography.main-font-weight-bold;\n }\n}\n",".tna-template {\n /\n * ------------------------------------------\n * A minimum page width of 320px is needed in\n * order to meet the WCAG AA success criteria\n * for 1.4.10 (Reflow)\n * https://www.w3.org/WAI/WCAG21/Understanding/reflow.html\n * ------------------------------------------\n /\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(:is(.tna-global-header, .tna-header)):has(.tna-main):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n }\n}\n\n.tna-main {\n flex: 1;\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../utilities/typography\" as typographyUtils;\n\n.tna-ul {\n list-style-type: disc;\n}\n\n.tna-ul,\n.tna-ol {\n margin: spacing.space(1) 0 0;\n\n padding: 0 0 0 spacing.space(2);\n\n &:first-child {\n margin-top: 0;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n\n & > li > & {\n padding-left: spacing.space(1);\n }\n\n > li {\n &::marker {\n @include colour.colour-font(\"accent-list-marker\");\n @include typography.main-font-weight-bold;\n }\n }\n\n &--dashed {\n > li::marker {\n content: \"— \";\n @include colour.colour-font(\"font-light\");\n @include typography.main-font-weight;\n }\n }\n}\n\n.tna-dl-chips {\n @include spacing.space-above(true);\n\n display: flex;\n flex-wrap: wrap;\n gap: spacing.space(0.75) spacing.space(1.5);\n\n @extend %chip-plain;\n\n dt {\n position: absolute;\n\n font-size: 0;\n }\n\n &__item {\n @extend %chip;\n }\n\n a#{&}__item {\n cursor: pointer;\n }\n\n &:not(#{&}--plain) {\n gap: spacing.space(0.5) spacing.space(1);\n }\n\n &--plain &__item {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) &__item {\n @extend %chip-accent;\n }\n\n &--plain a#{&}__item {\n @include colour.colour-font(\"link\");\n }\n}\n\n@mixin stacked-dl {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: spacing.space(1);\n }\n\n &.tna-dl--plain {\n dt {\n padding-top: 0;\n padding-bottom: 0;\n\n .fa-solid {\n margin-top: 0;\n }\n }\n\n dd {\n margin-left: 0;\n padding-top: 0;\n }\n }\n\n &:not(.tna-dl--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n\n @include colour.colour-font(\"font-base\");\n }\n\n dd {\n margin-left: 0;\n\n background: transparent !important;\n }\n }\n}\n\n.tna-dl {\n @include spacing.space-above(true);\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: spacing.space(0.5) spacing.space(1);\n\n box-sizing: border-box;\n\n position: relative;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-top: 0;\n padding-left: 0;\n }\n\n dd {\n padding-top: 0;\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: spacing.space(1);\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: spacing.space(2) !important;\n\n .fa-solid {\n margin-top: -#{spacing.space(0.25)};\n\n left: 0;\n }\n }\n\n dd {\n padding-left: spacing.space(2);\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.tint;\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n &--stacked {\n @include stacked-dl;\n }\n\n @include media.on-tiny {\n @include stacked-dl;\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none !important;\n }\n}\n\n@include spacing.no-spacing-generator;\n@include spacing.spacing-generator;\n\n@include media.on-large {\n @include spacing.no-spacing-generator(\"large\");\n @include hide-on(\"large\");\n}\n\n@include media.on-medium {\n @include spacing.no-spacing-generator(\"medium\");\n @include hide-on(\"medium\");\n}\n\n@include media.on-small {\n @include spacing.no-spacing-generator(\"small\");\n @include hide-on(\"small\");\n}\n\n@include media.on-tiny {\n @include spacing.no-spacing-generator(\"tiny\");\n @include hide-on(\"tiny\");\n}\n\n.tna-\\!--hide-on-print {\n @media print {\n display: none;\n }\n}\n","@use \"../tools/colour\";\n\n {\n margin: 0;\n padding: 0;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n transition: none !important;\n }\n\n @media (prefers-contrast: more) {\n background-image: none;\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none !important;\n}\n\nhr {\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/grid\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-table {\n width: 100%;\n\n text-align: left;\n\n border-collapse: collapse;\n @include spacing.space-above;\n\n &__caption {\n padding: spacing.space(1) 0 0;\n\n caption-side: bottom;\n\n @include typography.font-size(16);\n }\n\n &__head {\n vertical-align: bottom;\n }\n\n &__body {\n vertical-align: top;\n }\n\n &__foot {\n @include typography.main-font-weight-bold;\n vertical-align: top;\n }\n\n &__row {\n }\n\n &__header {\n }\n\n &__cell {\n }\n\n &__header,\n &__cell {\n padding: spacing.space(0.25) spacing.space(1);\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n\n &--numeric {\n text-align: right;\n }\n }\n\n &__head &__header {\n @include colour.thick-keyline-dark(bottom);\n }\n\n &__foot &__header,\n &__foot &__cell {\n @include colour.thick-keyline-dark(top);\n }\n\n p {\n + p {\n margin-top: spacing.space(0.25);\n }\n }\n}\n\n.tna-table-wrapper {\n width: 100%;\n padding-right: grid.gutter-width();\n padding-left: grid.gutter-width();\n\n overflow: auto;\n\n position: relative;\n left: -#{grid.gutter-width()};\n @include spacing.space-above;\n\n @include media.on-tiny {\n padding-right: grid.gutter-width-tiny();\n padding-left: grid.gutter-width-tiny();\n\n left: -#{grid.gutter-width-tiny()};\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n\n.tna-error-summary {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n @include colour.plain;\n\n @include colour.colour-background(\"background\");\n\n @include colour.colour-border(\"form-error\", 0.3125rem, solid);\n\n &:focus {\n outline: none;\n }\n\n &__list {\n margin: spacing.space(0.5) 0 0;\n\n list-style: none;\n }\n\n &__item {\n }\n\n &__link {\n @include typography.main-font-weight-bold;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"form-error\");\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/error-summary/error-summary.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AA6KA,mBAhKM,oxDAmKJ,+BAHF,mBAhJM,8vDCnBN,mBACE,gBAEA,+BACE,aCTJ,mBAEE,aF+CA,4CA0BI,wDEjEJ,yBACE,aAGF,yBACE,eAEA,gBAMF,yBCLA,YCYsB,IFJpB,wFFmBF","file":"error-summary.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 \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-error-summary {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n @include colour.always-light;\n\n @include colour.colour-background(\"background\");\n\n @include colour.colour-border(\"form-error-border\", 0.3125rem, solid);\n\n &:focus {\n outline: none;\n }\n\n &__list {\n margin: spacing.space(0.5) 0 0;\n\n list-style: none;\n }\n\n &__item {\n }\n\n &__link {\n @include typography.main-font-weight-bold;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"form-error-text\");\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n"]}

package/nationalarchives/components/error-summary/error-summary.js CHANGED Viewed

@@ -1,2 +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";var e={d:(t,o)=>{for(var r in o)e.o(o,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:o[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function r(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,n(r.key),r)}}function n(e){var t=function(e,t){if("object"!=o(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!=o(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==o(t)?t:t+""}e.r(t),e.d(t,{ErrorSummary:()=>i});var i=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t},t=[{key:"init",value:function(){var e;this.$module&&(null!==(e="true"===this.$module.getAttribute("data-disableautofocus"))&&void 0!==e&&e||this.setFocus(this.$module))}},{key:"setFocus",value:function(e){var t,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=e.getAttribute("tabindex");function n(){var t;null===(t=o.onBlur)||void 0===t||t.call(e),r||e.removeAttribute("tabindex")}r||e.setAttribute("tabindex","-1"),e.addEventListener("focus",(function(){e.addEventListener("blur",n,{once:!0})}),{once:!0}),null===(t=o.onBeforeFocus)||void 0===t||t.call(e),e.focus()}}],t&&r(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return t})()));
+!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";var e={d:(t,o)=>{for(var r in o)e.o(o,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:o[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function r(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,n(r.key),r)}}function n(e){var t=function(e){if("object"!=o(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==o(t)?t:t+""}e.r(t),e.d(t,{ErrorSummary:()=>i});var i=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t},t=[{key:"init",value:function(){this.$module&&("true"===this.$module.getAttribute("data-disableautofocus")||this.setFocus(this.$module))}},{key:"setFocus",value:function(e){var t,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=e.getAttribute("tabindex");function n(){var t;null===(t=o.onBlur)||void 0===t||t.call(e),r||e.removeAttribute("tabindex")}r||e.setAttribute("tabindex","-1"),e.addEventListener("focus",(function(){e.addEventListener("blur",n,{once:!0})}),{once:!0}),null===(t=o.onBeforeFocus)||void 0===t||t.call(e),e.focus()}}],t&&r(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return t})()));
 //# sourceMappingURL=error-summary.js.map

package/nationalarchives/components/error-summary/error-summary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components/error-summary/error-summary.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,~~4sBCLvD~~,IAAMC,EAAY,WAGtB,O,EAFD,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,CACjB,E,EAAC,EAAAf,IAAA,OAAAa,MAED,~~WAAO~~,~~IAAAK,EACAD,~~KAAKF,~~UAKqD~~,~~QADzCG~~,~~EACmC,SAAvDD,~~KAAKF,~~QAAQI~~,aAAa,~~gCAAmC~~,~~IAAAD~~,~~GAAAA~~,~~GAG7DD,KAAKG,SAASH,~~KAAKF,SAEvB,GAAC,CAAAf,IAAA,WAAAa,MAED,~~SAASQ~~,GAAwB,IAAAC,EAAdC,EAAOC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,CAAC,EACtBG,EAAcN,EAASF,aAAa,YAgB1C,SAASS,IAAS,IAAAC,EACF,QAAdA,EAAAN,EAAQK,cAAM,IAAAC,GAAdA,~~EAAgBnB~~,~~KAAKW~~,GAEhBM,GACHN,EAASS,gBAAgB,WAE7B,CApBKH,GACHN,EAASU,aAAa,WAAY,MAsBpCV,EAASW,iBAAiB,SAhB1B,WACEX,EAASW,iBAAiB,OAAQJ,EAAQ,CAAEK,MAAM,GACpD,GAc4C,CAAEA,MAAM,IAG/B,QAArBX,EAAAC,EAAQW,qBAAa,IAAAZ,GAArBA,~~EAAuBZ~~,~~KAAKW~~,GAC5BA,EAASc,OACX,I,gFAAC,CAjDsB,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/error-summary/error-summary.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 ErrorSummary {\n constructor($module) {\n this.$module = $module;\n }\n\n init() {\n if (!this.$module) {\n return;\n }\n\n const disableAutoFocus =\n this.$module.getAttribute(\"data-disableautofocus\") === \"true\" ?? false;\n\n if (!disableAutoFocus) {\n this.setFocus(this.$module);\n }\n }\n\n setFocus($element, options = {}) {\n const isFocusable = $element.getAttribute(\"tabindex\");\n\n if (!isFocusable) {\n $element.setAttribute(\"tabindex\", \"-1\");\n }\n\n /*\n Handle element focus\n /\n function onFocus() {\n $element.addEventListener(\"blur\", onBlur, { once: true });\n }\n\n /\n Handle element blur\n */\n function onBlur() {\n options.onBlur?.call($element);\n\n if (!isFocusable) {\n $element.removeAttribute(\"tabindex\");\n }\n }\n\n // Add listener to reset element on blur, after focus\n $element.addEventListener(\"focus\", onFocus, { once: true });\n\n // Focus element\n options.onBeforeFocus?.call($element);\n $element.focus();\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","ErrorSummary","$module","_classCallCheck","this","~~_ref","~~getAttribute","setFocus","$element","_options$onBeforeFocu","options","arguments","length","undefined","isFocusable","onBlur","_options$onBlur","removeAttribute","setAttribute","addEventListener","once","onBeforeFocus","focus"],"sourceRoot":""}
1	+ {"version":3,"file":"components/error-summary/error-summary.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,0sBCLvD,IAAMC,EAAY,WAGtB,O,EAFD,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,CACjB,E,EAAC,EAAAf,IAAA,OAAAa,MAED,WACOI,KAAKF,UAK+C,SAAvDE,KAAKF,QAAQG,aAAa,0BAG1BD,KAAKE,SAASF,KAAKF,SAEvB,GAAC,CAAAf,IAAA,WAAAa,MAED,SAASO,GAAwB,IAAAC,EAAdC,EAAOC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,CAAC,EACtBG,EAAcN,EAASF,aAAa,YAgB1C,SAASS,IAAS,IAAAC,EACF,QAAdA,EAAAN,EAAQK,cAAM,IAAAC,GAAdA,EAAgBlB,KAAKU,GAEhBM,GACHN,EAASS,gBAAgB,WAE7B,CApBKH,GACHN,EAASU,aAAa,WAAY,MAsBpCV,EAASW,iBAAiB,SAhB1B,WACEX,EAASW,iBAAiB,OAAQJ,EAAQ,CAAEK,MAAM,GACpD,GAc4C,CAAEA,MAAM,IAG/B,QAArBX,EAAAC,EAAQW,qBAAa,IAAAZ,GAArBA,EAAuBX,KAAKU,GAC5BA,EAASc,OACX,I,gFAAC,CAjDsB,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/error-summary/error-summary.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 ErrorSummary {\n constructor($module) {\n this.$module = $module;\n }\n\n init() {\n if (!this.$module) {\n return;\n }\n\n const disableAutoFocus =\n this.$module.getAttribute(\"data-disableautofocus\") === \"true\" \|\| false;\n\n if (!disableAutoFocus) {\n this.setFocus(this.$module);\n }\n }\n\n setFocus($element, options = {}) {\n const isFocusable = $element.getAttribute(\"tabindex\");\n\n if (!isFocusable) {\n $element.setAttribute(\"tabindex\", \"-1\");\n }\n\n /*\n Handle element focus\n /\n function onFocus() {\n $element.addEventListener(\"blur\", onBlur, { once: true });\n }\n\n /\n Handle element blur\n */\n function onBlur() {\n options.onBlur?.call($element);\n\n if (!isFocusable) {\n $element.removeAttribute(\"tabindex\");\n }\n }\n\n // Add listener to reset element on blur, after focus\n $element.addEventListener(\"focus\", onFocus, { once: true });\n\n // Focus element\n options.onBeforeFocus?.call($element);\n $element.focus();\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","ErrorSummary","$module","_classCallCheck","this","getAttribute","setFocus","$element","_options$onBeforeFocu","options","arguments","length","undefined","isFocusable","onBlur","_options$onBlur","removeAttribute","setAttribute","addEventListener","once","onBeforeFocus","focus"],"sourceRoot":""}

package/nationalarchives/components/error-summary/error-summary.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ export class ErrorSummary {
     }
     const disableAutoFocus =
-      this.$module.getAttribute("data-disableautofocus") === "true" ?? false;
+      this.$module.getAttribute("data-disableautofocus") === "true" || false;
     if (!disableAutoFocus) {
       this.setFocus(this.$module);

package/nationalarchives/components/error-summary/error-summary.scss CHANGED Viewed

@@ -2,17 +2,16 @@
 @use "../../tools/media";
 @use "../../tools/spacing";
 @use "../../tools/typography";
-@use "../../utilities";
 .tna-error-summary {
   @include spacing.space-above;
   padding: spacing.space(1);
-  @include colour.plain;
+  @include colour.always-light;
   @include colour.colour-background("background");
-  @include colour.colour-border("form-error", 0.3125rem, solid);
+  @include colour.colour-border("form-error-border", 0.3125rem, solid);
   &:focus {
     outline: none;
@@ -33,7 +32,7 @@
     &,
     &:link,
     &:visited {
-      @include colour.colour-font("form-error");
+      @include colour.colour-font("form-error-text");
     }
   }
 }

package/nationalarchives/components/files-list/_index.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @use "files-list";

package/nationalarchives/components/files-list/files-list.css ADDED Viewed

@@ -0,0 +1 @@

+ .tna-files-list{--background: var(--background-tint);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-files-list{margin-top:32px}.tna-files-list:first-child{margin-top:0}.tna-files-list{padding:16px;display:flex;align-items:flex-start;gap:16px}.tna-files-list__icon{width:3rem;fill:var(--font-dark, rgb(1, 1, 1))}.tna-files-list__items{margin:0;padding:0 0 16px 16px;display:flex;flex-direction:column;gap:16px 48px;flex:1;list-style:none;border:0 var(--keyline, rgb(38 38 42/0.25)) solid;border-left-width:1px}.tna-files-list__item-meta{margin-top:0}.tna-files-list__item-description{margin-top:4px;font-size:1rem}@media(max-width: 30em){.tna-files-list{flex-direction:column;align-items:stretch}.tna-files-list__icon{width:2rem}.tna-files-list__items{padding-top:16px;padding-left:0;border-left:none;border-top-width:1px}}/*# sourceMappingURL=files-list.css.map */

package/nationalarchives/components/files-list/files-list.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/files-list/files-list.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA+OA,gBACE,qCA1LA,4CAJA,gCCxCF,gBACE,gBAEA,4BACE,aCTJ,gBAEE,aAEA,aACA,uBACA,SAIA,sBACE,WFuFF,oCElFA,uBACE,SACA,sBAEA,aACA,sBAEA,cACA,OAEA,gBFiDE,kDE9CF,sBAYF,2BACE,aAGF,kCACE,eC7CF,eCoDA,wBFrDF,gBAoDI,sBACA,oBAEA,sBACE,WAGF,uBACE,iBACA,eAEA,iBAEA","file":"files-list.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 \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-files-list {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n display: flex;\n align-items: flex-start;\n gap: spacing.space(1);\n\n @include colour.tint;\n\n &__icon {\n width: 3rem;\n\n @include colour.colour-fill(\"font-dark\");\n }\n\n &__items {\n margin: 0;\n padding: 0 0 spacing.space(1) spacing.space(1);\n\n display: flex;\n flex-direction: column;\n // flex-wrap: wrap;\n gap: spacing.space(1) spacing.space(3);\n flex: 1;\n\n list-style: none;\n\n @include colour.colour-border(\"keyline\", 0, solid);\n border-left-width: 1px;\n }\n\n &__item {\n }\n\n &__link {\n }\n\n &__item-title {\n }\n\n &__item-meta {\n margin-top: 0;\n }\n\n &__item-description {\n margin-top: spacing.space(0.25);\n\n @include typography.font-size(16);\n }\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n\n &__icon {\n width: 2rem;\n }\n\n &__items {\n padding-top: spacing.space(1);\n padding-left: 0;\n\n border-left: none;\n\n border-top-width: 1px;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}

package/nationalarchives/components/{files/files.scss → files-list/files-list.scss} RENAMED Viewed

@@ -3,7 +3,8 @@
 @use "../../tools/spacing";
 @use "../../tools/typography";
-.tna-files {
+.tna-files-list {
+  @include spacing.space-above;
   padding: spacing.space(1);
   display: flex;
@@ -35,18 +36,12 @@
   }
   &__item {
-    // width: 100%;
-    // @include media.on-large {
-    //   width: calc(50% - spacing.space(1.5));
-    // }
   }
   &__link {
   }
   &__item-title {
-    @include typography.main-font-weight-bold;
   }
   &__item-meta {

package/nationalarchives/components/files-list/fixtures.json ADDED Viewed

@@ -0,0 +1,74 @@
+{
+  "component": "files list",
+  "fixtures": [
+    {
+      "name": "default",
+      "options": {
+        "itemHeadingLevel": 3,
+        "items": [
+          {
+            "text": "Preservation policy part 1",
+            "href": "#",
+            "file_type": "PDF",
+            "file_size": "1.7MB",
+            "file_extent": "120 pages",
+            "description": "The principles according to which The National Archives will preserve and care for our archival collections."
+          },
+          {
+            "text": "Preservation policy part 2",
+            "href": "#",
+            "file_type": "PDF",
+            "file_size": "0.9MB",
+            "description": "The principles according to which The National Archives will preserve and care for our archival collections."
+          },
+          {
+            "text": "Preservation policy part 3",
+            "href": "#",
+            "file_type": "PDF",
+            "file_size": "3MB",
+            "file_extent": "200 pages"
+          }
+        ]
+      },
+      "html": "<div class=\"tna-files-list\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\" width=\"24\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z\"/></svg><ul class=\"tna-files-list__items\"><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 1</a></h3><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl><p class=\"tna-files-list__item-description\">The principles according to which The National Archives will preserve and care for our archival collections.</p></li><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 2</a></h3><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl><p class=\"tna-files-list__item-description\">The principles according to which The National Archives will preserve and care for our archival collections.</p></li><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 3</a></h3><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl></li></ul></div>"
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "itemHeadingLevel": 3,
+        "items": [
+          {
+            "text": "Preservation policy part 1",
+            "href": "#",
+            "file_type": "PDF",
+            "file_size": "1.7MB",
+            "file_extent": "120 pages",
+            "description": "The principles according to which The National Archives will preserve and care for our archival collections."
+          }
+        ],
+        "classes": "files__test-class"
+      },
+      "html": "<div class=\"tna-files-list files__test-class\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\" width=\"24\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z\"/></svg><ul class=\"tna-files-list__items\"><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 1</a></h3><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl><p class=\"tna-files-list__item-description\">The principles according to which The National Archives will preserve and care for our archival collections.</p></li></ul></div>"
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "itemHeadingLevel": 3,
+        "items": [
+          {
+            "text": "Preservation policy part 1",
+            "href": "#",
+            "file_type": "PDF",
+            "file_size": "1.7MB",
+            "file_extent": "120 pages",
+            "description": "The principles according to which The National Archives will preserve and care for our archival collections."
+          }
+        ],
+        "attributes": {
+          "data-testattribute": "foobar"
+        }
+      },
+      "html": "<div class=\"tna-files-list\" data-testattribute=\"foobar\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"tna-files-list__icon\" width=\"24\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z\"/></svg><ul class=\"tna-files-list__items\"><li class=\"tna-files-list__item\"><h3 class=\"tna-files-list__item-title tna-heading-s\"><a href=\"#\" class=\"tna-files-list__link\">Preservation policy part 1</a></h3><dl class=\"tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta\"><dt>File type</dt><dd><span class=\"tna-dl-chips__item\"></span></dd><dt>File size</dt><dd><span class=\"tna-dl-chips__item\"></span></dd></dl><p class=\"tna-files-list__item-description\">The principles according to which The National Archives will preserve and care for our archival collections.</p></li></ul></div>"
+    }
+  ]
+}

package/nationalarchives/components/{files → files-list}/macro-options.json RENAMED Viewed

@@ -1,4 +1,10 @@
 [
+  {
+    "name": "itemHeadingLevel",
+    "type": "number",
+    "required": true,
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>` for each of the file item titles."
+  },
   {
     "name": "items",
     "type": "array",

package/nationalarchives/components/files-list/macro.njk ADDED Viewed

@@ -0,0 +1,3 @@
+{% macro tnaFilesList(params) %}
+  {%- include "nationalarchives/components/files-list/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/files-list/template.njk ADDED Viewed

@@ -0,0 +1,33 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- set classes = containerClasses | join(' ') -%}
+<div class="tna-files-list{% if classes %} {{ classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="tna-files-list__icon" width="24"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
+  <ul class="tna-files-list__items">
+    {%- for item in params.items %}
+    <li class="tna-files-list__item">
+      <h{{ params.itemHeadingLevel }} class="tna-files-list__item-title tna-heading-s">
+        <a href="{{ item.href }}" class="tna-files-list__link">{{ item.text }}</a>
+      </h{{ params.itemHeadingLevel }}>
+      <dl class="tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta">
+        <dt>File type</dt>
+        <dd>
+          <span class="tna-dl-chips__item">{{ item.fileType }}</span>
+        </dd>
+        <dt>File size</dt>
+        <dd>
+          <span class="tna-dl-chips__item">{{ item.fileSize }}</span>
+        </dd>
+        {%- if item.fileExtent %}
+        <dt>Extent</dt>
+        <dd>
+          <span class="tna-dl-chips__item">{{ item.fileExtent }}</span>
+        </dd>
+        {%- endif %}
+      </dl>
+      {%- if item.description %}
+      <p class="tna-files-list__item-description">{{ item.description }}</p>
+      {%- endif %}
+    </li>
+    {%- endfor %}
+  </ul>
+</div>