npm - @nationalarchives/frontend - Versions diffs - 1.1.0 → 1.3.0 - Mend

@nationalarchives/frontend 1.1.0 → 1.3.0

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 (161) hide show

package/nationalarchives/components/gallery/gallery.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA8OA,8DACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA3KA,4CAJA,gCAmOF,sBACE,qCAhOA,4CAyOF,uFACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEAvPA,4CAJA,gCAwcF,8BACE,wGAMA,0BACA,0BAEA,4DAEA,+BAZF,8BAaI,2BCxgBJ,aACE,gBAUA,yBACE,aC9BJ,aAGE,aACA,kDACA,WAEA,mBAEA,qBACE,oBAEA,gBACA,WAEA,aACA,SAGF,2BACE,OAGF,qDAEE,gBACA,WAGF,oBACE,kBACA,UAEA,mBAEA,iDCeF,wBAEA,2BDZA,mBACE,aACA,sBACA,oBACA,uBAGF,0BACE,oBAEA,cACA,kBEpCF,YCiBsB,IDlCtB,eF2DA,0BACE,aACA,sBACA,oBACA,SAGF,gCACE,WAEA,kBIxEF,cCDsB,ILgFtB,yBACE,cAGF,+BACE,mBACA,oBAEA,sBFSE,2DEJJ,iCACE,WACA,gBACA,iBAEA,kBACA,SACA,UAEA,oBAEA,wDACE,aAIJ,gCACE,UAEA,aACA,mBAEA,kBACA,MACA,SAEA,yBAEA,YACA,mBAEA,UAEA,eACA,oBE1GF,YCiBsB,IH4FpB,oFAEE,UAIJ,8BACE,kBAEA,2BAEA,OAGF,8BACE,mBAEA,yBAEA,QAMA,kFFhFF,gDAIA,uEAiCI,mEEmDJ,qCACE,WAEA,aACA,cAEA,cACA,UFzEE,0GE8EF,yBAGF,mEACE,0BAGF,mEACE,wBAGF,yBACE,iBACA,2CACA,aAEA,gBACA,WAEA,aACA,qCACA,2BACA,SAEA,cAGF,8BACE,YACA,aACA,eAEA,kBAEA,YIhNF,cCDsB,ILoNpB,eAOE,2CACE,WAEA,kBACA,QACA,UFrHF,0DE8HA,wDACE,WAEA,kBACA,QACA,UF9BJ,8BEqCF,oCACE,WACA,YAEA,kBACA,QACA,iBAGF,oCACE,wBAEA,qBAEA,kBACA,MACA,OACA,UAEA,0BF7LF,qCIvEA,iBAiBA,YCiBsB,ILyCtB,4CEiME,wBAGF,0DACE,gBACA,iBAGF,mDACE,WACA,YAEA,kBACA,QACA,UACA,mBMnPF,kDNuPE,yBACE,sCMpNJ,wBNyNE,yBACE,sCMlPJ,wBNuPE,oCE3SF,oBFgTA,sBInTA,cCDsB,ILyTtB,2CACE,aAGF,uDACE,SAGF,gDACE,iBAGF,sDACE,mBAGF,qDACE,kBACA,iBAGF,mFACE","file":"gallery.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\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-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{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(\"maroon\")} !important;\n --accent-border-bright: #{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(\"chestnut\")} !important;\n --accent-border-bright: #{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(\"forest\")} !important;\n --accent-border-bright: #{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(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/\n ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n /\n@function space($size) {\n // @return #{$size spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\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 \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-gallery {\n @include spacing.space-above;\n\n display: grid;\n grid-template: min-content min-content 1fr / 2fr 1fr;\n gap: 0 spacing.space(1);\n\n border-radius: 0.1px;\n\n &__header {\n padding-bottom: spacing.space(1);\n\n grid-column: 1 / 3;\n grid-row: 1;\n\n display: flex;\n gap: spacing.space(2);\n }\n\n &__header-inner {\n flex: 1;\n }\n\n &__items,\n &__navigation-buttons {\n grid-column: 1 / 3;\n grid-row: 2;\n }\n\n &__items {\n position: relative;\n z-index: 1;\n\n border-radius: 0.1px;\n\n .tna-template--clicked &:focus {\n @include a11y.no-focus-outline;\n }\n }\n\n &__item {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: center;\n }\n\n &__item-header {\n padding: 0 spacing.space(1) spacing.space(1);\n\n line-height: 1;\n text-align: center;\n\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n }\n\n &__item-figure {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: spacing.space(1);\n }\n\n &__item-figure-inner {\n width: 100%;\n\n position: relative;\n\n @include colour.contrast;\n\n @include borders.rounded-border;\n }\n\n &__item-image {\n margin: 0 auto;\n }\n\n &__item-description {\n margin-bottom: spacing.space(1);\n padding: spacing.space(0.5) spacing.space(1);\n\n align-self: flex-start;\n\n @include colour.thick-keyline-dark(left);\n }\n\n &__navigation-buttons {\n width: 100%;\n max-height: 50vh;\n aspect-ratio: 3 / 2;\n\n position: relative;\n top: spacing.space(2);\n z-index: 2;\n\n pointer-events: none;\n\n .tna-template--touched & {\n display: none;\n }\n }\n\n &__navigation-button {\n width: 35%;\n\n display: flex;\n align-items: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n opacity: 0;\n\n cursor: pointer;\n pointer-events: auto;\n @include typography.main-font-weight-bold;\n\n &:hover,\n &:focus-visible {\n opacity: 1;\n }\n }\n\n &__navigation-prev {\n padding-left: 1rem;\n\n justify-content: flex-start;\n\n left: 0;\n }\n\n &__navigation-next {\n padding-right: 1rem;\n\n justify-content: flex-end;\n\n right: 0;\n }\n\n &__navigation-button-label {\n @include colour.accent;\n\n &,\n &:hover {\n @include colour.colour-font(\"button-accented-text\");\n @include colour.colour-background(\"button-accented-background\");\n @include colour.colour-border(\"button-accented-background\");\n }\n }\n\n &__navigation-button-icon {\n content: \"\";\n\n width: 0.75rem;\n height: 0.75rem;\n\n display: block;\n flex: none;\n\n @include colour.colour-border(\"font-dark\", 4px, solid, top);\n @include colour.colour-border(\"font-dark\", 4px, solid, right);\n\n transform-origin: 50% 50%;\n }\n\n &__navigation-prev &__navigation-button-icon {\n transform: rotate(-135deg);\n }\n\n &__navigation-next &__navigation-button-icon {\n transform: rotate(45deg);\n }\n\n &__navigation {\n max-height: 40rem;\n max-height: clamp(15rem, calc(100vh - #{spacing.space(2)}), 40rem);\n padding: spacing.space(1);\n\n grid-column: 1 / 3;\n grid-row: 3;\n\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n grid-auto-rows: min-content;\n gap: spacing.space(1);\n\n overflow: auto;\n }\n\n &__navigation-item {\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n\n position: relative;\n\n border: none;\n @include borders.rounded-border;\n\n cursor: pointer;\n\n @include colour.contrast;\n\n @include colour.image-loader-background;\n\n &:hover {\n &::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 2;\n\n @include colour.thick-keyline-accent;\n }\n }\n\n &[aria-current=\"true\"] {\n @include colour.accent;\n\n &::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 2;\n\n @include colour.thick-keyline-brand(\"\", \"black\");\n }\n }\n }\n\n &__navigation-item-image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n object-fit: cover;\n }\n\n &__navigation-item-label {\n padding: spacing.space(0.25) spacing.space(0.75);\n\n display: inline-block;\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: 4;\n\n text-transform: capitalize;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(24);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"background\");\n\n border-radius: 0 0 bordersVars.$rounded-border-radius 0;\n }\n\n &--interactive &__item-figure-inner {\n max-height: 50vh;\n aspect-ratio: 3 / 2;\n }\n\n &--interactive &__item-image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n object-fit: contain;\n }\n\n @include media.on-medium {\n &__navigation {\n grid-template-columns: repeat(4, 1fr);\n }\n }\n\n @include media.on-mobile {\n &__navigation {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n @include media.on-tiny {\n &__navigation-item-label {\n @include typography.font-size(18);\n }\n }\n\n &--bounded {\n @include borders.rounded-border;\n @include colour.tint;\n }\n\n &--bounded &__header {\n padding: spacing.space(1);\n }\n\n &--bounded &__navigation-buttons {\n top: spacing.space(3);\n }\n\n &--bounded &__item-header {\n padding-top: spacing.space(1);\n }\n\n &--bounded &__item-figure-inner {\n border-radius: 0.1px;\n }\n\n &--bounded &__item-description {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n\n &__items--hide-item-titles &__item &__item-header {\n display: none;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin 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 -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n outline-offset: a11y.$focus-outline-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition:\n outline-offset 0.1s,\n box-shadow 0.1s;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin focus-outline {\n @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n outline: none !important;\n\n box-shadow: none !important;\n}\n\n%active-outline {\n outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n solid !important;\n outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition: none;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin active-outline {\n @extend %active-outline;\n}\n\n%faux-full-outline {\n position: relative;\n}\n\n%faux-full-outline-anchor {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 9;\n\n @include borders.rounded-border;\n }\n\n &:focus,\n &:active {\n @include no-focus-outline;\n }\n\n &:focus {\n &::before {\n @include focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include active-outline;\n }\n }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n @extend %faux-full-outline;\n\n #{$anchor_selector} {\n @extend %faux-full-outline-anchor;\n }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n &:focus:not(:focus-visible) {\n @include no-focus-outline;\n }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n @extend %focus-indicator-only-on-keyboard-focus;\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-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAmPA,8DACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA/KA,4CAJA,gCAuOF,sBACE,qCApOA,4CA6OF,uFACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEA3PA,4CAJA,gCA4cF,8BACE,wGAMA,0BACA,0BAEA,4DAEA,+BAZF,8BAaI,2BC7gBJ,aACE,gBAUA,yBACE,aC9BJ,aAGE,aACA,kDACA,WAEA,mBAEA,qBACE,oBAEA,gBACA,WAEA,aACA,SAGF,2BACE,OAGF,qDAEE,gBACA,WAGF,oBACE,kBACA,UAEA,mBAEA,iDCeF,wBAEA,2BDZA,mBACE,aACA,sBACA,oBACA,uBAGF,0BACE,oBAEA,cACA,kBEpCF,YCiBsB,IDlCtB,eF2DA,0BACE,aACA,sBACA,oBACA,SAGF,gCACE,WAEA,kBIxEF,cCDsB,ILgFtB,yBACE,cAGF,+BACE,mBACA,oBAEA,sBFUE,2DELJ,iCACE,WACA,gBACA,iBAEA,kBACA,SACA,UAEA,oBAEA,wDACE,aAIJ,gCACE,UAEA,aACA,mBAEA,kBACA,MACA,SAEA,yBAEA,YACA,mBAEA,UAEA,eACA,oBE1GF,YCiBsB,IH4FpB,oFAEE,UAIJ,8BACE,kBAEA,2BAEA,OAGF,8BACE,mBAEA,yBAEA,QAMA,kFF/EF,gDAIA,uEAiCI,mEEkDJ,qCACE,WAEA,aACA,cAEA,cACA,UFxEE,0GE6EF,yBAGF,mEACE,0BAGF,mEACE,wBAGF,yBACE,iBACA,2CACA,aAEA,gBACA,WAEA,aACA,qCACA,2BACA,SAEA,cAGF,8BACE,YACA,aACA,eAEA,kBAEA,YIhNF,cCDsB,ILoNpB,eAOE,2CACE,WAEA,kBACA,QACA,UFpHF,0DE6HA,wDACE,WAEA,kBACA,QACA,UFzBJ,8BEgCF,oCACE,WACA,YAEA,kBACA,QACA,iBAGF,oCACE,wBAEA,qBAEA,kBACA,MACA,OACA,UAEA,0BF5LF,qCIxEA,iBAiBA,YCiBsB,IL0CtB,4CEgME,wBAGF,0DACE,gBACA,iBAGF,mDACE,WACA,YAEA,kBACA,QACA,UACA,mBMnPF,kDNuPE,yBACE,sCMpNJ,wBNyNE,yBACE,sCMlPJ,wBNuPE,oCE3SF,oBFgTA,sBInTA,cCDsB,ILyTtB,2CACE,aAGF,uDACE,SAGF,gDACE,iBAGF,sDACE,mBAGF,qDACE,kBACA,iBAGF,mFACE","file":"gallery.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n &:hover {\n outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n }\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\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-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{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(\"maroon\")} !important;\n --accent-border-bright: #{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(\"chestnut\")} !important;\n --accent-border-bright: #{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(\"forest\")} !important;\n --accent-border-bright: #{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(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/\n ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n /\n@function space($size) {\n // @return #{$size spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\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 \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-gallery {\n @include spacing.space-above;\n\n display: grid;\n grid-template: min-content min-content 1fr / 2fr 1fr;\n gap: 0 spacing.space(1);\n\n border-radius: 0.1px;\n\n &__header {\n padding-bottom: spacing.space(1);\n\n grid-column: 1 / 3;\n grid-row: 1;\n\n display: flex;\n gap: spacing.space(2);\n }\n\n &__header-inner {\n flex: 1;\n }\n\n &__items,\n &__navigation-buttons {\n grid-column: 1 / 3;\n grid-row: 2;\n }\n\n &__items {\n position: relative;\n z-index: 1;\n\n border-radius: 0.1px;\n\n .tna-template--clicked &:focus {\n @include a11y.no-focus-outline;\n }\n }\n\n &__item {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n justify-content: center;\n }\n\n &__item-header {\n padding: 0 spacing.space(1) spacing.space(1);\n\n line-height: 1;\n text-align: center;\n\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n }\n\n &__item-figure {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: spacing.space(1);\n }\n\n &__item-figure-inner {\n width: 100%;\n\n position: relative;\n\n @include colour.contrast;\n\n @include borders.rounded-border;\n }\n\n &__item-image {\n margin: 0 auto;\n }\n\n &__item-description {\n margin-bottom: spacing.space(1);\n padding: spacing.space(0.5) spacing.space(1);\n\n align-self: flex-start;\n\n @include colour.thick-keyline-dark(left);\n }\n\n &__navigation-buttons {\n width: 100%;\n max-height: 50vh;\n aspect-ratio: 3 / 2;\n\n position: relative;\n top: spacing.space(2);\n z-index: 2;\n\n pointer-events: none;\n\n .tna-template--touched & {\n display: none;\n }\n }\n\n &__navigation-button {\n width: 35%;\n\n display: flex;\n align-items: center;\n\n position: absolute;\n top: 0;\n bottom: 0;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n opacity: 0;\n\n cursor: pointer;\n pointer-events: auto;\n @include typography.main-font-weight-bold;\n\n &:hover,\n &:focus-visible {\n opacity: 1;\n }\n }\n\n &__navigation-prev {\n padding-left: 1rem;\n\n justify-content: flex-start;\n\n left: 0;\n }\n\n &__navigation-next {\n padding-right: 1rem;\n\n justify-content: flex-end;\n\n right: 0;\n }\n\n &__navigation-button-label {\n @include colour.accent;\n\n &,\n &:hover {\n @include colour.colour-font(\"button-accented-text\");\n @include colour.colour-background(\"button-accented-background\");\n @include colour.colour-border(\"button-accented-background\");\n }\n }\n\n &__navigation-button-icon {\n content: \"\";\n\n width: 0.75rem;\n height: 0.75rem;\n\n display: block;\n flex: none;\n\n @include colour.colour-border(\"font-dark\", 4px, solid, top);\n @include colour.colour-border(\"font-dark\", 4px, solid, right);\n\n transform-origin: 50% 50%;\n }\n\n &__navigation-prev &__navigation-button-icon {\n transform: rotate(-135deg);\n }\n\n &__navigation-next &__navigation-button-icon {\n transform: rotate(45deg);\n }\n\n &__navigation {\n max-height: 40rem;\n max-height: clamp(15rem, calc(100vh - #{spacing.space(2)}), 40rem);\n padding: spacing.space(1);\n\n grid-column: 1 / 3;\n grid-row: 3;\n\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n grid-auto-rows: min-content;\n gap: spacing.space(1);\n\n overflow: auto;\n }\n\n &__navigation-item {\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n\n position: relative;\n\n border: none;\n @include borders.rounded-border;\n\n cursor: pointer;\n\n @include colour.contrast;\n\n @include colour.image-loader-background;\n\n &:hover {\n &::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 2;\n\n @include colour.thick-keyline-accent;\n }\n }\n\n &[aria-current=\"true\"] {\n @include colour.accent;\n\n &::after {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 2;\n\n @include colour.thick-keyline-brand(\"\", \"black\");\n }\n }\n }\n\n &__navigation-item-image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n object-fit: cover;\n }\n\n &__navigation-item-label {\n padding: spacing.space(0.25) spacing.space(0.75);\n\n display: inline-block;\n\n position: absolute;\n top: 0;\n left: 0;\n z-index: 4;\n\n text-transform: capitalize;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(24);\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"background\");\n\n border-radius: 0 0 bordersVars.$rounded-border-radius 0;\n }\n\n &--interactive &__item-figure-inner {\n max-height: 50vh;\n aspect-ratio: 3 / 2;\n }\n\n &--interactive &__item-image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n object-fit: contain;\n }\n\n @include media.on-medium {\n &__navigation {\n grid-template-columns: repeat(4, 1fr);\n }\n }\n\n @include media.on-mobile {\n &__navigation {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n @include media.on-tiny {\n &__navigation-item-label {\n @include typography.font-size(18);\n }\n }\n\n &--bounded {\n @include borders.rounded-border;\n @include colour.tint;\n }\n\n &--bounded &__header {\n padding: spacing.space(1);\n }\n\n &--bounded &__navigation-buttons {\n top: spacing.space(3);\n }\n\n &--bounded &__item-header {\n padding-top: spacing.space(1);\n }\n\n &--bounded &__item-figure-inner {\n border-radius: 0.1px;\n }\n\n &--bounded &__item-description {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n\n &__items--hide-item-titles &__item &__item-header {\n display: none;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin 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 -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n outline-offset: a11y.$focus-outline-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition:\n outline-offset 0.1s,\n box-shadow 0.1s;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin focus-outline {\n @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n outline: none !important;\n\n box-shadow: none !important;\n}\n\n%active-outline {\n outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n solid !important;\n outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition: none;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin active-outline {\n @extend %active-outline;\n}\n\n%faux-full-outline {\n position: relative;\n}\n\n%faux-full-outline-anchor {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 9;\n\n @include borders.rounded-border;\n }\n\n &:focus,\n &:active {\n @include no-focus-outline;\n }\n\n &:focus {\n &::before {\n @include focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include active-outline;\n }\n }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n @extend %faux-full-outline;\n\n #{$anchor_selector} {\n @extend %faux-full-outline-anchor;\n }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n &:focus:not(:focus-visible) {\n @include no-focus-outline;\n }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n @extend %focus-indicator-only-on-keyboard-focus;\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-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\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/gallery/gallery.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";var t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Gallery:()=>i});class i{constructor(t){this.$module=t,this.$itemsContainer=t&&t.querySelector(".tna-gallery__items"),this.$items=this.$itemsContainer&&this.$itemsContainer.querySelectorAll(".tna-gallery__item"),this.$navigation=t&&t.querySelector(".tna-gallery__navigation"),this.$navigationItems=this.$navigation&&t.querySelectorAll(".tna-gallery__navigation-item"),this.$navigationButtons=t&&t.querySelector(".tna-gallery__navigation-buttons"),this.$module&&this.$itemsContainer&&this.$items&&!(this.$items.length<2)&&this.$navigation&&this.$navigationItems&&this.$navigationButtons&&(this.$module.classList.add("tna-gallery--interactive"),this.$navigationButtonPrev=this.$navigationButtons.querySelector(".tna-gallery__navigation-prev"),this.$navigationButtonNext=this.$navigationButtons.querySelector(".tna-gallery__navigation-next"),this.setup(),this.currentId=this.$items[0].id,this.showItem(this.currentId))}setup(){this.$items.forEach(t=>{t.setAttribute("hidden",""),t.setAttribute("aria-hidden","true"),t.querySelector(".tna-gallery__item-header")?.setAttribute("aria-hidden","true")}),this.$navigation.removeAttribute("hidden"),this.$navigationItems.forEach(t=>{t.addEventListener("click",()=>{this.showItem(t.getAttribute("aria-controls")),this.$itemsContainer.setAttribute("tabindex","0"),this.$itemsContainer.focus()})}),this.$module.addEventListener("keydown",t=>{let e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.showPreviousItem(),e=!0;break;case"ArrowRight":case"ArrowDown":this.showNextItem(),e=!0;break;case"Home":this.showFirstItem(),e=!0;break;case"End":this.showLastItem(),e=!0}e&&(t.stopPropagation(),t.preventDefault())}),this.$navigationButtons?.removeAttribute("hidden"),this.$navigationButtonPrev?.addEventListener("click",()=>{this.showPreviousItem()}),this.$navigationButtonNext?.addEventListener("click",()=>{this.showNextItem()}),this.$liveRegion=document.createElement("div"),this.$liveRegion.setAttribute("aria-live","polite"),this.$liveRegion.setAttribute("aria-atomic","true"),this.$liveRegion.setAttribute("class","tna-gallery__item-header"),this.$itemsContainer.prepend(this.$liveRegion),this.$itemsContainer.classList.add("tna-gallery__items--hide-item-titles"),this.$itemsContainer.addEventListener("blur",()=>this.$itemsContainer.removeAttribute("tabindex"))}showItem(t){this.$items.forEach(e=>{t&&e.id===t?(e.removeAttribute("hidden"),e.removeAttribute("aria-hidden")):(e.setAttribute("hidden",""),e.setAttribute("aria-hidden","true"))}),this.$navigationItems.forEach(e=>{t&&e.getAttribute("aria-controls")===t?e.setAttribute("aria-current","true"):e.setAttribute("aria-current","false")}),this.currentId=t,this.$liveRegion.textContent=`Image ${this.getCurrentItemIndex()+1} of ${this.$items.length}`}getCurrentItemIndex(){return Array.from(this.$items).findIndex(t=>t.id===this.currentId)}showPreviousItem(){let t=this.getCurrentItemIndex()-1;t<0&&(t=this.$items.length-1),this.showItem(this.$items[t].id)}showNextItem(){let t=this.getCurrentItemIndex()+1;t>=this.$items.length&&(t=0),this.showItem(this.$items[t].id)}showFirstItem(){this.showItem(this.$items[0].id)}showLastItem(){this.showItem(this.$items[this.$items.length-1].id)}}return e})());
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";const t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{Gallery:()=>i});class i{constructor(t){this.$module=t,this.$itemsContainer=t&&t.querySelector(".tna-gallery__items"),this.$items=this.$itemsContainer&&this.$itemsContainer.querySelectorAll(".tna-gallery__item"),this.$navigation=t&&t.querySelector(".tna-gallery__navigation"),this.$navigationItems=this.$navigation&&t.querySelectorAll(".tna-gallery__navigation-item"),this.$navigationButtons=t&&t.querySelector(".tna-gallery__navigation-buttons"),this.$module&&this.$itemsContainer&&this.$items&&!(this.$items.length<2)&&this.$navigation&&this.$navigationItems&&this.$navigationButtons&&(this.$module.classList.add("tna-gallery--interactive"),this.$navigationButtonPrev=this.$navigationButtons.querySelector(".tna-gallery__navigation-prev"),this.$navigationButtonNext=this.$navigationButtons.querySelector(".tna-gallery__navigation-next"),this.setup(),this.currentId=this.$items[0].id,this.showItem(this.currentId))}setup(){this.$items.forEach(t=>{t.setAttribute("hidden",""),t.setAttribute("aria-hidden","true"),t.querySelector(".tna-gallery__item-header")?.setAttribute("aria-hidden","true")}),this.$navigation.removeAttribute("hidden"),this.$navigationItems.forEach(t=>{t.addEventListener("click",()=>{this.showItem(t.getAttribute("aria-controls")),this.$itemsContainer.setAttribute("tabindex","0"),this.$itemsContainer.focus()})}),this.$module.addEventListener("keydown",t=>{let e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.showPreviousItem(),e=!0;break;case"ArrowRight":case"ArrowDown":this.showNextItem(),e=!0;break;case"Home":this.showFirstItem(),e=!0;break;case"End":this.showLastItem(),e=!0}e&&(t.stopPropagation(),t.preventDefault())}),this.$navigationButtons?.removeAttribute("hidden"),this.$navigationButtonPrev?.addEventListener("click",()=>{this.showPreviousItem()}),this.$navigationButtonNext?.addEventListener("click",()=>{this.showNextItem()}),this.$liveRegion=document.createElement("div"),this.$liveRegion.setAttribute("aria-live","polite"),this.$liveRegion.setAttribute("aria-atomic","true"),this.$liveRegion.setAttribute("class","tna-gallery__item-header"),this.$itemsContainer.prepend(this.$liveRegion),this.$itemsContainer.classList.add("tna-gallery__items--hide-item-titles"),this.$itemsContainer.addEventListener("blur",()=>this.$itemsContainer.removeAttribute("tabindex"))}showItem(t){this.$items.forEach(e=>{t&&e.id===t?(e.removeAttribute("hidden"),e.removeAttribute("aria-hidden")):(e.setAttribute("hidden",""),e.setAttribute("aria-hidden","true"))}),this.$navigationItems.forEach(e=>{t&&e.getAttribute("aria-controls")===t?e.setAttribute("aria-current","true"):e.setAttribute("aria-current","false")}),this.currentId=t,this.$liveRegion.textContent=`Image ${this.getCurrentItemIndex()+1} of ${this.$items.length}`}getCurrentItemIndex(){return Array.from(this.$items).findIndex(t=>t.id===this.currentId)}showPreviousItem(){let t=this.getCurrentItemIndex()-1;t<0&&(t=this.$items.length-1),this.showItem(this.$items[t].id)}showNextItem(){let t=this.getCurrentItemIndex()+1;t>=this.$items.length&&(t=0),this.showItem(this.$items[t].id)}showFirstItem(){this.showItem(this.$items[0].id)}showLastItem(){this.showItem(this.$items[this.$items.length-1].id)}}return e})());
 //# sourceMappingURL=gallery.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"components/gallery/gallery.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,yCCLzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,gBACHF,GAAWA,EAAQG,cAAc,uBACnCF,KAAKG,OACHH,KAAKC,iBACLD,KAAKC,gBAAgBG,iBAAiB,sBACxCJ,KAAKK,YACHN,GAAWA,EAAQG,cAAc,4BACnCF,KAAKM,iBACHN,KAAKK,aACLN,EAAQK,iBAAiB,iCAC3BJ,KAAKO,mBACHR,GAAWA,EAAQG,cAAc,oCAGhCF,KAAKD,SACLC,KAAKC,iBACLD,KAAKG,UAENH,KAAKG,OAAOK,OAAS,IACpBR,KAAKK,aACLL,KAAKM,kBACLN,KAAKO,qBAKRP,KAAKD,QAAQU,UAAUC,IAAI,4BAE3BV,KAAKW,sBAAwBX,KAAKO,mBAAmBL,cACnD,iCAEFF,KAAKY,sBAAwBZ,KAAKO,mBAAmBL,cACnD,iCAGFF,KAAKa,QAELb,KAAKc,UAAYd,KAAKG,OAAO,GAAGY,GAChCf,KAAKgB,SAAShB,KAAKc,WACrB,CAEA,KAAAD,GACEb,KAAKG,OAAOc,QAASC,IACnBA,EAAMC,aAAa,SAAU,IAC7BD,EAAMC,aAAa,cAAe,QAClCD,EACGhB,cAAc,8BACbiB,aAAa,cAAe,UAElCnB,KAAKK,YAAYe,gBAAgB,UACjCpB,KAAKM,iBAAiBW,QAASC,IAC7BA,EAAMG,iBAAiB,QAAS,KAC9BrB,KAAKgB,SAASE,EAAMI,aAAa,kBACjCtB,KAAKC,gBAAgBkB,aAAa,WAAY,KAC9CnB,KAAKC,gBAAgBsB,YAGzBvB,KAAKD,QAAQsB,iBAAiB,UAAYG,IACxC,IAAIC,GAA0B,EAC9B,OAAQD,EAAMzC,KACZ,IAAK,YACL,IAAK,UACHiB,KAAK0B,mBACLD,GAA0B,EAC1B,MACF,IAAK,aACL,IAAK,YACHzB,KAAK2B,eACLF,GAA0B,EAC1B,MACF,IAAK,OACHzB,KAAK4B,gBACLH,GAA0B,EAC1B,MACF,IAAK,MACHzB,KAAK6B,eACLJ,GAA0B,EAK1BA,IACFD,EAAMM,kBACNN,EAAMO,oBAIV/B,KAAKO,oBAAoBa,gBAAgB,UACzCpB,KAAKW,uBAAuBU,iBAAiB,QAAS,KACpDrB,KAAK0B,qBAEP1B,KAAKY,uBAAuBS,iBAAiB,QAAS,KACpDrB,KAAK2B,iBAGP3B,KAAKgC,YAAcC,SAASC,cAAc,OAC1ClC,KAAKgC,YAAYb,aAAa,YAAa,UAC3CnB,KAAKgC,YAAYb,aAAa,cAAe,QAC7CnB,KAAKgC,YAAYb,aAAa,QAAS,4BACvCnB,KAAKC,gBAAgBkC,QAAQnC,KAAKgC,aAClChC,KAAKC,gBAAgBQ,UAAUC,IAAI,wCACnCV,KAAKC,gBAAgBoB,iBAAiB,OAAQ,IAC5CrB,KAAKC,gBAAgBmB,gBAAgB,YAEzC,CAEA,QAAAJ,CAASD,GACPf,KAAKG,OAAOc,QAASC,IACfH,GAAMG,EAAMH,KAAOA,GACrBG,EAAME,gBAAgB,UACtBF,EAAME,gBAAgB,iBAEtBF,EAAMC,aAAa,SAAU,IAC7BD,EAAMC,aAAa,cAAe,WAGtCnB,KAAKM,iBAAiBW,QAASC,IACzBH,GACEG,EAAMI,aAAa,mBAAqBP,EAC1CG,EAAMC,aAAa,eAAgB,QAKrCD,EAAMC,aAAa,eAAgB,WAGvCnB,KAAKc,UAAYC,EAEjBf,KAAKgC,YAAYI,YAAc,SAASpC,KAAKqC,sBAAwB,QAAQrC,KAAKG,OAAOK,QAC3F,CAEA,mBAAA6B,GACE,OAAOC,MAAMC,KAAKvC,KAAKG,QAAQqC,UAC5BtB,GAAUA,EAAMH,KAAOf,KAAKc,UAEjC,CAEA,gBAAAY,GAEE,IAAIe,EAAkBzC,KAAKqC,sBAAwB,EAE/CI,EAAkB,IAEpBA,EAAkBzC,KAAKG,OAAOK,OAAS,GAEzCR,KAAKgB,SAAShB,KAAKG,OAAOsC,GAAiB1B,GAC7C,CAEA,YAAAY,GAEE,IAAIc,EAAkBzC,KAAKqC,sBAAwB,EAC/CI,GAAmBzC,KAAKG,OAAOK,SAEjCiC,EAAkB,GAEpBzC,KAAKgB,SAAShB,KAAKG,OAAOsC,GAAiB1B,GAC7C,CAEA,aAAAa,GAEE5B,KAAKgB,SAAShB,KAAKG,OAAO,GAAGY,GAC/B,CAEA,YAAAc,GAEE7B,KAAKgB,SAAShB,KAAKG,OAAOH,KAAKG,OAAOK,OAAS,GAAGO,GACpD","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Gallery {\n constructor($module) {\n this.$module = $module;\n this.$itemsContainer =\n $module && $module.querySelector(\".tna-gallery__items\");\n this.$items =\n this.$itemsContainer &&\n this.$itemsContainer.querySelectorAll(\".tna-gallery__item\");\n this.$navigation =\n $module && $module.querySelector(\".tna-gallery__navigation\");\n this.$navigationItems =\n this.$navigation &&\n $module.querySelectorAll(\".tna-gallery__navigation-item\");\n this.$navigationButtons =\n $module && $module.querySelector(\".tna-gallery__navigation-buttons\");\n\n if (\n !this.$module \|\|\n !this.$itemsContainer \|\|\n !this.$items \|\|\n /* eslint-disable-next-line no-magic-numbers /\n this.$items.length < 2 \|\|\n !this.$navigation \|\|\n !this.$navigationItems \|\|\n !this.$navigationButtons\n ) {\n return;\n }\n\n this.$module.classList.add(\"tna-gallery--interactive\");\n\n this.$navigationButtonPrev = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-prev\",\n );\n this.$navigationButtonNext = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-next\",\n );\n\n this.setup();\n / eslint-disable-next-line no-magic-numbers /\n this.currentId = this.$items[0].id;\n this.showItem(this.currentId);\n }\n\n setup() {\n this.$items.forEach(($item) => {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n $item\n .querySelector(\".tna-gallery__item-header\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n });\n this.$navigation.removeAttribute(\"hidden\");\n this.$navigationItems.forEach(($item) => {\n $item.addEventListener(\"click\", () => {\n this.showItem($item.getAttribute(\"aria-controls\"));\n this.$itemsContainer.setAttribute(\"tabindex\", \"0\");\n this.$itemsContainer.focus();\n });\n });\n this.$module.addEventListener(\"keydown\", (event) => {\n let preventDefaultKeyAction = false;\n switch (event.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.showPreviousItem();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.showNextItem();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n this.showFirstItem();\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n this.showLastItem();\n preventDefaultKeyAction = true;\n break;\n default:\n break;\n }\n if (preventDefaultKeyAction) {\n event.stopPropagation();\n event.preventDefault();\n }\n });\n\n this.$navigationButtons?.removeAttribute(\"hidden\");\n this.$navigationButtonPrev?.addEventListener(\"click\", () => {\n this.showPreviousItem();\n });\n this.$navigationButtonNext?.addEventListener(\"click\", () => {\n this.showNextItem();\n });\n\n this.$liveRegion = document.createElement(\"div\");\n this.$liveRegion.setAttribute(\"aria-live\", \"polite\");\n this.$liveRegion.setAttribute(\"aria-atomic\", \"true\");\n this.$liveRegion.setAttribute(\"class\", \"tna-gallery__item-header\");\n this.$itemsContainer.prepend(this.$liveRegion);\n this.$itemsContainer.classList.add(\"tna-gallery__items--hide-item-titles\");\n this.$itemsContainer.addEventListener(\"blur\", () =>\n this.$itemsContainer.removeAttribute(\"tabindex\"),\n );\n }\n\n showItem(id) {\n this.$items.forEach(($item) => {\n if (id && $item.id === id) {\n $item.removeAttribute(\"hidden\");\n $item.removeAttribute(\"aria-hidden\");\n } else {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n }\n });\n this.$navigationItems.forEach(($item) => {\n if (id) {\n if ($item.getAttribute(\"aria-controls\") === id) {\n $item.setAttribute(\"aria-current\", \"true\");\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n });\n this.currentId = id;\n / eslint-disable-next-line no-magic-numbers /\n this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;\n }\n\n getCurrentItemIndex() {\n return Array.from(this.$items).findIndex(\n ($item) => $item.id === this.currentId,\n );\n }\n\n showPreviousItem() {\n / eslint-disable-next-line no-magic-numbers /\n let nextIndexToShow = this.getCurrentItemIndex() - 1;\n / eslint-disable-next-line no-magic-numbers /\n if (nextIndexToShow < 0) {\n / eslint-disable-next-line no-magic-numbers /\n nextIndexToShow = this.$items.length - 1;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showNextItem() {\n / eslint-disable-next-line no-magic-numbers /\n let nextIndexToShow = this.getCurrentItemIndex() + 1;\n if (nextIndexToShow >= this.$items.length) {\n / eslint-disable-next-line no-magic-numbers /\n nextIndexToShow = 0;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showFirstItem() {\n / eslint-disable-next-line no-magic-numbers /\n this.showItem(this.$items[0].id);\n }\n\n showLastItem() {\n / eslint-disable-next-line no-magic-numbers */\n this.showItem(this.$items[this.$items.length - 1].id);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Gallery","constructor","$module","this","$itemsContainer","querySelector","$items","querySelectorAll","$navigation","$navigationItems","$navigationButtons","length","classList","add","$navigationButtonPrev","$navigationButtonNext","setup","currentId","id","showItem","forEach","$item","setAttribute","removeAttribute","addEventListener","getAttribute","focus","event","preventDefaultKeyAction","showPreviousItem","showNextItem","showFirstItem","showLastItem","stopPropagation","preventDefault","$liveRegion","document","createElement","prepend","textContent","getCurrentItemIndex","Array","from","findIndex","nextIndexToShow"],"sourceRoot":""}
