npm - @nationalarchives/frontend - Versions diffs - 0.2.7 → 0.2.8 - Mend

@nationalarchives/frontend 0.2.7 → 0.2.8

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

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/skip-link/skip-link.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAOA,eACE,qBACA,sBACA,oBACA,qBAEA,yBAEA,2BAEA,6BACA,YAEA,8BCkCA,mEA0BI,mEDpDJ,wBAEA,8BACA,wCACA,gCAEA,0DCgBA,wDDVA,2CAEE,sBACA,uBACA,0BACA,wBAEA,4BAEA,2BAEA,+BAEA,qBACA,kCACA,0BAEA,uDCPF,wDAIA","file":"skip-link.css","sourcesContent":["@use \"../../variables/a11y\" as a11yVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-skip-link {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n display: block !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n left: -100vw;\n\n white-space: nowrap !important;\n\n @include colour.colour-background(\"button-background\", $important: true);\n @include colour.colour-border(\n \"focus-outline\",\n a11yVars.$focus-outline-width,\n $important: true\n );\n outline: none !important;\n\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\", $important: true);\n }\n\n &:active,\n &:focus {\n width: auto !important;\n height: auto !important;\n margin: inherit !important;\n padding: spacing.space(1) !important;\n\n overflow: visible !important;\n\n position: static !important;\n\n white-space: inherit !important;\n\n clip: auto !important;\n -webkit-clip-path: none !important;\n clip-path: none !important;\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\", $important: true);\n\n @include colour.colour-background(\n \"button-hover-background\",\n $important: true\n );\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--font-base);\n --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/skip-link/skip-link.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAOA,eACE,qBACA,sBACA,oBACA,qBAEA,yBAEA,2BAEA,6BACA,YAEA,8BCmCA,mEA0BI,mEDrDJ,wBAEA,8BACA,wCACA,gCAEA,0DCiBA,wDDXA,2CAEE,sBACA,uBACA,0BACA,wBAEA,4BAEA,2BAEA,+BAEA,qBACA,kCACA,0BAEA,uDCNF,wDAIA","file":"skip-link.css","sourcesContent":["@use \"../../variables/a11y\" as a11yVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-skip-link {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n display: block !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n left: -100vw;\n\n white-space: nowrap !important;\n\n @include colour.colour-background(\"button-background\", $important: true);\n @include colour.colour-border(\n \"focus-outline\",\n a11yVars.$focus-outline-width,\n $important: true\n );\n outline: none !important;\n\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\", $important: true);\n }\n\n &:active,\n &:focus {\n width: auto !important;\n height: auto !important;\n margin: inherit !important;\n padding: spacing.space(1) !important;\n\n overflow: visible !important;\n\n position: static !important;\n\n white-space: inherit !important;\n\n clip: auto !important;\n -webkit-clip-path: none !important;\n clip-path: none !important;\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\", $important: true);\n\n @include colour.colour-background(\n \"button-hover-background\",\n $important: true\n );\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--font-base);\n --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n"]}

package/nationalarchives/components/tabs/fixtures.json CHANGED Viewed

@@ -4,26 +4,26 @@
     {
       "name": "default",
       "options": {
-        "title": "Example tabs",
+        "itemHeadingLevel": 3,
         "items": [
           {
             "id": "unique-id-a",
             "title": "Alpha section",
-            "body": "<h2 class=\"tna-heading-l\">Alpha title</h2><p>Lorem ipsum</p>"
+            "body": "<p>Lorem ipsum</p>"
           },
           {
             "id": "unique-id-b",
             "title": "Beta section",
-            "body": "<h2 class=\"tna-heading-l\">Beta title</h2><p>Lorem ipsum</p>"
+            "body": "<p>Lorem ipsum</p>"
           },
           {
             "id": "unique-id-c",
             "title": "Gamma section",
-            "body": "<h2 class=\"tna-heading-l\">Gamma title</h2><p>Lorem ipsum</p>"
+            "body": "<p>Lorem ipsum</p>"
           }
         ]
       },
-      "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><ul class=\"tna-tabs__list\"><li class=\"tna-tabs__list-item\"><a href=\"#unique-id-a\" class=\"tna-tabs__list-item-link\" id=\"unique-id-a-tab\">Alpha section</a></li><li class=\"tna-tabs__list-item\"><a href=\"#unique-id-b\" class=\"tna-tabs__list-item-link\" id=\"unique-id-b-tab\">Beta section</a></li><li class=\"tna-tabs__list-item\"><a href=\"#unique-id-c\" class=\"tna-tabs__list-item-link\" id=\"unique-id-c-tab\">Gamma section</a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h2 class=\"tna-heading-l\">Alpha title</h2><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h2 class=\"tna-heading-l\">Beta title</h2><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h2 class=\"tna-heading-l\">Gamma title</h2><p>Lorem ipsum</p></section></div></div>"
+      "html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><ul class=\"tna-tabs__list\" role=\"tablist\" hidden><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></button></li><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></button></li><li class=\"tna-tabs__list-item\"><button type=\"button\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></button></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
     }
   ]
 }

