govuk_tech_docs 3.0.1 → 3.1.0

data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.Accordion', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Accordion = factory());
 }(this, (function () { 'use strict';
 
 /**
@@ -762,19 +762,28 @@ function Accordion ($module) {
   this.$module = $module;
   this.moduleId = $module.getAttribute('id');
   this.$sections = $module.querySelectorAll('.govuk-accordion__section');
-  this.$openAllButton = '';
+  this.$showAllButton = '';
   this.browserSupportsSessionStorage = helper.checkForSessionStorage();
 
   this.controlsClass = 'govuk-accordion__controls';
-  this.openAllClass = 'govuk-accordion__open-all';
-  this.iconClass = 'govuk-accordion__icon';
+  this.showAllClass = 'govuk-accordion__show-all';
+  this.showAllTextClass = 'govuk-accordion__show-all-text';
 
+  this.sectionExpandedClass = 'govuk-accordion__section--expanded';
+  this.sectionButtonClass = 'govuk-accordion__section-button';
   this.sectionHeaderClass = 'govuk-accordion__section-header';
-  this.sectionHeaderFocusedClass = 'govuk-accordion__section-header--focused';
   this.sectionHeadingClass = 'govuk-accordion__section-heading';
+  this.sectionHeadingTextClass = 'govuk-accordion__section-heading-text';
+  this.sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus';
+
+  this.sectionShowHideToggleClass = 'govuk-accordion__section-toggle';
+  this.sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus';
+  this.sectionShowHideTextClass = 'govuk-accordion__section-toggle-text';
+  this.upChevronIconClass = 'govuk-accordion-nav__chevron';
+  this.downChevronIconClass = 'govuk-accordion-nav__chevron--down';
+
   this.sectionSummaryClass = 'govuk-accordion__section-summary';
-  this.sectionButtonClass = 'govuk-accordion__section-button';
-  this.sectionExpandedClass = 'govuk-accordion__section--expanded';
+  this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus';
 }
 
 // Initialize component
@@ -785,32 +794,39 @@ Accordion.prototype.init = function () {
   }
 
   this.initControls();
-
   this.initSectionHeaders();
 
-  // See if "Open all" button text should be updated
+  // See if "Show all sections" button text should be updated
   var areAllSectionsOpen = this.checkIfAllSectionsOpen();
-  this.updateOpenAllButton(areAllSectionsOpen);
+  this.updateShowAllButton(areAllSectionsOpen);
 };
 
 // Initialise controls and set attributes
 Accordion.prototype.initControls = function () {
-  // Create "Open all" button and set attributes
-  this.$openAllButton = document.createElement('button');
-  this.$openAllButton.setAttribute('type', 'button');
-  this.$openAllButton.innerHTML = 'Open all <span class="govuk-visually-hidden">sections</span>';
-  this.$openAllButton.setAttribute('class', this.openAllClass);
-  this.$openAllButton.setAttribute('aria-expanded', 'false');
-  this.$openAllButton.setAttribute('type', 'button');
+  // Create "Show all" button and set attributes
+  this.$showAllButton = document.createElement('button');
+  this.$showAllButton.setAttribute('type', 'button');
+  this.$showAllButton.setAttribute('class', this.showAllClass);
+  this.$showAllButton.setAttribute('aria-expanded', 'false');
 
-  // Create control wrapper and add controls to it
-  var accordionControls = document.createElement('div');
-  accordionControls.setAttribute('class', this.controlsClass);
-  accordionControls.appendChild(this.$openAllButton);
-  this.$module.insertBefore(accordionControls, this.$module.firstChild);
+  // Create icon, add to element
+  var $icon = document.createElement('span');
+  $icon.classList.add(this.upChevronIconClass);
+  this.$showAllButton.appendChild($icon);
 
-  // Handle events for the controls
-  this.$openAllButton.addEventListener('click', this.onOpenOrCloseAllToggle.bind(this));
+  // Create control wrapper and add controls to it
+  var $accordionControls = document.createElement('div');
+  $accordionControls.setAttribute('class', this.controlsClass);
+  $accordionControls.appendChild(this.$showAllButton);
+  this.$module.insertBefore($accordionControls, this.$module.firstChild);
+
+  // Build additional wrapper for Show all toggle text and place after icon
+  var $wrappershowAllText = document.createElement('span');
+  $wrappershowAllText.classList.add(this.showAllTextClass);
+  this.$showAllButton.appendChild($wrappershowAllText);
+
+  // Handle click events on the show/hide all button
+  this.$showAllButton.addEventListener('click', this.onShowOrHideAllToggle.bind(this));
 };
 
 // Initialise section headers
@@ -818,13 +834,12 @@ Accordion.prototype.initSectionHeaders = function () {
   // Loop through section headers
   nodeListForEach(this.$sections, function ($section, i) {
     // Set header attributes
-    var header = $section.querySelector('.' + this.sectionHeaderClass);
-    this.initHeaderAttributes(header, i);
-
+    var $header = $section.querySelector('.' + this.sectionHeaderClass);
+    this.constructHeaderMarkup($header, i);
     this.setExpanded(this.isExpanded($section), $section);
 
     // Handle events
-    header.addEventListener('click', this.onSectionToggle.bind(this, $section));
+    $header.addEventListener('click', this.onSectionToggle.bind(this, $section));
 
     // See if there is any state stored in sessionStorage and set the sections to
     // open or closed.
@@ -832,51 +847,100 @@ Accordion.prototype.initSectionHeaders = function () {
   }.bind(this));
 };
 
-// Set individual header attributes
-Accordion.prototype.initHeaderAttributes = function ($headerWrapper, index) {
-  var $module = this;
+Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
   var $span = $headerWrapper.querySelector('.' + this.sectionButtonClass);
   var $heading = $headerWrapper.querySelector('.' + this.sectionHeadingClass);
   var $summary = $headerWrapper.querySelector('.' + this.sectionSummaryClass);
 
-  // Copy existing span element to an actual button element, for improved accessibility.
+  // Create a button element that will replace the '.govuk-accordion__section-button' span
   var $button = document.createElement('button');
   $button.setAttribute('type', 'button');
-  $button.setAttribute('id', this.moduleId + '-heading-' + (index + 1));
   $button.setAttribute('aria-controls', this.moduleId + '-content-' + (index + 1));
 
   // Copy all attributes (https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes) from $span to $button
   for (var i = 0; i < $span.attributes.length; i++) {
     var attr = $span.attributes.item(i);
-    $button.setAttribute(attr.nodeName, attr.nodeValue);
+    // Add all attributes but not ID as this is being added to
+    // the section heading ($headingText)
+    if (attr.nodeName !== 'id') {
+      $button.setAttribute(attr.nodeName, attr.nodeValue);
+    }
   }
 
-  $button.addEventListener('focusin', function (e) {
-    if (!$headerWrapper.classList.contains($module.sectionHeaderFocusedClass)) {
-      $headerWrapper.className += ' ' + $module.sectionHeaderFocusedClass;
+  // Create container for heading text so it can be styled
+  var $headingText = document.createElement('span');
+  $headingText.classList.add(this.sectionHeadingTextClass);
+  // Copy the span ID to the heading text to allow it to be referenced by `aria-labelledby` on the
+  // hidden content area without "Show this section"
+  $headingText.id = $span.id;
+
+  // Create an inner heading text container to limit the width of the focus state
+  var $headingTextFocus = document.createElement('span');
+  $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass);
+  $headingText.appendChild($headingTextFocus);
+  // span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
+  $headingTextFocus.innerHTML = $span.innerHTML;
+
+  // Create container for show / hide icons and text.
+  var $showToggle = document.createElement('span');
+  $showToggle.classList.add(this.sectionShowHideToggleClass);
+  // Tell Google not to index the 'show' text as part of the heading
+  // For the snippet to work with JavaScript, it must be added before adding the page element to the
+  // page's DOM. See https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#data-nosnippet-attr
+  $showToggle.setAttribute('data-nosnippet', '');
+  // Create an inner container to limit the width of the focus state
+  var $showToggleFocus = document.createElement('span');
+  $showToggleFocus.classList.add(this.sectionShowHideToggleFocusClass);
+  $showToggle.appendChild($showToggleFocus);
+  // Create wrapper for the show / hide text. Append text after the show/hide icon
+  var $showToggleText = document.createElement('span');
+  var $icon = document.createElement('span');
+  $icon.classList.add(this.upChevronIconClass);
+  $showToggleFocus.appendChild($icon);
+  $showToggleText.classList.add(this.sectionShowHideTextClass);
+  $showToggleFocus.appendChild($showToggleText);
+
+  // Append elements to the button:
+  // 1. Heading text
+  // 2. Punctuation
+  // 3. (Optional: Summary line followed by punctuation)
+  // 4. Show / hide toggle
+  $button.appendChild($headingText);
+  $button.appendChild(this.getButtonPunctuationEl());
+
+  // If summary content exists add to DOM in correct order
+  if (typeof ($summary) !== 'undefined' && $summary !== null) {
+    // Create a new `span` element and copy the summary line content from the original `div` to the
+    // new `span`
+    // This is because the summary line text is now inside a button element, which can only contain
+    // phrasing content
+    var $summarySpan = document.createElement('span');
+    // Create an inner summary container to limit the width of the summary focus state
+    var $summarySpanFocus = document.createElement('span');
+    $summarySpanFocus.classList.add(this.sectionSummaryFocusClass);
+    $summarySpan.appendChild($summarySpanFocus);
+
+    // Get original attributes, and pass them to the replacement
+    for (var j = 0, l = $summary.attributes.length; j < l; ++j) {
+      var nodeName = $summary.attributes.item(j).nodeName;
+      var nodeValue = $summary.attributes.item(j).nodeValue;
+      $summarySpan.setAttribute(nodeName, nodeValue);
     }
-  });
 
-  $button.addEventListener('blur', function (e) {
-    $headerWrapper.classList.remove($module.sectionHeaderFocusedClass);
-  });
+    // Copy original contents of summary to the new summary span
+    $summarySpanFocus.innerHTML = $summary.innerHTML;
 
-  if (typeof ($summary) !== 'undefined' && $summary !== null) {
-    $button.setAttribute('aria-describedby', this.moduleId + '-summary-' + (index + 1));
+    // Replace the original summary `div` with the new summary `span`
+    $summary.parentNode.replaceChild($summarySpan, $summary);
+
+    $button.appendChild($summarySpan);
+    $button.appendChild(this.getButtonPunctuationEl());
   }
 
-  // $span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
-  $button.innerHTML = $span.innerHTML;
+  $button.appendChild($showToggle);
 
   $heading.removeChild($span);
   $heading.appendChild($button);
-
-  // Add "+/-" icon
-  var icon = document.createElement('span');
-  icon.className = this.iconClass;
-  icon.setAttribute('aria-hidden', 'true');
-
-  $button.appendChild(icon);
 };
 
 // When section toggled, set and store state
@@ -889,10 +953,9 @@ Accordion.prototype.onSectionToggle = function ($section) {
 };
 
 // When Open/Close All toggled, set and store state
-Accordion.prototype.onOpenOrCloseAllToggle = function () {
+Accordion.prototype.onShowOrHideAllToggle = function () {
   var $module = this;
   var $sections = this.$sections;
-
   var nowExpanded = !this.checkIfAllSectionsOpen();
 
   nodeListForEach($sections, function ($section) {
@@ -901,23 +964,37 @@ Accordion.prototype.onOpenOrCloseAllToggle = function () {
     $module.storeState($section);
   });
 
-  $module.updateOpenAllButton(nowExpanded);
+  $module.updateShowAllButton(nowExpanded);
 };
 
 // Set section attributes when opened/closed
 Accordion.prototype.setExpanded = function (expanded, $section) {
+  var $icon = $section.querySelector('.' + this.upChevronIconClass);
+  var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass);
   var $button = $section.querySelector('.' + this.sectionButtonClass);
+  var $newButtonText = expanded ? 'Hide' : 'Show';
+
+  // Build additional copy of "this section" for assistive technology and place inside toggle link
+  var $visuallyHiddenText = document.createElement('span');
+  $visuallyHiddenText.classList.add('govuk-visually-hidden');
+  $visuallyHiddenText.innerHTML = ' this section';
+
+  $showHideText.innerHTML = $newButtonText;
+  $showHideText.appendChild($visuallyHiddenText);
   $button.setAttribute('aria-expanded', expanded);
 
+  // Swap icon, change class
   if (expanded) {
     $section.classList.add(this.sectionExpandedClass);
+    $icon.classList.remove(this.downChevronIconClass);
   } else {
     $section.classList.remove(this.sectionExpandedClass);
+    $icon.classList.add(this.downChevronIconClass);
   }
 
-  // See if "Open all" button text should be updated
+  // See if "Show all sections" button text should be updated
   var areAllSectionsOpen = this.checkIfAllSectionsOpen();
-  this.updateOpenAllButton(areAllSectionsOpen);
+  this.updateShowAllButton(areAllSectionsOpen);
 };
 
 // Get state of section
@@ -936,12 +1013,20 @@ Accordion.prototype.checkIfAllSectionsOpen = function () {
   return areAllSectionsOpen
 };
 
-// Update "Open all" button
-Accordion.prototype.updateOpenAllButton = function (expanded) {
-  var newButtonText = expanded ? 'Close all' : 'Open all';
-  newButtonText += '<span class="govuk-visually-hidden"> sections</span>';
-  this.$openAllButton.setAttribute('aria-expanded', expanded);
-  this.$openAllButton.innerHTML = newButtonText;
+// Update "Show all sections" button
+Accordion.prototype.updateShowAllButton = function (expanded) {
+  var $showAllIcon = this.$showAllButton.querySelector('.' + this.upChevronIconClass);
+  var $showAllText = this.$showAllButton.querySelector('.' + this.showAllTextClass);
+  var newButtonText = expanded ? 'Hide all sections' : 'Show all sections';
+  this.$showAllButton.setAttribute('aria-expanded', expanded);
+  $showAllText.innerHTML = newButtonText;
+
+  // Swap icon, toggle class
+  if (expanded) {
+    $showAllIcon.classList.remove(this.downChevronIconClass);
+  } else {
+    $showAllIcon.classList.add(this.downChevronIconClass);
+  }
 };
 
 // Check for `window.sessionStorage`, and that it actually works.
@@ -965,7 +1050,7 @@ var helper = {
 // Set the state of the accordions in sessionStorage
 Accordion.prototype.storeState = function ($section) {
   if (this.browserSupportsSessionStorage) {
-    // We need a unique way of identifying each content in the accordion. Since
+    // We need a unique way of identifying each content in the Accordion. Since
     // an `#id` should be unique and an `id` is required for `aria-` attributes
     // `id` can be safely used.
     var $button = $section.querySelector('.' + this.sectionButtonClass);
@@ -1006,6 +1091,25 @@ Accordion.prototype.setInitialState = function ($section) {
   }
 };
 
+/**
+* Create an element to improve semantics of the section button with punctuation
+* @return {object} DOM element
+*
+* Used to add pause (with a comma) for assistive technology.
+* Example: [heading]Section A ,[pause] Show this section.
+* https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/
+*
+* Adding punctuation to the button can also improve its general semantics by dividing its contents
+* into thematic chunks.
+* See https://github.com/alphagov/govuk-frontend/issues/2327#issuecomment-922957442
+*/
+Accordion.prototype.getButtonPunctuationEl = function () {
+  var $punctuationEl = document.createElement('span');
+  $punctuationEl.classList.add('govuk-visually-hidden', 'govuk-accordion__section-heading-divider');
+  $punctuationEl.innerHTML = ', ';
+  return $punctuationEl
+};
+
 return Accordion;
 
 })));

