govuk_tech_docs 4.3.1 → 5.0.0

data/node_modules/govuk-frontend/dist/govuk/assets/rebrand/images/govuk-icon-mask.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m0 0v512h512v-512zm415.76 238.55c11.12-4.56 24.05.88 28.67 12.11 4.63 11.17-.72 24.05-11.85 28.61-11.34 4.68-24.21-.67-28.83-11.88-4.65-11.18.67-24.18 12.01-28.84zm-39.05-58.11c11.12-4.56 24.05.89 28.68 12.12 4.62 11.17-.73 24.04-11.85 28.6-11.34 4.68-24.21-.67-28.83-11.88-4.65-11.18.67-24.18 12-28.84zm-58.98-35.19c11.12-4.57 24.05.88 28.67 12.11 4.62 11.17-.72 24.04-11.85 28.6-11.34 4.68-24.21-.67-28.84-11.88-4.64-11.18.67-24.18 12.01-28.83zm-101.34-55.92 27.83 8.81.09-.08c.77-1.03 1.68-1.94 2.7-2.73l.08-.08-11.2-35.25h20.12s20.12 0 20.12 0l-11.2 35.25.08.08c1.02.79 1.93 1.7 2.7 2.73l.08.08 27.84-8.81v41.08l-27.87-14.63-.06.06c-.83 1.08-1.8 2.04-2.88 2.86l16 48.28c.02.06.05.12.06.18l.02.05c.74 2.42 1.14 4.98 1.14 7.63 0 13.06-9.65 23.85-22.19 25.7-.18.03-.37.06-.55.08-1.07.14-2.16.23-3.26.23-1.11 0-2.19-.09-3.26-.23-.19-.02-.38-.06-.56-.08-12.55-1.85-22.19-12.63-22.19-25.7 0-2.65.4-5.21 1.15-7.62s.01-.06.01-.06c.02-.06.04-.12.06-.18l16.01-48.28c-1.09-.81-2.06-1.77-2.88-2.86l-.06-.06-27.87 14.63v-41.08zm48.11 174.62c-11.34 4.68-24.21-.67-28.84-11.88-4.64-11.18.67-24.18 12.01-28.83 11.12-4.57 24.05.88 28.67 12.11 4.62 11.17-.72 24.04-11.85 28.6zm-99.28-106.59c4.62-11.23 17.55-16.68 28.67-12.11 11.34 4.65 16.65 17.65 12.01 28.83-4.62 11.21-17.49 16.56-28.84 11.88-11.12-4.56-16.47-17.44-11.85-28.6zm-58.99 35.2c4.63-11.22 17.55-16.68 28.68-12.12 11.34 4.65 16.65 17.65 12 28.84-4.62 11.21-17.49 16.56-28.83 11.88-11.12-4.56-16.48-17.44-11.85-28.6zm-39.04 58.11c4.62-11.23 17.55-16.68 28.67-12.11 11.34 4.65 16.66 17.65 12.01 28.84-4.62 11.21-17.49 16.56-28.83 11.88-11.13-4.55-16.47-17.43-11.85-28.61zm335.98 169.34c-44.5-6.37-94.44-9.94-147.21-9.94s-102.66 3.57-147.14 9.93c-12.63-53.1-28-83.53-43.87-105.19l29.89-10.64c-2.97 15.18-3.45 22.24-.12 32 4.93-4.82 9.6-13.68 13.25-27.23l14.49 48.23c-8.82-6.07-15.61-9.99-23.39-10.17 13.79 29.7 31.01 37.34 42.17 35.28 13.62-2.5 19.89-14.65 17.78-24.95-3.13-14.6-18.12-18.41-25.12-1.42-13.39-27.31 9.32-35.81 23.93-27.73-22.44-22.39-25.01-42.29-6.89-66.38 25.24 19.3 25.54 38.41 14.18 65.3 14.74-16.87 37.68-7.81 29.4 19.45-10.64-16.46-24.71-6.1-22.5 9.53 1.87 13.62 19.85 24.62 42.25 22.68 32.1-2.91 34.01-25.06 34.81-43.39-7.89-1.46-22.1 5.86-34.22 22.87l-4.46-51.16c13.18 13.74 25.16 16.35 38.46 16.77-4.43-13.82-24.78-36.46-24.78-36.46h63.85s-20.35 22.64-24.78 36.46c13.3-.42 25.28-3.03 38.46-16.77l-4.46 51.16c-12.11-17.01-26.32-24.33-34.21-22.87.8 18.34 2.71 40.48 34.81 43.39 22.39 1.95 40.38-9.05 42.25-22.68 2.21-15.63-11.86-25.99-22.49-9.53-8.29-27.26 14.65-36.32 29.39-19.45-11.36-26.89-11.07-46 14.18-65.3 18.12 24.08 15.55 43.99-6.9 66.38 14.62-8.08 37.32.43 23.94 27.73-7-16.99-21.98-13.18-25.12 1.42-2.11 10.3 4.15 22.46 17.77 24.95 11.16 2.06 28.38-5.58 42.17-35.28-7.77.18-14.57 4.11-23.38 10.17l14.48-48.23c3.65 13.55 8.32 22.41 13.25 27.23 3.33-9.76 2.85-16.82-.12-32l29.89 10.64c-15.88 21.66-31.25 52.09-43.88 105.2z"/></svg>