1	+ {"version":3,"file":"components/gallery/gallery.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,6CCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,gBACHF,GAAWA,EAAQG,cAAc,uBACnCF,KAAKG,OACHH,KAAKC,iBACLD,KAAKC,gBAAgBG,iBAAiB,sBACxCJ,KAAKK,YACHN,GAAWA,EAAQG,cAAc,4BACnCF,KAAKM,iBACHN,KAAKK,aACLN,EAAQK,iBAAiB,iCAC3BJ,KAAKO,mBACHR,GAAWA,EAAQG,cAAc,oCAGhCF,KAAKD,SACLC,KAAKC,iBACLD,KAAKG,UAENH,KAAKG,OAAOK,OAAS,IACpBR,KAAKK,aACLL,KAAKM,kBACLN,KAAKO,qBAKRP,KAAKD,QAAQU,UAAUC,IAAI,4BAE3BV,KAAKW,sBAAwBX,KAAKO,mBAAmBL,cACnD,iCAEFF,KAAKY,sBAAwBZ,KAAKO,mBAAmBL,cACnD,iCAGFF,KAAKa,QAELb,KAAKc,UAAYd,KAAKG,OAAO,GAAGY,GAChCf,KAAKgB,SAAShB,KAAKc,WACrB,CAEA,KAAAD,GACEb,KAAKG,OAAOc,QAASC,IACnBA,EAAMC,aAAa,SAAU,IAC7BD,EAAMC,aAAa,cAAe,QAClCD,EACGhB,cAAc,8BACbiB,aAAa,cAAe,UAElCnB,KAAKK,YAAYe,gBAAgB,UACjCpB,KAAKM,iBAAiBW,QAASC,IAC7BA,EAAMG,iBAAiB,QAAS,KAC9BrB,KAAKgB,SAASE,EAAMI,aAAa,kBACjCtB,KAAKC,gBAAgBkB,aAAa,WAAY,KAC9CnB,KAAKC,gBAAgBsB,YAGzBvB,KAAKD,QAAQsB,iBAAiB,UAAYG,IACxC,IAAIC,GAA0B,EAC9B,OAAQD,EAAMzC,KACZ,IAAK,YACL,IAAK,UACHiB,KAAK0B,mBACLD,GAA0B,EAC1B,MACF,IAAK,aACL,IAAK,YACHzB,KAAK2B,eACLF,GAA0B,EAC1B,MACF,IAAK,OACHzB,KAAK4B,gBACLH,GAA0B,EAC1B,MACF,IAAK,MACHzB,KAAK6B,eACLJ,GAA0B,EAK1BA,IACFD,EAAMM,kBACNN,EAAMO,oBAIV/B,KAAKO,oBAAoBa,gBAAgB,UACzCpB,KAAKW,uBAAuBU,iBAAiB,QAAS,KACpDrB,KAAK0B,qBAEP1B,KAAKY,uBAAuBS,iBAAiB,QAAS,KACpDrB,KAAK2B,iBAGP3B,KAAKgC,YAAcC,SAASC,cAAc,OAC1ClC,KAAKgC,YAAYb,aAAa,YAAa,UAC3CnB,KAAKgC,YAAYb,aAAa,cAAe,QAC7CnB,KAAKgC,YAAYb,aAAa,QAAS,4BACvCnB,KAAKC,gBAAgBkC,QAAQnC,KAAKgC,aAClChC,KAAKC,gBAAgBQ,UAAUC,IAAI,wCACnCV,KAAKC,gBAAgBoB,iBAAiB,OAAQ,IAC5CrB,KAAKC,gBAAgBmB,gBAAgB,YAEzC,CAEA,QAAAJ,CAASD,GACPf,KAAKG,OAAOc,QAASC,IACfH,GAAMG,EAAMH,KAAOA,GACrBG,EAAME,gBAAgB,UACtBF,EAAME,gBAAgB,iBAEtBF,EAAMC,aAAa,SAAU,IAC7BD,EAAMC,aAAa,cAAe,WAGtCnB,KAAKM,iBAAiBW,QAASC,IACzBH,GACEG,EAAMI,aAAa,mBAAqBP,EAC1CG,EAAMC,aAAa,eAAgB,QAKrCD,EAAMC,aAAa,eAAgB,WAGvCnB,KAAKc,UAAYC,EAEjBf,KAAKgC,YAAYI,YAAc,SAASpC,KAAKqC,sBAAwB,QAAQrC,KAAKG,OAAOK,QAC3F,CAEA,mBAAA6B,GACE,OAAOC,MAAMC,KAAKvC,KAAKG,QAAQqC,UAC5BtB,GAAUA,EAAMH,KAAOf,KAAKc,UAEjC,CAEA,gBAAAY,GAEE,IAAIe,EAAkBzC,KAAKqC,sBAAwB,EAE/CI,EAAkB,IAEpBA,EAAkBzC,KAAKG,OAAOK,OAAS,GAEzCR,KAAKgB,SAAShB,KAAKG,OAAOsC,GAAiB1B,GAC7C,CAEA,YAAAY,GAEE,IAAIc,EAAkBzC,KAAKqC,sBAAwB,EAC/CI,GAAmBzC,KAAKG,OAAOK,SAEjCiC,EAAkB,GAEpBzC,KAAKgB,SAAShB,KAAKG,OAAOsC,GAAiB1B,GAC7C,CAEA,aAAAa,GAEE5B,KAAKgB,SAAShB,KAAKG,OAAO,GAAGY,GAC/B,CAEA,YAAAc,GAEE7B,KAAKgB,SAAShB,KAAKG,OAAOH,KAAKG,OAAOK,OAAS,GAAGO,GACpD","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Gallery {\n constructor($module) {\n this.$module = $module;\n this.$itemsContainer =\n $module && $module.querySelector(\".tna-gallery__items\");\n this.$items =\n this.$itemsContainer &&\n this.$itemsContainer.querySelectorAll(\".tna-gallery__item\");\n this.$navigation =\n $module && $module.querySelector(\".tna-gallery__navigation\");\n this.$navigationItems =\n this.$navigation &&\n $module.querySelectorAll(\".tna-gallery__navigation-item\");\n this.$navigationButtons =\n $module && $module.querySelector(\".tna-gallery__navigation-buttons\");\n\n if (\n !this.$module \|\|\n !this.$itemsContainer \|\|\n !this.$items \|\|\n /* eslint-disable-next-line no-magic-numbers /\n this.$items.length < 2 \|\|\n !this.$navigation \|\|\n !this.$navigationItems \|\|\n !this.$navigationButtons\n ) {\n return;\n }\n\n this.$module.classList.add(\"tna-gallery--interactive\");\n\n this.$navigationButtonPrev = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-prev\",\n );\n this.$navigationButtonNext = this.$navigationButtons.querySelector(\n \".tna-gallery__navigation-next\",\n );\n\n this.setup();\n / eslint-disable-next-line no-magic-numbers /\n this.currentId = this.$items[0].id;\n this.showItem(this.currentId);\n }\n\n setup() {\n this.$items.forEach(($item) => {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n $item\n .querySelector(\".tna-gallery__item-header\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n });\n this.$navigation.removeAttribute(\"hidden\");\n this.$navigationItems.forEach(($item) => {\n $item.addEventListener(\"click\", () => {\n this.showItem($item.getAttribute(\"aria-controls\"));\n this.$itemsContainer.setAttribute(\"tabindex\", \"0\");\n this.$itemsContainer.focus();\n });\n });\n this.$module.addEventListener(\"keydown\", (event) => {\n let preventDefaultKeyAction = false;\n switch (event.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.showPreviousItem();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.showNextItem();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n this.showFirstItem();\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n this.showLastItem();\n preventDefaultKeyAction = true;\n break;\n default:\n break;\n }\n if (preventDefaultKeyAction) {\n event.stopPropagation();\n event.preventDefault();\n }\n });\n\n this.$navigationButtons?.removeAttribute(\"hidden\");\n this.$navigationButtonPrev?.addEventListener(\"click\", () => {\n this.showPreviousItem();\n });\n this.$navigationButtonNext?.addEventListener(\"click\", () => {\n this.showNextItem();\n });\n\n this.$liveRegion = document.createElement(\"div\");\n this.$liveRegion.setAttribute(\"aria-live\", \"polite\");\n this.$liveRegion.setAttribute(\"aria-atomic\", \"true\");\n this.$liveRegion.setAttribute(\"class\", \"tna-gallery__item-header\");\n this.$itemsContainer.prepend(this.$liveRegion);\n this.$itemsContainer.classList.add(\"tna-gallery__items--hide-item-titles\");\n this.$itemsContainer.addEventListener(\"blur\", () =>\n this.$itemsContainer.removeAttribute(\"tabindex\"),\n );\n }\n\n showItem(id) {\n this.$items.forEach(($item) => {\n if (id && $item.id === id) {\n $item.removeAttribute(\"hidden\");\n $item.removeAttribute(\"aria-hidden\");\n } else {\n $item.setAttribute(\"hidden\", \"\");\n $item.setAttribute(\"aria-hidden\", \"true\");\n }\n });\n this.$navigationItems.forEach(($item) => {\n if (id) {\n if ($item.getAttribute(\"aria-controls\") === id) {\n $item.setAttribute(\"aria-current\", \"true\");\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n } else {\n $item.setAttribute(\"aria-current\", \"false\");\n }\n });\n this.currentId = id;\n / eslint-disable-next-line no-magic-numbers /\n this.$liveRegion.textContent = `Image ${this.getCurrentItemIndex() + 1} of ${this.$items.length}`;\n }\n\n getCurrentItemIndex() {\n return Array.from(this.$items).findIndex(\n ($item) => $item.id === this.currentId,\n );\n }\n\n showPreviousItem() {\n / eslint-disable-next-line no-magic-numbers /\n let nextIndexToShow = this.getCurrentItemIndex() - 1;\n / eslint-disable-next-line no-magic-numbers /\n if (nextIndexToShow < 0) {\n / eslint-disable-next-line no-magic-numbers /\n nextIndexToShow = this.$items.length - 1;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showNextItem() {\n / eslint-disable-next-line no-magic-numbers /\n let nextIndexToShow = this.getCurrentItemIndex() + 1;\n if (nextIndexToShow >= this.$items.length) {\n / eslint-disable-next-line no-magic-numbers /\n nextIndexToShow = 0;\n }\n this.showItem(this.$items[nextIndexToShow].id);\n }\n\n showFirstItem() {\n / eslint-disable-next-line no-magic-numbers /\n this.showItem(this.$items[0].id);\n }\n\n showLastItem() {\n / eslint-disable-next-line no-magic-numbers */\n this.showItem(this.$items[this.$items.length - 1].id);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Gallery","constructor","$module","this","$itemsContainer","querySelector","$items","querySelectorAll","$navigation","$navigationItems","$navigationButtons","length","classList","add","$navigationButtonPrev","$navigationButtonNext","setup","currentId","id","showItem","forEach","$item","setAttribute","removeAttribute","addEventListener","getAttribute","focus","event","preventDefaultKeyAction","showPreviousItem","showNextItem","showFirstItem","showLastItem","stopPropagation","preventDefault","$liveRegion","document","createElement","prepend","textContent","getCurrentItemIndex","Array","from","findIndex","nextIndexToShow"],"sourceRoot":""}

