defra_ruby_template 5.11.1 → 6.6.0

data/node_modules/govuk-frontend/dist/govuk/all.bundle.mjs

@@ -1,13 +1,7 @@
-const version = '5.10.2';
+const version = '6.6.0';
 
-function getFragmentFromUrl(url) {
-  if (!url.includes('#')) {
-    return undefined;
-  }
-  return url.split('#').pop();
-}
 function getBreakpoint(name) {
-  const property = `--govuk-frontend-breakpoint-${name}`;
+  const property = `--govuk-breakpoint-${name}`;
   const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
   return {
     property,
@@ -63,6 +57,9 @@ function isArray(option) {
 function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option);
 }
+function isScope($scope) {
+  return !!$scope && ($scope instanceof Element || $scope instanceof Document);
+}
 function formatErrorMessage(Component, message) {
   return `${Component.moduleName}: ${message}`;
 }
@@ -70,9 +67,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) {
@@ -84,11 +78,14 @@ class SupportError extends GOVUKFrontendError {
   /**
    * Checks if GOV.UK Frontend is supported on this page
    *
-   * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+   * @param {Element | Document | null | string} [scopeOrMessage] - HTML element `<body>` checked for browser support or support error message
    */
-  constructor($scope = document.body) {
-    const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
-    super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+  constructor(scopeOrMessage = document.body) {
+    let supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+    if (!isScope(scopeOrMessage)) {
+      supportMessage = 'GOV.UK Frontend initialised without `<script type="module">`';
+    }
+    super(typeof scopeOrMessage === 'string' ? scopeOrMessage : supportMessage);
     this.name = 'SupportError';
   }
 }
@@ -101,7 +98,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,
@@ -110,7 +107,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';
@@ -127,6 +126,7 @@ class InitError extends GOVUKFrontendError {
  * @import { ComponentWithModuleName } from '../common/index.mjs'
  */
 
+const _self$1 = typeof globalThis !== 'undefined' ? globalThis : self;
 class Component {
   /**
    * Returns the root element of the component
@@ -180,7 +180,7 @@ class Component {
 /**
  * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-Component.elementType = HTMLElement;
+Component.elementType = _self$1.HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
 class ConfigurableComponent extends Component {
@@ -205,10 +205,14 @@ class ConfigurableComponent extends Component {
       throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
     }
     const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
-    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {});
+    this._config = mergeConfigs(this._config, this[configOverride](datasetConfig), datasetConfig);
   }
 }
 function normaliseString(value, property) {
+  if (property != null && property.type && !['string', 'number', 'boolean'].includes(property.type)) {
+    return;
+  }
   const trimmedValue = value ? value.trim() : '';
   let output;
   let outputType = property == null ? void 0 : property.type;
@@ -250,6 +254,30 @@ function normaliseDataset(Component, dataset) {
   }
   return out;
 }
+function normaliseOptions(scopeOrOptions) {
+  let $scope = document;
+  let onError;
+  if (isObject(scopeOrOptions)) {
+    const options = scopeOrOptions;
+    if (isScope(options.scope) || options.scope === null) {
+      $scope = options.scope;
+    }
+    if (typeof options.onError === 'function') {
+      onError = options.onError;
+    }
+  }
+  if (isScope(scopeOrOptions)) {
+    $scope = scopeOrOptions;
+  } else if (scopeOrOptions === null) {
+    $scope = null;
+  } else if (typeof scopeOrOptions === 'function') {
+    onError = scopeOrOptions;
+  }
+  return {
+    scope: $scope,
+    onError
+  };
+}
 function mergeConfigs(...configObjects) {
   const formattedConfigObject = {};
   for (const configObject of configObjects) {
@@ -344,6 +372,20 @@ 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'
+ */
+
+function createElement(tagName, attributes = {}, children = []) {
+  const $element = document.createElement(tagName);
+  Object.entries(attributes).forEach(([name, value]) => {
+    $element.setAttribute(name, value);
+  });
+  for (const child of children) {
+    $element.append(child);
+  }
+  return $element;
+}
 
 class I18n {
   constructor(translations = {}, config = {}) {
@@ -358,7 +400,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;
@@ -400,8 +442,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) {
@@ -411,132 +453,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';
-  }
-};
 
 /**
  * Accordion component
@@ -561,24 +478,16 @@ class Accordion extends ConfigurableComponent {
   constructor($root, config = {}) {
     super($root, config);
     this.i18n = void 0;
-    this.controlsClass = 'govuk-accordion__controls';
-    this.showAllClass = 'govuk-accordion__show-all';
-    this.showAllTextClass = 'govuk-accordion__show-all-text';
     this.sectionClass = 'govuk-accordion__section';
-    this.sectionExpandedClass = 'govuk-accordion__section--expanded';
+    this.sectionExpandedModifier = 'govuk-accordion__section--expanded';
     this.sectionButtonClass = 'govuk-accordion__section-button';
     this.sectionHeaderClass = 'govuk-accordion__section-header';
     this.sectionHeadingClass = 'govuk-accordion__section-heading';
-    this.sectionHeadingDividerClass = 'govuk-accordion__section-heading-divider';
     this.sectionHeadingTextClass = 'govuk-accordion__section-heading-text';
-    this.sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus';
-    this.sectionShowHideToggleClass = 'govuk-accordion__section-toggle';
-    this.sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus';
-    this.sectionShowHideTextClass = 'govuk-accordion__section-toggle-text';
-    this.upChevronIconClass = 'govuk-accordion-nav__chevron';
-    this.downChevronIconClass = 'govuk-accordion-nav__chevron--down';
+    this.sectionToggleTextClass = 'govuk-accordion__section-toggle-text';
+    this.iconClass = 'govuk-accordion-nav__chevron';
+    this.iconOpenModifier = 'govuk-accordion-nav__chevron--down';
     this.sectionSummaryClass = 'govuk-accordion__section-summary';
-    this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus';
     this.sectionContentClass = 'govuk-accordion__section-content';
     this.$sections = void 0;
     this.$showAllButton = null;
@@ -598,19 +507,23 @@ class Accordion extends ConfigurableComponent {
     this.updateShowAllButton(this.areAllSectionsOpen());
   }
   initControls() {
-    this.$showAllButton = document.createElement('button');
-    this.$showAllButton.setAttribute('type', 'button');
-    this.$showAllButton.setAttribute('class', this.showAllClass);
-    this.$showAllButton.setAttribute('aria-expanded', 'false');
-    this.$showAllIcon = document.createElement('span');
-    this.$showAllIcon.classList.add(this.upChevronIconClass);
+    this.$showAllButton = createElement('button', {
+      type: 'button',
+      class: 'govuk-accordion__show-all',
+      'aria-expanded': 'false'
+    });
+    this.$showAllIcon = createElement('span', {
+      class: this.iconClass
+    });
     this.$showAllButton.appendChild(this.$showAllIcon);
-    const $accordionControls = document.createElement('div');
-    $accordionControls.setAttribute('class', this.controlsClass);
+    const $accordionControls = createElement('div', {
+      class: 'govuk-accordion__controls'
+    });
     $accordionControls.appendChild(this.$showAllButton);
     this.$root.insertBefore($accordionControls, this.$root.firstChild);
-    this.$showAllText = document.createElement('span');
-    this.$showAllText.classList.add(this.showAllTextClass);
+    this.$showAllText = createElement('span', {
+      class: 'govuk-accordion__show-all-text'
+    });
     this.$showAllButton.appendChild(this.$showAllText);
     this.$showAllButton.addEventListener('click', () => this.onShowOrHideAllToggle());
     if ('onbeforematch' in document) {
@@ -648,39 +561,45 @@ class Accordion extends ConfigurableComponent {
         identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
       });
     }
-    const $button = document.createElement('button');
-    $button.setAttribute('type', 'button');
-    $button.setAttribute('aria-controls', `${this.$root.id}-content-${index + 1}`);
+    const $button = createElement('button', {
+      type: 'button',
+      'aria-controls': `${this.$root.id}-content-${index + 1}`
+    });
     for (const attr of Array.from($span.attributes)) {
       if (attr.name !== 'id') {
         $button.setAttribute(attr.name, attr.value);
       }
     }
-    const $headingText = document.createElement('span');
-    $headingText.classList.add(this.sectionHeadingTextClass);
-    $headingText.id = $span.id;
-    const $headingTextFocus = document.createElement('span');
-    $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass);
+    const $headingText = createElement('span', {
+      class: this.sectionHeadingTextClass,
+      id: $span.id
+    });
+    const $headingTextFocus = createElement('span', {
+      class: 'govuk-accordion__section-heading-text-focus'
+    });
     $headingText.appendChild($headingTextFocus);
     Array.from($span.childNodes).forEach($child => $headingTextFocus.appendChild($child));
-    const $showHideToggle = document.createElement('span');
-    $showHideToggle.classList.add(this.sectionShowHideToggleClass);
-    $showHideToggle.setAttribute('data-nosnippet', '');
-    const $showHideToggleFocus = document.createElement('span');
-    $showHideToggleFocus.classList.add(this.sectionShowHideToggleFocusClass);
+    const $showHideToggle = createElement('span', {
+      class: 'govuk-accordion__section-toggle',
+      'data-nosnippet': ''
+    });
+    const $showHideToggleFocus = createElement('span', {
+      class: 'govuk-accordion__section-toggle-focus'
+    });
     $showHideToggle.appendChild($showHideToggleFocus);
-    const $showHideText = document.createElement('span');
-    const $showHideIcon = document.createElement('span');
-    $showHideIcon.classList.add(this.upChevronIconClass);
-    $showHideToggleFocus.appendChild($showHideIcon);
-    $showHideText.classList.add(this.sectionShowHideTextClass);
-    $showHideToggleFocus.appendChild($showHideText);
+    $showHideToggleFocus.appendChild(createElement('span', {
+      class: this.iconClass
+    }));
+    $showHideToggleFocus.appendChild(createElement('span', {
+      class: this.sectionToggleTextClass
+    }));
     $button.appendChild($headingText);
     $button.appendChild(this.getButtonPunctuationEl());
     if ($summary) {
-      const $summarySpan = document.createElement('span');
-      const $summarySpanFocus = document.createElement('span');
-      $summarySpanFocus.classList.add(this.sectionSummaryFocusClass);
+      const $summarySpan = createElement('span');
+      const $summarySpanFocus = createElement('span', {
+        class: 'govuk-accordion__section-summary-focus'
+      });
       $summarySpan.appendChild($summarySpanFocus);
       for (const attr of Array.from($summary.attributes)) {
         $summarySpan.setAttribute(attr.name, attr.value);
@@ -718,8 +637,8 @@ class Accordion extends ConfigurableComponent {
     this.updateShowAllButton(nowExpanded);
   }
   setExpanded(expanded, $section) {
-    const $showHideIcon = $section.querySelector(`.${this.upChevronIconClass}`);
-    const $showHideText = $section.querySelector(`.${this.sectionShowHideTextClass}`);
+    const $showHideIcon = $section.querySelector(`.${this.iconClass}`);
+    const $showHideText = $section.querySelector(`.${this.sectionToggleTextClass}`);
     const $button = $section.querySelector(`.${this.sectionButtonClass}`);
     const $content = $section.querySelector(`.${this.sectionContentClass}`);
     if (!$content) {
@@ -737,28 +656,28 @@ 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);
     $button.setAttribute('aria-label', ariaLabelParts.join(' , '));
     if (expanded) {
       $content.removeAttribute('hidden');
-      $section.classList.add(this.sectionExpandedClass);
-      $showHideIcon.classList.remove(this.downChevronIconClass);
+      $section.classList.add(this.sectionExpandedModifier);
+      $showHideIcon.classList.remove(this.iconOpenModifier);
     } else {
       $content.setAttribute('hidden', 'until-found');
-      $section.classList.remove(this.sectionExpandedClass);
-      $showHideIcon.classList.add(this.downChevronIconClass);
+      $section.classList.remove(this.sectionExpandedModifier);
+      $showHideIcon.classList.add(this.iconOpenModifier);
     }
     this.updateShowAllButton(this.areAllSectionsOpen());
   }
   isExpanded($section) {
-    return $section.classList.contains(this.sectionExpandedClass);
+    return $section.classList.contains(this.sectionExpandedModifier);
   }
   areAllSectionsOpen() {
     return Array.from(this.$sections).every($section => this.isExpanded($section));
@@ -769,7 +688,7 @@ class Accordion extends ConfigurableComponent {
     }
     this.$showAllButton.setAttribute('aria-expanded', expanded.toString());
     this.$showAllText.textContent = expanded ? this.i18n.t('hideAllSections') : this.i18n.t('showAllSections');
-    this.$showAllIcon.classList.toggle(this.downChevronIconClass, !expanded);
+    this.$showAllIcon.classList.toggle(this.iconOpenModifier, !expanded);
   }
 
   /**
@@ -794,7 +713,7 @@ class Accordion extends ConfigurableComponent {
     if (id) {
       try {
         window.sessionStorage.setItem(id, isExpanded.toString());
-      } catch (exception) {}
+      } catch (_unused) {}
     }
   }
   setInitialState($section) {
@@ -808,14 +727,15 @@ class Accordion extends ConfigurableComponent {
         if (state !== null) {
           this.setExpanded(state === 'true', $section);
         }
-      } catch (exception) {}
+      } catch (_unused2) {}
     }
   }
   getButtonPunctuationEl() {
-    const $punctuationEl = document.createElement('span');
-    $punctuationEl.classList.add('govuk-visually-hidden', this.sectionHeadingDividerClass);
-    $punctuationEl.textContent = ', ';
-    return $punctuationEl;
+    const $element = createElement('span', {
+      class: 'govuk-visually-hidden govuk-accordion__section-heading-divider'
+    });
+    $element.textContent = ', ';
+    return $element;
   }
 }
 
@@ -971,6 +891,14 @@ class CharacterCount extends ConfigurableComponent {
         maxwords: undefined
       };
     }
+    if ('maxwords' in datasetConfig || this.config.maxwords !== undefined) {
+      console.warn(formatErrorMessage(CharacterCount, 'Option `maxwords` is deprecated. Use `maxlength` with `countType: "words"` instead.'));
+      if (!('maxlength' in datasetConfig)) {
+        var _datasetConfig$maxwor;
+        configOverrides.maxlength = (_datasetConfig$maxwor = datasetConfig.maxwords) != null ? _datasetConfig$maxwor : this.config.maxwords;
+        configOverrides.countType = 'words';
+      }
+    }
     return configOverrides;
   }
 
@@ -979,9 +907,11 @@ class CharacterCount extends ConfigurableComponent {
    * @param {CharacterCountConfig} [config] - Character count config
    */
   constructor($root, config = {}) {
-    var _ref, _this$config$maxwords;
+    var _this$config$maxlengt;
     super($root, config);
     this.$textarea = void 0;
+    this.count = 0;
+    this.segmenter = null;
     this.$visibleCountMessage = void 0;
     this.$screenReaderCountMessage = void 0;
     this.lastInputTimestamp = null;
@@ -1005,7 +935,15 @@ class CharacterCount extends ConfigurableComponent {
     this.i18n = new I18n(this.config.i18n, {
       locale: closestAttributeValue(this.$root, 'lang')
     });
-    this.maxLength = (_ref = (_this$config$maxwords = this.config.maxwords) != null ? _this$config$maxwords : this.config.maxlength) != null ? _ref : Infinity;
+    if (this.config.countType === 'characters' || this.config.countType === 'words' && this.config.maxwords === undefined) {
+      if (!('Segmenter' in Intl)) {
+        throw new SupportError(formatErrorMessage(CharacterCount, 'Support for "Intl.Segmenter" required'));
+      }
+      this.segmenter = new Intl.Segmenter(this.i18n.locale, {
+        granularity: this.config.countType === 'words' ? 'word' : 'grapheme'
+      });
+    }
+    this.maxLength = (_this$config$maxlengt = this.config.maxlength) != null ? _this$config$maxlengt : Infinity;
     this.$textarea = $textarea;
     const textareaDescriptionId = `${this.$textarea.id}-info`;
     const $textareaDescription = document.getElementById(textareaDescriptionId);
@@ -1017,35 +955,43 @@ class CharacterCount extends ConfigurableComponent {
       });
     }
     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
       });
     }
     this.$textarea.insertAdjacentElement('afterend', $textareaDescription);
-    const $screenReaderCountMessage = document.createElement('div');
-    $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
-    $screenReaderCountMessage.setAttribute('aria-live', 'polite');
+    const $screenReaderCountMessage = createElement('div', {
+      class: 'govuk-character-count__sr-status govuk-visually-hidden',
+      'aria-live': 'polite'
+    });
     this.$screenReaderCountMessage = $screenReaderCountMessage;
     $textareaDescription.insertAdjacentElement('afterend', $screenReaderCountMessage);
-    const $visibleCountMessage = document.createElement('div');
-    $visibleCountMessage.className = $textareaDescription.className;
-    $visibleCountMessage.classList.add('govuk-character-count__status');
-    $visibleCountMessage.setAttribute('aria-hidden', 'true');
+    const $visibleCountMessage = createElement('div', {
+      class: `${$textareaDescription.className} govuk-character-count__status`,
+      'aria-hidden': 'true'
+    });
     this.$visibleCountMessage = $visibleCountMessage;
     $textareaDescription.insertAdjacentElement('afterend', $visibleCountMessage);
     $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();
   }
