npm - @ministryofjustice/frontend - Versions diffs - 5.0.0 → 5.1.0 - Mend

@ministryofjustice/frontend 5.0.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/moj/all.bundle.js +1549 -1062
package/moj/all.bundle.js.map +1 -1
package/moj/all.bundle.mjs +1845 -1054
package/moj/all.bundle.mjs.map +1 -1
package/moj/all.mjs +7 -90
package/moj/all.mjs.map +1 -1
package/moj/all.scss +1 -0
package/moj/all.scss.map +1 -1
package/moj/common/index.mjs +57 -0
package/moj/common/index.mjs.map +1 -0
package/moj/common/moj-frontend-version.mjs +14 -0
package/moj/common/moj-frontend-version.mjs.map +1 -0
package/moj/components/add-another/add-another.bundle.js +105 -76
package/moj/components/add-another/add-another.bundle.js.map +1 -1
package/moj/components/add-another/add-another.bundle.mjs +222 -71
package/moj/components/add-another/add-another.bundle.mjs.map +1 -1
package/moj/components/add-another/add-another.mjs +103 -72
package/moj/components/add-another/add-another.mjs.map +1 -1
package/moj/components/alert/alert.bundle.js +115 -191
package/moj/components/alert/alert.bundle.js.map +1 -1
package/moj/components/alert/alert.bundle.mjs +354 -186
package/moj/components/alert/alert.bundle.mjs.map +1 -1
package/moj/components/alert/alert.mjs +55 -140
package/moj/components/alert/alert.mjs.map +1 -1
package/moj/components/button-menu/README.md +3 -1
package/moj/components/button-menu/button-menu.bundle.js +91 -120
package/moj/components/button-menu/button-menu.bundle.js.map +1 -1
package/moj/components/button-menu/button-menu.bundle.mjs +329 -114
package/moj/components/button-menu/button-menu.bundle.mjs.map +1 -1
package/moj/components/button-menu/button-menu.mjs +89 -116
package/moj/components/button-menu/button-menu.mjs.map +1 -1
package/moj/components/date-picker/date-picker.bundle.js +174 -154
package/moj/components/date-picker/date-picker.bundle.js.map +1 -1
package/moj/components/date-picker/date-picker.bundle.mjs +411 -147
package/moj/components/date-picker/date-picker.bundle.mjs.map +1 -1
package/moj/components/date-picker/date-picker.mjs +172 -150
package/moj/components/date-picker/date-picker.mjs.map +1 -1
package/moj/components/filter/template.njk +1 -1
package/moj/components/filter-toggle-button/filter-toggle-button.bundle.js +133 -44
package/moj/components/filter-toggle-button/filter-toggle-button.bundle.js.map +1 -1
package/moj/components/filter-toggle-button/filter-toggle-button.bundle.mjs +374 -41
package/moj/components/filter-toggle-button/filter-toggle-button.bundle.mjs.map +1 -1
package/moj/components/filter-toggle-button/filter-toggle-button.mjs +131 -40
package/moj/components/filter-toggle-button/filter-toggle-button.mjs.map +1 -1
package/moj/components/form-validator/form-validator.bundle.js +159 -69
package/moj/components/form-validator/form-validator.bundle.js.map +1 -1
package/moj/components/form-validator/form-validator.bundle.mjs +399 -65
package/moj/components/form-validator/form-validator.bundle.mjs.map +1 -1
package/moj/components/form-validator/form-validator.mjs +134 -54
package/moj/components/form-validator/form-validator.mjs.map +1 -1
package/moj/components/multi-file-upload/multi-file-upload.bundle.js +291 -117
package/moj/components/multi-file-upload/multi-file-upload.bundle.js.map +1 -1
package/moj/components/multi-file-upload/multi-file-upload.bundle.mjs +527 -109
package/moj/components/multi-file-upload/multi-file-upload.bundle.mjs.map +1 -1
package/moj/components/multi-file-upload/multi-file-upload.mjs +288 -101
package/moj/components/multi-file-upload/multi-file-upload.mjs.map +1 -1
package/moj/components/multi-file-upload/template.njk +1 -1
package/moj/components/multi-select/multi-select.bundle.js +106 -41
package/moj/components/multi-select/multi-select.bundle.js.map +1 -1
package/moj/components/multi-select/multi-select.bundle.mjs +346 -37
package/moj/components/multi-select/multi-select.bundle.mjs.map +1 -1
package/moj/components/multi-select/multi-select.mjs +104 -37
package/moj/components/multi-select/multi-select.mjs.map +1 -1
package/moj/components/password-reveal/_password-reveal.scss +3 -1
package/moj/components/password-reveal/_password-reveal.scss.map +1 -1
package/moj/components/password-reveal/password-reveal.bundle.js +32 -29
package/moj/components/password-reveal/password-reveal.bundle.js.map +1 -1
package/moj/components/password-reveal/password-reveal.bundle.mjs +149 -24
package/moj/components/password-reveal/password-reveal.bundle.mjs.map +1 -1
package/moj/components/password-reveal/password-reveal.mjs +30 -25
package/moj/components/password-reveal/password-reveal.mjs.map +1 -1
package/moj/components/rich-text-editor/README.md +4 -3
package/moj/components/rich-text-editor/rich-text-editor.bundle.js +127 -62
package/moj/components/rich-text-editor/rich-text-editor.bundle.js.map +1 -1
package/moj/components/rich-text-editor/rich-text-editor.bundle.mjs +367 -58
package/moj/components/rich-text-editor/rich-text-editor.bundle.mjs.map +1 -1
package/moj/components/rich-text-editor/rich-text-editor.mjs +125 -58
package/moj/components/rich-text-editor/rich-text-editor.mjs.map +1 -1
package/moj/components/search-toggle/search-toggle.bundle.js +94 -26
package/moj/components/search-toggle/search-toggle.bundle.js.map +1 -1
package/moj/components/search-toggle/search-toggle.bundle.mjs +334 -22
package/moj/components/search-toggle/search-toggle.bundle.mjs.map +1 -1
package/moj/components/search-toggle/search-toggle.mjs +92 -22
package/moj/components/search-toggle/search-toggle.mjs.map +1 -1
package/moj/components/sortable-table/sortable-table.bundle.js +151 -83
package/moj/components/sortable-table/sortable-table.bundle.js.map +1 -1
package/moj/components/sortable-table/sortable-table.bundle.mjs +390 -78
package/moj/components/sortable-table/sortable-table.bundle.mjs.map +1 -1
package/moj/components/sortable-table/sortable-table.mjs +149 -79
package/moj/components/sortable-table/sortable-table.mjs.map +1 -1
package/moj/core/_all.scss +3 -0
package/moj/core/_all.scss.map +1 -0
package/moj/core/_moj-frontend-properties.scss +7 -0
package/moj/core/_moj-frontend-properties.scss.map +1 -0
package/moj/filters/prototype-kit-13-filters.js +4 -3
package/moj/helpers.bundle.js +22 -77
package/moj/helpers.bundle.js.map +1 -1
package/moj/helpers.bundle.mjs +23 -74
package/moj/helpers.bundle.mjs.map +1 -1
package/moj/helpers.mjs +23 -74
package/moj/helpers.mjs.map +1 -1
package/moj/moj-frontend.min.css +1 -1
package/moj/moj-frontend.min.css.map +1 -1
package/moj/moj-frontend.min.js +1 -1
package/moj/moj-frontend.min.js.map +1 -1
package/package.json +1 -1
package/moj/version.bundle.js +0 -12
package/moj/version.bundle.js.map +0 -1
package/moj/version.bundle.mjs +0 -4
package/moj/version.bundle.mjs.map +0 -1
package/moj/version.mjs +0 -4
package/moj/version.mjs.map +0 -1

