govuk_publishing_components 39.2.4 → 40.0.0

data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss

@@ -0,0 +1,173 @@
+////
+/// @group helpers/spacing
+////
+
+/// Single point spacing
+///
+/// Returns measurement corresponding to the spacing point requested.
+///
+/// @param {Number} $spacing-point - Point on the spacing scale
+///  (set in `settings/_spacing.scss`)
+///
+/// @returns {String} Spacing measurement eg. 10px
+///
+/// @example scss
+///   .element {
+///     padding: govuk-spacing(5);
+///   }
+///
+/// @example scss Using negative spacing
+///   .element {
+///     margin-top: govuk-spacing(-1);
+///   }
+///
+/// @example scss Marking spacing declarations as important
+///   .element {
+///     margin-top: govuk-spacing(1) !important;
+///   }
+///
+/// @access public
+
+@function govuk-spacing($spacing-point) {
+  $actual-input-type: type-of($spacing-point);
+  @if $actual-input-type != "number" {
+    @error "Expected a number (integer), but got a "
+      + "#{$actual-input-type}.";
+  }
+
+  $is-negative: false;
+  @if $spacing-point < 0 {
+    $is-negative: true;
+    $spacing-point: abs($spacing-point);
+  }
+
+  @if not map-has-key($govuk-spacing-points, $spacing-point) {
+    @error "Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.";
+  }
+
+  $value: map-get($govuk-spacing-points, $spacing-point);
+  @return if($is-negative, $value * -1, $value);
+}
+
+/// Responsive spacing
+///
+/// Adds responsive spacing (either padding or margin, depending on `$property`)
+/// by fetching a 'spacing map' from the responsive spacing scale, which defines
+/// different spacing values at different breakpoints.
+///
+/// To generate responsive spacing, use 'govuk-responsive-margin' or
+/// 'govuk-responsive-padding' mixins
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+///   scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+/// @param {String} $direction [all] - Direction to add spacing to
+///   (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing by
+///
+/// @access private
+
+@mixin _govuk-responsive-spacing(
+  $responsive-spacing-point,
+  $property,
+  $direction: "all",
+  $important: false,
+  $adjustment: false
+) {
+  $actual-input-type: type-of($responsive-spacing-point);
+  @if $actual-input-type != "number" {
+    @error "Expected a number (integer), but got a " + "#{$actual-input-type}.";
+  }
+
+  @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {
+    @error "Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the "
+      + "responsive spacing scale in `_settings/spacing.scss`.";
+  }
+
+  // Make sure that the return value from `_settings/spacing.scss` is a map.
+  $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);
+  $actual-map-type: type-of($scale-map);
+  @if $actual-map-type != "map" {
+    @error "Expected a number (integer), but got a "
+      + "#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)";
+  }
+
+  // Loop through each breakpoint in the map
+  @each $breakpoint, $breakpoint-value in $scale-map {
+    @if $adjustment {
+      $breakpoint-value: $breakpoint-value + $adjustment;
+    }
+
+    // The 'null' breakpoint is for mobile.
+    @if not $breakpoint {
+      @if $direction == all {
+        #{$property}: $breakpoint-value if($important, !important, null);
+      } @else {
+        #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+      }
+    } @else {
+      @include govuk-media-query($from: $breakpoint) {
+        @if $direction == all {
+          #{$property}: $breakpoint-value if($important, !important, null);
+        } @else {
+          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);
+        }
+      }
+    }
+  }
+}
+
+/// Responsive margin
+///
+/// Adds responsive margin by fetching a 'spacing map' from the responsive
+/// spacing scale, which defines different spacing values at different
+/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
+///
+/// @see {mixin} _govuk-responsive-spacing
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+/// scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $direction [all] - Direction to add spacing to
+///   (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing by
+///
+/// @example scss
+///   .element {
+///      @include govuk-responsive-margin(6, "left", $adjustment: 1px);
+///   }
+///
+/// @access public
+
+@mixin govuk-responsive-margin($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
+  @include _govuk-responsive-spacing($responsive-spacing-point, "margin", $direction, $important, $adjustment);
+}
+
+/// Responsive padding
+///
+/// Adds responsive padding by fetching a 'spacing map' from the responsive
+/// spacing scale, which defines different spacing values at different
+/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.
+///
+/// @see {mixin} _govuk-responsive-spacing
+///
+/// @param {Number} $responsive-spacing-point - Point on the responsive spacing
+///   scale, corresponds to a map of breakpoints and spacing values
+/// @param {String} $direction [all] - Direction to add spacing to
+///   (`top`, `right`, `bottom`, `left`, `all`)
+/// @param {Boolean} $important [false] - Whether to mark as `!important`
+/// @param {Number} $adjustment [false] - Offset to adjust spacing
+///
+/// @example scss
+///   .element {
+///      @include govuk-responsive-padding(6, "left", $adjustment: 1px);
+///   }
+///
+/// @access public
+
+@mixin govuk-responsive-padding($responsive-spacing-point, $direction: "all", $important: false, $adjustment: false) {
+  @include _govuk-responsive-spacing($responsive-spacing-point, "padding", $direction, $important, $adjustment);
+}
+
+/*# sourceMappingURL=_spacing.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_spacing.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/govuk/helpers/_spacing.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,yBAAyB;AACzB,GAAG;;AAEH,uBAAuB;AACvB,EAAE;AACF,oEAAoE;AACpE,EAAE;AACF,8DAA8D;AAC9D,qCAAqC;AACrC,EAAE;AACF,iDAAiD;AACjD,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,iCAAiC;AACjC,MAAM;AACN,EAAE;AACF,uCAAuC;AACvC,eAAe;AACf,qCAAqC;AACrC,MAAM;AACN,EAAE;AACF,0DAA0D;AAC1D,eAAe;AACf,+CAA+C;AAC/C,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,2CAA2C;EAC3C;IACE;gCAC4B;EAC9B;;EAEA,mBAAmB;EACnB;IACE,kBAAkB;IAClB,mCAAmC;EACrC;;EAEA;IACE,0IAA0I;EAC5I;;EAEA,sDAAsD;EACtD,6CAA6C;AAC/C;;AAEA,qBAAqB;AACrB,EAAE;AACF,+EAA+E;AAC/E,+EAA+E;AAC/E,qDAAqD;AACrD,EAAE;AACF,mEAAmE;AACnE,oCAAoC;AACpC,EAAE;AACF,8EAA8E;AAC9E,kEAAkE;AAClE,yEAAyE;AACzE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,oEAAoE;AACpE,EAAE;AACF,kBAAkB;;AAElB;;;;;;;EAOE,sDAAsD;EACtD;IACE,2EAA2E;EAC7E;;EAEA;IACE;+DAC2D;EAC7D;;EAEA,yEAAyE;EACzE,+EAA+E;EAC/E,qCAAqC;EACrC;IACE;uHACmH;EACrH;;EAEA,yCAAyC;EACzC;IACE;MACE,kDAAkD;IACpD;;IAEA,sCAAsC;IACtC;MACE;QACE,gEAAgE;MAClE,EAAE;QACA,8EAA8E;MAChF;IACF,EAAE;MACA;QACE;UACE,gEAAgE;QAClE,EAAE;UACA,8EAA8E;QAChF;MACF;IACF;EACF;AACF;;AAEA,oBAAoB;AACpB,EAAE;AACF,yEAAyE;AACzE,qEAAqE;AACrE,kEAAkE;AAClE,EAAE;AACF,yCAAyC;AACzC,EAAE;AACF,8EAA8E;AAC9E,gEAAgE;AAChE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,oEAAoE;AACpE,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,sEAAsE;AACtE,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,4GAA4G;AAC9G;;AAEA,qBAAqB;AACrB,EAAE;AACF,0EAA0E;AAC1E,qEAAqE;AACrE,kEAAkE;AAClE,EAAE;AACF,yCAAyC;AACzC,EAAE;AACF,8EAA8E;AAC9E,kEAAkE;AAClE,iEAAiE;AACjE,8CAA8C;AAC9C,wEAAwE;AACxE,iEAAiE;AACjE,EAAE;AACF,gBAAgB;AAChB,eAAe;AACf,uEAAuE;AACvE,MAAM;AACN,EAAE;AACF,iBAAiB;;AAEjB;EACE,6GAA6G;AAC/G","file":"_spacing.scss","sourcesContent":["////\n/// @group helpers/spacing\n////\n\n/// Single point spacing\n///\n/// Returns measurement corresponding to the spacing point requested.\n///\n/// @param {Number} $spacing-point - Point on the spacing scale\n///  (set in `settings/_spacing.scss`)\n///\n/// @returns {String} Spacing measurement eg. 10px\n///\n/// @example scss\n///   .element {\n///     padding: govuk-spacing(5);\n///   }\n///\n/// @example scss Using negative spacing\n///   .element {\n///     margin-top: govuk-spacing(-1);\n///   }\n///\n/// @example scss Marking spacing declarations as important\n///   .element {\n///     margin-top: govuk-spacing(1) !important;\n///   }\n///\n/// @access public\n\n@function govuk-spacing($spacing-point) {\n  $actual-input-type: type-of($spacing-point);\n  @if $actual-input-type != \"number\" {\n    @error \"Expected a number (integer), but got a \"\n      + \"#{$actual-input-type}.\";\n  }\n\n  $is-negative: false;\n  @if $spacing-point < 0 {\n    $is-negative: true;\n    $spacing-point: abs($spacing-point);\n  }\n\n  @if not map-has-key($govuk-spacing-points, $spacing-point) {\n    @error \"Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.\";\n  }\n\n  $value: map-get($govuk-spacing-points, $spacing-point);\n  @return if($is-negative, $value * -1, $value);\n}\n\n/// Responsive spacing\n///\n/// Adds responsive spacing (either padding or margin, depending on `$property`)\n/// by fetching a 'spacing map' from the responsive spacing scale, which defines\n/// different spacing values at different breakpoints.\n///\n/// To generate responsive spacing, use 'govuk-responsive-margin' or\n/// 'govuk-responsive-padding' mixins\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n///   scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $property - Property to add spacing to (e.g. 'margin')\n/// @param {String} $direction [all] - Direction to add spacing to\n///   (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @access private\n\n@mixin _govuk-responsive-spacing(\n  $responsive-spacing-point,\n  $property,\n  $direction: \"all\",\n  $important: false,\n  $adjustment: false\n) {\n  $actual-input-type: type-of($responsive-spacing-point);\n  @if $actual-input-type != \"number\" {\n    @error \"Expected a number (integer), but got a \" + \"#{$actual-input-type}.\";\n  }\n\n  @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {\n    @error \"Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the \"\n      + \"responsive spacing scale in `_settings/spacing.scss`.\";\n  }\n\n  // Make sure that the return value from `_settings/spacing.scss` is a map.\n  $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);\n  $actual-map-type: type-of($scale-map);\n  @if $actual-map-type != \"map\" {\n    @error \"Expected a number (integer), but got a \"\n      + \"#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)\";\n  }\n\n  // Loop through each breakpoint in the map\n  @each $breakpoint, $breakpoint-value in $scale-map {\n    @if $adjustment {\n      $breakpoint-value: $breakpoint-value + $adjustment;\n    }\n\n    // The 'null' breakpoint is for mobile.\n    @if not $breakpoint {\n      @if $direction == all {\n        #{$property}: $breakpoint-value if($important, !important, null);\n      } @else {\n        #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);\n      }\n    } @else {\n      @include govuk-media-query($from: $breakpoint) {\n        @if $direction == all {\n          #{$property}: $breakpoint-value if($important, !important, null);\n        } @else {\n          #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);\n        }\n      }\n    }\n  }\n}\n\n/// Responsive margin\n///\n/// Adds responsive margin by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.\n///\n/// @see {mixin} _govuk-responsive-spacing\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n///   (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @example scss\n///   .element {\n///      @include govuk-responsive-margin(6, \"left\", $adjustment: 1px);\n///   }\n///\n/// @access public\n\n@mixin govuk-responsive-margin($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n  @include _govuk-responsive-spacing($responsive-spacing-point, \"margin\", $direction, $important, $adjustment);\n}\n\n/// Responsive padding\n///\n/// Adds responsive padding by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.\n///\n/// @see {mixin} _govuk-responsive-spacing\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n///   scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n///   (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing\n///\n/// @example scss\n///   .element {\n///      @include govuk-responsive-padding(6, \"left\", $adjustment: 1px);\n///   }\n///\n/// @access public\n\n@mixin govuk-responsive-padding($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n  @include _govuk-responsive-spacing($responsive-spacing-point, \"padding\", $direction, $important, $adjustment);\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss

@@ -0,0 +1,269 @@
+////
+/// @group helpers/typography
+////
+
+@import "../tools/px-to-rem";
+
+/// 'Common typography' helper
+///
+/// Sets the font family and associated properties, such as font smoothing. Also
+/// overrides the font for print.
+///
+/// @param {List} $font-family [$govuk-font-family] Font family to use
+/// @access public
+
+@mixin govuk-typography-common($font-family: $govuk-font-family) {
+  font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  // If the user is using the default GDS Transport font we need to include
+  // the font-face declarations.
+  @if $govuk-include-default-font-face {
+    @include _govuk-font-face-gds-transport;
+  }
+
+  @include govuk-media-query($media-type: print) {
+    font-family: $govuk-font-family-print;
+  }
+}
+
+/// Text colour helper
+///
+/// Sets the text colour, including a suitable override for print.
+///
+/// @access public
+
+@mixin govuk-text-colour {
+  color: $govuk-text-colour;
+
+  @include govuk-media-query($media-type: print) {
+    color: $govuk-print-text-colour;
+  }
+}
+
+/// Regular font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-regular($important: false) {
+  font-weight: $govuk-font-weight-regular if($important, !important, null);
+}
+
+/// Bold font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-bold($important: false) {
+  font-weight: $govuk-font-weight-bold if($important, !important, null);
+}
+
+/// Tabular number helper
+///
+/// Switches numerical glyphs (0–9) to use alternative forms with a
+/// monospaced bounding box. This ensures that columns of numbers, such
+/// as those in tables, remain horizontally aligned with one another.
+/// This also has the useful side effect of making numbers more legible
+/// in some situations, such as reference codes, as the numbers are more
+/// distinct and visually separated from one another.
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-font-tabular-numbers($important: false) {
+  font-variant-numeric: tabular-nums if($important, !important, null);
+}
+
+/// Convert line-heights specified in pixels into a relative value, unless
+/// they are already unit-less (and thus already treated as relative values)
+/// or the units do not match the units used for the font size.
+///
+/// @param {Number} $line-height Line height
+/// @param {Number} $font-size Font size
+/// @return {Number} The line height as either a relative value or unmodified
+///
+/// @access private
+
+@function _govuk-line-height($line-height, $font-size) {
+  @if not unitless($line-height) and unit($line-height) == unit($font-size) {
+    $line-height: $line-height / $font-size;
+  }
+
+  @return $line-height;
+}
+
+/// Font size and line height helper
+///
+/// @param {Number} $size - Point from the type scale (the size as it would
+///   appear on tablet and above)
+/// @param {Number} $override-line-height [false] - Non responsive custom line
+///   height. Omit to use the line height from the font map.
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`.
+///
+/// @throw if `$size` is not a valid point from the type scale
+///
+/// @access public
+///
+/// @alias govuk-font-size
+/// @deprecated Use `govuk-font-size` instead
+
+@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
+  @include _warning(
+    "govuk-typography-responsive",
+    "govuk-typography-responsive is deprecated. Use govuk-font-size instead."
+  );
+  @include govuk-font-size($size, $override-line-height, $important);
+}
+
+/// Font size and line height helper
+///
+/// Takes a point from the responsive 'font map' as an argument (the size as it
+/// would appear on tablet and above), and uses it to create font-size and
+/// line-height declarations for different breakpoints, and print.
+///
+/// Example font map:
+///
+/// 19: (
+///   null: (
+///     font-size: 16px,
+///     line-height: 20px
+///   ),
+///   tablet: (
+///     font-size: 19px,
+///     line-height: 25px
+///   ),
+///   print: (
+///     font-size: 14pt,
+///     line-height: 1.15
+///   )
+/// );
+///
+/// @param {Number | String} $size - Point from the type scale (the size as
+///   it would appear on tablet and above)
+/// @param {Number} $line-height [false] - Non responsive custom line
+///   height. Omit to use the line height from the font map.
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`.
+///
+/// @throw if `$size` is not a valid point from the type scale
+///
+/// @access public
+
+@mixin govuk-font-size($size, $line-height: false, $important: false) {
+  // Flag font sizes that start with underscores so we can suppress warnings on
+  // deprecated sizes used internally, for example `govuk-font($size: "_14")`
+  $size-internal-use-only: str-slice(#{$size}, 1, 1) == "_";
+
+  // Remove underscore from font sizes flagged for internal use
+  @if $size-internal-use-only {
+    $size: str-slice(#{$size}, 2);
+  }
+
+  // Check for a font map exactly matching the given size
+  $font-map: map-get($govuk-typography-scale, $size);
+
+  // No match? Try with string type (e.g. $size: "16" not 16)
+  @if not $font-map {
+    @each $font-size in map-keys($govuk-typography-scale) {
+      @if not $font-map and #{$font-size} == #{$size} {
+        $font-map: map-get($govuk-typography-scale, $font-size);
+      }
+    }
+  }
+
+  // Still no match? Throw error
+  @if not $font-map {
+    @error "Unknown font size `#{$size}` - expected a point from the type scale.";
+  }
+
+  // Check for a deprecation within the type scale
+  $deprecation: map-get($font-map, "deprecation");
+
+  @if $deprecation {
+    // Warn on deprecated font sizes unless flagged for internal use
+    @if not $size-internal-use-only {
+      @include _warning(map-get($deprecation, "key"), map-get($deprecation, "message"));
+    }
+
+    // remove the deprecation map keys so they do not break the breakpoint loop
+    $font-map: map-remove($font-map, "deprecation");
+  }
+
+  @each $breakpoint, $breakpoint-map in $font-map {
+    $font-size: map-get($breakpoint-map, "font-size");
+    $font-size-rem: govuk-px-to-rem($font-size);
+
+    // $calculated-line-height is a separate variable from $line-height,
+    // as otherwise the value would get redefined with each loop and
+    // eventually break _govuk-line-height.
+    //
+    // We continue to call the param $line-height to stay consistent with the
+    // naming with govuk-font.
+    $calculated-line-height: _govuk-line-height(
+      $line-height: if($line-height, $line-height, map-get($breakpoint-map, "line-height")),
+      $font-size: $font-size
+    );
+
+    // Mark rules as !important if $important is true - this will result in
+    // these variables becoming strings, so this needs to happen *after* they
+    // are used in calculations
+    $font-size: $font-size if($important, !important, null);
+    $font-size-rem: $font-size-rem if($important, !important, null);
+    $calculated-line-height: $calculated-line-height if($important, !important, null);
+
+    @if not $breakpoint {
+      font-size: $font-size-rem;
+      line-height: $calculated-line-height;
+    } @else if $breakpoint == "print" {
+      @include govuk-media-query($media-type: print) {
+        font-size: $font-size;
+        line-height: $calculated-line-height;
+      }
+    } @else {
+      @include govuk-media-query($from: $breakpoint) {
+        font-size: $font-size-rem;
+        line-height: $calculated-line-height;
+      }
+    }
+  }
+}
+
+/// Font helper
+///
+/// @param {Number | Boolean | String} $size Point from the type scale (the
+///   size as it would appear on tablet and above). Use `false` to avoid setting
+///   a size.
+/// @param {String} $weight [regular] - Weight: `bold` or `regular`
+/// @param {Boolean} $tabular [false] - Whether to use tabular numbers or not
+/// @param {Number} $line-height [false] - Line-height, if overriding the
+///   default
+///
+/// @throw if `$size` is not a valid point from the type scale (or false)
+///
+/// @access public
+
+@mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
+  @include govuk-typography-common;
+
+  @if $tabular {
+    @include govuk-font-tabular-numbers;
+  }
+
+  @if $weight == regular {
+    @include govuk-typography-weight-regular;
+  } @else if $weight == bold {
+    @include govuk-typography-weight-bold;
+  }
+
+  @if $size {
+    @include govuk-font-size($size, $line-height);
+  }
+}
+
+/*# sourceMappingURL=_typography.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_typography.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/govuk/helpers/_typography.scss"],"names":[],"mappings":"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","file":"_typography.scss","sourcesContent":["////\n/// @group helpers/typography\n////\n\n@import \"../tools/px-to-rem\";\n\n/// 'Common typography' helper\n///\n/// Sets the font family and associated properties, such as font smoothing. Also\n/// overrides the font for print.\n///\n/// @param {List} $font-family [$govuk-font-family] Font family to use\n/// @access public\n\n@mixin govuk-typography-common($font-family: $govuk-font-family) {\n  font-family: $font-family;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  // If the user is using the default GDS Transport font we need to include\n  // the font-face declarations.\n  @if $govuk-include-default-font-face {\n    @include _govuk-font-face-gds-transport;\n  }\n\n  @include govuk-media-query($media-type: print) {\n    font-family: $govuk-font-family-print;\n  }\n}\n\n/// Text colour helper\n///\n/// Sets the text colour, including a suitable override for print.\n///\n/// @access public\n\n@mixin govuk-text-colour {\n  color: $govuk-text-colour;\n\n  @include govuk-media-query($media-type: print) {\n    color: $govuk-print-text-colour;\n  }\n}\n\n/// Regular font weight helper\n///\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n///   `!important`. Generally Used to create override classes.\n/// @access public\n\n@mixin govuk-typography-weight-regular($important: false) {\n  font-weight: $govuk-font-weight-regular if($important, !important, null);\n}\n\n/// Bold font weight helper\n///\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n///   `!important`. Generally Used to create override classes.\n/// @access public\n\n@mixin govuk-typography-weight-bold($important: false) {\n  font-weight: $govuk-font-weight-bold if($important, !important, null);\n}\n\n/// Tabular number helper\n///\n/// Switches numerical glyphs (0–9) to use alternative forms with a\n/// monospaced bounding box. This ensures that columns of numbers, such\n/// as those in tables, remain horizontally aligned with one another.\n/// This also has the useful side effect of making numbers more legible\n/// in some situations, such as reference codes, as the numbers are more\n/// distinct and visually separated from one another.\n///\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n///   `!important`. Generally Used to create override classes.\n/// @access public\n\n@mixin govuk-font-tabular-numbers($important: false) {\n  font-variant-numeric: tabular-nums if($important, !important, null);\n}\n\n/// Convert line-heights specified in pixels into a relative value, unless\n/// they are already unit-less (and thus already treated as relative values)\n/// or the units do not match the units used for the font size.\n///\n/// @param {Number} $line-height Line height\n/// @param {Number} $font-size Font size\n/// @return {Number} The line height as either a relative value or unmodified\n///\n/// @access private\n\n@function _govuk-line-height($line-height, $font-size) {\n  @if not unitless($line-height) and unit($line-height) == unit($font-size) {\n    $line-height: $line-height / $font-size;\n  }\n\n  @return $line-height;\n}\n\n/// Font size and line height helper\n///\n/// @param {Number} $size - Point from the type scale (the size as it would\n///   appear on tablet and above)\n/// @param {Number} $override-line-height [false] - Non responsive custom line\n///   height. Omit to use the line height from the font map.\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n///   `!important`.\n///\n/// @throw if `$size` is not a valid point from the type scale\n///\n/// @access public\n///\n/// @alias govuk-font-size\n/// @deprecated Use `govuk-font-size` instead\n\n@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {\n  @include _warning(\n    \"govuk-typography-responsive\",\n    \"govuk-typography-responsive is deprecated. Use govuk-font-size instead.\"\n  );\n  @include govuk-font-size($size, $override-line-height, $important);\n}\n\n/// Font size and line height helper\n///\n/// Takes a point from the responsive 'font map' as an argument (the size as it\n/// would appear on tablet and above), and uses it to create font-size and\n/// line-height declarations for different breakpoints, and print.\n///\n/// Example font map:\n///\n/// 19: (\n///   null: (\n///     font-size: 16px,\n///     line-height: 20px\n///   ),\n///   tablet: (\n///     font-size: 19px,\n///     line-height: 25px\n///   ),\n///   print: (\n///     font-size: 14pt,\n///     line-height: 1.15\n///   )\n/// );\n///\n/// @param {Number | String} $size - Point from the type scale (the size as\n///   it would appear on tablet and above)\n/// @param {Number} $line-height [false] - Non responsive custom line\n///   height. Omit to use the line height from the font map.\n/// @param {Boolean} $important [false] - Whether to mark declarations as\n///   `!important`.\n///\n/// @throw if `$size` is not a valid point from the type scale\n///\n/// @access public\n\n@mixin govuk-font-size($size, $line-height: false, $important: false) {\n  // Flag font sizes that start with underscores so we can suppress warnings on\n  // deprecated sizes used internally, for example `govuk-font($size: \"_14\")`\n  $size-internal-use-only: str-slice(#{$size}, 1, 1) == \"_\";\n\n  // Remove underscore from font sizes flagged for internal use\n  @if $size-internal-use-only {\n    $size: str-slice(#{$size}, 2);\n  }\n\n  // Check for a font map exactly matching the given size\n  $font-map: map-get($govuk-typography-scale, $size);\n\n  // No match? Try with string type (e.g. $size: \"16\" not 16)\n  @if not $font-map {\n    @each $font-size in map-keys($govuk-typography-scale) {\n      @if not $font-map and #{$font-size} == #{$size} {\n        $font-map: map-get($govuk-typography-scale, $font-size);\n      }\n    }\n  }\n\n  // Still no match? Throw error\n  @if not $font-map {\n    @error \"Unknown font size `#{$size}` - expected a point from the type scale.\";\n  }\n\n  // Check for a deprecation within the type scale\n  $deprecation: map-get($font-map, \"deprecation\");\n\n  @if $deprecation {\n    // Warn on deprecated font sizes unless flagged for internal use\n    @if not $size-internal-use-only {\n      @include _warning(map-get($deprecation, \"key\"), map-get($deprecation, \"message\"));\n    }\n\n    // remove the deprecation map keys so they do not break the breakpoint loop\n    $font-map: map-remove($font-map, \"deprecation\");\n  }\n\n  @each $breakpoint, $breakpoint-map in $font-map {\n    $font-size: map-get($breakpoint-map, \"font-size\");\n    $font-size-rem: govuk-px-to-rem($font-size);\n\n    // $calculated-line-height is a separate variable from $line-height,\n    // as otherwise the value would get redefined with each loop and\n    // eventually break _govuk-line-height.\n    //\n    // We continue to call the param $line-height to stay consistent with the\n    // naming with govuk-font.\n    $calculated-line-height: _govuk-line-height(\n      $line-height: if($line-height, $line-height, map-get($breakpoint-map, \"line-height\")),\n      $font-size: $font-size\n    );\n\n    // Mark rules as !important if $important is true - this will result in\n    // these variables becoming strings, so this needs to happen *after* they\n    // are used in calculations\n    $font-size: $font-size if($important, !important, null);\n    $font-size-rem: $font-size-rem if($important, !important, null);\n    $calculated-line-height: $calculated-line-height if($important, !important, null);\n\n    @if not $breakpoint {\n      font-size: $font-size-rem;\n      line-height: $calculated-line-height;\n    } @else if $breakpoint == \"print\" {\n      @include govuk-media-query($media-type: print) {\n        font-size: $font-size;\n        line-height: $calculated-line-height;\n      }\n    } @else {\n      @include govuk-media-query($from: $breakpoint) {\n        font-size: $font-size-rem;\n        line-height: $calculated-line-height;\n      }\n    }\n  }\n}\n\n/// Font helper\n///\n/// @param {Number | Boolean | String} $size Point from the type scale (the\n///   size as it would appear on tablet and above). Use `false` to avoid setting\n///   a size.\n/// @param {String} $weight [regular] - Weight: `bold` or `regular`\n/// @param {Boolean} $tabular [false] - Whether to use tabular numbers or not\n/// @param {Number} $line-height [false] - Line-height, if overriding the\n///   default\n///\n/// @throw if `$size` is not a valid point from the type scale (or false)\n///\n/// @access public\n\n@mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {\n  @include govuk-typography-common;\n\n  @if $tabular {\n    @include govuk-font-tabular-numbers;\n  }\n\n  @if $weight == regular {\n    @include govuk-typography-weight-regular;\n  } @else if $weight == bold {\n    @include govuk-typography-weight-bold;\n  }\n\n  @if $size {\n    @include govuk-font-size($size, $line-height);\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.scss

@@ -0,0 +1,117 @@
+////
+/// @group helpers/accessibility
+////
+
+/// Hide an element visually, but have it available for screen readers
+///
+/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+///   - Hiding Content for Accessibility, Jonathan Snook, February 2011
+/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
+///   - h5bp/html5-boilerplate - Thanks!
+///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
+/// @access public
+
+@mixin govuk-visually-hidden($important: true) {
+  position: absolute if($important, !important, null);
+
+  // Absolute positioning has the unintended consequence of removing any
+  // whitespace surrounding visually hidden text from the accessibility tree.
+  // Insert a space character before and after visually hidden text to separate
+  // it from any visible text surrounding it.
+  &::before {
+    content: "\00a0";
+  }
+
+  &::after {
+    content: "\00a0";
+  }
+
+  width: 1px if($important, !important, null);
+  height: 1px if($important, !important, null);
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0 if($important, !important, null);
+  padding: 0 if($important, !important, null);
+
+  overflow: hidden if($important, !important, null);
+  clip: rect(0 0 0 0) if($important, !important, null);
+  -webkit-clip-path: inset(50%) if($important, !important, null);
+          clip-path: inset(50%) if($important, !important, null);
+
+  border: 0 if($important, !important, null);
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap if($important, !important, null);
+
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+/// Hide an element visually, but have it available for screen readers whilst
+/// allowing the element to be focused when navigated to via the keyboard (e.g.
+/// for the skip link)
+///
+/// This is slightly less opinionated about borders and padding to make it
+/// easier to style the focussed element.
+///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
+/// @access public
+
+@mixin govuk-visually-hidden-focusable($important: true) {
+  position: absolute if($important, !important, null);
+
+  width: 1px if($important, !important, null);
+  height: 1px if($important, !important, null);
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0 if($important, !important, null);
+
+  overflow: hidden if($important, !important, null);
+  clip: rect(0 0 0 0) if($important, !important, null);
+  -webkit-clip-path: inset(50%) if($important, !important, null);
+          clip-path: inset(50%) if($important, !important, null);
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap if($important, !important, null);
+
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+
+  &:active,
+  &:focus {
+    position: static if($important, !important, null);
+
+    width: auto if($important, !important, null);
+    height: auto if($important, !important, null);
+    margin: inherit if($important, !important, null);
+
+    overflow: visible if($important, !important, null);
+    clip: auto if($important, !important, null);
+    -webkit-clip-path: none if($important, !important, null);
+            clip-path: none if($important, !important, null);
+
+    white-space: inherit if($important, !important, null);
+
+    // Allow the text to be selectable now it's visible
+    -webkit-user-select: text;
+        -ms-user-select: text;
+            user-select: text;
+  }
+}
+
+/*# sourceMappingURL=_visually-hidden.scss.map */