package/nationalarchives/components/tabs/macro-options.json CHANGED Viewed

@@ -1,4 +1,10 @@
 [
+  {
+    "name": "itemHeadingLevel",
+    "type": "number",
+    "required": true,
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>` for each of the tab items."
+  },
   {
     "name": "items",
     "type": "array",
@@ -25,12 +31,6 @@
       }
     ]
   },
-  {
-    "name": "sticky",
-    "type": "boolean",
-    "required": false,
-    "description": ""
-  },
   {
     "name": "classes",
     "type": "string",

package/nationalarchives/components/tabs/tabs.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-tabs{margin-top:32px}.tna-tabs:first-child{margin-top:0}.tna-tabs__list{margin:0 ~~0 16px~~;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;gap:~~16px~~;list-style:none}.tna-tabs__list-~~item-link~~{padding:~~8px~~ 0;~~display:flex;align-items:center;~~position:relative;text-align:center;~~text-decoration:none;~~background:rgba(0,0,0,0);border:none;cursor:pointer~~;font~~-~~size:1~~.~~25rem;font~~-~~family~~:~~supria-sans-condensed~~,~~"Arial~~ ~~Narrow"~~,~~sans-serif~~;~~font~~-~~weight~~:~~500~~}.tna-~~tabs__list-item-link,.~~tna-~~tabs__list~~-~~item~~-~~link~~:~~link,.tna~~-~~tabs__list-item-link:visited{~~color:var(--~~font-dark~~, rgb(1, 1, 1))}.tna-~~tabs__list~~-~~item~~-~~link~~::after{content:"";position:absolute;right:0;~~bottom~~:0;~~left:0}.tna~~-~~tabs__list-item-link~~:hover,.tna-tabs__list-item-link--selected,.tna-tabs__list-item-link--selected:hover{text-decoration:none}.tna-tabs__list-item-link:hover::after,.tna-tabs__list-item-link--selected::after,.tna-tabs__list-item-link--selected:hover::after{border-top:5px var(--~~keyline-dark~~, #~~26262a~~) ~~solid~~}.tna-~~template--js~~-~~enabled~~ ~~.tna~~-~~tabs__list-item-link{~~color:var(--font-~~light~~, rgb(1 1 1~~/0.58~~))}.tna-~~template~~--~~js-enabled~~ .tna-~~tabs__list~~-~~item-link:hover::after~~{~~border-top~~:~~5px~~ ~~var(--keyline,~~ ~~rgb(38 38 42/0.25)) solid~~}.tna-~~template--js-enabled~~ .tna-~~tabs__list~~-~~item~~-~~link--selected{color~~:~~var(--font~~-~~dark, rgb(1, 1, 1))~~}.tna-~~template--js~~-~~enabled .tna-tabs__list-item-link--~~selected~~::after,.tna-template--js-enabled~~ .tna-~~tabs__list~~-~~item~~-~~link--selected~~:~~hover::after{~~border-top:5px var(--~~keyline~~-~~dark~~, ~~#26262a~~) solid}.tna-~~tabs__item~~{display:~~none}.tna~~-~~tabs__item~~:~~first~~-~~child{display~~:~~block~~}.tna-tabs__item~~:has(~:target)~~{~~display:none}.tna~~-~~tabs__item:target{display:block~~}.tna-template--~~js-enabled~~ .tna-tabs__item{~~display~~:~~block~~}.tna-~~template--js-enabled .tna-~~tabs__item~~[hidden]~~{~~display:none~~}.tna-~~template~~--~~clicked~~ .tna-tabs__item~~:focus~~{~~outline~~:~~none}@media(forced-colors: active){.tna-tabs__list{~~border~~-bottom~~:1px var(--keyline~~-dark~~, ~~#26262a) solid}}@media~~(~~prefers-contrast:~~ ~~more){~~.~~tna-tabs__list{border-bottom:1px var(--keyline-dark, #26262a~~) solid}}/# sourceMappingURL=tabs.css.map /
1	+ .tna-tabs--tint.tna-tabs--interactive .tna-tabs__button[aria-selected=true],.tna-tabs--tint.tna-tabs--interactive .tna-tabs__button:hover .tna-tabs__button-inner,.tna-tabs--tint.tna-tabs--interactive .tna-tabs__items{--background: var(--background-tint);background-color:var(--background, #f4f4f4)}.tna-tabs{margin-top:32px}.tna-tabs:first-child{margin-top:0}.tna-tabs__list{margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;gap:8px;position:relative;z-index:2;list-style:none}.tna-tabs--small .tna-tabs__list{gap:4px}.tna-tabs__button{padding:5px 0;position:relative;text-align:center;background:rgba(0,0,0,0);border:none;cursor:pointer}.tna-tabs--interactive .tna-tabs__button{background:rgba(0,0,0,0);border:1px rgba(0,0,0,0) solid;border-bottom:none}.tna-tabs--interactive .tna-tabs__button[aria-selected=true]{padding-top:0;border-color:var(--keyline, rgb(38 38 42/0.25))}.tna-tabs--interactive .tna-tabs__button[aria-selected=true]::after{content:"";height:1px;position:absolute;top:100%;right:0;left:0;background-color:var(--background, #f4f4f4)}.tna-tabs__button-inner{padding:8px 12px;display:block;text-decoration:underline;color:var(--font-dark, rgb(1, 1, 1))}.tna-tabs--small .tna-tabs__button-inner{padding:4px 8px 2px;font-size:1rem}.tna-tabs__button:hover .tna-tabs__button-inner{text-decoration:underline;text-decoration-thickness:3.5px}.tna-tabs__button[aria-selected=true] .tna-tabs__button-inner{text-decoration:none;border-top:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-tabs__items{display:flex;flex-direction:column;gap:32px;position:relative;z-index:1}.tna-tabs__item{border-radius:.1px}.tna-template--clicked .tna-tabs__item:focus{outline:none}.tna-tabs__item:focus{outline-offset:-5px}.tna-tabs--interactive .tna-tabs__item{padding:16px;border:1px var(--keyline, rgb(38 38 42/0.25)) solid}/# sourceMappingURL=tabs.css.map /

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAUA,UACE,gBAEA,sBACE,aCNF,gBACE,gBACA,UAEA,aACA,iBACA,oBACA,SAEA,gBAMF,0BACE,cAEA,aAEA,mBAEA,kBAEA,kBACA,qBAEA,yBAEA,YAEA,eCjCF,kBAiCA,YCcA,gDDbA,YCgBoB,IFZlB,2FGMF,sEHCI,WAEA,kBACA,QACA,SACA,OAGF,8GAGE,qBAEA,mIGMA,kDHDF,oDGnBF,yCHuBM,iEGHF,wDHQA,8DG5BJ,qCH+BM,gJGXF,kDH2BJ,gBACE,aAEA,4BACE,cAGF,8BACE,aAGF,uBACE,cAGF,0CACE,cAEA,kDACE,aAIJ,6CACE,aGkTJ,8BH7SE,gBGxDE,sDA+VJ,+BHvSE,gBGxDE","file":"tabs.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n @include spacing.space-above;\n\n &__list {\n margin: 0 0 spacing.space(1);\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: spacing.space(1);\n\n list-style: none;\n }\n\n &__list-item {\n }\n\n &__list-item-link {\n padding: spacing.space(0.5) 0;\n\n display: flex;\n\n align-items: center;\n\n position: relative;\n\n text-align: center;\n text-decoration: none;\n\n background: transparent;\n\n border: none;\n\n cursor: pointer;\n\n @include typography.font-size(20);\n @include typography.heading-font;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &::after {\n content: \"\";\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n }\n\n &:hover,\n &--selected,\n &--selected:hover {\n text-decoration: none;\n\n &::after {\n @include colour.thick-keyline-dark(top);\n }\n }\n\n .tna-template--js-enabled & {\n @include colour.colour-font(\"font-light\");\n\n &:hover {\n &::after {\n @include colour.thick-keyline(top);\n }\n }\n\n &--selected {\n @include colour.colour-font(\"font-dark\");\n\n &::after,\n &:hover::after {\n @include colour.thick-keyline-dark(top);\n }\n }\n }\n }\n\n &__items {\n // &:not(:target-within) {\n // .tna-tabs__item:first-child {\n // display: block;\n // }\n // }\n }\n\n &__item {\n display: none;\n\n &:first-child {\n display: block;\n }\n\n &:has(~ :target) {\n display: none;\n }\n\n &:target {\n display: block;\n }\n\n .tna-template--js-enabled & {\n display: block;\n\n &[hidden] {\n display: none;\n }\n }\n\n .tna-template--clicked &:focus {\n outline: none;\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n &__list {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n }\n }\n\n // @include colour.on-forced-colours {\n // &__list-item-link {\n // &--selected {\n // padding-bottom: spacing.space(0.125);\n\n // border-bottom-width: 0.375rem;\n // }\n // }\n // }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--font-base);\n --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_a11y.scss"],"names":[],"mappings":"AAwPA,yNACE,qCAlMA,4CC7CF,UACE,gBAEA,sBACE,aCHF,gBACE,SACA,UAEA,aACA,iBACA,oBACA,QAEA,kBACA,UAEA,gBAGF,iCACE,QAMF,kBACE,cAEA,kBAEA,kBAEA,yBAEA,YAEA,eAGF,yCACE,yBAEA,+BACA,mBAGF,6DACE,cF+BE,gDE3BF,oEACE,WAEA,WAEA,kBACA,SACA,QACA,OFZJ,4CEkBA,wBACE,iBAEA,cAEA,0BF3BF,qCEgCA,yCACE,oBC9EF,eDmFA,gDC3BA,0BACA,0BCpCsC,MFkEtC,8DACE,qBFvBE,8DE4BJ,iBACE,aACA,sBACA,SAEA,kBACA,UAGF,gBACE,mBGxFF,6CACE,aH0FA,sBACE,oBAIJ,uCACE,aFrCE","file":"tabs.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--font-base);\n --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../variables/a11y\" as a11yVariables;\n@use \"../../variables/borders\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n @include spacing.space-above;\n\n &__list {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n gap: spacing.space(0.5);\n\n position: relative;\n z-index: 2;\n\n list-style: none;\n }\n\n &--small &__list {\n gap: spacing.space(0.25);\n }\n\n &__list-item {\n }\n\n &__button {\n padding: borders.$thick-border-width 0;\n\n position: relative;\n\n text-align: center;\n\n background: transparent;\n\n border: none;\n\n cursor: pointer;\n }\n\n &--interactive &__button {\n background: transparent;\n\n border: 1px transparent solid;\n border-bottom: none;\n }\n\n &--interactive &__button[aria-selected=\"true\"] {\n padding-top: 0;\n\n @include colour.colour-border(\"keyline\");\n\n &::after {\n content: \"\";\n\n height: 1px;\n\n position: absolute;\n top: 100%;\n right: 0;\n left: 0;\n\n @include colour.colour-background(\"background\");\n }\n }\n\n &__button-inner {\n padding: spacing.space(0.5) spacing.space(0.75);\n\n display: block;\n\n text-decoration: underline;\n\n @include colour.colour-font(\"font-dark\");\n }\n\n &--small &__button-inner {\n padding: spacing.space(0.25) spacing.space(0.5) spacing.space(0.125);\n\n @include typography.font-size(16);\n }\n\n &__button:hover &__button-inner {\n @include typography.interacted-text-decoration;\n }\n\n &__button[aria-selected=\"true\"] &__button-inner {\n text-decoration: none;\n\n @include colour.thick-keyline-accent(top);\n }\n\n &__items {\n display: flex;\n flex-direction: column;\n gap: spacing.space(2);\n\n position: relative;\n z-index: 1;\n }\n\n &__item {\n border-radius: 0.1px;\n @include a11y.no-focus-outline-on-click;\n\n &:focus {\n outline-offset: -#{a11yVariables.$focus-outline-width};\n }\n }\n\n &--interactive &__item {\n padding: spacing.space(1);\n @include colour.colour-border(\"keyline\", 1px, solid);\n }\n\n &--tint#{&}--interactive &__button[aria-selected=\"true\"],\n &--tint#{&}--interactive &__button:hover &__button-inner,\n &--tint#{&}--interactive &__items {\n @include colour.tint;\n }\n\n // &--contrast#{&}--interactive &__button[aria-selected=\"true\"],\n // &--contrast#{&}--interactive &__button:hover &__button-inner,\n // &--contrast#{&}--interactive &__items {\n // @include colour.contrast;\n // }\n\n // &--accent#{&}--interactive &__button[aria-selected=\"true\"],\n // &--accent#{&}--interactive &__button:hover &__button-inner,\n // &--accent#{&}--interactive &__items {\n // @include colour.accent;\n // }\n\n // &--contrast &__list,\n // &--contrast &__button,\n // &--contrast &__item,\n // &--accent &__list,\n // &--accent &__button,\n // &--accent &__item {\n // border: none;\n // }\n\n @include colour.on-forced-colours {\n // &__button,\n // &__item {\n // @include colour.colour-border(\"keyline\", 1px, solid);\n // }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-active-outline {\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n"]}

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

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var r in i)t.o(i,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:i[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function r(t){return function(t){if(Array.isArray(t))return n(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return n(t,e);var i={}.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?n(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=Array(e);i<e;i++)r[i]=t[i];return r}function s(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,a(r.key),r)}}function a(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=i(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{Tabs:()=>o});var o=function(){return t=function t(e){var i=this;if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$tabList=e&&e.querySelector(".tna-tabs__list"),this.$tabListItemLinks=e&&this.$tabList&&e.querySelectorAll(".tna-tabs__list-item-link"),this.$tabItems=e&&e.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length){this.sticky=this.$module.classList.contains("tna-tabs--sticky");var n=window.location.hash.replace(/^#/,""),s=r(this.$tabItems).some((function(t){return t.getAttribute("id")===n}));this.$newTabList=document.createElement("div"),this.$newTabList.setAttribute("role","tablist"),this.$newTabList.setAttribute("class",this.$tabList.getAttribute("class")),this.$tabItems.forEach((function(t,e){t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby","".concat(t.getAttribute("id"),"-tab")),t.setAttribute("tabindex","0"),(s&&t.getAttribute("id")!==n||!s&&e>0)&&t.setAttribute("hidden",!0)})),this.$tabListItemLinks.forEach((function(t){var e,r=document.createElement("button");r.innerText=t.innerText,r.setAttribute("class",t.getAttribute("class")),r.setAttribute("role","tab"),r.setAttribute("id",t.getAttribute("id")),r.setAttribute("aria-controls",null===(e=t.getAttribute("href"))||void 0===e?void 0:e.replace(/^#/,"")),r.setAttribute("tabindex","-1"),i.$newTabList.appendChild(r)})),this.$tabList.replaceWith(this.$newTabList),this.$tabListItemLinks=this.$module.querySelectorAll(".tna-tabs__list-item-link"),this.$tabListItemLinks.forEach((function(t,e){n&&t.getAttribute("aria-controls")==="".concat(n)||!n&&0===e?(t.classList.add("tna-tabs__list-item-link--selected"),t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0")):t.setAttribute("aria-selected",!1),t.addEventListener("keydown",(function(t){return i.handleItemLinkKeyDown(t)}),!0),t.addEventListener("click",(function(t){return i.handleItemLinkClick(t)}),!0)}))}},(e=[{key:"handleItemLinkClick",value:function(t){t.preventDefault();var e=t.currentTarget.getAttribute("aria-controls");this.switchTab(e)}},{key:"handleItemLinkKeyDown",value:function(t){var e=t.currentTarget,i=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.setSelectedToPreviousTab(e),i=!0;break;case"ArrowRight":case"ArrowDown":this.setSelectedToNextTab(e),i=!0;break;case"Home":this.switchTab(this.$tabListItemLinks[0].getAttribute("aria-controls")),i=!0;break;case"End":this.switchTab(this.$tabListItemLinks[this.$tabListItemLinks.length-1].getAttribute("aria-controls")),i=!0}i&&(t.stopPropagation(),t.preventDefault())}},{key:"setSelectedToNextTab",value:function(t){var e,i=r(this.$tabListItemLinks).findIndex((function(e){return e.getAttribute("id")===t.getAttribute("id")}));e=i<this.$tabListItemLinks.length-1?i+1:0,this.switchTab(this.$tabListItemLinks[e].getAttribute("aria-controls"))}},{key:"setSelectedToPreviousTab",value:function(t){var e,i=r(this.$tabListItemLinks).findIndex((function(e){return e.getAttribute("id")===t.getAttribute("id")}));e=i>=1?i-1:this.$tabListItemLinks.length-1,this.switchTab(this.$tabListItemLinks[e].getAttribute("aria-controls"))}},{key:"switchTab",value:function(t){this.$tabListItemLinks.forEach((function(e){e.getAttribute("aria-controls")===t?(e.classList.add("tna-tabs__list-item-link--selected"),e.setAttribute("aria-selected",!0),e.setAttribute("tabindex","0"),e.focus()):(e.classList.remove("tna-tabs__list-item-link--selected"),e.setAttribute("aria-selected",!1),e.setAttribute("tabindex","-1"))})),this.$tabItems.forEach((function(e){e.getAttribute("id")===t?(e.removeAttribute("hidden"),e.setAttribute("tabindex","0")):(e.setAttribute("hidden",!0),e.setAttribute("tabindex","-1"))})),this.sticky&&(history.replaceState?history.replaceState(null,null,"#".concat(t)):location.hash="#".concat(t))}}])&&s(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,r(n.key),n)}}function r(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{Tabs:()=>a});var a=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$tabList=e&&e.querySelector(".tna-tabs__list"),this.$tabListItemLinks=e&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=e&&e.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=0,this.init())},e=[{key:"init",value:function(){var t=this;this.$module.classList.add("tna-tabs--interactive"),this.$tabList.removeAttribute("hidden"),this.$tabListItemLinks.forEach((function(e){var i=e.getAttribute("aria-controls");e.setAttribute("aria-selected",!1);var n=document.getElementById(i);n.setAttribute("aria-labelledby",e.id),n.setAttribute("role","tabpanel"),e.addEventListener("click",(function(e){return t.handleItemLinkClick(e)}),!0)})),this.switchTabByIndex(this.currentTabIndex),this.$module.addEventListener("keydown",(function(e){return t.handleItemLinkKeyDown(e)}))}},{key:"handleItemLinkClick",value:function(t){t.preventDefault();var e=t.currentTarget.getAttribute("aria-controls");this.switchTabByID(e)}},{key:"handleItemLinkKeyDown",value:function(t){var e=!1;switch(t.key){case"ArrowLeft":case"ArrowUp":this.previousTab(),e=!0;break;case"ArrowRight":case"ArrowDown":this.nextTab(),e=!0;break;case"Home":this.switchTabByIndex(0,!0),e=!0;break;case"End":this.switchTabByIndex(this.$tabListItemLinks.length-1,!0),e=!0}e&&(t.stopPropagation(),t.preventDefault())}},{key:"nextTab",value:function(){this.currentTabIndex<this.$tabListItemLinks.length-1?this.switchTabByIndex(this.currentTabIndex+1,!0):this.switchTabByIndex(0,!0)}},{key:"previousTab",value:function(){this.currentTabIndex>=1?this.switchTabByIndex(this.currentTabIndex-1,!0):this.switchTabByIndex(this.$tabListItemLinks.length-1,!0)}},{key:"switchTabByIndex",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.currentTabIndex=t,this.$tabListItemLinks.forEach((function(t,n){n===e.currentTabIndex?(t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0"),i&&t.focus()):(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex","-1"))})),this.$tabItems.forEach((function(t,i){i===e.currentTabIndex?(t.removeAttribute("hidden"),t.setAttribute("tabindex","0")):(t.setAttribute("hidden","until-found"),t.setAttribute("tabindex","-1"))}))}},{key:"switchTabByID",value:function(t){var e=Array.from(this.$tabItems).findIndex((function(e){return e.getAttribute("id")===t}));this.switchTabByIndex(e)}}],e&&n(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
 //# sourceMappingURL=tabs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n constructor($module) {\n this.$module = $module;\n this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n this.$tabListItemLinks =\n $module &&\n this.$tabList &&\n $module.querySelectorAll(\".tna-tabs__list-item-link\");\n this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n if (\n !this.$module \|\|\n !this.$tabList \|\|\n !this.$tabListItemLinks \|\|\n !this.$tabItems \|\|\n this.$tabListItemLinks.length !== this.$tabItems.length\n ) {\n return;\n }\n\n this.sticky = this.$module.classList.contains(\"tna-tabs--sticky\");\n\n const startingTarget = window.location.hash.replace(/^#/, \"\");\n const doesStartingTargetExist = [...this.$tabItems].some(\n ($tabItem) => $tabItem.getAttribute(\"id\") === startingTarget,\n );\n\n this.$newTabList = document.createElement(\"div\");\n this.$newTabList.setAttribute(\"role\", \"tablist\");\n this.$newTabList.setAttribute(\"class\", this.$tabList.getAttribute(\"class\"));\n\n this.$tabItems.forEach(($tabItem, index) => {\n $tabItem.setAttribute(\"role\", \"tabpanel\");\n $tabItem.setAttribute(\n \"aria-labelledby\",\n `${$tabItem.getAttribute(\"id\")}-tab`,\n );\n $tabItem.setAttribute(\"tabindex\", \"0\");\n if (\n (doesStartingTargetExist &&\n $tabItem.getAttribute(\"id\") !== startingTarget) \|\|\n (!doesStartingTargetExist && index > 0)\n ) {\n $tabItem.setAttribute(\"hidden\", true);\n }\n });\n\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n const $replacementButton = document.createElement(\"button\");\n $replacementButton.innerText = $tabListItemLink.innerText;\n $replacementButton.setAttribute(\n \"class\",\n $tabListItemLink.getAttribute(\"class\"),\n );\n $replacementButton.setAttribute(\"role\", \"tab\");\n $replacementButton.setAttribute(\n \"id\",\n $tabListItemLink.getAttribute(\"id\"),\n );\n $replacementButton.setAttribute(\n \"aria-controls\",\n $tabListItemLink.getAttribute(\"href\")?.replace(/^#/, \"\"),\n );\n $replacementButton.setAttribute(\"tabindex\", \"-1\");\n this.$newTabList.appendChild($replacementButton);\n });\n\n this.$tabList.replaceWith(this.$newTabList);\n\n this.$tabListItemLinks = this.$module.querySelectorAll(\n \".tna-tabs__list-item-link\",\n );\n\n this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n if (\n (startingTarget &&\n $tabListItemLink.getAttribute(\"aria-controls\") ===\n `${startingTarget}`) \|\|\n (!startingTarget && index === 0)\n ) {\n $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n }\n\n $tabListItemLink.addEventListener(\n \"keydown\",\n (e) => this.handleItemLinkKeyDown(e),\n true,\n );\n $tabListItemLink.addEventListener(\n \"click\",\n (e) => this.handleItemLinkClick(e),\n true,\n );\n });\n }\n\n handleItemLinkClick(itemLinkClickEvent) {\n itemLinkClickEvent.preventDefault();\n const targetItem =\n itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n\n this.switchTab(targetItem);\n }\n\n handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n const targetItem = itemLinkKeyDownEvent.currentTarget;\n let overwriteKeyAction = false;\n\n switch (itemLinkKeyDownEvent.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.setSelectedToPreviousTab(targetItem);\n overwriteKeyAction = true;\n break;\n\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.setSelectedToNextTab(targetItem);\n overwriteKeyAction = true;\n break;\n\n case \"Home\":\n this.switchTab(this.$tabListItemLinks[0].getAttribute(\"aria-controls\"));\n overwriteKeyAction = true;\n break;\n\n case \"End\":\n this.switchTab(\n this.$tabListItemLinks[\n this.$tabListItemLinks.length - 1\n ].getAttribute(\"aria-controls\"),\n );\n overwriteKeyAction = true;\n break;\n\n default:\n break;\n }\n\n if (overwriteKeyAction) {\n itemLinkKeyDownEvent.stopPropagation();\n itemLinkKeyDownEvent.preventDefault();\n }\n }\n\n setSelectedToNextTab(targetItem) {\n const currentIndex = [...this.$tabListItemLinks].findIndex(\n ($tabListItemLink) =>\n $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n );\n let newIndex;\n if (currentIndex < this.$tabListItemLinks.length - 1) {\n newIndex = currentIndex + 1;\n } else {\n newIndex = 0;\n }\n this.switchTab(\n this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n );\n }\n\n setSelectedToPreviousTab(targetItem) {\n const currentIndex = [...this.$tabListItemLinks].findIndex(\n ($tabListItemLink) =>\n $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n );\n let newIndex;\n if (currentIndex >= 1) {\n newIndex = currentIndex - 1;\n } else {\n newIndex = this.$tabListItemLinks.length - 1;\n }\n this.switchTab(\n this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n );\n }\n\n switchTab(targetId) {\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n if ($tabListItemLink.getAttribute(\"aria-controls\") === targetId) {\n $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n $tabListItemLink.focus();\n } else {\n $tabListItemLink.classList.remove(\"tna-tabs__list-item-link--selected\");\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n }\n });\n\n this.$tabItems.forEach(($tabItem) => {\n if ($tabItem.getAttribute(\"id\") === targetId) {\n $tabItem.removeAttribute(\"hidden\");\n $tabItem.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabItem.setAttribute(\"hidden\", true);\n $tabItem.setAttribute(\"tabindex\", \"-1\");\n }\n });\n\n if (this.sticky) {\n if (history.replaceState) {\n history.replaceState(null, null, `#${targetId}`);\n } else {\n location.hash = `#${targetId}`;\n }\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","$module","_this","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","sticky","classList","contains","startingTarget","window","location","hash","replace","doesStartingTargetExist","_toConsumableArray","some","$tabItem","getAttribute","$newTabList","document","createElement","setAttribute","forEach","index","concat","$tabListItemLink","_$tabListItemLink$get","$replacementButton","innerText","appendChild","replaceWith","add","addEventListener","e","handleItemLinkKeyDown","handleItemLinkClick","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTab","itemLinkKeyDownEvent","overwriteKeyAction","setSelectedToPreviousTab","setSelectedToNextTab","stopPropagation","newIndex","currentIndex","findIndex","targetId","focus","remove","removeAttribute","history","replaceState"],"sourceRoot":""}
1	+ {"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n constructor($module) {\n this.$module = $module;\n this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n this.$tabListItemLinks =\n $module &&\n this.$tabList &&\n this.$tabList.querySelectorAll(\".tna-tabs__button\");\n this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n if (\n !this.$module \|\|\n !this.$tabList \|\|\n !this.$tabListItemLinks \|\|\n !this.$tabItems \|\|\n this.$tabListItemLinks.length !== this.$tabItems.length\n ) {\n return;\n }\n\n this.currentTabIndex = 0;\n this.init();\n }\n\n init() {\n this.$module.classList.add(\"tna-tabs--interactive\");\n this.$tabList.removeAttribute(\"hidden\");\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n const tabPanelID = $tabListItemLink.getAttribute(\"aria-controls\");\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n const $tabPanel = document.getElementById(tabPanelID);\n $tabPanel.setAttribute(\"aria-labelledby\", $tabListItemLink.id);\n $tabPanel.setAttribute(\"role\", \"tabpanel\");\n $tabListItemLink.addEventListener(\n \"click\",\n (e) => this.handleItemLinkClick(e),\n true,\n );\n });\n this.switchTabByIndex(this.currentTabIndex);\n this.$module.addEventListener(\"keydown\", (e) =>\n this.handleItemLinkKeyDown(e),\n );\n }\n\n handleItemLinkClick(itemLinkClickEvent) {\n itemLinkClickEvent.preventDefault();\n const targetItem =\n itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n this.switchTabByID(targetItem);\n }\n\n handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n let preventDefaultKeyAction = false;\n switch (itemLinkKeyDownEvent.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.previousTab();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.nextTab();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n this.switchTabByIndex(0, true);\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n preventDefaultKeyAction = true;\n break;\n default:\n break;\n }\n if (preventDefaultKeyAction) {\n itemLinkKeyDownEvent.stopPropagation();\n itemLinkKeyDownEvent.preventDefault();\n }\n }\n\n nextTab() {\n if (this.currentTabIndex < this.$tabListItemLinks.length - 1) {\n this.switchTabByIndex(this.currentTabIndex + 1, true);\n } else {\n this.switchTabByIndex(0, true);\n }\n }\n\n previousTab() {\n if (this.currentTabIndex >= 1) {\n this.switchTabByIndex(this.currentTabIndex - 1, true);\n } else {\n this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n }\n }\n\n switchTabByIndex(newIndex, switchFocus = false) {\n this.currentTabIndex = newIndex;\n\n this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n if (index === this.currentTabIndex) {\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n if (switchFocus) {\n $tabListItemLink.focus();\n }\n } else {\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n }\n });\n\n this.$tabItems.forEach(($tabItem, index) => {\n if (index === this.currentTabIndex) {\n $tabItem.removeAttribute(\"hidden\");\n $tabItem.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabItem.setAttribute(\"hidden\", \"until-found\");\n $tabItem.setAttribute(\"tabindex\", \"-1\");\n }\n });\n }\n\n switchTabByID(targetId) {\n const index = Array.from(this.$tabItems).findIndex(\n ($tabItem) => $tabItem.getAttribute(\"id\") === targetId,\n );\n this.switchTabByIndex(index);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","$module","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","init","_this","classList","add","removeAttribute","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","e","handleItemLinkClick","switchTabByIndex","handleItemLinkKeyDown","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","_this2","switchFocus","arguments","undefined","index","focus","$tabItem","targetId","Array","from","findIndex"],"sourceRoot":""}