data/node_modules/govuk-frontend/dist/govuk/common/govuk-frontend-version.mjs

@@ -1,4 +1,4 @@
-const version = '5.9.0';
+const version = '5.10.2';
 
 export { version };
 //# sourceMappingURL=govuk-frontend-version.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js

@@ -576,6 +576,7 @@
           identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
         });
       }
+      this.$errorMessage = this.$root.querySelector('.govuk-error-message');
       if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
         $textareaDescription.textContent = this.i18n.t('textareaDescription', {
           count: this.maxLength
@@ -634,7 +635,9 @@
       const remainingNumber = this.maxLength - this.count(this.$textarea.value);
       const isError = remainingNumber < 0;
       this.$visibleCountMessage.classList.toggle('govuk-character-count__message--disabled', !this.isOverThreshold());
-      this.$textarea.classList.toggle('govuk-textarea--error', isError);
+      if (!this.$errorMessage) {
+        this.$textarea.classList.toggle('govuk-textarea--error', isError);
+      }
       this.$visibleCountMessage.classList.toggle('govuk-error-message', isError);
       this.$visibleCountMessage.classList.toggle('govuk-hint', !isError);
       this.$visibleCountMessage.textContent = this.getCountMessage();

data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs

@@ -570,6 +570,7 @@ class CharacterCount extends ConfigurableComponent {
         identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
       });
     }
