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/accordion/accordion.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/accordion/accordion.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CA0BA,oCACE,gBAUA,4DACE,aCzBF,wBACE,iBAGF,qBACE,iBAIF,2BACE,mBACA,UAEA,yBAEA,YACA,mBAEA,eC8CF,2BCvEA,eF8BE,iCE+BF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHWpC,wBC0DI,+DDvDF,kBACA,UAEA,sCCoDE,4DD/CJ,2DACE,UAGF,wBACE,WACA,SACA,gCAGA,cAEA,kBAEA,oBACA,gBAEA,gBAEA,yBAEA,YACA,mBAEA,eCCF,qCCvEA,mBAqBA,YCSA,qBDRA,mCACA,kBACA,yBAPA,YCiBsB,IH0CpB,0BACE,kBAGF,gCACE,WAEA,QACA,SAEA,kBACA,gCACA,aAEA,2CACA,kEACA,mBAGF,8BElCF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFmDpC,4DDwBI,sCACE,0DAKF,oDACE,2CAKN,wBACE,aAEA,kBAEA,mBC4YF,8BDvYI,gCACE,YAEA,WACA,YAEA,sBAEA,iBAEA,YAIA,oDACE,YAEA","file":"accordion.css","sourcesContent":["@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 \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-accordion {\n @include spacing.space-above;\n\n // NON INTERACTIVE\n &__item {\n @include spacing.space-above;\n }\n\n &__heading {\n padding-top: spacing.space(1);\n }\n\n &__body {\n padding-top: spacing.space(1);\n }\n\n // INTERACTIVE\n &__toggle-all {\n margin-bottom: spacing.space(1);\n padding: 0;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"link\");\n @include typography.font-size(16);\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__details {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n position: relative;\n z-index: 1;\n\n &:first-of-type {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n }\n\n &__details:has(&__summary:focus) {\n z-index: 2;\n }\n\n &__summary {\n width: 100%;\n margin: 0;\n padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)\n spacing.space(1);\n\n display: block;\n\n position: relative;\n\n line-height: inherit;\n text-align: left;\n\n list-style: none;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(18);\n @include typography.main-font(true);\n\n * {\n font-size: inherit;\n }\n\n &::before {\n content: \"\";\n\n width: 0;\n height: 0;\n\n position: absolute;\n top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n right: 0.75rem;\n\n border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;\n border-color: colour.colour-var(\"font-light\") transparent;\n border-style: solid;\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n @include colour.colour-background(\"background-tint\");\n\n &::before {\n border-color: colour.colour-var(\"font-dark\") transparent;\n }\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;\n }\n }\n }\n\n &__content {\n padding: spacing.space(1);\n\n position: relative;\n\n border-radius: 0.1px;\n }\n\n @include colour.on-forced-colours {\n &__summary {\n &::before {\n content: \"\\2193\";\n\n width: auto;\n height: auto;\n\n top: calc(50% - 0.5rem);\n\n line-height: 1rem;\n\n border: none;\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n content: \"\\2191\";\n\n border: none;\n }\n }\n }\n }\n}\n","@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 \"../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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/accordion/accordion.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CA0BA,oCACE,gBAUA,4DACE,aCzBF,wBACE,iBAGF,qBACE,iBAIF,2BACE,mBACA,UAEA,yBAEA,YACA,mBAEA,eC+CF,2BCxEA,eF8BE,iCE+BF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHWpC,wBC2DI,+DDxDF,kBACA,UAEA,sCCqDE,4DDhDJ,2DACE,UAGF,wBACE,WACA,SACA,gCAGA,cAEA,kBAEA,oBACA,gBAEA,gBAEA,yBAEA,YACA,mBAEA,eCEF,qCCxEA,mBAqBA,YCSA,qBDRA,mCACA,kBACA,yBAPA,YCiBsB,IH0CpB,0BACE,kBAGF,gCACE,WAEA,QACA,SAEA,kBACA,gCACA,aAEA,2CACA,kEACA,mBAGF,8BElCF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFoDpC,4DDuBI,sCACE,0DAKF,oDACE,2CAKN,wBACE,aAEA,kBAEA,mBCiZF,8BD5YI,gCACE,YAEA,WACA,YAEA,sBAEA,iBAEA,YAIA,oDACE,YAEA","file":"accordion.css","sourcesContent":["@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 \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-accordion {\n @include spacing.space-above;\n\n // NON INTERACTIVE\n &__item {\n @include spacing.space-above;\n }\n\n &__heading {\n padding-top: spacing.space(1);\n }\n\n &__body {\n padding-top: spacing.space(1);\n }\n\n // INTERACTIVE\n &__toggle-all {\n margin-bottom: spacing.space(1);\n padding: 0;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"link\");\n @include typography.font-size(16);\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__details {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n position: relative;\n z-index: 1;\n\n &:first-of-type {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n }\n\n &__details:has(&__summary:focus) {\n z-index: 2;\n }\n\n &__summary {\n width: 100%;\n margin: 0;\n padding: spacing.space(0.5) spacing.space(3) spacing.space(0.5)\n spacing.space(1);\n\n display: block;\n\n position: relative;\n\n line-height: inherit;\n text-align: left;\n\n list-style: none;\n\n background: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.font-size(18);\n @include typography.main-font(true);\n\n * {\n font-size: inherit;\n }\n\n &::before {\n content: \"\";\n\n width: 0;\n height: 0;\n\n position: absolute;\n top: calc(50% - #{math.div(math.sqrt(3), 4)}rem);\n right: 0.75rem;\n\n border-width: #{math.div(math.sqrt(3), 2)}rem 0.5rem 0 0.5rem;\n border-color: colour.colour-var(\"font-light\") transparent;\n border-style: solid;\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n @include colour.colour-background(\"background-tint\");\n\n &::before {\n border-color: colour.colour-var(\"font-dark\") transparent;\n }\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n border-width: 0 0.5rem #{math.div(math.sqrt(3), 2)}rem 0.5rem;\n }\n }\n }\n\n &__content {\n padding: spacing.space(1);\n\n position: relative;\n\n border-radius: 0.1px;\n }\n\n @include colour.on-forced-colours {\n &__summary {\n &::before {\n content: \"\\2193\";\n\n width: auto;\n height: auto;\n\n top: calc(50% - 0.5rem);\n\n line-height: 1rem;\n\n border: none;\n }\n\n &[aria-expanded=\"true\"] {\n &::before {\n content: \"\\2191\";\n\n border: none;\n }\n }\n }\n }\n}\n","@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 \"../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"]}

package/nationalarchives/components/accordion/accordion.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={927(t,e,o){o.d(e,{DJ:()=>i});var r=o(181);const i=t=>{const e=t.querySelector("caption");"true"!==t.dataset.tableScrollInitialised&&(e&&!e.id&&(e.id=`table-caption-${(0,r.A)()}`),t.dataset.tableScrollInitialised="true"),t.scrollWidth>t.clientWidth?(t.setAttribute("tabindex","0"),t.setAttribute("role","region"),t.setAttribute("aria-labelledby",e?.id||""),t.classList.add("tna-table-wrapper--scroll")):(t.removeAttribute("tabindex"),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.classList.remove("tna-table-wrapper--scroll"))}},181(t,e,o){o.d(e,{A:()=>r});const r=()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/gu,t=>(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16))}},e={};function o(r){var i=e[r];if(void 0!==i)return i.exports;var n=e[r]={exports:{}};return t[r](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var r in e)o.o(e,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};o.r(r),o.d(r,{Accordion:()=>n});var i=o(927);class n{constructor(t){this.$module=t,this.$items=t&&t.querySelectorAll(".tna-accordion__item"),this.$module&&this.$items&&(this.allowMultipleItemsOpen="true"!==this.$module.dataset.singleOpenItem,this.$items.forEach(t=>this.initItem(t)),this.initState(),this.$toggleAllButton=this.$module.querySelector(".tna-accordion__toggle-all"),this.$toggleAllButton&&(this.syncToggleAllButton(),this.$toggleAllButton.removeAttribute("hidden"),this.$toggleAllButton.addEventListener("click",()=>{this.isAllOpen()?this.$items.forEach(t=>this.closeItem(t)):this.$items.forEach(t=>this.openItem(t)),this.syncToggleAllButton()})))}initItem(t){const e=t.querySelector(".tna-accordion__heading"),o=t.querySelector(".tna-accordion__body");if(!e||!o)return;t.classList.add("tna-accordion__details"),t.classList.remove("tna-accordion__item"),e.removeAttribute("class"),o.classList.add("tna-accordion__content"),o.classList.remove("tna-accordion__body"),o.setAttribute("hidden","");const r=document.createElement("button");r.classList.add("tna-accordion__summary"),r.setAttribute("type","button"),r.setAttribute("aria-controls",o.id),r.innerText=e.innerText,e.innerText="",e.appendChild(r),r.addEventListener("click",()=>{"true"===r.getAttribute("aria-expanded")?this.closeItem(t):this.openItem(t)})}initState(){this.$items.forEach(t=>{"true"===t.dataset.isopen?this.openItem(t):this.closeItem(t),t.removeAttribute("data-isopen")})}openItem(t){this.allowMultipleItemsOpen||this.closeAllItemsExcept(t);const e=t.querySelector(".tna-accordion__summary"),o=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","true"),e.setAttribute("aria-label",`${e.innerText.trim()}, Hide this section`),o.removeAttribute("hidden"),this.syncToggleAllButton();const r=o.querySelectorAll(".tna-table-wrapper");r&&r.forEach(t=>{(0,i.DJ)(t)})}closeItem(t){const e=t.querySelector(".tna-accordion__summary"),o=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","false"),e.setAttribute("aria-label",`${e.innerText.trim()}, Show this section`),o.setAttribute("hidden",""),this.syncToggleAllButton()}closeAllItemsExcept(t){Array.from(this.$items).filter(e=>e.querySelector(".tna-accordion__summary")!==t&&"true"===e.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")).forEach(t=>this.closeItem(t))}isAllOpen(){return Array.from(this.$items).every(t=>"true"===t.querySelector(".tna-accordion__summary").getAttribute("aria-expanded"))}syncToggleAllButton(){this.$toggleAllButton&&(this.isAllOpen()?this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.closeAllLabel||"Hide all sections":this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.openAllLabel||"Show all sections")}}return r})());
+!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={927(t,e,r){var o=r(181);r.d(e,["DJ",0,t=>{const e=t.querySelector("caption");"true"!==t.dataset.tableScrollInitialised&&(e&&!e.id&&(e.id=`table-caption-${(0,o.A)()}`),t.dataset.tableScrollInitialised="true"),t.scrollWidth>t.clientWidth?(t.setAttribute("tabindex","0"),t.setAttribute("role","region"),t.setAttribute("aria-labelledby",e?.id||""),t.classList.add("tna-table-wrapper--scroll")):(t.removeAttribute("tabindex"),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.classList.remove("tna-table-wrapper--scroll"))}])},181(t,e,r){r.d(e,["A",0,()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/gu,t=>(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16))])}};const e={};function r(o){const i=e[o];if(void 0!==i)return i.exports;const l=e[o]={exports:{}};return t[o](l,l.exports,r),l.exports}r.d=(t,e)=>{if(Array.isArray(e))for(var o=0;o<e.length;){var i=e[o++],l=e[o++],n=0===l?{enumerable:!0,value:e[o++]}:{enumerable:!0,get:l};r.o(t,i)||Object.defineProperty(t,i,n)}else for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};let o={};r.r(o),r.d(o,{Accordion:()=>l});var i=r(927);class l{constructor(t){this.$module=t,this.$items=t&&t.querySelectorAll(".tna-accordion__item"),this.$module&&this.$items&&(this.allowMultipleItemsOpen="true"!==this.$module.dataset.singleOpenItem,this.$items.forEach(t=>this.initItem(t)),this.initState(),this.$toggleAllButton=this.$module.querySelector(".tna-accordion__toggle-all"),this.$toggleAllButton&&(this.syncToggleAllButton(),this.$toggleAllButton.removeAttribute("hidden"),this.$toggleAllButton.addEventListener("click",()=>{this.isAllOpen()?this.$items.forEach(t=>this.closeItem(t)):this.$items.forEach(t=>this.openItem(t)),this.syncToggleAllButton()})))}initItem(t){const e=t.querySelector(".tna-accordion__heading"),r=t.querySelector(".tna-accordion__body");if(!e||!r)return;t.classList.add("tna-accordion__details"),t.classList.remove("tna-accordion__item"),e.removeAttribute("class"),r.classList.add("tna-accordion__content"),r.classList.remove("tna-accordion__body"),r.setAttribute("hidden","");const o=document.createElement("button");o.classList.add("tna-accordion__summary"),o.setAttribute("type","button"),o.setAttribute("aria-controls",r.id),o.innerText=e.innerText,e.innerText="",e.appendChild(o),o.addEventListener("click",()=>{"true"===o.getAttribute("aria-expanded")?this.closeItem(t):this.openItem(t)})}initState(){this.$items.forEach(t=>{"true"===t.dataset.isopen?this.openItem(t):this.closeItem(t),t.removeAttribute("data-isopen")})}openItem(t){this.allowMultipleItemsOpen||this.closeAllItemsExcept(t);const e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","true"),e.setAttribute("aria-label",`${e.innerText.trim()}, Hide this section`),r.removeAttribute("hidden"),this.syncToggleAllButton();const o=r.querySelectorAll(".tna-table-wrapper");o&&o.forEach(t=>{(0,i.DJ)(t)})}closeItem(t){const e=t.querySelector(".tna-accordion__summary"),r=t.querySelector(".tna-accordion__content");e.setAttribute("aria-expanded","false"),e.setAttribute("aria-label",`${e.innerText.trim()}, Show this section`),r.setAttribute("hidden",""),this.syncToggleAllButton()}closeAllItemsExcept(t){Array.from(this.$items).filter(e=>e.querySelector(".tna-accordion__summary")!==t&&"true"===e.querySelector(".tna-accordion__summary").getAttribute("aria-expanded")).forEach(t=>this.closeItem(t))}isAllOpen(){return Array.from(this.$items).every(t=>"true"===t.querySelector(".tna-accordion__summary").getAttribute("aria-expanded"))}syncToggleAllButton(){this.$toggleAllButton&&(this.isAllOpen()?this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.closeAllLabel||"Hide all sections":this.$toggleAllButton.innerText=this.$toggleAllButton.dataset.openAllLabel||"Show all sections")}}return o})());
 //# sourceMappingURL=accordion.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"components/accordion/accordion.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,wECPM,MA+FMC,EAAuBC,IAClC,MAAMC,EAAWD,EAAcE,cAAc,WACU,SAAjDF,EAAcG,QAAQC,yBACtBH,IAAaA,EAASI,KACxBJ,EAASI,GAAK,kBAAiB,EAAAC,EAAAC,QAEjCP,EAAcG,QAAQC,uBAAyB,QAE7CJ,EAAcQ,YAAcR,EAAcS,aAC5CT,EAAcU,aAAa,WAAY,KACvCV,EAAcU,aAAa,OAAQ,UACnCV,EAAcU,aAAa,kBAAmBT,GAAUI,IAAM,IAC9DL,EAAcW,UAAUC,IAAI,+BAE5BZ,EAAca,gBAAgB,YAC9Bb,EAAca,gBAAgB,QAC9Bb,EAAca,gBAAgB,mBAC9Bb,EAAcW,UAAUG,OAAO,4DChHnC,MAQAC,EARe,KACZ,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAYC,IAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAO,GAC/DI,SAAS,OCNfC,EAAA,GAGA,SAAAC,EAAAC,GAEA,IAAAC,EAAAH,EAAAE,GACA,QAAAE,IAAAD,EACA,OAAAA,EAAA/B,QAGA,IAAAC,EAAA2B,EAAAE,GAAA,CAGA9B,QAAA,IAOA,OAHAiC,EAAAH,GAAA7B,EAAAA,EAAAD,QAAA6B,GAGA5B,EAAAD,OACA,CCrBA6B,EAAAK,EAAA,CAAAlC,EAAAmC,KACA,QAAAC,KAAAD,EACAN,EAAAQ,EAAAF,EAAAC,KAAAP,EAAAQ,EAAArC,EAAAoC,IACAE,OAAAC,eAAAvC,EAAAoC,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCP,EAAAQ,EAAA,CAAAK,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAd,EAAAkB,EAAA/C,IACA,oBAAAgD,QAAAA,OAAAC,aACAX,OAAAC,eAAAvC,EAAAgD,OAAAC,YAAA,CAAuDC,MAAA,WAEvDZ,OAAAC,eAAAvC,EAAA,cAAgDkD,OAAA,2DCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,OAASF,GAAWA,EAAQG,iBAAiB,wBAC7CF,KAAKD,SAAYC,KAAKC,SAI3BD,KAAKG,uBACqC,SAAxCH,KAAKD,QAAQ5C,QAAQiD,eAEvBJ,KAAKC,OAAOI,QAASC,GAAUN,KAAKO,SAASD,IAC7CN,KAAKQ,YAELR,KAAKS,iBAAmBT,KAAKD,QAAQ7C,cACnC,8BAEE8C,KAAKS,mBACPT,KAAKU,sBACLV,KAAKS,iBAAiB5C,gBAAgB,UACtCmC,KAAKS,iBAAiBE,iBAAiB,QAAS,KAC1CX,KAAKY,YACPZ,KAAKC,OAAOI,QAASC,GAAUN,KAAKa,UAAUP,IAE9CN,KAAKC,OAAOI,QAASC,GAAUN,KAAKc,SAASR,IAE/CN,KAAKU,yBAGX,CAEA,QAAAH,CAASD,GACP,MAAMS,EAAWT,EAAMpD,cAAc,2BAC/B8D,EAAWV,EAAMpD,cAAc,wBAErC,IAAK6D,IAAaC,EAChB,OAGFV,EAAM3C,UAAUC,IAAI,0BACpB0C,EAAM3C,UAAUG,OAAO,uBAEvBiD,EAASlD,gBAAgB,SAEzBmD,EAASrD,UAAUC,IAAI,0BACvBoD,EAASrD,UAAUG,OAAO,uBAC1BkD,EAAStD,aAAa,SAAU,IAEhC,MAAMuD,EAAiBC,SAASC,cAAc,UAC9CF,EAAetD,UAAUC,IAAI,0BAC7BqD,EAAevD,aAAa,OAAQ,UACpCuD,EAAevD,aAAa,gBAAiBsD,EAAS3D,IACtD4D,EAAeG,UAAYL,EAASK,UACpCL,EAASK,UAAY,GACrBL,EAASM,YAAYJ,GAErBA,EAAeN,iBAAiB,QAAS,KACyB,SAAjDM,EAAeK,aAAa,iBAEzCtB,KAAKa,UAAUP,GAEfN,KAAKc,SAASR,IAGpB,CAEA,SAAAE,GACER,KAAKC,OAAOI,QAASC,IACU,SAAzBA,EAAMnD,QAAQoE,OAChBvB,KAAKc,SAASR,GAEdN,KAAKa,UAAUP,GAEjBA,EAAMzC,gBAAgB,gBAE1B,CAEA,QAAAiD,CAASR,GACFN,KAAKG,wBACRH,KAAKwB,oBAAoBlB,GAE3B,MAAMW,EAAiBX,EAAMpD,cAAc,2BACrC8D,EAAWV,EAAMpD,cAAc,2BACrC+D,EAAevD,aAAa,gBAAiB,QAC7CuD,EAAevD,aACb,aACA,GAAGuD,EAAeG,UAAUK,6BAE9BT,EAASnD,gBAAgB,UAEzBmC,KAAKU,sBAEL,MAAM1D,EAAgBgE,EAASd,iBAAiB,sBAC5ClD,GACFA,EAAcqD,QAASqB,KACrB,EAAAC,EAAAC,IAAoBF,IAG1B,CAEA,SAAAb,CAAUP,GACR,MAAMW,EAAiBX,EAAMpD,cAAc,2BACrC8D,EAAWV,EAAMpD,cAAc,2BACrC+D,EAAevD,aAAa,gBAAiB,SAC7CuD,EAAevD,aACb,aACA,GAAGuD,EAAeG,UAAUK,6BAE9BT,EAAStD,aAAa,SAAU,IAEhCsC,KAAKU,qBACP,CAEA,mBAAAc,CAAoBK,GAClBC,MAAMC,KAAK/B,KAAKC,QACb+B,OACE1B,GACCA,EAAMpD,cAAc,6BAA+B2E,GAGd,SAFrCvB,EACGpD,cAAc,2BACdoE,aAAa,kBAEnBjB,QAASC,GAAUN,KAAKa,UAAUP,GACvC,CAEA,SAAAM,GACE,OAAOkB,MAAMC,KAAK/B,KAAKC,QAAQgC,MAC5B3B,GAGsC,SAFrCA,EACGpD,cAAc,2BACdoE,aAAa,iBAEtB,CAEA,mBAAAZ,GACMV,KAAKS,mBACHT,KAAKY,YACPZ,KAAKS,iBAAiBW,UACpBpB,KAAKS,iBAAiBtD,QAAQ+E,eAAiB,oBAEjDlC,KAAKS,iBAAiBW,UACpBpB,KAAKS,iBAAiBtD,QAAQgF,cAAgB,oBAGtD","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/helpers.mjs","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","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/accordion/accordion.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 ","import uuidv4 from \"./uuid.mjs\";\n\nexport const iso8601ToPrettyDatetime = (dateStr) => {\n const datetime = dateStr;\n\n if (!datetime) {\n throw new Error(\"No datetime provided\");\n }\n const isDateTime =\n /^\\d{4}(?:-\\d{2}){2}(?:T\| )\\d{2}(?::\\d{2}){1,2}(?:\\.\\d+)?(?:Z\|(?:[+-]\\d{2}:\\d{2}))?$/u.test(\n datetime,\n );\n const isDate = /^\\d{4}(?:-\\d{2}){2}$/u.test(datetime);\n if (!isDateTime && !isDate) {\n throw new Error(\"Invalid datetime provided\");\n }\n\n const date = new Date(datetime);\n if (!(date instanceof Date) \|\| isNaN(date)) {\n throw new Error(\"Invalid datetime provided\");\n }\n\n const dayString = date.toLocaleDateString(\"en-GB\", {\n weekday: \"long\",\n });\n const dateString = date.toLocaleDateString(\"en-GB\", {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n });\n\n if (isDateTime && (date.getHours() \|\| date.getMinutes())) {\n let timeString = date.toLocaleTimeString(\"en-GB\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n if (date.getSeconds()) {\n timeString = date.toLocaleTimeString(\"en-GB\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n });\n }\n return `${dayString} ${dateString}, ${timeString}`;\n }\n return `${dayString} ${dateString}`;\n};\n\n/\n ==========================================\n * Transform any <time> element into a pretty\n * and human readable format that is based on\n * the valid ISO 8601 datetime attribute. The\n * replaced value will be localised according\n * to user's system settings, repurposing the\n * original text content as a title attribute\n * to allow users to see the value. A null or\n * invalid datetime format will result in the\n * element not being modified. If the updated\n * value is similar to the starting value for\n * the element text content, then the element\n * will not be updated to avoid redundancy.\n * ------------------------------------------\n * For example if the user's system has a UTC\n * timezone set then the element:\n \n <time\n * datetime=\"2026-03-05T13:48:00-05:00\"\n * >\n * 5 March 2026, 13:48 (UTC -5)\n * </time>\n \n would become:\n \n <time\n * datetime=\"2026-03-05T13:48:00-05:00\"\n * title=\"5 March 2026, 13:48 (UTC -5)\"\n * >\n * Thursday 5 March 2026, 09:48\n * </time>\n * ==========================================\n /\nexport const updateTimeElement = ($el) => {\n const datetime = $el.getAttribute(\"datetime\");\n\n try {\n const prettyDatetime = iso8601ToPrettyDatetime(datetime);\n if (!prettyDatetime.includes($el.textContent)) {\n $el.setAttribute(\"title\", $el.textContent);\n $el.textContent = prettyDatetime;\n }\n // eslint-disable-next-line no-unused-vars\n } catch (error) {\n // Do nothing if the datetime is invalid or not provided\n }\n};\n\nexport const checkTableForScroll = ($tableWrapper) => {\n const $caption = $tableWrapper.querySelector(\"caption\");\n if (!($tableWrapper.dataset.tableScrollInitialised === \"true\")) {\n if ($caption && !$caption.id) {\n $caption.id = `table-caption-${uuidv4()}`;\n }\n $tableWrapper.dataset.tableScrollInitialised = \"true\";\n }\n if ($tableWrapper.scrollWidth > $tableWrapper.clientWidth) {\n $tableWrapper.setAttribute(\"tabindex\", \"0\");\n $tableWrapper.setAttribute(\"role\", \"region\");\n $tableWrapper.setAttribute(\"aria-labelledby\", $caption?.id \|\| \"\");\n $tableWrapper.classList.add(\"tna-table-wrapper--scroll\");\n } else {\n $tableWrapper.removeAttribute(\"tabindex\");\n $tableWrapper.removeAttribute(\"role\");\n $tableWrapper.removeAttribute(\"aria-labelledby\");\n $tableWrapper.classList.remove(\"tna-table-wrapper--scroll\");\n }\n};\n","/ eslint-disable no-magic-numbers /\n/ eslint-disable no-bitwise */\nconst uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/gu, (char) =>\n (\n char ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (char / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\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};","import { checkTableForScroll } from \"../../lib/helpers.mjs\";\n\nexport class Accordion {\n constructor($module) {\n this.$module = $module;\n this.$items = $module && $module.querySelectorAll(\".tna-accordion__item\");\n if (!this.$module \|\| !this.$items) {\n return;\n }\n\n this.allowMultipleItemsOpen =\n this.$module.dataset.singleOpenItem !== \"true\";\n\n this.$items.forEach(($item) => this.initItem($item));\n this.initState();\n\n this.$toggleAllButton = this.$module.querySelector(\n \".tna-accordion__toggle-all\",\n );\n if (this.$toggleAllButton) {\n this.syncToggleAllButton();\n this.$toggleAllButton.removeAttribute(\"hidden\");\n this.$toggleAllButton.addEventListener(\"click\", () => {\n if (this.isAllOpen()) {\n this.$items.forEach(($item) => this.closeItem($item));\n } else {\n this.$items.forEach(($item) => this.openItem($item));\n }\n this.syncToggleAllButton();\n });\n }\n }\n\n initItem($item) {\n const $heading = $item.querySelector(\".tna-accordion__heading\");\n const $content = $item.querySelector(\".tna-accordion__body\");\n\n if (!$heading \|\| !$content) {\n return;\n }\n\n $item.classList.add(\"tna-accordion__details\");\n $item.classList.remove(\"tna-accordion__item\");\n\n $heading.removeAttribute(\"class\");\n\n $content.classList.add(\"tna-accordion__content\");\n $content.classList.remove(\"tna-accordion__body\");\n $content.setAttribute(\"hidden\", \"\");\n\n const $headingButton = document.createElement(\"button\");\n $headingButton.classList.add(\"tna-accordion__summary\");\n $headingButton.setAttribute(\"type\", \"button\");\n $headingButton.setAttribute(\"aria-controls\", $content.id);\n $headingButton.innerText = $heading.innerText;\n $heading.innerText = \"\";\n $heading.appendChild($headingButton);\n\n $headingButton.addEventListener(\"click\", () => {\n const isOpen = $headingButton.getAttribute(\"aria-expanded\") === \"true\";\n if (isOpen) {\n this.closeItem($item);\n } else {\n this.openItem($item);\n }\n });\n }\n\n initState() {\n this.$items.forEach(($item) => {\n if ($item.dataset.isopen === \"true\") {\n this.openItem($item);\n } else {\n this.closeItem($item);\n }\n $item.removeAttribute(\"data-isopen\");\n });\n }\n\n openItem($item) {\n if (!this.allowMultipleItemsOpen) {\n this.closeAllItemsExcept($item);\n }\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"true\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText.trim()}, Hide this section`,\n );\n $content.removeAttribute(\"hidden\");\n // $content.setAttribute(\"tabindex\", \"0\");\n this.syncToggleAllButton();\n\n const $tableWrapper = $content.querySelectorAll(\".tna-table-wrapper\");\n if ($tableWrapper) {\n $tableWrapper.forEach(($wrapper) => {\n checkTableForScroll($wrapper);\n });\n }\n }\n\n closeItem($item) {\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"false\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText.trim()}, Show this section`,\n );\n $content.setAttribute(\"hidden\", \"\");\n // $content.setAttribute(\"tabindex\", \"-1\");\n this.syncToggleAllButton();\n }\n\n closeAllItemsExcept($excludeItem) {\n Array.from(this.$items)\n .filter(\n ($item) =>\n $item.querySelector(\".tna-accordion__summary\") !== $excludeItem &&\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n )\n .forEach(($item) => this.closeItem($item));\n }\n\n isAllOpen() {\n return Array.from(this.$items).every(\n ($item) =>\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n );\n }\n\n syncToggleAllButton() {\n if (this.$toggleAllButton) {\n if (this.isAllOpen()) {\n this.$toggleAllButton.innerText =\n this.$toggleAllButton.dataset.closeAllLabel \|\| \"Hide all sections\";\n } else {\n this.$toggleAllButton.innerText =\n this.$toggleAllButton.dataset.openAllLabel \|\| \"Show all sections\";\n }\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","checkTableForScroll","$tableWrapper","$caption","querySelector","dataset","tableScrollInitialised","id","_uuid_mjs__WEBPACK_IMPORTED_MODULE_0__","A","scrollWidth","clientWidth","setAttribute","classList","add","removeAttribute","remove","__WEBPACK_DEFAULT_EXPORT__","replace","char","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Accordion","constructor","$module","this","$items","querySelectorAll","allowMultipleItemsOpen","singleOpenItem","forEach","$item","initItem","initState","$toggleAllButton","syncToggleAllButton","addEventListener","isAllOpen","closeItem","openItem","$heading","$content","$headingButton","document","createElement","innerText","appendChild","getAttribute","isopen","closeAllItemsExcept","trim","$wrapper","_lib_helpers_mjs__WEBPACK_IMPORTED_MODULE_0__","DJ","$excludeItem","Array","from","filter","every","closeAllLabel","openAllLabel"],"sourceRoot":""}
1	+ {"version":3,"file":"components/accordion/accordion.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,oECwFmCC,IAClC,MAAMC,EAAWD,EAAcE,cAAc,WACU,SAAjDF,EAAcG,QAAQC,yBACtBH,IAAaA,EAASI,KACxBJ,EAASI,GAAK,kBAAiB,EAAAC,EAAAC,QAEjCP,EAAcG,QAAQC,uBAAyB,QAE7CJ,EAAcQ,YAAcR,EAAcS,aAC5CT,EAAcU,aAAa,WAAY,KACvCV,EAAcU,aAAa,OAAQ,UACnCV,EAAcU,aAAa,kBAAmBT,GAAUI,IAAM,IAC9DL,EAAcW,UAAUC,IAAI,+BAE5BZ,EAAca,gBAAgB,YAC9Bb,EAAca,gBAAgB,QAC9Bb,EAAca,gBAAgB,mBAC9Bb,EAAcW,UAAUG,OAAO,0DChHpB,KACZ,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAYC,IAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAO,GAC/DI,SAAS,SCNf,MAAAC,EAAA,GAGA,SAAAC,EAAAC,GAEA,MAAAC,EAAAH,EAAAE,GACA,QAAAE,IAAAD,EACA,OAAAA,EAAA7B,QAGA,MAAAC,EAAAyB,EAAAE,GAAA,CAGA5B,QAAA,IAOA,OAHA+B,EAAAH,GAAA3B,EAAAA,EAAAD,QAAA2B,GAGA1B,EAAAD,OACA,CCrBA2B,EAAAK,EAAA,CAAAhC,EAAAiC,KACA,GAAAC,MAAAC,QAAAF,GAEA,IADA,IAAAG,EAAA,EACAA,EAAAH,EAAAI,QAAA,CACA,IAAAC,EAAAL,EAAAG,KACAG,EAAAN,EAAAG,KACAI,EAAA,IAAAD,EAAA,CAAsCE,YAAA,EAAAC,MAAAT,EAAAG,MAA2C,CAAIK,YAAA,EAAAE,IAAAJ,GACrFZ,EAAAiB,EAAA5C,EAAAsC,IAAAO,OAAAC,eAAA9C,EAAAsC,EAAAE,EACA,MAEA,QAAAF,KAAAL,EACAN,EAAAiB,EAAAX,EAAAK,KAAAX,EAAAiB,EAAA5C,EAAAsC,IACAO,OAAAC,eAAA9C,EAAAsC,EAAA,CAA0CG,YAAA,EAAAE,IAAAV,EAAAK,MCb1CX,EAAAiB,EAAA,CAAAG,EAAAC,IAAAH,OAAAI,UAAAC,eAAAC,KAAAJ,EAAAC,GCCArB,EAAAyB,EAAApD,IACA6C,OAAAC,eAAA9C,EAAAqD,OAAAC,YAAA,CAAsDZ,MAAA,WACtDG,OAAAC,eAAA9C,EAAA,cAAgD0C,OAAA,2DCDzC,MAAMa,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,OAASF,GAAWA,EAAQG,iBAAiB,wBAC7CF,KAAKD,SAAYC,KAAKC,SAI3BD,KAAKG,uBACqC,SAAxCH,KAAKD,QAAQjD,QAAQsD,eAEvBJ,KAAKC,OAAOI,QAASC,GAAUN,KAAKO,SAASD,IAC7CN,KAAKQ,YAELR,KAAKS,iBAAmBT,KAAKD,QAAQlD,cACnC,8BAEEmD,KAAKS,mBACPT,KAAKU,sBACLV,KAAKS,iBAAiBjD,gBAAgB,UACtCwC,KAAKS,iBAAiBE,iBAAiB,QAAS,KAC1CX,KAAKY,YACPZ,KAAKC,OAAOI,QAASC,GAAUN,KAAKa,UAAUP,IAE9CN,KAAKC,OAAOI,QAASC,GAAUN,KAAKc,SAASR,IAE/CN,KAAKU,yBAGX,CAEA,QAAAH,CAASD,GACP,MAAMS,EAAWT,EAAMzD,cAAc,2BAC/BmE,EAAWV,EAAMzD,cAAc,wBAErC,IAAKkE,IAAaC,EAChB,OAGFV,EAAMhD,UAAUC,IAAI,0BACpB+C,EAAMhD,UAAUG,OAAO,uBAEvBsD,EAASvD,gBAAgB,SAEzBwD,EAAS1D,UAAUC,IAAI,0BACvByD,EAAS1D,UAAUG,OAAO,uBAC1BuD,EAAS3D,aAAa,SAAU,IAEhC,MAAM4D,EAAiBC,SAASC,cAAc,UAC9CF,EAAe3D,UAAUC,IAAI,0BAC7B0D,EAAe5D,aAAa,OAAQ,UACpC4D,EAAe5D,aAAa,gBAAiB2D,EAAShE,IACtDiE,EAAeG,UAAYL,EAASK,UACpCL,EAASK,UAAY,GACrBL,EAASM,YAAYJ,GAErBA,EAAeN,iBAAiB,QAAS,KACyB,SAAjDM,EAAeK,aAAa,iBAEzCtB,KAAKa,UAAUP,GAEfN,KAAKc,SAASR,IAGpB,CAEA,SAAAE,GACER,KAAKC,OAAOI,QAASC,IACU,SAAzBA,EAAMxD,QAAQyE,OAChBvB,KAAKc,SAASR,GAEdN,KAAKa,UAAUP,GAEjBA,EAAM9C,gBAAgB,gBAE1B,CAEA,QAAAsD,CAASR,GACFN,KAAKG,wBACRH,KAAKwB,oBAAoBlB,GAE3B,MAAMW,EAAiBX,EAAMzD,cAAc,2BACrCmE,EAAWV,EAAMzD,cAAc,2BACrCoE,EAAe5D,aAAa,gBAAiB,QAC7C4D,EAAe5D,aACb,aACA,GAAG4D,EAAeG,UAAUK,6BAE9BT,EAASxD,gBAAgB,UAEzBwC,KAAKU,sBAEL,MAAM/D,EAAgBqE,EAASd,iBAAiB,sBAC5CvD,GACFA,EAAc0D,QAASqB,KACrB,EAAAC,EAAAC,IAAoBF,IAG1B,CAEA,SAAAb,CAAUP,GACR,MAAMW,EAAiBX,EAAMzD,cAAc,2BACrCmE,EAAWV,EAAMzD,cAAc,2BACrCoE,EAAe5D,aAAa,gBAAiB,SAC7C4D,EAAe5D,aACb,aACA,GAAG4D,EAAeG,UAAUK,6BAE9BT,EAAS3D,aAAa,SAAU,IAEhC2C,KAAKU,qBACP,CAEA,mBAAAc,CAAoBK,GAClBrD,MAAMsD,KAAK9B,KAAKC,QACb8B,OACEzB,GACCA,EAAMzD,cAAc,6BAA+BgF,GAGd,SAFrCvB,EACGzD,cAAc,2BACdyE,aAAa,kBAEnBjB,QAASC,GAAUN,KAAKa,UAAUP,GACvC,CAEA,SAAAM,GACE,OAAOpC,MAAMsD,KAAK9B,KAAKC,QAAQ+B,MAC5B1B,GAGsC,SAFrCA,EACGzD,cAAc,2BACdyE,aAAa,iBAEtB,CAEA,mBAAAZ,GACMV,KAAKS,mBACHT,KAAKY,YACPZ,KAAKS,iBAAiBW,UACpBpB,KAAKS,iBAAiB3D,QAAQmF,eAAiB,oBAEjDjC,KAAKS,iBAAiBW,UACpBpB,KAAKS,iBAAiB3D,QAAQoF,cAAgB,oBAGtD","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/helpers.mjs","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","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/accordion/accordion.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 ","import uuidv4 from \"./uuid.mjs\";\n\nexport const iso8601ToPrettyDatetime = (dateStr) => {\n const datetime = dateStr;\n\n if (!datetime) {\n throw new Error(\"No datetime provided\");\n }\n const isDateTime =\n /^\\d{4}(?:-\\d{2}){2}(?:T\| )\\d{2}(?::\\d{2}){1,2}(?:\\.\\d+)?(?:Z\|(?:[+-]\\d{2}:\\d{2}))?$/u.test(\n datetime,\n );\n const isDate = /^\\d{4}(?:-\\d{2}){2}$/u.test(datetime);\n if (!isDateTime && !isDate) {\n throw new Error(\"Invalid datetime provided\");\n }\n\n const date = new Date(datetime);\n if (!(date instanceof Date) \|\| isNaN(date)) {\n throw new Error(\"Invalid datetime provided\");\n }\n\n const dayString = date.toLocaleDateString(\"en-GB\", {\n weekday: \"long\",\n });\n const dateString = date.toLocaleDateString(\"en-GB\", {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n });\n\n if (isDateTime && (date.getHours() \|\| date.getMinutes())) {\n let timeString = date.toLocaleTimeString(\"en-GB\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n if (date.getSeconds()) {\n timeString = date.toLocaleTimeString(\"en-GB\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n });\n }\n return `${dayString} ${dateString}, ${timeString}`;\n }\n return `${dayString} ${dateString}`;\n};\n\n/\n ==========================================\n * Transform any <time> element into a pretty\n * and human readable format that is based on\n * the valid ISO 8601 datetime attribute. The\n * replaced value will be localised according\n * to user's system settings, repurposing the\n * original text content as a title attribute\n * to allow users to see the value. A null or\n * invalid datetime format will result in the\n * element not being modified. If the updated\n * value is similar to the starting value for\n * the element text content, then the element\n * will not be updated to avoid redundancy.\n * ------------------------------------------\n * For example if the user's system has a UTC\n * timezone set then the element:\n \n <time\n * datetime=\"2026-03-05T13:48:00-05:00\"\n * >\n * 5 March 2026, 13:48 (UTC -5)\n * </time>\n \n would become:\n \n <time\n * datetime=\"2026-03-05T13:48:00-05:00\"\n * title=\"5 March 2026, 13:48 (UTC -5)\"\n * >\n * Thursday 5 March 2026, 09:48\n * </time>\n * ==========================================\n /\nexport const updateTimeElement = ($el) => {\n const datetime = $el.getAttribute(\"datetime\");\n\n try {\n const prettyDatetime = iso8601ToPrettyDatetime(datetime);\n if (!prettyDatetime.includes($el.textContent)) {\n $el.setAttribute(\"title\", $el.textContent);\n $el.textContent = prettyDatetime;\n }\n // eslint-disable-next-line no-unused-vars\n } catch (error) {\n // Do nothing if the datetime is invalid or not provided\n }\n};\n\nexport const checkTableForScroll = ($tableWrapper) => {\n const $caption = $tableWrapper.querySelector(\"caption\");\n if (!($tableWrapper.dataset.tableScrollInitialised === \"true\")) {\n if ($caption && !$caption.id) {\n $caption.id = `table-caption-${uuidv4()}`;\n }\n $tableWrapper.dataset.tableScrollInitialised = \"true\";\n }\n if ($tableWrapper.scrollWidth > $tableWrapper.clientWidth) {\n $tableWrapper.setAttribute(\"tabindex\", \"0\");\n $tableWrapper.setAttribute(\"role\", \"region\");\n $tableWrapper.setAttribute(\"aria-labelledby\", $caption?.id \|\| \"\");\n $tableWrapper.classList.add(\"tna-table-wrapper--scroll\");\n } else {\n $tableWrapper.removeAttribute(\"tabindex\");\n $tableWrapper.removeAttribute(\"role\");\n $tableWrapper.removeAttribute(\"aria-labelledby\");\n $tableWrapper.classList.remove(\"tna-table-wrapper--scroll\");\n }\n};\n","/ eslint-disable no-magic-numbers /\n/ eslint-disable no-bitwise */\nconst uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/gu, (char) =>\n (\n char ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (char / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nconst __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tconst cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tconst module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tif(Array.isArray(definition)) {\n\t\tvar i = 0;\n\t\twhile(i < definition.length) {\n\t\t\tvar key = definition[i++];\n\t\t\tvar binding = definition[i++];\n\t\t\tvar descriptor = binding === 0 ? { enumerable: true, value: definition[i++] } : { enumerable: true, get: binding };\n\t\t\tif(!__webpack_require__.o(exports, key)) Object.defineProperty(exports, key, descriptor);\n\t\t}\n\t} else {\n\t\tfor(var key in definition) {\n\t\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t\t}\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};","import { checkTableForScroll } from \"../../lib/helpers.mjs\";\n\nexport class Accordion {\n constructor($module) {\n this.$module = $module;\n this.$items = $module && $module.querySelectorAll(\".tna-accordion__item\");\n if (!this.$module \|\| !this.$items) {\n return;\n }\n\n this.allowMultipleItemsOpen =\n this.$module.dataset.singleOpenItem !== \"true\";\n\n this.$items.forEach(($item) => this.initItem($item));\n this.initState();\n\n this.$toggleAllButton = this.$module.querySelector(\n \".tna-accordion__toggle-all\",\n );\n if (this.$toggleAllButton) {\n this.syncToggleAllButton();\n this.$toggleAllButton.removeAttribute(\"hidden\");\n this.$toggleAllButton.addEventListener(\"click\", () => {\n if (this.isAllOpen()) {\n this.$items.forEach(($item) => this.closeItem($item));\n } else {\n this.$items.forEach(($item) => this.openItem($item));\n }\n this.syncToggleAllButton();\n });\n }\n }\n\n initItem($item) {\n const $heading = $item.querySelector(\".tna-accordion__heading\");\n const $content = $item.querySelector(\".tna-accordion__body\");\n\n if (!$heading \|\| !$content) {\n return;\n }\n\n $item.classList.add(\"tna-accordion__details\");\n $item.classList.remove(\"tna-accordion__item\");\n\n $heading.removeAttribute(\"class\");\n\n $content.classList.add(\"tna-accordion__content\");\n $content.classList.remove(\"tna-accordion__body\");\n $content.setAttribute(\"hidden\", \"\");\n\n const $headingButton = document.createElement(\"button\");\n $headingButton.classList.add(\"tna-accordion__summary\");\n $headingButton.setAttribute(\"type\", \"button\");\n $headingButton.setAttribute(\"aria-controls\", $content.id);\n $headingButton.innerText = $heading.innerText;\n $heading.innerText = \"\";\n $heading.appendChild($headingButton);\n\n $headingButton.addEventListener(\"click\", () => {\n const isOpen = $headingButton.getAttribute(\"aria-expanded\") === \"true\";\n if (isOpen) {\n this.closeItem($item);\n } else {\n this.openItem($item);\n }\n });\n }\n\n initState() {\n this.$items.forEach(($item) => {\n if ($item.dataset.isopen === \"true\") {\n this.openItem($item);\n } else {\n this.closeItem($item);\n }\n $item.removeAttribute(\"data-isopen\");\n });\n }\n\n openItem($item) {\n if (!this.allowMultipleItemsOpen) {\n this.closeAllItemsExcept($item);\n }\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"true\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText.trim()}, Hide this section`,\n );\n $content.removeAttribute(\"hidden\");\n // $content.setAttribute(\"tabindex\", \"0\");\n this.syncToggleAllButton();\n\n const $tableWrapper = $content.querySelectorAll(\".tna-table-wrapper\");\n if ($tableWrapper) {\n $tableWrapper.forEach(($wrapper) => {\n checkTableForScroll($wrapper);\n });\n }\n }\n\n closeItem($item) {\n const $headingButton = $item.querySelector(\".tna-accordion__summary\");\n const $content = $item.querySelector(\".tna-accordion__content\");\n $headingButton.setAttribute(\"aria-expanded\", \"false\");\n $headingButton.setAttribute(\n \"aria-label\",\n `${$headingButton.innerText.trim()}, Show this section`,\n );\n $content.setAttribute(\"hidden\", \"\");\n // $content.setAttribute(\"tabindex\", \"-1\");\n this.syncToggleAllButton();\n }\n\n closeAllItemsExcept($excludeItem) {\n Array.from(this.$items)\n .filter(\n ($item) =>\n $item.querySelector(\".tna-accordion__summary\") !== $excludeItem &&\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n )\n .forEach(($item) => this.closeItem($item));\n }\n\n isAllOpen() {\n return Array.from(this.$items).every(\n ($item) =>\n $item\n .querySelector(\".tna-accordion__summary\")\n .getAttribute(\"aria-expanded\") === \"true\",\n );\n }\n\n syncToggleAllButton() {\n if (this.$toggleAllButton) {\n if (this.isAllOpen()) {\n this.$toggleAllButton.innerText =\n this.$toggleAllButton.dataset.closeAllLabel \|\| \"Hide all sections\";\n } else {\n this.$toggleAllButton.innerText =\n this.$toggleAllButton.dataset.openAllLabel \|\| \"Show all sections\";\n }\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","$tableWrapper","$caption","querySelector","dataset","tableScrollInitialised","id","_uuid_mjs__WEBPACK_IMPORTED_MODULE_0__","A","scrollWidth","clientWidth","setAttribute","classList","add","removeAttribute","remove","replace","char","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","Array","isArray","i","length","key","binding","descriptor","enumerable","value","get","o","Object","defineProperty","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","Accordion","constructor","$module","this","$items","querySelectorAll","allowMultipleItemsOpen","singleOpenItem","forEach","$item","initItem","initState","$toggleAllButton","syncToggleAllButton","addEventListener","isAllOpen","closeItem","openItem","$heading","$content","$headingButton","document","createElement","innerText","appendChild","getAttribute","isopen","closeAllItemsExcept","trim","$wrapper","_lib_helpers_mjs__WEBPACK_IMPORTED_MODULE_0__","DJ","$excludeItem","from","filter","every","closeAllLabel","openAllLabel"],"sourceRoot":""}

package/nationalarchives/components/back-link/back-link.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/back-link/back-link.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAIA,eACE,oBACA,WAEA,sCCqEA,gCDhEA,iEAGE,qBAGF,sBACE,0BE0CF,0BC/BuC,WDgCvC,sBCjCoC,OHNpC,2CE2CA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHFpC,uBACE,YACA","file":"back-link.css","sourcesContent":["@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-back-link {\n display: inline-flex;\n gap: spacing.space(0.5);\n\n &,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &,\n &:hover,\n &:focus-visible {\n text-decoration: none;\n }\n\n &__inner {\n text-decoration: underline;\n @include typography.interactable-text-decoration;\n }\n\n &:hover &__inner {\n @include typography.interacted-text-decoration;\n }\n\n &::before {\n content: \"\\2039\";\n content: \"\\2039\" / \"\";\n }\n}\n","@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 \"../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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/back-link/back-link.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAIA,eACE,oBACA,WAEA,sCCsEA,gCDjEA,iEAGE,qBAGF,sBACE,0BE0CF,0BC/BuC,WDgCvC,sBCjCoC,OHNpC,2CE2CA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OHFpC,uBACE,YACA","file":"back-link.css","sourcesContent":["@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-back-link {\n display: inline-flex;\n gap: spacing.space(0.5);\n\n &,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &,\n &:hover,\n &:focus-visible {\n text-decoration: none;\n }\n\n &__inner {\n text-decoration: underline;\n @include typography.interactable-text-decoration;\n }\n\n &:hover &__inner {\n @include typography.interacted-text-decoration;\n }\n\n &::before {\n content: \"\\2039\";\n content: \"\\2039\" / \"\";\n }\n}\n","@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 \"../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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/components/breadcrumbs/breadcrumbs.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAwIE,2CA9EA,wBAEA,2BCtDF,iBACE,mBAIA,uBACE,SACA,UAEA,aACA,eAEA,gBAGF,uBACE,aAGE,sDACE,YACA,eAEA,iBAEA,qBAEA,wBAIJ,mCACE,aC4CJ,wBD7CE,mCAII,iCAKN,uBACE,qBAEA,kFE4BF,gCFrBA,8CACE,YACA,SACA,UAEA,gBAEA,oBAEA,+BAEA,YACA,mBAEA,eAEA,oDACE,cGNJ,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OJ8ChC,+BCMJ,wBDDE,oHACE,cE8aJ,+BFxaI,kFEXJ","file":"breadcrumbs.css","sourcesContent":["@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 \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-breadcrumbs {\n border-radius: 0.1px;\n\n @include a11y.focus-indicator-only-on-keyboard-focus;\n\n &__list {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: wrap;\n\n list-style: none;\n }\n\n &__item {\n display: flex;\n\n + .tna-breadcrumbs__item {\n &::before {\n content: \"\\203A\";\n content: \"\\203A\" / \"\";\n\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n vertical-align: baseline;\n }\n }\n\n &--expandable {\n display: none;\n\n @include media.on-mobile {\n display: inline-block !important;\n }\n }\n }\n\n &__link {\n display: inline-block;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n }\n\n button#{&}__link {\n height: 100%;\n margin: 0;\n padding: 0;\n\n appearance: none;\n\n line-height: inherit;\n\n background-color: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n &:hover {\n color: inherit;\n @include typography.interacted-text-decoration;\n\n background-color: transparent;\n }\n }\n\n @include media.on-mobile {\n &--collapsed &__item:not(:first-child, &__item--expandable, :last-child) {\n display: none;\n }\n }\n\n @include colour.on-high-contrast {\n &__link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@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 \"../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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/components/breadcrumbs/breadcrumbs.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"CAwIE,2CA9EA,wBAEA,2BCtDF,iBACE,mBAIA,uBACE,SACA,UAEA,aACA,eAEA,gBAGF,uBACE,aAGE,sDACE,YACA,eAEA,iBAEA,qBAEA,wBAIJ,mCACE,aC4CJ,wBD7CE,mCAII,iCAKN,uBACE,qBAEA,kFE6BF,gCFtBA,8CACE,YACA,SACA,UAEA,gBAEA,oBAEA,+BAEA,YACA,mBAEA,eAEA,oDACE,cGNJ,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OJ8ChC,+BCMJ,wBDDE,oHACE,cEmbJ,+BF7aI,kFEVJ","file":"breadcrumbs.css","sourcesContent":["@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 \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-breadcrumbs {\n border-radius: 0.1px;\n\n @include a11y.focus-indicator-only-on-keyboard-focus;\n\n &__list {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: wrap;\n\n list-style: none;\n }\n\n &__item {\n display: flex;\n\n + .tna-breadcrumbs__item {\n &::before {\n content: \"\\203A\";\n content: \"\\203A\" / \"\";\n\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n vertical-align: baseline;\n }\n }\n\n &--expandable {\n display: none;\n\n @include media.on-mobile {\n display: inline-block !important;\n }\n }\n }\n\n &__link {\n display: inline-block;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n }\n\n button#{&}__link {\n height: 100%;\n margin: 0;\n padding: 0;\n\n appearance: none;\n\n line-height: inherit;\n\n background-color: transparent;\n\n border: none;\n border-radius: 0.1px;\n\n cursor: pointer;\n\n &:hover {\n color: inherit;\n @include typography.interacted-text-decoration;\n\n background-color: transparent;\n }\n }\n\n @include media.on-mobile {\n &--collapsed &__item:not(:first-child, &__item--expandable, :last-child) {\n display: none;\n }\n }\n\n @include colour.on-high-contrast {\n &__link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@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 \"../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"]}

package/nationalarchives/components/breadcrumbs/breadcrumbs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";var e={181(e,t,r){r.d(t,{A:()=>s});const s=()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/gu,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16))}},t={};function r(s){var a=t[s];if(void 0!==a)return a.exports;var i=t[s]={exports:{}};return e[s](i,i.exports,r),i.exports}r.d=(e,t)=>{for(var s in t)r.o(t,s)&&!r.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};r.r(s),r.d(s,{Breadcrumbs:()=>i});var a=r(181);class i{constructor(e){this.$module=e,this.$breadcrumbsList=e&&e.querySelector(".tna-breadcrumbs__list"),this.$breadcrumbs=e&&this.$breadcrumbsList&&e.querySelectorAll(".tna-breadcrumbs__item"),this.$module&&this.$breadcrumbsList&&this.$breadcrumbs&&this.$breadcrumbs.length>2&&!this.$module.classList.contains("tna-breadcrumbs--no-collapse")&&this.init()}init(){const e=`tna-breadcrumbs-${(0,a.A)()}`,t=document.createElement("li");t.classList.add("tna-breadcrumbs__item","tna-breadcrumbs__item--expandable"),t.style.display="none";const r=document.createElement("button");r.classList.add("tna-breadcrumbs__link"),r.innerHTML="<span class='tna-!--visually-hidden'>Expand breadcrumbs</span>&hellip;",r.setAttribute("type","button"),r.setAttribute("aria-expanded","false"),r.setAttribute("aria-controls",e),r.addEventListener("click",()=>{this.$module.classList.remove("tna-breadcrumbs--collapsed"),t.remove(),this.$module.setAttribute("tabindex","0"),this.$module.focus(),this.$module.addEventListener("blur",()=>{this.$module.removeAttribute("tabindex")},{once:!0})}),t.appendChild(r),this.$breadcrumbsList.setAttribute("id",e),this.$breadcrumbsList.insertBefore(t,this.$breadcrumbs[this.$breadcrumbs.length-2].nextSibling),this.$module.classList.add("tna-breadcrumbs--collapsed")}}return s})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";var e={181(e,t,r){r.d(t,["A",0,()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/gu,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16))])}};const t={};function r(s){const a=t[s];if(void 0!==a)return a.exports;const n=t[s]={exports:{}};return e[s](n,n.exports,r),n.exports}r.d=(e,t)=>{if(Array.isArray(t))for(var s=0;s<t.length;){var a=t[s++],n=t[s++],i=0===n?{enumerable:!0,value:t[s++]}:{enumerable:!0,get:n};r.o(e,a)||Object.defineProperty(e,a,i)}else for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let s={};r.r(s),r.d(s,{Breadcrumbs:()=>n});var a=r(181);class n{constructor(e){this.$module=e,this.$breadcrumbsList=e&&e.querySelector(".tna-breadcrumbs__list"),this.$breadcrumbs=e&&this.$breadcrumbsList&&e.querySelectorAll(".tna-breadcrumbs__item"),this.$module&&this.$breadcrumbsList&&this.$breadcrumbs&&this.$breadcrumbs.length>2&&!this.$module.classList.contains("tna-breadcrumbs--no-collapse")&&this.init()}init(){const e=`tna-breadcrumbs-${(0,a.A)()}`,t=document.createElement("li");t.classList.add("tna-breadcrumbs__item","tna-breadcrumbs__item--expandable"),t.style.display="none";const r=document.createElement("button");r.classList.add("tna-breadcrumbs__link"),r.innerHTML="<span class='tna-!--visually-hidden'>Expand breadcrumbs</span>&hellip;",r.setAttribute("type","button"),r.setAttribute("aria-expanded","false"),r.setAttribute("aria-controls",e),r.addEventListener("click",()=>{this.$module.classList.remove("tna-breadcrumbs--collapsed"),t.remove(),this.$module.setAttribute("tabindex","0"),this.$module.focus(),this.$module.addEventListener("blur",()=>{this.$module.removeAttribute("tabindex")},{once:!0})}),t.appendChild(r),this.$breadcrumbsList.setAttribute("id",e),this.$breadcrumbsList.insertBefore(t,this.$breadcrumbs[this.$breadcrumbs.length-2].nextSibling),this.$module.classList.add("tna-breadcrumbs--collapsed")}}return s})());
 //# sourceMappingURL=breadcrumbs.js.map