@@ -1072,7 +1018,7 @@ class CharacterCount extends ConfigurableComponent {
     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) {
@@ -1090,33 +1036,47 @@ class CharacterCount extends ConfigurableComponent {
     }
     this.$screenReaderCountMessage.textContent = this.getCountMessage();
   }
-  count(text) {
-    if (this.config.maxwords) {
-      var _text$match;
-      const tokens = (_text$match = text.match(/\S+/g)) != null ? _text$match : [];
-      return tokens.length;
+  updateCount() {
+    const text = this.$textarea.value;
+    if (this.config.countType === 'characters') {
+      this.count = this.segmenter ? Array.from(this.segmenter.segment(text)).length : 0;
+      return;
     }
-    return text.length;
+    if (this.config.countType === 'words') {
+      if (this.config.maxwords !== undefined) {
+        var _text$match$length, _text$match;
+        this.count = (_text$match$length = (_text$match = text.match(/\S+/g)) == null ? void 0 : _text$match.length) != null ? _text$match$length : 0;
+        return;
+      }
+      const segments = this.segmenter ? Array.from(this.segmenter.segment(text)) : [];
+      this.count = segments.filter(segment => segment.isWordLike).length;
+      return;
+    }
+    this.count = text.length;
   }
   getCountMessage() {
-    const remainingNumber = this.maxLength - this.count(this.$textarea.value);
-    const countType = this.config.maxwords ? 'words' : 'characters';
-    return this.formatCountMessage(remainingNumber, countType);
+    const remainingNumber = this.maxLength - this.count;
+    return this.formatCountMessage(remainingNumber);
   }
   formatCountMessage(remainingNumber, countType) {
+    countType = countType != null ? countType : this.config.countType;
+    let translationKeyPrefix = 'characters';
+    let translationKeySuffix = remainingNumber < 0 ? 'OverLimit' : 'UnderLimit';
+    if (countType === 'words') {
+      translationKeyPrefix = 'words';
+    }
     if (remainingNumber === 0) {
-      return this.i18n.t(`${countType}AtLimit`);
+      translationKeySuffix = 'AtLimit';
     }
-    const translationKeySuffix = remainingNumber < 0 ? 'OverLimit' : 'UnderLimit';
-    return this.i18n.t(`${countType}${translationKeySuffix}`, {
-      count: Math.abs(remainingNumber)
+    return this.i18n.t(`${translationKeyPrefix}${translationKeySuffix}`, {
+      count: remainingNumber === 0 ? undefined : Math.abs(remainingNumber)
     });
   }
   isOverThreshold() {
     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;
@@ -1128,13 +1088,15 @@ class CharacterCount extends ConfigurableComponent {
  *
  * @see {@link CharacterCount.defaults}
  * @typedef {object} CharacterCountConfig
- * @property {number} [maxlength] - The maximum number of characters.
- *   If maxwords is provided, the maxlength option will be ignored.
- * @property {number} [maxwords] - The maximum number of words. If maxwords is
- *   provided, the maxlength option will be ignored.
+ * @property {number} [maxlength] - The maximum number of characters (or words
+ *   if `countType` is set to `"words"`).
+ * @property {number} [maxwords] - Deprecated. Use `maxlength` and
+ *   `countType: "words"` instead.
  * @property {number} [threshold=0] - The percentage value of the limit at
  *   which point the count message is displayed. If this attribute is set, the
  *   count message will be hidden by default.
+ * @property {'characters' | 'length' | 'words'} [countType] - The count type
+ *   (`"characters"`, `"length"` or `"words"`) used to count the text.
  * @property {CharacterCountTranslations} [i18n=CharacterCount.defaults.i18n] - Character count translations
  */
 
@@ -1180,9 +1142,9 @@ class CharacterCount extends ConfigurableComponent {
  * @property {TranslationPluralForms} [textareaDescription] - Message made
  *   available to assistive technologies, if none is already present in the
  *   HTML, to describe that the component accepts only a limited amount of
- *   content. It is visible on the page when JavaScript is unavailable. The
- *   component will replace the `%{count}` placeholder with the value of the
- *   `maxlength` or `maxwords` parameter.
+ *   content. It is visible on the page if `countType` is not supported or
+ *   JavaScript is unavailable. The component will replace the `%{count}`
+ *   placeholder with the value of the `maxlength` parameter.
  */
 
 /**
@@ -1192,6 +1154,7 @@ class CharacterCount extends ConfigurableComponent {
 CharacterCount.moduleName = 'govuk-character-count';
 CharacterCount.defaults = Object.freeze({
   threshold: 0,
+  countType: 'length',
   i18n: {
     charactersUnderLimit: {
       one: 'You have %{count} character remaining',
@@ -1229,6 +1192,9 @@ CharacterCount.schema = Object.freeze({
     },
     threshold: {
       type: 'number'
+    },
+    countType: {
+      type: 'string'
     }
   },
   anyOf: [{
@@ -1377,7 +1343,7 @@ class ErrorSummary extends ConfigurableComponent {
     if (!($target instanceof HTMLAnchorElement)) {
       return false;
     }
-    const inputId = getFragmentFromUrl($target.href);
+    const inputId = $target.hash.replace('#', '');
     if (!inputId) {
       return false;
     }
@@ -1491,9 +1457,10 @@ class ExitThisPage extends ConfigurableComponent {
     window.addEventListener('pageshow', this.resetPage.bind(this));
   }
   initUpdateSpan() {
-    this.$updateSpan = document.createElement('span');
-    this.$updateSpan.setAttribute('role', 'status');
-    this.$updateSpan.className = 'govuk-visually-hidden';
+    this.$updateSpan = createElement('span', {
+      role: 'status',
+      class: 'govuk-visually-hidden'
+    });
     this.$root.appendChild(this.$updateSpan);
   }
   initButtonClickHandler() {
@@ -1503,13 +1470,14 @@ class ExitThisPage extends ConfigurableComponent {
     }
   }
   buildIndicator() {
-    this.$indicatorContainer = document.createElement('div');
-    this.$indicatorContainer.className = 'govuk-exit-this-page__indicator';
-    this.$indicatorContainer.setAttribute('aria-hidden', 'true');
+    this.$indicatorContainer = createElement('div', {
+      class: 'govuk-exit-this-page__indicator',
+      'aria-hidden': 'true'
+    });
     for (let i = 0; i < 3; i++) {
-      const $indicator = document.createElement('div');
-      $indicator.className = 'govuk-exit-this-page__indicator-light';
-      this.$indicatorContainer.appendChild($indicator);
+      this.$indicatorContainer.appendChild(createElement('div', {
+        class: 'govuk-exit-this-page__indicator-light'
+      }));
     }
     this.$button.appendChild(this.$indicatorContainer);
   }
@@ -1529,9 +1497,10 @@ class ExitThisPage extends ConfigurableComponent {
     }
     this.$updateSpan.textContent = '';
     document.body.classList.add('govuk-exit-this-page-hide-content');
-    this.$overlay = document.createElement('div');
-    this.$overlay.className = 'govuk-exit-this-page-overlay';
-    this.$overlay.setAttribute('role', 'alert');
+    this.$overlay = createElement('div', {
+      class: 'govuk-exit-this-page-overlay',
+      role: 'alert'
+    });
     document.body.appendChild(this.$overlay);
     this.$overlay.textContent = this.i18n.t('activated');
     window.location.href = this.$button.href;
@@ -1675,22 +1644,19 @@ class FileUpload extends ConfigurableComponent {
     this.$input = void 0;
     this.$button = void 0;
     this.$status = void 0;
+    this.$label = void 0;
     this.i18n = void 0;
     this.id = void 0;
     this.$announcements = void 0;
     this.enteredAnotherElement = void 0;
-    const $input = this.$root.querySelector('input');
+    const $input = this.$root.querySelector('input[type="file"]');
     if ($input === null) {
       throw new ElementError({
         component: FileUpload,
         identifier: 'File inputs (`<input type="file">`)'
       });
     }
-    if ($input.type !== 'file') {
-      throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
-    }
     this.$input = $input;
-    this.$input.setAttribute('hidden', 'true');
     if (!this.$input.id) {
       throw new ElementError({
         component: FileUpload,
@@ -1705,56 +1671,67 @@ class FileUpload extends ConfigurableComponent {
     if (!$label.id) {
       $label.id = `${this.id}-label`;
     }
+    this.$label = $label;
     this.$input.id = `${this.id}-input`;
-    const $button = document.createElement('button');
-    $button.classList.add('govuk-file-upload-button');
-    $button.type = 'button';
-    $button.id = this.id;
-    $button.classList.add('govuk-file-upload-button--empty');
+    this.$input.setAttribute('hidden', 'hidden');
+    this.$status = this.createStatus();
+    this.$button = this.createButton();
+    this.$root.insertAdjacentElement('afterbegin', this.$button);
+    this.$input.addEventListener('change', this.onChange.bind(this));
+    this.updateDisabledState();
+    this.observeDisabledState();
+    this.$announcements = createElement('span', {
+      class: 'govuk-file-upload-announcements govuk-visually-hidden',
+      'aria-live': 'assertive'
+    });
+    this.$root.insertAdjacentElement('afterend', this.$announcements);
+    this.bindDraggingEvents();
+  }
+  createStatus() {
+    const $status = createElement('span', {
+      class: 'govuk-body govuk-file-upload-button__status',
+      'aria-live': 'polite'
+    });
+    $status.innerText = this.i18n.t('noFileChosen');
+    return $status;
+  }
+  createButton() {
+    const $button = createElement('button', {
+      class: 'govuk-file-upload-button govuk-file-upload-button--empty',
+      type: 'button',
+      id: this.id
+    });
     const ariaDescribedBy = this.$input.getAttribute('aria-describedby');
     if (ariaDescribedBy) {
       $button.setAttribute('aria-describedby', ariaDescribedBy);
     }
-    const $status = document.createElement('span');
-    $status.className = 'govuk-body govuk-file-upload-button__status';
-    $status.setAttribute('aria-live', 'polite');
-    $status.innerText = this.i18n.t('noFileChosen');
-    $button.appendChild($status);
-    const commaSpan = document.createElement('span');
-    commaSpan.className = 'govuk-visually-hidden';
-    commaSpan.innerText = ', ';
-    commaSpan.id = `${this.id}-comma`;
+    $button.appendChild(this.$status);
+    const commaSpan = createElement('span', {
+      class: 'govuk-visually-hidden',
+      id: `${this.id}-comma`
+    }, [', ']);
     $button.appendChild(commaSpan);
-    const containerSpan = document.createElement('span');
-    containerSpan.className = 'govuk-file-upload-button__pseudo-button-container';
-    const buttonSpan = document.createElement('span');
-    buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button';
-    buttonSpan.innerText = this.i18n.t('chooseFilesButton');
+    const containerSpan = createElement('span', {
+      class: 'govuk-file-upload-button__pseudo-button-container'
+    });
+    const buttonSpan = createElement('span', {
+      class: 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button'
+    }, [this.i18n.t('chooseFilesButton')]);
     containerSpan.appendChild(buttonSpan);
     containerSpan.insertAdjacentText('beforeend', ' ');
-    const instructionSpan = document.createElement('span');
-    instructionSpan.className = 'govuk-body govuk-file-upload-button__instruction';
-    instructionSpan.innerText = this.i18n.t('dropInstruction');
+    const instructionSpan = createElement('span', {
+      class: 'govuk-body govuk-file-upload-button__instruction'
+    }, [this.i18n.t('dropInstruction')]);
     containerSpan.appendChild(instructionSpan);
     $button.appendChild(containerSpan);
-    $button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
+    $button.setAttribute('aria-labelledby', `${this.$label.id} ${commaSpan.id} ${$button.id}`);
     $button.addEventListener('click', this.onClick.bind(this));
     $button.addEventListener('dragover', event => {
       event.preventDefault();
     });
-    this.$root.insertAdjacentElement('afterbegin', $button);
-    this.$input.setAttribute('tabindex', '-1');
-    this.$input.setAttribute('aria-hidden', 'true');
-    this.$button = $button;
-    this.$status = $status;
-    this.$input.addEventListener('change', this.onChange.bind(this));
-    this.updateDisabledState();
-    this.observeDisabledState();
-    this.$announcements = document.createElement('span');
-    this.$announcements.classList.add('govuk-file-upload-announcements');
-    this.$announcements.classList.add('govuk-visually-hidden');
-    this.$announcements.setAttribute('aria-live', 'assertive');
-    this.$root.insertAdjacentElement('afterend', this.$announcements);
+    return $button;
+  }
+  bindDraggingEvents() {
     this.$button.addEventListener('drop', this.onDrop.bind(this));
     document.addEventListener('dragenter', this.updateDropzoneVisibility.bind(this));
     document.addEventListener('dragenter', () => {
@@ -1772,7 +1749,7 @@ class FileUpload extends ConfigurableComponent {
     if (this.$button.disabled) return;
     if (event.target instanceof Node) {
       if (this.$root.contains(event.target)) {
-        if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
+        if (event.dataTransfer && this.canDrop(event.dataTransfer)) {
           if (!this.$button.classList.contains('govuk-file-upload-button--dragging')) {
             this.showDraggingState();
             this.$announcements.innerText = this.i18n.t('enteredDropZone');
@@ -1794,12 +1771,30 @@ class FileUpload extends ConfigurableComponent {
   }
   onDrop(event) {
     event.preventDefault();
-    if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
+    if (event.dataTransfer && this.canFillInput(event.dataTransfer)) {
       this.$input.files = event.dataTransfer.files;
       this.$input.dispatchEvent(new CustomEvent('change'));
       this.hideDraggingState();
     }
   }
+  canFillInput(dataTransfer) {
+    return this.matchesInputCapacity(dataTransfer.files.length);
+  }
+  canDrop(dataTransfer) {
+    if (dataTransfer.items.length) {
+      return this.matchesInputCapacity(countFileItems(dataTransfer.items));
+    }
+    if (dataTransfer.types.length) {
+      return dataTransfer.types.includes('Files');
+    }
+    return true;
+  }
+  matchesInputCapacity(numberOfFiles) {
+    if (this.$input.multiple) {
+      return numberOfFiles > 0;
+    }
+    return numberOfFiles === 1;
+  }
   onChange() {
     const fileCount = this.$input.files.length;
     if (fileCount === 0) {
@@ -1843,9 +1838,16 @@ class FileUpload extends ConfigurableComponent {
   }
   updateDisabledState() {
     this.$button.disabled = this.$input.disabled;
-    this.$root.classList.toggle('govuk-drop-zone--disabled', this.$button.disabled);
+    this.$root.classList.toggle('govuk-file-upload-wrapper--disabled', this.$button.disabled);
   }
 }
+
+/**
+ * Counts the number of `DataTransferItem` whose kind is `file`
+ *
+ * @param {DataTransferItemList} list - The list
+ * @returns {number} - The number of items whose kind is `file` in the list
+ */
 FileUpload.moduleName = 'govuk-file-upload';
 FileUpload.defaults = Object.freeze({
   i18n: {
@@ -1867,10 +1869,14 @@ FileUpload.schema = Object.freeze({
     }
   }
 });
-function isContainingFiles(dataTransfer) {
-  const hasNoTypesInfo = dataTransfer.types.length === 0;
-  const isDraggingFiles = dataTransfer.types.some(type => type === 'Files');
-  return hasNoTypesInfo || isDraggingFiles;
+function countFileItems(list) {
+  let result = 0;
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].kind === 'file') {
+      result++;
+    }
+  }
+  return result;
 }
 
 /**
@@ -1908,89 +1914,6 @@ function isContainingFiles(dataTransfer) {
  * @import { TranslationPluralForms } from '../../i18n.mjs'
  */
 
-/**
- * Header component
- *
- * @preserve
- */
-class Header extends Component {
-  /**
-   * Apply a matchMedia for desktop which will trigger a state sync if the
-   * browser viewport moves between states.
-   *
-   * @param {Element | null} $root - HTML element to use for header
-   */
-  constructor($root) {
-    super($root);
-    this.$menuButton = void 0;
-    this.$menu = void 0;
-    this.menuIsOpen = false;
-    this.mql = null;
-    const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
-    if (!$menuButton) {
-      return this;
-    }
-    this.$root.classList.add('govuk-header--with-js-navigation');
-    const menuId = $menuButton.getAttribute('aria-controls');
-    if (!menuId) {
-      throw new ElementError({
-        component: Header,
-        identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
-      });
-    }
-    const $menu = document.getElementById(menuId);
-    if (!$menu) {
-      throw new ElementError({
-        component: Header,
-        element: $menu,
-        identifier: `Navigation (\`<ul id="${menuId}">\`)`
-      });
-    }
-    this.$menu = $menu;
-    this.$menuButton = $menuButton;
-    this.setupResponsiveChecks();
-    this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
-  }
-  setupResponsiveChecks() {
-    const breakpoint = getBreakpoint('desktop');
-    if (!breakpoint.value) {
-      throw new ElementError({
-        component: Header,
-        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
-      });
-    }
-    this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
-    if ('addEventListener' in this.mql) {
-      this.mql.addEventListener('change', () => this.checkMode());
-    } else {
-      this.mql.addListener(() => this.checkMode());
-    }
-    this.checkMode();
-  }
-  checkMode() {
-    if (!this.mql || !this.$menu || !this.$menuButton) {
-      return;
-    }
-    if (this.mql.matches) {
-      this.$menu.removeAttribute('hidden');
-      this.$menuButton.setAttribute('hidden', '');
-    } else {
-      this.$menuButton.removeAttribute('hidden');
-      this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
-      if (this.menuIsOpen) {
-        this.$menu.removeAttribute('hidden');
-      } else {
-        this.$menu.setAttribute('hidden', '');
-      }
-    }
-  }
-  handleMenuButtonClick() {
-    this.menuIsOpen = !this.menuIsOpen;
-    this.checkMode();
-  }
-}
-Header.moduleName = 'govuk-header';
-
 /**
  * Notification Banner component
  *
@@ -2082,9 +2005,10 @@ class PasswordInput extends ConfigurableComponent {
       locale: closestAttributeValue(this.$root, 'lang')
     });
     this.$showHideButton.removeAttribute('hidden');
-    const $screenReaderStatusMessage = document.createElement('div');
-    $screenReaderStatusMessage.className = 'govuk-password-input__sr-status govuk-visually-hidden';
-    $screenReaderStatusMessage.setAttribute('aria-live', 'polite');
+    const $screenReaderStatusMessage = createElement('div', {
+      class: 'govuk-password-input__sr-status govuk-visually-hidden',
+      'aria-live': 'polite'
+    });
     this.$screenReaderStatusMessage = $screenReaderStatusMessage;
     this.$input.insertAdjacentElement('afterend', $screenReaderStatusMessage);
     this.$showHideButton.addEventListener('click', this.toggle.bind(this));
@@ -2322,9 +2246,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');
@@ -2339,7 +2263,36 @@ 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);
+  }
+}
+
+const _self = typeof globalThis !== 'undefined' ? globalThis : self;
 /**
  * Skip link component
  *
@@ -2358,16 +2311,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`);
     }
@@ -2389,7 +2336,7 @@ class SkipLink extends Component {
     }));
   }
 }
-SkipLink.elementType = HTMLAnchorElement;
+SkipLink.elementType = _self.HTMLAnchorElement;
 SkipLink.moduleName = 'govuk-skip-link';
 
 /**
@@ -2523,7 +2470,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;
     }
@@ -2627,7 +2574,7 @@ class Tabs extends Component {
     this.createHistoryEntry($previousTab);
   }
   getPanel($tab) {
-    const panelId = getFragmentFromUrl($tab.href);
+    const panelId = $tab.hash.replace('#', '');
     if (!panelId) {
       return null;
     }
@@ -2675,28 +2622,34 @@ Tabs.moduleName = 'govuk-tabs';
  * Use the `data-module` attributes to find, instantiate and init all of the
  * components provided as part of GOV.UK Frontend.
  *
- * @param {Config & { scope?: Element, onError?: OnErrorCallback<CompatibleClass> }} [config] - Config for all components (with optional scope)
+ * @param {Config | Element | Document | null} [scopeOrConfig] - Scope of the document to search within or config for all components (with optional scope)
  */
-function initAll(config) {
-  var _config$scope;
-  config = typeof config !== 'undefined' ? config : {};
-  if (!isSupported()) {
-    if (config.onError) {
-      config.onError(new SupportError(), {
+function initAll(scopeOrConfig = {}) {
+  const config = isObject(scopeOrConfig) ? scopeOrConfig : {};
+  const options = normaliseOptions(scopeOrConfig);
+  try {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+    if (options.scope === null) {
+      throw new ElementError({
+        element: options.scope,
+        identifier: 'GOV.UK Frontend scope element (`$scope`)'
+      });
+    }
+  } catch (error) {
+    if (options.onError) {
+      options.onError(error, {
         config
       });
     } else {
-      console.log(new SupportError());
+      console.log(error);
     }
     return;
   }
-  const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
-  const options = {
-    scope: (_config$scope = config.scope) != null ? _config$scope : document,
-    onError: config.onError
-  };
-  components.forEach(([Component, config]) => {
-    createAll(Component, config, options);
+  const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+  components.forEach(([Component, componentConfig]) => {
+    createAll(Component, componentConfig, options);
   });
 }
 
@@ -2712,42 +2665,42 @@ function initAll(config) {
  * @template {CompatibleClass} ComponentClass
  * @param {ComponentClass} Component - class of the component to create
  * @param {ComponentConfig<ComponentClass>} [config] - Config supplied to component
- * @param {OnErrorCallback<ComponentClass> | Element | Document | CreateAllOptions<ComponentClass> } [createAllOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
+ * @param {OnErrorCallback<ComponentClass> | Element | Document | null | CreateAllOptions<ComponentClass>} [scopeOrOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
  * @returns {Array<InstanceType<ComponentClass>>} - array of instantiated components
  */
-function createAll(Component, config, createAllOptions) {
-  let $scope = document;
-  let onError;
-  if (typeof createAllOptions === 'object') {
-    var _createAllOptions$sco;
-    createAllOptions = createAllOptions;
-    $scope = (_createAllOptions$sco = createAllOptions.scope) != null ? _createAllOptions$sco : $scope;
-    onError = createAllOptions.onError;
-  }
-  if (typeof createAllOptions === 'function') {
-    onError = createAllOptions;
-  }
-  if (createAllOptions instanceof HTMLElement) {
-    $scope = createAllOptions;
-  }
-  const $elements = $scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
-  if (!isSupported()) {
-    if (onError) {
-      onError(new SupportError(), {
+function createAll(Component, config, scopeOrOptions) {
+  let $elements;
+  const options = normaliseOptions(scopeOrOptions);
+  try {
+    var _options$scope;
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+    if (options.scope === null) {
+      throw new ElementError({
+        element: options.scope,
+        component: Component,
+        identifier: 'Scope element (`$scope`)'
+      });
+    }
+    $elements = (_options$scope = options.scope) == null ? void 0 : _options$scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+  } catch (error) {
+    if (options.onError) {
+      options.onError(error, {
         component: Component,
         config
       });
     } else {
-      console.log(new SupportError());
+      console.log(error);
     }
     return [];
   }
-  return Array.from($elements).map($element => {
+  return Array.from($elements != null ? $elements : []).map($element => {
     try {
       return typeof config !== 'undefined' ? new Component($element, config) : new Component($element);
     } catch (error) {
-      if (onError) {
-        onError(error, {
+      if (options.onError) {
+        options.onError(error, {
           element: $element,
           component: Component,
           config
@@ -2766,14 +2719,16 @@ function createAll(Component, config, createAllOptions) {
  * Config for all components via `initAll()`
  *
  * @typedef {object} Config
- * @property {AccordionConfig} [accordion] - Accordion config
- * @property {ButtonConfig} [button] - Button config
- * @property {CharacterCountConfig} [characterCount] - Character Count config
- * @property {ErrorSummaryConfig} [errorSummary] - Error Summary config
- * @property {ExitThisPageConfig} [exitThisPage] - Exit This Page config
- * @property {FileUploadConfig} [fileUpload] - File Upload config
- * @property {NotificationBannerConfig} [notificationBanner] - Notification Banner config
- * @property {PasswordInputConfig} [passwordInput] - Password input config
+ * @property {Element | Document | null} [scope] - Scope of the document to search within
+ * @property {OnErrorCallback<CompatibleClass>} [onError] - Initialisation error callback
+ * @property {ComponentConfig<typeof Accordion>} [accordion] - Accordion config
+ * @property {ComponentConfig<typeof Button>} [button] - Button config
+ * @property {ComponentConfig<typeof CharacterCount>} [characterCount] - Character Count config
+ * @property {ComponentConfig<typeof ErrorSummary>} [errorSummary] - Error Summary config
+ * @property {ComponentConfig<typeof ExitThisPage>} [exitThisPage] - Exit This Page config
+ * @property {ComponentConfig<typeof FileUpload>} [fileUpload] - File Upload config
+ * @property {ComponentConfig<typeof NotificationBanner>} [notificationBanner] - Notification Banner config
+ * @property {ComponentConfig<typeof PasswordInput>} [passwordInput] - Password input config
  */
 /**
  * Config for individual components
@@ -2790,7 +2745,7 @@ function createAll(Component, config, createAllOptions) {
 /**
  * Component config keys, e.g. `accordion` and `characterCount`
  *
- * @typedef {keyof Config} ConfigKey
+ * @typedef {keyof Omit<Config, 'scope' | 'onError'>} ConfigKey
  */
 /**
  * @template {CompatibleClass} ComponentClass
@@ -2801,7 +2756,7 @@ function createAll(Component, config, createAllOptions) {
  * @typedef {object} ErrorContext
  * @property {Element} [element] - Element used for component module initialisation
  * @property {ComponentClass} [component] - Class of component
- * @property {ComponentConfig<ComponentClass>} config - Config supplied to component
+ * @property {Config | ComponentConfig<ComponentClass>} [config] - Config supplied to components
  */
 /**
  * @template {CompatibleClass} ComponentClass
@@ -2812,9 +2767,9 @@ function createAll(Component, config, createAllOptions) {
 /**
  * @template {CompatibleClass} ComponentClass
  * @typedef {object} CreateAllOptions
- * @property {Element | Document} [scope] - scope of the document to search within
+ * @property {Element | Document | null} [scope] - scope of the document to search within
  * @property {OnErrorCallback<ComponentClass>} [onError] - callback function if error throw by component on init
  */
 
-export { Accordion, Button, CharacterCount, Checkboxes, Component, ConfigurableComponent, ErrorSummary, ExitThisPage, FileUpload, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
+export { Accordion, Button, CharacterCount, Checkboxes, Component, ConfigurableComponent, ErrorSummary, ExitThisPage, FileUpload, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
 //# sourceMappingURL=all.bundle.mjs.map