govuk_tech_docs 5.2.1 → 6.0.0.beta

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js

@@ -31,6 +31,12 @@
     }
     return $scope.classList.contains('govuk-frontend-supported');
   }
+  function isArray(option) {
+    return Array.isArray(option);
+  }
+  function isObject(option) {
+    return !!option && typeof option === 'object' && !isArray(option);
+  }
   function formatErrorMessage(Component, message) {
     return `${Component.moduleName}: ${message}`;
   }
@@ -38,9 +44,6 @@
    * @typedef ComponentWithModuleName
    * @property {string} moduleName - Name of the component
    */
-  /**
-   * @import { ObjectNested } from './configuration.mjs'
-   */
 
   class GOVUKFrontendError extends Error {
     constructor(...args) {
@@ -63,7 +66,7 @@
   class ElementError extends GOVUKFrontendError {
     constructor(messageOrOptions) {
       let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-      if (typeof messageOrOptions === 'object') {
+      if (isObject(messageOrOptions)) {
         const {
           component,
           identifier,
@@ -72,7 +75,9 @@
         } = messageOrOptions;
         message = identifier;
         message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
-        message = formatErrorMessage(component, message);
+        if (component) {
+          message = formatErrorMessage(component, message);
+        }
       }
       super(message);
       this.name = 'ElementError';
@@ -205,9 +210,9 @@
       }
       if (this.mql.matches) {
         this.$menu.removeAttribute('hidden');
-        this.$menuButton.setAttribute('hidden', '');
+        setAttributes(this.$menuButton, attributesForHidingButton);
       } else {
-        this.$menuButton.removeAttribute('hidden');
+        removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
         this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
         if (this.menuIsOpen) {
           this.$menu.removeAttribute('hidden');
@@ -222,6 +227,34 @@
     }
   }
   ServiceNavigation.moduleName = 'govuk-service-navigation';
+  const attributesForHidingButton = {
+    hidden: '',
+    'aria-hidden': 'true'
+  };
+
+  /**
+   * Sets a group of attributes on the given element
+   *
+   * @param {Element} $element - The element to set the attribute on
+   * @param {{[attributeName: string]: string}} attributes - The attributes to set
+   */
+  function setAttributes($element, attributes) {
+    for (const attributeName in attributes) {
+      $element.setAttribute(attributeName, attributes[attributeName]);
+    }
+  }
+
+  /**
+   * Removes a list of attributes from the given element
+   *
+   * @param {Element} $element - The element to remove the attributes from
+   * @param {string[]} attributeNames - The names of the attributes to remove
+   */
+  function removeAttributes($element, attributeNames) {
+    for (const attributeName of attributeNames) {
+      $element.removeAttribute(attributeName);
+    }
+  }
 
   exports.ServiceNavigation = ServiceNavigation;
 

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs

@@ -25,6 +25,12 @@ function isSupported($scope = document.body) {
   }
   return $scope.classList.contains('govuk-frontend-supported');
 }
+function isArray(option) {
+  return Array.isArray(option);
+}
+function isObject(option) {
+  return !!option && typeof option === 'object' && !isArray(option);
+}
 function formatErrorMessage(Component, message) {
   return `${Component.moduleName}: ${message}`;
 }
@@ -32,9 +38,6 @@ function formatErrorMessage(Component, message) {
  * @typedef ComponentWithModuleName
  * @property {string} moduleName - Name of the component
  */
-/**
- * @import { ObjectNested } from './configuration.mjs'
- */
 
 class GOVUKFrontendError extends Error {
   constructor(...args) {
@@ -57,7 +60,7 @@ class SupportError extends GOVUKFrontendError {
 class ElementError extends GOVUKFrontendError {
   constructor(messageOrOptions) {
     let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-    if (typeof messageOrOptions === 'object') {
+    if (isObject(messageOrOptions)) {
       const {
         component,
         identifier,
@@ -66,7 +69,9 @@ class ElementError extends GOVUKFrontendError {
       } = messageOrOptions;
       message = identifier;
       message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
-      message = formatErrorMessage(component, message);
+      if (component) {
+        message = formatErrorMessage(component, message);
+      }
     }
     super(message);
     this.name = 'ElementError';
@@ -199,9 +204,9 @@ class ServiceNavigation extends Component {
     }
     if (this.mql.matches) {
       this.$menu.removeAttribute('hidden');
-      this.$menuButton.setAttribute('hidden', '');
+      setAttributes(this.$menuButton, attributesForHidingButton);
     } else {
-      this.$menuButton.removeAttribute('hidden');
+      removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
       this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
       if (this.menuIsOpen) {
         this.$menu.removeAttribute('hidden');
@@ -216,6 +221,34 @@ class ServiceNavigation extends Component {
   }
 }
 ServiceNavigation.moduleName = 'govuk-service-navigation';
+const attributesForHidingButton = {
+  hidden: '',
+  'aria-hidden': 'true'
+};
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+  for (const attributeName in attributes) {
+    $element.setAttribute(attributeName, attributes[attributeName]);
+  }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+  for (const attributeName of attributeNames) {
+    $element.removeAttribute(attributeName);
+  }
+}
 
 export { ServiceNavigation };
 //# sourceMappingURL=service-navigation.bundle.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs

@@ -63,9 +63,9 @@ class ServiceNavigation extends Component {
     }
     if (this.mql.matches) {
       this.$menu.removeAttribute('hidden');
-      this.$menuButton.setAttribute('hidden', '');
+      setAttributes(this.$menuButton, attributesForHidingButton);
     } else {
-      this.$menuButton.removeAttribute('hidden');
+      removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton));
       this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
       if (this.menuIsOpen) {
         this.$menu.removeAttribute('hidden');
@@ -80,6 +80,34 @@ class ServiceNavigation extends Component {
   }
 }
 ServiceNavigation.moduleName = 'govuk-service-navigation';
+const attributesForHidingButton = {
+  hidden: '',
+  'aria-hidden': 'true'
+};
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+  for (const attributeName in attributes) {
+    $element.setAttribute(attributeName, attributes[attributeName]);
+  }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+  for (const attributeName of attributeNames) {
+    $element.removeAttribute(attributeName);
+  }
+}
 
 export { ServiceNavigation };
 //# sourceMappingURL=service-navigation.mjs.map

data/node_modules/govuk-frontend/dist/govuk/components/skip-link/_index.scss

@@ -1,10 +1,9 @@
 @include govuk-exports("govuk/component/skip-link") {
   .govuk-skip-link {
     @include govuk-visually-hidden-focusable;
-    @include govuk-typography-common;
     @include govuk-link-decoration;
     @include govuk-link-style-text;
-    @include govuk-font-size($size: 16);
+    @include govuk-font($size: 16);
 
     display: block;
     padding: govuk-spacing(2) govuk-spacing(3);
@@ -21,9 +20,14 @@
     }
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline: $govuk-focus-width solid;
+      outline-color: govuk-functional-colour(focus);
       outline-offset: 0;
-      background-color: $govuk-focus-colour;
+      background-color: govuk-functional-colour(focus);
+
+      @media (forced-colors: active) {
+        outline-offset: (0 - $govuk-focus-width);
+      }
 
       // Undo unwanted changes when global styles are enabled
       @if $govuk-global-styles {

data/node_modules/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js

@@ -4,12 +4,6 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = global.GOVUKFrontend || {}));
 })(this, (function (exports) { 'use strict';
 
-  function getFragmentFromUrl(url) {
-    if (!url.includes('#')) {
-      return undefined;
-    }
-    return url.split('#').pop();
-  }
   function setFocus($element, options = {}) {
     var _options$onBeforeFocu;
     const isFocusable = $element.getAttribute('tabindex');
@@ -53,6 +47,12 @@
     }
     return $scope.classList.contains('govuk-frontend-supported');
   }
+  function isArray(option) {
+    return Array.isArray(option);
+  }
+  function isObject(option) {
+    return !!option && typeof option === 'object' && !isArray(option);
+  }
   function formatErrorMessage(Component, message) {
     return `${Component.moduleName}: ${message}`;
   }
@@ -60,9 +60,6 @@
    * @typedef ComponentWithModuleName
    * @property {string} moduleName - Name of the component
    */
-  /**
-   * @import { ObjectNested } from './configuration.mjs'
-   */
 
   class GOVUKFrontendError extends Error {
     constructor(...args) {
@@ -85,7 +82,7 @@
   class ElementError extends GOVUKFrontendError {
     constructor(messageOrOptions) {
       let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-      if (typeof messageOrOptions === 'object') {
+      if (isObject(messageOrOptions)) {
         const {
           component,
           identifier,
@@ -94,7 +91,9 @@
         } = messageOrOptions;
         message = identifier;
         message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
-        message = formatErrorMessage(component, message);
+        if (component) {
+          message = formatErrorMessage(component, message);
+        }
       }
       super(message);
       this.name = 'ElementError';
@@ -184,16 +183,10 @@
       super($root);
       const hash = this.$root.hash;
       const href = (_this$$root$getAttrib = this.$root.getAttribute('href')) != null ? _this$$root$getAttrib : '';
-      let url;
-      try {
-        url = new window.URL(this.$root.href);
-      } catch (error) {
-        throw new ElementError(`Skip link: Target link (\`href="${href}"\`) is invalid`);
-      }
-      if (url.origin !== window.location.origin || url.pathname !== window.location.pathname) {
+      if (this.$root.origin !== window.location.origin || this.$root.pathname !== window.location.pathname) {
         return;
       }
-      const linkedElementId = getFragmentFromUrl(hash);
+      const linkedElementId = hash.replace('#', '');
       if (!linkedElementId) {
         throw new ElementError(`Skip link: Target link (\`href="${href}"\`) has no hash fragment`);
       }

data/node_modules/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs

@@ -1,9 +1,3 @@
-function getFragmentFromUrl(url) {
-  if (!url.includes('#')) {
-    return undefined;
-  }
-  return url.split('#').pop();
-}
 function setFocus($element, options = {}) {
   var _options$onBeforeFocu;
   const isFocusable = $element.getAttribute('tabindex');
@@ -47,6 +41,12 @@ function isSupported($scope = document.body) {
   }
   return $scope.classList.contains('govuk-frontend-supported');
 }
+function isArray(option) {
+  return Array.isArray(option);
+}
+function isObject(option) {
+  return !!option && typeof option === 'object' && !isArray(option);
+}
 function formatErrorMessage(Component, message) {
   return `${Component.moduleName}: ${message}`;
 }
@@ -54,9 +54,6 @@ function formatErrorMessage(Component, message) {
  * @typedef ComponentWithModuleName
  * @property {string} moduleName - Name of the component
  */
-/**
- * @import { ObjectNested } from './configuration.mjs'
- */
 
 class GOVUKFrontendError extends Error {
   constructor(...args) {
@@ -79,7 +76,7 @@ class SupportError extends GOVUKFrontendError {
 class ElementError extends GOVUKFrontendError {
   constructor(messageOrOptions) {
     let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-    if (typeof messageOrOptions === 'object') {
+    if (isObject(messageOrOptions)) {
       const {
         component,
         identifier,
@@ -88,7 +85,9 @@ class ElementError extends GOVUKFrontendError {
       } = messageOrOptions;
       message = identifier;
       message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
-      message = formatErrorMessage(component, message);
+      if (component) {
+        message = formatErrorMessage(component, message);
+      }
     }
     super(message);
     this.name = 'ElementError';
@@ -178,16 +177,10 @@ class SkipLink extends Component {
     super($root);
     const hash = this.$root.hash;
     const href = (_this$$root$getAttrib = this.$root.getAttribute('href')) != null ? _this$$root$getAttrib : '';
-    let url;
-    try {
-      url = new window.URL(this.$root.href);
-    } catch (error) {
-      throw new ElementError(`Skip link: Target link (\`href="${href}"\`) is invalid`);
-    }
-    if (url.origin !== window.location.origin || url.pathname !== window.location.pathname) {
+    if (this.$root.origin !== window.location.origin || this.$root.pathname !== window.location.pathname) {
       return;
     }
-    const linkedElementId = getFragmentFromUrl(hash);
+    const linkedElementId = hash.replace('#', '');
     if (!linkedElementId) {
       throw new ElementError(`Skip link: Target link (\`href="${href}"\`) has no hash fragment`);
     }

data/node_modules/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs

@@ -1,4 +1,4 @@
-import { getFragmentFromUrl, setFocus } from '../../common/index.mjs';
+import { setFocus } from '../../common/index.mjs';
 import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
 
@@ -20,16 +20,10 @@ class SkipLink extends Component {
     super($root);
     const hash = this.$root.hash;
     const href = (_this$$root$getAttrib = this.$root.getAttribute('href')) != null ? _this$$root$getAttrib : '';
-    let url;
-    try {
-      url = new window.URL(this.$root.href);
-    } catch (error) {
-      throw new ElementError(`Skip link: Target link (\`href="${href}"\`) is invalid`);
-    }
-    if (url.origin !== window.location.origin || url.pathname !== window.location.pathname) {
+    if (this.$root.origin !== window.location.origin || this.$root.pathname !== window.location.pathname) {
       return;
     }
-    const linkedElementId = getFragmentFromUrl(hash);
+    const linkedElementId = hash.replace('#', '');
     if (!linkedElementId) {
       throw new ElementError(`Skip link: Target link (\`href="${href}"\`) has no hash fragment`);
     }

data/node_modules/govuk-frontend/dist/govuk/components/summary-list/_index.scss

@@ -2,7 +2,7 @@
   .govuk-summary-list {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table;
       width: 100%;
       table-layout: fixed; // Required to allow us to wrap words that overflow.
@@ -13,12 +13,13 @@
   }
 
   .govuk-summary-list__row {
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
 
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table-row;
     }
   }
@@ -31,7 +32,7 @@
   // Provide an empty 'cell' for rows that don't have actions – otherwise the
   // bottom border is not drawn for that part of the row in some browsers.
   .govuk-summary-list__row--no-actions {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       &::after {
         content: "";
         display: table-cell;
@@ -45,7 +46,7 @@
   .govuk-summary-list__actions {
     margin: 0; // Reset default user agent styles
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: table-cell;
       padding-top: govuk-spacing(2);
       padding-right: govuk-spacing(4);
@@ -55,7 +56,7 @@
 
   .govuk-summary-list__actions {
     margin-bottom: govuk-spacing(3);
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 20%;
       text-align: right;
     }
@@ -71,13 +72,13 @@
   .govuk-summary-list__key {
     margin-bottom: govuk-spacing(1);
     @include govuk-typography-weight-bold;
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: 30%;
     }
   }
 
   .govuk-summary-list__value {
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
   }
@@ -101,12 +102,13 @@
     display: inline-block;
   }
 
-  @include govuk-media-query($until: tablet) {
+  @media #{govuk-until-breakpoint(tablet)} {
     .govuk-summary-list__actions-list-item,
     .govuk-summary-card__action {
       margin-right: govuk-spacing(2);
       padding-right: govuk-spacing(2);
-      border-right: 1px solid $govuk-border-colour;
+      border-right: 1px solid;
+      border-right-color: govuk-functional-colour(border);
     }
 
     .govuk-summary-list__actions-list-item:last-child,
@@ -117,7 +119,7 @@
     }
   }
 
-  @include govuk-media-query($from: tablet) {
+  @media #{govuk-from-breakpoint(tablet)} {
     .govuk-summary-list__actions-list-item,
     .govuk-summary-card__action {
       margin-left: govuk-spacing(2);
@@ -126,7 +128,8 @@
 
     .govuk-summary-list__actions-list-item:not(:first-child),
     .govuk-summary-card__action:not(:first-child) {
-      border-left: 1px solid $govuk-border-colour;
+      border-left: 1px solid;
+      border-left-color: govuk-functional-colour(border);
     }
 
     .govuk-summary-list__actions-list-item:first-child,
@@ -153,7 +156,7 @@
     }
 
     // Increase padding by 1px to compensate for 'missing' border
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
@@ -167,7 +170,7 @@
     border: 0;
 
     // Increase padding by 1px to compensate for 'missing' border
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
@@ -179,7 +182,8 @@
   // Additional block for the summary card
   .govuk-summary-card {
     @include govuk-responsive-margin(6, "bottom");
-    border: 1px solid $govuk-border-colour;
+    border: 1px solid;
+    border-color: govuk-functional-colour(border);
   }
 
   .govuk-summary-card__title-wrapper {
@@ -188,9 +192,9 @@
     // Ensures the card header appears separate to the summary list in forced
     // colours mode
     border-bottom: 1px solid transparent;
-    background-color: govuk-colour("light-grey");
+    background-color: govuk-colour("black", $variant: "tint-95");
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       justify-content: space-between;
       flex-wrap: nowrap;
@@ -203,7 +207,7 @@
     @include govuk-text-colour;
     margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(1);
     }
   }
@@ -218,7 +222,7 @@
     padding: 0;
     list-style: none;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       justify-content: right;
       text-align: right;
     }
@@ -251,7 +255,7 @@
   .govuk-summary-card__content {
     padding: govuk-spacing(3) govuk-spacing(3) 0;
 
-    @include govuk-media-query($from: "tablet") {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: govuk-spacing(3) govuk-spacing(4);
     }
 

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

@@ -9,13 +9,11 @@
     border-collapse: collapse;
   }
 
-  @if $govuk-new-typography-scale {
-    // Modifier for tables with a lot of data. Tables with lots of data benefit
-    // from a smaller font size on small screens.
-    .govuk-table--small-text-until-tablet {
-      @include govuk-media-query($until: tablet) {
-        @include govuk-font-size($size: 16);
-      }
+  // Modifier for tables with a lot of data. Tables with lots of data benefit
+  // from a smaller font size on small screens.
+  .govuk-table--small-text-until-tablet {
+    @media #{govuk-until-breakpoint(tablet)} {
+      @include govuk-font-size($size: 16);
     }
   }
 
@@ -26,7 +24,8 @@
   .govuk-table__header,
   .govuk-table__cell {
     padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
     text-align: left;
     vertical-align: top;
   }

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

@@ -46,11 +46,12 @@
 
   // GOV.UK Frontend JavaScript enabled
   .govuk-frontend-supported {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       .govuk-tabs__list {
         @include govuk-clearfix;
         margin-bottom: 0;
-        border-bottom: 1px solid $govuk-border-colour;
+        border-bottom: 1px solid;
+        border-bottom-color: govuk-functional-colour(border);
       }
 
       .govuk-tabs__title {
@@ -66,7 +67,7 @@
         padding: govuk-spacing(2) govuk-spacing(4);
 
         float: left;
-        background-color: govuk-colour("light-grey");
+        background-color: govuk-colour("black", $variant: "tint-95");
         text-align: center;
 
         &::before {
@@ -88,10 +89,11 @@
         padding-bottom: govuk-spacing(3) + $border-width;
         padding-left: govuk-spacing(4) - $border-width;
 
-        border: $border-width solid $govuk-border-colour;
+        border: $border-width solid;
         border-bottom: 0;
+        border-color: govuk-functional-colour(border);
 
-        background-color: $govuk-body-background-colour;
+        background-color: govuk-functional-colour(body-background);
 
         .govuk-tabs__tab {
           text-decoration: none;
@@ -116,8 +118,9 @@
       .govuk-tabs__panel {
         @include govuk-responsive-margin(0, "bottom");
         padding: govuk-spacing(6) govuk-spacing(4);
-        border: 1px solid $govuk-border-colour;
+        border: 1px solid;
         border-top: 0;
+        border-color: govuk-functional-colour(border);
 
         & > :last-child {
           margin-bottom: 0;