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

govuk_publishing_components 44.0.0 → 44.2.0

Files changed (146) hide show

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

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = {}));
 })(this, (function (exports) { 'use strict';
-  const version = '5.5.0';
+  const version = '5.7.0';
   function normaliseString(value, property) {
     const trimmedValue = value ? value.trim() : '';
@@ -114,6 +114,19 @@
     (_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;
@@ -146,6 +159,9 @@
   function isObject(option) {
     return !!option && typeof option === 'object' && !isArray(option);
   }
+  function formatErrorMessage(Component, message) {
+    return `${Component.moduleName}: ${message}`;
+  }
   /**
    * Schema for component config
@@ -169,6 +185,10 @@
    * @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 = {};
@@ -212,30 +232,85 @@
       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;
@@ -445,12 +520,11 @@
    */
   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';
@@ -476,20 +550,12 @@
       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}">\`)`
         });
       }
@@ -509,7 +575,7 @@
       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);
@@ -523,7 +589,7 @@
         const $header = $section.querySelector(`.${this.sectionHeaderClass}`);
         if (!$header) {
           throw new ElementError({
-            componentName: 'Accordion',
+            component: Accordion,
             identifier: `Section headers (\`<div class="${this.sectionHeaderClass}">\`)`
           });
         }
@@ -539,19 +605,19 @@
       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);
@@ -625,7 +691,7 @@
       const $content = $section.querySelector(`.${this.sectionContentClass}`);
       if (!$content) {
         throw new ElementError({
-          componentName: 'Accordion',
+          component: Accordion,
           identifier: `Section content (\`<div class="${this.sectionContentClass}">\`)`
         });
       }
@@ -788,25 +854,16 @@
    */
   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;
@@ -874,13 +931,12 @@
    */
   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;
@@ -890,23 +946,16 @@
       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 = {
@@ -917,19 +966,18 @@
       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}"\`)`
         });
@@ -1173,27 +1221,18 @@
      * (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');
@@ -1202,7 +1241,7 @@
         }
         if (!document.getElementById(targetId)) {
           throw new ElementError({
-            componentName: 'Checkboxes',
+            component: Checkboxes,
             identifier: `Conditional reveal (\`id="${targetId}"\`)`
           });
         }
@@ -1211,7 +1250,7 @@
       });
       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));
@@ -1280,26 +1319,17 @@
    */
   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;
@@ -1383,12 +1413,11 @@
    */
   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;
@@ -1401,25 +1430,17 @@
       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) {
@@ -1438,7 +1459,7 @@
       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));
@@ -1613,38 +1634,29 @@
      * 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}">\`)`
         });
@@ -1658,7 +1670,7 @@
       const breakpoint = getBreakpoint('desktop');
       if (!breakpoint.value) {
         throw new ElementError({
-          componentName: 'Header',
+          component: Header,
           identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
         });
       }
@@ -1701,24 +1713,15 @@
    */
   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);
       }
     }
   }
@@ -1755,28 +1758,20 @@
    */
   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`)'
@@ -1785,10 +1780,10 @@
       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`)'
@@ -1797,12 +1792,11 @@
       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');
@@ -1920,27 +1914,18 @@
      * (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');
@@ -1949,7 +1934,7 @@
         }
         if (!document.getElementById(targetId)) {
           throw new ElementError({
-            componentName: 'Radios',
+            component: Radios,
             identifier: `Conditional reveal (\`id="${targetId}"\`)`
           });
         }
@@ -1958,7 +1943,7 @@
       });
       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));
@@ -1995,35 +1980,105 @@
   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`);
       }
@@ -2037,12 +2092,12 @@
       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');
         },
@@ -2052,6 +2107,7 @@
       }));
     }
   }
+  SkipLink.elementType = HTMLAnchorElement;
   SkipLink.moduleName = 'govuk-skip-link';
   /**
@@ -2061,11 +2117,10 @@
    */
   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;
@@ -2075,36 +2130,28 @@
       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">`)'
         });
       }
@@ -2116,7 +2163,7 @@
       const breakpoint = getBreakpoint('tablet');
       if (!breakpoint.value) {
         throw new ElementError({
-          componentName: 'Tabs',
+          component: Tabs,
           identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
         });
       }
@@ -2191,7 +2238,7 @@
       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);
@@ -2302,7 +2349,7 @@
       if (!panelId) {
         return null;
       }
-      return this.$module.querySelector(`#${panelId}`);
+      return this.$root.querySelector(`#${panelId}`);
     }
     showPanel($tab) {
       const $panel = this.getPanel($tab);
@@ -2335,7 +2382,7 @@
       $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';
@@ -2346,19 +2393,28 @@
    * 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);
     });
   }
@@ -2373,17 +2429,50 @@
    *
    * @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);
@@ -2422,21 +2511,43 @@
    *
    * @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
+   */
   exports.Accordion = Accordion;
   exports.Button = Button;
   exports.CharacterCount = CharacterCount;
   exports.Checkboxes = Checkboxes;
+  exports.Component = GOVUKFrontendComponent;
   exports.ErrorSummary = ErrorSummary;
   exports.ExitThisPage = ExitThisPage;
   exports.Header = Header;
   exports.NotificationBanner = NotificationBanner;
   exports.PasswordInput = PasswordInput;
   exports.Radios = Radios;
+  exports.ServiceNavigation = ServiceNavigation;
   exports.SkipLink = SkipLink;
   exports.Tabs = Tabs;
   exports.createAll = createAll;
   exports.initAll = initAll;
+  exports.isSupported = isSupported;
   exports.version = version;
 }));