govuk_tech_docs 5.2.1 → 6.0.0.beta

data/node_modules/govuk-frontend/dist/govuk/components/tabs/tabs.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 getBreakpoint(name) {
     const property = `--govuk-breakpoint-${name}`;
     const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
@@ -37,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}`;
   }
@@ -44,9 +44,6 @@
    * @typedef ComponentWithModuleName
    * @property {string} moduleName - Name of the component
    */
-  /**
-   * @import { ObjectNested } from './configuration.mjs'
-   */
 
   class GOVUKFrontendError extends Error {
     constructor(...args) {
@@ -69,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,
@@ -78,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';
@@ -281,7 +280,7 @@
       return this.$root.querySelector(`a.govuk-tabs__tab[href="${hash}"]`);
     }
     setAttributes($tab) {
-      const panelId = getFragmentFromUrl($tab.href);
+      const panelId = $tab.hash.replace('#', '');
       if (!panelId) {
         return;
       }
@@ -385,7 +384,7 @@
       this.createHistoryEntry($previousTab);
     }
     getPanel($tab) {
-      const panelId = getFragmentFromUrl($tab.href);
+      const panelId = $tab.hash.replace('#', '');
       if (!panelId) {
         return null;
       }

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

@@ -1,9 +1,3 @@
-function getFragmentFromUrl(url) {
-  if (!url.includes('#')) {
-    return undefined;
-  }
-  return url.split('#').pop();
-}
 function getBreakpoint(name) {
   const property = `--govuk-breakpoint-${name}`;
   const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
@@ -31,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}`;
 }
