govuk_tech_docs 6.3.0 → 6.4.1.0

data/node_modules/govuk-frontend/dist/govuk/components/header/_mixin.scss

@@ -1,45 +1,29 @@
 @use "../../base";
+@use "../generic-header/mixin" as genericHeader;
 
 /// @access private
 @mixin styles {
   $logo-bottom-margin: 2px;
 
   .govuk-header {
-    @include base.govuk-font($size: 16, $line-height: 1);
-
-    // Add a transparent bottom border for forced-colour modes
-    border-bottom: 1px solid transparent;
-    color: base.govuk-colour("white");
-    background: base.govuk-functional-colour(brand);
+    @include genericHeader.block-styles(
+      $background-colour: base.govuk-functional-colour("brand"),
+      $text-colour: base.govuk-functional-colour("inverse-text")
+    );
   }
 
   .govuk-header__container--full-width {
-    padding: 0 base.govuk-spacing(3);
+    @include genericHeader.full-width-container-styles;
   }
 
   .govuk-header__logo {
-    box-sizing: border-box;
-
     // Magic numbers, set padding to vertically centre align the logo
-    padding-top: 16px;
-    padding-bottom: 14px - $logo-bottom-margin;
+    @include genericHeader.logo-styles($padding-top: 16px, $padding-bottom: 14px - $logo-bottom-margin);
   }
 
   .govuk-header__homepage-link {
-    // Avoid using the `base.govuk-link-common` mixin because the links in the
-    // header get a special treatment, because:
-    //
-    // - underlines are only visible on hover
-    // - all links get a 3px underline regardless of text size, as there are
-    //   multiple grouped elements close to one another and having slightly
-    //   different underline widths looks unbalanced
-    //
-    // Font size needs to be set on the link so that the box sizing is correct
-    // in Firefox
-    display: inline;
-    margin-right: base.govuk-spacing(2);
-    font-size: 30px; // We don't have a mixin that produces 30px font size
-    text-decoration: none;
+    @include genericHeader.link-styles;
+
     // Remove word-spacing from within the logo so we can ignore
     // whitespace characters in the HTML
     word-spacing: base.govuk-px-to-rem(-6px);
@@ -47,28 +31,6 @@
     > * {
       word-spacing: 0;
     }
-    @include base.govuk-link-style-inverse;
-
-    &:link,
-    &:visited {
-      text-decoration: none;
-    }
-
-    &:hover,
-    &:active {
-      // Negate the added border
-      $link-underline-thickness: 3px;
-      margin-bottom: $link-underline-thickness * -1;
-      border-bottom: $link-underline-thickness solid;
-    }
-
-    &:focus {
-      // Remove any borders that show when focused and hovered.
-      margin-bottom: 0;
-      border-bottom: 0;
-
-      @include base.govuk-focused-text;
-    }
   }
 
   .govuk-header__logotype {
@@ -146,24 +108,6 @@
   }
 
   @media print {
-    .govuk-header {
-      border-bottom-width: 0;
-      color: base.govuk-colour("black");
-      background: transparent;
-    }
-
-    .govuk-header__homepage-link {
-      &:link,
-      &:visited {
-        color: base.govuk-colour("black");
-      }
-
-      // Do not append link href to GOV.UK link when printing (e.g. '(/)')
-      &::after {
-        display: none;
-      }
-    }
-
     .govuk-header__product-name {
       // Fix product name alignment in Firefox when printing
       @-moz-document url-prefix() {

data/node_modules/govuk-frontend/dist/govuk/components/input/_mixin.scss

@@ -125,6 +125,7 @@
     padding: base.govuk-spacing(1);
     border: base.$govuk-border-width-form-element solid;
     border-color: base.govuk-functional-colour(input-border);
+    color: base.govuk-functional-colour(text);
     background-color: base.govuk-colour("black", $variant: "tint-95");
     text-align: center;
     white-space: nowrap;

data/node_modules/govuk-frontend/dist/govuk/components/language-navigation/_index.import.scss

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/language-navigation") {
+  @include mixin.styles;
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/language-navigation/_index.scss

@@ -0,0 +1,6 @@
+@use "../../custom-properties";
+
+@use "mixin";
+
+@include mixin.styles;
+

data/node_modules/govuk-frontend/dist/govuk/components/language-navigation/_language-navigation.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("language-navigation");
+
+@import "index";
+

data/node_modules/govuk-frontend/dist/govuk/components/language-navigation/_mixin.scss

@@ -0,0 +1,68 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-language-navigation {
+    @include base.govuk-font($size: 19);
+
+    @include base.govuk-responsive-margin(6, "bottom");
+    color: base.govuk-functional-colour(text);
+  }
+
+  .govuk-language-navigation__list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    row-gap: base.govuk-spacing(2);
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .govuk-language-navigation__list-item {
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) {
+      &::after {
+        content: "";
+        display: block;
+        height: 1em;
+        margin-right: base.govuk-spacing(2);
+        margin-left: base.govuk-spacing(2);
+        border-right: 1px solid;
+        border-right-color: base.govuk-functional-colour(border);
+      }
+    }
+  }
+
+  .govuk-language-navigation__link {
+    @include base.govuk-link-common;
+    @include base.govuk-link-style-default;
+  }
+
+  .govuk-language-navigation--inverse {
+    color: base.govuk-functional-colour(inverse-text);
+
+    .govuk-language-navigation__link {
+      @include base.govuk-link-style-inverse;
+    }
+
+    .govuk-language-navigation__list-item::after {
+      border-right-color: currentcolor;
+    }
+  }
+
+  // Ensure the Language navigation has enough
+  // spacing with the rest of the Service Navigation
+  .govuk-service-navigation .govuk-language-navigation {
+    // Slightly smaller margin because the Service Navigation's menu toggle
+    // has a little margin underneath it already.
+    margin-top: base.govuk-spacing(1);
+    margin-bottom: base.govuk-spacing(3);
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      margin-top: base.govuk-spacing(3);
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_mixin.scss

@@ -5,13 +5,14 @@
 /// @access private
 @mixin styles {
   .govuk-notification-banner {
+    --_govuk-notification-banner-colour: #{base.govuk-functional-colour(brand)};
+    --_govuk-notification-banner-title-text-colour: #{base.govuk-functional-colour(inverse-text)};
+
     @include base.govuk-font($size: 19);
     @include base.govuk-responsive-margin(8, "bottom");
 
     border: base.$govuk-border-width solid;
-    border-color: base.govuk-functional-colour(brand);
-
-    background-color: base.govuk-functional-colour(brand);
+    border-color: var(--_govuk-notification-banner-colour);
 
     &:focus {
       outline: base.$govuk-focus-width solid;
@@ -26,6 +27,9 @@
     // text in high contrast mode
     border-bottom: 1px solid transparent;
 
+    color: var(--_govuk-notification-banner-title-text-colour);
+    background-color: var(--_govuk-notification-banner-colour);
+
     @media #{base.govuk-from-breakpoint(tablet)} {
       padding: 2px base.govuk-spacing(4) base.govuk-spacing(1);
     }
@@ -38,7 +42,6 @@
     @include base.govuk-typography-weight-bold;
     margin: 0;
     padding: 0;
-    color: base.govuk-colour("white");
   }
 
   .govuk-notification-banner__content {
@@ -87,9 +90,7 @@
   }
 
   .govuk-notification-banner--success {
-    border-color: base.govuk-functional-colour(success);
-
-    background-color: base.govuk-functional-colour(success);
+    --_govuk-notification-banner-colour: #{base.govuk-functional-colour(success)};
 
     .govuk-notification-banner__link {
       @include base.govuk-link-style-success;

data/node_modules/govuk-frontend/dist/govuk/components/panel/_mixin.scss

@@ -11,6 +11,7 @@
     padding: base.govuk-spacing(7) - base.$govuk-border-width;
 
     border: base.$govuk-border-width solid transparent;
+    color: base.govuk-functional-colour(text);
 
     text-align: center;
 
@@ -35,17 +36,6 @@
     }
   }
 
-  .govuk-panel--confirmation {
-    color: base.govuk-colour("white");
-    background: base.govuk-colour("green");
-
-    @media print {
-      border-color: currentcolor;
-      color: base.govuk-functional-colour(text);
-      background: none;
-    }
-  }
-
   .govuk-panel__title {
     @include base.govuk-font-size($size: 48);
     @include base.govuk-typography-weight-bold;
@@ -53,8 +43,52 @@
     margin-bottom: base.govuk-spacing(6);
   }
 
-  .govuk-panel__title:last-child {
+  // Remove bottom spacing from anything at the end of the Panel's content
+  // to stop the Panel's padding spacing from becoming too large.
+  .govuk-panel__title:last-child,
+  .govuk-panel__body > :last-child,
+  .govuk-panel__actions > :last-child {
     margin-bottom: 0;
   }
+
+  // On larger screens if the Panel actions have a button group,
+  // then we want to adjust the spacing a bit to avoid the button group
+  // making the Panel's padding spacing being too large.
+  @media #{base.govuk-from-breakpoint(tablet)} {
+    .govuk-panel__actions > .govuk-button-group:last-child {
+      margin-bottom: -1 * base.govuk-spacing(2);
+    }
+  }
+
+  // When the panel shows some actions, make sure they have some spacing
+  // from the panel's content
+  .govuk-panel__body:not(:last-child) {
+    margin-bottom: base.govuk-spacing(7);
+  }
+
+  .govuk-panel--confirmation {
+    --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
+    background: base.govuk-functional-colour(success);
+  }
+
+  .govuk-panel--interruption {
+    --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
+    background: base.govuk-functional-colour(brand);
+    text-align: left;
+
+    // Smaller title to go alongside smaller body text.
+    .govuk-panel__title {
+      @include base.govuk-font-size($size: 36);
+      margin-bottom: base.govuk-spacing(3);
+    }
+  }
+
+  @media print {
+    .govuk-panel {
+      --govuk-text-colour: inherit;
+      border-color: currentcolor;
+      background: none;
+    }
+  }
 }
 

data/node_modules/govuk-frontend/dist/govuk/components/radios/_mixin.scss

@@ -46,7 +46,7 @@
       100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + base.govuk-spacing(3))}
     );
     margin-bottom: 0;
-    padding: (base.govuk-spacing(1) + base.$govuk-border-width-form-element) base.govuk-spacing(3);
+    padding: (base.govuk-spacing(1) + base.$govuk-border-width-form-element) $govuk-radios-label-padding-left-right;
     cursor: pointer;
     // remove 300ms pause on mobile
     touch-action: manipulation;
@@ -227,6 +227,12 @@
     }
 
     .govuk-radios__label {
+      // Recalculate max-width to account for the smaller radio size
+      // 1px comes from padding-left (defined below)
+      max-width: calc(
+        100% - #{($govuk-touch-target-size - $input-offset) + $govuk-radios-label-padding-left-right + 1px}
+      );
+
       // Create a tiny space between the small radio hover state so that it
       // doesn't clash with the label
       padding-left: 1px;

data/node_modules/govuk-frontend/dist/govuk/components/select/_mixin.scss

@@ -34,13 +34,6 @@
     }
   }
 