package/moj/all.bundle.mjs CHANGED Viewed

@@ -1,158 +1,557 @@
-class AddAnother {
-  constructor(container) {
-    this.container = container;
-    if (this.container.hasAttribute('data-moj-add-another-init')) {
-      return this;
+function isInitialised($root, moduleName) {
+  return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
+}
+/**
+ * Checks if GOV.UK Frontend is supported on this page
+ *
+ * Some browsers will load and run our JavaScript but GOV.UK Frontend
+ * won't be supported.
+ *
+ * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
+ * @returns {boolean} Whether GOV.UK Frontend is supported on this page
+ */
+function isSupported($scope = document.body) {
+  if (!$scope) {
+    return false;
+  }
+  return $scope.classList.contains('govuk-frontend-supported');
+}
+function isArray(option) {
+  return Array.isArray(option);
+}
+function isObject(option) {
+  return !!option && typeof option === 'object' && !isArray(option);
+}
+function formatErrorMessage(Component, message) {
+  return `${Component.moduleName}: ${message}`;
+}
+class GOVUKFrontendError extends Error {
+  constructor(...args) {
+    super(...args);
+    this.name = 'GOVUKFrontendError';
+  }
+}
+class SupportError extends GOVUKFrontendError {
+  /**
+   * Checks if GOV.UK Frontend is supported on this page
+   *
+   * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+   */
+  constructor($scope = document.body) {
+    const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
+    super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
+    this.name = 'SupportError';
+  }
+}
+class ConfigError extends GOVUKFrontendError {
+  constructor(...args) {
+    super(...args);
+    this.name = 'ConfigError';
+  }
+}
+class ElementError extends GOVUKFrontendError {
+  constructor(messageOrOptions) {
+    let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
+    if (typeof messageOrOptions === 'object') {
+      const {
+        component,
+        identifier,
+        element,
+        expectedType
+      } = messageOrOptions;
+      message = identifier;
+      message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
+      message = formatErrorMessage(component, message);
+    }
+    super(message);
+    this.name = 'ElementError';
+  }
+}
+class InitError extends GOVUKFrontendError {
+  constructor(componentOrMessage) {
+    const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
+    super(message);
+    this.name = 'InitError';
+  }
+}
+class Component {
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {RootElementType} - the root element of component
+   */
+  get $root() {
+    return this._$root;
+  }
+  constructor($root) {
+    this._$root = void 0;
+    const childConstructor = this.constructor;
+    if (typeof childConstructor.moduleName !== 'string') {
+      throw new InitError(`\`moduleName\` not defined in component`);
+    }
+    if (!($root instanceof childConstructor.elementType)) {
+      throw new ElementError({
+        element: $root,
+        component: childConstructor,
+        identifier: 'Root element (`$root`)',
+        expectedType: childConstructor.elementType.name
+      });
+    } else {
+      this._$root = $root;
+    }
+    childConstructor.checkSupport();
+    this.checkInitialised();
+    const moduleName = childConstructor.moduleName;
+    this.$root.setAttribute(`data-${moduleName}-init`, '');
+  }
+  checkInitialised() {
+    const constructor = this.constructor;
+    const moduleName = constructor.moduleName;
+    if (moduleName && isInitialised(this.$root, moduleName)) {
+      throw new InitError(constructor);
+    }
+  }
+  static checkSupport() {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+  }
+}
+/**
+ * @typedef ChildClass
+ * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
+ */
+/**
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
+ */
+Component.elementType = HTMLElement;
+const configOverride = Symbol.for('configOverride');
+class ConfigurableComponent extends Component {
+  [configOverride](param) {
+    return {};
+  }
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {ConfigurationType} - the root element of component
+   */
+  get config() {
+    return this._config;
+  }
+  constructor($root, config) {
+    super($root);
+    this._config = void 0;
+    const childConstructor = this.constructor;
+    if (!isObject(childConstructor.defaults)) {
+      throw new ConfigError(formatErrorMessage(childConstructor, 'Config passed as parameter into constructor but no defaults defined'));
+    }
+    const datasetConfig = normaliseDataset(childConstructor, this._$root.dataset);
+    this._config = mergeConfigs(childConstructor.defaults, config != null ? config : {}, this[configOverride](datasetConfig), datasetConfig);
+  }
+}
+function normaliseString(value, property) {
+  const trimmedValue = value ? value.trim() : '';
+  let output;
+  let outputType = property == null ? void 0 : property.type;
+  if (!outputType) {
+    if (['true', 'false'].includes(trimmedValue)) {
+      outputType = 'boolean';
+    }
+    if (trimmedValue.length > 0 && isFinite(Number(trimmedValue))) {
+      outputType = 'number';
+    }
+  }
+  switch (outputType) {
+    case 'boolean':
+      output = trimmedValue === 'true';
+      break;
+    case 'number':
+      output = Number(trimmedValue);
+      break;
+    default:
+      output = value;
+  }
+  return output;
+}
+function normaliseDataset(Component, dataset) {
+  if (!isObject(Component.schema)) {
+    throw new ConfigError(formatErrorMessage(Component, 'Config passed as parameter into constructor but no schema defined'));
+  }
+  const out = {};
+  const entries = Object.entries(Component.schema.properties);
+  for (const entry of entries) {
+    const [namespace, property] = entry;
+    const field = namespace.toString();
+    if (field in dataset) {
+      out[field] = normaliseString(dataset[field], property);
+    }
+    if ((property == null ? void 0 : property.type) === 'object') {
+      out[field] = extractConfigByNamespace(Component.schema, dataset, namespace);
+    }
+  }
+  return out;
+}
+function mergeConfigs(...configObjects) {
+  const formattedConfigObject = {};
+  for (const configObject of configObjects) {
+    for (const key of Object.keys(configObject)) {
+      const option = formattedConfigObject[key];
+      const override = configObject[key];
+      if (isObject(option) && isObject(override)) {
+        formattedConfigObject[key] = mergeConfigs(option, override);
+      } else {
+        formattedConfigObject[key] = override;
+      }
+    }
+  }
+  return formattedConfigObject;
+}
+function extractConfigByNamespace(schema, dataset, namespace) {
+  const property = schema.properties[namespace];
+  if ((property == null ? void 0 : property.type) !== 'object') {
+    return;
+  }
+  const newObject = {
+    [namespace]: {}
+  };
+  for (const [key, value] of Object.entries(dataset)) {
+    let current = newObject;
+    const keyParts = key.split('.');
+    for (const [index, name] of keyParts.entries()) {
+      if (isObject(current)) {
+        if (index < keyParts.length - 1) {
+          if (!isObject(current[name])) {
+            current[name] = {};
+          }
+          current = current[name];
+        } else if (key !== namespace) {
+          current[name] = normaliseString(value);
+        }
+      }
+    }
+  }
+  return newObject[namespace];
+}
+/**
+ * Create all instances of a specific component on the page
+ *
+ * Uses the `data-module` attribute to find all elements matching the specified
+ * component on the page, creating instances of the component object for each
+ * of them.
+ *
+ * Any component errors will be caught and logged to the console.
+ *
+ * @template {CompatibleClass} ComponentClass
+ * @param {ComponentClass} Component - class of the component to create
+ * @param {ComponentConfig<ComponentClass>} [config] - Config supplied to component
+ * @param {OnErrorCallback<ComponentClass> | Element | Document | CreateAllOptions<ComponentClass> } [createAllOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
+ * @returns {Array<InstanceType<ComponentClass>>} - array of instantiated components
+ */
+function createAll(Component, config, createAllOptions) {
+  let $scope = document;
+  let onError;
+  if (typeof createAllOptions === 'object') {
+    var _createAllOptions$sco;
+    createAllOptions = createAllOptions;
+    $scope = (_createAllOptions$sco = createAllOptions.scope) != null ? _createAllOptions$sco : $scope;
+    onError = createAllOptions.onError;
+  }
+  if (typeof createAllOptions === 'function') {
+    onError = createAllOptions;
+  }
+  if (createAllOptions instanceof HTMLElement) {
+    $scope = createAllOptions;
+  }
+  const $elements = $scope.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+  if (!isSupported()) {
+    if (onError) {
+      onError(new SupportError(), {
+        component: Component,
+        config
+      });
+    } else {
+      console.log(new SupportError());
+    }
+    return [];
+  }
+  return Array.from($elements).map($element => {
+    try {
+      return typeof config !== 'undefined' ? new Component($element, config) : new Component($element);
+    } catch (error) {
+      if (onError) {
+        onError(error, {
+          element: $element,
+          component: Component,
+          config
+        });
+      } else {
+        console.log(error);
+      }
+      return null;
     }
-    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)) {
+  }).filter(Boolean);
+}
+/*
+ * 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.0';
+class AddAnother extends 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
@@ -213,89 +612,15 @@ function findNearestMatchingElement($element, selector) {
 }
 /**
- * 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 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
@@ -308,14 +633,14 @@ class Alert {
      * 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();
         }
@@ -336,7 +661,7 @@ class Alert {
     // 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;
       }
@@ -344,13 +669,13 @@ class Alert {
     // 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
@@ -359,111 +684,12 @@ class Alert {
     }
     // Remove the alert
-    this.$module.remove();
+    this.$root.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;
-  }
-  /**
-   * 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.
+   */
 }
 /**
@@ -474,71 +700,87 @@ class Alert {
  * @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 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);
       }
     });
@@ -551,30 +793,30 @@ class ButtonMenu {
     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);
@@ -599,6 +841,10 @@ class ButtonMenu {
   isOpen() {
     return this.$menuToggle.getAttribute('aria-expanded') === 'true';
   }
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   toggleMenu(event) {
     event.preventDefault();
@@ -644,18 +890,22 @@ class ButtonMenu {
    * @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) {
@@ -665,11 +915,11 @@ class ButtonMenu {
           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();
@@ -689,7 +939,7 @@ class ButtonMenu {
           break;
         case 'End':
           event.preventDefault();
-          this.focusItem(this.items.length - 1);
+          this.focusItem(this.$items.length - 1);
           break;
       }
     }
@@ -702,58 +952,8 @@ class ButtonMenu {
   }
   /**
-   * 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.
+   */
 }
 /**
@@ -763,69 +963,68 @@ class ButtonMenu {
  * @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 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}`;
@@ -840,15 +1039,23 @@ class DatePicker {
     $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));
@@ -862,9 +1069,9 @@ class DatePicker {
     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));
@@ -1010,7 +1217,6 @@ class DatePicker {
     this.setMinAndMaxDatesOnCalendar();
     this.setExcludedDates();
     this.setExcludedDays();
-    this.setLeadingZeros();
     this.setWeekStartDay();
   }
   setMinAndMaxDatesOnCalendar() {
@@ -1035,10 +1241,10 @@ class DatePicker {
     }
   }
-  /*
+  /**
    * 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 = [];
@@ -1065,17 +1271,6 @@ class DatePicker {
       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') {
@@ -1088,7 +1283,7 @@ class DatePicker {
   }
   /**
-   * Determine if a date is selecteable
+   * Determine if a date is selectable
    *
    * @param {Date} date - the date to check
    * @returns {boolean}
@@ -1154,24 +1349,36 @@ class DatePicker {
   /**
    * 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();
@@ -1201,49 +1408,57 @@ class DatePicker {
       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;
@@ -1260,6 +1475,10 @@ class DatePicker {
   isOpen() {
     return this.$dialog.classList.contains('moj-datepicker__dialog--open');
   }
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   toggleDialog(event) {
     event.preventDefault();
     if (this.isOpen()) {
@@ -1294,6 +1513,11 @@ class DatePicker {
     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;
@@ -1345,13 +1569,23 @@ class DatePicker {
     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);
   }
+  /**
+   * @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);
@@ -1359,13 +1593,23 @@ class DatePicker {
     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);
@@ -1374,72 +1618,70 @@ class DatePicker {
   }
   /**
-   * 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));
   }
   /**
@@ -1451,26 +1693,34 @@ class DSCalendarDay {
     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) {
@@ -1527,45 +1777,61 @@ class DSCalendarDay {
  * @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 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();
@@ -1580,69 +1846,147 @@ class FilterToggleButton {
     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 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;
@@ -1651,10 +1995,10 @@ class FormValidator {
     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>';
@@ -1672,9 +2016,13 @@ class FormValidator {
     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();
@@ -1691,25 +2039,29 @@ class FormValidator {
       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() {
@@ -1717,33 +2069,46 @@ class FormValidator {
       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;
@@ -1768,11 +2133,41 @@ class FormValidator {
     }
     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;',
@@ -1784,164 +2179,218 @@ FormValidator.entityMap = {
   '`': '&#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 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);
@@ -1950,15 +2399,19 @@ class MultiFileUpload {
         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
@@ -1968,155 +2421,371 @@ class MultiFileUpload {
       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 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 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 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();
@@ -2126,34 +2795,42 @@ class RichTextEditor {
       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;
         }
@@ -2162,19 +2839,19 @@ class RichTextEditor {
   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>';
@@ -2184,27 +2861,31 @@ class RichTextEditor {
     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;
@@ -2212,290 +2893,400 @@ class RichTextEditor {
     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 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 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.$headings = this.$head ? Array.from(this.$head.querySelectorAll('th')) : [];
     this.createHeadingButtons();
     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]');
+    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 $button = event.target;
+    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);
   }
-  updateButtonState(button, direction) {
+  /**
+   * @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;
   }
   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]) {
+    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'
  */
 export { AddAnother, Alert, ButtonMenu, DatePicker, FilterToggleButton, FormValidator, MultiFileUpload, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable, initAll, version };