@@ -38,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) {
@@ -63,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,
@@ -72,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';
@@ -275,7 +274,7 @@ class Tabs extends Component {
     return this.$root.querySelector(`a.govuk-tabs__tab[href="${hash}"]`);
   }
   setAttributes($tab) {
-    const panelId = getFragmentFromUrl($tab.href);
+    const panelId = $tab.hash.replace('#', '');
     if (!panelId) {
       return;
     }
@@ -379,7 +378,7 @@ class Tabs extends Component {
     this.createHistoryEntry($previousTab);
   }
   getPanel($tab) {
-    const panelId = getFragmentFromUrl($tab.href);
+    const panelId = $tab.hash.replace('#', '');
     if (!panelId) {
       return null;
     }

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

@@ -1,4 +1,4 @@
-import { getBreakpoint, getFragmentFromUrl } from '../../common/index.mjs';
+import { getBreakpoint } from '../../common/index.mjs';
 import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
 
@@ -133,7 +133,7 @@ class Tabs extends Component {
     return this.$root.querySelector(`a.govuk-tabs__tab[href="${hash}"]`);
   }
   setAttributes($tab) {
-    const panelId = getFragmentFromUrl($tab.href);
+    const panelId = $tab.hash.replace('#', '');
     if (!panelId) {
       return;
     }
@@ -237,7 +237,7 @@ class Tabs extends Component {
     this.createHistoryEntry($previousTab);
   }
   getPanel($tab) {
-    const panelId = getFragmentFromUrl($tab.href);
+    const panelId = $tab.hash.replace('#', '');
     if (!panelId) {
       return null;
     }

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

@@ -1,8 +1,44 @@
+////
+/// @group components/tag
+////
+
+/// Get tag text colour
+/// Almost all tags should use the 50% shade of their colour for their text
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @return {Colour} Representation of the named colour for use in tags
+/// @access private
+@function _govuk-tag-text-colour($colour) {
+  @return govuk-colour($colour, $variant: "shade-50");
+}
+
+/// Get tag background colour
+/// Almost all tags should use the 80% tint of their colour for their background
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @return {Colour} Representation of the named colour for use in tags
+/// @access private
+@function _govuk-tag-background-colour($colour) {
+  @return govuk-colour($colour, $variant: "tint-80");
+}
+
+/// Generate colour CSS for tag and tag modifiers
+/// Applies standard rules from the tag colour functions
+///
+/// @param {String} $colour - name of colour from the colour palette
+/// @access private
+@mixin _govuk-tag-colours($colour) {
+  color: _govuk-tag-text-colour($colour);
+  background-color: _govuk-tag-background-colour($colour);
+}
+
 @include govuk-exports("govuk/component/tag") {
   $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, "mobile"), map-get($govuk-breakpoints, "mobile") / 2, 160px);
 
   .govuk-tag {
     @include govuk-font($size: 19);
+    // Default tag colour is blue
+    @include _govuk-tag-colours("blue");
 
     display: inline-block;
 
@@ -25,8 +61,8 @@
     padding-right: 8px;
     padding-bottom: 3px;
     padding-left: 8px;
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 70%);
+
+    border-radius: 1px;
     text-decoration: none;
     overflow-wrap: break-word;
 
@@ -43,54 +79,53 @@
     }
   }
 
-  .govuk-tag--grey {
-    color: govuk-shade(govuk-colour("dark-grey"), 50%);
-    background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
+  // Tag colour modifiers. Use the _govuk-tag-colours mixin to define consistent
+  // colour rules per modifier
+  .govuk-tag--green {
+    @include _govuk-tag-colours("green");
   }
 
   .govuk-tag--purple {
-    color: govuk-shade(govuk-colour("bright-purple"), 50%);
-    background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
+    @include _govuk-tag-colours("purple");
   }
 
-  .govuk-tag--turquoise {
-    color: govuk-shade(govuk-colour("turquoise"), 60%);
-    background-color: govuk-tint(govuk-colour("turquoise"), 80%);
+  .govuk-tag--red {
+    @include _govuk-tag-colours("red");
   }
 
-  .govuk-tag--blue {
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 70%);
+  .govuk-tag--orange {
+    @include _govuk-tag-colours("orange");
   }
 
-  .govuk-tag--light-blue {
-    color: govuk-shade(govuk-colour("blue"), 60%);
-    background-color: govuk-tint(govuk-colour("blue"), 90%);
+  .govuk-tag--teal {
+    @include _govuk-tag-colours("teal");
   }
 
-  .govuk-tag--yellow {
-    color: govuk-shade(govuk-colour("yellow"), 65%);
-    background-color: govuk-tint(govuk-colour("yellow"), 75%);
+  .govuk-tag--magenta {
+    @include _govuk-tag-colours("magenta");
   }
 
-  .govuk-tag--orange {
-    color: govuk-shade(govuk-colour("orange"), 55%);
-    background-color: govuk-tint(govuk-colour("orange"), 70%);
+  // Yellow uses different colours to ensure it's legible
+  .govuk-tag--yellow {
+    color: govuk-colour("orange", $variant: "shade-50");
+    background-color: govuk-colour("yellow", $variant: "tint-50");
   }
 
-  .govuk-tag--red {
-    color: govuk-shade(govuk-colour("red"), 80%);
-    background-color: govuk-tint(govuk-colour("red"), 75%);
+  // Grey uses different colours to ensure it's legible
+  .govuk-tag--grey {
+    color: govuk-colour("black");
+    background-color: govuk-colour("black", $variant: "tint-80");
   }
 
-  .govuk-tag--pink {
-    color: govuk-shade(govuk-colour("pink"), 50%);
-    background-color: govuk-tint(govuk-colour("pink"), 85%);
+  // Turquoise and pink are deprecated over teal and magenta respectively
+  // @deprecated
+  .govuk-tag--turquoise {
+    @include _govuk-tag-colours("teal");
   }
 
-  .govuk-tag--green {
-    color: govuk-shade(govuk-colour("green"), 20%);
-    background-color: govuk-tint(govuk-colour("green"), 80%);
+  // @deprecated
+  .govuk-tag--pink {
+    @include _govuk-tag-colours("magenta");
   }
 }
 

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

@@ -1,7 +1,7 @@
 @import "../tag/index";
 
 @include govuk-exports("govuk/component/task-list") {
-  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+  $govuk-task-list-hover-colour: govuk-colour("black", $variant: "tint-95");
 
   .govuk-task-list {
     @include govuk-font($size: 19);
@@ -25,11 +25,13 @@
     margin-bottom: 0;
     padding-top: govuk-spacing(2);
     padding-bottom: govuk-spacing(2);
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
   }
 
   .govuk-task-list__item:first-child {
-    border-top: 1px solid $govuk-border-colour;
+    border-top: 1px solid;
+    border-top-color: govuk-functional-colour(border);
   }
 
   // This class is added to the <li> elements where the task name is a link. The
@@ -54,7 +56,7 @@
   }
 
   .govuk-task-list__status--cannot-start-yet {
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   // This adds an empty transparent box covering the whole row, including the
@@ -72,7 +74,7 @@
 
   .govuk-task-list__hint {
     margin-top: govuk-spacing(1);
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 }
 

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

@@ -15,19 +15,14 @@
 
     resize: vertical;
 
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border: $govuk-border-width-form-element solid;
     border-radius: 0;
+    border-color: govuk-functional-colour(input-border);
 
     -webkit-appearance: none;
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      // Ensure outline appears outside of the element
-      outline-offset: 0;
-      // Double the border by adding its width again. Use `box-shadow` to do
-      // this instead of changing `border-width` (which changes element size)
-      // and since `outline` is already used for the yellow focus state.
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+      @include govuk-focused-form-input;
     }
 
     &:disabled {
@@ -39,10 +34,10 @@
   }
 
   .govuk-textarea--error {
-    border-color: $govuk-error-colour;
+    border-color: govuk-functional-colour(error);
 
     &:focus {
-      border-color: $govuk-input-border-colour;
+      border-color: govuk-functional-colour(input-border);
     }
   }
 }

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss

@@ -19,17 +19,18 @@
     min-height: 35px;
     margin-top: -7px;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-top: -5px;
     }
 
     // When a user customises their colours the background colour will often be
     // removed. Adding a border to the component keeps it's shape as a circle.
-    border: 3px solid $govuk-text-colour;
+    border: 3px solid;
     border-radius: 50%;
+    border-color: govuk-functional-colour(text);
 
-    color: $govuk-body-background-colour;
-    background: $govuk-text-colour;
+    color: govuk-functional-colour(body-background);
+    background: govuk-functional-colour(text);
 
     font-size: 30px;
     line-height: 29px;

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

@@ -1,4 +1,3 @@
-@import "govuk-frontend-properties";
 @import "links";
 @import "lists";
 @import "typography";

data/node_modules/govuk-frontend/dist/govuk/core/_lists.scss

@@ -38,7 +38,7 @@
   %govuk-list--number > li {
     margin-bottom: 0;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(1);
     }
   }
@@ -46,7 +46,7 @@
   %govuk-list--spaced > li {
     margin-bottom: govuk-spacing(2);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: govuk-spacing(3);
     }
   }

data/node_modules/govuk-frontend/dist/govuk/core/_section-break.scss

@@ -40,7 +40,8 @@
   // Visible variant
 
   %govuk-section-break--visible {
-    border-bottom: 1px solid $govuk-border-colour;
+    border-bottom: 1px solid;
+    border-bottom-color: govuk-functional-colour(border);
   }
 
   .govuk-section-break--visible {

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

@@ -66,7 +66,7 @@
 
     margin-bottom: govuk-spacing(1);
 
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   .govuk-caption-l {
@@ -75,9 +75,9 @@
     display: block;
 
     margin-bottom: govuk-spacing(1);
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       margin-bottom: 0;
     }
   }
@@ -87,7 +87,7 @@
 
     display: block;
 
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
   }
 
   // Body (paragraphs)
@@ -128,20 +128,6 @@
     @extend %govuk-body-s;
   }
 
-  // @deprecated
-  %govuk-body-xs {
-    @include govuk-text-colour;
-    @include govuk-font($size: _14);
-
-    margin-top: 0;
-    @include govuk-responsive-margin(4, "bottom");
-  }
-
-  // @deprecated
-  .govuk-body-xs {
-    @extend %govuk-body-xs;
-  }
-
   // Usage aliases
 
   // Using extend to alias means we also inherit any contextual adjustments that
@@ -161,7 +147,7 @@
   %govuk-body-l + %govuk-heading-l {
     padding-top: govuk-spacing(1);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding-top: govuk-spacing(2);
     }
   }
@@ -180,7 +166,7 @@
   %govuk-list + %govuk-heading-s {
     padding-top: govuk-spacing(1);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding-top: govuk-spacing(2);
     }
   }

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_breakpoints.scss

@@ -0,0 +1,17 @@
+@import "../settings/custom-properties";
+@import "../settings/media-queries";
+@import "../tools/exports";
+@import "../tools/px-to-rem";
+
+// CSS custom property for each breakpoint
+@include govuk-exports("govuk/custom-properties/breakpoints") {
+  :root {
+    @if $govuk-output-custom-properties {
+      @each $name, $value in $govuk-breakpoints {
+        --govuk-breakpoint-#{$name}: #{govuk-px-to-rem($value)};
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_breakpoints.scss.map */

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

@@ -0,0 +1,15 @@
+@import "../tools/exports";
+
+// This custom property is automatically overwritten during builds and
+// releases. It doesn't need to be updated manually.
+//
+// This custom property is always output by base regardless of if
+// `$govuk-output-custom-properties` is true or not to help with checking if
+// multiple stylesheets are outputting the same version
+@include govuk-exports("govuk/custom-properties/frontend-version") {
+  :root {
+    --govuk-frontend-version: "6.0.0";
+  }
+}
+
+/*# sourceMappingURL=_frontend-version.scss.map */

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

@@ -0,0 +1,17 @@
+@import "../settings/custom-properties";
+@import "../settings/colours-functional";
+@import "../tools/exports";
+@import "../helpers/colour";
+
+// CSS custom properties for each functional colour
+@include govuk-exports("govuk/custom-properties/functional-colours") {
+  :root {
+    @if $govuk-output-custom-properties {
+      @each $name, $value in $govuk-functional-colours {
+        --govuk-#{$name}-colour: #{_govuk-resolve-colour($value)};
+      }
+    }
+  }
+}
+
+/*# sourceMappingURL=_functional-colours.scss.map */

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_index.scss

@@ -0,0 +1,5 @@
+@import "breakpoints";
+@import "frontend-version";
+@import "functional-colours";
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/errors/index.mjs

@@ -1,4 +1,4 @@
-import { formatErrorMessage } from '../common/index.mjs';
+import { isObject, formatErrorMessage } from '../common/index.mjs';
 
 class GOVUKFrontendError extends Error {
   constructor(...args) {
@@ -27,7 +27,7 @@ class ConfigError extends GOVUKFrontendError {
 class ElementError extends GOVUKFrontendError {
   constructor(messageOrOptions) {
     let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-    if (typeof messageOrOptions === 'object') {
+    if (isObject(messageOrOptions)) {
       const {
         component,
         identifier,
@@ -36,7 +36,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';