data/node_modules/govuk-frontend/dist/govuk/helpers/_visually-hidden.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/govuk/helpers/_visually-hidden.scss"],"names":[],"mappings":"AAAA,GAAG;AACH,+BAA+B;AAC/B,GAAG;;AAEH,qEAAqE;AACrE,EAAE;AACF,gFAAgF;AAChF,sEAAsE;AACtE,2HAA2H;AAC3H,uCAAuC;AACvC,EAAE;AACF,uEAAuE;AACvE,EAAE;AACF,iBAAiB;;AAEjB;EACE,mDAAmD;;EAEnD,qEAAqE;EACrE,0EAA0E;EAC1E,4EAA4E;EAC5E,0CAA0C;EAC1C;IACE,gBAAgB;EAClB;;EAEA;IACE,gBAAgB;EAClB;;EAEA,2CAA2C;EAC3C,4CAA4C;EAC5C,2EAA2E;EAC3E,sCAAsC;EACtC,0CAA0C;EAC1C,2CAA2C;;EAE3C,iDAAiD;EACjD,oDAAoD;EACpD,8DAAsD;UAAtD,sDAAsD;;EAEtD,0CAA0C;;EAE1C,4EAA4E;EAC5E,yCAAyC;EACzC,uFAAuF;EACvF,oDAAoD;;EAEpD,6EAA6E;EAC7E,4EAA4E;EAC5E,8BAA8B;EAC9B,yBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;AACnB;;AAEA,4EAA4E;AAC5E,8EAA8E;AAC9E,qBAAqB;AACrB,EAAE;AACF,yEAAyE;AACzE,wCAAwC;AACxC,EAAE;AACF,uEAAuE;AACvE,EAAE;AACF,iBAAiB;;AAEjB;EACE,mDAAmD;;EAEnD,2CAA2C;EAC3C,4CAA4C;EAC5C,2EAA2E;EAC3E,sCAAsC;EACtC,0CAA0C;;EAE1C,iDAAiD;EACjD,oDAAoD;EACpD,8DAAsD;UAAtD,sDAAsD;;EAEtD,4EAA4E;EAC5E,yCAAyC;EACzC,uFAAuF;EACvF,oDAAoD;;EAEpD,6EAA6E;EAC7E,4EAA4E;EAC5E,8BAA8B;EAC9B,yBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;;EAEjB;;IAEE,iDAAiD;;IAEjD,4CAA4C;IAC5C,6CAA6C;IAC7C,gDAAgD;;IAEhD,kDAAkD;IAClD,2CAA2C;IAC3C,wDAAgD;YAAhD,gDAAgD;;IAEhD,qDAAqD;;IAErD,kDAAkD;IAClD,yBAAiB;QAAjB,qBAAiB;YAAjB,iBAAiB;EACnB;AACF","file":"_visually-hidden.scss","sourcesContent":["////\n/// @group helpers/accessibility\n////\n\n/// Hide an element visually, but have it available for screen readers\n///\n/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility\n///   - Hiding Content for Accessibility, Jonathan Snook, February 2011\n/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158\n///   - h5bp/html5-boilerplate - Thanks!\n///\n/// @param {Boolean} $important [true] - Whether to mark as `!important`\n///\n/// @access public\n\n@mixin govuk-visually-hidden($important: true) {\n  position: absolute if($important, !important, null);\n\n  // Absolute positioning has the unintended consequence of removing any\n  // whitespace surrounding visually hidden text from the accessibility tree.\n  // Insert a space character before and after visually hidden text to separate\n  // it from any visible text surrounding it.\n  &::before {\n    content: \"\\00a0\";\n  }\n\n  &::after {\n    content: \"\\00a0\";\n  }\n\n  width: 1px if($important, !important, null);\n  height: 1px if($important, !important, null);\n  // If margin is set to a negative value it can cause text to be announced in\n  // the wrong order in VoiceOver for OSX\n  margin: 0 if($important, !important, null);\n  padding: 0 if($important, !important, null);\n\n  overflow: hidden if($important, !important, null);\n  clip: rect(0 0 0 0) if($important, !important, null);\n  clip-path: inset(50%) if($important, !important, null);\n\n  border: 0 if($important, !important, null);\n\n  // For long content, line feeds are not interpreted as spaces and small width\n  // causes content to wrap 1 word per line:\n  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n  white-space: nowrap if($important, !important, null);\n\n  // Prevent users from selecting or copying visually-hidden text. This prevents\n  // a user unintentionally copying more text than they intended and needing to\n  // manually trim it down again.\n  user-select: none;\n}\n\n/// Hide an element visually, but have it available for screen readers whilst\n/// allowing the element to be focused when navigated to via the keyboard (e.g.\n/// for the skip link)\n///\n/// This is slightly less opinionated about borders and padding to make it\n/// easier to style the focussed element.\n///\n/// @param {Boolean} $important [true] - Whether to mark as `!important`\n///\n/// @access public\n\n@mixin govuk-visually-hidden-focusable($important: true) {\n  position: absolute if($important, !important, null);\n\n  width: 1px if($important, !important, null);\n  height: 1px if($important, !important, null);\n  // If margin is set to a negative value it can cause text to be announced in\n  // the wrong order in VoiceOver for OSX\n  margin: 0 if($important, !important, null);\n\n  overflow: hidden if($important, !important, null);\n  clip: rect(0 0 0 0) if($important, !important, null);\n  clip-path: inset(50%) if($important, !important, null);\n\n  // For long content, line feeds are not interpreted as spaces and small width\n  // causes content to wrap 1 word per line:\n  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n  white-space: nowrap if($important, !important, null);\n\n  // Prevent users from selecting or copying visually-hidden text. This prevents\n  // a user unintentionally copying more text than they intended and needing to\n  // manually trim it down again.\n  user-select: none;\n\n  &:active,\n  &:focus {\n    position: static if($important, !important, null);\n\n    width: auto if($important, !important, null);\n    height: auto if($important, !important, null);\n    margin: inherit if($important, !important, null);\n\n    overflow: visible if($important, !important, null);\n    clip: auto if($important, !important, null);\n    clip-path: none if($important, !important, null);\n\n    white-space: inherit if($important, !important, null);\n\n    // Allow the text to be selectable now it's visible\n    user-select: text;\n  }\n}\n"]}