package/nationalarchives/components/global-header/global-header.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-global-header{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-global-header{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%);color:var(--font-base, #343338)}.tna-template--dark-theme .tna-global-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-global-header{background:#010101}}@media(prefers-contrast: more){.tna-global-header{background:#010101}}.tna-global-header__main{padding-top:1rem;padding-bottom:1.5rem}.tna-global-header__logo-wrapper{margin-top:0.5rem;display:flex}.tna-global-header__logo{display:flex;align-items:flex-end;gap:1rem;text-decoration:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited{color:var(--font-base, #343338)}.tna-global-header__logo--link:hover{outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:2px}.tna-global-header__logo-strapline{padding-right:0.625rem;line-height:2.25rem;text-transform:uppercase;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;border-radius:.1px;cursor:pointer;font-weight:700;font-size:1rem}.tna-global-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{height:100%;margin:0.5rem 0 0;position:relative;columns:2;column-gap:2rem;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;line-height:2.25rem;text-decoration:none;font-size:1.0625rem;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{color:var(--font-base, #343338)}.tna-global-header__navigation-item-link:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-global-header__top-navigation{padding:0 0 0.5rem;display:flex;justify-content:flex-end;gap:1.5rem;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;align-items:center;gap:0.5rem;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-global-header__top-navigation-link:hover,.tna-global-header__top-navigation-link:focus-visible{color:var(--font-base, #343338)}.tna-global-header__top-navigation-link:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}.tna-global-header .tna-logo{width:6.75rem;flex-shrink:0}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation{column-gap:1rem}.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:1rem}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:0.75rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:0.5rem;margin-bottom:0.5rem}.tna-global-header--collapse-on-medium .tna-logo{width:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:0.5rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:1rem}.tna-global-header__logo{gap:0.75rem}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:~~hsla~~(0,~~0%,100%,.~~1);border-top:2px var(--keyline-dark, rgb(38, 38, 42)) solid;border-bottom:2px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:600}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:1rem;margin-left:1.5rem}.tna-global-header__top-navigation{padding-top:0.5rem;padding-bottom:0.5rem;justify-content:flex-start;gap:1.5rem}.tna-global-header__top-navigation-link{padding:0.25rem 0}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 4rem);left:-2rem}.tna-global-header__navigation-item-link{padding:0.5rem 2rem}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation-button{font-size:0.875rem}.tna-global-header__navigation{width:calc(100% + 2rem);left:-1rem}.tna-global-header__navigation-item-link{padding:0.5rem 1rem}}@media(forced-colors: active){.tna-global-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(prefers-contrast: more){.tna-global-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-global-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-global-header__hamburger{display:none}}/# sourceMappingURL=global-header.css.map /
1	+ .tna-global-header{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-global-header{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%);color:var(--font-base, #343338)}.tna-template--dark-theme .tna-global-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-global-header{background:#010101}}@media(prefers-contrast: more){.tna-global-header{background:#010101}}.tna-global-header__main{padding-top:1rem;padding-bottom:1.5rem}.tna-global-header__logo-wrapper{margin-top:0.5rem;display:flex}.tna-global-header__logo{display:flex;align-items:flex-end;gap:1rem;text-decoration:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited{color:var(--font-base, #343338)}.tna-global-header__logo--link:hover{outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:2px}.tna-global-header__logo-strapline{padding-right:0.625rem;line-height:2.25rem;text-transform:uppercase;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;border-radius:.1px;cursor:pointer;font-weight:700;font-size:1rem}.tna-global-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{height:100%;margin:0.5rem 0 0;position:relative;columns:2;column-gap:2rem;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;line-height:2.25rem;text-decoration:none;font-size:1.0625rem;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{color:var(--font-base, #343338)}.tna-global-header__navigation-item-link:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-global-header__top-navigation{padding:0 0 0.5rem;display:flex;justify-content:flex-end;gap:1.5rem;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;align-items:center;gap:0.5rem;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-global-header__top-navigation-link:hover,.tna-global-header__top-navigation-link:focus-visible{color:var(--font-base, #343338)}.tna-global-header__top-navigation-link:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}.tna-global-header .tna-logo{width:6.75rem;flex-shrink:0}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation{column-gap:1rem}.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:1rem}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:0.75rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:0.5rem;margin-bottom:0.5rem}.tna-global-header--collapse-on-medium .tna-logo{width:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:0.5rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:1rem}.tna-global-header__logo{gap:0.75rem}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:rgba(255,255,255,.1);border-top:2px var(--keyline-dark, rgb(38, 38, 42)) solid;border-bottom:2px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:600}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:1rem;margin-left:1.5rem}.tna-global-header__top-navigation{padding-top:0.5rem;padding-bottom:0.5rem;justify-content:flex-start;gap:1.5rem}.tna-global-header__top-navigation-link{padding:0.25rem 0}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 4rem);left:-2rem}.tna-global-header__navigation-item-link{padding:0.5rem 2rem}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation-button{font-size:0.875rem}.tna-global-header__navigation{width:calc(100% + 2rem);left:-1rem}.tna-global-header__navigation-item-link{padding:0.5rem 1rem}}@media(forced-colors: active){.tna-global-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(prefers-contrast: more){.tna-global-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-global-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-global-header__hamburger{display:none}}/# sourceMappingURL=global-header.css.map /

package/nationalarchives/components/global-header/global-header.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/global-header/global-header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA8OA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA3KA,4CAJA,gCCrEF,mBAEE,wEDmEA,gCC3DA,6CACE,mBAIA,mCADF,+CAEI,oBDweJ,+BCxfF,mBAqBI,oBAGF,yBACE,iBACA,sBAGF,iCACE,kBAEA,aAGF,yBACE,aACA,qBACA,SAEA,qBAGE,0GD0BJ,gCCpBI,qCDoEF,sDClEI,mBAKN,mCACE,uBAEA,oBACA,yBC7BF,YCmBA,gDDlBA,YCqBoB,IDvDpB,kBDoEA,8CACE,aAGF,8BACE,WACA,cAEA,qBDDF,gDCKE,2EAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,gBACA,aACA,mBACA,WAEA,kBAEA,cAEA,gBAEA,6BACA,sBACA,mBAEA,eC1GF,YCiBsB,IDlCtB,eD+HE,4CClEF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF4GhC,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,YACA,kBAEA,kBAEA,UACA,gBAEA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBAEA,oBACA,qBCjLF,oBF6FI,+DC0FF,wIDhHF,gCCsHE,+CChIF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF0KpC,mCACE,mBAEA,aACA,yBACA,WCvMF,oBD0ME,gBAMF,wCACE,aACA,mBACA,WAEA,qBAEA,qIDhJF,6CCsJE,oGDtJF,gCC2JE,8CCrKF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF8MlC,4CACE,WAEA,qBAEA,iDACE,kBAKN,6BACE,cAEA,cG5MF,kDHgNE,+BACE,gBAGF,yCC5PF,eDgQE,8EACE,WAGF,kFACE,OAEA,QAGF,gEACE,oBAGF,gEACE,YAGF,wEACE,kBACA,qBAGF,iDACE,WAGF,0EACE,4BAGF,sEACE,qBAGF,iOAGE,aG1NJ,wBH+NE,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,YAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,oCD5OA,uHCkPF,oCACE,sBACA,uBAGF,yCACE,oBCxUJ,YCoBwB,IFwTtB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,mBAGF,mCACE,mBACA,sBAEA,2BAEA,WAGF,wCACE,mBGlUJ,kDHuUE,6BACE,WAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,qBGhVJ,wBHqVE,6BACE,aAGF,mCACE,cAGF,sCCjZF,mBDqZE,+BACE,wBAEA,WAGF,yCACE,qBDoGJ,8BC9fF,mBD2FM,gEA6ZJ,+BCxfF,mBD2FM,gEAmaJ,8BC3FE,sCACE,YAEA,cCxaJ,mBAiBA,YCiBsB,IF0YlB,YAGF,8BACE","file":"global-header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\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-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{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(\"maroon\")} !important;\n --accent-border-bright: #{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(\"chestnut\")} !important;\n --accent-border-bright: #{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(\"forest\")} !important;\n --accent-border-bright: #{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(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-global-header {\n @include colour.contrast;\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n @include colour.colour-font(\"font-base\");\n\n .tna-template--dark-theme & {\n background: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n background: colour.brand-colour(\"black\");\n }\n }\n\n @include colour.on-high-contrast {\n background: colour.brand-colour(\"black\");\n }\n\n &__main {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-wrapper {\n margin-top: spacing.space(0.5);\n\n display: flex;\n }\n\n &__logo {\n display: flex;\n align-items: flex-end;\n gap: spacing.space(1);\n\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 2px;\n }\n }\n }\n\n &__logo-strapline {\n padding-right: spacing.space(0.625);\n\n line-height: math.div(6.75rem, 3);\n text-transform: uppercase;\n\n @include typography.heading-font;\n @include typography.font-size(20);\n }\n\n &__navigation-button-wrapper {\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: inline-block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n position: relative;\n\n color: inherit;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n border-radius: 0.1px;\n\n cursor: pointer;\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--opened {\n .tna-global-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation-wrapper {\n }\n\n &__navigation {\n height: 100%;\n margin: spacing.space(0.5) 0 0;\n\n position: relative;\n\n columns: 2;\n column-gap: spacing.space(2);\n\n list-style: none;\n }\n\n &__navigation-item {\n break-inside: avoid;\n }\n\n &__navigation-item-link {\n min-width: 15rem;\n height: math.div(6.75rem, 3);\n\n display: block;\n box-sizing: border-box;\n\n line-height: math.div(6.75rem, 3);\n text-decoration: none;\n\n @include typography.font-size(17);\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__top-navigation {\n padding: 0 0 spacing.space(0.5);\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(1.5);\n\n @include typography.font-size(15);\n list-style: none;\n }\n\n &__top-navigation-item {\n }\n\n &__top-navigation-link {\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &:focus-visible {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n svg {\n height: 1em;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n }\n\n .tna-logo {\n width: 6.75rem;\n\n flex-shrink: 0;\n }\n\n @include media.on-medium {\n &__navigation {\n column-gap: spacing.space(1);\n }\n\n &__navigation-item-link {\n @include typography.font-size(16);\n }\n\n &--collapse-on-medium &__navigation-wrapper {\n width: 100%;\n }\n\n &--collapse-on-medium &__top-navigation-wrapper {\n flex: 1;\n\n order: 2;\n }\n\n &--collapse-on-medium &__main {\n padding-bottom: spacing.space(1);\n }\n\n &--collapse-on-medium &__logo {\n gap: spacing.space(0.75);\n }\n\n &--collapse-on-medium &__logo-wrapper {\n margin-top: spacing.space(0.5);\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium .tna-logo {\n width: 5rem;\n }\n\n &--collapse-on-medium &__logo-strapline {\n line-height: math.div(5rem, 3);\n }\n\n &--collapse-on-medium &__navigation {\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium &__navigation,\n &--collapse-on-medium &__navigation-item,\n &--collapse-on-medium &__navigation-item-link {\n height: auto;\n }\n }\n\n @include media.on-mobile {\n &__main {\n padding-bottom: 0;\n }\n\n &__logo-wrapper,\n &__navigation-button-wrapper {\n margin-top: 0;\n margin-bottom: spacing.space(1);\n }\n\n &__logo {\n gap: spacing.space(0.75);\n }\n\n &__navigation-button-wrapper {\n display: flex;\n align-items: center;\n }\n\n &__navigation,\n &__navigation-item,\n &__navigation-item-link {\n height: auto;\n }\n\n &__navigation {\n margin-top: 0;\n\n columns: 1;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__navigation-item-link {\n line-height: 1.75rem;\n @include typography.main-font-weight-medium;\n }\n\n &__navigation-item:last-child &__navigation-item-link {\n border-bottom: none;\n }\n\n &__navigation-item-contents {\n display: block;\n }\n\n &__navigation-item-children {\n margin-bottom: spacing.space(1);\n margin-left: spacing.space(1.5);\n }\n\n &__top-navigation {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n justify-content: flex-start;\n\n gap: spacing.space(1.5);\n }\n\n &__top-navigation-link {\n padding: spacing.space(0.25) 0;\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-double()});\n\n left: -#{grid.gutter-width()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width();\n }\n }\n\n @include media.on-tiny {\n .tna-logo {\n width: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation-button {\n @include typography.font-size(14);\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-tiny-double()});\n\n left: -#{grid.gutter-width-tiny()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width-tiny();\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n @include colour.on-forced-colours {\n &__navigation-button {\n height: auto;\n\n line-height: 2;\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n border: none;\n }\n\n &__hamburger {\n display: none;\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-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/global-header/global-header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAmPA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA/KA,4CAJA,gCCtEF,mBAEE,wEDoEA,gCC5DA,6CACE,mBAIA,mCADF,+CAEI,oBD6eJ,+BC7fF,mBAqBI,oBAGF,yBACE,iBACA,sBAGF,iCACE,kBAEA,aAGF,yBACE,aACA,qBACA,SAEA,qBAGE,0GD2BJ,gCCrBI,qCDqEF,sDCnEI,mBAKN,mCACE,uBAEA,oBACA,yBC7BF,YCmBA,gDDlBA,YCqBoB,IDvDpB,kBDoEA,8CACE,aAGF,8BACE,WACA,cAEA,qEAIA,2EAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,gBACA,aACA,mBACA,WAEA,kBAEA,cAEA,gBAEA,6BACA,sBACA,mBAEA,eC1GF,YCiBsB,IDlCtB,eD+HE,4CClEF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF4GhC,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,YACA,kBAEA,kBAEA,UACA,gBAEA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBAEA,oBACA,qBCjLF,oBF8FI,+DCyFF,wID/GF,gCCqHE,+CChIF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF0KpC,mCACE,mBAEA,aACA,yBACA,WCvMF,oBD0ME,gBAMF,wCACE,aACA,mBACA,WAEA,qBAEA,qID/IF,6CCqJE,oGDrJF,gCC0JE,8CCrKF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF8MlC,4CACE,WAEA,qBAEA,iDACE,kBAKN,6BACE,cAEA,cG5MF,kDHgNE,+BACE,gBAGF,yCC5PF,eDgQE,8EACE,WAGF,kFACE,OAEA,QAGF,gEACE,oBAGF,gEACE,YAGF,wEACE,kBACA,qBAGF,iDACE,WAGF,0EACE,4BAGF,sEACE,qBAGF,iOAGE,aG1NJ,wBH+NE,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,YAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCD3OA,uHCiPF,oCACE,sBACA,uBAGF,yCACE,oBCxUJ,YCoBwB,IFwTtB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,mBAGF,mCACE,mBACA,sBAEA,2BAEA,WAGF,wCACE,mBGlUJ,kDHuUE,6BACE,WAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,qBGhVJ,wBHqVE,6BACE,aAGF,mCACE,cAGF,sCCjZF,mBDqZE,+BACE,wBAEA,WAGF,yCACE,qBDyGJ,8BCngBF,mBD4FM,gEAiaJ,+BC7fF,mBD4FM,gEAuaJ,8BChGE,sCACE,YAEA,cCxaJ,mBAiBA,YCiBsB,IF0YlB,YAGF,8BACE","file":"global-header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n &:hover {\n outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n }\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\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-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{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(\"maroon\")} !important;\n --accent-border-bright: #{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(\"chestnut\")} !important;\n --accent-border-bright: #{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(\"forest\")} !important;\n --accent-border-bright: #{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(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-global-header {\n @include colour.contrast;\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n @include colour.colour-font(\"font-base\");\n\n .tna-template--dark-theme & {\n background: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n background: colour.brand-colour(\"black\");\n }\n }\n\n @include colour.on-high-contrast {\n background: colour.brand-colour(\"black\");\n }\n\n &__main {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-wrapper {\n margin-top: spacing.space(0.5);\n\n display: flex;\n }\n\n &__logo {\n display: flex;\n align-items: flex-end;\n gap: spacing.space(1);\n\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 2px;\n }\n }\n }\n\n &__logo-strapline {\n padding-right: spacing.space(0.625);\n\n line-height: math.div(6.75rem, 3);\n text-transform: uppercase;\n\n @include typography.heading-font;\n @include typography.font-size(20);\n }\n\n &__navigation-button-wrapper {\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: inline-block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n\n position: relative;\n\n color: inherit;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n border-radius: 0.1px;\n\n cursor: pointer;\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--opened {\n .tna-global-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation-wrapper {\n }\n\n &__navigation {\n height: 100%;\n margin: spacing.space(0.5) 0 0;\n\n position: relative;\n\n columns: 2;\n column-gap: spacing.space(2);\n\n list-style: none;\n }\n\n &__navigation-item {\n break-inside: avoid;\n }\n\n &__navigation-item-link {\n min-width: 15rem;\n height: math.div(6.75rem, 3);\n\n display: block;\n box-sizing: border-box;\n\n line-height: math.div(6.75rem, 3);\n text-decoration: none;\n\n @include typography.font-size(17);\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__top-navigation {\n padding: 0 0 spacing.space(0.5);\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(1.5);\n\n @include typography.font-size(15);\n list-style: none;\n }\n\n &__top-navigation-item {\n }\n\n &__top-navigation-link {\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &:focus-visible {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n svg {\n height: 1em;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n }\n\n .tna-logo {\n width: 6.75rem;\n\n flex-shrink: 0;\n }\n\n @include media.on-medium {\n &__navigation {\n column-gap: spacing.space(1);\n }\n\n &__navigation-item-link {\n @include typography.font-size(16);\n }\n\n &--collapse-on-medium &__navigation-wrapper {\n width: 100%;\n }\n\n &--collapse-on-medium &__top-navigation-wrapper {\n flex: 1;\n\n order: 2;\n }\n\n &--collapse-on-medium &__main {\n padding-bottom: spacing.space(1);\n }\n\n &--collapse-on-medium &__logo {\n gap: spacing.space(0.75);\n }\n\n &--collapse-on-medium &__logo-wrapper {\n margin-top: spacing.space(0.5);\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium .tna-logo {\n width: 5rem;\n }\n\n &--collapse-on-medium &__logo-strapline {\n line-height: math.div(5rem, 3);\n }\n\n &--collapse-on-medium &__navigation {\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium &__navigation,\n &--collapse-on-medium &__navigation-item,\n &--collapse-on-medium &__navigation-item-link {\n height: auto;\n }\n }\n\n @include media.on-mobile {\n &__main {\n padding-bottom: 0;\n }\n\n &__logo-wrapper,\n &__navigation-button-wrapper {\n margin-top: 0;\n margin-bottom: spacing.space(1);\n }\n\n &__logo {\n gap: spacing.space(0.75);\n }\n\n &__navigation-button-wrapper {\n display: flex;\n align-items: center;\n }\n\n &__navigation,\n &__navigation-item,\n &__navigation-item-link {\n height: auto;\n }\n\n &__navigation {\n margin-top: 0;\n\n columns: 1;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__navigation-item-link {\n line-height: 1.75rem;\n @include typography.main-font-weight-medium;\n }\n\n &__navigation-item:last-child &__navigation-item-link {\n border-bottom: none;\n }\n\n &__navigation-item-contents {\n display: block;\n }\n\n &__navigation-item-children {\n margin-bottom: spacing.space(1);\n margin-left: spacing.space(1.5);\n }\n\n &__top-navigation {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n justify-content: flex-start;\n\n gap: spacing.space(1.5);\n }\n\n &__top-navigation-link {\n padding: spacing.space(0.25) 0;\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-double()});\n\n left: -#{grid.gutter-width()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width();\n }\n }\n\n @include media.on-tiny {\n .tna-logo {\n width: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation-button {\n @include typography.font-size(14);\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-tiny-double()});\n\n left: -#{grid.gutter-width-tiny()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width-tiny();\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n @include colour.on-forced-colours {\n &__navigation-button {\n height: auto;\n\n line-height: 2;\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n border: none;\n }\n\n &__hamburger {\n display: none;\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-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\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/global-header/global-header.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"components/global-header/global-header.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,~~IAAAC~~,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,~~IACA~~,~~oBAAAkB,QAAAA,~~OAAAC,~~aACAV,OAAAC,~~eAAAV,EAAAkB,OAAAC,YAAA,~~CAAuDC~~,MAAA,~~WAEvDX~~,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,~~8CCLzC~~,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,yCACnCF,KAAKG,YACHJ,GACAA,EAAQG,cAAc,0CACxBF,KAAKI,eACHL,GACAA,EAAQG,cAAc,8CACxBF,KAAKK,OACHN,IACEC,KAAKG,aACLH,KAAKG,YAAYG,iBAAiB,mBACjCN,KAAKI,gBACJJ,KAAKI,eAAeE,iBAAiB,mBAC3CN,KAAKO,YAAa,EAClBP,KAAKQ,IAAMC,OAAOC,WAAW,qBAG1BV,KAAKD,SACLC,KAAKC,gBACJD,KAAKG,aAAgBH,KAAKI,kBAK9BJ,KAAKC,cAAcU,gBAAgB,UACnCX,KAAKY,YACLZ,KAAKC,cAAcY,iBAAiB,QAAS,IAC3Cb,KAAKc,0BAEH,qBAAsBd,KAAKQ,IAC7BR,KAAKQ,IAAIK,iBAAiB,SAAU,IAAMb,KAAKY,aAE/CZ,KAAKQ,IAAIO,YAAY,IAAMf,KAAKY,aAGlCZ,KAAKD,QAAQc,iBAAiB,QAAUG,IACnB,WAAfA,EAAMC,MAAqBjB,KAAKQ,IAAIU,SAAWlB,KAAKO,aACtDP,KAAKO,YAAa,EAClBP,KAAKY,YACLZ,KAAKC,cAAckB,WAGzB,CAEA,sBAAAL,GACEd,KAAKO,YAAcP,KAAKO,WACxBP,KAAKY,WACP,CAEA,SAAAA,GACMZ,KAAKQ,IAAIU,QACPlB,KAAKO,WACPP,KAAKoB,OAELpB,KAAKqB,OAGPrB,KAAKoB,MAET,CAEA,IAAAC,GACMrB,KAAKG,cACPH,KAAKG,YAAYmB,QAAS,EAC1BtB,KAAKG,YAAYoB,aAAa,cAAe,SAE3CvB,KAAKI,iBACPJ,KAAKI,eAAekB,QAAS,EAC7BtB,KAAKI,eAAemB,aAAa,cAAe,SAElDvB,KAAKC,cAAcsB,aAAa,gBAAiB,SACjDvB,KAAKC,cAAcsB,aAAa,QAAS,aACzCvB,KAAKC,cAAcuB,UAAUC,OAC3B,gDAGF,IAAK,IAAIC,EAAQ,EAAGA,EAAQ1B,KAAKK,OAAOsB,OAAQD,GAAS,EACvD1B,KAAKK,OAAOqB,GAAOH,aAAa,WAAY,KAEhD,CAEA,IAAAH,GACMpB,KAAKG,cACPH,KAAKG,YAAYmB,QAAS,EAC1BtB,KAAKG,YAAYoB,aAAa,cAAe,UAE3CvB,KAAKI,iBACPJ,KAAKI,eAAekB,QAAS,EAC7BtB,KAAKI,eAAemB,aAAa,cAAe,UAElDvB,KAAKC,cAAcsB,aAAa,gBAAiB,QACjDvB,KAAKC,cAAcsB,aAAa,QAAS,cACzCvB,KAAKC,cAAcuB,UAAUI,IAC3B,gDAGF,IAAK,IAAIF,EAAQ,EAAGA,EAAQ1B,KAAKK,OAAOsB,OAAQD,GAAS,EACvD1B,KAAKK,OAAOqB,GAAOH,aAAa,WAAY,IAEhD","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\~~nvar~~ __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\~~tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\~~tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\~~t}\n\~~tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class GlobalHeader {\n constructor($module) {\n this.$module = $module;\n this.$toggleButton =\n $module && $module.querySelector(\".tna-global-header__navigation-button\");\n this.$navigation =\n $module &&\n $module.querySelector(\".tna-global-header__navigation-wrapper\");\n this.$topNavigation =\n $module &&\n $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n this.$links =\n $module &&\n ((this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\")) \|\|\n (this.$topNavigation &&\n this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n if (\n !this.$module \|\|\n !this.$toggleButton \|\|\n (!this.$navigation && !this.$topNavigation)\n ) {\n return;\n }\n\n this.$toggleButton.removeAttribute(\"hidden\");\n this.syncState();\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n\n this.$module.addEventListener(\"keyup\", (event) => {\n if (event.code === \"Escape\" && this.mql.matches && this.menuOpened) {\n this.menuOpened = false;\n this.syncState();\n this.$toggleButton.focus();\n }\n });\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n this.show();\n } else {\n this.hide();\n }\n } else {\n this.show();\n }\n }\n\n hide() {\n if (this.$navigation) {\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.hidden = true;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-global-header__navigation-button--opened\",\n );\n /* eslint-disable-next-line no-magic-numbers /\n for (let index = 0; index < this.$links.length; index += 1) {\n this.$links[index].setAttribute(\"tabindex\", \"-1\");\n }\n }\n\n show() {\n if (this.$navigation) {\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.hidden = false;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\n \"tna-global-header__navigation-button--opened\",\n );\n / eslint-disable-next-line no-magic-numbers */\n for (let index = 0; index < this.$links.length; index += 1) {\n this.$links[index].setAttribute(\"tabindex\", \"0\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","GlobalHeader","constructor","$module","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","event","code","matches","focus","show","hide","hidden","setAttribute","classList","remove","index","length","add"],"sourceRoot":""}
1	+ {"version":3,"file":"components/global-header/global-header.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,kDCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,yCACnCF,KAAKG,YACHJ,GACAA,EAAQG,cAAc,0CACxBF,KAAKI,eACHL,GACAA,EAAQG,cAAc,8CACxBF,KAAKK,OACHN,IACEC,KAAKG,aACLH,KAAKG,YAAYG,iBAAiB,mBACjCN,KAAKI,gBACJJ,KAAKI,eAAeE,iBAAiB,mBAC3CN,KAAKO,YAAa,EAClBP,KAAKQ,IAAMC,OAAOC,WAAW,qBAG1BV,KAAKD,SACLC,KAAKC,gBACJD,KAAKG,aAAgBH,KAAKI,kBAK9BJ,KAAKC,cAAcU,gBAAgB,UACnCX,KAAKY,YACLZ,KAAKC,cAAcY,iBAAiB,QAAS,IAC3Cb,KAAKc,0BAEH,qBAAsBd,KAAKQ,IAC7BR,KAAKQ,IAAIK,iBAAiB,SAAU,IAAMb,KAAKY,aAE/CZ,KAAKQ,IAAIO,YAAY,IAAMf,KAAKY,aAGlCZ,KAAKD,QAAQc,iBAAiB,QAAUG,IACnB,WAAfA,EAAMC,MAAqBjB,KAAKQ,IAAIU,SAAWlB,KAAKO,aACtDP,KAAKO,YAAa,EAClBP,KAAKY,YACLZ,KAAKC,cAAckB,WAGzB,CAEA,sBAAAL,GACEd,KAAKO,YAAcP,KAAKO,WACxBP,KAAKY,WACP,CAEA,SAAAA,GACMZ,KAAKQ,IAAIU,QACPlB,KAAKO,WACPP,KAAKoB,OAELpB,KAAKqB,OAGPrB,KAAKoB,MAET,CAEA,IAAAC,GACMrB,KAAKG,cACPH,KAAKG,YAAYmB,QAAS,EAC1BtB,KAAKG,YAAYoB,aAAa,cAAe,SAE3CvB,KAAKI,iBACPJ,KAAKI,eAAekB,QAAS,EAC7BtB,KAAKI,eAAemB,aAAa,cAAe,SAElDvB,KAAKC,cAAcsB,aAAa,gBAAiB,SACjDvB,KAAKC,cAAcsB,aAAa,QAAS,aACzCvB,KAAKC,cAAcuB,UAAUC,OAC3B,gDAGF,IAAK,IAAIC,EAAQ,EAAGA,EAAQ1B,KAAKK,OAAOsB,OAAQD,GAAS,EACvD1B,KAAKK,OAAOqB,GAAOH,aAAa,WAAY,KAEhD,CAEA,IAAAH,GACMpB,KAAKG,cACPH,KAAKG,YAAYmB,QAAS,EAC1BtB,KAAKG,YAAYoB,aAAa,cAAe,UAE3CvB,KAAKI,iBACPJ,KAAKI,eAAekB,QAAS,EAC7BtB,KAAKI,eAAemB,aAAa,cAAe,UAElDvB,KAAKC,cAAcsB,aAAa,gBAAiB,QACjDvB,KAAKC,cAAcsB,aAAa,QAAS,cACzCvB,KAAKC,cAAcuB,UAAUI,IAC3B,gDAGF,IAAK,IAAIF,EAAQ,EAAGA,EAAQ1B,KAAKK,OAAOsB,OAAQD,GAAS,EACvD1B,KAAKK,OAAOqB,GAAOH,aAAa,WAAY,IAEhD","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class GlobalHeader {\n constructor($module) {\n this.$module = $module;\n this.$toggleButton =\n $module && $module.querySelector(\".tna-global-header__navigation-button\");\n this.$navigation =\n $module &&\n $module.querySelector(\".tna-global-header__navigation-wrapper\");\n this.$topNavigation =\n $module &&\n $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n this.$links =\n $module &&\n ((this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\")) \|\|\n (this.$topNavigation &&\n this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n if (\n !this.$module \|\|\n !this.$toggleButton \|\|\n (!this.$navigation && !this.$topNavigation)\n ) {\n return;\n }\n\n this.$toggleButton.removeAttribute(\"hidden\");\n this.syncState();\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n\n this.$module.addEventListener(\"keyup\", (event) => {\n if (event.code === \"Escape\" && this.mql.matches && this.menuOpened) {\n this.menuOpened = false;\n this.syncState();\n this.$toggleButton.focus();\n }\n });\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n this.show();\n } else {\n this.hide();\n }\n } else {\n this.show();\n }\n }\n\n hide() {\n if (this.$navigation) {\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.hidden = true;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-global-header__navigation-button--opened\",\n );\n /* eslint-disable-next-line no-magic-numbers /\n for (let index = 0; index < this.$links.length; index += 1) {\n this.$links[index].setAttribute(\"tabindex\", \"-1\");\n }\n }\n\n show() {\n if (this.$navigation) {\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n }\n if (this.$topNavigation) {\n this.$topNavigation.hidden = false;\n this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n }\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\n \"tna-global-header__navigation-button--opened\",\n );\n / eslint-disable-next-line no-magic-numbers */\n for (let index = 0; index < this.$links.length; index += 1) {\n this.$links[index].setAttribute(\"tabindex\", \"0\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","GlobalHeader","constructor","$module","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","event","code","matches","focus","show","hide","hidden","setAttribute","classList","remove","index","length","add"],"sourceRoot":""}