katalyst-govuk-formbuilder 1.17.1 → 1.18.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f533b02ace5d03ada9bc15c4948ef6e0beea18ab3c8220fb477764d1a10ef9d
-  data.tar.gz: db67628ba4fc937998a6e6578a90e29623e648eb18f32df4d96308559c31f43c
+  metadata.gz: a178eb2f8c15cf5feae7f1d8b54aeea17fc2bd403075a33e9d0eefb59d0a1d78
+  data.tar.gz: d7e76e1752f0fbfb86ba5d4acabf12b66d902ceeb07d82b137bf1d9076454f0d
 SHA512:
-  metadata.gz: a1030240f63d0c1c00b4380f6e866830d630c476f88832b20cebf4a82c9bcfd240a2ecf8c857d29d7a17f3ac36233d24acff7190426910fb10e0cd91b5e75abd
-  data.tar.gz: f0166f1c7f2ce2c447a24989ad654abedcb6acc23ecc3d58519e55a9765bbda5b8393663c9ec6dba3e09f1b47b70165afc82b23382de1d3d01d3c3b091460ccd
+  metadata.gz: 32fec79b423b236ccf044c9f4f30300971e32c9c76a158439219193ffbd2b5e021524849c8efe9018b4f56627c0b633be46c9512e8e7ec329b4d73d6bd7fbdf4
+  data.tar.gz: 2809bae41bc0b7b99fc77a11d92a21f71e06019ee29a41ff06b8d3444f3ec50fbdd99804adf317b8d55f4a1d0e59b1f6db820aae744e1c4872be35a639afa916

data/app/assets/builds/katalyst/govuk/formbuilder.css

@@ -43,10 +43,11 @@
 
 
 
