@ministryofjustice/frontend 5.0.0 → 5.1.1

package/moj/all.bundle.js

@@ -1,164 +1,259 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
-})(this, (function (exports) { 'use strict';
-
-  class AddAnother {
-    constructor(container) {
-      this.container = container;
-      if (this.container.hasAttribute('data-moj-add-another-init')) {
-        return this;
-      }
-      this.container.setAttribute('data-moj-add-another-init', '');
-      this.container.addEventListener('click', this.onRemoveButtonClick.bind(this));
-      this.container.addEventListener('click', this.onAddButtonClick.bind(this));
-      const buttons = this.container.querySelectorAll('.moj-add-another__add-button, moj-add-another__remove-button');
-      buttons.forEach(button => {
-        if (!(button instanceof HTMLButtonElement)) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('govuk-frontend')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'govuk-frontend'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}, global.GOVUKFrontend));
+})(this, (function (exports, govukFrontend) { 'use strict';
+
+  /*
+   * This variable is automatically overwritten during builds and releases.
+   * It doesn't need to be updated manually.
+   */
+
+  /**
+   * MoJ Frontend release version
+   *
+   * {@link https://github.com/ministryofjustice/moj-frontend/releases}
+   */
+  const version = '5.1.1';
+
+  class AddAnother extends govukFrontend.Component {
+    /**
+     * @param {Element | null} $root - HTML element to use for add another
+     */
+    constructor($root) {
+      super($root);
+      this.$root.addEventListener('click', this.onRemoveButtonClick.bind(this));
+      this.$root.addEventListener('click', this.onAddButtonClick.bind(this));
+      const $buttons = this.$root.querySelectorAll('.moj-add-another__add-button, moj-add-another__remove-button');
+      $buttons.forEach($button => {
+        if (!($button instanceof HTMLButtonElement)) {
           return;
         }
-        button.type = 'button';
+        $button.type = 'button';
       });
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onAddButtonClick(event) {
-      const button = event.target;
-      if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-add-another__add-button')) {
+      const $button = event.target;
+      if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-add-another__add-button')) {
         return;
       }
-      const items = this.getItems();
-      const item = this.getNewItem();
-      if (!item || !(item instanceof HTMLElement)) {
+      const $items = this.getItems();
+      const $item = this.getNewItem();
+      if (!$item || !($item instanceof HTMLElement)) {
         return;
       }
-      this.updateAttributes(item, items.length);
-      this.resetItem(item);
-      const firstItem = items[0];
-      if (!this.hasRemoveButton(firstItem)) {
-        this.createRemoveButton(firstItem);
+      this.updateAttributes($item, $items.length);
+      this.resetItem($item);
+      const $firstItem = $items[0];
+      if (!this.hasRemoveButton($firstItem)) {
+        this.createRemoveButton($firstItem);
       }
-      items[items.length - 1].after(item);
-      const input = item.querySelector('input, textarea, select');
-      if (input && input instanceof HTMLInputElement) {
-        input.focus();
+      $items[$items.length - 1].after($item);
+      const $input = $item.querySelector('input, textarea, select');
+      if ($input && $input instanceof HTMLInputElement) {
+        $input.focus();
       }
     }
-    hasRemoveButton(item) {
-      return item.querySelectorAll('.moj-add-another__remove-button').length;
+
+    /**
+     * @param {HTMLElement} $item - Add another item
+     */
+    hasRemoveButton($item) {
+      return $item.querySelectorAll('.moj-add-another__remove-button').length;
     }
     getItems() {
-      if (!this.container) {
+      if (!this.$root) {
         return [];
       }
-      const items = Array.from(this.container.querySelectorAll('.moj-add-another__item'));
-      return items.filter(item => item instanceof HTMLElement);
+      const $items = Array.from(this.$root.querySelectorAll('.moj-add-another__item'));
+      return $items.filter(item => item instanceof HTMLElement);
     }
     getNewItem() {
-      const items = this.getItems();
-      const item = items[0].cloneNode(true);
-      if (!item || !(item instanceof HTMLElement)) {
+      const $items = this.getItems();
+      const $item = $items[0].cloneNode(true);
+      if (!$item || !($item instanceof HTMLElement)) {
         return;
       }
-      if (!this.hasRemoveButton(item)) {
-        this.createRemoveButton(item);
+      if (!this.hasRemoveButton($item)) {
+        this.createRemoveButton($item);
       }
-      return item;
+      return $item;
     }
-    updateAttributes(item, index) {
-      item.querySelectorAll('[data-name]').forEach(el => {
-        if (!(el instanceof HTMLInputElement)) {
+
+    /**
+     * @param {HTMLElement} $item - Add another item
+     * @param {number} index - Add another item index
+     */
+    updateAttributes($item, index) {
+      $item.querySelectorAll('[data-name]').forEach($input => {
+        if (!($input instanceof HTMLInputElement)) {
           return;
         }
-        const name = el.getAttribute('data-name') || '';
-        const id = el.getAttribute('data-id') || '';
-        const originalId = el.id;
-        el.name = name.replace(/%index%/, `${index}`);
-        el.id = id.replace(/%index%/, `${index}`);
-        const label = el.parentElement.querySelector('label') || el.closest('label') || item.querySelector(`[for="${originalId}"]`);
-        if (label && label instanceof HTMLLabelElement) {
-          label.htmlFor = el.id;
+        const name = $input.getAttribute('data-name') || '';
+        const id = $input.getAttribute('data-id') || '';
+        const originalId = $input.id;
+        $input.name = name.replace(/%index%/, `${index}`);
+        $input.id = id.replace(/%index%/, `${index}`);
+        const $label = $input.parentElement.querySelector('label') || $input.closest('label') || $item.querySelector(`[for="${originalId}"]`);
+        if ($label && $label instanceof HTMLLabelElement) {
+          $label.htmlFor = $input.id;
         }
       });
     }
-    createRemoveButton(item) {
-      const button = document.createElement('button');
-      button.type = 'button';
-      button.classList.add('govuk-button', 'govuk-button--secondary', 'moj-add-another__remove-button');
-      button.textContent = 'Remove';
-      item.append(button);
+
+    /**
+     * @param {HTMLElement} $item - Add another item
+     */
+    createRemoveButton($item) {
+      const $button = document.createElement('button');
+      $button.type = 'button';
+      $button.classList.add('govuk-button', 'govuk-button--secondary', 'moj-add-another__remove-button');
+      $button.textContent = 'Remove';
+      $item.append($button);
     }
-    resetItem(item) {
-      item.querySelectorAll('[data-name], [data-id]').forEach(el => {
-        if (!(el instanceof HTMLInputElement)) {
+
+    /**
+     * @param {HTMLElement} $item - Add another item
+     */
+    resetItem($item) {
+      $item.querySelectorAll('[data-name], [data-id]').forEach($input => {
+        if (!($input instanceof HTMLInputElement)) {
           return;
         }
-        if (el.type === 'checkbox' || el.type === 'radio') {
-          el.checked = false;
+        if ($input.type === 'checkbox' || $input.type === 'radio') {
+          $input.checked = false;
         } else {
-          el.value = '';
+          $input.value = '';
         }
       });
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onRemoveButtonClick(event) {
-      const button = event.target;
-      if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-add-another__remove-button')) {
+      const $button = event.target;
+      if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-add-another__remove-button')) {
         return;
       }
-      button.closest('.moj-add-another__item').remove();
-      const items = this.getItems();
-      if (items.length === 1) {
-        items[0].querySelector('.moj-add-another__remove-button').remove();
+      $button.closest('.moj-add-another__item').remove();
+      const $items = this.getItems();
+      if ($items.length === 1) {
+        $items[0].querySelector('.moj-add-another__remove-button').remove();
       }
-      items.forEach((el, index) => {
-        this.updateAttributes(el, index);
+      $items.forEach(($item, index) => {
+        this.updateAttributes($item, index);
       });
       this.focusHeading();
     }
     focusHeading() {
-      const heading = this.container.querySelector('.moj-add-another__heading');
-      if (heading && heading instanceof HTMLElement) {
-        heading.focus();
+      const $heading = this.$root.querySelector('.moj-add-another__heading');
+      if ($heading && $heading instanceof HTMLElement) {
+        $heading.focus();
+      }
+    }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
+  }
+  AddAnother.moduleName = 'moj-add-another';
+
+  /**
+   * GOV.UK Frontend helpers
+   *
+   * @todo Import from GOV.UK Frontend
+   */
+
+  /**
+   * Move focus to element
+   *
+   * Sets tabindex to -1 to make the element programmatically focusable,
+   * but removes it on blur as the element doesn't need to be focused again.
+   *
+   * @template {HTMLElement} FocusElement
+   * @param {FocusElement} $element - HTML element
+   * @param {object} [options] - Handler options
+   * @param {function(this: FocusElement): void} [options.onBeforeFocus] - Callback before focus
+   * @param {function(this: FocusElement): void} [options.onBlur] - Callback on blur
+   */
+  function setFocus($element, options = {}) {
+    var _options$onBeforeFocu;
+    const isFocusable = $element.getAttribute('tabindex');
+    if (!isFocusable) {
+      $element.setAttribute('tabindex', '-1');
+    }
+
+    /**
+     * Handle element focus
+     */
+    function onFocus() {
+      $element.addEventListener('blur', onBlur, {
+        once: true
+      });
+    }
+
+    /**
+     * Handle element blur
+     */
+    function onBlur() {
+      var _options$onBlur;
+      (_options$onBlur = options.onBlur) == null || _options$onBlur.call($element);
+      if (!isFocusable) {
+        $element.removeAttribute('tabindex');
       }
     }
+
+    // Add listener to reset element on blur, after focus
+    $element.addEventListener('focus', onFocus, {
+      once: true
+    });
+
+    // Focus element
+    (_options$onBeforeFocu = options.onBeforeFocus) == null || _options$onBeforeFocu.call($element);
+    $element.focus();
   }
 
-  function removeAttributeValue(el, attr, value) {
+  /**
+   * @param {Element} $element - Element to remove attribute value from
+   * @param {string} attr - Attribute name
+   * @param {string} value - Attribute value
+   */
+  function removeAttributeValue($element, attr, value) {
     let re, m;
-    if (el.getAttribute(attr)) {
-      if (el.getAttribute(attr) === value) {
-        el.removeAttribute(attr);
+    if ($element.getAttribute(attr)) {
+      if ($element.getAttribute(attr) === value) {
+        $element.removeAttribute(attr);
       } else {
         re = new RegExp(`(^|\\s)${value}(\\s|$)`);
-        m = el.getAttribute(attr).match(re);
+        m = $element.getAttribute(attr).match(re);
         if (m && m.length === 3) {
-          el.setAttribute(attr, el.getAttribute(attr).replace(re, m[1] && m[2] ? ' ' : ''));
+          $element.setAttribute(attr, $element.getAttribute(attr).replace(re, m[1] && m[2] ? ' ' : ''));
         }
       }
     }
   }
-  function addAttributeValue(el, attr, value) {
+
+  /**
+   * @param {Element} $element - Element to add attribute value to
+   * @param {string} attr - Attribute name
+   * @param {string} value - Attribute value
+   */
+  function addAttributeValue($element, attr, value) {
     let re;
-    if (!el.getAttribute(attr)) {
-      el.setAttribute(attr, value);
+    if (!$element.getAttribute(attr)) {
+      $element.setAttribute(attr, value);
     } else {
       re = new RegExp(`(^|\\s)${value}(\\s|$)`);
-      if (!re.test(el.getAttribute(attr))) {
-        el.setAttribute(attr, `${el.getAttribute(attr)} ${value}`);
+      if (!re.test($element.getAttribute(attr))) {
+        $element.setAttribute(attr, `${$element.getAttribute(attr)} ${value}`);
       }
     }
   }
-  function dragAndDropSupported() {
-    const div = document.createElement('div');
-    return typeof div.ondrop !== 'undefined';
-  }
-  function formDataSupported() {
-    return typeof FormData === 'function';
-  }
-  function fileApiSupported() {
-    const input = document.createElement('input');
-    input.type = 'file';
-    return typeof input.files !== 'undefined';
-  }
 
   /**
    * Find an elements preceding sibling
@@ -219,89 +314,15 @@
   }
 
   /**
-   * Move focus to element
-   *
-   * Sets tabindex to -1 to make the element programmatically focusable,
-   * but removes it on blur as the element doesn't need to be focused again.
-   *
-   * @param {HTMLElement} $element - HTML element
-   * @param {object} [options] - Handler options
-   * @param {function(this: HTMLElement): void} [options.onBeforeFocus] - Callback before focus
-   * @param {function(this: HTMLElement): void} [options.onBlur] - Callback on blur
+   * @augments {ConfigurableComponent<AlertConfig>}
    */
-  function setFocus($element, options = {}) {
-    const isFocusable = $element.getAttribute('tabindex');
-    if (!isFocusable) {
-      $element.setAttribute('tabindex', '-1');
-    }
-
+  class Alert extends govukFrontend.ConfigurableComponent {
     /**
-     * Handle element focus
-     */
-    function onFocus() {
-      $element.addEventListener('blur', onBlur, {
-        once: true
-      });
-    }
-
-    /**
-     * Handle element blur
-     */
-    function onBlur() {
-      if (options.onBlur) {
-        options.onBlur.call($element);
-      }
-      if (!isFocusable) {
-        $element.removeAttribute('tabindex');
-      }
-    }
-
-    // Add listener to reset element on blur, after focus
-    $element.addEventListener('focus', onFocus, {
-      once: true
-    });
-
-    // Focus element
-    if (options.onBeforeFocus) {
-      options.onBeforeFocus.call($element);
-    }
-    $element.focus();
-  }
-
-  class Alert {
-    /**
-     * @param {Element | null} $module - HTML element to use for alert
+     * @param {Element | null} $root - HTML element to use for alert
      * @param {AlertConfig} [config] - Alert config
      */
-    constructor($module, config = {}) {
-      if (!$module || !($module instanceof HTMLElement)) {
-        return this;
-      }
-      const schema = Object.freeze({
-        properties: {
-          dismissible: {
-            type: 'boolean'
-          },
-          dismissText: {
-            type: 'string'
-          },
-          disableAutoFocus: {
-            type: 'boolean'
-          },
-          focusOnDismissSelector: {
-            type: 'string'
-          }
-        }
-      });
-      const defaults = {
-        dismissible: false,
-        dismissText: 'Dismiss',
-        disableAutoFocus: false
-      };
-
-      // data attributes override JS config, which overrides defaults
-      this.config = this.mergeConfigs(defaults, config, this.parseDataset(schema, $module.dataset));
-      this.$module = $module;
+    constructor($root, config = {}) {
+      super($root, config);
 
       /**
        * Focus the alert
@@ -314,14 +335,14 @@
        * do this based on user research findings, or to avoid a clash with another
        * element which should be focused when the page loads.
        */
-      if (this.$module.getAttribute('role') === 'alert' && !this.config.disableAutoFocus) {
-        setFocus(this.$module);
+      if (this.$root.getAttribute('role') === 'alert' && !this.config.disableAutoFocus) {
+        setFocus(this.$root);
       }
-      this.$dismissButton = this.$module.querySelector('.moj-alert__dismiss');
+      this.$dismissButton = this.$root.querySelector('.moj-alert__dismiss');
       if (this.config.dismissible && this.$dismissButton) {
         this.$dismissButton.innerHTML = this.config.dismissText;
         this.$dismissButton.removeAttribute('hidden');
-        this.$module.addEventListener('click', event => {
+        this.$root.addEventListener('click', event => {
           if (event.target instanceof Node && this.$dismissButton.contains(event.target)) {
             this.dimiss();
           }
@@ -342,7 +363,7 @@
 
       // Is the next sibling another alert
       if (!$elementToRecieveFocus) {
-        const $nextSibling = this.$module.nextElementSibling;
+        const $nextSibling = this.$root.nextElementSibling;
         if ($nextSibling && $nextSibling.matches('.moj-alert')) {
           $elementToRecieveFocus = $nextSibling;
         }
@@ -350,13 +371,13 @@
 
       // Else try to find any preceding sibling alert or heading
       if (!$elementToRecieveFocus) {
-        $elementToRecieveFocus = getPreviousSibling(this.$module, '.moj-alert, h1, h2, h3, h4, h5, h6');
+        $elementToRecieveFocus = getPreviousSibling(this.$root, '.moj-alert, h1, h2, h3, h4, h5, h6');
       }
 
       // Else find the closest ancestor heading, or fallback to main, or last resort
       // use the body element
       if (!$elementToRecieveFocus) {
-        $elementToRecieveFocus = findNearestMatchingElement(this.$module, 'h1, h2, h3, h4, h5, h6, main, body');
+        $elementToRecieveFocus = findNearestMatchingElement(this.$root, 'h1, h2, h3, h4, h5, h6, main, body');
       }
 
       // If we have an element, place focus on it
@@ -365,111 +386,12 @@
       }
 
       // Remove the alert
-      this.$module.remove();
-    }
-
-    /**
-     * Normalise string
-     *
-     * 'If it looks like a duck, and it quacks like a duck…' 🦆
-     *
-     * If the passed value looks like a boolean or a number, convert it to a boolean
-     * or number.
-     *
-     * Designed to be used to convert config passed via data attributes (which are
-     * always strings) into something sensible.
-     *
-     * @internal
-     * @param {DOMStringMap[string]} value - The value to normalise
-     * @param {SchemaProperty} [property] - Component schema property
-     * @returns {string | boolean | number | undefined} Normalised data
-     */
-    normaliseString(value, property) {
-      const trimmedValue = value ? value.trim() : '';
-      let output;
-      let outputType;
-      if (property && property.type) {
-        outputType = property.type;
-      }
-
-      // No schema type set? Determine automatically
-      if (!outputType) {
-        if (['true', 'false'].includes(trimmedValue)) {
-          outputType = 'boolean';
-        }
-
-        // Empty / whitespace-only strings are considered finite so we need to check
-        // the length of the trimmed string as well
-        if (trimmedValue.length > 0 && Number.isFinite(Number(trimmedValue))) {
-          outputType = 'number';
-        }
-      }
-      switch (outputType) {
-        case 'boolean':
-          output = trimmedValue === 'true';
-          break;
-        case 'number':
-          output = Number(trimmedValue);
-          break;
-        default:
-          output = value;
-      }
-      return output;
-    }
-
-    /**
-     * Parse dataset
-     *
-     * Loop over an object and normalise each value using {@link normaliseString},
-     * optionally expanding nested `i18n.field`
-     *
-     * @param {Schema} schema - component schema
-     * @param {DOMStringMap} dataset - HTML element dataset
-     * @returns {object} Normalised dataset
-     */
-    parseDataset(schema, dataset) {
-      const parsed = {};
-      for (const [field, property] of Object.entries(schema.properties)) {
-        if (field in dataset) {
-          if (dataset[field]) {
-            parsed[field] = this.normaliseString(dataset[field], property);
-          }
-        }
-      }
-      return parsed;
+      this.$root.remove();
     }
 
     /**
-     * Config merging function
-     *
-     * Takes any number of objects and combines them together, with
-     * greatest priority on the LAST item passed in.
-     *
-     * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
-     * @returns {{ [key: string]: unknown }} A merged config object
-     */
-    mergeConfigs(...configObjects) {
-      const formattedConfigObject = {};
-
-      // Loop through each of the passed objects
-      for (const configObject of configObjects) {
-        for (const key of Object.keys(configObject)) {
-          const option = formattedConfigObject[key];
-          const override = configObject[key];
-
-          // Push their keys one-by-one into formattedConfigObject. Any duplicate
-          // keys with object values will be merged, otherwise the new value will
-          // override the existing value.
-          if (typeof option === 'object' && typeof override === 'object') {
-            // @ts-expect-error Index signature for type 'string' is missing
-            formattedConfigObject[key] = this.mergeConfigs(option, override);
-          } else {
-            formattedConfigObject[key] = override;
-          }
-        }
-      }
-      return formattedConfigObject;
-    }
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
 
   /**
@@ -480,71 +402,87 @@
    * @property {string} [focusOnDismissSelector] - CSS Selector for element to be focused on dismiss
    */
 
-  class ButtonMenu {
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  Alert.moduleName = 'moj-alert';
+  /**
+   * Alert default config
+   *
+   * @type {AlertConfig}
+   */
+  Alert.defaults = Object.freeze({
+    dismissible: false,
+    dismissText: 'Dismiss',
+    disableAutoFocus: false
+  });
+  /**
+   * Alert config schema
+   *
+   * @satisfies {Schema<AlertConfig>}
+   */
+  Alert.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      dismissible: {
+        type: 'boolean'
+      },
+      dismissText: {
+        type: 'string'
+      },
+      disableAutoFocus: {
+        type: 'boolean'
+      },
+      focusOnDismissSelector: {
+        type: 'string'
+      }
+    }
+  });
+
+  /**
+   * @augments {ConfigurableComponent<ButtonMenuConfig>}
+   */
+  class ButtonMenu extends govukFrontend.ConfigurableComponent {
     /**
-     * @param {Element | null} $module - HTML element to use for button menu
+     * @param {Element | null} $root - HTML element to use for button menu
      * @param {ButtonMenuConfig} [config] - Button menu config
      */
-    constructor($module, config = {}) {
-      if (!$module || !($module instanceof HTMLElement)) {
-        return this;
-      }
-      const schema = Object.freeze({
-        properties: {
-          buttonText: {
-            type: 'string'
-          },
-          buttonClasses: {
-            type: 'string'
-          },
-          alignMenu: {
-            type: 'string'
-          }
-        }
-      });
-      const defaults = {
-        buttonText: 'Actions',
-        alignMenu: 'left',
-        buttonClasses: ''
-      };
-      // data attributes override JS config, which overrides defaults
-      this.config = this.mergeConfigs(defaults, config, this.parseDataset(schema, $module.dataset));
-      this.$module = $module;
+    constructor($root, config = {}) {
+      super($root, config);
 
       // If only one button is provided, don't initiate a menu and toggle button
       // if classes have been provided for the toggleButton, apply them to the single item
-      if (this.$module.children.length === 1) {
-        const button = this.$module.children[0];
-        button.classList.forEach(className => {
+      if (this.$root.children.length === 1) {
+        const $button = this.$root.children[0];
+        $button.classList.forEach(className => {
           if (className.startsWith('govuk-button-')) {
-            button.classList.remove(className);
+            $button.classList.remove(className);
           }
-          button.classList.remove('moj-button-menu__item');
-          button.classList.add('moj-button-menu__single-button');
+          $button.classList.remove('moj-button-menu__item');
+          $button.classList.add('moj-button-menu__single-button');
         });
         if (this.config.buttonClasses) {
-          button.classList.add(...this.config.buttonClasses.split(' '));
+          $button.classList.add(...this.config.buttonClasses.split(' '));
         }
       }
-      // Otherwise intialise a button menu
-      if (this.$module.children.length > 1) {
+      // Otherwise initialise a button menu
+      if (this.$root.children.length > 1) {
         this.initMenu();
       }
     }
     initMenu() {
       this.$menu = this.createMenu();
-      this.$module.insertAdjacentHTML('afterbegin', this.toggleTemplate());
+      this.$root.insertAdjacentHTML('afterbegin', this.toggleTemplate());
       this.setupMenuItems();
-      this.$menuToggle = this.$module.querySelector(':scope > button');
-      this.items = this.$menu.querySelectorAll('a, button');
+      this.$menuToggle = this.$root.querySelector(':scope > button');
+      this.$items = this.$menu.querySelectorAll('a, button');
       this.$menuToggle.addEventListener('click', event => {
         this.toggleMenu(event);
       });
-      this.$module.addEventListener('keydown', event => {
+      this.$root.addEventListener('keydown', event => {
         this.handleKeyDown(event);
       });
       document.addEventListener('click', event => {
-        if (!this.$module.contains(event.target)) {
+        if (event.target instanceof Node && !this.$root.contains(event.target)) {
           this.closeMenu(false);
         }
       });
@@ -557,30 +495,30 @@
       if (this.config.alignMenu === 'right') {
         $menu.classList.add('moj-button-menu__wrapper--right');
       }
-      this.$module.appendChild($menu);
-      while (this.$module.firstChild !== $menu) {
-        $menu.appendChild(this.$module.firstChild);
+      this.$root.appendChild($menu);
+      while (this.$root.firstChild !== $menu) {
+        $menu.appendChild(this.$root.firstChild);
       }
       return $menu;
     }
     setupMenuItems() {
-      Array.from(this.$menu.children).forEach(item => {
+      Array.from(this.$menu.children).forEach($menuItem => {
         // wrap item in li tag
-        const listItem = document.createElement('li');
-        this.$menu.insertBefore(listItem, item);
-        listItem.appendChild(item);
-        item.setAttribute('tabindex', '-1');
-        if (item.tagName === 'BUTTON') {
-          item.setAttribute('type', 'button');
+        const $listItem = document.createElement('li');
+        this.$menu.insertBefore($listItem, $menuItem);
+        $listItem.appendChild($menuItem);
+        $menuItem.setAttribute('tabindex', '-1');
+        if ($menuItem.tagName === 'BUTTON') {
+          $menuItem.setAttribute('type', 'button');
         }
-        item.classList.forEach(className => {
+        $menuItem.classList.forEach(className => {
           if (className.startsWith('govuk-button')) {
-            item.classList.remove(className);
+            $menuItem.classList.remove(className);
           }
         });
 
         // add a slight delay after click before closing the menu, makes it *feel* better
-        item.addEventListener('click', () => {
+        $menuItem.addEventListener('click', () => {
           setTimeout(() => {
             this.closeMenu(false);
           }, 50);
@@ -605,6 +543,10 @@
     isOpen() {
       return this.$menuToggle.getAttribute('aria-expanded') === 'true';
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     toggleMenu(event) {
       event.preventDefault();
 
@@ -650,18 +592,22 @@
      * @param {number} index - the index of the item to focus
      */
     focusItem(index) {
-      if (index >= this.items.length) index = 0;
-      if (index < 0) index = this.items.length - 1;
-      const menuItem = this.items.item(index);
-      if (menuItem) {
-        menuItem.focus();
+      if (index >= this.$items.length) index = 0;
+      if (index < 0) index = this.$items.length - 1;
+      const $menuItem = this.$items.item(index);
+      if ($menuItem) {
+        $menuItem.focus();
       }
     }
     currentFocusIndex() {
-      const activeElement = document.activeElement;
-      const menuItems = Array.from(this.items);
-      return menuItems.indexOf(activeElement);
+      const $activeElement = document.activeElement;
+      const $menuItems = Array.from(this.$items);
+      return ($activeElement instanceof HTMLAnchorElement || $activeElement instanceof HTMLButtonElement) && $menuItems.indexOf($activeElement);
     }
+
+    /**
+     * @param {KeyboardEvent} event - Keydown event
+     */
     handleKeyDown(event) {
       if (event.target === this.$menuToggle) {
         switch (event.key) {
@@ -671,11 +617,11 @@
             break;
           case 'ArrowUp':
             event.preventDefault();
-            this.openMenu(this.items.length - 1);
+            this.openMenu(this.$items.length - 1);
             break;
         }
       }
-      if (this.$menu.contains(event.target) && this.isOpen()) {
+      if (event.target instanceof Node && this.$menu.contains(event.target) && this.isOpen()) {
         switch (event.key) {
           case 'ArrowDown':
             event.preventDefault();
@@ -695,7 +641,7 @@
             break;
           case 'End':
             event.preventDefault();
-            this.focusItem(this.items.length - 1);
+            this.focusItem(this.$items.length - 1);
             break;
         }
       }
@@ -708,58 +654,8 @@
     }
 
     /**
-     * Parse dataset
-     *
-     * Loop over an object and normalise each value using {@link normaliseString},
-     * optionally expanding nested `i18n.field`
-     *
-     * @param {Schema} schema - component schema
-     * @param {DOMStringMap} dataset - HTML element dataset
-     * @returns {object} Normalised dataset
-     */
-    parseDataset(schema, dataset) {
-      const parsed = {};
-      for (const [field,,] of Object.entries(schema.properties)) {
-        if (field in dataset) {
-          if (dataset[field]) {
-            parsed[field] = dataset[field];
-          }
-        }
-      }
-      return parsed;
-    }
-
-    /**
-     * Config merging function
-     *
-     * Takes any number of objects and combines them together, with
-     * greatest priority on the LAST item passed in.
-     *
-     * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
-     * @returns {{ [key: string]: unknown }} A merged config object
-     */
-    mergeConfigs(...configObjects) {
-      const formattedConfigObject = {};
-
-      // Loop through each of the passed objects
-      for (const configObject of configObjects) {
-        for (const key of Object.keys(configObject)) {
-          const option = formattedConfigObject[key];
-          const override = configObject[key];
-
-          // Push their keys one-by-one into formattedConfigObject. Any duplicate
-          // keys with object values will be merged, otherwise the new value will
-          // override the existing value.
-          if (typeof option === 'object' && typeof override === 'object') {
-            // @ts-expect-error Index signature for type 'string' is missing
-            formattedConfigObject[key] = this.mergeConfigs(option, override);
-          } else {
-            formattedConfigObject[key] = override;
-          }
-        }
-      }
-      return formattedConfigObject;
-    }
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
 
   /**
@@ -769,69 +665,68 @@
    * @property {string} [buttonClasses='govuk-button--secondary'] - css classes applied to the toggle button
    */
 
-  class DatePicker {
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  ButtonMenu.moduleName = 'moj-button-menu';
+  /**
+   * Button menu config
+   *
+   * @type {ButtonMenuConfig}
+   */
+  ButtonMenu.defaults = Object.freeze({
+    buttonText: 'Actions',
+    alignMenu: 'left',
+    buttonClasses: ''
+  });
+  /**
+   * Button menu config schema
+   *
+   * @type {Schema<ButtonMenuConfig>}
+   */
+  ButtonMenu.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      buttonText: {
+        type: 'string'
+      },
+      buttonClasses: {
+        type: 'string'
+      },
+      alignMenu: {
+        type: 'string'
+      }
+    }
+  });
+
+  /**
+   * @augments {ConfigurableComponent<DatePickerConfig>}
+   */
+  class DatePicker extends govukFrontend.ConfigurableComponent {
     /**
-     * @param {Element | null} $module - HTML element to use for date picker
+     * @param {Element | null} $root - HTML element to use for date picker
      * @param {DatePickerConfig} [config] - Date picker config
      */
-    constructor($module, config = {}) {
-      if (!$module || !($module instanceof HTMLElement)) {
-        return this;
-      }
-      const $input = $module.querySelector('.moj-js-datepicker-input');
-
-      // Check that required elements are present
+    constructor($root, config = {}) {
+      var _this$config$input$el;
+      super($root, config);
+      const $input = (_this$config$input$el = this.config.input.element) != null ? _this$config$input$el : this.$root.querySelector(this.config.input.selector);
       if (!$input || !($input instanceof HTMLInputElement)) {
         return this;
       }
-      this.$module = $module;
       this.$input = $input;
-      const schema = Object.freeze({
-        properties: {
-          excludedDates: {
-            type: 'string'
-          },
-          excludedDays: {
-            type: 'string'
-          },
-          leadingZeros: {
-            type: 'string'
-          },
-          maxDate: {
-            type: 'string'
-          },
-          minDate: {
-            type: 'string'
-          },
-          weekStartDay: {
-            type: 'string'
-          }
-        }
-      });
-      const defaults = {
-        leadingZeros: false,
-        weekStartDay: 'monday'
-      };
-
-      // data attributes override JS config, which overrides defaults
-      this.config = this.mergeConfigs(defaults, config, this.parseDataset(schema, $module.dataset));
       this.dayLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
       this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
       this.currentDate = new Date();
       this.currentDate.setHours(0, 0, 0, 0);
-      this.calendarDays = [];
-      this.excludedDates = [];
-      this.excludedDays = [];
+      this.calendarDays = /** @type {DSCalendarDay[]} */[];
+      this.excludedDates = /** @type {Date[]} */[];
+      this.excludedDays = /** @type {number[]} */[];
       this.buttonClass = 'moj-datepicker__button';
       this.selectedDayButtonClass = 'moj-datepicker__button--selected';
       this.currentDayButtonClass = 'moj-datepicker__button--current';
       this.todayButtonClass = 'moj-datepicker__button--today';
-      if (this.$module.dataset.initialized) {
-        return this;
-      }
       this.setOptions();
       this.initControls();
-      this.$module.setAttribute('data-initialized', 'true');
     }
     initControls() {
       this.id = `datepicker-${this.$input.id}`;
@@ -846,15 +741,23 @@
       $inputWrapper.appendChild(this.$input);
       $inputWrapper.insertAdjacentHTML('beforeend', this.toggleTemplate());
       $componentWrapper.insertAdjacentElement('beforeend', this.$dialog);
-      this.$calendarButton = this.$module.querySelector('.moj-js-datepicker-toggle');
-      this.$dialogTitle = this.$dialog.querySelector('.moj-js-datepicker-month-year');
+      this.$calendarButton = /** @type {HTMLButtonElement} */
+      this.$root.querySelector('.moj-js-datepicker-toggle');
+      this.$dialogTitle = /** @type {HTMLHeadingElement} */
+      this.$dialog.querySelector('.moj-js-datepicker-month-year');
       this.createCalendar();
-      this.$prevMonthButton = this.$dialog.querySelector('.moj-js-datepicker-prev-month');
-      this.$prevYearButton = this.$dialog.querySelector('.moj-js-datepicker-prev-year');
-      this.$nextMonthButton = this.$dialog.querySelector('.moj-js-datepicker-next-month');
-      this.$nextYearButton = this.$dialog.querySelector('.moj-js-datepicker-next-year');
-      this.$cancelButton = this.$dialog.querySelector('.moj-js-datepicker-cancel');
-      this.$okButton = this.$dialog.querySelector('.moj-js-datepicker-ok');
+      this.$prevMonthButton = /** @type {HTMLButtonElement} */
+      this.$dialog.querySelector('.moj-js-datepicker-prev-month');
+      this.$prevYearButton = /** @type {HTMLButtonElement} */
+      this.$dialog.querySelector('.moj-js-datepicker-prev-year');
+      this.$nextMonthButton = /** @type {HTMLButtonElement} */
+      this.$dialog.querySelector('.moj-js-datepicker-next-month');
+      this.$nextYearButton = /** @type {HTMLButtonElement} */
+      this.$dialog.querySelector('.moj-js-datepicker-next-year');
+      this.$cancelButton = /** @type {HTMLButtonElement} */
+      this.$dialog.querySelector('.moj-js-datepicker-cancel');
+      this.$okButton = /** @type {HTMLButtonElement} */
+      this.$dialog.querySelector('.moj-js-datepicker-ok');
 
       // add event listeners
       this.$prevMonthButton.addEventListener('click', event => this.focusPreviousMonth(event, false));
@@ -868,9 +771,9 @@
       this.$okButton.addEventListener('click', () => {
         this.selectDate(this.currentDate);
       });
-      const dialogButtons = this.$dialog.querySelectorAll('button:not([disabled="true"])');
-      this.$firstButtonInDialog = dialogButtons[0];
-      this.$lastButtonInDialog = dialogButtons[dialogButtons.length - 1];
+      const $dialogButtons = this.$dialog.querySelectorAll('button:not([disabled="true"])');
+      this.$firstButtonInDialog = $dialogButtons[0];
+      this.$lastButtonInDialog = $dialogButtons[$dialogButtons.length - 1];
       this.$firstButtonInDialog.addEventListener('keydown', event => this.firstButtonKeydown(event));
       this.$lastButtonInDialog.addEventListener('keydown', event => this.lastButtonKeydown(event));
       this.$calendarButton.addEventListener('click', event => this.toggleDialog(event));
@@ -1016,7 +919,6 @@
       this.setMinAndMaxDatesOnCalendar();
       this.setExcludedDates();
       this.setExcludedDays();
-      this.setLeadingZeros();
       this.setWeekStartDay();
     }
     setMinAndMaxDatesOnCalendar() {
@@ -1041,10 +943,10 @@
       }
     }
 
-    /*
+    /**
      * Parses a daterange string into an array of dates
-     * @param {String} datestring - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
-     * @returns {Date[]}
+     *
+     * @param {string} datestring - A daterange string in the format "dd/mm/yyyy-dd/mm/yyyy"
      */
     parseDateRangeString(datestring) {
       const dates = [];
@@ -1071,17 +973,6 @@
         this.excludedDays = this.config.excludedDays.replace(/\s+/, ' ').toLowerCase().split(' ').map(item => weekDays.indexOf(item)).filter(item => item !== -1);
       }
     }
-    setLeadingZeros() {
-      if (typeof this.config.leadingZeros !== 'boolean') {
-        if (this.config.leadingZeros.toLowerCase() === 'true') {
-          this.config.leadingZeros = true;
-          return;
-        }
-        if (this.config.leadingZeros.toLowerCase() === 'false') {
-          this.config.leadingZeros = false;
-        }
-      }
-    }
     setWeekStartDay() {
       const weekStartDayParam = this.config.weekStartDay;
       if (weekStartDayParam && weekStartDayParam.toLowerCase() === 'sunday') {
@@ -1094,7 +985,7 @@
     }
 
     /**
-     * Determine if a date is selecteable
+     * Determine if a date is selectable
      *
      * @param {Date} date - the date to check
      * @returns {boolean}
@@ -1160,24 +1051,36 @@
     /**
      * Get a human readable date in the format Monday 2 March 2024
      *
-     * @param {Date} date - date to format
+     * @param {Date} date - Date to format
      * @returns {string}
      */
     formattedDateHuman(date) {
       return `${this.dayLabels[(date.getDay() + 6) % 7]} ${date.getDate()} ${this.monthLabels[date.getMonth()]} ${date.getFullYear()}`;
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     backgroundClick(event) {
       if (this.isOpen() && event.target instanceof Node && !this.$dialog.contains(event.target) && !this.$input.contains(event.target) && !this.$calendarButton.contains(event.target)) {
         event.preventDefault();
         this.closeDialog();
       }
     }
+
+    /**
+     * @param {KeyboardEvent} event - Keydown event
+     */
     firstButtonKeydown(event) {
       if (event.key === 'Tab' && event.shiftKey) {
         this.$lastButtonInDialog.focus();
         event.preventDefault();
       }
     }
+
+    /**
+     * @param {KeyboardEvent} event - Keydown event
+     */
     lastButtonKeydown(event) {
       if (event.key === 'Tab' && !event.shiftKey) {
         this.$firstButtonInDialog.focus();
@@ -1207,49 +1110,57 @@
         thisDay.setDate(thisDay.getDate() + 1);
       }
     }
+
+    /**
+     * @param {boolean} [focus] - Focus the day button
+     */
     setCurrentDate(focus = true) {
       const {
         currentDate
       } = this;
       this.calendarDays.forEach(calendarDay => {
-        calendarDay.button.classList.add('moj-datepicker__button');
-        calendarDay.button.classList.add('moj-datepicker__calendar-day');
-        calendarDay.button.setAttribute('tabindex', '-1');
-        calendarDay.button.classList.remove(this.selectedDayButtonClass);
+        calendarDay.$button.classList.add('moj-datepicker__button');
+        calendarDay.$button.classList.add('moj-datepicker__calendar-day');
+        calendarDay.$button.setAttribute('tabindex', '-1');
+        calendarDay.$button.classList.remove(this.selectedDayButtonClass);
         const calendarDayDate = calendarDay.date;
         calendarDayDate.setHours(0, 0, 0, 0);
         const today = new Date();
         today.setHours(0, 0, 0, 0);
         if (calendarDayDate.getTime() === currentDate.getTime() /* && !calendarDay.button.disabled */) {
           if (focus) {
-            calendarDay.button.setAttribute('tabindex', '0');
-            calendarDay.button.focus();
-            calendarDay.button.classList.add(this.selectedDayButtonClass);
+            calendarDay.$button.setAttribute('tabindex', '0');
+            calendarDay.$button.focus();
+            calendarDay.$button.classList.add(this.selectedDayButtonClass);
           }
         }
         if (this.inputDate && calendarDayDate.getTime() === this.inputDate.getTime()) {
-          calendarDay.button.classList.add(this.currentDayButtonClass);
-          calendarDay.button.setAttribute('aria-current', 'date');
+          calendarDay.$button.classList.add(this.currentDayButtonClass);
+          calendarDay.$button.setAttribute('aria-current', 'date');
         } else {
-          calendarDay.button.classList.remove(this.currentDayButtonClass);
-          calendarDay.button.removeAttribute('aria-current');
+          calendarDay.$button.classList.remove(this.currentDayButtonClass);
+          calendarDay.$button.removeAttribute('aria-current');
         }
         if (calendarDayDate.getTime() === today.getTime()) {
-          calendarDay.button.classList.add(this.todayButtonClass);
+          calendarDay.$button.classList.add(this.todayButtonClass);
         } else {
-          calendarDay.button.classList.remove(this.todayButtonClass);
+          calendarDay.$button.classList.remove(this.todayButtonClass);
         }
       });
 
       // if no date is tab-able, make the first non-disabled date tab-able
       if (!focus) {
         const enabledDays = this.calendarDays.filter(calendarDay => {
-          return window.getComputedStyle(calendarDay.button).display === 'block' && !calendarDay.button.disabled;
+          return window.getComputedStyle(calendarDay.$button).display === 'block' && !calendarDay.$button.disabled;
         });
-        enabledDays[0].button.setAttribute('tabindex', '0');
+        enabledDays[0].$button.setAttribute('tabindex', '0');
         this.currentDate = enabledDays[0].date;
       }
     }
+
+    /**
+     * @param {Date} date - Date to select
+     */
     selectDate(date) {
       if (this.isExcludedDate(date)) {
         return;
@@ -1266,6 +1177,10 @@
     isOpen() {
       return this.$dialog.classList.contains('moj-datepicker__dialog--open');
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     toggleDialog(event) {
       event.preventDefault();
       if (this.isOpen()) {
@@ -1300,6 +1215,11 @@
       this.$calendarButton.setAttribute('aria-expanded', 'false');
       this.$calendarButton.focus();
     }
+
+    /**
+     * @param {Date} date - Date to go to
+     * @param {boolean} [focus] - Focus the day button
+     */
     goToDate(date, focus) {
       const current = this.currentDate;
       this.currentDate = date;
@@ -1351,27 +1271,47 @@
       this.goToDate(date);
     }
 
-    // month navigation
+    /**
+     * Month navigation
+     *
+     * @param {KeyboardEvent | MouseEvent} event - Key press or click event
+     * @param {boolean} [focus] - Focus the day button
+     */
     focusNextMonth(event, focus = true) {
       event.preventDefault();
       const date = new Date(this.currentDate);
       date.setMonth(date.getMonth() + 1, 1);
       this.goToDate(date, focus);
     }
-    focusPreviousMonth(event, focus = true) {
-      event.preventDefault();
+
+    /**
+     * @param {KeyboardEvent | MouseEvent} event - Key press or click event
+     * @param {boolean} [focus] - Focus the day button
+     */
+    focusPreviousMonth(event, focus = true) {
+      event.preventDefault();
       const date = new Date(this.currentDate);
       date.setMonth(date.getMonth() - 1, 1);
       this.goToDate(date, focus);
     }
 
-    // year navigation
+    /**
+     * Year navigation
+     *
+     * @param {KeyboardEvent | MouseEvent} event - Key press or click event
+     * @param {boolean} [focus] - Focus the day button
+     */
     focusNextYear(event, focus = true) {
       event.preventDefault();
       const date = new Date(this.currentDate);
       date.setFullYear(date.getFullYear() + 1, date.getMonth(), 1);
       this.goToDate(date, focus);
     }
+
+    /**
+     * @param {KeyboardEvent | MouseEvent} event - Key press or click event
+     * @param {boolean} [focus] - Focus the day button
+     */
     focusPreviousYear(event, focus = true) {
       event.preventDefault();
       const date = new Date(this.currentDate);
@@ -1380,72 +1320,70 @@
     }
 
     /**
-     * Parse dataset
-     *
-     * @param {Schema} schema - Component class
-     * @param {DOMStringMap} dataset - HTML element dataset
-     * @returns {object} Normalised dataset
-     */
-    parseDataset(schema, dataset) {
-      const parsed = {};
-      for (const [field,,] of Object.entries(schema.properties)) {
-        if (field in dataset) {
-          parsed[field] = dataset[field];
-        }
-      }
-      return parsed;
-    }
-
-    /**
-     * Config merging function
-     *
-     * Takes any number of objects and combines them together, with
-     * greatest priority on the LAST item passed in.
-     *
-     * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
-     * @returns {{ [key: string]: unknown }} A merged config object
-     */
-    mergeConfigs(...configObjects) {
-      const formattedConfigObject = {};
-
-      // Loop through each of the passed objects
-      for (const configObject of configObjects) {
-        for (const key of Object.keys(configObject)) {
-          const option = formattedConfigObject[key];
-          const override = configObject[key];
-
-          // Push their keys one-by-one into formattedConfigObject. Any duplicate
-          // keys with object values will be merged, otherwise the new value will
-          // override the existing value.
-          if (typeof option === 'object' && typeof override === 'object') {
-            // @ts-expect-error Index signature for type 'string' is missing
-            formattedConfigObject[key] = this.mergeConfigs(option, override);
-          } else {
-            formattedConfigObject[key] = override;
-          }
-        }
-      }
-      return formattedConfigObject;
-    }
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
+  DatePicker.moduleName = 'moj-date-picker';
+  /**
+   * Date picker default config
+   *
+   * @type {DatePickerConfig}
+   */
+  DatePicker.defaults = Object.freeze({
+    leadingZeros: false,
+    weekStartDay: 'monday',
+    input: {
+      selector: '.moj-js-datepicker-input'
+    }
+  });
+  /**
+   * Date picker config schema
+   *
+   * @satisfies {Schema<DatePickerConfig>}
+   */
+  DatePicker.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      excludedDates: {
+        type: 'string'
+      },
+      excludedDays: {
+        type: 'string'
+      },
+      leadingZeros: {
+        type: 'boolean'
+      },
+      maxDate: {
+        type: 'string'
+      },
+      minDate: {
+        type: 'string'
+      },
+      weekStartDay: {
+        type: 'string'
+      },
+      input: {
+        type: 'object'
+      }
+    }
+  });
   class DSCalendarDay {
     /**
      *
-     * @param {HTMLElement} button
+     * @param {HTMLButtonElement} $button
      * @param {number} index
      * @param {number} row
      * @param {number} column
      * @param {DatePicker} picker
      */
-    constructor(button, index, row, column, picker) {
+    constructor($button, index, row, column, picker) {
       this.index = index;
       this.row = row;
       this.column = column;
-      this.button = button;
+      this.$button = $button;
       this.picker = picker;
       this.date = new Date();
-      this.button.addEventListener('keydown', this.keyPress.bind(this));
-      this.button.addEventListener('click', this.click.bind(this));
+      this.$button.addEventListener('keydown', this.keyPress.bind(this));
+      this.$button.addEventListener('click', this.click.bind(this));
     }
 
     /**
@@ -1457,26 +1395,34 @@
       const label = day.getDate();
       let accessibleLabel = this.picker.formattedDateHuman(day);
       if (disabled) {
-        this.button.setAttribute('aria-disabled', 'true');
+        this.$button.setAttribute('aria-disabled', 'true');
         accessibleLabel = `Excluded date, ${accessibleLabel}`;
       } else {
-        this.button.removeAttribute('aria-disabled');
+        this.$button.removeAttribute('aria-disabled');
       }
       if (hidden) {
-        this.button.style.display = 'none';
+        this.$button.style.display = 'none';
       } else {
-        this.button.style.display = 'block';
+        this.$button.style.display = 'block';
       }
-      this.button.setAttribute('data-testid', this.picker.formattedDateFromDate(day));
-      this.button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
+      this.$button.setAttribute('data-testid', this.picker.formattedDateFromDate(day));
+      this.$button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
       this.date = new Date(day);
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     click(event) {
       this.picker.goToDate(this.date);
       this.picker.selectDate(this.date);
       event.stopPropagation();
       event.preventDefault();
     }
+
+    /**
+     * @param {KeyboardEvent} event - Keydown event
+     */
     keyPress(event) {
       let calendarNavKey = true;
       switch (event.key) {
@@ -1533,45 +1479,61 @@
    * @typedef {object} DatePickerConfig
    * @property {string} [excludedDates] - Dates that cannot be selected
    * @property {string} [excludedDays] - Days that cannot be selected
-   * @property {boolean} [leadingZeroes] - Whether to add leading zeroes when populating the field
+   * @property {boolean} [leadingZeros] - Whether to add leading zeroes when populating the field
    * @property {string} [minDate] - The earliest available date
    * @property {string} [maxDate] - The latest available date
    * @property {string} [weekStartDay] - First day of the week in calendar view
+   * @property {object} [input] - Input config
+   * @property {string} [input.selector] - Selector for the input element
+   * @property {Element | null} [input.element] - HTML element for the input
    */
 
   /**
-   * @import { Schema } from '../../all.mjs'
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
    */
 
-  class FilterToggleButton {
-    constructor(options) {
-      this.options = options;
-      this.container = this.options.toggleButton.container;
-      this.filterContainer = this.options.filter.container;
+  /**
+   * @augments {ConfigurableComponent<FilterToggleButtonConfig>}
+   */
+  class FilterToggleButton extends govukFrontend.ConfigurableComponent {
+    /**
+     * @param {Element | null} $root - HTML element to use for filter toggle button
+     * @param {FilterToggleButtonConfig} [config] - Filter toggle button config
+     */
+    constructor($root, config = {}) {
+      var _this$config$toggleBu, _this$config$closeBut;
+      super($root, config);
+      const $toggleButtonContainer = (_this$config$toggleBu = this.config.toggleButtonContainer.element) != null ? _this$config$toggleBu : document.querySelector(this.config.toggleButtonContainer.selector);
+      const $closeButtonContainer = (_this$config$closeBut = this.config.closeButtonContainer.element) != null ? _this$config$closeBut : this.$root.querySelector(this.config.closeButtonContainer.selector);
+      if (!($toggleButtonContainer instanceof HTMLElement && $closeButtonContainer instanceof HTMLElement)) {
+        return this;
+      }
+      this.$toggleButtonContainer = $toggleButtonContainer;
+      this.$closeButtonContainer = $closeButtonContainer;
       this.createToggleButton();
       this.setupResponsiveChecks();
-      this.filterContainer.setAttribute('tabindex', '-1');
-      if (this.options.startHidden) {
+      this.$root.setAttribute('tabindex', '-1');
+      if (this.config.startHidden) {
         this.hideMenu();
       }
     }
     setupResponsiveChecks() {
-      this.mq = window.matchMedia(this.options.bigModeMediaQuery);
+      this.mq = window.matchMedia(this.config.bigModeMediaQuery);
       this.mq.addListener(this.checkMode.bind(this));
-      this.checkMode(this.mq);
+      this.checkMode();
     }
     createToggleButton() {
-      this.menuButton = document.createElement('button');
-      this.menuButton.setAttribute('type', 'button');
-      this.menuButton.setAttribute('aria-haspopup', 'true');
-      this.menuButton.setAttribute('aria-expanded', 'false');
-      this.menuButton.className = `govuk-button ${this.options.toggleButton.classes}`;
-      this.menuButton.textContent = this.options.toggleButton.showText;
-      this.menuButton.addEventListener('click', this.onMenuButtonClick.bind(this));
-      this.container.append(this.menuButton);
-    }
-    checkMode(mq) {
-      if (mq.matches) {
+      this.$menuButton = document.createElement('button');
+      this.$menuButton.setAttribute('type', 'button');
+      this.$menuButton.setAttribute('aria-haspopup', 'true');
+      this.$menuButton.setAttribute('aria-expanded', 'false');
+      this.$menuButton.className = `govuk-button ${this.config.toggleButton.classes}`;
+      this.$menuButton.textContent = this.config.toggleButton.showText;
+      this.$menuButton.addEventListener('click', this.onMenuButtonClick.bind(this));
+      this.$toggleButtonContainer.append(this.$menuButton);
+    }
+    checkMode() {
+      if (this.mq.matches) {
         this.enableBigMode();
       } else {
         this.enableSmallMode();
@@ -1586,69 +1548,147 @@
       this.addCloseButton();
     }
     addCloseButton() {
-      if (!this.options.closeButton) {
-        return;
-      }
-      this.closeButton = document.createElement('button');
-      this.closeButton.setAttribute('type', 'button');
-      this.closeButton.className = 'moj-filter__close';
-      this.closeButton.textContent = this.options.closeButton.text;
-      this.closeButton.addEventListener('click', this.onCloseClick.bind(this));
-      this.options.closeButton.container.append(this.closeButton);
+      this.$closeButton = document.createElement('button');
+      this.$closeButton.setAttribute('type', 'button');
+      this.$closeButton.className = this.config.closeButton.classes;
+      this.$closeButton.textContent = this.config.closeButton.text;
+      this.$closeButton.addEventListener('click', this.onCloseClick.bind(this));
+      this.$closeButtonContainer.append(this.$closeButton);
     }
     onCloseClick() {
       this.hideMenu();
-      this.menuButton.focus();
+      this.$menuButton.focus();
     }
     removeCloseButton() {
-      if (this.closeButton) {
-        this.closeButton.remove();
-        this.closeButton = null;
+      if (this.$closeButton) {
+        this.$closeButton.remove();
+        this.$closeButton = null;
       }
     }
     hideMenu() {
-      this.menuButton.setAttribute('aria-expanded', 'false');
-      this.filterContainer.classList.add('moj-js-hidden');
-      this.menuButton.textContent = this.options.toggleButton.showText;
+      this.$menuButton.setAttribute('aria-expanded', 'false');
+      this.$root.classList.add('moj-js-hidden');
+      this.$menuButton.textContent = this.config.toggleButton.showText;
     }
     showMenu() {
-      this.menuButton.setAttribute('aria-expanded', 'true');
-      this.filterContainer.classList.remove('moj-js-hidden');
-      this.menuButton.textContent = this.options.toggleButton.hideText;
+      this.$menuButton.setAttribute('aria-expanded', 'true');
+      this.$root.classList.remove('moj-js-hidden');
+      this.$menuButton.textContent = this.config.toggleButton.hideText;
     }
     onMenuButtonClick() {
       this.toggle();
     }
     toggle() {
-      if (this.menuButton.getAttribute('aria-expanded') === 'false') {
+      if (this.$menuButton.getAttribute('aria-expanded') === 'false') {
         this.showMenu();
-        this.filterContainer.focus();
+        this.$root.focus();
       } else {
         this.hideMenu();
       }
     }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
 
-  class FormValidator {
+  /**
+   * @typedef {object} FilterToggleButtonConfig
+   * @property {string} [bigModeMediaQuery] - Media query for big mode
+   * @property {boolean} [startHidden] - Whether to start hidden
+   * @property {object} [toggleButton] - Toggle button config
+   * @property {string} [toggleButton.showText] - Text for show button
+   * @property {string} [toggleButton.hideText] - Text for hide button
+   * @property {string} [toggleButton.classes] - Classes for toggle button
+   * @property {object} [toggleButtonContainer] - Toggle button container config
+   * @property {string} [toggleButtonContainer.selector] - Selector for toggle button container
+   * @property {Element | null} [toggleButtonContainer.element] - HTML element for toggle button container
+   * @property {object} [closeButton] - Close button config
+   * @property {string} [closeButton.text] - Text for close button
+   * @property {string} [closeButton.classes] - Classes for close button
+   * @property {object} [closeButtonContainer] - Close button container config
+   * @property {string} [closeButtonContainer.selector] - Selector for close button container
+   * @property {Element | null} [closeButtonContainer.element] - HTML element for close button container
+   */
+
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  FilterToggleButton.moduleName = 'moj-filter';
+  /**
+   * Filter toggle button config
+   *
+   * @type {FilterToggleButtonConfig}
+   */
+  FilterToggleButton.defaults = Object.freeze({
+    bigModeMediaQuery: '(min-width: 48.0625em)',
+    startHidden: true,
+    toggleButton: {
+      showText: 'Show filter',
+      hideText: 'Hide filter',
+      classes: 'govuk-button--secondary'
+    },
+    toggleButtonContainer: {
+      selector: '.moj-action-bar__filter'
+    },
+    closeButton: {
+      text: 'Close',
+      classes: 'moj-filter__close'
+    },
+    closeButtonContainer: {
+      selector: '.moj-filter__header-action'
+    }
+  });
+  /**
+   * Filter toggle button config schema
+   *
+   * @satisfies {Schema<FilterToggleButtonConfig>}
+   */
+  FilterToggleButton.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      bigModeMediaQuery: {
+        type: 'string'
+      },
+      startHidden: {
+        type: 'boolean'
+      },
+      toggleButton: {
+        type: 'object'
+      },
+      toggleButtonContainer: {
+        type: 'object'
+      },
+      closeButton: {
+        type: 'object'
+      },
+      closeButtonContainer: {
+        type: 'object'
+      }
+    }
+  });
+
+  /**
+   * @augments {ConfigurableComponent<FormValidatorConfig, HTMLFormElement>}
+   */
+  class FormValidator extends govukFrontend.ConfigurableComponent {
     /**
-     * @param {Element | null} form - HTML element to use for form validator
-     * @param {FormValidatorConfig} [config] - Button menu config
+     * @param {Element | null} $root - HTML element to use for form validator
+     * @param {FormValidatorConfig} [config] - Form validator config
      */
-    constructor(form, config = {}) {
-      if (!form || !(form instanceof HTMLFormElement)) {
+    constructor($root, config = {}) {
+      super($root, config);
+      const $summary = this.config.summary.element || document.querySelector(this.config.summary.selector);
+      if (!$summary || !($summary instanceof HTMLElement)) {
         return this;
       }
-      this.form = form;
-      this.errors = [];
-      this.validators = [];
-      this.form.addEventListener('submit', this.onSubmit.bind(this));
-      this.summary = config.summary || document.querySelector('.govuk-error-summary');
+      this.$summary = $summary;
+      this.errors = /** @type {ValidationError[]} */[];
+      this.validators = /** @type {Validator[]} */[];
       this.originalTitle = document.title;
+      this.$root.addEventListener('submit', this.onSubmit.bind(this));
     }
-    escapeHtml(string) {
-      return String(string).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
-        return FormValidator.entityMap[s];
-      });
+    escapeHtml(string = '') {
+      return String(string).replace(/[&<>"'`=/]/g, name => FormValidator.entityMap[name]);
     }
     resetTitle() {
       document.title = this.originalTitle;
@@ -1657,10 +1697,10 @@
       document.title = `${this.errors.length} errors - ${document.title}`;
     }
     showSummary() {
-      this.summary.innerHTML = this.getSummaryHtml();
-      this.summary.classList.remove('moj-hidden');
-      this.summary.setAttribute('aria-labelledby', 'errorSummary-heading');
-      this.summary.focus();
+      this.$summary.innerHTML = this.getSummaryHtml();
+      this.$summary.classList.remove('moj-hidden');
+      this.$summary.setAttribute('aria-labelledby', 'errorSummary-heading');
+      this.$summary.focus();
     }
     getSummaryHtml() {
       let html = '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>';
@@ -1678,9 +1718,13 @@
       return html;
     }
     hideSummary() {
-      this.summary.classList.add('moj-hidden');
-      this.summary.removeAttribute('aria-labelledby');
+      this.$summary.classList.add('moj-hidden');
+      this.$summary.removeAttribute('aria-labelledby');
     }
+
+    /**
+     * @param {SubmitEvent} event - Form submit event
+     */
     onSubmit(event) {
       this.removeInlineErrors();
       this.hideSummary();
@@ -1697,25 +1741,29 @@
         this.showInlineError(error);
       }
     }
+
+    /**
+     * @param {ValidationError} error
+     */
     showInlineError(error) {
-      const errorSpan = document.createElement('span');
-      errorSpan.id = `${error.fieldName}-error`;
-      errorSpan.classList.add('govuk-error-message');
-      errorSpan.innerHTML = this.escapeHtml(error.message);
-      const control = document.querySelector(`#${error.fieldName}`);
-      const fieldset = control.closest('.govuk-fieldset');
-      const fieldContainer = (fieldset || control).closest('.govuk-form-group');
-      const label = fieldContainer.querySelector('label');
-      const legend = fieldContainer.querySelector('legend');
-      fieldContainer.classList.add('govuk-form-group--error');
-      if (fieldset && legend) {
-        legend.after(errorSpan);
-        fieldContainer.setAttribute('aria-invalid', 'true');
-        addAttributeValue(fieldset, 'aria-describedby', errorSpan.id);
-      } else if (label && control) {
-        label.after(errorSpan);
-        control.setAttribute('aria-invalid', 'true');
-        addAttributeValue(control, 'aria-describedby', errorSpan.id);
+      const $errorSpan = document.createElement('span');
+      $errorSpan.id = `${error.fieldName}-error`;
+      $errorSpan.classList.add('govuk-error-message');
+      $errorSpan.innerHTML = this.escapeHtml(error.message);
+      const $control = document.querySelector(`#${error.fieldName}`);
+      const $fieldset = $control.closest('.govuk-fieldset');
+      const $fieldContainer = ($fieldset || $control).closest('.govuk-form-group');
+      const $label = $fieldContainer.querySelector('label');
+      const $legend = $fieldContainer.querySelector('legend');
+      $fieldContainer.classList.add('govuk-form-group--error');
+      if ($fieldset && $legend) {
+        $legend.after($errorSpan);
+        $fieldContainer.setAttribute('aria-invalid', 'true');
+        addAttributeValue($fieldset, 'aria-describedby', $errorSpan.id);
+      } else if ($label && $control) {
+        $label.after($errorSpan);
+        $control.setAttribute('aria-invalid', 'true');
+        addAttributeValue($control, 'aria-describedby', $errorSpan.id);
       }
     }
     removeInlineErrors() {
@@ -1723,33 +1771,46 @@
         this.removeInlineError(error);
       }
     }
+
+    /**
+     * @param {ValidationError} error
+     */
     removeInlineError(error) {
-      const errorSpan = document.querySelector(`#${error.fieldName}-error`);
-      const control = document.querySelector(`#${error.fieldName}`);
-      const fieldset = control.closest('.govuk-fieldset');
-      const fieldContainer = (fieldset || control).closest('.govuk-form-group');
-      const label = fieldContainer.querySelector('label');
-      const legend = fieldContainer.querySelector('legend');
-      errorSpan.remove();
-      fieldContainer.classList.remove('govuk-form-group--error');
-      if (fieldset && legend) {
-        fieldContainer.removeAttribute('aria-invalid');
-        removeAttributeValue(fieldset, 'aria-describedby', errorSpan.id);
-      } else if (label && control) {
-        control.removeAttribute('aria-invalid');
-        removeAttributeValue(control, 'aria-describedby', errorSpan.id);
+      const $errorSpan = document.querySelector(`#${error.fieldName}-error`);
+      const $control = document.querySelector(`#${error.fieldName}`);
+      const $fieldset = $control.closest('.govuk-fieldset');
+      const $fieldContainer = ($fieldset || $control).closest('.govuk-form-group');
+      const $label = $fieldContainer.querySelector('label');
+      const $legend = $fieldContainer.querySelector('legend');
+      $errorSpan.remove();
+      $fieldContainer.classList.remove('govuk-form-group--error');
+      if ($fieldset && $legend) {
+        $fieldContainer.removeAttribute('aria-invalid');
+        removeAttributeValue($fieldset, 'aria-describedby', $errorSpan.id);
+      } else if ($label && $control) {
+        $control.removeAttribute('aria-invalid');
+        removeAttributeValue($control, 'aria-describedby', $errorSpan.id);
       }
     }
+
+    /**
+     * @param {string} fieldName - Field name
+     * @param {ValidationRule[]} rules - Validation rules
+     */
     addValidator(fieldName, rules) {
       this.validators.push({
         fieldName,
         rules,
-        field: this.form.elements[fieldName]
+        field: this.$root.elements.namedItem(fieldName)
       });
     }
     validate() {
       this.errors = [];
+
+      /** @type {Validator | null} */
       let validator = null;
+
+      /** @type {boolean | string} */
       let validatorReturnValue = true;
       let i;
       let j;
@@ -1774,11 +1835,41 @@
       }
       return this.errors.length === 0;
     }
+
+    /**
+     * @type {Record<string, string>}
+     */
   }
 
   /**
    * @typedef {object} FormValidatorConfig
-   * @property {HTMLElement} [summary] - HTML element to use for error summary
+   * @property {object} [summary] - Error summary config
+   * @property {string} [summary.selector] - Selector for error summary
+   * @property {Element | null} [summary.element] - HTML element for error summary
+   */
+
+  /**
+   * @typedef {object} ValidationRule
+   * @property {(field: Validator['field'], params: Record<string, Validator['field']>) => boolean | string} method - Validation method
+   * @property {string} message - Error message
+   * @property {Record<string, Validator['field']>} [params] - Parameters for validation
+   */
+
+  /**
+   * @typedef {object} ValidationError
+   * @property {string} fieldName - Name of the field
+   * @property {string} message - Validation error message
+   */
+
+  /**
+   * @typedef {object} Validator
+   * @property {string} fieldName - Name of the field
+   * @property {ValidationRule[]} rules - Validation rules
+   * @property {Element | RadioNodeList} field - Form field
+   */
+
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
    */
   FormValidator.entityMap = {
     '&': '&amp;',
@@ -1790,164 +1881,218 @@
     '`': '&#x60;',
     '=': '&#x3D;'
   };
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+  FormValidator.moduleName = 'moj-form-validator';
+  /**
+   * Multi file upload default config
+   *
+   * @type {FormValidatorConfig}
+   */
+  FormValidator.defaults = Object.freeze({
+    summary: {
+      selector: '.govuk-error-summary'
+    }
+  });
+  /**
+   * Multi file upload config schema
+   *
+   * @satisfies {Schema<FormValidatorConfig>}
+   */
+  FormValidator.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      summary: {
+        type: 'object'
+      }
+    }
+  });
 
   /* eslint-disable @typescript-eslint/no-empty-function */
 
-  class MultiFileUpload {
+
+  /**
+   * @augments {ConfigurableComponent<MultiFileUploadConfig>}
+   */
+  class MultiFileUpload extends govukFrontend.ConfigurableComponent {
     /**
-     * @param {MultiFileUploadConfig} [params] - Multi file upload config
+     * @param {Element | null} $root - HTML element to use for multi file upload
+     * @param {MultiFileUploadConfig} [config] - Multi file upload config
      */
-    constructor(params = {}) {
-      const {
-        container
-      } = params;
-      if (!container || !(container instanceof HTMLElement) || !(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
+    constructor($root, config = {}) {
+      var _this$config$feedback;
+      super($root, config);
+      if (!MultiFileUpload.isSupported()) {
         return this;
       }
-      this.container = container;
-      this.container.classList.add('moj-multi-file-upload--enhanced');
-      this.defaultParams = {
-        uploadFileEntryHook: () => {},
-        uploadFileExitHook: () => {},
-        uploadFileErrorHook: () => {},
-        fileDeleteHook: () => {},
-        uploadStatusText: 'Uploading files, please wait',
-        dropzoneHintText: 'Drag and drop files here or',
-        dropzoneButtonText: 'Choose files'
-      };
-      this.params = Object.assign({}, this.defaultParams, params);
-      this.feedbackContainer = /** @type {HTMLDivElement} */
-      this.container.querySelector('.moj-multi-file__uploaded-files');
+      const $feedbackContainer = (_this$config$feedback = this.config.feedbackContainer.element) != null ? _this$config$feedback : this.$root.querySelector(this.config.feedbackContainer.selector);
+      if (!$feedbackContainer || !($feedbackContainer instanceof HTMLElement)) {
+        return this;
+      }
+      this.$feedbackContainer = $feedbackContainer;
       this.setupFileInput();
       this.setupDropzone();
       this.setupLabel();
       this.setupStatusBox();
-      this.container.addEventListener('click', this.onFileDeleteClick.bind(this));
+      this.$root.addEventListener('click', this.onFileDeleteClick.bind(this));
+      this.$root.classList.add('moj-multi-file-upload--enhanced');
     }
     setupDropzone() {
-      this.dropzone = document.createElement('div');
-      this.dropzone.classList.add('moj-multi-file-upload__dropzone');
-      this.dropzone.addEventListener('dragover', this.onDragOver.bind(this));
-      this.dropzone.addEventListener('dragleave', this.onDragLeave.bind(this));
-      this.dropzone.addEventListener('drop', this.onDrop.bind(this));
-      this.fileInput.replaceWith(this.dropzone);
-      this.dropzone.appendChild(this.fileInput);
+      this.$dropzone = document.createElement('div');
+      this.$dropzone.classList.add('moj-multi-file-upload__dropzone');
+      this.$dropzone.addEventListener('dragover', this.onDragOver.bind(this));
+      this.$dropzone.addEventListener('dragleave', this.onDragLeave.bind(this));
+      this.$dropzone.addEventListener('drop', this.onDrop.bind(this));
+      this.$fileInput.replaceWith(this.$dropzone);
+      this.$dropzone.appendChild(this.$fileInput);
     }
     setupLabel() {
-      const label = document.createElement('label');
-      label.setAttribute('for', this.fileInput.id);
-      label.classList.add('govuk-button', 'govuk-button--secondary');
-      label.textContent = this.params.dropzoneButtonText;
-      const hint = document.createElement('p');
-      hint.classList.add('govuk-body');
-      hint.textContent = this.params.dropzoneHintText;
-      this.label = label;
-      this.dropzone.append(hint);
-      this.dropzone.append(label);
+      const $label = document.createElement('label');
+      $label.setAttribute('for', this.$fileInput.id);
+      $label.classList.add('govuk-button', 'govuk-button--secondary');
+      $label.textContent = this.config.dropzoneButtonText;
+      const $hint = document.createElement('p');
+      $hint.classList.add('govuk-body');
+      $hint.textContent = this.config.dropzoneHintText;
+      this.$label = $label;
+      this.$dropzone.append($hint);
+      this.$dropzone.append($label);
     }
     setupFileInput() {
-      this.fileInput = /** @type {HTMLInputElement} */
-      this.container.querySelector('.moj-multi-file-upload__input');
-      this.fileInput.addEventListener('change', this.onFileChange.bind(this));
-      this.fileInput.addEventListener('focus', this.onFileFocus.bind(this));
-      this.fileInput.addEventListener('blur', this.onFileBlur.bind(this));
+      this.$fileInput = /** @type {HTMLInputElement} */
+      this.$root.querySelector('.moj-multi-file-upload__input');
+      this.$fileInput.addEventListener('change', this.onFileChange.bind(this));
+      this.$fileInput.addEventListener('focus', this.onFileFocus.bind(this));
+      this.$fileInput.addEventListener('blur', this.onFileBlur.bind(this));
     }
     setupStatusBox() {
-      this.status = document.createElement('div');
-      this.status.classList.add('govuk-visually-hidden');
-      this.status.setAttribute('aria-live', 'polite');
-      this.status.setAttribute('role', 'status');
-      this.dropzone.append(this.status);
+      this.$status = document.createElement('div');
+      this.$status.classList.add('govuk-visually-hidden');
+      this.$status.setAttribute('aria-live', 'polite');
+      this.$status.setAttribute('role', 'status');
+      this.$dropzone.append(this.$status);
     }
+
+    /**
+     * @param {DragEvent} event - Drag event
+     */
     onDragOver(event) {
       event.preventDefault();
-      this.dropzone.classList.add('moj-multi-file-upload--dragover');
+      this.$dropzone.classList.add('moj-multi-file-upload--dragover');
     }
     onDragLeave() {
-      this.dropzone.classList.remove('moj-multi-file-upload--dragover');
+      this.$dropzone.classList.remove('moj-multi-file-upload--dragover');
     }
+
+    /**
+     * @param {DragEvent} event - Drag event
+     */
     onDrop(event) {
       event.preventDefault();
-      this.dropzone.classList.remove('moj-multi-file-upload--dragover');
-      this.feedbackContainer.classList.remove('moj-hidden');
-      this.status.textContent = this.params.uploadStatusText;
+      this.$dropzone.classList.remove('moj-multi-file-upload--dragover');
+      this.$feedbackContainer.classList.remove('moj-hidden');
+      this.$status.textContent = this.config.uploadStatusText;
       this.uploadFiles(event.dataTransfer.files);
     }
+
+    /**
+     * @param {FileList} files - File list
+     */
     uploadFiles(files) {
       for (const file of Array.from(files)) {
         this.uploadFile(file);
       }
     }
     onFileChange() {
-      this.feedbackContainer.classList.remove('moj-hidden');
-      this.status.textContent = this.params.uploadStatusText;
-      this.uploadFiles(this.fileInput.files);
-      const fileInput = this.fileInput.cloneNode(true);
-      if (!fileInput || !(fileInput instanceof HTMLInputElement)) {
+      this.$feedbackContainer.classList.remove('moj-hidden');
+      this.$status.textContent = this.config.uploadStatusText;
+      this.uploadFiles(this.$fileInput.files);
+      const $fileInput = this.$fileInput.cloneNode(true);
+      if (!$fileInput || !($fileInput instanceof HTMLInputElement)) {
         return;
       }
-      fileInput.value = '';
-      this.fileInput.replaceWith(fileInput);
+      $fileInput.value = '';
+      this.$fileInput.replaceWith($fileInput);
       this.setupFileInput();
-      this.fileInput.focus();
+      this.$fileInput.focus();
     }
     onFileFocus() {
-      this.label.classList.add('moj-multi-file-upload--focused');
+      this.$label.classList.add('moj-multi-file-upload--focused');
     }
     onFileBlur() {
-      this.label.classList.remove('moj-multi-file-upload--focused');
+      this.$label.classList.remove('moj-multi-file-upload--focused');
     }
+
+    /**
+     * @param {UploadResponseSuccess['success']} success
+     */
     getSuccessHtml(success) {
       return `<span class="moj-multi-file-upload__success"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>${success.messageHtml}</span>`;
     }
+
+    /**
+     * @param {UploadResponseError['error']} error
+     */
     getErrorHtml(error) {
       return `<span class="moj-multi-file-upload__error"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"/></svg>${error.message}</span>`;
     }
+
+    /**
+     * @param {File} file
+     */
     getFileRow(file) {
-      const row = document.createElement('div');
-      row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row');
-      row.innerHTML = `
+      const $row = document.createElement('div');
+      $row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row');
+      $row.innerHTML = `
     <div class="govuk-summary-list__value moj-multi-file-upload__message">
       <span class="moj-multi-file-upload__filename">${file.name}</span>
       <span class="moj-multi-file-upload__progress">0%</span>
     </div>
     <div class="govuk-summary-list__actions moj-multi-file-upload__actions"></div>
   `;
-      return row;
+      return $row;
     }
+
+    /**
+     * @param {UploadResponseFile} file
+     */
     getDeleteButton(file) {
-      const button = document.createElement('button');
-      button.setAttribute('type', 'button');
-      button.setAttribute('name', 'delete');
-      button.setAttribute('value', file.filename);
-      button.classList.add('moj-multi-file-upload__delete', 'govuk-button', 'govuk-button--secondary', 'govuk-!-margin-bottom-0');
-      button.innerHTML = `Delete <span class="govuk-visually-hidden">${file.originalname}</span>`;
-      return button;
+      const $button = document.createElement('button');
+      $button.setAttribute('type', 'button');
+      $button.setAttribute('name', 'delete');
+      $button.setAttribute('value', file.filename);
+      $button.classList.add('moj-multi-file-upload__delete', 'govuk-button', 'govuk-button--secondary', 'govuk-!-margin-bottom-0');
+      $button.innerHTML = `Delete <span class="govuk-visually-hidden">${file.originalname}</span>`;
+      return $button;
     }
+
+    /**
+     * @param {File} file
+     */
     uploadFile(file) {
-      this.params.uploadFileEntryHook(this, file);
-      const item = this.getFileRow(file);
-      const message = item.querySelector('.moj-multi-file-upload__message');
-      const actions = item.querySelector('.moj-multi-file-upload__actions');
-      const progress = item.querySelector('.moj-multi-file-upload__progress');
+      this.config.hooks.entryHook(this, file);
+      const $item = this.getFileRow(file);
+      const $message = $item.querySelector('.moj-multi-file-upload__message');
+      const $actions = $item.querySelector('.moj-multi-file-upload__actions');
+      const $progress = $item.querySelector('.moj-multi-file-upload__progress');
       const formData = new FormData();
       formData.append('documents', file);
-      this.feedbackContainer.querySelector('.moj-multi-file-upload__list').append(item);
+      this.$feedbackContainer.querySelector('.moj-multi-file-upload__list').append($item);
       const xhr = new XMLHttpRequest();
       const onLoad = () => {
         if (xhr.status < 200 || xhr.status >= 300 || !('success' in xhr.response)) {
           return onError();
         }
-        message.innerHTML = this.getSuccessHtml(xhr.response.success);
-        this.status.textContent = xhr.response.success.messageText;
-        actions.append(this.getDeleteButton(xhr.response.file));
-        this.params.uploadFileExitHook(this, file, xhr, xhr.responseText);
+        $message.innerHTML = this.getSuccessHtml(xhr.response.success);
+        this.$status.textContent = xhr.response.success.messageText;
+        $actions.append(this.getDeleteButton(xhr.response.file));
+        this.config.hooks.exitHook(this, file, xhr, xhr.responseText);
       };
       const onError = () => {
         const error = new Error(xhr.response && 'error' in xhr.response ? xhr.response.error.message : xhr.statusText || 'Upload failed');
-        message.innerHTML = this.getErrorHtml(error);
-        this.status.textContent = error.message;
-        this.params.uploadFileErrorHook(this, file, xhr, xhr.responseText, error);
+        $message.innerHTML = this.getErrorHtml(error);
+        this.$status.textContent = error.message;
+        this.config.hooks.errorHook(this, file, xhr, xhr.responseText, error);
       };
       xhr.addEventListener('load', onLoad);
       xhr.addEventListener('error', onError);
@@ -1956,15 +2101,19 @@
           return;
         }
         const percentComplete = Math.round(event.loaded / event.total * 100);
-        progress.textContent = ` ${percentComplete}%`;
+        $progress.textContent = ` ${percentComplete}%`;
       });
-      xhr.open('POST', this.params.uploadUrl);
+      xhr.open('POST', this.config.uploadUrl);
       xhr.responseType = 'json';
       xhr.send(formData);
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onFileDeleteClick(event) {
-      const button = event.target;
-      if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-multi-file-upload__delete')) {
+      const $button = event.target;
+      if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-multi-file-upload__delete')) {
         return;
       }
       event.preventDefault(); // if user refreshes page and then deletes
@@ -1974,155 +2123,371 @@
         if (xhr.status < 200 || xhr.status >= 300) {
           return;
         }
-        const rows = Array.from(this.feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
-        if (rows.length === 1) {
-          this.feedbackContainer.classList.add('moj-hidden');
+        const $rows = Array.from(this.$feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
+        if ($rows.length === 1) {
+          this.$feedbackContainer.classList.add('moj-hidden');
         }
-        const row = rows.find(row => row.contains(button));
-        if (row) row.remove();
-        this.params.fileDeleteHook(this, undefined, xhr, xhr.responseText);
+        const $rowDelete = $rows.find($row => $row.contains($button));
+        if ($rowDelete) $rowDelete.remove();
+        this.config.hooks.deleteHook(this, undefined, xhr, xhr.responseText);
       });
-      xhr.open('POST', this.params.deleteUrl);
+      xhr.open('POST', this.config.deleteUrl);
       xhr.setRequestHeader('Content-Type', 'application/json');
       xhr.responseType = 'json';
       xhr.send(JSON.stringify({
-        [button.name]: button.value
+        [$button.name]: $button.value
       }));
     }
+    static isSupported() {
+      return this.isDragAndDropSupported() && this.isFormDataSupported() && this.isFileApiSupported();
+    }
+    static isDragAndDropSupported() {
+      const div = document.createElement('div');
+      return typeof div.ondrop !== 'undefined';
+    }
+    static isFormDataSupported() {
+      return typeof FormData === 'function';
+    }
+    static isFileApiSupported() {
+      const input = document.createElement('input');
+      input.type = 'file';
+      return typeof input.files !== 'undefined';
+    }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
 
-  class MultiSelect {
-    constructor(options) {
-      this.container = options.container;
-      if (this.container.hasAttribute('data-moj-multi-select-init')) {
+  /**
+   * Multi file upload config
+   *
+   * @typedef {object} MultiFileUploadConfig
+   * @property {string} [uploadUrl] - File upload URL
+   * @property {string} [deleteUrl] - File delete URL
+   * @property {string} [uploadStatusText] - Upload status text
+   * @property {string} [dropzoneHintText] - Dropzone hint text
+   * @property {string} [dropzoneButtonText] - Dropzone button text
+   * @property {object} [feedbackContainer] - Feedback container config
+   * @property {string} [feedbackContainer.selector] - Selector for feedback container
+   * @property {Element | null} [feedbackContainer.element] - HTML element for feedback container
+   * @property {MultiFileUploadHooks} [hooks] - Upload hooks
+   */
+
+  /**
+   * Multi file upload hooks
+   *
+   * @typedef {object} MultiFileUploadHooks
+   * @property {OnUploadFileEntryHook} [entryHook] - File upload entry hook
+   * @property {OnUploadFileExitHook} [exitHook] - File upload exit hook
+   * @property {OnUploadFileErrorHook} [errorHook] - File upload error hook
+   * @property {OnUploadFileDeleteHook} [deleteHook] - File delete hook
+   */
+
+  /**
+   * Upload hook: File entry
+   *
+   * @callback OnUploadFileEntryHook
+   * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+   * @param {File} file - File upload
+   */
+
+  /**
+   * Upload hook: File exit
+   *
+   * @callback OnUploadFileExitHook
+   * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+   * @param {File} file - File upload
+   * @param {XMLHttpRequest} xhr - XMLHttpRequest
+   * @param {string} textStatus - Text status
+   */
+
+  /**
+   * Upload hook: File error
+   *
+   * @callback OnUploadFileErrorHook
+   * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+   * @param {File} file - File upload
+   * @param {XMLHttpRequest} xhr - XMLHttpRequest
+   * @param {string} textStatus - Text status
+   * @param {Error} errorThrown - Error thrown
+   */
+
+  /**
+   * Upload hook: File delete
+   *
+   * @callback OnUploadFileDeleteHook
+   * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+   * @param {File} [file] - File upload
+   * @param {XMLHttpRequest} xhr - XMLHttpRequest
+   * @param {string} textStatus - Text status
+   */
+
+  /**
+   * @typedef {object} UploadResponseSuccess
+   * @property {{ messageText: string, messageHtml: string }} success - Response success
+   * @property {UploadResponseFile} file - Response file
+   */
+
+  /**
+   * @typedef {object} UploadResponseError
+   * @property {{ message: string }} error - Response error
+   * @property {UploadResponseFile} file - Response file
+   */
+
+  /**
+   * @typedef {object} UploadResponseFile
+   * @property {string} filename - File name
+   * @property {string} originalname - Original file name
+   */
+
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  MultiFileUpload.moduleName = 'moj-multi-file-upload';
+  /**
+   * Multi file upload default config
+   *
+   * @type {MultiFileUploadConfig}
+   */
+  MultiFileUpload.defaults = Object.freeze({
+    uploadStatusText: 'Uploading files, please wait',
+    dropzoneHintText: 'Drag and drop files here or',
+    dropzoneButtonText: 'Choose files',
+    feedbackContainer: {
+      selector: '.moj-multi-file__uploaded-files'
+    },
+    hooks: {
+      entryHook: () => {},
+      exitHook: () => {},
+      errorHook: () => {},
+      deleteHook: () => {}
+    }
+  });
+  /**
+   * Multi file upload config schema
+   *
+   * @satisfies {Schema<MultiFileUploadConfig>}
+   */
+  MultiFileUpload.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      uploadUrl: {
+        type: 'string'
+      },
+      deleteUrl: {
+        type: 'string'
+      },
+      uploadStatusText: {
+        type: 'string'
+      },
+      dropzoneHintText: {
+        type: 'string'
+      },
+      dropzoneButtonText: {
+        type: 'string'
+      },
+      feedbackContainer: {
+        type: 'object'
+      },
+      hooks: {
+        type: 'object'
+      }
+    }
+  });
+
+  /**
+   * @augments {ConfigurableComponent<MultiSelectConfig>}
+   */
+  class MultiSelect extends govukFrontend.ConfigurableComponent {
+    /**
+     * @param {Element | null} $root - HTML element to use for multi select
+     * @param {MultiSelectConfig} [config] - Multi select config
+     */
+    constructor($root, config = {}) {
+      var _this$config$checkbox;
+      super($root, config);
+      const $container = this.$root.querySelector(`#${this.config.idPrefix}select-all`);
+      const $checkboxes = /** @type {NodeListOf<HTMLInputElement>} */(_this$config$checkbox = this.config.checkboxes.items) != null ? _this$config$checkbox : this.$root.querySelectorAll(this.config.checkboxes.selector);
+      if (!$container || !($container instanceof HTMLElement) || !$checkboxes.length) {
         return this;
       }
-      this.container.setAttribute('data-moj-multi-select-init', '');
-      const idPrefix = options.id_prefix;
-      this.setupToggle(idPrefix);
-      this.toggleButton = this.toggle.querySelector('input');
-      this.toggleButton.addEventListener('click', this.onButtonClick.bind(this));
-      this.container.append(this.toggle);
-      this.checkboxes = Array.from(options.checkboxes);
-      this.checkboxes.forEach(el => el.addEventListener('click', this.onCheckboxClick.bind(this)));
-      this.checked = options.checked || false;
+      this.setupToggle(this.config.idPrefix);
+      this.$toggleButton = this.$toggle.querySelector('input');
+      this.$toggleButton.addEventListener('click', this.onButtonClick.bind(this));
+      this.$container = $container;
+      this.$container.append(this.$toggle);
+      this.$checkboxes = Array.from($checkboxes);
+      this.$checkboxes.forEach($input => $input.addEventListener('click', this.onCheckboxClick.bind(this)));
+      this.checked = config.checked || false;
     }
     setupToggle(idPrefix = '') {
       const id = `${idPrefix}checkboxes-all`;
-      const toggle = document.createElement('div');
-      const label = document.createElement('label');
-      const input = document.createElement('input');
-      const span = document.createElement('span');
-      toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
-      input.id = id;
-      input.type = 'checkbox';
-      input.classList.add('govuk-checkboxes__input');
-      label.setAttribute('for', id);
-      label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
-      span.classList.add('govuk-visually-hidden');
-      span.textContent = 'Select all';
-      label.append(span);
-      toggle.append(input, label);
-      this.toggle = toggle;
+      const $toggle = document.createElement('div');
+      const $label = document.createElement('label');
+      const $input = document.createElement('input');
+      const $span = document.createElement('span');
+      $toggle.classList.add('govuk-checkboxes__item', 'govuk-checkboxes--small', 'moj-multi-select__checkbox');
+      $input.id = id;
+      $input.type = 'checkbox';
+      $input.classList.add('govuk-checkboxes__input');
+      $label.setAttribute('for', id);
+      $label.classList.add('govuk-label', 'govuk-checkboxes__label', 'moj-multi-select__toggle-label');
+      $span.classList.add('govuk-visually-hidden');
+      $span.textContent = 'Select all';
+      $label.append($span);
+      $toggle.append($input, $label);
+      this.$toggle = $toggle;
     }
     onButtonClick() {
       if (this.checked) {
         this.uncheckAll();
-        this.toggleButton.checked = false;
+        this.$toggleButton.checked = false;
       } else {
         this.checkAll();
-        this.toggleButton.checked = true;
+        this.$toggleButton.checked = true;
       }
     }
     checkAll() {
-      this.checkboxes.forEach(el => {
-        el.checked = true;
+      this.$checkboxes.forEach($input => {
+        $input.checked = true;
       });
       this.checked = true;
     }
     uncheckAll() {
-      this.checkboxes.forEach(el => {
-        el.checked = false;
+      this.$checkboxes.forEach($input => {
+        $input.checked = false;
       });
       this.checked = false;
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onCheckboxClick(event) {
+      if (!(event.target instanceof HTMLInputElement)) {
+        return;
+      }
       if (!event.target.checked) {
-        this.toggleButton.checked = false;
+        this.$toggleButton.checked = false;
         this.checked = false;
       } else {
-        if (this.checkboxes.filter(el => el.checked).length === this.checkboxes.length) {
-          this.toggleButton.checked = true;
+        if (this.$checkboxes.filter($input => $input.checked).length === this.$checkboxes.length) {
+          this.$toggleButton.checked = true;
           this.checked = true;
         }
       }
     }
-  }
 
-  class PasswordReveal {
     /**
-     * @param {Element | null} element - HTML element to use for password reveal
+     * Name for the component used when initialising using data-module attributes.
      */
-    constructor(element) {
-      if (!element || !(element instanceof HTMLInputElement)) {
-        return this;
+  }
+
+  /**
+   * Multi select config
+   *
+   * @typedef {object} MultiSelectConfig
+   * @property {string} [idPrefix] - Prefix for the Select all" checkbox `id` attribute
+   * @property {boolean} [checked] - Whether the "Select all" checkbox is checked
+   * @property {object} [checkboxes] - Checkboxes config
+   * @property {string} [checkboxes.selector] - Checkboxes query selector
+   * @property {NodeListOf<HTMLInputElement>} [checkboxes.items] - Checkboxes query selector results
+   */
+
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  MultiSelect.moduleName = 'moj-multi-select';
+  /**
+   * Multi select config
+   *
+   * @type {MultiSelectConfig}
+   */
+  MultiSelect.defaults = Object.freeze({
+    idPrefix: '',
+    checkboxes: {
+      selector: 'tbody input.govuk-checkboxes__input'
+    }
+  });
+  /**
+   * Multi select config schema
+   *
+   * @satisfies {Schema<MultiSelectConfig>}
+   */
+  MultiSelect.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      idPrefix: {
+        type: 'string'
+      },
+      checked: {
+        type: 'boolean'
+      },
+      checkboxes: {
+        type: 'object'
       }
-      this.el = element;
-      this.container = element.parentElement;
-      if (this.container.hasAttribute('data-moj-password-reveal-init')) {
+    }
+  });
+
+  class PasswordReveal extends govukFrontend.Component {
+    /**
+     * @param {Element | null} $root - HTML element to use for password reveal
+     */
+    constructor($root) {
+      super($root);
+      const $input = this.$root.querySelector('.govuk-input');
+      if (!$input || !($input instanceof HTMLInputElement)) {
         return this;
       }
-      this.container.setAttribute('data-moj-password-reveal-init', '');
-      this.el.setAttribute('spellcheck', 'false');
+      this.$input = $input;
+      this.$input.setAttribute('spellcheck', 'false');
       this.createButton();
     }
     createButton() {
-      this.group = document.createElement('div');
-      this.button = document.createElement('button');
-      this.button.setAttribute('type', 'button');
-      this.group.className = 'moj-password-reveal';
-      this.button.className = 'govuk-button govuk-button--secondary moj-password-reveal__button';
-      this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
-      this.button.addEventListener('click', this.onButtonClick.bind(this));
-      this.group.append(this.el, this.button);
-      this.container.append(this.group);
+      this.$group = document.createElement('div');
+      this.$button = document.createElement('button');
+      this.$button.setAttribute('type', 'button');
+      this.$root.classList.add('moj-password-reveal');
+      this.$group.classList.add('moj-password-reveal__wrapper');
+      this.$button.classList.add('govuk-button', 'govuk-button--secondary', 'moj-password-reveal__button');
+      this.$button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
+      this.$button.addEventListener('click', this.onButtonClick.bind(this));
+      this.$group.append(this.$input, this.$button);
+      this.$root.append(this.$group);
     }
     onButtonClick() {
-      if (this.el.type === 'password') {
-        this.el.type = 'text';
-        this.button.innerHTML = 'Hide <span class="govuk-visually-hidden">password</span>';
+      if (this.$input.type === 'password') {
+        this.$input.type = 'text';
+        this.$button.innerHTML = 'Hide <span class="govuk-visually-hidden">password</span>';
       } else {
-        this.el.type = 'password';
-        this.button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
+        this.$input.type = 'password';
+        this.$button.innerHTML = 'Show <span class="govuk-visually-hidden">password</span>';
       }
     }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
+  PasswordReveal.moduleName = 'moj-password-reveal';
 
-  class RichTextEditor {
+  /**
+   * @augments {ConfigurableComponent<RichTextEditorConfig>}
+   */
+  class RichTextEditor extends govukFrontend.ConfigurableComponent {
     /**
-     * @param {RichTextEditorConfig} options
+     * @param {Element | null} $root - HTML element to use for rich text editor
+     * @param {RichTextEditorConfig} config
      */
-    constructor(options = {}) {
-      const {
-        textarea
-      } = options;
-      if (!textarea || !textarea.parentElement || !(textarea instanceof HTMLTextAreaElement) || !('contentEditable' in document.documentElement)) {
+    constructor($root, config = {}) {
+      super($root, config);
+      if (!RichTextEditor.isSupported()) {
         return this;
       }
-      options.toolbar = options.toolbar || {
-        bold: false,
-        italic: false,
-        underline: false,
-        bullets: true,
-        numbers: true
-      };
-      this.textarea = textarea;
-      this.container = this.textarea.parentElement;
-      this.options = options;
-      if (this.container.hasAttribute('data-rich-text-editor-init')) {
+      const $textarea = this.$root.querySelector('.govuk-textarea');
+      if (!$textarea || !($textarea instanceof HTMLTextAreaElement)) {
         return this;
       }
-      this.container.setAttribute('data-rich-text-editor-init', '');
+      this.$textarea = $textarea;
       this.createToolbar();
       this.hideDefault();
       this.configureToolbar();
@@ -2132,34 +2497,42 @@
         up: 38,
         down: 40
       };
-      this.content.addEventListener('input', this.onEditorInput.bind(this));
-      this.container.querySelector('label').addEventListener('click', this.onLabelClick.bind(this));
-      this.toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this));
+      this.$content.addEventListener('input', this.onEditorInput.bind(this));
+      this.$root.querySelector('label').addEventListener('click', this.onLabelClick.bind(this));
+      this.$toolbar.addEventListener('keydown', this.onToolbarKeydown.bind(this));
     }
+
+    /**
+     * @param {KeyboardEvent} event - Click event
+     */
     onToolbarKeydown(event) {
-      let focusableButton;
+      let $focusableButton;
       switch (event.keyCode) {
         case this.keys.right:
         case this.keys.down:
           {
-            focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
-            const nextButton = focusableButton.nextElementSibling;
-            if (nextButton instanceof HTMLButtonElement) {
-              nextButton.focus();
-              focusableButton.setAttribute('tabindex', '-1');
-              nextButton.setAttribute('tabindex', '0');
+            $focusableButton = this.$buttons.find(button => button.getAttribute('tabindex') === '0');
+            if ($focusableButton) {
+              const $nextButton = $focusableButton.nextElementSibling;
+              if ($nextButton && $nextButton instanceof HTMLButtonElement) {
+                $nextButton.focus();
+                $focusableButton.setAttribute('tabindex', '-1');
+                $nextButton.setAttribute('tabindex', '0');
+              }
             }
             break;
           }
         case this.keys.left:
         case this.keys.up:
           {
-            focusableButton = this.buttons.find(button => button.getAttribute('tabindex') === '0');
-            const previousButton = focusableButton.previousElementSibling;
-            if (previousButton instanceof HTMLButtonElement) {
-              previousButton.focus();
-              focusableButton.setAttribute('tabindex', '-1');
-              previousButton.setAttribute('tabindex', '0');
+            $focusableButton = this.$buttons.find(button => button.getAttribute('tabindex') === '0');
+            if ($focusableButton) {
+              const $previousButton = $focusableButton.previousElementSibling;
+              if ($previousButton && $previousButton instanceof HTMLButtonElement) {
+                $previousButton.focus();
+                $focusableButton.setAttribute('tabindex', '-1');
+                $previousButton.setAttribute('tabindex', '0');
+              }
             }
             break;
           }
@@ -2168,19 +2541,19 @@
     getToolbarHtml() {
       let html = '';
       html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
-      if (this.options.toolbar.bold) {
+      if (this.config.toolbar.bold) {
         html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
       }
-      if (this.options.toolbar.italic) {
+      if (this.config.toolbar.italic) {
         html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
       }
-      if (this.options.toolbar.underline) {
+      if (this.config.toolbar.underline) {
         html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
       }
-      if (this.options.toolbar.bullets) {
+      if (this.config.toolbar.bullets) {
         html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
       }
-      if (this.options.toolbar.numbers) {
+      if (this.config.toolbar.numbers) {
         html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
       }
       html += '</div>';
@@ -2190,27 +2563,31 @@
       return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`;
     }
     hideDefault() {
-      this.textarea.classList.add('govuk-visually-hidden');
-      this.textarea.setAttribute('aria-hidden', 'true');
-      this.textarea.setAttribute('tabindex', '-1');
+      this.$textarea.classList.add('govuk-visually-hidden');
+      this.$textarea.setAttribute('aria-hidden', 'true');
+      this.$textarea.setAttribute('tabindex', '-1');
     }
     createToolbar() {
-      this.toolbar = document.createElement('div');
-      this.toolbar.className = 'moj-rich-text-editor';
-      this.toolbar.innerHTML = this.getEnhancedHtml();
-      this.container.append(this.toolbar);
-      this.content = /** @type {HTMLDivElement} */
-      this.container.querySelector('.moj-rich-text-editor__content');
-      this.content.innerHTML = this.$textarea.value;
+      this.$toolbar = document.createElement('div');
+      this.$toolbar.className = 'moj-rich-text-editor';
+      this.$toolbar.innerHTML = this.getEnhancedHtml();
+      this.$root.append(this.$toolbar);
+      this.$content = /** @type {HTMLElement} */
+      this.$root.querySelector('.moj-rich-text-editor__content');
+      this.$content.innerHTML = this.$textarea.value;
     }
     configureToolbar() {
-      this.buttons = Array.from(/** @type {NodeListOf<HTMLButtonElement>} */
-      this.container.querySelectorAll('.moj-rich-text-editor__toolbar-button'));
-      this.buttons.forEach((button, index) => {
-        button.setAttribute('tabindex', !index ? '0' : '-1');
-        button.addEventListener('click', this.onButtonClick.bind(this));
+      this.$buttons = Array.from(/** @type {NodeListOf<HTMLButtonElement>} */
+      this.$root.querySelectorAll('.moj-rich-text-editor__toolbar-button'));
+      this.$buttons.forEach(($button, index) => {
+        $button.setAttribute('tabindex', !index ? '0' : '-1');
+        $button.addEventListener('click', this.onButtonClick.bind(this));
       });
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onButtonClick(event) {
       if (!(event.currentTarget instanceof HTMLElement)) {
         return;
@@ -2218,290 +2595,449 @@
       document.execCommand(event.currentTarget.getAttribute('data-command'), false, undefined);
     }
     getContent() {
-      return this.content.innerHTML;
+      return this.$content.innerHTML;
     }
     onEditorInput() {
       this.updateTextarea();
     }
     updateTextarea() {
       document.execCommand('defaultParagraphSeparator', false, 'p');
-      this.textarea.value = this.getContent();
+      this.$textarea.value = this.getContent();
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onLabelClick(event) {
       event.preventDefault();
-      this.content.focus();
+      this.$content.focus();
+    }
+    static isSupported() {
+      return 'contentEditable' in document.documentElement;
     }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
 
-  class SearchToggle {
-    constructor(options) {
-      this.options = options;
-      this.container = this.options.search.container;
-      this.toggleButtonContainer = this.options.toggleButton.container;
-      if (this.container.hasAttribute('data-moj-search-toggle-init')) {
+  /**
+   * Rich text editor config
+   *
+   * @typedef {object} RichTextEditorConfig
+   * @property {RichTextEditorToolbar} [toolbar] - Toolbar options
+   */
+
+  /**
+   * Rich text editor toolbar options
+   *
+   * @typedef {object} RichTextEditorToolbar
+   * @property {boolean} [bold] - Show the bold button
+   * @property {boolean} [italic] - Show the italic button
+   * @property {boolean} [underline] - Show the underline button
+   * @property {boolean} [bullets] - Show the bullets button
+   * @property {boolean} [numbers] - Show the numbers button
+   */
+
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  RichTextEditor.moduleName = 'moj-rich-text-editor';
+  /**
+   * Rich text editor config
+   *
+   * @type {RichTextEditorConfig}
+   */
+  RichTextEditor.defaults = Object.freeze({
+    toolbar: {
+      bold: false,
+      italic: false,
+      underline: false,
+      bullets: true,
+      numbers: true
+    }
+  });
+  /**
+   * Rich text editor config schema
+   *
+   * @satisfies {Schema<RichTextEditorConfig>}
+   */
+  RichTextEditor.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      toolbar: {
+        type: 'object'
+      }
+    }
+  });
+
+  /**
+   * @augments {ConfigurableComponent<SearchToggleConfig>}
+   */
+  class SearchToggle extends govukFrontend.ConfigurableComponent {
+    /**
+     * @param {Element | null} $root - HTML element to use for search toggle
+     * @param {SearchToggleConfig} [config] - Search toggle config
+     */
+    constructor($root, config = {}) {
+      var _this$config$searchCo, _this$config$toggleBu;
+      super($root, config);
+      const $searchContainer = (_this$config$searchCo = this.config.searchContainer.element) != null ? _this$config$searchCo : this.$root.querySelector(this.config.searchContainer.selector);
+      const $toggleButtonContainer = (_this$config$toggleBu = this.config.toggleButtonContainer.element) != null ? _this$config$toggleBu : this.$root.querySelector(this.config.toggleButtonContainer.selector);
+      if (!$searchContainer || !$toggleButtonContainer || !($searchContainer instanceof HTMLElement) || !($toggleButtonContainer instanceof HTMLElement)) {
         return this;
       }
-      this.container.setAttribute('data-moj-search-toggle-init', '');
+      this.$searchContainer = $searchContainer;
+      this.$toggleButtonContainer = $toggleButtonContainer;
       const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
-      this.toggleButton = document.createElement('button');
-      this.toggleButton.setAttribute('class', 'moj-search-toggle__button');
-      this.toggleButton.setAttribute('type', 'button');
-      this.toggleButton.setAttribute('aria-haspopup', 'true');
-      this.toggleButton.setAttribute('aria-expanded', 'false');
-      this.toggleButton.innerHTML = `${this.options.toggleButton.text} ${svg}`;
-      this.toggleButton.addEventListener('click', this.onToggleButtonClick.bind(this));
-      this.toggleButtonContainer.append(this.toggleButton);
+      this.$toggleButton = document.createElement('button');
+      this.$toggleButton.setAttribute('class', 'moj-search-toggle__button');
+      this.$toggleButton.setAttribute('type', 'button');
+      this.$toggleButton.setAttribute('aria-haspopup', 'true');
+      this.$toggleButton.setAttribute('aria-expanded', 'false');
+      this.$toggleButton.innerHTML = `${this.config.toggleButton.text} ${svg}`;
+      this.$toggleButton.addEventListener('click', this.onToggleButtonClick.bind(this));
+      this.$toggleButtonContainer.append(this.$toggleButton);
       document.addEventListener('click', this.onDocumentClick.bind(this));
       document.addEventListener('focusin', this.onDocumentClick.bind(this));
     }
     showMenu() {
-      this.toggleButton.setAttribute('aria-expanded', 'true');
-      this.container.classList.remove('moj-js-hidden');
-      this.container.querySelector('input').focus();
+      this.$toggleButton.setAttribute('aria-expanded', 'true');
+      this.$searchContainer.classList.remove('moj-js-hidden');
+      this.$searchContainer.querySelector('input').focus();
     }
     hideMenu() {
-      this.container.classList.add('moj-js-hidden');
-      this.toggleButton.setAttribute('aria-expanded', 'false');
+      this.$searchContainer.classList.add('moj-js-hidden');
+      this.$toggleButton.setAttribute('aria-expanded', 'false');
     }
     onToggleButtonClick() {
-      if (this.toggleButton.getAttribute('aria-expanded') === 'false') {
+      if (this.$toggleButton.getAttribute('aria-expanded') === 'false') {
         this.showMenu();
       } else {
         this.hideMenu();
       }
     }
+
+    /**
+     * @param {MouseEvent | FocusEvent} event
+     */
     onDocumentClick(event) {
-      if (!this.toggleButtonContainer.contains(event.target) && !this.container.contains(event.target)) {
+      if (event.target instanceof Node && !this.$toggleButtonContainer.contains(event.target) && !this.$searchContainer.contains(event.target)) {
         this.hideMenu();
       }
     }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
   }
 
-  class SortableTable {
-    constructor(params) {
-      const table = params.table;
-      const head = table == null ? void 0 : table.querySelector('thead');
-      const body = table == null ? void 0 : table.querySelector('tbody');
-      if (!table || !(table instanceof HTMLElement) || !head || !body) {
-        return this;
+  /**
+   * @typedef {object} SearchToggleConfig
+   * @property {object} [searchContainer] - Search config
+   * @property {string} [searchContainer.selector] - Selector for search container
+   * @property {Element | null} [searchContainer.element] - HTML element for search container
+   * @property {object} [toggleButton] - Toggle button config
+   * @property {string} [toggleButton.text] - Text for toggle button
+   * @property {object} [toggleButtonContainer] - Toggle button container config
+   * @property {string} [toggleButtonContainer.selector] - Selector for toggle button container
+   * @property {Element | null} [toggleButtonContainer.element] - HTML element for toggle button container
+   */
+
+  /**
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+   */
+  SearchToggle.moduleName = 'moj-search-toggle';
+  /**
+   * Search toggle config
+   *
+   * @type {SearchToggleConfig}
+   */
+  SearchToggle.defaults = Object.freeze({
+    searchContainer: {
+      selector: '.moj-search'
+    },
+    toggleButton: {
+      text: 'Search'
+    },
+    toggleButtonContainer: {
+      selector: '.moj-search-toggle__toggle'
+    }
+  });
+  /**
+   * Search toggle config schema
+   *
+   * @satisfies {Schema<SearchToggleConfig>}
+   */
+  SearchToggle.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      searchContainer: {
+        type: 'object'
+      },
+      toggleButton: {
+        type: 'object'
+      },
+      toggleButtonContainer: {
+        type: 'object'
       }
-      this.table = table;
-      this.head = head;
-      this.body = body;
-      if (this.table.hasAttribute('data-moj-sortable-table-init')) {
+    }
+  });
+
+  /**
+   * @augments {ConfigurableComponent<SortableTableConfig>}
+   */
+  class SortableTable extends govukFrontend.ConfigurableComponent {
+    /**
+     * @param {Element | null} $root - HTML element to use for sortable table
+     * @param {SortableTableConfig} [config] - Sortable table config
+     */
+    constructor($root, config = {}) {
+      super($root, config);
+      const $head = $root == null ? void 0 : $root.querySelector('thead');
+      const $body = $root == null ? void 0 : $root.querySelector('tbody');
+      if (!$head || !$body) {
         return this;
       }
-      this.table.setAttribute('data-moj-sortable-table-init', '');
-      this.headings = this.head ? Array.from(this.head.querySelectorAll('th')) : [];
-      this.setupOptions(params);
+      this.$head = $head;
+      this.$body = $body;
+      this.$caption = this.$root.querySelector('caption');
+      this.$upArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5625 15.5L11 6.63125L15.4375 15.5H6.5625Z" fill="currentColor"/>
+</svg>`;
+      this.$downArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" vviewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4375 7L11 15.8687L6.5625 7L15.4375 7Z" fill="currentColor"/>
+</svg>`;
+      this.$upDownArrow = `<svg width="22" height="22" focusable="false" aria-hidden="true" role="img" vviewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z" fill="currentColor"/>
+<path d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z" fill="currentColor"/>
+</svg>`;
+      this.$headings = this.$head ? Array.from(this.$head.querySelectorAll('th')) : [];
       this.createHeadingButtons();
+      this.updateCaption();
+      this.updateDirectionIndicators();
       this.createStatusBox();
       this.initialiseSortedColumn();
-      this.head.addEventListener('click', this.onSortButtonClick.bind(this));
-    }
-    setupOptions(params) {
-      params = params || {};
-      this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
-      this.ascendingText = params.ascendingText || 'ascending';
-      this.descendingText = params.descendingText || 'descending';
+      this.$head.addEventListener('click', this.onSortButtonClick.bind(this));
     }
     createHeadingButtons() {
-      for (const heading of this.headings) {
-        if (heading.hasAttribute('aria-sort')) {
-          this.createHeadingButton(heading);
+      for (const $heading of this.$headings) {
+        if ($heading.hasAttribute('aria-sort')) {
+          this.createHeadingButton($heading);
         }
       }
     }
-    createHeadingButton(heading) {
-      const index = this.headings.indexOf(heading);
-      const button = document.createElement('button');
-      button.setAttribute('type', 'button');
-      button.setAttribute('data-index', `${index}`);
-      button.textContent = heading.textContent;
-      heading.textContent = '';
-      heading.appendChild(button);
+
+    /**
+     * @param {HTMLTableCellElement} $heading
+     */
+    createHeadingButton($heading) {
+      const index = this.$headings.indexOf($heading);
+      const $button = document.createElement('button');
+      $button.setAttribute('type', 'button');
+      $button.setAttribute('data-index', `${index}`);
+      $button.textContent = $heading.textContent;
+      $heading.textContent = '';
+      $heading.appendChild($button);
     }
     createStatusBox() {
-      this.status = document.createElement('div');
-      this.status.setAttribute('aria-atomic', 'true');
-      this.status.setAttribute('aria-live', 'polite');
-      this.status.setAttribute('class', 'govuk-visually-hidden');
-      this.status.setAttribute('role', 'status');
-      this.table.insertAdjacentElement('afterend', this.status);
+      this.$status = document.createElement('div');
+      this.$status.setAttribute('aria-atomic', 'true');
+      this.$status.setAttribute('aria-live', 'polite');
+      this.$status.setAttribute('class', 'govuk-visually-hidden');
+      this.$status.setAttribute('role', 'status');
+      this.$root.insertAdjacentElement('afterend', this.$status);
     }
     initialiseSortedColumn() {
-      var _sortButton$getAttrib;
-      const rows = this.getTableRowsArray();
-      const heading = this.table.querySelector('th[aria-sort]');
-      const sortButton = heading == null ? void 0 : heading.querySelector('button');
-      const sortDirection = heading == null ? void 0 : heading.getAttribute('aria-sort');
-      const columnNumber = Number.parseInt((_sortButton$getAttrib = sortButton == null ? void 0 : sortButton.getAttribute('data-index')) != null ? _sortButton$getAttrib : '0', 10);
-      if (!heading || !sortButton || !(sortDirection === 'ascending' || sortDirection === 'descending')) {
+      var _$sortButton$getAttri;
+      const $rows = this.getTableRowsArray();
+      const $heading = this.$root.querySelector('th[aria-sort="ascending"], th[aria-sort="descending"]');
+      const $sortButton = $heading == null ? void 0 : $heading.querySelector('button');
+      const sortDirection = $heading == null ? void 0 : $heading.getAttribute('aria-sort');
+      const columnNumber = Number.parseInt((_$sortButton$getAttri = $sortButton == null ? void 0 : $sortButton.getAttribute('data-index')) != null ? _$sortButton$getAttri : '0', 10);
+      if (!$heading || !$sortButton || !(sortDirection === 'ascending' || sortDirection === 'descending')) {
         return;
       }
-      const sortedRows = this.sort(rows, columnNumber, sortDirection);
-      this.addRows(sortedRows);
+      const $sortedRows = this.sort($rows, columnNumber, sortDirection);
+      this.addRows($sortedRows);
     }
+
+    /**
+     * @param {MouseEvent} event - Click event
+     */
     onSortButtonClick(event) {
-      var _button$getAttribute;
-      const button = event.target;
-      if (!button || !(button instanceof HTMLButtonElement) || !button.parentElement) {
+      var _$button$getAttribute;
+      const $target = /** @type {HTMLElement} */event.target;
+      const $button = $target.closest('button');
+      if (!$button || !($button instanceof HTMLButtonElement) || !$button.parentElement) {
         return;
       }
-      const heading = button.parentElement;
-      const sortDirection = heading.getAttribute('aria-sort');
-      const columnNumber = Number.parseInt((_button$getAttribute = button == null ? void 0 : button.getAttribute('data-index')) != null ? _button$getAttribute : '0', 10);
+      const $heading = $button.parentElement;
+      const sortDirection = $heading.getAttribute('aria-sort');
+      const columnNumber = Number.parseInt((_$button$getAttribute = $button == null ? void 0 : $button.getAttribute('data-index')) != null ? _$button$getAttribute : '0', 10);
       const newSortDirection = sortDirection === 'none' || sortDirection === 'descending' ? 'ascending' : 'descending';
-      const rows = this.getTableRowsArray();
-      const sortedRows = this.sort(rows, columnNumber, newSortDirection);
-      this.addRows(sortedRows);
+      const $rows = this.getTableRowsArray();
+      const $sortedRows = this.sort($rows, columnNumber, newSortDirection);
+      this.addRows($sortedRows);
       this.removeButtonStates();
-      this.updateButtonState(button, newSortDirection);
+      this.updateButtonState($button, newSortDirection);
+      this.updateDirectionIndicators();
     }
-    updateButtonState(button, direction) {
+    updateCaption() {
+      if (!this.$caption) {
+        return;
+      }
+      let assistiveText = this.$caption.querySelector('.govuk-visually-hidden');
+      if (assistiveText) {
+        return;
+      }
+      assistiveText = document.createElement('span');
+      assistiveText.classList.add('govuk-visually-hidden');
+      assistiveText.textContent = ' (column headers with buttons are sortable).';
+      this.$caption.appendChild(assistiveText);
+    }
+
+    /**
+     * @param {HTMLButtonElement} $button
+     * @param {string} direction
+     */
+    updateButtonState($button, direction) {
       if (!(direction === 'ascending' || direction === 'descending')) {
         return;
       }
-      button.parentElement.setAttribute('aria-sort', direction);
-      let message = this.statusMessage;
-      message = message.replace(/%heading%/, button.textContent);
-      message = message.replace(/%direction%/, this[`${direction}Text`]);
-      this.status.textContent = message;
+      $button.parentElement.setAttribute('aria-sort', direction);
+      let message = this.config.statusMessage;
+      message = message.replace(/%heading%/, $button.textContent);
+      message = message.replace(/%direction%/, this.config[`${direction}Text`]);
+      this.$status.textContent = message;
+    }
+    updateDirectionIndicators() {
+      for (const $heading of this.$headings) {
+        const $button = /** @type {HTMLButtonElement} */
+        $heading.querySelector('button');
+        if ($heading.hasAttribute('aria-sort') && $button) {
+          var _$button$querySelecto;
+          const direction = $heading.getAttribute('aria-sort');
+          (_$button$querySelecto = $button.querySelector('svg')) == null || _$button$querySelecto.remove();
+          switch (direction) {
+            case 'ascending':
+              $button.insertAdjacentHTML('beforeend', this.$upArrow);
+              break;
+            case 'descending':
+              $button.insertAdjacentHTML('beforeend', this.$downArrow);
+              break;
+            default:
+              $button.insertAdjacentHTML('beforeend', this.$upDownArrow);
+          }
+        }
+      }
     }
     removeButtonStates() {
-      for (const heading of this.headings) {
-        heading.setAttribute('aria-sort', 'none');
+      for (const $heading of this.$headings) {
+        $heading.setAttribute('aria-sort', 'none');
       }
     }
-    addRows(rows) {
-      for (const row of rows) {
-        this.body.append(row);
+
+    /**
+     * @param {HTMLTableRowElement[]} $rows
+     */
+    addRows($rows) {
+      for (const $row of $rows) {
+        this.$body.append($row);
       }
     }
     getTableRowsArray() {
-      return Array.from(this.body.querySelectorAll('tr'));
+      return Array.from(this.$body.querySelectorAll('tr'));
     }
-    sort(rows, columnNumber, sortDirection) {
-      return rows.sort((rowA, rowB) => {
-        const tdA = rowA.querySelectorAll('td, th')[columnNumber];
-        const tdB = rowB.querySelectorAll('td, th')[columnNumber];
-        if (!tdA || !tdB || !(tdA instanceof HTMLElement) || !(tdB instanceof HTMLElement)) {
+
+    /**
+     * @param {HTMLTableRowElement[]} $rows
+     * @param {number} columnNumber
+     * @param {string} sortDirection
+     */
+    sort($rows, columnNumber, sortDirection) {
+      return $rows.sort(($rowA, $rowB) => {
+        const $tdA = $rowA.querySelectorAll('td, th')[columnNumber];
+        const $tdB = $rowB.querySelectorAll('td, th')[columnNumber];
+        if (!$tdA || !$tdB || !($tdA instanceof HTMLElement) || !($tdB instanceof HTMLElement)) {
           return 0;
         }
-        const valueA = sortDirection === 'ascending' ? this.getCellValue(tdA) : this.getCellValue(tdB);
-        const valueB = sortDirection === 'ascending' ? this.getCellValue(tdB) : this.getCellValue(tdA);
+        const valueA = sortDirection === 'ascending' ? this.getCellValue($tdA) : this.getCellValue($tdB);
+        const valueB = sortDirection === 'ascending' ? this.getCellValue($tdB) : this.getCellValue($tdA);
         return !(typeof valueA === 'number' && typeof valueB === 'number') ? valueA.toString().localeCompare(valueB.toString()) : valueA - valueB;
       });
     }
-    getCellValue(cell) {
-      const val = cell.getAttribute('data-sort-value') || cell.innerHTML;
+
+    /**
+     * @param {HTMLElement} $cell
+     */
+    getCellValue($cell) {
+      const val = $cell.getAttribute('data-sort-value') || $cell.innerHTML;
       const valAsNumber = Number(val);
       return Number.isFinite(valAsNumber) ? valAsNumber // Exclude invalid numbers, infinity etc
       : val;
     }
-  }
 
-  const version = '0.0.0-development';
-
-  /* eslint-disable no-new */
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
+  }
 
+  /**
+   * Sortable table config
+   *
+   * @typedef {object} SortableTableConfig
+   * @property {string} [statusMessage] - Status message
+   * @property {string} [ascendingText] - Ascending text
+   * @property {string} [descendingText] - Descending text
+   */
 
   /**
-   * @param {Config} [config]
+   * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
    */
-  function initAll(config) {
-    // Set the config to an empty object by default if no config is passed.
-    config = typeof config !== 'undefined' ? config : {};
-
-    // Allow the user to initialise MOJ Frontend in only certain sections of the page
-    // Defaults to the entire document if nothing is set.
-    const scope = typeof config.scope !== 'undefined' ? config.scope : document;
-    const $addAnothers = scope.querySelectorAll('[data-module="moj-add-another"]');
-    $addAnothers.forEach($addAnother => {
-      new AddAnother($addAnother);
-    });
-    const $multiSelects = scope.querySelectorAll('[data-module="moj-multi-select"]');
-    $multiSelects.forEach($multiSelect => {
-      const containerSelector = $multiSelect.getAttribute('data-multi-select-checkbox');
-      if (!($multiSelect instanceof HTMLElement) || !containerSelector) {
-        return;
-      }
-      new MultiSelect({
-        container: $multiSelect.querySelector(containerSelector),
-        checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input'),
-        id_prefix: $multiSelect.getAttribute('data-multi-select-idprefix')
-      });
-    });
-    const $passwordReveals = scope.querySelectorAll('[data-module="moj-password-reveal"]');
-    $passwordReveals.forEach($passwordReveal => {
-      new PasswordReveal($passwordReveal);
-    });
-    const $richTextEditors = scope.querySelectorAll('[data-module="moj-rich-text-editor"]');
-    $richTextEditors.forEach($richTextEditor => {
-      const options = {
-        textarea: $richTextEditor
-      };
-      const toolbarAttr = $richTextEditor.getAttribute('data-moj-rich-text-editor-toolbar');
-      if (toolbarAttr) {
-        const toolbar = toolbarAttr.split(',');
-        options.toolbar = {};
-        for (const option of toolbar) {
-          if (option === 'bold' || option === 'italic' || option === 'underline' || option === 'bullets' || option === 'numbers') {
-            options.toolbar[option] = true;
-          }
-        }
+  SortableTable.moduleName = 'moj-sortable-table';
+  /**
+   * Sortable table config
+   *
+   * @type {SortableTableConfig}
+   */
+  SortableTable.defaults = Object.freeze({
+    statusMessage: 'Sort by %heading% (%direction%)',
+    ascendingText: 'ascending',
+    descendingText: 'descending'
+  });
+  /**
+   * Sortable table config schema
+   *
+   * @satisfies {Schema<SortableTableConfig>}
+   */
+  SortableTable.schema = Object.freeze(/** @type {const} */{
+    properties: {
+      statusMessage: {
+        type: 'string'
+      },
+      ascendingText: {
+        type: 'string'
+      },
+      descendingText: {
+        type: 'string'
       }
-      new RichTextEditor(options);
-    });
-    const $searchToggles = scope.querySelectorAll('[data-module="moj-search-toggle"]');
-    $searchToggles.forEach($searchToggle => {
-      new SearchToggle({
-        toggleButton: {
-          container: $searchToggle.querySelector('.moj-search-toggle__toggle'),
-          text: $searchToggle.getAttribute('data-moj-search-toggle-text')
-        },
-        search: {
-          container: $searchToggle.querySelector('.moj-search')
-        }
-      });
-    });
-    const $sortableTables = scope.querySelectorAll('[data-module="moj-sortable-table"]');
-    $sortableTables.forEach($table => {
-      new SortableTable({
-        table: $table
-      });
-    });
-    const $datePickers = scope.querySelectorAll('[data-module="moj-date-picker"]');
-    $datePickers.forEach($datePicker => {
-      new DatePicker($datePicker);
-    });
-    const $buttonMenus = scope.querySelectorAll('[data-module="moj-button-menu"]');
-    $buttonMenus.forEach($buttonmenu => {
-      new ButtonMenu($buttonmenu);
-    });
-    const $alerts = scope.querySelectorAll('[data-module="moj-alert"]');
-    $alerts.forEach($alert => {
-      new Alert($alert);
-    });
-  }
+    }
+  });
 
   /**
-   * @typedef {object} Config
-   * @property {Element} [scope=document] - Scope to query for components
+   * @param {Config} [config]
    */
+  function initAll(config) {
+    for (const Component of [AddAnother, Alert, ButtonMenu, DatePicker, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable]) {
+      govukFrontend.createAll(Component, undefined, config);
+    }
+  }
 
   /**
-   * Schema for component config
-   *
-   * @typedef {object} Schema
-   * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
+   * @typedef {Parameters<typeof GOVUKFrontend.initAll>[0]} Config
    */
 
   /**
-   * Schema property for component config
-   *
-   * @typedef {object} SchemaProperty
-   * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+   * @import * as GOVUKFrontend from 'govuk-frontend'
    */
 
   exports.AddAnother = AddAnother;