+    this.$errorMessage = this.$root.querySelector('.govuk-error-message');
     if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
       $textareaDescription.textContent = this.i18n.t('textareaDescription', {
         count: this.maxLength
@@ -628,7 +629,9 @@ class CharacterCount extends ConfigurableComponent {
     const remainingNumber = this.maxLength - this.count(this.$textarea.value);
     const isError = remainingNumber < 0;
     this.$visibleCountMessage.classList.toggle('govuk-character-count__message--disabled', !this.isOverThreshold());
-    this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    if (!this.$errorMessage) {
+      this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    }
     this.$visibleCountMessage.classList.toggle('govuk-error-message', isError);
     this.$visibleCountMessage.classList.toggle('govuk-hint', !isError);
     this.$visibleCountMessage.textContent = this.getCountMessage();

data/node_modules/govuk-frontend/dist/govuk/components/character-count/character-count.mjs

@@ -71,6 +71,7 @@ class CharacterCount extends ConfigurableComponent {
         identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
       });
     }
+    this.$errorMessage = this.$root.querySelector('.govuk-error-message');
     if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
       $textareaDescription.textContent = this.i18n.t('textareaDescription', {
         count: this.maxLength
@@ -129,7 +130,9 @@ class CharacterCount extends ConfigurableComponent {
     const remainingNumber = this.maxLength - this.count(this.$textarea.value);
     const isError = remainingNumber < 0;
     this.$visibleCountMessage.classList.toggle('govuk-character-count__message--disabled', !this.isOverThreshold());
-    this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    if (!this.$errorMessage) {
+      this.$textarea.classList.toggle('govuk-textarea--error', isError);
+    }
     this.$visibleCountMessage.classList.toggle('govuk-error-message', isError);
     this.$visibleCountMessage.classList.toggle('govuk-hint', !isError);
     this.$visibleCountMessage.textContent = this.getCountMessage();

data/node_modules/govuk-frontend/dist/govuk/components/cookie-banner/_index.scss

@@ -1,3 +1,5 @@
+@import "../button/index";
+
 @include govuk-exports("govuk/component/cookie-banner") {
   // This needs to be kept in sync with the header component's styles
   $border-bottom-width: govuk-spacing(2);
@@ -11,7 +13,11 @@
     // changes colours in their browser.
     border-bottom: $border-bottom-width solid transparent;
 
-    background-color: $govuk-canvas-background-colour;
+    @include _govuk-rebrand(
+      "background-color",
+      $govuk-template-background-colour,
+      $_govuk-rebrand-template-background-colour
+    );
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute

data/node_modules/govuk-frontend/dist/govuk/components/date-input/_index.scss

@@ -2,6 +2,7 @@
 @import "../input/index";
 @import "../hint/index";
 @import "../label/index";
+@import "../fieldset/index";
 
 @include govuk-exports("govuk/component/date-input") {
   .govuk-date-input {

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.js

@@ -507,6 +507,8 @@
       this.$status = void 0;
       this.i18n = void 0;
       this.id = void 0;
+      this.$announcements = void 0;
+      this.enteredAnotherElement = void 0;
       const $input = this.$root.querySelector('input');
       if ($input === null) {
         throw new ElementError({
@@ -596,12 +598,6 @@
         this.enteredAnotherElement = false;
       });
     }
-
-    /**
-     * Updates the visibility of the dropzone as users enters the various elements on the page
-     *
-     * @param {DragEvent} event - The `dragenter` event
-     */
     updateDropzoneVisibility(event) {
       if (this.$button.disabled) return;
       if (event.target instanceof Node) {
@@ -626,12 +622,6 @@
     hideDraggingState() {
       this.$button.classList.remove('govuk-file-upload-button--dragging');
     }
-
-    /**
-     * Handles user dropping on the component
-     *
-     * @param {DragEvent} event - The `dragenter` event
-     */
     onDrop(event) {
       event.preventDefault();
       if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.bundle.mjs

@@ -501,6 +501,8 @@ class FileUpload extends ConfigurableComponent {
     this.$status = void 0;
     this.i18n = void 0;
     this.id = void 0;
+    this.$announcements = void 0;
+    this.enteredAnotherElement = void 0;
     const $input = this.$root.querySelector('input');
     if ($input === null) {
       throw new ElementError({
@@ -590,12 +592,6 @@ class FileUpload extends ConfigurableComponent {
       this.enteredAnotherElement = false;
     });
   }
-
-  /**
-   * Updates the visibility of the dropzone as users enters the various elements on the page
-   *
-   * @param {DragEvent} event - The `dragenter` event
-   */
   updateDropzoneVisibility(event) {
     if (this.$button.disabled) return;
     if (event.target instanceof Node) {
@@ -620,12 +616,6 @@ class FileUpload extends ConfigurableComponent {
   hideDraggingState() {
     this.$button.classList.remove('govuk-file-upload-button--dragging');
   }
-
-  /**
-   * Handles user dropping on the component
-   *
-   * @param {DragEvent} event - The `dragenter` event
-   */
   onDrop(event) {
     event.preventDefault();
     if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {

data/node_modules/govuk-frontend/dist/govuk/components/file-upload/file-upload.mjs

@@ -22,6 +22,8 @@ class FileUpload extends ConfigurableComponent {
     this.$status = void 0;
     this.i18n = void 0;
     this.id = void 0;
+    this.$announcements = void 0;
+    this.enteredAnotherElement = void 0;
     const $input = this.$root.querySelector('input');
     if ($input === null) {
       throw new ElementError({
@@ -111,12 +113,6 @@ class FileUpload extends ConfigurableComponent {
       this.enteredAnotherElement = false;
     });
   }
-
-  /**
-   * Updates the visibility of the dropzone as users enters the various elements on the page
-   *
-   * @param {DragEvent} event - The `dragenter` event
-   */
   updateDropzoneVisibility(event) {
     if (this.$button.disabled) return;
     if (event.target instanceof Node) {
@@ -141,12 +137,6 @@ class FileUpload extends ConfigurableComponent {
   hideDraggingState() {
     this.$button.classList.remove('govuk-file-upload-button--dragging');
   }
-
-  /**
-   * Handles user dropping on the component
-   *
-   * @param {DragEvent} event - The `dragenter` event
-   */
   onDrop(event) {
     event.preventDefault();
     if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {

data/node_modules/govuk-frontend/dist/govuk/components/footer/_index.scss

@@ -1,7 +1,7 @@
 @include govuk-exports("govuk/component/footer") {
-  $govuk-footer-background: $govuk-canvas-background-colour;
-  $govuk-footer-border: $govuk-border-colour;
+  $govuk-footer-background: $govuk-template-background-colour;
   $govuk-footer-text: $govuk-text-colour;
+  $govuk-footer-content-border: $govuk-border-colour;
 
   // Royal Arms image dimensions
   $govuk-footer-crest-image-width: 125px;
@@ -12,9 +12,17 @@
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 
-    border-top: 1px solid $govuk-footer-border;
+    border-top: 10px solid $govuk-brand-colour;
     color: $govuk-footer-text;
-    background: $govuk-footer-background;
+    @include _govuk-rebrand(
+      "background",
+      $from: $govuk-footer-background,
+      $to: $_govuk-rebrand-template-background-colour
+    );
+  }
+
+  .govuk-footer__crown {
+    margin-bottom: govuk-spacing(5);
   }
 
   .govuk-footer__link {
@@ -26,7 +34,12 @@
     margin: 0; // Reset `<hr>` default margins
     @include govuk-responsive-margin(8, "bottom");
     border: 0; // Reset `<hr>` default borders
-    border-bottom: 1px solid $govuk-footer-border;
+    border-bottom: 1px solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-footer-content-border,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
   }
 
   .govuk-footer__meta {
@@ -71,9 +84,10 @@
     text-wrap: balance;
   }
 
-  .govuk-footer__copyright-logo {
-    display: inline-block;
-    min-width: $govuk-footer-crest-image-width;
+  .govuk-footer__copyright-logo::before {
+    content: "";
+    display: block;
+    width: 100%;
     padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
     background-image: govuk-image-url("govuk-crest.svg");
     background-repeat: no-repeat;
@@ -81,6 +95,30 @@
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
     text-align: center;
     white-space: nowrap;
+
+    // Where possible use the crest as a mask instead. This lets us use
+    // currentColor, increasing the contrast of the image and matching the
+    // user's prefered foreground colour in e.g. forced colors mode.
+    // We test for `mask-position` rather than `mask-image` because of a false
+    // positive in Edge 17.
+    @supports ((-webkit-mask-position: initial) or (mask-position: initial)) {
+      background: currentcolor;
+      -webkit-mask-image: govuk-image-url("govuk-crest.svg");
+              mask-image: govuk-image-url("govuk-crest.svg");
+      -webkit-mask-repeat: no-repeat;
+              mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 0%;
+              mask-position: 50% 0%;
+      -webkit-mask-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+              mask-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+
+      // currentcolor doesn't seem to be computed correctly in forced colors
+      // mode so force the background color to match the system link color
+      // (matching the text in the link)
+      @media screen and (forced-colors: active) {
+        background: linktext;
+      }
+    }
   }
 
   .govuk-footer__inline-list {
@@ -106,7 +144,13 @@
     @include govuk-media-query($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
-    border-bottom: 1px solid $govuk-footer-border;
+
+    border-bottom: 1px solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-footer-content-border,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
   }
 
   .govuk-footer__navigation {

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

@@ -13,12 +13,31 @@
   $govuk-header-menu-button-height: 24px;
   $govuk-header-menu-button-width: 80px;
 
+  $govuk-header-rebrand-background: $govuk-brand-colour;
+  $govuk-header-rebrand-logo-bottom-margin: 2px;
+
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
 
-    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    // Add a transparent bottom border for forced-colour modes
+    @include _govuk-rebrand(
+      "border-bottom",
+      $from: govuk-spacing(2) solid govuk-colour("white"),
+      $to: 1px solid transparent
+    );
+    @include _govuk-rebrand("background", $from: $govuk-header-background, $to: $govuk-header-rebrand-background);
+
     color: $govuk-header-text;
-    background: $govuk-header-background;
+  }
+
+  .govuk-header--with-js-navigation {
+    @include govuk-media-query($until: desktop) {
+      .govuk-header__logo {
+        // Protect the absolute positioned menu button from overlapping with the
+        // logo with right padding using the button's width
+        padding-right: $govuk-header-menu-button-width;
+      }
+    }
   }
 
   .govuk-header__container--full-width {
@@ -36,8 +55,20 @@
     margin-bottom: -$govuk-header-border-width;
     padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
+
+    @include _govuk-rebrand {
+      // Remove the space allocated to the blue bar
+      margin-bottom: 0;
+
+      // Remove padding as the child elements are now responsible for spacing
+      padding-top: 0;
+
+      // Remove the blue bar
+      border-bottom: none;
+    }
   }
 
+  // TODO: Remove this when _govuk-rebrand becomes the default
   .govuk-header--full-width-border {
     border-bottom-color: $govuk-header-border-color;
 
@@ -69,6 +100,36 @@
     &:last-child {
       margin-right: 0;
     }
+
+    @include _govuk-rebrand {
+      margin-right: govuk-px-to-rem(7px); // 1 'dot'
+      margin-bottom: $govuk-header-rebrand-logo-bottom-margin;
+
+      // Remove right-margin if there's no product name
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  // Colour in the Dot
+  .govuk-logo-dot {
+    fill: #00ffe0;
+
+    // Override Dot colour when printing
+    @include govuk-media-query($media-type: print) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on forced colours mode
+    @media (forced-colors: active) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on focus
+    :focus & {
+      fill: currentcolor;
+    }
   }
 
   .govuk-header__product-name {
@@ -97,6 +158,40 @@
         margin-top: $product-name-offset-tablet - 0.5px;
       }
     }
+
+    @include _govuk-rebrand {
+      // Remove top margin
+      margin-top: 0;
+
+      // Remove 1px from the bottom to account for the font-size being 1px
+      // larger than the logo height.
+      margin-bottom: govuk-px-to-rem(-1px);
+
+      // Magic number font-size that visually aligns with GOV.UK logo.
+      // Also stops reducing the product name size on narrow screens
+      font-size: govuk-px-to-rem(31px);
+
+      // Reduce letter spacing
+      letter-spacing: -0.015em;
+
+      // Prevent forced colour modes from applying a background colour behind
+      // the product name, which cuts off the underline that appears on hover.
+      forced-color-adjust: none;
+
+      @media screen and (forced-colors: active) {
+        color: LinkText;
+        background: transparent;
+      }
+
+      // Remove top margin on the breakpoints too
+      @include govuk-media-query($from: tablet) {
+        margin-top: 0;
+      }
+
+      @include govuk-media-query($from: desktop) {
+        margin-top: 0;
+      }
+    }
   }
 
   .govuk-header__link {
@@ -134,12 +229,6 @@
 
     @include govuk-media-query($from: desktop) {
       display: inline;
-
-      &:focus {
-        // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
-        // This is to stop the logo getting cut off by the box shadow when focused on above a product name
-        box-shadow: 0 0 $govuk-focus-colour;
-      }
     }
 
     &:link,
@@ -159,6 +248,23 @@
       margin-bottom: 0;
       border-bottom: 0;
     }
+
+    @include _govuk-rebrand {
+      display: inline;
+
+      // Remove word-spacing from within the logo so we can ignore
+      // whitespace characters in the HTML
+      word-spacing: govuk-px-to-rem(-6px);
+
+      // Reset word-spacing for child elements
+      > * {
+        word-spacing: 0;
+      }
+
+      &:not(:focus) {
+        background-color: $govuk-header-rebrand-background;
+      }
+    }
   }
 
   .govuk-header__service-name {
@@ -166,6 +272,18 @@
     margin-bottom: govuk-spacing(2);
     @include govuk-font-size($size: 24);
     @include govuk-typography-weight-bold;
+
+    @include _govuk-rebrand {
+      // Apply margins to internal elements to emulate padding
+      margin-bottom: govuk-spacing(3);
+
+      @include govuk-media-query($from: desktop) {
+        // Magic number to align service name baseline with the GOV.UK logo
+        $service-name-offset: 4px;
+
+        margin: (govuk-spacing(3) + $service-name-offset) 0 (govuk-spacing(3) - $service-name-offset);
+      }
+    }
   }
 
   .govuk-header__logo,
@@ -175,9 +293,6 @@
 
   .govuk-header__logo {
     @include govuk-responsive-margin($govuk-header-vertical-spacing-value, "bottom");
-    // Protect the absolute positioned menu button from overlapping with the
-    // logo with right padding using the button's width
-    padding-right: $govuk-header-menu-button-width;
 
     @include govuk-media-query($from: desktop) {
       width: 33.33%;
@@ -192,6 +307,15 @@
         float: none;
       }
     }
+
+    @include _govuk-rebrand {
+      // Apply margins to internal elements to emulate padding
+      margin-bottom: 0;
+
+      // Magic numbers, set padding to vertically centre align the logo
+      padding-top: 16px;
+      padding-bottom: 14px - $govuk-header-rebrand-logo-bottom-margin;
+    }
   }
 
   .govuk-header__content {
@@ -265,8 +389,37 @@
   }
 
   .govuk-header__navigation {
+    @include govuk-media-query($until: mobile) {
+      @include _govuk-rebrand {
+        padding-bottom: govuk-spacing(3);
+      }
+    }
+
     @include govuk-media-query($from: desktop) {
       margin-bottom: govuk-spacing(2);
+
+      @include _govuk-rebrand {
+        // Magic number so that the bottom of the nav links aligns with the
+        // baseline of the GOV.UK logo
+        $navigation-offset: 7px;
+
+        // Apply margins to internal elements to emulate padding
+        margin-bottom: 0;
+        padding: (govuk-spacing(3) + $navigation-offset) 0 (govuk-spacing(3) - $navigation-offset);
+      }
+    }
+  }
+
+  .govuk-header__service-name + .govuk-header__navigation {
+    @include _govuk-rebrand {
+      @include govuk-media-query($from: desktop) {
+        // If there's both a service name and navigation,
+        // remove the extra padding between them on desktop
+        padding-top: 0;
+
+        // Restore the full bottom padding as the navigation isn't standalone
+        padding-bottom: govuk-spacing(3);
+      }
     }
   }
 
@@ -279,6 +432,12 @@
     &[hidden] {
       display: none;
     }
+
+    @include _govuk-rebrand {
+      @include govuk-media-query($from: mobile, $until: desktop) {
+        padding-bottom: govuk-spacing(3);
+      }
+    }
   }
 
   .govuk-header__navigation--end {
@@ -305,14 +464,41 @@
       @include govuk-typography-weight-bold;
       white-space: nowrap;
     }
+
+    @include _govuk-rebrand {
+      // Increase top padding of nav items...
+      padding-top: govuk-spacing(3);
+
+      // ...except on desktop
+      @include govuk-media-query($from: desktop) {
+        padding-top: govuk-spacing(1);
+      }
+
+      // Change the dividing line colour between mobile nav items
+      border-bottom-color: govuk-colour("white");
+
+      // Reduce default weight of links so that we can use bold for active ones
+      a {
+        @include govuk-typography-weight-regular;
+      }
+    }
   }
 
   .govuk-header__navigation-item--active {
     a {
+      @include _govuk-rebrand {
+        // Change active links to use bold text instead of changing colour
+        @include govuk-typography-weight-bold;
+      }
+
       &:link,
       &:hover,
       &:visited {
         color: $govuk-header-link-active;
+
+        @include _govuk-rebrand {
+          color: inherit;
+        }
       }
 
       // When printing, use the normal blue as this contrasts better with the
@@ -325,6 +511,10 @@
       // contrast is still acceptable
       &:focus {
         color: $govuk-focus-text-colour;
+
+        @include _govuk-rebrand {
+          color: $govuk-focus-text-colour;
+        }
       }
     }
   }

data/node_modules/govuk-frontend/dist/govuk/components/header/header.bundle.js

@@ -166,6 +166,7 @@
       if (!$menuButton) {
         return this;
       }
+      this.$root.classList.add('govuk-header--with-js-navigation');
       const menuId = $menuButton.getAttribute('aria-controls');
       if (!menuId) {
         throw new ElementError({

data/node_modules/govuk-frontend/dist/govuk/components/header/header.bundle.mjs

@@ -160,6 +160,7 @@ class Header extends Component {
     if (!$menuButton) {
       return this;
     }
+    this.$root.classList.add('govuk-header--with-js-navigation');
     const menuId = $menuButton.getAttribute('aria-controls');
     if (!menuId) {
       throw new ElementError({

data/node_modules/govuk-frontend/dist/govuk/components/header/header.mjs

@@ -24,6 +24,7 @@ class Header extends Component {
     if (!$menuButton) {
       return this;
     }
+    this.$root.classList.add('govuk-header--with-js-navigation');
     const menuId = $menuButton.getAttribute('aria-controls');
     if (!menuId) {
       throw new ElementError({