govuk_tech_docs 5.2.1 → 6.0.0.beta

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

@@ -201,11 +201,11 @@ class Accordion extends ConfigurableComponent {
     const ariaLabelParts = [];
     const $headingText = $section.querySelector(`.${this.sectionHeadingTextClass}`);
     if ($headingText) {
-      ariaLabelParts.push(`${$headingText.textContent}`.trim());
+      ariaLabelParts.push($headingText.textContent.trim());
     }
     const $summary = $section.querySelector(`.${this.sectionSummaryClass}`);
     if ($summary) {
-      ariaLabelParts.push(`${$summary.textContent}`.trim());
+      ariaLabelParts.push($summary.textContent.trim());
     }
     const ariaLabelMessage = expanded ? this.i18n.t('hideSectionAriaLabel') : this.i18n.t('showSectionAriaLabel');
     ariaLabelParts.push(ariaLabelMessage);
@@ -258,7 +258,7 @@ class Accordion extends ConfigurableComponent {
     if (id) {
       try {
         window.sessionStorage.setItem(id, isExpanded.toString());
-      } catch (exception) {}
+      } catch (_unused) {}
     }
   }
   setInitialState($section) {
@@ -272,7 +272,7 @@ class Accordion extends ConfigurableComponent {
         if (state !== null) {
           this.setExpanded(state === 'true', $section);
         }
-      } catch (exception) {}
+      } catch (_unused2) {}
     }
   }
   getButtonPunctuationEl() {

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

@@ -10,7 +10,7 @@
   $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
-  $chevron-border-colour: $govuk-secondary-text-colour;
+  $chevron-border-colour: govuk-functional-colour(secondary-text);
 
   .govuk-back-link {
     @include govuk-font-size($size: $font-size);
@@ -59,7 +59,7 @@
   }
 
   .govuk-back-link:focus::before {
-    border-color: $govuk-focus-text-colour;
+    border-color: govuk-functional-colour(focus-text);
   }
 
   .govuk-back-link::after {

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

@@ -10,7 +10,7 @@
   $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
-  $chevron-border-colour: $govuk-secondary-text-colour;
+  $chevron-border-colour: govuk-functional-colour(secondary-text);
 
   // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
   // of length 8 (7px + 1px border):
@@ -97,7 +97,7 @@
   }
 
   .govuk-breadcrumbs--collapse-on-mobile {
-    @include govuk-media-query($until: tablet) {
+    @media #{govuk-until-breakpoint(tablet)} {
       .govuk-breadcrumbs__list-item {
         display: none;
 

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

@@ -28,31 +28,31 @@ $govuk-inverse-button-background-colour: govuk-colour("white") !default;
 /// @type Colour
 /// @access public
 
-$govuk-inverse-button-text-colour: $govuk-brand-colour !default;
+$govuk-inverse-button-text-colour: govuk-functional-colour(brand) !default;
 
 @include govuk-exports("govuk/component/button") {
   $govuk-button-colour: $govuk-button-background-colour;
   $govuk-button-text-colour: $govuk-button-text-colour;
-  $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
-  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
+  $govuk-button-hover-colour: govuk-colour("green", $variant: "shade-25");
+  $govuk-button-shadow-colour: govuk-colour("green", $variant: "shade-50");
 
   // Secondary button variables
-  $govuk-secondary-button-colour: govuk-colour("light-grey");
+  $govuk-secondary-button-colour: govuk-colour("black", $variant: "tint-95");
   $govuk-secondary-button-text-colour: govuk-colour("black");
-  $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
-  $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
+  $govuk-secondary-button-hover-colour: govuk-colour("black", $variant: "tint-80");
+  $govuk-secondary-button-shadow-colour: govuk-colour("black", $variant: "tint-50");
 
   // Warning button variables
   $govuk-warning-button-colour: govuk-colour("red");
   $govuk-warning-button-text-colour: govuk-colour("white");
-  $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
-  $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
+  $govuk-warning-button-hover-colour: govuk-colour("red", $variant: "shade-25");
+  $govuk-warning-button-shadow-colour: govuk-colour("red", $variant: "shade-50");
 
   // Inverse button variables
   $govuk-inverse-button-colour: $govuk-inverse-button-background-colour;
   $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour;
-  $govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);
-  $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);
+  $govuk-inverse-button-hover-colour: govuk-colour("blue", $variant: "tint-95");
+  $govuk-inverse-button-shadow-colour: govuk-colour("blue", $variant: "shade-50");
 
   // Because the shadow (s0) is visually 'part of' the button, we need to reduce
   // the height of the button to compensate by adjusting its padding (s1) and
@@ -82,7 +82,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
     cursor: pointer;
     -webkit-appearance: none;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       width: auto;
     }
 
@@ -111,21 +111,18 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
     }
 
     &:focus {
-      border-color: $govuk-focus-colour;
+      border-color: govuk-functional-colour(focus);
       outline: $govuk-focus-width solid transparent;
-      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+      box-shadow: inset 0 0 0 1px govuk-functional-colour(focus);
     }
 
     &:focus:not(:active):not(:hover) {
-      border-color: $govuk-focus-colour;
-      color: $govuk-focus-text-colour;
-      background-color: $govuk-focus-colour;
-      box-shadow: 0 2px 0 $govuk-focus-text-colour;
+      border-color: govuk-functional-colour(focus);
+      color: govuk-functional-colour(focus-text);
+      background-color: govuk-functional-colour(focus);
+      box-shadow: 0 2px 0 govuk-functional-colour(focus-text);
     }
 
-    // The following adjustments do not work for <input type="button"> as
-    // non-container elements cannot include pseudo elements (i.e. ::before).
-
     // Use a pseudo element to expand the click target area to include the
     // button's shadow as well, in case users try to click it.
     &::before {
@@ -247,7 +244,7 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
   .govuk-button__start-icon {
     margin-left: govuk-spacing(1);
 
-    @include govuk-media-query($from: desktop) {
+    @media #{govuk-from-breakpoint(desktop)} {
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;

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

@@ -36,9 +36,6 @@
    * @typedef ComponentWithModuleName
    * @property {string} moduleName - Name of the component
    */
-  /**
-   * @import { ObjectNested } from './configuration.mjs'
-   */
 
   class GOVUKFrontendError extends Error {
     constructor(...args) {
@@ -67,7 +64,7 @@
   class ElementError extends GOVUKFrontendError {
     constructor(messageOrOptions) {
       let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-      if (typeof messageOrOptions === 'object') {
+      if (isObject(messageOrOptions)) {
         const {
           component,
           identifier,
@@ -76,7 +73,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';
@@ -290,6 +289,9 @@
    * @template {Partial<Record<keyof ConfigurationType, unknown>>} [ConfigurationType=ObjectNested]
    * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
+  /**
+   * @import { CompatibleClass, Config, CreateAllOptions, OnErrorCallback } from '../init.mjs'
+   */
 
   const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 

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

@@ -30,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) {
@@ -61,7 +58,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,
@@ -70,7 +67,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';
@@ -284,6 +283,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'
+ */
 
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
 

data/node_modules/govuk-frontend/dist/govuk/components/character-count/_index.scss

@@ -16,8 +16,8 @@
     // show the error state. This presents feedback to the user that the value
     // has become invalid without needing to see the counter.
     .govuk-textarea--error:focus {
-      border-color: $govuk-error-colour;
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element $govuk-error-colour;
+      border-color: govuk-functional-colour(error);
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element govuk-functional-colour(error);
     }
   }
 

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

@@ -41,9 +41,6 @@
    * @typedef ComponentWithModuleName
    * @property {string} moduleName - Name of the component
    */
-  /**
-   * @import { ObjectNested } from './configuration.mjs'
-   */
 
   class GOVUKFrontendError extends Error {
     constructor(...args) {
@@ -72,7 +69,7 @@
   class ElementError extends GOVUKFrontendError {
     constructor(messageOrOptions) {
       let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
-      if (typeof messageOrOptions === 'object') {
+      if (isObject(messageOrOptions)) {
         const {
           component,
           identifier,
@@ -81,7 +78,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';
@@ -315,6 +314,9 @@
    * @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 = {}) {
@@ -329,7 +331,7 @@
         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;
@@ -371,8 +373,8 @@
         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) {
@@ -382,132 +384,7 @@
       }
       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';
-    }
-  };
 
   /**
    * Character count component
@@ -542,6 +419,7 @@
       var _ref, _this$config$maxwords;
       super($root, config);
       this.$textarea = void 0;
+      this.count = 0;
       this.$visibleCountMessage = void 0;
       this.$screenReaderCountMessage = void 0;
       this.lastInputTimestamp = null;
@@ -577,7 +455,7 @@
         });
       }
       this.$errorMessage = this.$root.querySelector('.govuk-error-message');
-      if (`${$textareaDescription.textContent}`.match(/^\s*$/)) {
+      if ($textareaDescription.textContent.match(/^\s*$/)) {
         $textareaDescription.textContent = this.i18n.t('textareaDescription', {
           count: this.maxLength
         });
@@ -597,15 +475,22 @@
       $textareaDescription.classList.add('govuk-visually-hidden');
       this.$textarea.removeAttribute('maxlength');
       this.bindChangeEvents();
-      window.addEventListener('pageshow', () => this.updateCountMessage());
+      window.addEventListener('pageshow', () => {
+        if (this.$textarea.value !== this.$textarea.textContent) {
+          this.updateCount();
+          this.updateCountMessage();
+        }
+      });
+      this.updateCount();
       this.updateCountMessage();
     }
     bindChangeEvents() {
-      this.$textarea.addEventListener('keyup', () => this.handleKeyUp());
+      this.$textarea.addEventListener('input', () => this.handleInput());
       this.$textarea.addEventListener('focus', () => this.handleFocus());
       this.$textarea.addEventListener('blur', () => this.handleBlur());
     }
-    handleKeyUp() {
+    handleInput() {
+      this.updateCount();
       this.updateVisibleCountMessage();
       this.lastInputTimestamp = Date.now();
     }
@@ -632,7 +517,7 @@
       this.updateScreenReaderCountMessage();
     }
     updateVisibleCountMessage() {
-      const remainingNumber = this.maxLength - this.count(this.$textarea.value);
+      const remainingNumber = this.maxLength - this.count;
       const isError = remainingNumber < 0;
       this.$visibleCountMessage.classList.toggle('govuk-character-count__message--disabled', !this.isOverThreshold());
       if (!this.$errorMessage) {
@@ -650,16 +535,18 @@
       }
       this.$screenReaderCountMessage.textContent = this.getCountMessage();
     }
-    count(text) {
+    updateCount() {
+      const text = this.$textarea.value;
       if (this.config.maxwords) {
         var _text$match;
         const tokens = (_text$match = text.match(/\S+/g)) != null ? _text$match : [];
-        return tokens.length;
+        this.count = tokens.length;
+        return;
       }
-      return text.length;
+      this.count = text.length;
     }
     getCountMessage() {
-      const remainingNumber = this.maxLength - this.count(this.$textarea.value);
+      const remainingNumber = this.maxLength - this.count;
       const countType = this.config.maxwords ? 'words' : 'characters';
       return this.formatCountMessage(remainingNumber, countType);
     }
@@ -676,7 +563,7 @@
       if (!this.config.threshold) {
         return true;
       }
-      const currentLength = this.count(this.$textarea.value);
+      const currentLength = this.count;
       const maxLength = this.maxLength;
       const thresholdValue = maxLength * this.config.threshold / 100;
       return thresholdValue <= currentLength;