RubyGems - govuk_publishing_components - Versions diffs - 44.1.0 → 44.2.0 - Mend

govuk_publishing_components 44.1.0 → 44.2.0

Files changed (139) hide show

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

@@ -1,4 +1,4 @@
-const version = '5.5.0';
+const version = '5.7.0';
 function normaliseString(value, property) {
   const trimmedValue = value ? value.trim() : '';
@@ -108,6 +108,19 @@ function setFocus($element, options = {}) {
   (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);
   $element.focus();
 }
+function isInitialised($root, moduleName) {
+  return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
+}
+/**
+ * Checks if GOV.UK Frontend is supported on this page
+ *
+ * Some browsers will load and run our JavaScript but GOV.UK Frontend
+ * won't be supported.
+ *
+ * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
+ * @returns {boolean} Whether GOV.UK Frontend is supported on this page
+ */
 function isSupported($scope = document.body) {
   if (!$scope) {
     return false;
@@ -140,6 +153,9 @@ function isArray(option) {
 function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option);
 }
+function formatErrorMessage(Component, message) {
+  return `${Component.moduleName}: ${message}`;
+}
 /**
  * Schema for component config
@@ -163,6 +179,10 @@ function isObject(option) {
  * @property {string[]} required - List of required config fields
  * @property {string} errorMessage - Error message when required config fields not provided
  */
+/**
+ * @typedef ComponentWithModuleName
+ * @property {string} moduleName - Name of the component
+ */
 function normaliseDataset(Component, dataset) {
   const out = {};
@@ -206,30 +226,85 @@ class ElementError extends GOVUKFrontendError {
     let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
     if (typeof messageOrOptions === 'object') {
       const {
-        componentName,
+        component,
         identifier,
         element,
         expectedType
       } = messageOrOptions;
-      message = `${componentName}: ${identifier}`;
+      message = identifier;
       message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+      message = formatErrorMessage(component, message);
     }
     super(message);
     this.name = 'ElementError';
   }
 }
+class InitError extends GOVUKFrontendError {
+  constructor(componentOrMessage) {
+    const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
+    super(message);
+    this.name = 'InitError';
+  }
+}
+/**
+ * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
+ */
 class GOVUKFrontendComponent {
-  constructor() {
-    this.checkSupport();
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {RootElementType} - the root element of component
+   */
+  get $root() {
+    return this._$root;
+  }
+  constructor($root) {
+    this._$root = void 0;
+    const childConstructor = this.constructor;
+    if (typeof childConstructor.moduleName !== 'string') {
+      throw new InitError(`\`moduleName\` not defined in component`);
+    }
+    if (!($root instanceof childConstructor.elementType)) {
+      throw new ElementError({
+        element: $root,
+        component: childConstructor,
+        identifier: 'Root element (`$root`)',
+        expectedType: childConstructor.elementType.name
+      });
+    } else {
+      this._$root = $root;
+    }
+    childConstructor.checkSupport();
+    this.checkInitialised();
+    const moduleName = childConstructor.moduleName;
+    this.$root.setAttribute(`data-${moduleName}-init`, '');
+  }
+  checkInitialised() {
+    const constructor = this.constructor;
+    const moduleName = constructor.moduleName;
+    if (moduleName && isInitialised(this.$root, moduleName)) {
+      throw new InitError(constructor);
+    }
   }
-  checkSupport() {
+  static checkSupport() {
     if (!isSupported()) {
       throw new SupportError();
     }
   }
 }
+/**
+ * @typedef ChildClass
+ * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
+ */
+/**
+ * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ */
+GOVUKFrontendComponent.elementType = HTMLElement;
 class I18n {
   constructor(translations = {}, config = {}) {
     var _config$locale;
@@ -439,12 +514,11 @@ I18n.pluralRules = {
  */
 class Accordion extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for accordion
+   * @param {Element | null} $root - HTML element to use for accordion
    * @param {AccordionConfig} [config] - Accordion config
    */
-  constructor($module, config = {}) {
-    super();
-    this.$module = void 0;
+  constructor($root, config = {}) {
+    super($root);
     this.config = void 0;
     this.i18n = void 0;
     this.controlsClass = 'govuk-accordion__controls';
@@ -470,20 +544,12 @@ class Accordion extends GOVUKFrontendComponent {
     this.$showAllButton = null;
     this.$showAllIcon = null;
     this.$showAllText = null;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Accordion',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    this.$module = $module;
-    this.config = mergeConfigs(Accordion.defaults, config, normaliseDataset(Accordion, $module.dataset));
+    this.config = mergeConfigs(Accordion.defaults, config, normaliseDataset(Accordion, this.$root.dataset));
     this.i18n = new I18n(this.config.i18n);
-    const $sections = this.$module.querySelectorAll(`.${this.sectionClass}`);
+    const $sections = this.$root.querySelectorAll(`.${this.sectionClass}`);
     if (!$sections.length) {
       throw new ElementError({
-        componentName: 'Accordion',
+        component: Accordion,
         identifier: `Sections (\`<div class="${this.sectionClass}">\`)`
       });
     }
@@ -503,7 +569,7 @@ class Accordion extends GOVUKFrontendComponent {
     const $accordionControls = document.createElement('div');
     $accordionControls.setAttribute('class', this.controlsClass);
     $accordionControls.appendChild(this.$showAllButton);
-    this.$module.insertBefore($accordionControls, this.$module.firstChild);
+    this.$root.insertBefore($accordionControls, this.$root.firstChild);
     this.$showAllText = document.createElement('span');
     this.$showAllText.classList.add(this.showAllTextClass);
     this.$showAllButton.appendChild(this.$showAllText);
@@ -517,7 +583,7 @@ class Accordion extends GOVUKFrontendComponent {
       const $header = $section.querySelector(`.${this.sectionHeaderClass}`);
       if (!$header) {
         throw new ElementError({
-          componentName: 'Accordion',
+          component: Accordion,
           identifier: `Section headers (\`<div class="${this.sectionHeaderClass}">\`)`
         });
       }
@@ -533,19 +599,19 @@ class Accordion extends GOVUKFrontendComponent {
     const $summary = $header.querySelector(`.${this.sectionSummaryClass}`);
     if (!$heading) {
       throw new ElementError({
-        componentName: 'Accordion',
+        component: Accordion,
         identifier: `Section heading (\`.${this.sectionHeadingClass}\`)`
       });
     }
     if (!$span) {
       throw new ElementError({
-        componentName: 'Accordion',
+        component: Accordion,
         identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
       });
     }
     const $button = document.createElement('button');
     $button.setAttribute('type', 'button');
-    $button.setAttribute('aria-controls', `${this.$module.id}-content-${index + 1}`);
+    $button.setAttribute('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);
@@ -619,7 +685,7 @@ class Accordion extends GOVUKFrontendComponent {
     const $content = $section.querySelector(`.${this.sectionContentClass}`);
     if (!$content) {
       throw new ElementError({
-        componentName: 'Accordion',
+        component: Accordion,
         identifier: `Section content (\`<div class="${this.sectionContentClass}">\`)`
       });
     }
@@ -782,25 +848,16 @@ const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
  */
 class Button extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for button
+   * @param {Element | null} $root - HTML element to use for button
    * @param {ButtonConfig} [config] - Button config
    */
-  constructor($module, config = {}) {
-    super();
-    this.$module = void 0;
+  constructor($root, config = {}) {
+    super($root);
     this.config = void 0;
     this.debounceFormSubmitTimer = null;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Button',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    this.$module = $module;
-    this.config = mergeConfigs(Button.defaults, config, normaliseDataset(Button, $module.dataset));
-    this.$module.addEventListener('keydown', event => this.handleKeyDown(event));
-    this.$module.addEventListener('click', event => this.debounce(event));
+    this.config = mergeConfigs(Button.defaults, config, normaliseDataset(Button, this.$root.dataset));
+    this.$root.addEventListener('keydown', event => this.handleKeyDown(event));
+    this.$root.addEventListener('click', event => this.debounce(event));
   }
   handleKeyDown(event) {
     const $target = event.target;
@@ -868,13 +925,12 @@ function closestAttributeValue($element, attributeName) {
  */
 class CharacterCount extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for character count
+   * @param {Element | null} $root - HTML element to use for character count
    * @param {CharacterCountConfig} [config] - Character count config
    */
-  constructor($module, config = {}) {
+  constructor($root, config = {}) {
     var _ref, _this$config$maxwords;
-    super();
-    this.$module = void 0;
+    super($root);
     this.$textarea = void 0;
     this.$visibleCountMessage = void 0;
     this.$screenReaderCountMessage = void 0;
@@ -884,23 +940,16 @@ class CharacterCount extends GOVUKFrontendComponent {
     this.config = void 0;
     this.i18n = void 0;
     this.maxLength = void 0;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Character count',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    const $textarea = $module.querySelector('.govuk-js-character-count');
+    const $textarea = this.$root.querySelector('.govuk-js-character-count');
     if (!($textarea instanceof HTMLTextAreaElement || $textarea instanceof HTMLInputElement)) {
       throw new ElementError({
-        componentName: 'Character count',
+        component: CharacterCount,
         element: $textarea,
         expectedType: 'HTMLTextareaElement or HTMLInputElement',
         identifier: 'Form field (`.govuk-js-character-count`)'
       });
     }
-    const datasetConfig = normaliseDataset(CharacterCount, $module.dataset);
+    const datasetConfig = normaliseDataset(CharacterCount, this.$root.dataset);
     let configOverrides = {};
     if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
       configOverrides = {
@@ -911,19 +960,18 @@ class CharacterCount extends GOVUKFrontendComponent {
     this.config = mergeConfigs(CharacterCount.defaults, config, configOverrides, datasetConfig);
     const errors = validateConfig(CharacterCount.schema, this.config);
     if (errors[0]) {
-      throw new ConfigError(`Character count: ${errors[0]}`);
+      throw new ConfigError(formatErrorMessage(CharacterCount, errors[0]));
     }
     this.i18n = new I18n(this.config.i18n, {
-      locale: closestAttributeValue($module, 'lang')
+      locale: closestAttributeValue(this.$root, 'lang')
     });
     this.maxLength = (_ref = (_this$config$maxwords = this.config.maxwords) != null ? _this$config$maxwords : this.config.maxlength) != null ? _ref : Infinity;
-    this.$module = $module;
     this.$textarea = $textarea;
     const textareaDescriptionId = `${this.$textarea.id}-info`;
     const $textareaDescription = document.getElementById(textareaDescriptionId);
     if (!$textareaDescription) {
       throw new ElementError({
-        componentName: 'Character count',
+        component: CharacterCount,
         element: $textareaDescription,
         identifier: `Count message (\`id="${textareaDescriptionId}"\`)`
       });
@@ -1167,27 +1215,18 @@ class Checkboxes extends GOVUKFrontendComponent {
    * (for example if the user has navigated back), and set up event handlers to
    * keep the reveal in sync with the checkbox state.
    *
-   * @param {Element | null} $module - HTML element to use for checkboxes
+   * @param {Element | null} $root - HTML element to use for checkboxes
    */
-  constructor($module) {
-    super();
-    this.$module = void 0;
+  constructor($root) {
+    super($root);
     this.$inputs = void 0;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Checkboxes',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    const $inputs = $module.querySelectorAll('input[type="checkbox"]');
+    const $inputs = this.$root.querySelectorAll('input[type="checkbox"]');
     if (!$inputs.length) {
       throw new ElementError({
-        componentName: 'Checkboxes',
+        component: Checkboxes,
         identifier: 'Form inputs (`<input type="checkbox">`)'
       });
     }
-    this.$module = $module;
     this.$inputs = $inputs;
     this.$inputs.forEach($input => {
       const targetId = $input.getAttribute('data-aria-controls');
@@ -1196,7 +1235,7 @@ class Checkboxes extends GOVUKFrontendComponent {
       }
       if (!document.getElementById(targetId)) {
         throw new ElementError({
-          componentName: 'Checkboxes',
+          component: Checkboxes,
           identifier: `Conditional reveal (\`id="${targetId}"\`)`
         });
       }
@@ -1205,7 +1244,7 @@ class Checkboxes extends GOVUKFrontendComponent {
     });
     window.addEventListener('pageshow', () => this.syncAllConditionalReveals());
     this.syncAllConditionalReveals();
-    this.$module.addEventListener('click', event => this.handleClick(event));
+    this.$root.addEventListener('click', event => this.handleClick(event));
   }
   syncAllConditionalReveals() {
     this.$inputs.forEach($input => this.syncConditionalRevealWithInputState($input));
@@ -1274,26 +1313,17 @@ Checkboxes.moduleName = 'govuk-checkboxes';
  */
 class ErrorSummary extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for error summary
+   * @param {Element | null} $root - HTML element to use for error summary
    * @param {ErrorSummaryConfig} [config] - Error summary config
    */
-  constructor($module, config = {}) {
-    super();
-    this.$module = void 0;
+  constructor($root, config = {}) {
+    super($root);
     this.config = void 0;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Error summary',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    this.$module = $module;
-    this.config = mergeConfigs(ErrorSummary.defaults, config, normaliseDataset(ErrorSummary, $module.dataset));
+    this.config = mergeConfigs(ErrorSummary.defaults, config, normaliseDataset(ErrorSummary, this.$root.dataset));
     if (!this.config.disableAutoFocus) {
-      setFocus(this.$module);
+      setFocus(this.$root);
     }
-    this.$module.addEventListener('click', event => this.handleClick(event));
+    this.$root.addEventListener('click', event => this.handleClick(event));
   }
   handleClick(event) {
     const $target = event.target;
@@ -1377,12 +1407,11 @@ ErrorSummary.schema = Object.freeze({
  */
 class ExitThisPage extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element that wraps the Exit This Page button
+   * @param {Element | null} $root - HTML element that wraps the Exit This Page button
    * @param {ExitThisPageConfig} [config] - Exit This Page config
    */
-  constructor($module, config = {}) {
-    super();
-    this.$module = void 0;
+  constructor($root, config = {}) {
+    super($root);
     this.config = void 0;
     this.i18n = void 0;
     this.$button = void 0;
@@ -1395,25 +1424,17 @@ class ExitThisPage extends GOVUKFrontendComponent {
     this.timeoutTime = 5000;
     this.keypressTimeoutId = null;
     this.timeoutMessageId = null;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Exit this page',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    const $button = $module.querySelector('.govuk-exit-this-page__button');
+    const $button = this.$root.querySelector('.govuk-exit-this-page__button');
     if (!($button instanceof HTMLAnchorElement)) {
       throw new ElementError({
-        componentName: 'Exit this page',
+        component: ExitThisPage,
         element: $button,
         expectedType: 'HTMLAnchorElement',
         identifier: 'Button (`.govuk-exit-this-page__button`)'
       });
     }
-    this.config = mergeConfigs(ExitThisPage.defaults, config, normaliseDataset(ExitThisPage, $module.dataset));
+    this.config = mergeConfigs(ExitThisPage.defaults, config, normaliseDataset(ExitThisPage, this.$root.dataset));
     this.i18n = new I18n(this.config.i18n);
-    this.$module = $module;
     this.$button = $button;
     const $skiplinkButton = document.querySelector('.govuk-js-exit-this-page-skiplink');
     if ($skiplinkButton instanceof HTMLAnchorElement) {
@@ -1432,7 +1453,7 @@ class ExitThisPage extends GOVUKFrontendComponent {
     this.$updateSpan = document.createElement('span');
     this.$updateSpan.setAttribute('role', 'status');
     this.$updateSpan.className = 'govuk-visually-hidden';
-    this.$module.appendChild(this.$updateSpan);
+    this.$root.appendChild(this.$updateSpan);
   }
   initButtonClickHandler() {
     this.$button.addEventListener('click', this.handleClick.bind(this));
@@ -1607,38 +1628,29 @@ class Header extends GOVUKFrontendComponent {
    * Apply a matchMedia for desktop which will trigger a state sync if the
    * browser viewport moves between states.
    *
-   * @param {Element | null} $module - HTML element to use for header
+   * @param {Element | null} $root - HTML element to use for header
    */
-  constructor($module) {
-    super();
-    this.$module = void 0;
+  constructor($root) {
+    super($root);
     this.$menuButton = void 0;
     this.$menu = void 0;
     this.menuIsOpen = false;
     this.mql = null;
-    if (!$module) {
-      throw new ElementError({
-        componentName: 'Header',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    this.$module = $module;
-    const $menuButton = $module.querySelector('.govuk-js-header-toggle');
+    const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
     if (!$menuButton) {
       return this;
     }
     const menuId = $menuButton.getAttribute('aria-controls');
     if (!menuId) {
       throw new ElementError({
-        componentName: 'Header',
+        component: Header,
         identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
       });
     }
     const $menu = document.getElementById(menuId);
     if (!$menu) {
       throw new ElementError({
-        componentName: 'Header',
+        component: Header,
         element: $menu,
         identifier: `Navigation (\`<ul id="${menuId}">\`)`
       });
@@ -1652,7 +1664,7 @@ class Header extends GOVUKFrontendComponent {
     const breakpoint = getBreakpoint('desktop');
     if (!breakpoint.value) {
       throw new ElementError({
-        componentName: 'Header',
+        component: Header,
         identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
       });
     }
@@ -1695,24 +1707,15 @@ Header.moduleName = 'govuk-header';
  */
 class NotificationBanner extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for notification banner
+   * @param {Element | null} $root - HTML element to use for notification banner
    * @param {NotificationBannerConfig} [config] - Notification banner config
    */
-  constructor($module, config = {}) {
-    super();
-    this.$module = void 0;
+  constructor($root, config = {}) {
+    super($root);
     this.config = void 0;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Notification banner',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    this.$module = $module;
-    this.config = mergeConfigs(NotificationBanner.defaults, config, normaliseDataset(NotificationBanner, $module.dataset));
-    if (this.$module.getAttribute('role') === 'alert' && !this.config.disableAutoFocus) {
-      setFocus(this.$module);
+    this.config = mergeConfigs(NotificationBanner.defaults, config, normaliseDataset(NotificationBanner, this.$root.dataset));
+    if (this.$root.getAttribute('role') === 'alert' && !this.config.disableAutoFocus) {
+      setFocus(this.$root);
     }
   }
 }
@@ -1749,28 +1752,20 @@ NotificationBanner.schema = Object.freeze({
  */
 class PasswordInput extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for password input
+   * @param {Element | null} $root - HTML element to use for password input
    * @param {PasswordInputConfig} [config] - Password input config
    */
-  constructor($module, config = {}) {
-    super();
-    this.$module = void 0;
+  constructor($root, config = {}) {
+    super($root);
     this.config = void 0;
     this.i18n = void 0;
     this.$input = void 0;
     this.$showHideButton = void 0;
     this.$screenReaderStatusMessage = void 0;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Password input',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    const $input = $module.querySelector('.govuk-js-password-input-input');
+    const $input = this.$root.querySelector('.govuk-js-password-input-input');
     if (!($input instanceof HTMLInputElement)) {
       throw new ElementError({
-        componentName: 'Password input',
+        component: PasswordInput,
         element: $input,
         expectedType: 'HTMLInputElement',
         identifier: 'Form field (`.govuk-js-password-input-input`)'
@@ -1779,10 +1774,10 @@ class PasswordInput extends GOVUKFrontendComponent {
     if ($input.type !== 'password') {
       throw new ElementError('Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.');
     }
-    const $showHideButton = $module.querySelector('.govuk-js-password-input-toggle');
+    const $showHideButton = this.$root.querySelector('.govuk-js-password-input-toggle');
     if (!($showHideButton instanceof HTMLButtonElement)) {
       throw new ElementError({
-        componentName: 'Password input',
+        component: PasswordInput,
         element: $showHideButton,
         expectedType: 'HTMLButtonElement',
         identifier: 'Button (`.govuk-js-password-input-toggle`)'
@@ -1791,12 +1786,11 @@ class PasswordInput extends GOVUKFrontendComponent {
     if ($showHideButton.type !== 'button') {
       throw new ElementError('Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.');
     }
-    this.$module = $module;
     this.$input = $input;
     this.$showHideButton = $showHideButton;
-    this.config = mergeConfigs(PasswordInput.defaults, config, normaliseDataset(PasswordInput, $module.dataset));
+    this.config = mergeConfigs(PasswordInput.defaults, config, normaliseDataset(PasswordInput, this.$root.dataset));
     this.i18n = new I18n(this.config.i18n, {
-      locale: closestAttributeValue($module, 'lang')
+      locale: closestAttributeValue(this.$root, 'lang')
     });
     this.$showHideButton.removeAttribute('hidden');
     const $screenReaderStatusMessage = document.createElement('div');
@@ -1914,27 +1908,18 @@ class Radios extends GOVUKFrontendComponent {
    * (for example if the user has navigated back), and set up event handlers to
    * keep the reveal in sync with the radio state.
    *
-   * @param {Element | null} $module - HTML element to use for radios
+   * @param {Element | null} $root - HTML element to use for radios
    */
-  constructor($module) {
-    super();
-    this.$module = void 0;
+  constructor($root) {
+    super($root);
     this.$inputs = void 0;
-    if (!($module instanceof HTMLElement)) {
-      throw new ElementError({
-        componentName: 'Radios',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    const $inputs = $module.querySelectorAll('input[type="radio"]');
+    const $inputs = this.$root.querySelectorAll('input[type="radio"]');
     if (!$inputs.length) {
       throw new ElementError({
-        componentName: 'Radios',
+        component: Radios,
         identifier: 'Form inputs (`<input type="radio">`)'
       });
     }
-    this.$module = $module;
     this.$inputs = $inputs;
     this.$inputs.forEach($input => {
       const targetId = $input.getAttribute('data-aria-controls');
@@ -1943,7 +1928,7 @@ class Radios extends GOVUKFrontendComponent {
       }
       if (!document.getElementById(targetId)) {
         throw new ElementError({
-          componentName: 'Radios',
+          component: Radios,
           identifier: `Conditional reveal (\`id="${targetId}"\`)`
         });
       }
@@ -1952,7 +1937,7 @@ class Radios extends GOVUKFrontendComponent {
     });
     window.addEventListener('pageshow', () => this.syncAllConditionalReveals());
     this.syncAllConditionalReveals();
-    this.$module.addEventListener('click', event => this.handleClick(event));
+    this.$root.addEventListener('click', event => this.handleClick(event));
   }
   syncAllConditionalReveals() {
     this.$inputs.forEach($input => this.syncConditionalRevealWithInputState($input));
@@ -1989,35 +1974,105 @@ class Radios extends GOVUKFrontendComponent {
 Radios.moduleName = 'govuk-radios';
 /**
- * Skip link component
+ * Service Navigation component
  *
  * @preserve
  */
-class SkipLink extends GOVUKFrontendComponent {
+class ServiceNavigation extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for skip link
-   * @throws {ElementError} when $module is not set or the wrong type
-   * @throws {ElementError} when $module.hash does not contain a hash
-   * @throws {ElementError} when the linked element is missing or the wrong type
+   * @param {Element | null} $root - HTML element to use for header
    */
-  constructor($module) {
-    var _this$$module$getAttr;
-    super();
-    this.$module = void 0;
-    if (!($module instanceof HTMLAnchorElement)) {
+  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-service-navigation-toggle');
+    if (!$menuButton) {
+      return this;
+    }
+    const menuId = $menuButton.getAttribute('aria-controls');
+    if (!menuId) {
       throw new ElementError({
-        componentName: 'Skip link',
-        element: $module,
-        expectedType: 'HTMLAnchorElement',
-        identifier: 'Root element (`$module`)'
+        component: ServiceNavigation,
+        identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+      });
+    }
+    const $menu = document.getElementById(menuId);
+    if (!$menu) {
+      throw new ElementError({
+        component: ServiceNavigation,
+        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('tablet');
+    if (!breakpoint.value) {
+      throw new ElementError({
+        component: ServiceNavigation,
+        identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
       });
     }
-    this.$module = $module;
-    const hash = this.$module.hash;
-    const href = (_this$$module$getAttr = this.$module.getAttribute('href')) != null ? _this$$module$getAttr : '';
+    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();
+  }
+}
+ServiceNavigation.moduleName = 'govuk-service-navigation';
+/**
+ * Skip link component
+ *
+ * @preserve
+ * @augments GOVUKFrontendComponent<HTMLAnchorElement>
+ */
+class SkipLink extends GOVUKFrontendComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for skip link
+   * @throws {ElementError} when $root is not set or the wrong type
+   * @throws {ElementError} when $root.hash does not contain a hash
+   * @throws {ElementError} when the linked element is missing or the wrong type
+   */
+  constructor($root) {
+    var _this$$root$getAttrib;
+    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.$module.href);
+      url = new window.URL(this.$root.href);
     } catch (error) {
       throw new ElementError(`Skip link: Target link (\`href="${href}"\`) is invalid`);
     }
@@ -2031,12 +2086,12 @@ class SkipLink extends GOVUKFrontendComponent {
     const $linkedElement = document.getElementById(linkedElementId);
     if (!$linkedElement) {
       throw new ElementError({
-        componentName: 'Skip link',
+        component: SkipLink,
         element: $linkedElement,
         identifier: `Target content (\`id="${linkedElementId}"\`)`
       });
     }
-    this.$module.addEventListener('click', () => setFocus($linkedElement, {
+    this.$root.addEventListener('click', () => setFocus($linkedElement, {
       onBeforeFocus() {
         $linkedElement.classList.add('govuk-skip-link-focused-element');
       },
@@ -2046,6 +2101,7 @@ class SkipLink extends GOVUKFrontendComponent {
     }));
   }
 }
+SkipLink.elementType = HTMLAnchorElement;
 SkipLink.moduleName = 'govuk-skip-link';
 /**
@@ -2055,11 +2111,10 @@ SkipLink.moduleName = 'govuk-skip-link';
  */
 class Tabs extends GOVUKFrontendComponent {
   /**
-   * @param {Element | null} $module - HTML element to use for tabs
+   * @param {Element | null} $root - HTML element to use for tabs
    */
-  constructor($module) {
-    super();
-    this.$module = void 0;
+  constructor($root) {
+    super($root);
     this.$tabs = void 0;
     this.$tabList = void 0;
     this.$tabListItems = void 0;
@@ -2069,36 +2124,28 @@ class Tabs extends GOVUKFrontendComponent {
     this.boundTabKeydown = void 0;
     this.boundOnHashChange = void 0;
     this.mql = null;
-    if (!$module) {
-      throw new ElementError({
-        componentName: 'Tabs',
-        element: $module,
-        identifier: 'Root element (`$module`)'
-      });
-    }
-    const $tabs = $module.querySelectorAll('a.govuk-tabs__tab');
+    const $tabs = this.$root.querySelectorAll('a.govuk-tabs__tab');
     if (!$tabs.length) {
       throw new ElementError({
-        componentName: 'Tabs',
+        component: Tabs,
         identifier: 'Links (`<a class="govuk-tabs__tab">`)'
       });
     }
-    this.$module = $module;
     this.$tabs = $tabs;
     this.boundTabClick = this.onTabClick.bind(this);
     this.boundTabKeydown = this.onTabKeydown.bind(this);
     this.boundOnHashChange = this.onHashChange.bind(this);
-    const $tabList = this.$module.querySelector('.govuk-tabs__list');
-    const $tabListItems = this.$module.querySelectorAll('li.govuk-tabs__list-item');
+    const $tabList = this.$root.querySelector('.govuk-tabs__list');
+    const $tabListItems = this.$root.querySelectorAll('li.govuk-tabs__list-item');
     if (!$tabList) {
       throw new ElementError({
-        componentName: 'Tabs',
+        component: Tabs,
         identifier: 'List (`<ul class="govuk-tabs__list">`)'
       });
     }
     if (!$tabListItems.length) {
       throw new ElementError({
-        componentName: 'Tabs',
+        component: Tabs,
         identifier: 'List items (`<li class="govuk-tabs__list-item">`)'
       });
     }
@@ -2110,7 +2157,7 @@ class Tabs extends GOVUKFrontendComponent {
     const breakpoint = getBreakpoint('tablet');
     if (!breakpoint.value) {
       throw new ElementError({
-        componentName: 'Tabs',
+        component: Tabs,
         identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
       });
     }
@@ -2185,7 +2232,7 @@ class Tabs extends GOVUKFrontendComponent {
     this.showPanel($tab);
   }
   getTab(hash) {
-    return this.$module.querySelector(`a.govuk-tabs__tab[href="${hash}"]`);
+    return this.$root.querySelector(`a.govuk-tabs__tab[href="${hash}"]`);
   }
   setAttributes($tab) {
     const panelId = getFragmentFromUrl($tab.href);
@@ -2296,7 +2343,7 @@ class Tabs extends GOVUKFrontendComponent {
     if (!panelId) {
       return null;
     }
-    return this.$module.querySelector(`#${panelId}`);
+    return this.$root.querySelector(`#${panelId}`);
   }
   showPanel($tab) {
     const $panel = this.getPanel($tab);
@@ -2329,7 +2376,7 @@ class Tabs extends GOVUKFrontendComponent {
     $tab.setAttribute('tabindex', '0');
   }
   getCurrentTab() {
-    return this.$module.querySelector('.govuk-tabs__list-item--selected a.govuk-tabs__tab');
+    return this.$root.querySelector('.govuk-tabs__list-item--selected a.govuk-tabs__tab');
   }
 }
 Tabs.moduleName = 'govuk-tabs';
@@ -2340,19 +2387,28 @@ 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 }} [config] - Config for all components (with optional scope)
+ * @param {Config & { scope?: Element, onError?: OnErrorCallback<CompatibleClass> }} [config] - Config for all components (with optional scope)
  */
 function initAll(config) {
   var _config$scope;
   config = typeof config !== 'undefined' ? config : {};
   if (!isSupported()) {
-    console.log(new SupportError());
+    if (config.onError) {
+      config.onError(new SupportError(), {
+        config
+      });
+    } else {
+      console.log(new SupportError());
+    }
     return;
   }
-  const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [SkipLink], [Tabs]];
-  const $scope = (_config$scope = config.scope) != null ? _config$scope : document;
+  const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [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, $scope);
+    createAll(Component, config, options);
   });
 }
@@ -2367,17 +2423,50 @@ function initAll(config) {
  *
  * @template {CompatibleClass} T
  * @param {T} Component - class of the component to create
- * @param {T["defaults"]} [config] - config for the component
- * @param {Element|Document} [$scope] - scope of the document to search within
+ * @param {T["defaults"]} [config] - Config supplied to component
+ * @param {OnErrorCallback<T> | Element | Document | CreateAllOptions<T> } [createAllOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
  * @returns {Array<InstanceType<T>>} - array of instantiated components
  */
-function createAll(Component, config, $scope = document) {
+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(), {
+        component: Component,
+        config
+      });
+    } else {
+      console.log(new SupportError());
+    }
+    return [];
+  }
   return Array.from($elements).map($element => {
     try {
-      return 'defaults' in Component && typeof config !== 'undefined' ? new Component($element, config) : new Component($element);
+      return typeof config !== 'undefined' ? new Component($element, config) : new Component($element);
     } catch (error) {
-      console.log(error);
+      if (onError) {
+        onError(error, {
+          element: $element,
+          component: Component,
+          config
+        });
+      } else {
+        console.log(error);
+      }
       return null;
     }
   }).filter(Boolean);
@@ -2416,6 +2505,25 @@ function createAll(Component, config, $scope = document) {
  *
  * @typedef {keyof Config} ConfigKey
  */
+/**
+ * @template {CompatibleClass} T
+ * @typedef {object} ErrorContext
+ * @property {Element} [element] - Element used for component module initialisation
+ * @property {T} [component] - Class of component
+ * @property {T["defaults"]} config - Config supplied to component
+ */
+/**
+ * @template {CompatibleClass} T
+ * @callback OnErrorCallback
+ * @param {unknown} error - Thrown error
+ * @param {ErrorContext<T>} context - Object containing the element, component class and configuration
+ */
+/**
+ * @template {CompatibleClass} T
+ * @typedef {object} CreateAllOptions
+ * @property {Element | Document} [scope] - scope of the document to search within
+ * @property {OnErrorCallback<T>} [onError] - callback function if error throw by component on init
+ */
-export { Accordion, Button, CharacterCount, Checkboxes, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, SkipLink, Tabs, createAll, initAll, version };
+export { Accordion, Button, CharacterCount, Checkboxes, GOVUKFrontendComponent as Component, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
 //# sourceMappingURL=all.bundle.mjs.map