-  .govuk-select option:active,
-  .govuk-select option:checked,
-  .govuk-select:focus::-ms-value {
-    color: base.govuk-colour("white");
-    background-color: base.govuk-colour("blue");
-  }
-
   .govuk-select--error {
     border-color: base.govuk-functional-colour(error);
 

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_mixin.scss

@@ -14,8 +14,34 @@
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: $govuk-service-navigation-border-colour;
-    color: $govuk-service-navigation-text-colour;
+    // Ensure that both raw content and content with typography classes
+    // will pick up the correct colour by setting both `--govuk-text-colour`
+    // and `color`.
+    --govuk-text-colour: #{$govuk-service-navigation-text-colour};
+    color: base.govuk-functional-colour(text);
     background-color: $govuk-service-navigation-background;
+
+    @media print {
+      border-bottom-color: currentcolor;
+      background-color: transparent;
+    }
+  }
+
+  .govuk-service-navigation__inlining-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+
+    .govuk-service-navigation__container {
+      // Expand the container to shift the `end` slot to the right
+      flex-grow: 1;
+
+      // Ensure some space between the `end` slot and the container
+      // when displayed inline
+      &:not(:last-child) {
+        margin-right: base.govuk-spacing(6);
+      }
+    }
   }
 
   .govuk-service-navigation__container {
@@ -23,9 +49,16 @@
     flex-direction: column;
     align-items: start;
 
+    // Avoid the end slot rendering on the right of the container
+    // in small viewports by ensuring the container is full width
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      width: 100%;
+    }
+
     @media #{base.govuk-from-breakpoint(tablet)} {
       flex-direction: row;
       flex-wrap: wrap;
