@types/govuk-frontend 5.6.0 → 5.8.0

govuk-frontend/README.md

@@ -8,7 +8,7 @@ This package contains type definitions for govuk-frontend (https://github.com/al
 Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/govuk-frontend.
 
 ### Additional Details
- * Last updated: Thu, 10 Oct 2024 14:07:44 GMT
+ * Last updated: Mon, 03 Feb 2025 16:02:40 GMT
  * Dependencies: none
 
 # Credits

govuk-frontend/dist/govuk/all.bundle.d.mts

@@ -1,4 +1,6 @@
+export { ConfigurableComponent } from "./common/configuration.mjs";
 export { version } from "./common/govuk-frontend-version.mjs";
+export { isSupported } from "./common/index.mjs";
 export { Accordion } from "./components/accordion/accordion.mjs";
 export { Button } from "./components/button/button.mjs";
 export { CharacterCount } from "./components/character-count/character-count.mjs";
@@ -12,4 +14,5 @@ export { Radios } from "./components/radios/radios.mjs";
 export { ServiceNavigation } from "./components/service-navigation/service-navigation.mjs";
 export { SkipLink } from "./components/skip-link/skip-link.mjs";
 export { Tabs } from "./components/tabs/tabs.mjs";
+export { GOVUKFrontendComponent as Component } from "./govuk-frontend-component.mjs";
 export { type Config, type ConfigKey, createAll, initAll } from "./init.mjs";

govuk-frontend/dist/govuk/all.bundle.d.ts

@@ -1,4 +1,6 @@
+import { ConfigurableComponent } from "./common/configuration.js";
 import { version } from "./common/govuk-frontend-version.js";
+import { isSupported } from "./common/index.js";
 import { Accordion } from "./components/accordion/accordion.js";
 import { Button } from "./components/button/button.js";
 import { CharacterCount } from "./components/character-count/character-count.js";
@@ -12,6 +14,7 @@ import { Radios } from "./components/radios/radios.js";
 import { ServiceNavigation } from "./components/service-navigation/service-navigation.js";
 import { SkipLink } from "./components/skip-link/skip-link.js";
 import { Tabs } from "./components/tabs/tabs.js";
+import { GOVUKFrontendComponent as Component } from "./govuk-frontend-component.js";
 import { type Config as ConfigImport, type ConfigKey as ConfigKeyImport, createAll, initAll } from "./init.js";
 
 declare namespace GOVUKFrontend {
@@ -21,6 +24,7 @@ declare namespace GOVUKFrontend {
 
 declare const GOVUKFrontend: {
     version: typeof version;
+    isSupported: typeof isSupported;
     Accordion: typeof Accordion;
     Button: typeof Button;
     CharacterCount: typeof CharacterCount;
@@ -34,6 +38,8 @@ declare const GOVUKFrontend: {
     ServiceNavigation: typeof ServiceNavigation;
     SkipLink: typeof SkipLink;
     Tabs: typeof Tabs;
+    Component: typeof Component;
+    ConfigurableComponent: typeof ConfigurableComponent;
     createAll: typeof createAll;
     initAll: typeof initAll;
 };

govuk-frontend/dist/govuk/common/configuration.d.mts

@@ -0,0 +1 @@
+export * from "./configuration.js";

govuk-frontend/dist/govuk/common/configuration.d.ts

@@ -0,0 +1,208 @@
+import { GOVUKFrontendComponent } from "../govuk-frontend-component.js";
+
+/**
+ * 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
+ */
+export function normaliseString(
+    value: DOMStringMap[string],
+    property?: SchemaProperty,
+): string | boolean | number | undefined;
+
+/**
+ * Normalise dataset
+ *
+ * Loop over an object and normalise each value using {@link normaliseString},
+ * optionally expanding nested `i18n.field`
+ *
+ * @internal
+ * @param {{ schema?: Schema<ObjectNested>, moduleName: string }} Component - Component class
+ * @param {DOMStringMap} dataset - HTML element dataset
+ * @returns {ObjectNested} Normalised dataset
+ */
+export function normaliseDataset(
+    Component: {
+        schema?: Schema<ObjectNested>;
+        moduleName: string;
+    },
+    dataset: DOMStringMap,
+): ObjectNested;
+
+/**
+ * Config merging function
+ *
+ * Takes any number of objects and combines them together, with
+ * greatest priority on the LAST item passed in.
+ *
+ * @internal
+ * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
+ * @returns {{ [key: string]: unknown }} A merged config object
+ */
+export function mergeConfigs(
+    ...configObjects: Array<{
+        [key: string]: unknown;
+    }>
+): {
+    [key: string]: unknown;
+};
+
+/**
+ * Validate component config by schema
+ *
+ * Follows limited examples in JSON schema for wider support in future
+ *
+ * {@link https://ajv.js.org/json-schema.html#compound-keywords}
+ * {@link https://ajv.js.org/packages/ajv-errors.html#single-message}
+ *
+ * @internal
+ * @template {Partial<Record<keyof ConfigurationType, unknown>>} ConfigurationType
+ * @param {Schema<ConfigurationType>} schema - The schema of a component
+ * @param {ConfigurationType} config - Component config
+ * @returns {string[]} List of validation errors
+ */
+export function validateConfig<
+    ConfigurationType extends Partial<
+        Record<keyof ConfigurationType, unknown>
+    >,
+>(
+    schema: Schema<ConfigurationType>,
+    config: ConfigurationType,
+): string[];
+
+/**
+ * Extracts keys starting with a particular namespace from dataset ('data-*')
+ * object, removing the namespace in the process, normalising all values
+ *
+ * @internal
+ * @template {Partial<Record<keyof ConfigurationType, unknown>>} ConfigurationType
+ * @param {Schema<ConfigurationType>} schema - The schema of a component
+ * @param {DOMStringMap} dataset - The object to extract key-value pairs from
+ * @param {keyof ConfigurationType} namespace - The namespace to filter keys with
+ * @returns {ObjectNested | undefined} Nested object with dot-separated key namespace removed
+ */
+export function extractConfigByNamespace<
+    ConfigurationType extends Partial<
+        Record<keyof ConfigurationType, unknown>
+    >,
+>(
+    schema: Schema<ConfigurationType>,
+    dataset: DOMStringMap,
+    namespace: keyof ConfigurationType,
+): ObjectNested | undefined;
+
+export const configOverride: unique symbol;
+
+/**
+ * Base Component class
+ *
+ * Centralises the behaviours shared by our components
+ *
+ * @template {Partial<Record<keyof ConfigurationType, unknown>>} [ConfigurationType=ObjectNested]
+ * @template {Element & { dataset: DOMStringMap }} [RootElementType=HTMLElement]
+ */
+export abstract class ConfigurableComponent<
+    ConfigurationType extends Partial<
+        Record<keyof ConfigurationType, unknown>
+    > = ObjectNested,
+    RootElementType extends Element & {
+        dataset: DOMStringMap;
+    } = HTMLElement,
+> extends GOVUKFrontendComponent<RootElementType> {
+    /**
+     * Constructs a new component, validating that GOV.UK Frontend is supported
+     *
+     * @internal
+     * @param {Element | null} [$root] - HTML element to use for component
+     * @param {ConfigurationType} [config] - HTML element to use for component
+     */
+    constructor($root?: Element | null, config?: ConfigurationType);
+
+    /**
+     * Returns the root element of the component
+     *
+     * @returns {ConfigurationType} - the root element of component
+     */
+    protected get config(): ConfigurationType;
+
+    /** */
+    _config: ConfigurationType;
+
+    /**
+     * configOverride
+     *
+     * Function which defines configuration overrides to prioritize
+     * properties from the root element's dataset.
+     *
+     * It should take a subset of configuration as input and return
+     * a new configuration object with properties that should be
+     * overridden based on the root element's dataset. A Symbol
+     * is used for indexing to prevent conflicts.
+     *
+     * @internal
+     * @param {Partial<ConfigurationType>} [param] - Configuration object
+     * @returns {Partial<ConfigurationType>} return - Configuration object
+     */
+    [configOverride](param?: Partial<ConfigurationType>): Partial<ConfigurationType>;
+}
+
+export type NestedKey = keyof ObjectNested;
+
+export interface ObjectNested {
+    [key: string]: string | boolean | number | ObjectNested | undefined;
+}
+
+/**
+ * Schema for component config
+ */
+export interface Schema<
+    ConfigurationType extends Partial<
+        Record<keyof ConfigurationType, unknown>
+    >,
+> {
+    /**
+     * - Schema properties
+     */
+    properties: Record<keyof ConfigurationType, SchemaProperty | undefined>;
+
+    /**
+     * - List of schema conditions
+     */
+    anyOf?: SchemaCondition[] | undefined;
+}
+
+/**
+ * Schema property for component config
+ */
+export interface SchemaProperty {
+    /**
+     * - Property type
+     */
+    type: "string" | "boolean" | "number" | "object";
+}
+
+/**
+ * Schema condition for component config
+ */
+export interface SchemaCondition {
+    /**
+     * - List of required config fields
+     */
+    required: string[];
+
+    /**
+     * - Error message when required config fields not provided
+     */
+    errorMessage: string;
+}

govuk-frontend/dist/govuk/common/index.d.ts

@@ -1,3 +1,5 @@
+import { type ObjectNested } from "./configuration.js";
+
 /**
  * Common helpers which do not require polyfill.
  *
@@ -5,41 +7,6 @@
  * so that the polyfill can be properly tree-shaken and does not burden
  * the components that do not need that helper
  */
-/**
- * Config merging function
- *
- * Takes any number of objects and combines them together, with
- * greatest priority on the LAST item passed in.
- *
- * @internal
- * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
- * @returns {{ [key: string]: unknown }} A merged config object
- */
-export function mergeConfigs(
-    ...configObjects: Array<{
-        [key: string]: unknown;
-    }>
-): {
-    [key: string]: unknown;
-};
-
-/**
- * Extracts keys starting with a particular namespace from dataset ('data-*')
- * object, removing the namespace in the process, normalising all values
- *
- * @internal
- * @param {{ schema: Schema }} Component - Component class
- * @param {DOMStringMap} dataset - The object to extract key-value pairs from
- * @param {string} namespace - The namespace to filter keys with
- * @returns {ObjectNested | undefined} Nested object with dot-separated key namespace removed
- */
-export function extractConfigByNamespace(
-    Component: {
-        schema: Schema;
-    },
-    dataset: DOMStringMap,
-    namespace: string,
-): ObjectNested | undefined;
 
 /**
  * Get hash fragment from URL
@@ -83,77 +50,54 @@ export function setFocus<FocusElement extends HTMLElement>(
     },
 ): void;
 
+/**
+ * Checks if component is already initialised
+ *
+ * @internal
+ * @param {Element} $root - HTML element to be checked
+ * @param {string} moduleName - name of component module
+ * @returns {boolean} Whether component is already initialised
+ */
+export function isInitialised($root: Element, moduleName: string): boolean;
+
 /**
  * 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.
  *
- * @internal
- * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+ * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
  * @returns {boolean} Whether GOV.UK Frontend is supported on this page
  */
 export function isSupported($scope?: HTMLElement | null): boolean;
 
 /**
- * Validate component config by schema
- *
- * Follows limited examples in JSON schema for wider support in future
- *
- * {@link https://ajv.js.org/json-schema.html#compound-keywords}
- * {@link https://ajv.js.org/packages/ajv-errors.html#single-message}
+ * Check for an object
  *
  * @internal
- * @param {Schema} schema - Config schema
- * @param {{ [key: string]: unknown }} config - Component config
- * @returns {string[]} List of validation errors
+ * @template {Partial<Record<keyof ObjectType, unknown>>} [ObjectType=ObjectNested]
+ * @param {unknown | ObjectType} option - Option to check
+ * @returns {option is ObjectType} Whether the option is an object
  */
-export function validateConfig(schema: Schema, config: {
-    [key: string]: unknown;
-}): string[];
+export function isObject<
+    ObjectType extends Partial<Record<keyof ObjectType, unknown>> = ObjectNested,
+>(
+    option: unknown,
+): option is ObjectType;
 
 /**
- * Schema for component config
- */
-export interface Schema {
-    /**
-     * - Schema properties
-     */
-    properties: {
-        [field: string]: SchemaProperty | undefined;
-    };
-
-    /**
-     * - List of schema conditions
-     */
-    anyOf?: SchemaCondition[] | undefined;
-}
-
-/**
- * Schema property for component config
- */
-export interface SchemaProperty {
-    /**
-     * - Property type
-     */
-    type: "string" | "boolean" | "number" | "object";
-}
-
-/**
- * Schema condition for component config
+ * Format error message
+ *
+ * @internal
+ * @param {ComponentWithModuleName} Component - Component that threw the error
+ * @param {string} message - Error message
+ * @returns {string} - Formatted error message
  */
-export interface SchemaCondition {
-    /**
-     * - List of required config fields
-     */
-    required: string[];
+export function formatErrorMessage(Component: ComponentWithModuleName, message: string): string;
 
+export interface ComponentWithModuleName {
     /**
-     * - Error message when required config fields not provided
+     * - Name of the component
      */
-    errorMessage: string;
-}
-export type NestedKey = keyof ObjectNested;
-export interface ObjectNested {
-    [key: string]: string | boolean | number | ObjectNested | undefined;
+    moduleName: string;
 }

govuk-frontend/dist/govuk/components/accordion/accordion.d.ts

@@ -1,4 +1,4 @@
-import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
+import { ConfigurableComponent } from "../../common/configuration.js";
 
 /**
  * Accordion component
@@ -12,7 +12,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
  * The state of each section is saved to the DOM via the `aria-expanded`
  * attribute, which also provides accessibility.
  */
-export class Accordion extends GOVUKFrontendComponent {
+export class Accordion extends ConfigurableComponent<AccordionConfig, HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -42,10 +42,10 @@ export class Accordion extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for accordion
+     * @param {Element | null} $root - HTML element to use for accordion
      * @param {AccordionConfig} [config] - Accordion config
      */
-    constructor($module: Element | null, config?: AccordionConfig);
+    constructor($root: Element | null, config?: AccordionConfig);
 
     /**
      * Get the identifier for a section

govuk-frontend/dist/govuk/components/button/button.d.ts

@@ -1,9 +1,9 @@
-import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
+import { ConfigurableComponent } from "../../common/configuration.js";
 
 /**
  * JavaScript enhancements for the Button component
  */
-export class Button extends GOVUKFrontendComponent {
+export class Button extends ConfigurableComponent<ButtonConfig, HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -30,10 +30,10 @@ export class Button extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for button
+     * @param {Element | null} $root - HTML element to use for button
      * @param {ButtonConfig} [config] - Button config
      */
-    constructor($module: Element | null, config?: ButtonConfig);
+    constructor($root: Element | null, config?: ButtonConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/character-count/character-count.d.ts

@@ -1,4 +1,4 @@
-import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
+import { configOverride, ConfigurableComponent } from "../../common/configuration.js";
 import { type TranslationPluralForms } from "../../i18n.js";
 
 /**
@@ -11,7 +11,7 @@ import { type TranslationPluralForms } from "../../i18n.js";
  * You can configure the message to only appear after a certain percentage
  * of the available characters/words has been entered.
  */
-export class CharacterCount extends GOVUKFrontendComponent {
+export class CharacterCount extends ConfigurableComponent<CharacterCountConfig, HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -51,10 +51,23 @@ export class CharacterCount extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for character count
+     * @param {Element | null} $root - HTML element to use for character count
      * @param {CharacterCountConfig} [config] - Character count config
      */
-    constructor($module: Element | null, config?: CharacterCountConfig);
+    constructor($root: Element | null, config?: CharacterCountConfig);
+
+    /**
+     * Character count config override
+     *
+     * To ensure data-attributes take complete precedence, even if they change
+     * the type of count, we need to reset the `maxlength` and `maxwords` from
+     * the JavaScript config.
+     *
+     * @internal
+     * @param {CharacterCountConfig} datasetConfig - configuration specified by dataset
+     * @returns {CharacterCountConfig} - configuration to override by dataset
+     */
+    [configOverride](datasetConfig: CharacterCountConfig): CharacterCountConfig;
 }
 
 /**

govuk-frontend/dist/govuk/components/checkboxes/checkboxes.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Checkboxes component
  */
-export class Checkboxes extends GOVUKFrontendComponent {
+export class Checkboxes extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -21,7 +21,7 @@ export class Checkboxes extends GOVUKFrontendComponent {
      * (for example if the user has navigated back), and set up event handlers to
      * keep the reveal in sync with the checkbox state.
      *
-     * @param {Element | null} $module - HTML element to use for checkboxes
+     * @param {Element | null} $root - HTML element to use for checkboxes
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/error-summary/error-summary.d.ts

@@ -1,4 +1,4 @@
-import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
+import { ConfigurableComponent } from "../../common/configuration.js";
 
 /**
  * Error summary component
@@ -6,7 +6,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
  * Takes focus on initialisation for accessible announcement, unless disabled in
  * configuration.
  */
-export class ErrorSummary extends GOVUKFrontendComponent {
+export class ErrorSummary extends ConfigurableComponent<ErrorSummaryConfig, HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -33,10 +33,10 @@ export class ErrorSummary extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for error summary
+     * @param {Element | null} $root - HTML element to use for error summary
      * @param {ErrorSummaryConfig} [config] - Error summary config
      */
-    constructor($module: Element | null, config?: ErrorSummaryConfig);
+    constructor($root: Element | null, config?: ErrorSummaryConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.d.ts

@@ -1,9 +1,9 @@
-import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
+import { ConfigurableComponent } from "../../common/configuration.js";
 
 /**
  * Exit this page component
  */
-export class ExitThisPage extends GOVUKFrontendComponent {
+export class ExitThisPage extends ConfigurableComponent<ExitThisPageConfig, HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -30,10 +30,10 @@ export class ExitThisPage extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element that wraps the Exit This Page button
+     * @param {Element | null} $root - HTML element that wraps the Exit This Page button
      * @param {ExitThisPageConfig} [config] - Exit This Page config
      */
-    constructor($module: Element | null, config?: ExitThisPageConfig);
+    constructor($root: Element | null, config?: ExitThisPageConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/header/header.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Header component
  */
-export class Header extends GOVUKFrontendComponent {
+export class Header extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -13,7 +13,7 @@ export class Header extends GOVUKFrontendComponent {
      * Apply a matchMedia for desktop which will trigger a state sync if the
      * browser viewport moves between states.
      *
-     * @param {Element | null} $module - HTML element to use for header
+     * @param {Element | null} $root - HTML element to use for header
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/notification-banner/notification-banner.d.ts

@@ -1,9 +1,9 @@
-import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
+import { ConfigurableComponent } from "../../common/configuration.js";
 
 /**
  * Notification Banner component
  */
-export class NotificationBanner extends GOVUKFrontendComponent {
+export class NotificationBanner extends ConfigurableComponent<NotificationBannerConfig, HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -30,10 +30,10 @@ export class NotificationBanner extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for notification banner
+     * @param {Element | null} $root - HTML element to use for notification banner
      * @param {NotificationBannerConfig} [config] - Notification banner config
      */
-    constructor($module: Element | null, config?: NotificationBannerConfig);
+    constructor($root: Element | null, config?: NotificationBannerConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/password-input/password-input.d.ts

@@ -1,9 +1,9 @@
-import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
+import { ConfigurableComponent } from "../../common/configuration.js";
 
 /**
  * Password input component
  */
-export class PasswordInput extends GOVUKFrontendComponent {
+export class PasswordInput extends ConfigurableComponent<PasswordInputConfig, HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -30,10 +30,10 @@ export class PasswordInput extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for password input
+     * @param {Element | null} $root - HTML element to use for password input
      * @param {PasswordInputConfig} [config] - Password input config
      */
-    constructor($module: Element | null, config?: PasswordInputConfig);
+    constructor($root: Element | null, config?: PasswordInputConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/radios/radios.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Radios component
  */
-export class Radios extends GOVUKFrontendComponent {
+export class Radios extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -21,7 +21,7 @@ export class Radios extends GOVUKFrontendComponent {
      * (for example if the user has navigated back), and set up event handlers to
      * keep the reveal in sync with the radio state.
      *
-     * @param {Element | null} $module - HTML element to use for radios
+     * @param {Element | null} $root - HTML element to use for radios
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/service-navigation/service-navigation.d.ts

@@ -3,14 +3,14 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Service Navigation component
  */
-export class ServiceNavigation extends GOVUKFrontendComponent {
+export class ServiceNavigation extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
     static moduleName: string;
 
     /**
-     * @param {Element | null} $module - HTML element to use for header
+     * @param {Element | null} $root - HTML element to use for header
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/skip-link/skip-link.d.ts

@@ -3,17 +3,22 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Skip link component
  */
-export class SkipLink extends GOVUKFrontendComponent {
+export class SkipLink extends GOVUKFrontendComponent<HTMLAnchorElement> {
+    static elementType: {
+        new(): HTMLAnchorElement;
+        prototype: HTMLAnchorElement;
+    };
+
     /**
      * Name for the component used when initialising using data-module attributes.
      */
     static moduleName: string;
 
     /**
-     * @param {Element | null} $module - HTML element to use for skip link
-     * @throws {ElementError} when $module is not set or the wrong type
-     * @throws {ElementError} when $module.hash does not contain a hash
+     * @param {Element | null} $root - HTML element to use for skip link
+     * @throws {ElementError} when $root is not set or the wrong type
+     * @throws {ElementError} when $root.hash does not contain a hash
      * @throws {ElementError} when the linked element is missing or the wrong type
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/tabs/tabs.d.ts

@@ -3,14 +3,14 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Tabs component
  */
-export class Tabs extends GOVUKFrontendComponent {
+export class Tabs extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
     static moduleName: string;
 
     /**
-     * @param {Element | null} $module - HTML element to use for tabs
+     * @param {Element | null} $root - HTML element to use for tabs
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/errors/index.d.ts

@@ -1,3 +1,5 @@
+import { type ComponentWithModuleName } from "../common/index.js";
+
 /**
  * GOV.UK Frontend error
  *
@@ -17,7 +19,7 @@
  * }
  * ```
  */
-export class GOVUKFrontendError extends Error {
+export abstract class GOVUKFrontendError extends Error {
 }
 
 /**
@@ -58,14 +60,20 @@ export class ElementError extends GOVUKFrontendError {
 }
 
 /**
- * Element error options
+ * Indicates that a component is already initialised
  */
-export interface ElementErrorOptions {
+export class InitError extends GOVUKFrontendError {
     /**
-     * - The name of the component throwing the error
+     * @internal
+     * @param {ComponentWithModuleName | string} componentOrMessage - name of the component module
      */
-    componentName: string;
+    constructor(componentOrMessage: ComponentWithModuleName | string);
+}
 
+/**
+ * Element error options
+ */
+export interface ElementErrorOptions {
     /**
      * - An identifier that'll let the user understand which element has an error. This is whatever makes the most sense
      */
@@ -80,4 +88,9 @@ export interface ElementErrorOptions {
      * - The type that was expected for the identifier
      */
     expectedType?: string | undefined;
+
+    /**
+     * - Component throwing the error
+     */
+    component: ComponentWithModuleName;
 }

govuk-frontend/dist/govuk/govuk-frontend-component.d.ts

@@ -2,8 +2,29 @@
  * Base Component class
  *
  * Centralises the behaviours shared by our components
- *
- * @internal
  */
-export class GOVUKFrontendComponent {
+export abstract class GOVUKFrontendComponent<RootElementType extends Element = HTMLElement> {
+    static elementType: typeof Element;
+
+    /**
+     * Validates whether components are supported
+     *
+     * @throws {SupportError} when the components are not supported
+     */
+    static checkSupport(): void;
+
+    /**
+     * Constructs a new component, validating that GOV.UK Frontend is supported
+     *
+     * @internal
+     * @param {Element | null} [$root] - HTML element to use for component
+     */
+    constructor($root?: Element | null);
+
+    /**
+     * Returns the root element of the component
+     *
+     * @returns {RootElementType} - the root element of component
+     */
+    protected get $root(): RootElementType;
 }

govuk-frontend/dist/govuk/init.d.ts

@@ -8,7 +8,6 @@ import { type PasswordInputConfig } from "./components/password-input/password-i
 
 export interface CompatibleClass {
     new(...args: any[]): any;
-    defaults?: object;
     moduleName: string;
 }
 
@@ -57,17 +56,54 @@ export interface Config {
  */
 export type ConfigKey = keyof Config;
 
+export type ComponentConfig<ComponentClass extends CompatibleClass> = ConstructorParameters<ComponentClass>[1];
+
+export interface ErrorContext<ComponentClass extends CompatibleClass> {
+    /**
+     * - Element used for component module initialisation
+     */
+    element?: Element | undefined;
+
+    /**
+     * - Class of component
+     */
+    component?: ComponentClass | undefined;
+
+    /**
+     * - Config supplied to component
+     */
+    config: ComponentConfig<ComponentClass>;
+}
+
+export type OnErrorCallback<ComponentClass extends CompatibleClass> = (
+    error: unknown,
+    context: ErrorContext<ComponentClass>,
+) => any;
+
+export interface CreateAllOptions<ComponentClass extends CompatibleClass> {
+    /**
+     * - scope of the document to search within
+     */
+    scope?: Document | Element | undefined;
+
+    /**
+     * - callback function if error throw by component on init
+     */
+    onError?: OnErrorCallback<ComponentClass> | undefined;
+}
+
 /**
  * Initialise all components
  *
  * Use the `data-module` attributes to find, instantiate and init all of the
  * components provided as part of GOV.UK Frontend.
  *
- * @param {Config & { scope?: Element }} [config] - Config for all components (with optional scope)
+ * @param {Config & { scope?: Element, onError?: OnErrorCallback<CompatibleClass> }} [config] - Config for all components (with optional scope)
  */
 export function initAll(
     config?: Config & {
         scope?: Element;
+        onError?: OnErrorCallback<CompatibleClass>;
     },
 ): void;
 
@@ -80,14 +116,14 @@ export function initAll(
  *
  * 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 for the component
- * @param {Element|Document} [$scope] - scope of the document to search within
- * @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
  */
-export function createAll<T extends CompatibleClass>(
-    Component: T,
-    config?: T["defaults"],
-    $scope?: Document | Element,
-): Array<InstanceType<T>>;
+export function createAll<ComponentClass extends CompatibleClass>(
+    Component: ComponentClass,
+    config?: ComponentConfig<ComponentClass>,
+    createAllOptions?: OnErrorCallback<ComponentClass> | Element | Document | CreateAllOptions<ComponentClass>,
+): Array<InstanceType<ComponentClass>>;

govuk-frontend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@types/govuk-frontend",
-    "version": "5.6.0",
+    "version": "5.8.0",
     "description": "TypeScript definitions for govuk-frontend",
     "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/govuk-frontend",
     "license": "MIT",
@@ -32,6 +32,7 @@
     },
     "scripts": {},
     "dependencies": {},
-    "typesPublisherContentHash": "e8f70663b9ffa7250d5ba386fc0ee65bffb85e8da2f64ce0a95445f8af7f19b1",
-    "typeScriptVersion": "4.8"
+    "peerDependencies": {},
+    "typesPublisherContentHash": "3df1d321f714ae24feef605eab0f6302b12f0717613036605b5de394fb136253",
+    "typeScriptVersion": "5.0"
 }

govuk-frontend/dist/govuk/common/normalise-dataset.d.mts

@@ -1 +0,0 @@
-export * from "./normalise-dataset.js";

govuk-frontend/dist/govuk/common/normalise-dataset.d.ts

@@ -1,16 +0,0 @@
-import { type ObjectNested, type Schema } from "./index.js";
-
-/**
- * Normalise dataset
- *
- * Loop over an object and normalise each value using {@link normaliseString},
- * optionally expanding nested `i18n.field`
- *
- * @internal
- * @param {{ schema: Schema }} Component - Component class
- * @param {DOMStringMap} dataset - HTML element dataset
- * @returns {ObjectNested} Normalised dataset
- */
-export function normaliseDataset(Component: {
-    schema: Schema;
-}, dataset: DOMStringMap): ObjectNested;

govuk-frontend/dist/govuk/common/normalise-string.d.mts

@@ -1 +0,0 @@
-export * from "./normalise-string.js";

govuk-frontend/dist/govuk/common/normalise-string.d.ts

@@ -1,22 +0,0 @@
-import { type SchemaProperty } from "./index.js";
-
-/**
- * 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
- */
-export function normaliseString(
-    value: DOMStringMap[string],
-    property?: SchemaProperty,
-): string | boolean | number | undefined;