+
 
 
 :root {
-  --govuk-frontend-version: "5.9.0";
+  --govuk-frontend-version: "5.10.2";
   --govuk-frontend-breakpoint-mobile: 20rem;
   --govuk-frontend-breakpoint-tablet: 40.0625rem;
   --govuk-frontend-breakpoint-desktop: 48.0625rem;
@@ -79,8 +80,12 @@
   background-color: #ffdd00;
   box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
   text-decoration: none;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
+}
+@supports not (text-wrap: balance) {
+  .govuk-link:focus {
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
 }
 .govuk-link:link {
   color: #1d70b8;
@@ -809,6 +814,7 @@
 
 
 
+
 
 
 .govuk-button-group {
@@ -916,6 +922,7 @@
 
 
 
+
 
 
 .govuk-form-group {
@@ -989,6 +996,7 @@
 
 
 
+
 
 
 .govuk-grid-row {
@@ -1184,6 +1192,7 @@
 
 
 
+
 
 
 .govuk-main-wrapper {
@@ -1254,6 +1263,7 @@
 
 
 
+
 
 
 .govuk-template {
@@ -1262,6 +1272,10 @@
   -moz-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }
+.govuk-template--rebranded {
+  background-color: #f4f8fb;
+}
+
 @supports (position: -webkit-sticky) or (position: sticky) {
   .govuk-template {
     scroll-padding-top: 60px;
@@ -1326,6 +1340,7 @@
 
 
 
+
 
 
 .govuk-width-container {
@@ -2064,6 +2079,7 @@
 
 
 
+
 .govuk-date-input {
   font-size: 0;
 }
@@ -2213,8 +2229,12 @@
   background-color: #ffdd00;
   box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
   text-decoration: none;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
+}
+@supports not (text-wrap: balance) {
+  .govuk-error-summary__list a:focus {
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
 }
 .govuk-error-summary__list a:link, .govuk-error-summary__list a:visited {
   color: #d4351c;

data/app/assets/builds/katalyst/govuk/formbuilder.js

@@ -623,6 +623,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
@@ -681,7 +682,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/app/assets/builds/katalyst/govuk/formbuilder.min.js

@@ -18,7 +18,7 @@ class f extends l{constructor(e,t={}){super(e,t),this.debounceFormSubmitTimer=nu
  *
  * @preserve
  * @augments ConfigurableComponent<CharacterCountConfig>
- */f.moduleName="govuk-button",f.defaults=Object.freeze({preventDoubleClick:!1}),f.schema=Object.freeze({properties:{preventDoubleClick:{type:"boolean"}}});class v extends l{[c](e){let t={};return("maxwords"in e||"maxlength"in e)&&(t={maxlength:void 0,maxwords:void 0}),t}constructor(e,t={}){var o,s;super(e,t),this.$textarea=void 0,this.$visibleCountMessage=void 0,this.$screenReaderCountMessage=void 0,this.lastInputTimestamp=null,this.lastInputValue="",this.valueChecker=null,this.i18n=void 0,this.maxLength=void 0;const a=this.$root.querySelector(".govuk-js-character-count");if(!(a instanceof HTMLTextAreaElement||a instanceof HTMLInputElement))throw new r({component:v,element:a,expectedType:"HTMLTextareaElement or HTMLInputElement",identifier:"Form field (`.govuk-js-character-count`)"});const u=function(e,t){const n=[];for(const[o,s]of Object.entries(e)){const e=[];if(Array.isArray(s)){for(const{required:n,errorMessage:o}of s)n.every((e=>!!t[e]))||e.push(o);"anyOf"!==o||s.length-e.length>=1||n.push(...e)}}return n}(v.schema,this.config);if(u[0])throw new i(n(v,u[0]));this.i18n=new m(this.config.i18n,{locale:g(this.$root,"lang")}),this.maxLength=null!=(o=null!=(s=this.config.maxwords)?s:this.config.maxlength)?o:1/0,this.$textarea=a;const c=`${this.$textarea.id}-info`,l=document.getElementById(c);if(!l)throw new r({component:v,element:l,identifier:`Count message (\`id="${c}"\`)`});`${l.textContent}`.match(/^\s*$/)&&(l.textContent=this.i18n.t("textareaDescription",{count:this.maxLength})),this.$textarea.insertAdjacentElement("afterend",l);const h=document.createElement("div");h.className="govuk-character-count__sr-status govuk-visually-hidden",h.setAttribute("aria-live","polite"),this.$screenReaderCountMessage=h,l.insertAdjacentElement("afterend",h);const d=document.createElement("div");d.className=l.className,d.classList.add("govuk-character-count__status"),d.setAttribute("aria-hidden","true"),this.$visibleCountMessage=d,l.insertAdjacentElement("afterend",d),l.classList.add("govuk-visually-hidden"),this.$textarea.removeAttribute("maxlength"),this.bindChangeEvents(),window.addEventListener("pageshow",(()=>this.updateCountMessage())),this.updateCountMessage()}bindChangeEvents(){this.$textarea.addEventListener("keyup",(()=>this.handleKeyUp())),this.$textarea.addEventListener("focus",(()=>this.handleFocus())),this.$textarea.addEventListener("blur",(()=>this.handleBlur()))}handleKeyUp(){this.updateVisibleCountMessage(),this.lastInputTimestamp=Date.now()}handleFocus(){this.valueChecker=window.setInterval((()=>{(!this.lastInputTimestamp||Date.now()-500>=this.lastInputTimestamp)&&this.updateIfValueChanged()}),1e3)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker)}updateIfValueChanged(){this.$textarea.value!==this.lastInputValue&&(this.lastInputValue=this.$textarea.value,this.updateCountMessage())}updateCountMessage(){this.updateVisibleCountMessage(),this.updateScreenReaderCountMessage()}updateVisibleCountMessage(){const e=this.maxLength-this.count(this.$textarea.value)<0;this.$visibleCountMessage.classList.toggle("govuk-character-count__message--disabled",!this.isOverThreshold()),this.$textarea.classList.toggle("govuk-textarea--error",e),this.$visibleCountMessage.classList.toggle("govuk-error-message",e),this.$visibleCountMessage.classList.toggle("govuk-hint",!e),this.$visibleCountMessage.textContent=this.getCountMessage()}updateScreenReaderCountMessage(){this.isOverThreshold()?this.$screenReaderCountMessage.removeAttribute("aria-hidden"):this.$screenReaderCountMessage.setAttribute("aria-hidden","true"),this.$screenReaderCountMessage.textContent=this.getCountMessage()}count(e){if(this.config.maxwords){var t;return(null!=(t=e.match(/\S+/g))?t:[]).length}return e.length}getCountMessage(){const e=this.maxLength-this.count(this.$textarea.value),t=this.config.maxwords?"words":"characters";return this.formatCountMessage(e,t)}formatCountMessage(e,t){if(0===e)return this.i18n.t(`${t}AtLimit`);const n=e<0?"OverLimit":"UnderLimit";return this.i18n.t(`${t}${n}`,{count:Math.abs(e)})}isOverThreshold(){if(!this.config.threshold)return!0;const e=this.count(this.$textarea.value);return this.maxLength*this.config.threshold/100<=e}}v.moduleName="govuk-character-count",v.defaults=Object.freeze({threshold:0,i18n:{charactersUnderLimit:{one:"You have %{count} character remaining",other:"You have %{count} characters remaining"},charactersAtLimit:"You have 0 characters remaining",charactersOverLimit:{one:"You have %{count} character too many",other:"You have %{count} characters too many"},wordsUnderLimit:{one:"You have %{count} word remaining",other:"You have %{count} words remaining"},wordsAtLimit:"You have 0 words remaining",wordsOverLimit:{one:"You have %{count} word too many",other:"You have %{count} words too many"},textareaDescription:{other:""}}}),v.schema=Object.freeze({properties:{i18n:{type:"object"},maxwords:{type:"number"},maxlength:{type:"number"},threshold:{type:"number"}},anyOf:[{required:["maxwords"],errorMessage:'Either "maxlength" or "maxwords" must be provided'},{required:["maxlength"],errorMessage:'Either "maxlength" or "maxwords" must be provided'}]});
+ */f.moduleName="govuk-button",f.defaults=Object.freeze({preventDoubleClick:!1}),f.schema=Object.freeze({properties:{preventDoubleClick:{type:"boolean"}}});class v extends l{[c](e){let t={};return("maxwords"in e||"maxlength"in e)&&(t={maxlength:void 0,maxwords:void 0}),t}constructor(e,t={}){var o,s;super(e,t),this.$textarea=void 0,this.$visibleCountMessage=void 0,this.$screenReaderCountMessage=void 0,this.lastInputTimestamp=null,this.lastInputValue="",this.valueChecker=null,this.i18n=void 0,this.maxLength=void 0;const a=this.$root.querySelector(".govuk-js-character-count");if(!(a instanceof HTMLTextAreaElement||a instanceof HTMLInputElement))throw new r({component:v,element:a,expectedType:"HTMLTextareaElement or HTMLInputElement",identifier:"Form field (`.govuk-js-character-count`)"});const u=function(e,t){const n=[];for(const[o,s]of Object.entries(e)){const e=[];if(Array.isArray(s)){for(const{required:n,errorMessage:o}of s)n.every((e=>!!t[e]))||e.push(o);"anyOf"!==o||s.length-e.length>=1||n.push(...e)}}return n}(v.schema,this.config);if(u[0])throw new i(n(v,u[0]));this.i18n=new m(this.config.i18n,{locale:g(this.$root,"lang")}),this.maxLength=null!=(o=null!=(s=this.config.maxwords)?s:this.config.maxlength)?o:1/0,this.$textarea=a;const c=`${this.$textarea.id}-info`,l=document.getElementById(c);if(!l)throw new r({component:v,element:l,identifier:`Count message (\`id="${c}"\`)`});this.$errorMessage=this.$root.querySelector(".govuk-error-message"),`${l.textContent}`.match(/^\s*$/)&&(l.textContent=this.i18n.t("textareaDescription",{count:this.maxLength})),this.$textarea.insertAdjacentElement("afterend",l);const h=document.createElement("div");h.className="govuk-character-count__sr-status govuk-visually-hidden",h.setAttribute("aria-live","polite"),this.$screenReaderCountMessage=h,l.insertAdjacentElement("afterend",h);const d=document.createElement("div");d.className=l.className,d.classList.add("govuk-character-count__status"),d.setAttribute("aria-hidden","true"),this.$visibleCountMessage=d,l.insertAdjacentElement("afterend",d),l.classList.add("govuk-visually-hidden"),this.$textarea.removeAttribute("maxlength"),this.bindChangeEvents(),window.addEventListener("pageshow",(()=>this.updateCountMessage())),this.updateCountMessage()}bindChangeEvents(){this.$textarea.addEventListener("keyup",(()=>this.handleKeyUp())),this.$textarea.addEventListener("focus",(()=>this.handleFocus())),this.$textarea.addEventListener("blur",(()=>this.handleBlur()))}handleKeyUp(){this.updateVisibleCountMessage(),this.lastInputTimestamp=Date.now()}handleFocus(){this.valueChecker=window.setInterval((()=>{(!this.lastInputTimestamp||Date.now()-500>=this.lastInputTimestamp)&&this.updateIfValueChanged()}),1e3)}handleBlur(){this.valueChecker&&window.clearInterval(this.valueChecker)}updateIfValueChanged(){this.$textarea.value!==this.lastInputValue&&(this.lastInputValue=this.$textarea.value,this.updateCountMessage())}updateCountMessage(){this.updateVisibleCountMessage(),this.updateScreenReaderCountMessage()}updateVisibleCountMessage(){const e=this.maxLength-this.count(this.$textarea.value)<0;this.$visibleCountMessage.classList.toggle("govuk-character-count__message--disabled",!this.isOverThreshold()),this.$errorMessage||this.$textarea.classList.toggle("govuk-textarea--error",e),this.$visibleCountMessage.classList.toggle("govuk-error-message",e),this.$visibleCountMessage.classList.toggle("govuk-hint",!e),this.$visibleCountMessage.textContent=this.getCountMessage()}updateScreenReaderCountMessage(){this.isOverThreshold()?this.$screenReaderCountMessage.removeAttribute("aria-hidden"):this.$screenReaderCountMessage.setAttribute("aria-hidden","true"),this.$screenReaderCountMessage.textContent=this.getCountMessage()}count(e){if(this.config.maxwords){var t;return(null!=(t=e.match(/\S+/g))?t:[]).length}return e.length}getCountMessage(){const e=this.maxLength-this.count(this.$textarea.value),t=this.config.maxwords?"words":"characters";return this.formatCountMessage(e,t)}formatCountMessage(e,t){if(0===e)return this.i18n.t(`${t}AtLimit`);const n=e<0?"OverLimit":"UnderLimit";return this.i18n.t(`${t}${n}`,{count:Math.abs(e)})}isOverThreshold(){if(!this.config.threshold)return!0;const e=this.count(this.$textarea.value);return this.maxLength*this.config.threshold/100<=e}}v.moduleName="govuk-character-count",v.defaults=Object.freeze({threshold:0,i18n:{charactersUnderLimit:{one:"You have %{count} character remaining",other:"You have %{count} characters remaining"},charactersAtLimit:"You have 0 characters remaining",charactersOverLimit:{one:"You have %{count} character too many",other:"You have %{count} characters too many"},wordsUnderLimit:{one:"You have %{count} word remaining",other:"You have %{count} words remaining"},wordsAtLimit:"You have 0 words remaining",wordsOverLimit:{one:"You have %{count} word too many",other:"You have %{count} words too many"},textareaDescription:{other:""}}}),v.schema=Object.freeze({properties:{i18n:{type:"object"},maxwords:{type:"number"},maxlength:{type:"number"},threshold:{type:"number"}},anyOf:[{required:["maxwords"],errorMessage:'Either "maxlength" or "maxwords" must be provided'},{required:["maxlength"],errorMessage:'Either "maxlength" or "maxwords" must be provided'}]});
 /**
  * Checkboxes component
  *

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/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/service-navigation/_index.scss

@@ -1,6 +1,6 @@
 @include govuk-exports("govuk/component/service-navigation") {
   $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $govuk-service-navigation-background: $govuk-canvas-background-colour;
+  $govuk-service-navigation-background: govuk-colour("light-grey");
   $govuk-service-navigation-border-colour: $govuk-border-colour;
 
   // We make the link colour a little darker than normal here so that it has
@@ -8,8 +8,18 @@
   $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
 
   .govuk-service-navigation {
-    border-bottom: 1px solid $govuk-service-navigation-border-colour;
-    background-color: $govuk-service-navigation-background;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-service-navigation-border-colour,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
+    @include _govuk-rebrand(
+      "background-color",
+      $from: $govuk-service-navigation-background,
+      $to: $_govuk-rebrand-template-background-colour
+    );
   }
 
   .govuk-service-navigation__container {
@@ -36,6 +46,11 @@
       margin-bottom: 0;
       padding: govuk-spacing(4) 0;
 
+      @include _govuk-rebrand {
+        padding: govuk-spacing(3) 0;
+        line-height: 1.5;
+      }
+
       &:not(:last-child) {
         @include govuk-responsive-margin(6, $direction: right);
       }
@@ -52,7 +67,11 @@
     }
 
     @include govuk-media-query($from: tablet) {
-      padding-bottom: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width;
+      @include _govuk-rebrand(
+        "padding-bottom",
+        $from: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width,
+        $to: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width
+      );
       border-bottom-width: $govuk-service-navigation-active-link-border-width;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/core/_govuk-frontend-properties.scss

@@ -1,7 +1,7 @@
 :root {
   // This variable is automatically overwritten during builds and releases.
   // It doesn't need to be updated manually.
-  --govuk-frontend-version: "5.9.0";
+  --govuk-frontend-version: "5.10.2";
 
   // CSS custom property for each breakpoint
   @each $name, $value in $govuk-breakpoints {

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

@@ -66,6 +66,17 @@
     @error "Unknown organisation `#{$organisation}`";
   }
 
+  // Output a deprecation warning if the legacy colour palette is being used.
+  // Remove in next major version.
+  $is-legacy: $govuk-colours-organisations == $_govuk-legacy-organisation-colours;
+  @if $is-legacy and _should-warn("legacy-organisation-colours") {
+    @warn _warning-text("legacy-organisation-colours",
+      "We've updated the organisation colour palette. Opt in to the new " +
+      "colours using `$govuk-new-organisation-colours: true`. The old " +
+      "palette is deprecated and we'll remove it in the next major version."
+    );
+  }
+
   // Output a warning if $websafe is set.
   @if $websafe and _should-warn("organisation-colour-websafe-param") {
     @warn _warning-text("organisation-colour-websafe-param",

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

@@ -24,10 +24,20 @@
   // box shadow adds the "underline"
   text-decoration: none;
 
-  // When a focused box is broken by e.g. a line break, ensure that the
-  // box-shadow is applied to each fragment independently.
-  -webkit-box-decoration-break: clone;
-          box-decoration-break: clone;
+  // Fixes an issue in Chromium 108–111 where the box-shadow on the focus state
+  // is missing on links that wrap across multiple lines [1].
+  //
+  // However, text-wrap: balance doesn't play nicely with box-decoration-break:
+  // clone, causing links to re-flow when focused [2]. As text-wrap: balance
+  // wasn't introduced until Chromium 114 we can use it as a way to target
+  // this fix to just 108–111.
+  //
+  // [1]: http://crbug.com/40884971
+  // [2]: https://github.com/alphagov/govuk-frontend/issues/5878
+  @supports not (text-wrap: balance) {
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+  }
 }
 
 /// Focused box

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

@@ -190,7 +190,7 @@
   // 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} {
+      @if not $font-map and "#{$font-size}" == "#{$size}" {
         $font-map: map-get($govuk-typography-scale, $font-size);
       }
     }

data/node_modules/govuk-frontend/dist/govuk/objects/_template.scss

@@ -5,7 +5,11 @@
   .govuk-template {
     // Set the overall page background colour to the same colour as used by the
     // footer to give the illusion of a long footer.
-    background-color: $govuk-canvas-background-colour;
+    @include _govuk-rebrand(
+      background-color,
+      $from: $govuk-template-background-colour,
+      $to: $_govuk-rebrand-template-background-colour
+    );
 
     // Prevent automatic text sizing, as we already cater for small devices and
     // would like the browser to stay on 100% text zoom by default.

data/node_modules/govuk-frontend/dist/govuk/settings/_colours-applied.scss

@@ -29,9 +29,31 @@ $govuk-text-colour: govuk-colour("black") !default;
 ///
 /// @type Colour
 /// @access public
-
+/// @deprecated "$govuk-canvas-background-colour has been deprecated and will be removed in the next major
+/// version. Use `$govuk-template-background-colour` if you want to change the background of
+/// the `<html>` element and background colour of elements that need to match for visual
+/// continuity.
 $govuk-canvas-background-colour: govuk-colour("light-grey") !default;
 
+// Output a deprecation warning if $govuk-canvas-background-colour is being overridden
+// Remove in next major version.
+@if $govuk-canvas-background-colour != govuk-colour("light-grey") {
+  @include _warning(
+    "$govuk-canvas-background-colour",
+    "$govuk-canvas-background-colour has been deprecated and will be removed in the next major version."
+  );
+}
+
+/// Template background colour
+///
+/// Used by components that want to give the illusion of extending
+/// the template background (such as the footer and cookie banner).
+///
+/// @type Colour
+/// @access public
+
+$govuk-template-background-colour: govuk-colour("light-grey") !default;
+
 /// Body background colour
 ///
 /// @type Colour
@@ -154,4 +176,20 @@ $govuk-link-hover-colour: govuk-colour("dark-blue") !default;
 
 $govuk-link-active-colour: govuk-colour("black") !default;
 
+// =============================================================================
+// Brand refresh
+// =============================================================================
+
+/// Updated template background colour
+///
+/// @type Colour
+/// @access private
+$_govuk-rebrand-template-background-colour: #f4f8fb; // Blue tint 95%
+
+/// Border colour for areas on a light-blue background
+///
+/// @type Colour
+/// @access private
+$_govuk-rebrand-border-colour-on-blue-tint-95: #8eb8dc; // Blue tint 50%
+
 /*# sourceMappingURL=_colours-applied.scss.map */

data/node_modules/govuk-frontend/dist/govuk/settings/_colours-organisations.scss

@@ -359,15 +359,6 @@ $govuk-colours-organisations: $_govuk-legacy-organisation-colours !default;
   $govuk-colours-organisations: $_govuk-organisation-colours;
 }
 
-// Output a deprecation warning if the legacy colour palette is being used.
-// Remove in next major version.
-@if $govuk-colours-organisations == $_govuk-legacy-organisation-colours {
-  @include _warning(
-    "legacy-organisation-colours",
-    "The legacy organisation colour palette has been deprecated and will be removed in the next major version."
-  );
-}
-
 /// Organisation colour aliases
 ///
 /// Some organisations have been renamed within our code over time. Here we

data/node_modules/govuk-frontend/dist/govuk/tools/_index.scss

@@ -3,5 +3,6 @@
 @import "image-url";
 @import "px-to-em";
 @import "px-to-rem";
+@import "rebrand";
 
 /*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/tools/_rebrand.scss

@@ -0,0 +1,65 @@
+////
+/// @group tools
+////
+
+/// Wraps rebranded properties in the feature flag selector
+///
+/// @example scss - Wrap a block of multiple properties
+///   .foo {
+///     border-width: 1px;
+///     border-colour: #fff;
+///
+///     @include _govuk-rebrand() {
+///       border-width: 10px;
+///       border-colour: #000;
+///     }
+///   }
+///
+/// @example scss - Wrap a single property
+///   .foo {
+///     @include _govuk-rebrand("background-color", $from: #fff, $to: #000)
+///   }
+///
+///
+/// @param {String} $property - The name of the property being rebranded
+/// @param {String} $from - The original value of the property
+/// @param {String} $to - The rebranded value of the property
+/// @throw if `$property` is set but `$from` or `$to` are missing
+/// @access private
+@mixin _govuk-rebrand($property: null, $from: null, $to: null) {
+  @if $property {
+    @if not $from {
+      @error "`_govuk-rebrand` needs the original value, `$from`";
+    }
+
+    @if not $to {
+      @error "`_govuk-rebrand` needs the rebranded value, `$to`";
+    }
+
+    #{$property}: #{$from};
+
+    @include _govuk-rebrand-wrapper {
+      #{$property}: #{$to};
+    }
+  } @else {
+    @include _govuk-rebrand-wrapper {
+      @content;
+    }
+  }
+}
+
+@mixin _govuk-rebrand-wrapper() {
+  $selector: "#{&}";
+
+  @if $selector == ".govuk-template" {
+    @at-root .govuk-template--rebranded {
+      @content;
+    }
+  } @else {
+    .govuk-template--rebranded & {
+      @content;
+    }
+  }
+}
+
+/*# sourceMappingURL=_rebrand.scss.map */

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-govuk-formbuilder
 version: !ruby/object:Gem::Version
-  version: 1.17.1
+  version: 1.18.1
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -186,6 +186,7 @@ files:
 - node_modules/govuk-frontend/dist/govuk/tools/_index.scss
 - node_modules/govuk-frontend/dist/govuk/tools/_px-to-em.scss
 - node_modules/govuk-frontend/dist/govuk/tools/_px-to-rem.scss
+- node_modules/govuk-frontend/dist/govuk/tools/_rebrand.scss
 - node_modules/govuk-frontend/dist/govuk/utilities/_all.scss
 - node_modules/govuk-frontend/dist/govuk/utilities/_clearfix.scss
 - node_modules/govuk-frontend/dist/govuk/utilities/_index.scss