govuk_tech_docs 4.2.0 → 4.3.1

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

@@ -1,81 +1,11 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = {}));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = global.GOVUKFrontend || {}));
 })(this, (function (exports) { 'use strict';
 
-  const version = '5.7.1';
+  const version = '5.9.0';
 
-  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;
-  }
-
-  /**
-   * @typedef {import('./index.mjs').SchemaProperty} SchemaProperty
-   */
-
-  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(Component, dataset, namespace) {
-    const property = Component.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 (typeof current === 'object') {
-          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];
-  }
   function getFragmentFromUrl(url) {
     if (!url.includes('#')) {
       return undefined;
@@ -133,26 +63,6 @@
     }
     return $scope.classList.contains('govuk-frontend-supported');
   }
-  function validateConfig(schema, config) {
-    const validationErrors = [];
-    for (const [name, conditions] of Object.entries(schema)) {
-      const errors = [];
-      if (Array.isArray(conditions)) {
-        for (const {
-          required,
-          errorMessage
-        } of conditions) {
-          if (!required.every(key => !!config[key])) {
-            errors.push(errorMessage);
-          }
-        }
-        if (name === 'anyOf' && !(conditions.length - errors.length >= 1)) {
-          validationErrors.push(...errors);
-        }
-      }
-    }
-    return validationErrors;
-  }
   function isArray(option) {
     return Array.isArray(option);
   }
@@ -162,46 +72,13 @@
   function formatErrorMessage(Component, message) {
     return `${Component.moduleName}: ${message}`;
   }
-
-  /**
-   * Schema for component config
-   *
-   * @typedef {object} Schema
-   * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
-   * @property {SchemaCondition[]} [anyOf] - List of schema conditions
-   */
-
-  /**
-   * Schema property for component config
-   *
-   * @typedef {object} SchemaProperty
-   * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
-   */
-
-  /**
-   * Schema condition for component config
-   *
-   * @typedef {object} SchemaCondition
-   * @property {string[]} required - List of required config fields
-   * @property {string} errorMessage - Error message when required config fields not provided
-   */
   /**
    * @typedef ComponentWithModuleName
    * @property {string} moduleName - Name of the component
    */
-
-  function normaliseDataset(Component, dataset) {
-    const out = {};
-    for (const [field, property] of Object.entries(Component.schema.properties)) {
-      if (field in dataset) {
-        out[field] = normaliseString(dataset[field], property);
-      }
-      if ((property == null ? void 0 : property.type) === 'object') {
-        out[field] = extractConfigByNamespace(Component, dataset, field);
-      }
-    }
-    return out;
-  }
+  /**
+   * @import { ObjectNested } from './configuration.mjs'
+   */
 
   class GOVUKFrontendError extends Error {
     constructor(...args) {
@@ -253,10 +130,10 @@
     }
   }
   /**
-   * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
+   * @import { ComponentWithModuleName } from '../common/index.mjs'
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -307,9 +184,172 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @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 validateConfig(schema, config) {
+    const validationErrors = [];
+    for (const [name, conditions] of Object.entries(schema)) {
+      const errors = [];
+      if (Array.isArray(conditions)) {
+        for (const {
+          required,
+          errorMessage
+        } of conditions) {
+          if (!required.every(key => !!config[key])) {
+            errors.push(errorMessage);
+          }
+        }
+        if (name === 'anyOf' && !(conditions.length - errors.length >= 1)) {
+          validationErrors.push(...errors);
+        }
+      }
+    }
+    return validationErrors;
+  }
+  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];
+  }
+  /**
+   * Schema for component config
+   *
+   * @template {Partial<Record<keyof ConfigurationType, unknown>>} ConfigurationType
+   * @typedef {object} Schema
+   * @property {Record<keyof ConfigurationType, SchemaProperty | undefined>} properties - Schema properties
+   * @property {SchemaCondition<ConfigurationType>[]} [anyOf] - List of schema conditions
+   */
+  /**
+   * Schema property for component config
+   *
+   * @typedef {object} SchemaProperty
+   * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+   */
+  /**
+   * Schema condition for component config
+   *
+   * @template {Partial<Record<keyof ConfigurationType, unknown>>} ConfigurationType
+   * @typedef {object} SchemaCondition
+   * @property {(keyof ConfigurationType)[]} required - List of required config fields
+   * @property {string} errorMessage - Error message when required config fields not provided
+   */
+  /**
+   * @template {Partial<Record<keyof ConfigurationType, unknown>>} [ConfigurationType=ObjectNested]
+   * @typedef ChildClass
+   * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
+   * @property {Schema<ConfigurationType>} [schema] - The schema of the component configuration
+   * @property {ConfigurationType} [defaults] - The default values of the configuration of the component
+   */
+  /**
+   * @template {Partial<Record<keyof ConfigurationType, unknown>>} [ConfigurationType=ObjectNested]
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
 
   class I18n {
     constructor(translations = {}, config = {}) {
@@ -517,15 +557,15 @@
    * attribute, which also provides accessibility.
    *
    * @preserve
+   * @augments ConfigurableComponent<AccordionConfig>
    */
-  class Accordion extends GOVUKFrontendComponent {
+  class Accordion extends ConfigurableComponent {
     /**
      * @param {Element | null} $root - HTML element to use for accordion
      * @param {AccordionConfig} [config] - Accordion config
      */
     constructor($root, config = {}) {
-      super($root);
-      this.config = void 0;
+      super($root, config);
       this.i18n = void 0;
       this.controlsClass = 'govuk-accordion__controls';
       this.showAllClass = 'govuk-accordion__show-all';
@@ -550,7 +590,6 @@
       this.$showAllButton = null;
       this.$showAllIcon = null;
       this.$showAllText = null;
-      this.config = mergeConfigs(Accordion.defaults, config, normaliseDataset(Accordion, this.$root.dataset));
       this.i18n = new I18n(this.config.i18n);
       const $sections = this.$root.querySelectorAll(`.${this.sectionClass}`);
       if (!$sections.length) {
@@ -820,7 +859,7 @@
    */
 
   /**
-   * @typedef {import('../../common/index.mjs').Schema} Schema
+   * @import { Schema } from '../../common/configuration.mjs'
    */
   Accordion.moduleName = 'govuk-accordion';
   Accordion.defaults = Object.freeze({
@@ -851,17 +890,16 @@
    * JavaScript enhancements for the Button component
    *
    * @preserve
+   * @augments ConfigurableComponent<ButtonConfig>
    */
-  class Button extends GOVUKFrontendComponent {
+  class Button extends ConfigurableComponent {
     /**
      * @param {Element | null} $root - HTML element to use for button
      * @param {ButtonConfig} [config] - Button config
      */
     constructor($root, config = {}) {
-      super($root);
-      this.config = void 0;
+      super($root, config);
       this.debounceFormSubmitTimer = null;
-      this.config = mergeConfigs(Button.defaults, config, normaliseDataset(Button, this.$root.dataset));
       this.$root.addEventListener('keydown', event => this.handleKeyDown(event));
       this.$root.addEventListener('click', event => this.debounce(event));
     }
@@ -898,7 +936,7 @@
    */
 
   /**
-   * @typedef {import('../../common/index.mjs').Schema} Schema
+   * @import { Schema } from '../../common/configuration.mjs'
    */
   Button.moduleName = 'govuk-button';
   Button.defaults = Object.freeze({
@@ -928,22 +966,33 @@
    * of the available characters/words has been entered.
    *
    * @preserve
+   * @augments ConfigurableComponent<CharacterCountConfig>
    */
-  class CharacterCount extends GOVUKFrontendComponent {
+  class CharacterCount extends ConfigurableComponent {
+    [configOverride](datasetConfig) {
+      let configOverrides = {};
+      if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
+        configOverrides = {
+          maxlength: undefined,
+          maxwords: undefined
+        };
+      }
+      return configOverrides;
+    }
+
     /**
      * @param {Element | null} $root - HTML element to use for character count
      * @param {CharacterCountConfig} [config] - Character count config
      */
     constructor($root, config = {}) {
       var _ref, _this$config$maxwords;
-      super($root);
+      super($root, config);
       this.$textarea = void 0;
       this.$visibleCountMessage = void 0;
       this.$screenReaderCountMessage = void 0;
       this.lastInputTimestamp = null;
       this.lastInputValue = '';
       this.valueChecker = null;
-      this.config = void 0;
       this.i18n = void 0;
       this.maxLength = void 0;
       const $textarea = this.$root.querySelector('.govuk-js-character-count');
@@ -955,15 +1004,6 @@
           identifier: 'Form field (`.govuk-js-character-count`)'
         });
       }
-      const datasetConfig = normaliseDataset(CharacterCount, this.$root.dataset);
-      let configOverrides = {};
-      if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
-        configOverrides = {
-          maxlength: undefined,
-          maxwords: undefined
-        };
-      }
-      this.config = mergeConfigs(CharacterCount.defaults, config, configOverrides, datasetConfig);
       const errors = validateConfig(CharacterCount.schema, this.config);
       if (errors[0]) {
         throw new ConfigError(formatErrorMessage(CharacterCount, errors[0]));
@@ -1149,8 +1189,8 @@
    */
 
   /**
-   * @typedef {import('../../common/index.mjs').Schema} Schema
-   * @typedef {import('../../i18n.mjs').TranslationPluralForms} TranslationPluralForms
+   * @import { Schema } from '../../common/configuration.mjs'
+   * @import { TranslationPluralForms } from '../../i18n.mjs'
    */
   CharacterCount.moduleName = 'govuk-character-count';
   CharacterCount.defaults = Object.freeze({
@@ -1208,7 +1248,7 @@
    *
    * @preserve
    */
-  class Checkboxes extends GOVUKFrontendComponent {
+  class Checkboxes extends Component {
     /**
      * Checkboxes can be associated with a 'conditionally revealed' content block
      * – for example, a checkbox for 'Phone' could reveal an additional form field
@@ -1316,16 +1356,15 @@
    * configuration.
    *
    * @preserve
+   * @augments ConfigurableComponent<ErrorSummaryConfig>
    */
-  class ErrorSummary extends GOVUKFrontendComponent {
+  class ErrorSummary extends ConfigurableComponent {
     /**
      * @param {Element | null} $root - HTML element to use for error summary
      * @param {ErrorSummaryConfig} [config] - Error summary config
      */
     constructor($root, config = {}) {
-      super($root);
-      this.config = void 0;
-      this.config = mergeConfigs(ErrorSummary.defaults, config, normaliseDataset(ErrorSummary, this.$root.dataset));
+      super($root, config);
       if (!this.config.disableAutoFocus) {
         setFocus(this.$root);
       }
@@ -1392,7 +1431,7 @@
    */
 
   /**
-   * @typedef {import('../../common/index.mjs').Schema} Schema
+   * @import { Schema } from '../../common/configuration.mjs'
    */
   ErrorSummary.moduleName = 'govuk-error-summary';
   ErrorSummary.defaults = Object.freeze({
@@ -1410,15 +1449,15 @@
    * Exit this page component
    *
    * @preserve
+   * @augments ConfigurableComponent<ExitThisPageConfig>
    */
-  class ExitThisPage extends GOVUKFrontendComponent {
+  class ExitThisPage extends ConfigurableComponent {
     /**
      * @param {Element | null} $root - HTML element that wraps the Exit This Page button
      * @param {ExitThisPageConfig} [config] - Exit This Page config
      */
     constructor($root, config = {}) {
-      super($root);
-      this.config = void 0;
+      super($root, config);
       this.i18n = void 0;
       this.$button = void 0;
       this.$skiplinkButton = null;
@@ -1439,7 +1478,6 @@
           identifier: 'Button (`.govuk-exit-this-page__button`)'
         });
       }
-      this.config = mergeConfigs(ExitThisPage.defaults, config, normaliseDataset(ExitThisPage, this.$root.dataset));
       this.i18n = new I18n(this.config.i18n);
       this.$button = $button;
       const $skiplinkButton = document.querySelector('.govuk-js-exit-this-page-skiplink');
@@ -1605,7 +1643,7 @@
    */
 
   /**
-   * @typedef {import('../../common/index.mjs').Schema} Schema
+   * @import { Schema } from '../../common/configuration.mjs'
    */
   ExitThisPage.moduleName = 'govuk-exit-this-page';
   ExitThisPage.defaults = Object.freeze({
@@ -1624,12 +1662,271 @@
     }
   });
 
+  /**
+   * File upload component
+   *
+   * @preserve
+   * @augments ConfigurableComponent<FileUploadConfig>
+   */
+  class FileUpload extends ConfigurableComponent {
+    /**
+     * @param {Element | null} $root - File input element
+     * @param {FileUploadConfig} [config] - File Upload config
+     */
+    constructor($root, config = {}) {
+      super($root, config);
+      this.$input = void 0;
+      this.$button = void 0;
+      this.$status = void 0;
+      this.i18n = void 0;
+      this.id = void 0;
+      const $input = this.$root.querySelector('input');
+      if ($input === null) {
+        throw new ElementError({
+          component: FileUpload,
+          identifier: 'File inputs (`<input type="file">`)'
+        });
+      }
+      if ($input.type !== 'file') {
+        throw new ElementError(formatErrorMessage(FileUpload, 'File input (`<input type="file">`) attribute (`type`) is not `file`'));
+      }
+      this.$input = $input;
+      this.$input.setAttribute('hidden', 'true');
+      if (!this.$input.id) {
+        throw new ElementError({
+          component: FileUpload,
+          identifier: 'File input (`<input type="file">`) attribute (`id`)'
+        });
+      }
+      this.id = this.$input.id;
+      this.i18n = new I18n(this.config.i18n, {
+        locale: closestAttributeValue(this.$root, 'lang')
+      });
+      const $label = this.findLabel();
+      if (!$label.id) {
+        $label.id = `${this.id}-label`;
+      }
+      this.$input.id = `${this.id}-input`;
+      const $button = document.createElement('button');
+      $button.classList.add('govuk-file-upload-button');
+      $button.type = 'button';
+      $button.id = this.id;
+      $button.classList.add('govuk-file-upload-button--empty');
+      const ariaDescribedBy = this.$input.getAttribute('aria-describedby');
+      if (ariaDescribedBy) {
+        $button.setAttribute('aria-describedby', ariaDescribedBy);
+      }
+      const $status = document.createElement('span');
+      $status.className = 'govuk-body govuk-file-upload-button__status';
+      $status.setAttribute('aria-live', 'polite');
+      $status.innerText = this.i18n.t('noFileChosen');
+      $button.appendChild($status);
+      const commaSpan = document.createElement('span');
+      commaSpan.className = 'govuk-visually-hidden';
+      commaSpan.innerText = ', ';
+      commaSpan.id = `${this.id}-comma`;
+      $button.appendChild(commaSpan);
+      const containerSpan = document.createElement('span');
+      containerSpan.className = 'govuk-file-upload-button__pseudo-button-container';
+      const buttonSpan = document.createElement('span');
+      buttonSpan.className = 'govuk-button govuk-button--secondary govuk-file-upload-button__pseudo-button';
+      buttonSpan.innerText = this.i18n.t('chooseFilesButton');
+      containerSpan.appendChild(buttonSpan);
+      containerSpan.insertAdjacentText('beforeend', ' ');
+      const instructionSpan = document.createElement('span');
+      instructionSpan.className = 'govuk-body govuk-file-upload-button__instruction';
+      instructionSpan.innerText = this.i18n.t('dropInstruction');
+      containerSpan.appendChild(instructionSpan);
+      $button.appendChild(containerSpan);
+      $button.setAttribute('aria-labelledby', `${$label.id} ${commaSpan.id} ${$button.id}`);
+      $button.addEventListener('click', this.onClick.bind(this));
+      $button.addEventListener('dragover', event => {
+        event.preventDefault();
+      });
+      this.$root.insertAdjacentElement('afterbegin', $button);
+      this.$input.setAttribute('tabindex', '-1');
+      this.$input.setAttribute('aria-hidden', 'true');
+      this.$button = $button;
+      this.$status = $status;
+      this.$input.addEventListener('change', this.onChange.bind(this));
+      this.updateDisabledState();
+      this.observeDisabledState();
+      this.$announcements = document.createElement('span');
+      this.$announcements.classList.add('govuk-file-upload-announcements');
+      this.$announcements.classList.add('govuk-visually-hidden');
+      this.$announcements.setAttribute('aria-live', 'assertive');
+      this.$root.insertAdjacentElement('afterend', this.$announcements);
+      this.$button.addEventListener('drop', this.onDrop.bind(this));
+      document.addEventListener('dragenter', this.updateDropzoneVisibility.bind(this));
+      document.addEventListener('dragenter', () => {
+        this.enteredAnotherElement = true;
+      });
+      document.addEventListener('dragleave', () => {
+        if (!this.enteredAnotherElement && !this.$button.disabled) {
+          this.hideDraggingState();
+          this.$announcements.innerText = this.i18n.t('leftDropZone');
+        }
+        this.enteredAnotherElement = false;
+      });
+    }
+
+    /**
+     * Updates the visibility of the dropzone as users enters the various elements on the page
+     *
+     * @param {DragEvent} event - The `dragenter` event
+     */
+    updateDropzoneVisibility(event) {
+      if (this.$button.disabled) return;
+      if (event.target instanceof Node) {
+        if (this.$root.contains(event.target)) {
+          if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
+            if (!this.$button.classList.contains('govuk-file-upload-button--dragging')) {
+              this.showDraggingState();
+              this.$announcements.innerText = this.i18n.t('enteredDropZone');
+            }
+          }
+        } else {
+          if (this.$button.classList.contains('govuk-file-upload-button--dragging')) {
+            this.hideDraggingState();
+            this.$announcements.innerText = this.i18n.t('leftDropZone');
+          }
+        }
+      }
+    }
+    showDraggingState() {
+      this.$button.classList.add('govuk-file-upload-button--dragging');
+    }
+    hideDraggingState() {
+      this.$button.classList.remove('govuk-file-upload-button--dragging');
+    }
+
+    /**
+     * Handles user dropping on the component
+     *
+     * @param {DragEvent} event - The `dragenter` event
+     */
+    onDrop(event) {
+      event.preventDefault();
+      if (event.dataTransfer && isContainingFiles(event.dataTransfer)) {
+        this.$input.files = event.dataTransfer.files;
+        this.$input.dispatchEvent(new CustomEvent('change'));
+        this.hideDraggingState();
+      }
+    }
+    onChange() {
+      const fileCount = this.$input.files.length;
+      if (fileCount === 0) {
+        this.$status.innerText = this.i18n.t('noFileChosen');
+        this.$button.classList.add('govuk-file-upload-button--empty');
+      } else {
+        if (fileCount === 1) {
+          this.$status.innerText = this.$input.files[0].name;
+        } else {
+          this.$status.innerText = this.i18n.t('multipleFilesChosen', {
+            count: fileCount
+          });
+        }
+        this.$button.classList.remove('govuk-file-upload-button--empty');
+      }
+    }
+    findLabel() {
+      const $label = document.querySelector(`label[for="${this.$input.id}"]`);
+      if (!$label) {
+        throw new ElementError({
+          component: FileUpload,
+          identifier: `Field label (\`<label for=${this.$input.id}>\`)`
+        });
+      }
+      return $label;
+    }
+    onClick() {
+      this.$input.click();
+    }
+    observeDisabledState() {
+      const observer = new MutationObserver(mutationList => {
+        for (const mutation of mutationList) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'disabled') {
+            this.updateDisabledState();
+          }
+        }
+      });
+      observer.observe(this.$input, {
+        attributes: true
+      });
+    }
+    updateDisabledState() {
+      this.$button.disabled = this.$input.disabled;
+      this.$root.classList.toggle('govuk-drop-zone--disabled', this.$button.disabled);
+    }
+  }
+  FileUpload.moduleName = 'govuk-file-upload';
+  FileUpload.defaults = Object.freeze({
+    i18n: {
+      chooseFilesButton: 'Choose file',
+      dropInstruction: 'or drop file',
+      noFileChosen: 'No file chosen',
+      multipleFilesChosen: {
+        one: '%{count} file chosen',
+        other: '%{count} files chosen'
+      },
+      enteredDropZone: 'Entered drop zone',
+      leftDropZone: 'Left drop zone'
+    }
+  });
+  FileUpload.schema = Object.freeze({
+    properties: {
+      i18n: {
+        type: 'object'
+      }
+    }
+  });
+  function isContainingFiles(dataTransfer) {
+    const hasNoTypesInfo = dataTransfer.types.length === 0;
+    const isDraggingFiles = dataTransfer.types.some(type => type === 'Files');
+    return hasNoTypesInfo || isDraggingFiles;
+  }
+
+  /**
+   * @typedef {HTMLInputElement & {files: FileList}} HTMLFileInputElement
+   */
+
+  /**
+   * File upload config
+   *
+   * @see {@link FileUpload.defaults}
+   * @typedef {object} FileUploadConfig
+   * @property {FileUploadTranslations} [i18n=FileUpload.defaults.i18n] - File upload translations
+   */
+
+  /**
+   * File upload translations
+   *
+   * @see {@link FileUpload.defaults.i18n}
+   * @typedef {object} FileUploadTranslations
+   *
+   * Messages used by the component
+   * @property {string} [chooseFile] - The text of the button that opens the file picker
+   * @property {string} [dropInstruction] - The text informing users they can drop files
+   * @property {TranslationPluralForms} [multipleFilesChosen] - The text displayed when multiple files
+   *   have been chosen by the user
+   * @property {string} [noFileChosen] - The text to displayed when no file has been chosen by the user
+   * @property {string} [enteredDropZone] - The text announced by assistive technology
+   *   when user drags files and enters the drop zone
+   * @property {string} [leftDropZone] - The text announced by assistive technology
+   *   when user drags files and leaves the drop zone without dropping
+   */
+
+  /**
+   * @import { Schema } from '../../common/configuration.mjs'
+   * @import { TranslationPluralForms } from '../../i18n.mjs'
+   */
+
   /**
    * Header component
    *
    * @preserve
    */
-  class Header extends GOVUKFrontendComponent {
+  class Header extends Component {
     /**
      * Apply a matchMedia for desktop which will trigger a state sync if the
      * browser viewport moves between states.
@@ -1710,16 +2007,15 @@
    * Notification Banner component
    *
    * @preserve
+   * @augments ConfigurableComponent<NotificationBannerConfig>
    */
-  class NotificationBanner extends GOVUKFrontendComponent {
+  class NotificationBanner extends ConfigurableComponent {
     /**
      * @param {Element | null} $root - HTML element to use for notification banner
      * @param {NotificationBannerConfig} [config] - Notification banner config
      */
     constructor($root, config = {}) {
-      super($root);
-      this.config = void 0;
-      this.config = mergeConfigs(NotificationBanner.defaults, config, normaliseDataset(NotificationBanner, this.$root.dataset));
+      super($root, config);
       if (this.$root.getAttribute('role') === 'alert' && !this.config.disableAutoFocus) {
         setFocus(this.$root);
       }
@@ -1737,7 +2033,7 @@
    */
 
   /**
-   * @typedef {import('../../common/index.mjs').Schema} Schema
+   * @import { Schema } from '../../common/configuration.mjs'
    */
   NotificationBanner.moduleName = 'govuk-notification-banner';
   NotificationBanner.defaults = Object.freeze({
@@ -1755,15 +2051,15 @@
    * Password input component
    *
    * @preserve
+   * @augments ConfigurableComponent<PasswordInputConfig>
    */
-  class PasswordInput extends GOVUKFrontendComponent {
+  class PasswordInput extends ConfigurableComponent {
     /**
      * @param {Element | null} $root - HTML element to use for password input
      * @param {PasswordInputConfig} [config] - Password input config
      */
     constructor($root, config = {}) {
-      super($root);
-      this.config = void 0;
+      super($root, config);
       this.i18n = void 0;
       this.$input = void 0;
       this.$showHideButton = void 0;
@@ -1794,7 +2090,6 @@
       }
       this.$input = $input;
       this.$showHideButton = $showHideButton;
-      this.config = mergeConfigs(PasswordInput.defaults, config, normaliseDataset(PasswordInput, this.$root.dataset));
       this.i18n = new I18n(this.config.i18n, {
         locale: closestAttributeValue(this.$root, 'lang')
       });
@@ -1874,8 +2169,7 @@
    */
 
   /**
-   * @typedef {import('../../common/index.mjs').Schema} Schema
-   * @typedef {import('../../i18n.mjs').TranslationPluralForms} TranslationPluralForms
+   * @import { Schema } from '../../common/configuration.mjs'
    */
   PasswordInput.moduleName = 'govuk-password-input';
   PasswordInput.defaults = Object.freeze({
@@ -1901,7 +2195,7 @@
    *
    * @preserve
    */
-  class Radios extends GOVUKFrontendComponent {
+  class Radios extends Component {
     /**
      * Radios can be associated with a 'conditionally revealed' content block –
      * for example, a radio for 'Phone' could reveal an additional form field for
@@ -1984,7 +2278,7 @@
    *
    * @preserve
    */
-  class ServiceNavigation extends GOVUKFrontendComponent {
+  class ServiceNavigation extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for header
      */
@@ -2062,9 +2356,9 @@
    * Skip link component
    *
    * @preserve
-   * @augments GOVUKFrontendComponent<HTMLAnchorElement>
+   * @augments Component<HTMLAnchorElement>
    */
-  class SkipLink extends GOVUKFrontendComponent {
+  class SkipLink extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for skip link
      * @throws {ElementError} when $root is not set or the wrong type
@@ -2115,7 +2409,7 @@
    *
    * @preserve
    */
-  class Tabs extends GOVUKFrontendComponent {
+  class Tabs extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for tabs
      */
@@ -2408,7 +2702,7 @@
       }
       return;
     }
-    const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+    const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
     const options = {
       scope: (_config$scope = config.scope) != null ? _config$scope : document,
       onError: config.onError
@@ -2427,11 +2721,11 @@
    *
    * Any component errors will be caught and logged to the console.
    *
-   * @template {CompatibleClass} T
-   * @param {T} Component - class of the component to create
-   * @param {T["defaults"]} [config] - Config supplied to component
-   * @param {OnErrorCallback<T> | Element | Document | CreateAllOptions<T> } [createAllOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
-   * @returns {Array<InstanceType<T>>} - array of instantiated components
+   * @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;
@@ -2478,7 +2772,7 @@
     }).filter(Boolean);
   }
   /**
-   * @typedef {{new (...args: any[]): any, defaults?: object, moduleName: string}} CompatibleClass
+   * @typedef {{new (...args: any[]): any, moduleName: string}} CompatibleClass
    */
   /**
    * Config for all components via `initAll()`
@@ -2489,22 +2783,21 @@
    * @property {CharacterCountConfig} [characterCount] - Character Count config
    * @property {ErrorSummaryConfig} [errorSummary] - Error Summary config
    * @property {ExitThisPageConfig} [exitThisPage] - Exit This Page config
+   * @property {FileUploadConfig} [fileUpload] - File Upload config
    * @property {NotificationBannerConfig} [notificationBanner] - Notification Banner config
    * @property {PasswordInputConfig} [passwordInput] - Password input config
    */
   /**
    * Config for individual components
    *
-   * @typedef {import('./components/accordion/accordion.mjs').AccordionConfig} AccordionConfig
-   * @typedef {import('./components/accordion/accordion.mjs').AccordionTranslations} AccordionTranslations
-   * @typedef {import('./components/button/button.mjs').ButtonConfig} ButtonConfig
-   * @typedef {import('./components/character-count/character-count.mjs').CharacterCountConfig} CharacterCountConfig
-   * @typedef {import('./components/character-count/character-count.mjs').CharacterCountTranslations} CharacterCountTranslations
-   * @typedef {import('./components/error-summary/error-summary.mjs').ErrorSummaryConfig} ErrorSummaryConfig
-   * @typedef {import('./components/exit-this-page/exit-this-page.mjs').ExitThisPageConfig} ExitThisPageConfig
-   * @typedef {import('./components/exit-this-page/exit-this-page.mjs').ExitThisPageTranslations} ExitThisPageTranslations
-   * @typedef {import('./components/notification-banner/notification-banner.mjs').NotificationBannerConfig} NotificationBannerConfig
-   * @typedef {import('./components/password-input/password-input.mjs').PasswordInputConfig} PasswordInputConfig
+   * @import { AccordionConfig } from './components/accordion/accordion.mjs'
+   * @import { ButtonConfig } from './components/button/button.mjs'
+   * @import { CharacterCountConfig } from './components/character-count/character-count.mjs'
+   * @import { ErrorSummaryConfig } from './components/error-summary/error-summary.mjs'
+   * @import { ExitThisPageConfig } from './components/exit-this-page/exit-this-page.mjs'
+   * @import { NotificationBannerConfig } from './components/notification-banner/notification-banner.mjs'
+   * @import { PasswordInputConfig } from './components/password-input/password-input.mjs'
+   * @import { FileUploadConfig } from './components/file-upload/file-upload.mjs'
    */
   /**
    * Component config keys, e.g. `accordion` and `characterCount`
@@ -2512,32 +2805,38 @@
    * @typedef {keyof Config} ConfigKey
    */
   /**
-   * @template {CompatibleClass} T
+   * @template {CompatibleClass} ComponentClass
+   * @typedef {ConstructorParameters<ComponentClass>[1]} ComponentConfig
+   */
+  /**
+   * @template {CompatibleClass} ComponentClass
    * @typedef {object} ErrorContext
    * @property {Element} [element] - Element used for component module initialisation
-   * @property {T} [component] - Class of component
-   * @property {T["defaults"]} config - Config supplied to component
+   * @property {ComponentClass} [component] - Class of component
+   * @property {ComponentConfig<ComponentClass>} config - Config supplied to component
    */
   /**
-   * @template {CompatibleClass} T
+   * @template {CompatibleClass} ComponentClass
    * @callback OnErrorCallback
    * @param {unknown} error - Thrown error
-   * @param {ErrorContext<T>} context - Object containing the element, component class and configuration
+   * @param {ErrorContext<ComponentClass>} context - Object containing the element, component class and configuration
    */
   /**
-   * @template {CompatibleClass} T
+   * @template {CompatibleClass} ComponentClass
    * @typedef {object} CreateAllOptions
    * @property {Element | Document} [scope] - scope of the document to search within
-   * @property {OnErrorCallback<T>} [onError] - callback function if error throw by component on init
+   * @property {OnErrorCallback<ComponentClass>} [onError] - callback function if error throw by component on init
    */
 
   exports.Accordion = Accordion;
   exports.Button = Button;
   exports.CharacterCount = CharacterCount;
   exports.Checkboxes = Checkboxes;
-  exports.Component = GOVUKFrontendComponent;
+  exports.Component = Component;
+  exports.ConfigurableComponent = ConfigurableComponent;
   exports.ErrorSummary = ErrorSummary;
   exports.ExitThisPage = ExitThisPage;
+  exports.FileUpload = FileUpload;
   exports.Header = Header;
   exports.NotificationBanner = NotificationBanner;
   exports.PasswordInput = PasswordInput;