govuk_tech_docs 5.2.1 → 6.0.0.beta

data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs

@@ -35,9 +35,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) {
@@ -66,7 +63,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,
@@ -75,7 +72,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';
@@ -289,6 +288,9 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  * @template {Partial<Record<keyof ConfigurationType, unknown>>} [ConfigurationType=ObjectNested]
  * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
+/**
+ * @import { CompatibleClass, Config, CreateAllOptions, OnErrorCallback } from '../init.mjs'
+ */
 
 class I18n {
   constructor(translations = {}, config = {}) {
@@ -303,7 +305,7 @@ class I18n {
       throw new Error('i18n: lookup key missing');
     }
     let translation = this.translations[lookupKey];
-    if (typeof (options == null ? void 0 : options.count) === 'number' && typeof translation === 'object') {
+    if (typeof (options == null ? void 0 : options.count) === 'number' && isObject(translation)) {
       const translationPluralForm = translation[this.getPluralSuffix(lookupKey, options.count)];
       if (translationPluralForm) {
         translation = translationPluralForm;
@@ -345,8 +347,8 @@ class I18n {
       return 'other';
     }
     const translation = this.translations[lookupKey];
-    const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : this.selectPluralFormUsingFallbackRules(count);
-    if (typeof translation === 'object') {
+    const preferredForm = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(count) : 'other';
+    if (isObject(translation)) {
       if (preferredForm in translation) {
         return preferredForm;
       } else if ('other' in translation) {
@@ -356,132 +358,7 @@ class I18n {
     }
     throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`);
   }
-  selectPluralFormUsingFallbackRules(count) {
-    count = Math.abs(Math.floor(count));
-    const ruleset = this.getPluralRulesForLocale();
-    if (ruleset) {
-      return I18n.pluralRules[ruleset](count);
-    }
-    return 'other';
-  }
-  getPluralRulesForLocale() {
-    const localeShort = this.locale.split('-')[0];
-    for (const pluralRule in I18n.pluralRulesMap) {
-      const languages = I18n.pluralRulesMap[pluralRule];
-      if (languages.includes(this.locale) || languages.includes(localeShort)) {
-        return pluralRule;
-      }
-    }
-  }
 }
-I18n.pluralRulesMap = {
-  arabic: ['ar'],
-  chinese: ['my', 'zh', 'id', 'ja', 'jv', 'ko', 'ms', 'th', 'vi'],
-  french: ['hy', 'bn', 'fr', 'gu', 'hi', 'fa', 'pa', 'zu'],
-  german: ['af', 'sq', 'az', 'eu', 'bg', 'ca', 'da', 'nl', 'en', 'et', 'fi', 'ka', 'de', 'el', 'hu', 'lb', 'no', 'so', 'sw', 'sv', 'ta', 'te', 'tr', 'ur'],
-  irish: ['ga'],
-  russian: ['ru', 'uk'],
-  scottish: ['gd'],
-  spanish: ['pt-PT', 'it', 'es'],
-  welsh: ['cy']
-};
-I18n.pluralRules = {
-  arabic(n) {
-    if (n === 0) {
-      return 'zero';
-    }
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n % 100 >= 3 && n % 100 <= 10) {
-      return 'few';
-    }
-    if (n % 100 >= 11 && n % 100 <= 99) {
-      return 'many';
-    }
-    return 'other';
-  },
-  chinese() {
-    return 'other';
-  },
-  french(n) {
-    return n === 0 || n === 1 ? 'one' : 'other';
-  },
-  german(n) {
-    return n === 1 ? 'one' : 'other';
-  },
-  irish(n) {
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n >= 3 && n <= 6) {
-      return 'few';
-    }
-    if (n >= 7 && n <= 10) {
-      return 'many';
-    }
-    return 'other';
-  },
-  russian(n) {
-    const lastTwo = n % 100;
-    const last = lastTwo % 10;
-    if (last === 1 && lastTwo !== 11) {
-      return 'one';
-    }
-    if (last >= 2 && last <= 4 && !(lastTwo >= 12 && lastTwo <= 14)) {
-      return 'few';
-    }
-    if (last === 0 || last >= 5 && last <= 9 || lastTwo >= 11 && lastTwo <= 14) {
-      return 'many';
-    }
-    return 'other';
-  },
-  scottish(n) {
-    if (n === 1 || n === 11) {
-      return 'one';
-    }
-    if (n === 2 || n === 12) {
-      return 'two';
-    }
-    if (n >= 3 && n <= 10 || n >= 13 && n <= 19) {
-      return 'few';
-    }
-    return 'other';
-  },
-  spanish(n) {
-    if (n === 1) {
-      return 'one';
-    }
-    if (n % 1000000 === 0 && n !== 0) {
-      return 'many';
-    }
-    return 'other';
-  },
-  welsh(n) {
-    if (n === 0) {
-      return 'zero';
-    }
-    if (n === 1) {
-      return 'one';
-    }
-    if (n === 2) {
-      return 'two';
-    }
-    if (n === 3) {
-      return 'few';
-    }
-    if (n === 6) {
-      return 'many';
-    }
-    return 'other';
-  }
-};
 
 /**
  * Password input component

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

@@ -5,7 +5,15 @@
     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);
+  }
+
+  // If the phase banner is already contained within a .govuk-width-container,
+  // don't double up the left and right margins on narrow viewports.
+  .govuk-width-container .govuk-phase-banner.govuk-width-container {
+    margin-right: 0;
+    margin-left: 0;
   }
 
   .govuk-phase-banner__content {
@@ -18,12 +26,10 @@
 
   .govuk-phase-banner__content__tag {
     @include govuk-font-size($size: 16);
-    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
+    margin-right: govuk-spacing(3);
 
-    @if $govuk-new-typography-scale {
-      @include govuk-media-query($from: tablet) {
-        margin-right: govuk-spacing(2);
-      }
+    @media #{govuk-from-breakpoint(tablet)} {
+      margin-right: govuk-spacing(2);
     }
   }
 

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

@@ -121,7 +121,7 @@
       outline-color: Highlight;
     }
 
-    box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+    box-shadow: 0 0 0 $govuk-radios-focus-width govuk-functional-colour(focus);
   }
 
   // Selected state
@@ -145,7 +145,7 @@
   // =========================================================
 
   .govuk-radios--inline {
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
@@ -188,7 +188,8 @@
     @include govuk-responsive-margin(4, "bottom");
     margin-left: $conditional-margin-left;
     padding-left: $conditional-padding-left;
-    border-left: $conditional-border-width solid $govuk-border-colour;
+    border-left: $conditional-border-width solid;
+    border-left-color: govuk-functional-colour(border);
 
     .govuk-frontend-supported &--hidden {
       display: none;
@@ -288,7 +289,7 @@
       // Apply an outline for those modes to use instead.
       outline: $govuk-radios-focus-width dashed transparent;
       outline-offset: 1px;
-      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
+      box-shadow: 0 0 0 $govuk-hover-width govuk-functional-colour(hover);
     }
 
     // Because we've overridden the border-shadow provided by the focus state,
@@ -303,8 +304,8 @@
       }
       // prettier-ignore
       box-shadow:
-        0 0 0 $govuk-radios-focus-width $govuk-focus-colour // 1,
-        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+        0 0 0 $govuk-radios-focus-width govuk-functional-colour(focus), // 1
+        0 0 0 $govuk-hover-width govuk-functional-colour(hover); // 2
     }
 
     // For devices that explicitly don't support hover, don't provide a hover
@@ -319,7 +320,7 @@
       }
 
       .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
-        box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+        box-shadow: 0 0 0 $govuk-radios-focus-width govuk-functional-colour(focus);
       }
     }
   }

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

@@ -23,6 +23,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}`;
   }
@@ -30,9 +36,6 @@
    * @typedef ComponentWithModuleName
    * @property {string} moduleName - Name of the component
    */
-  /**
-   * @import { ObjectNested } from './configuration.mjs'
-   */
 
   class GOVUKFrontendError extends Error {
     constructor(...args) {
@@ -55,7 +58,7 @@
   class ElementError extends GOVUKFrontendError {
     constructor(messageOrOptions) {
       let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-      if (typeof messageOrOptions === 'object') {
+      if (isObject(messageOrOptions)) {
         const {
           component,
           identifier,
@@ -64,7 +67,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';

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

@@ -17,6 +17,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}`;
 }
@@ -24,9 +30,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) {
@@ -49,7 +52,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,
@@ -58,7 +61,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';

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

@@ -16,21 +16,16 @@
     max-width: 100%;
     height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border: $govuk-border-width-form-element solid;
+    border-color: govuk-functional-colour(input-border);
 
     // Default user agent colours for selects can have low contrast,
     // and may look disabled (#2435)
-    color: $govuk-text-colour;
+    color: govuk-functional-colour(text);
     background-color: govuk-colour("white");
 
     &: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 {
@@ -48,10 +43,10 @@
   }
 
   .govuk-select--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/service-navigation/_index.scss

@@ -1,25 +1,16 @@
 @include govuk-exports("govuk/component/service-navigation") {
   $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $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
-  // better perceptual contrast with the navigation background.
-  $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
+  $govuk-service-navigation-text-colour: govuk-functional-colour(surface-text);
+  $govuk-service-navigation-background: govuk-functional-colour(surface-background);
+  $govuk-service-navigation-border-colour: govuk-functional-colour(surface-border);
 
   .govuk-service-navigation {
+    @include govuk-font($size: 19);
     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
-    );
+    border-bottom-color: $govuk-service-navigation-border-colour;
+    color: $govuk-service-navigation-text-colour;
+    background-color: $govuk-service-navigation-background;
   }
 
   .govuk-service-navigation__container {
@@ -27,7 +18,7 @@
     flex-direction: column;
     align-items: start;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       flex-direction: row;
       flex-wrap: wrap;
     }
@@ -39,26 +30,27 @@
   .govuk-service-navigation__service-name {
     position: relative;
     margin: govuk-spacing(2) 0;
-    border: 0 solid $govuk-service-navigation-link-colour;
 
-    @include govuk-media-query($from: tablet) {
+    // A border matching the link colour is used to mark the active section –
+    // see the `govuk-service-navigation__item--active` class
+    border-width: 0;
+    border-style: solid;
+    border-color: govuk-functional-colour(link);
+
+    @media #{govuk-from-breakpoint(tablet)} {
       // inline-block is used as a fallback for browsers that don't support flexbox
       display: inline-block;
 
       margin-top: 0;
       margin-bottom: 0;
-      padding: govuk-spacing(4) 0;
+      padding: govuk-spacing(3) 0;
 
-      @include _govuk-rebrand {
-        padding: govuk-spacing(3) 0;
-
-        // More magic numbers ahoy:
-        // 29 is the desired height of the element (60), minus top and bottom
-        // padding (2×15), minus bottom border (1); 19 is the font-size at this
-        // point. This gives us the perfect fractional line height to make the
-        // overall component 60px high
-        line-height: (29 / 19);
-      }
+      // More magic numbers ahoy:
+      // 29 is the desired height of the element (60), minus top and bottom
+      // padding (2×15), minus bottom border (1); 19 is the font-size at this
+      // point. This gives us the perfect fractional line height to make the
+      // overall component 60px high
+      line-height: (29 / 19);
 
       &:not(:last-child) {
         @include govuk-responsive-margin(6, $direction: right);
@@ -78,7 +70,7 @@
   }
 
   .govuk-service-navigation__item--active {
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       // Negative offset the left margin so we can place a current page indicator
       // to the left without misaligning the list item text.
       margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
@@ -86,12 +78,8 @@
       border-left-width: $govuk-service-navigation-active-link-border-width;
     }
 
-    @include govuk-media-query($from: tablet) {
-      @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
-      );
+    @media #{govuk-from-breakpoint(tablet)} {
+      padding-bottom: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width;
       border-bottom-width: $govuk-service-navigation-active-link-border-width;
     }
   }
@@ -100,12 +88,6 @@
     @include govuk-link-common;
     @include govuk-link-style-no-underline;
     @include govuk-link-style-no-visited-state;
-
-    &:not(:hover):not(:focus) {
-      // We set the colour here as we don't want to override the hover or
-      // focus colours
-      color: $govuk-service-navigation-link-colour;
-    }
   }
 
   //
@@ -113,7 +95,7 @@
   //
 
   .govuk-service-navigation__service-name {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-weight-bold;
   }
 
   // Annoyingly this requires a compound selector in order to overcome the
@@ -139,7 +121,7 @@
     margin: govuk-spacing(2) 0;
     padding: 0;
     border: 0;
-    color: $govuk-service-navigation-link-colour;
+    color: govuk-functional-colour(link);
     background: none;
     word-break: break-all;
     cursor: pointer;
@@ -172,7 +154,6 @@
   }
 
   .govuk-service-navigation__list {
-    @include govuk-font($size: 19);
     margin: 0;
     margin-bottom: govuk-spacing(3);
     padding: 0;
@@ -184,7 +165,7 @@
     //   readers would pointlessly announce.
     // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
     //   all of the links as a run-on sentence.
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: flex;
       flex-wrap: wrap;
       margin-bottom: 0;
@@ -211,37 +192,40 @@
 
   // Inverted colour scheme style intended for product pages
   .govuk-service-navigation--inverse {
-    @include _govuk-rebrand {
-      // Remove bottom border to add width-container ones
-      border-bottom: none;
-      background-color: $govuk-brand-colour;
-
-      .govuk-width-container {
-        border-width: 1px 0;
-        border-style: solid;
-        border-color: $_govuk-rebrand-border-colour-on-blue-tint-95;
-      }
+    // Remove bottom border to add width-container ones
+    border-bottom: none;
 
-      // Subtract 1px of space to account for the extra border-top
-      .govuk-service-navigation__container {
-        margin-top: -1px;
-      }
+    // Set colour here so non-link text (service name, slot content) can
+    // use it too.
+    color: govuk-colour("white");
 
-      // Override the 'active' border colour
-      .govuk-service-navigation__item,
-      .govuk-service-navigation__service-name {
-        border-color: govuk-colour("white");
-      }
+    background-color: govuk-functional-colour(brand);
 
-      // Override link styles
-      .govuk-service-navigation__link {
-        @include govuk-link-style-inverse;
-      }
+    .govuk-width-container {
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: $govuk-service-navigation-border-colour;
+    }
 
-      // Override mobile menu toggle colour when not focused
-      .govuk-service-navigation__toggle:not(:focus) {
-        color: govuk-colour("white");
-      }
+    // Subtract 1px of space to account for the extra border-top
+    .govuk-service-navigation__container {
+      margin-top: -1px;
+    }
+
+    // Override the 'active' border colour
+    .govuk-service-navigation__item,
+    .govuk-service-navigation__service-name {
+      border-color: govuk-colour("white");
+    }
+
+    // Override link styles
+    .govuk-service-navigation__link {
+      @include govuk-link-style-inverse;
+    }
+
+    // Override mobile menu toggle colour when not focused
+    .govuk-service-navigation__toggle:not(:focus) {
+      color: currentcolor;
     }
   }
 }