data/node_modules/govuk-frontend/govuk/components/button/_index.scss

@@ -158,10 +158,6 @@
       cursor: default;
     }
 
-    &:focus {
-      outline: none;
-    }
-
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@@ -270,6 +266,9 @@
     -webkit-align-self: center;
         -ms-flex-item-align: center;
             align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   @if $govuk-use-legacy-font {

data/node_modules/govuk-frontend/govuk/components/button/button.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.Button', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Button = factory());
 }(this, (function () { 'use strict';
 
 (function(undefined) {

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

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.CharacterCount', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.CharacterCount = factory());
 }(this, (function () { 'use strict';
 
 (function(undefined) {
@@ -1018,7 +1018,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
+    this.$countMessage = document.getElementById(this.$textarea.id + '-info');
   }
 }
 

data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss

@@ -127,6 +127,20 @@
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 

data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.Checkboxes', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Checkboxes = factory());
 }(this, (function () { 'use strict';
 
 (function(undefined) {
@@ -1056,7 +1056,7 @@ Checkboxes.prototype.init = function () {
 
     // Skip checkboxes without data-aria-controls attributes, or where the
     // target element does not exist.
-    if (!target || !$module.querySelector('#' + target)) {
+    if (!target || !document.getElementById(target)) {
       return
     }
 
@@ -1100,7 +1100,7 @@ Checkboxes.prototype.syncAllConditionalReveals = function () {
  * @param {HTMLInputElement} $input Checkbox input
  */
 Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
-  var $target = this.$module.querySelector('#' + $input.getAttribute('aria-controls'));
+  var $target = document.getElementById($input.getAttribute('aria-controls'));
 
   if ($target && $target.classList.contains('govuk-checkboxes__conditional')) {
     var inputIsChecked = $input.checked;
@@ -1123,10 +1123,9 @@ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
     var hasSameFormOwner = ($input.form === $inputWithSameName.form);
     if (hasSameFormOwner && $inputWithSameName !== $input) {
       $inputWithSameName.checked = false;
+      this.syncConditionalRevealWithInputState($inputWithSameName);
     }
-  });
-
-  this.syncAllConditionalReveals();
+  }.bind(this));
 };
 
 /**
@@ -1145,10 +1144,9 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
     var hasSameFormOwner = ($input.form === $exclusiveInput.form);
     if (hasSameFormOwner) {
       $exclusiveInput.checked = false;
+      this.syncConditionalRevealWithInputState($exclusiveInput);
     }
-  });
-
-  this.syncAllConditionalReveals();
+  }.bind(this));
 };
 
 /**

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

@@ -4,8 +4,6 @@
   $border-bottom-width: govuk-spacing(2);
 
   .govuk-cookie-banner {
-    @include govuk-font($size: 19);
-
     padding-top: govuk-spacing(4);
     // The component does not set bottom spacing.
     // The bottom spacing should be created by the items inside the component.

data/node_modules/govuk-frontend/govuk/components/details/_index.scss

@@ -71,7 +71,8 @@
   }
 
   .govuk-details__text {
-    padding: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
     padding-left: govuk-spacing(4);
     border-left: $govuk-border-width solid $govuk-border-colour;
   }

data/node_modules/govuk-frontend/govuk/components/details/details.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.Details', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.Details = factory());
 }(this, (function () { 'use strict';
 
 (function(undefined) {

data/node_modules/govuk-frontend/govuk/components/error-message/_index.scss

@@ -3,6 +3,7 @@
     @include govuk-font($size: 19, $weight: bold);
 
     display: block;
+    margin-top: 0; // Reset any default browser margins for paragraphs
     margin-bottom: govuk-spacing(3);
     clear: both;
 

data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
-	(global.GOVUKFrontend = factory());
+	typeof define === 'function' && define.amd ? define('GOVUKFrontend.ErrorSummary', factory) :
+	(global.GOVUKFrontend = global.GOVUKFrontend || {}, global.GOVUKFrontend.ErrorSummary = factory());
 }(this, (function () { 'use strict';
 
 (function(undefined) {

data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss

@@ -8,6 +8,7 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
+    max-width: 100%;
     margin-left: -$component-padding;
     padding: $component-padding;
 

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

@@ -111,6 +111,9 @@
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   .govuk-footer__licence-description {
@@ -149,8 +152,9 @@
   }
 
   .govuk-footer__heading {
-    @include govuk-responsive-margin(7, "bottom");
+    margin-bottom: govuk-spacing(6);
     padding-bottom: govuk-spacing(4);
+
     @include govuk-media-query ($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
@@ -158,50 +162,15 @@
   }
 
   .govuk-footer__navigation {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex; // Support: Flexbox
+    @include govuk-clearfix;
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap; // Support: Flexbox
   }
 
   .govuk-footer__section {
     display: inline-block;
-    margin-right: $govuk-gutter-half;
     margin-bottom: $govuk-gutter;
-    margin-left: $govuk-gutter-half;
     vertical-align: top;
-    // Ensure columns take up equal width (typically one-half:one-half)
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1; // Support: Flexbox
-    -webkit-flex-shrink: 1;
-        -ms-flex-negative: 1;
-            flex-shrink: 1; // Support: Flexbox
-    @include govuk-media-query ($until: desktop) {
-      // Make sure columns do not drop below 200px in width
-      // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -webkit-flex-basis: 200px;
-          -ms-flex-preferred-size: 200px;
-              flex-basis: 200px; // Support: Flexbox
-    }
-  }
-
-  // If there are only two sections, set the layout to be two-third:one-third on desktop
-  @include govuk-media-query ($from: desktop) {
-    // We match the first section with `:first-child`.
-    // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
-    .govuk-footer__section:first-child:nth-last-child(2) {
-      -webkit-box-flex: 2;
-      -webkit-flex-grow: 2;
-          -ms-flex-positive: 2;
-              flex-grow: 2; // Support: Flexbox
-    }
   }
 
   .govuk-footer__list {

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

@@ -207,8 +207,13 @@
   }
 
   .govuk-header__navigation {
-    @include govuk-responsive-margin(2, "bottom");
-    display: block;
+    @include govuk-media-query ($from: desktop) {
+      margin-bottom: govuk-spacing(2);
+    }
+  }
+
+  .govuk-header__navigation-list {
+    // Reset user-agent default list styles
     margin: 0;
     padding: 0;
     list-style: none;
@@ -222,14 +227,14 @@
       }
     }
 
-    .govuk-header__navigation {
+    .govuk-header__navigation-list {
       display: none;
       @include govuk-media-query ($from: desktop) {
         display: block;
       }
     }
 
-    .govuk-header__navigation--open {
+    .govuk-header__navigation-list--open {
       display: block;
     }
   }
@@ -281,6 +286,7 @@
 
   .govuk-header__navigation-item:last-child {
     margin-right: 0;
+    border-bottom: 0;
   }
 
   @include govuk-media-query($media-type: print) {