govuk_tech_docs 5.2.1 → 6.0.0.beta

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

@@ -15,23 +15,16 @@
     // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
     // background-color and color need to always be set together, color should
     // not be set either
-    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);
 
     // Disable inner shadow and remove rounded corners
     -webkit-appearance: none;
             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` for this
-      // instead of changing `border-width` - this is for consistency with
-      // components such as textarea where we avoid changing `border-width` as
-      // it will change the element size. Also, `outline` cannot be utilised
-      // here as it 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 {
@@ -53,10 +46,10 @@
   }
 
   .govuk-input--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);
     }
   }
 
@@ -109,7 +102,7 @@
     }
 
     // Split prefix/suffix onto separate lines on narrow screens
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       display: block;
 
       .govuk-input {
@@ -130,15 +123,16 @@
     min-width: govuk-px-to-rem(40px);
     height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-    background-color: govuk-colour("light-grey");
+    border: $govuk-border-width-form-element solid;
+    border-color: govuk-functional-colour(input-border);
+    background-color: govuk-colour("black", $variant: "tint-95");
     text-align: center;
     white-space: nowrap;
     // Emphasise non-editable status of prefixes and suffixes
     cursor: default;
     flex: 0 0 auto;
     // Split prefix/suffix onto separate lines on narrow screens
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       display: block;
       height: 100%;
       white-space: normal;
@@ -146,20 +140,20 @@
   }
 
   .govuk-input__prefix {
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       border-bottom: 0;
     }
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       border-right: 0;
     }
   }
 
   // Split prefix/suffix onto separate lines on narrow screens
   .govuk-input__suffix {
-    @include govuk-media-query($until: mobile) {
+    @media #{govuk-until-breakpoint(mobile)} {
       border-top: 0;
     }
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       border-left: 0;
     }
   }

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

@@ -10,7 +10,8 @@
 
     clear: both;
 
-    border-left: $govuk-border-width-wide solid $govuk-border-colour;
+    border-left: $govuk-border-width-wide solid;
+    border-left-color: govuk-functional-colour(border);
 
     > :first-child {
       margin-top: 0;

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

@@ -3,12 +3,14 @@
     @include govuk-font($size: 19);
     @include govuk-responsive-margin(8, "bottom");
 
-    border: $govuk-border-width solid $govuk-brand-colour;
+    border: $govuk-border-width solid;
+    border-color: govuk-functional-colour(brand);
 
-    background-color: $govuk-brand-colour;
+    background-color: govuk-functional-colour(brand);
 
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline: $govuk-focus-width solid;
+      outline-color: govuk-functional-colour(focus);
     }
   }
 
@@ -19,7 +21,7 @@
     // text in high contrast mode
     border-bottom: 1px solid transparent;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: 2px govuk-spacing(4) govuk-spacing(1);
     }
   }
@@ -39,9 +41,9 @@
     @include govuk-text-colour;
     padding: govuk-spacing(3);
 
-    background-color: $govuk-body-background-colour;
+    background-color: govuk-functional-colour(body-background);
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       padding: $padding-tablet;
     }
 
@@ -80,9 +82,9 @@
   }
 
   .govuk-notification-banner--success {
-    border-color: $govuk-success-colour;
+    border-color: govuk-functional-colour(success);
 
-    background-color: $govuk-success-colour;
+    background-color: govuk-functional-colour(success);
 
     .govuk-notification-banner__link {
       @include govuk-link-style-success;

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js

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

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs

@@ -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) {
@@ -85,7 +82,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,
@@ -94,7 +91,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';
@@ -308,6 +307,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'
+ */
 
 /**
  * Notification Banner component

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

@@ -8,7 +8,7 @@
     align-items: center;
     flex-wrap: wrap;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       flex-direction: row;
       align-items: flex-start;
     }
@@ -32,7 +32,7 @@
     float: left; // Float is ignored if flex is active for prev/next links
 
     &:hover {
-      background-color: govuk-colour("light-grey");
+      background-color: govuk-colour("black", $variant: "tint-95");
     }
   }
 
@@ -45,7 +45,7 @@
     // visually sit in the middle of their touch area
     text-align: center;
 
-    @include govuk-media-query($from: tablet) {
+    @media #{govuk-from-breakpoint(tablet)} {
       display: block;
     }
   }
@@ -72,7 +72,7 @@
 
   // Only show first, last and non-link items on mobile
   .govuk-pagination__item--current,
-  .govuk-pagination__item--ellipses,
+  .govuk-pagination__item--ellipsis,
   .govuk-pagination__item:first-child,
   .govuk-pagination__item:last-child {
     display: block;
@@ -81,10 +81,10 @@
   .govuk-pagination__item--current {
     @include govuk-typography-weight-bold;
     outline: 1px solid transparent;
-    background-color: $govuk-link-colour;
+    background-color: govuk-functional-colour(link);
 
     &:hover {
-      background-color: $govuk-link-colour;
+      background-color: govuk-functional-colour(link);
     }
 
     .govuk-pagination__link {
@@ -92,9 +92,9 @@
     }
   }
 
-  .govuk-pagination__item--ellipses {
+  .govuk-pagination__item--ellipsis {
     @include govuk-typography-weight-bold;
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
 
     // Remove hover state for ellipsis items as they don't contain links
     &:hover {
@@ -134,7 +134,7 @@
 
     &:focus {
       .govuk-pagination__icon {
-        color: $govuk-focus-text-colour;
+        color: govuk-functional-colour(focus-text);
       }
 
       .govuk-pagination__link-label {
@@ -147,6 +147,10 @@
     }
   }
 
+  .govuk-pagination__link-title {
+    text-decoration-thickness: inherit;
+  }
+
   .govuk-pagination__link-label {
     @include govuk-typography-weight-regular;
     @include govuk-link-decoration;
@@ -157,7 +161,7 @@
     // Set size using rems to make the icon scale with text
     width: govuk-px-to-rem(15px);
     height: govuk-px-to-rem(13px);
-    color: $govuk-secondary-text-colour;
+    color: govuk-functional-colour(secondary-text);
     fill: currentcolor;
     forced-color-adjust: auto;
   }
@@ -190,7 +194,8 @@
 
     // Only apply a border between prev and next if both are present
     .govuk-pagination__prev + .govuk-pagination__next {
-      border-top: 1px solid $govuk-border-colour;
+      border-top: 1px solid;
+      border-top-color: govuk-functional-colour(border);
     }
 
     // Set the after pseudo element to a block which makes the title visually

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

@@ -11,8 +11,8 @@
 
     text-align: center;
 
-    @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
+    @media #{govuk-until-breakpoint(tablet)} {
+      padding: govuk-spacing(4) - $govuk-border-width;
 
       // This is an if-all-else-fails attempt to stop long words from
       // overflowing the container on very narrow viewports by forcing them to
@@ -36,9 +36,9 @@
     color: govuk-colour("white");
     background: govuk-colour("green");
 
-    @include govuk-media-query($media-type: print) {
+    @media print {
       border-color: currentcolor;
-      color: $govuk-print-text-colour;
+      color: govuk-functional-colour(print-text);
       background: none;
     }
   }

data/node_modules/govuk-frontend/dist/govuk/components/password-input/_index.scss

@@ -8,7 +8,7 @@
     //   breakpoint
     // - being display: flex above the mobile breakpoint
 
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       flex-direction: row;
 
       // The default of `stretch` makes the toggle button appear taller than the
@@ -41,7 +41,7 @@
       display: none;
     }
 
-    @include govuk-media-query($from: mobile) {
+    @media #{govuk-from-breakpoint(mobile)} {
       // Buttons are normally 100% wide on mobile, but we don't want that here
       width: auto;
       flex-shrink: 0;

data/node_modules/govuk-frontend/dist/govuk/components/password-input/password-input.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';
@@ -295,6 +294,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 = {}) {
@@ -309,7 +311,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;
@@ -351,8 +353,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) {
@@ -362,132 +364,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';
-    }
-  };
 
   /**
    * Password input component