+      align-items: center;
     }
   }
 
@@ -61,6 +94,10 @@
         @include base.govuk-responsive-margin(6, $direction: right);
       }
     }
+
+    @media print {
+      border-color: currentcolor;
+    }
   }
 
   // Remove the top margin of the first nav item if there is a service name but
@@ -200,16 +237,22 @@
     // Remove bottom border to add width-container ones
     border-bottom: none;
 
-    // Set colour here so non-link text (service name, slot content) can
-    // use it too.
-    color: base.govuk-colour("white");
-
+    --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
     background-color: base.govuk-functional-colour(brand);
 
+    @media print {
+      --govuk-text-colour: #{base.govuk-functional-colour(print-text)};
+      background-color: transparent;
+    }
+
     .govuk-width-container {
       border-width: 1px 0;
       border-style: solid;
       border-color: $govuk-service-navigation-border-colour;
+
+      @media print {
+        border-color: currentcolor;
+      }
     }
 
     // Subtract 1px of space to account for the extra border-top
@@ -220,12 +263,15 @@
     // Override the 'active' border colour
     .govuk-service-navigation__item,
     .govuk-service-navigation__service-name {
-      border-color: base.govuk-colour("white");
+      border-color: currentcolor;
     }
 
-    // Override link styles
-    .govuk-service-navigation__link {
-      @include base.govuk-link-style-inverse;
+    // Override link styles if on screens
+    // In print, we want the normal link styles to still apply
+    @media not print {
+      .govuk-service-navigation__link {
+        @include base.govuk-link-style-text;
+      }
     }
 
     // Override mobile menu toggle colour when not focused

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_frontend-version.mixin.scss

@@ -7,7 +7,7 @@
   // `$govuk-output-custom-properties` is true or not to help with checking if
   // multiple stylesheets are outputting the same version
   :root {
-    --govuk-frontend-version: "6.2.0";
+    --govuk-frontend-version: "6.5.1";
   }
 }
 

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_functional-colours.mixin.scss

@@ -14,6 +14,7 @@
       @media print {
         // Use 'true black' to avoid printers using colour ink to print body text
         --govuk-text-colour: #{govuk-functional-colour("print-text")};
+        --govuk-input-border-colour: #{govuk-functional-colour("print-text")};
       }
     }
   }