Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` #5515

patrickpatrickpatrick · 2024-11-18T14:59:03Z

What

Remove GOVUKFrontend prefix from Component
Update components to import Component
Update ConfigurableComponent to extend Component
Add deprecated JavaScript files to package build (a measure to ensure that govuk-frontend-component.mjs will still be present in the dist folder after the build process, thus avoiding a breaking change in this PR)

Why

github-actions · 2024-11-18T15:00:35Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	118.41 KiB
dist/govuk-frontend-development.min.js	42.56 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	92.65 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	86.94 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.21 KiB
packages/govuk-frontend/dist/govuk/component.mjs	1.67 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	125 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	118.4 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.55 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	7.13 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	82.43 KiB	40.4 KiB
accordion.mjs	26.53 KiB	13.41 KiB
button.mjs	9.04 KiB	3.78 KiB
character-count.mjs	25.34 KiB	10.9 KiB
checkboxes.mjs	7.76 KiB	3.42 KiB
error-summary.mjs	10.94 KiB	4.54 KiB
exit-this-page.mjs	20.15 KiB	10.34 KiB
header.mjs	6.41 KiB	3.22 KiB
notification-banner.mjs	9.3 KiB	3.7 KiB
password-input.mjs	18.19 KiB	8.33 KiB
radios.mjs	6.76 KiB	2.98 KiB
service-navigation.mjs	6.39 KiB	3.26 KiB
skip-link.mjs	6.34 KiB	2.76 KiB
tabs.mjs	11.99 KiB	6.67 KiB

View stats and visualisations on the review app

Action run for b1f2bf7

github-actions · 2024-11-18T15:01:18Z

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 5a4b212e3..701d643ec 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -13,20 +13,20 @@ function getBreakpoint(t) {
 }
 
 function setFocus(t, e = {}) {
-    var n;
-    const s = t.getAttribute("tabindex");
+    var s;
+    const n = t.getAttribute("tabindex");
 
     function onBlur() {
-        var n;
-        null == (n = e.onBlur) || n.call(t), s || t.removeAttribute("tabindex")
+        var s;
+        null == (s = e.onBlur) || s.call(t), n || t.removeAttribute("tabindex")
     }
-    s || t.setAttribute("tabindex", "-1"), t.addEventListener("focus", (function() {
+    n || t.setAttribute("tabindex", "-1"), t.addEventListener("focus", (function() {
         t.addEventListener("blur", onBlur, {
             once: !0
         })
     }), {
         once: !0
-    }), null == (n = e.onBeforeFocus) || n.call(t), t.focus()
+    }), null == (s = e.onBeforeFocus) || s.call(t), t.focus()
 }
 
 function isSupported(t = document.body) {
@@ -63,12 +63,12 @@ class ElementError extends GOVUKFrontendError {
         let e = "string" == typeof t ? t : "";
         if ("object" == typeof t) {
             const {
-                component: n,
-                identifier: s,
+                component: s,
+                identifier: n,
                 element: i,
                 expectedType: o
             } = t;
-            e = s, e += i ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found", e = formatErrorMessage(n, e)
+            e = n, e += i ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found", e = formatErrorMessage(s, e)
         }
         super(e), this.name = "ElementError"
     }
@@ -78,7 +78,7 @@ class InitError extends GOVUKFrontendError {
         super("string" == typeof t ? t : formatErrorMessage(t, "Root element (`$root`) already initialised")), this.name = "InitError"
     }
 }
-class GOVUKFrontendComponent {
+class Component {
     get $root() {
         return this._$root
     }
@@ -93,8 +93,8 @@ class GOVUKFrontendComponent {
             expectedType: e.elementType.name
         });
         this._$root = t, e.checkSupport(), this.checkInitialised();
-        const n = e.moduleName;
-        this.$root.setAttribute(`data-${n}-init`, "")
+        const s = e.moduleName;
+        this.$root.setAttribute(`data-${s}-init`, "")
     }
     checkInitialised() {
         const t = this.constructor,
@@ -107,96 +107,96 @@ class GOVUKFrontendComponent {
         if (!isSupported()) throw new SupportError
     }
 }
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 const t = Symbol.for("configOverride");
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
     [t](t) {
         return {}
     }
     get config() {
         return this._config
     }
-    constructor(e, n) {
+    constructor(e, s) {
         super(e), this._config = void 0;
-        const s = this.constructor;
-        if (void 0 === s.defaults) throw new ConfigError(formatErrorMessage(s, "Config passed as parameter into constructor but no defaults defined"));
+        const n = this.constructor;
+        if (void 0 === n.defaults) throw new ConfigError(formatErrorMessage(n, "Config passed as parameter into constructor but no defaults defined"));
         const i = function(Component, t) {
             if (void 0 === Component.schema) throw new ConfigError(formatErrorMessage(Component, "Config passed as parameter into constructor but no schema defined"));
             const e = {};
-            for (const [n, s] of Object.entries(Component.schema.properties)) n in t && (e[n] = normaliseString(t[n], s)), "object" === (null == s ? void 0 : s.type) && (e[n] = extractConfigByNamespace(Component.schema, t, n));
+            for (const [s, n] of Object.entries(Component.schema.properties)) s in t && (e[s] = normaliseString(t[s], n)), "object" === (null == n ? void 0 : n.type) && (e[s] = extractConfigByNamespace(Component.schema, t, s));
             return e
-        }(s, this._$root.dataset);
-        this._config = mergeConfigs(s.defaults, null != n ? n : {}, this[t](i), i)
+        }(n, this._$root.dataset);
+        this._config = mergeConfigs(n.defaults, null != s ? s : {}, this[t](i), i)
     }
 }
 
 function normaliseString(t, e) {
-    const n = t ? t.trim() : "";
-    let s, i = null == e ? void 0 : e.type;
-    switch (i || (["true", "false"].includes(n) && (i = "boolean"), n.length > 0 && isFinite(Number(n)) && (i = "number")), i) {
+    const s = t ? t.trim() : "";
+    let n, i = null == e ? void 0 : e.type;
+    switch (i || (["true", "false"].includes(s) && (i = "boolean"), s.length > 0 && isFinite(Number(s)) && (i = "number")), i) {
         case "boolean":
-            s = "true" === n;
+            n = "true" === s;
             break;
         case "number":
-            s = Number(n);
+            n = Number(s);
             break;
         default:
-            s = t
+            n = t
     }
-    return s
+    return n
 }
 
 function mergeConfigs(...t) {
     const e = {};
-    for (const n of t)
-        for (const t of Object.keys(n)) {
-            const s = e[t],
-                i = n[t];
-            isObject(s) && isObject(i) ? e[t] = mergeConfigs(s, i) : e[t] = i
+    for (const s of t)
+        for (const t of Object.keys(s)) {
+            const n = e[t],
+                i = s[t];
+            isObject(n) && isObject(i) ? e[t] = mergeConfigs(n, i) : e[t] = i
         }
     return e
 }
 
-function extractConfigByNamespace(t, e, n) {
-    const s = t.properties[n];
-    if ("object" !== (null == s ? void 0 : s.type)) return;
+function extractConfigByNamespace(t, e, s) {
+    const n = t.properties[s];
+    if ("object" !== (null == n ? void 0 : n.type)) return;
     const i = {
-        [n]: {}
+        [s]: {}
     };
     for (const [o, r] of Object.entries(e)) {
         let t = i;
         const e = o.split(".");
-        for (const [s, i] of e.entries()) "object" == typeof t && (s < e.length - 1 ? (isObject(t[i]) || (t[i] = {}), t = t[i]) : o !== n && (t[i] = normaliseString(r)))
+        for (const [n, i] of e.entries()) "object" == typeof t && (n < e.length - 1 ? (isObject(t[i]) || (t[i] = {}), t = t[i]) : o !== s && (t[i] = normaliseString(r)))
     }
-    return i[n]
+    return i[s]
 }
 class I18n {
     constructor(t = {}, e = {}) {
-        var n;
-        this.translations = void 0, this.locale = void 0, this.translations = t, this.locale = null != (n = e.locale) ? n : document.documentElement.lang || "en"
+        var s;
+        this.translations = void 0, this.locale = void 0, this.translations = t, this.locale = null != (s = e.locale) ? s : document.documentElement.lang || "en"
     }
     t(t, e) {
         if (!t) throw new Error("i18n: lookup key missing");
-        let n = this.translations[t];
-        if ("number" == typeof(null == e ? void 0 : e.count) && "object" == typeof n) {
-            const s = n[this.getPluralSuffix(t, e.count)];
-            s && (n = s)
+        let s = this.translations[t];
+        if ("number" == typeof(null == e ? void 0 : e.count) && "object" == typeof s) {
+            const n = s[this.getPluralSuffix(t, e.count)];
+            n && (s = n)
         }
-        if ("string" == typeof n) {
-            if (n.match(/%{(.\S+)}/)) {
+        if ("string" == typeof s) {
+            if (s.match(/%{(.\S+)}/)) {
                 if (!e) throw new Error("i18n: cannot replace placeholders in string if no option data provided");
-                return this.replacePlaceholders(n, e)
+                return this.replacePlaceholders(s, e)
             }
-            return n
+            return s
         }
         return t
     }
     replacePlaceholders(t, e) {
-        const n = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : void 0;
-        return t.replace(/%{(.\S+)}/g, (function(t, s) {
-            if (Object.prototype.hasOwnProperty.call(e, s)) {
-                const t = e[s];
-                return !1 === t || "number" != typeof t && "string" != typeof t ? "" : "number" == typeof t ? n ? n.format(t) : `${t}` : t
+        const s = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : void 0;
+        return t.replace(/%{(.\S+)}/g, (function(t, n) {
+            if (Object.prototype.hasOwnProperty.call(e, n)) {
+                const t = e[n];
+                return !1 === t || "number" != typeof t && "string" != typeof t ? "" : "number" == typeof t ? s ? s.format(t) : `${t}` : t
             }
             throw new Error(`i18n: no data found to replace ${t} placeholder in string`)
         }))
@@ -206,11 +206,11 @@ class I18n {
     }
     getPluralSuffix(t, e) {
         if (e = Number(e), !isFinite(e)) return "other";
-        const n = this.translations[t],
-            s = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(e) : this.selectPluralFormUsingFallbackRules(e);
-        if ("object" == typeof n) {
-            if (s in n) return s;
-            if ("other" in n) return console.warn(`i18n: Missing plural form ".${s}" for "${this.locale}" locale. Falling back to ".other".`), "other"
+        const s = this.translations[t],
+            n = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(e) : this.selectPluralFormUsingFallbackRules(e);
+        if ("object" == typeof s) {
+            if (n in s) return n;
+            if ("other" in s) return console.warn(`i18n: Missing plural form ".${n}" for "${this.locale}" locale. Falling back to ".other".`), "other"
         }
         throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`)
     }
@@ -222,8 +222,8 @@ class I18n {
     getPluralRulesForLocale() {
         const t = this.locale.split("-")[0];
         for (const e in I18n.pluralRulesMap) {
-            const n = I18n.pluralRulesMap[e];
-            if (n.includes(this.locale) || n.includes(t)) return e
+            const s = I18n.pluralRulesMap[e];
+            if (s.includes(this.locale) || s.includes(t)) return e
         }
     }
 }
@@ -245,8 +245,8 @@ I18n.pluralRulesMap = {
     irish: t => 1 === t ? "one" : 2 === t ? "two" : t >= 3 && t <= 6 ? "few" : t >= 7 && t <= 10 ? "many" : "other",
     russian(t) {
         const e = t % 100,
-            n = e % 10;
-        return 1 === n && 11 !== e ? "one" : n >= 2 && n <= 4 && !(e >= 12 && e <= 14) ? "few" : 0 === n || n >= 5 && n <= 9 || e >= 11 && e <= 14 ? "many" : "other"
+            s = e % 10;
+        return 1 === s && 11 !== e ? "one" : s >= 2 && s <= 4 && !(e >= 12 && e <= 14) ? "few" : 0 === s || s >= 5 && s <= 9 || e >= 11 && e <= 14 ? "many" : "other"
     },
     scottish: t => 1 === t || 11 === t ? "one" : 2 === t || 12 === t ? "two" : t >= 3 && t <= 10 || t >= 13 && t <= 19 ? "few" : "other",
     spanish: t => 1 === t ? "one" : t % 1e6 == 0 && 0 !== t ? "many" : "other",
@@ -255,12 +255,12 @@ I18n.pluralRulesMap = {
 class Accordion extends ConfigurableComponent {
     constructor(t, e = {}) {
         super(t, e), this.i18n = void 0, this.controlsClass = "govuk-accordion__controls", this.showAllClass = "govuk-accordion__show-all", this.showAllTextClass = "govuk-accordion__show-all-text", this.sectionClass = "govuk-accordion__section", this.sectionExpandedClass = "govuk-accordion__section--expanded", this.sectionButtonClass = "govuk-accordion__section-button", this.sectionHeaderClass = "govuk-accordion__section-header", this.sectionHeadingClass = "govuk-accordion__section-heading", this.sectionHeadingDividerClass = "govuk-accordion__section-heading-divider", this.sectionHeadingTextClass = "govuk-accordion__section-heading-text", this.sectionHeadingTextFocusClass = "govuk-accordion__section-heading-text-focus", this.sectionShowHideToggleClass = "govuk-accordion__section-toggle", this.sectionShowHideToggleFocusClass = "govuk-accordion__section-toggle-focus", this.sectionShowHideTextClass = "govuk-accordion__section-toggle-text", this.upChevronIconClass = "govuk-accordion-nav__chevron", this.downChevronIconClass = "govuk-accordion-nav__chevron--down", this.sectionSummaryClass = "govuk-accordion__section-summary", this.sectionSummaryFocusClass = "govuk-accordion__section-summary-focus", this.sectionContentClass = "govuk-accordion__section-content", this.$sections = void 0, this.$showAllButton = null, this.$showAllIcon = null, this.$showAllText = null, this.i18n = new I18n(this.config.i18n);
-        const n = this.$root.querySelectorAll(`.${this.sectionClass}`);
-        if (!n.length) throw new ElementError({
+        const s = this.$root.querySelectorAll(`.${this.sectionClass}`);
+        if (!s.length) throw new ElementError({
             component: Accordion,
             identifier: `Sections (\`<div class="${this.sectionClass}">\`)`
         });
-        this.$sections = n, this.initControls(), this.initSectionHeaders(), this.updateShowAllButton(this.areAllSectionsOpen())
+        this.$sections = s, this.initControls(), this.initSectionHeaders(), this.updateShowAllButton(this.areAllSectionsOpen())
     }
     initControls() {
         this.$showAllButton = document.createElement("button"), this.$showAllButton.setAttribute("type", "button"), this.$showAllButton.setAttribute("class", this.showAllClass), this.$showAllButton.setAttribute("aria-expanded", "false"), this.$showAllIcon = document.createElement("span"), this.$showAllIcon.classList.add(this.upChevronIconClass), this.$showAllButton.appendChild(this.$showAllIcon);
@@ -269,33 +269,33 @@ class Accordion extends ConfigurableComponent {
     }
     initSectionHeaders() {
         this.$sections.forEach(((t, e) => {
-            const n = t.querySelector(`.${this.sectionHeaderClass}`);
-            if (!n) throw new ElementError({
+            const s = t.querySelector(`.${this.sectionHeaderClass}`);
+            if (!s) throw new ElementError({
                 component: Accordion,
                 identifier: `Section headers (\`<div class="${this.sectionHeaderClass}">\`)`
             });
-            this.constructHeaderMarkup(n, e), this.setExpanded(this.isExpanded(t), t), n.addEventListener("click", (() => this.onSectionToggle(t))), this.setInitialState(t)
+            this.constructHeaderMarkup(s, e), this.setExpanded(this.isExpanded(t), t), s.addEventListener("click", (() => this.onSectionToggle(t))), this.setInitialState(t)
         }))
     }
     constructHeaderMarkup(t, e) {
-        const n = t.querySelector(`.${this.sectionButtonClass}`),
-            s = t.querySelector(`.${this.sectionHeadingClass}`),
+        const s = t.querySelector(`.${this.sectionButtonClass}`),
+            n = t.querySelector(`.${this.sectionHeadingClass}`),
             i = t.querySelector(`.${this.sectionSummaryClass}`);
-        if (!s) throw new ElementError({
+        if (!n) throw new ElementError({
             component: Accordion,
             identifier: `Section heading (\`.${this.sectionHeadingClass}\`)`
         });
-        if (!n) throw new ElementError({
+        if (!s) throw new ElementError({
             component: Accordion,
             identifier: `Section button placeholder (\`<span class="${this.sectionButtonClass}">\`)`
         });
         const o = document.createElement("button");
         o.setAttribute("type", "button"), o.setAttribute("aria-controls", `${this.$root.id}-content-${e+1}`);
-        for (const d of Array.from(n.attributes)) "id" !== d.name && o.setAttribute(d.name, d.value);
+        for (const d of Array.from(s.attributes)) "id" !== d.name && o.setAttribute(d.name, d.value);
         const r = document.createElement("span");
-        r.classList.add(this.sectionHeadingTextClass), r.id = n.id;
+        r.classList.add(this.sectionHeadingTextClass), r.id = s.id;
         const a = document.createElement("span");
-        a.classList.add(this.sectionHeadingTextFocusClass), r.appendChild(a), Array.from(n.childNodes).forEach((t => a.appendChild(t)));
+        a.classList.add(this.sectionHeadingTextFocusClass), r.appendChild(a), Array.from(s.childNodes).forEach((t => a.appendChild(t)));
         const c = document.createElement("span");
         c.classList.add(this.sectionShowHideToggleClass), c.setAttribute("data-nosnippet", "");
         const l = document.createElement("span");
@@ -306,16 +306,16 @@ class Accordion extends ConfigurableComponent {
             const t = document.createElement("span"),
                 e = document.createElement("span");
             e.classList.add(this.sectionSummaryFocusClass), t.appendChild(e);
-            for (const n of Array.from(i.attributes)) t.setAttribute(n.name, n.value);
+            for (const s of Array.from(i.attributes)) t.setAttribute(s.name, s.value);
             Array.from(i.childNodes).forEach((t => e.appendChild(t))), i.remove(), o.appendChild(t), o.appendChild(this.getButtonPunctuationEl())
         }
-        o.appendChild(c), s.removeChild(n), s.appendChild(o)
+        o.appendChild(c), n.removeChild(s), n.appendChild(o)
     }
     onBeforeMatch(t) {
         const e = t.target;
         if (!(e instanceof Element)) return;
-        const n = e.closest(`.${this.sectionClass}`);
-        n && this.setExpanded(!0, n)
+        const s = e.closest(`.${this.sectionClass}`);
+        s && this.setExpanded(!0, s)
     }
     onSectionToggle(t) {
         const e = !this.isExpanded(t);
@@ -328,24 +328,24 @@ class Accordion extends ConfigurableComponent {
         })), this.updateShowAllButton(t)
     }
     setExpanded(t, e) {
-        const n = e.querySelector(`.${this.upChevronIconClass}`),
-            s = e.querySelector(`.${this.sectionShowHideTextClass}`),
+        const s = e.querySelector(`.${this.upChevronIconClass}`),
+            n = e.querySelector(`.${this.sectionShowHideTextClass}`),
             i = e.querySelector(`.${this.sectionButtonClass}`),
             o = e.querySelector(`.${this.sectionContentClass}`);
         if (!o) throw new ElementError({
             component: Accordion,
             identifier: `Section content (\`<div class="${this.sectionContentClass}">\`)`
         });
-        if (!n || !s || !i) return;
+        if (!s || !n || !i) return;
         const r = t ? this.i18n.t("hideSection") : this.i18n.t("showSection");
-        s.textContent = r, i.setAttribute("aria-expanded", `${t}`);
+        n.textContent = r, i.setAttribute("aria-expanded", `${t}`);
         const a = [],
             c = e.querySelector(`.${this.sectionHeadingTextClass}`);
         c && a.push(`${c.textContent}`.trim());
         const l = e.querySelector(`.${this.sectionSummaryClass}`);
         l && a.push(`${l.textContent}`.trim());
         const h = t ? this.i18n.t("hideSectionAriaLabel") : this.i18n.t("showSectionAriaLabel");
-        a.push(h), i.setAttribute("aria-label", a.join(" , ")), t ? (o.removeAttribute("hidden"), e.classList.add(this.sectionExpandedClass), n.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), e.classList.remove(this.sectionExpandedClass), n.classList.add(this.downChevronIconClass)), this.updateShowAllButton(this.areAllSectionsOpen())
+        a.push(h), i.setAttribute("aria-label", a.join(" , ")), t ? (o.removeAttribute("hidden"), e.classList.add(this.sectionExpandedClass), s.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), e.classList.remove(this.sectionExpandedClass), s.classList.add(this.downChevronIconClass)), this.updateShowAllButton(this.areAllSectionsOpen())
     }
     isExpanded(t) {
         return t.classList.contains(this.sectionExpandedClass)
@@ -362,18 +362,18 @@ class Accordion extends ConfigurableComponent {
     }
     storeState(t, e) {
         if (!this.config.rememberExpanded) return;
-        const n = this.getIdentifier(t);
-        if (n) try {
-            window.sessionStorage.setItem(n, e.toString())
-        } catch (s) {}
+        const s = this.getIdentifier(t);
+        if (s) try {
+            window.sessionStorage.setItem(s, e.toString())
+        } catch (n) {}
     }
     setInitialState(t) {
         if (!this.config.rememberExpanded) return;
         const e = this.getIdentifier(t);
         if (e) try {
-            const n = window.sessionStorage.getItem(e);
-            null !== n && this.setExpanded("true" === n, t)
-        } catch (n) {}
+            const s = window.sessionStorage.getItem(e);
+            null !== s && this.setExpanded("true" === s, t)
+        } catch (s) {}
     }
     getButtonPunctuationEl() {
         const t = document.createElement("span");
@@ -416,8 +416,8 @@ class Button extends ConfigurableComponent {
 }
 
 function closestAttributeValue(t, e) {
-    const n = t.closest(`[${e}]`);
-    return n ? n.getAttribute(e) : null
+    const s = t.closest(`[${e}]`);
+    return s ? s.getAttribute(e) : null
 }
 Button.moduleName = "govuk-button", Button.defaults = Object.freeze({
     preventDoubleClick: !1
@@ -437,7 +437,7 @@ class CharacterCount extends ConfigurableComponent {
         }), e
     }
     constructor(t, e = {}) {
-        var n, s;
+        var s, n;
         super(t, e), this.$textarea = void 0, this.$visibleCountMessage = void 0, this.$screenReaderCountMessage = void 0, this.lastInputTimestamp = null, this.lastInputValue = "", this.valueChecker = null, this.i18n = void 0, this.maxLength = void 0;
         const i = this.$root.querySelector(".govuk-js-character-count");
         if (!(i instanceof HTMLTextAreaElement || i instanceof HTMLInputElement)) throw new ElementError({
@@ -447,24 +447,24 @@ class CharacterCount extends ConfigurableComponent {
             identifier: "Form field (`.govuk-js-character-count`)"
         });
         const o = function(t, e) {
-            const n = [];
-            for (const [s, i] of Object.entries(t)) {
+            const s = [];
+            for (const [n, i] of Object.entries(t)) {
                 const t = [];
                 if (Array.isArray(i)) {
                     for (const {
-                            required: n,
-                            errorMessage: s
+                            required: s,
+                            errorMessage: n
                         }
-                        of i) n.every((t => !!e[t])) || t.push(s);
-                    "anyOf" !== s || i.length - t.length >= 1 || n.push(...t)
+                        of i) s.every((t => !!e[t])) || t.push(n);
+                    "anyOf" !== n || i.length - t.length >= 1 || s.push(...t)
                 }
             }
-            return n
+            return s
         }(CharacterCount.schema, this.config);
         if (o[0]) throw new ConfigError(formatErrorMessage(CharacterCount, o[0]));
         this.i18n = new I18n(this.config.i18n, {
             locale: closestAttributeValue(this.$root, "lang")
-        }), this.maxLength = null != (n = null != (s = this.config.maxwords) ? s : this.config.maxlength) ? n : 1 / 0, this.$textarea = i;
+        }), this.maxLength = null != (s = null != (n = this.config.maxwords) ? n : this.config.maxlength) ? s : 1 / 0, this.$textarea = i;
         const r = `${this.$textarea.id}-info`,
             a = document.getElementById(r);
         if (!a) throw new ElementError({
@@ -521,8 +521,8 @@ class CharacterCount extends ConfigurableComponent {
     }
     formatCountMessage(t, e) {
         if (0 === t) return this.i18n.t(`${e}AtLimit`);
-        const n = t < 0 ? "OverLimit" : "UnderLimit";
-        return this.i18n.t(`${e}${n}`, {
+        const s = t < 0 ? "OverLimit" : "UnderLimit";
+        return this.i18n.t(`${e}${s}`, {
             count: Math.abs(t)
         })
     }
@@ -580,7 +580,7 @@ CharacterCount.moduleName = "govuk-character-count", CharacterCount.defaults = O
         errorMessage: 'Either "maxlength" or "maxwords" must be provided'
     }]
 });
-class Checkboxes extends GOVUKFrontendComponent {
+class Checkboxes extends Component {
     constructor(t) {
         super(t), this.$inputs = void 0;
         const e = this.$root.querySelectorAll('input[type="checkbox"]');
@@ -605,10 +605,10 @@ class Checkboxes extends GOVUKFrontendComponent {
     syncConditionalRevealWithInputState(t) {
         const e = t.getAttribute("aria-controls");
         if (!e) return;
-        const n = document.getElementById(e);
-        if (null != n && n.classList.contains("govuk-checkboxes__conditional")) {
+        const s = document.getElementById(e);
+        if (null != s && s.classList.contains("govuk-checkboxes__conditional")) {
             const e = t.checked;
-            t.setAttribute("aria-expanded", e.toString()), n.classList.toggle("govuk-checkboxes__conditional--hidden", !e)
+            t.setAttribute("aria-expanded", e.toString()), s.classList.toggle("govuk-checkboxes__conditional--hidden", !e)
         }
     }
     unCheckAllInputsExcept(t) {
@@ -641,25 +641,25 @@ class ErrorSummary extends ConfigurableComponent {
         if (!(t instanceof HTMLAnchorElement)) return !1;
         const e = getFragmentFromUrl(t.href);
         if (!e) return !1;
-        const n = document.getElementById(e);
-        if (!n) return !1;
-        const s = this.getAssociatedLegendOrLabel(n);
-        return !!s && (s.scrollIntoView(), n.focus({
+        const s = document.getElementById(e);
+        if (!s) return !1;
+        const n = this.getAssociatedLegendOrLabel(s);
+        return !!n && (n.scrollIntoView(), s.focus({
             preventScroll: !0
         }), !0)
     }
     getAssociatedLegendOrLabel(t) {
         var e;
-        const n = t.closest("fieldset");
-        if (n) {
-            const e = n.getElementsByTagName("legend");
+        const s = t.closest("fieldset");
+        if (s) {
+            const e = s.getElementsByTagName("legend");
             if (e.length) {
-                const n = e[0];
-                if (t instanceof HTMLInputElement && ("checkbox" === t.type || "radio" === t.type)) return n;
-                const s = n.getBoundingClientRect().top,
+                const s = e[0];
+                if (t instanceof HTMLInputElement && ("checkbox" === t.type || "radio" === t.type)) return s;
+                const n = s.getBoundingClientRect().top,
                     i = t.getBoundingClientRect();
                 if (i.height && window.innerHeight) {
-                    if (i.top + i.height - s < window.innerHeight / 2) return n
+                    if (i.top + i.height - n < window.innerHeight / 2) return s
                 }
             }
         }
@@ -678,16 +678,16 @@ ErrorSummary.moduleName = "govuk-error-summary", ErrorSummary.defaults = Object.
 class ExitThisPage extends ConfigurableComponent {
     constructor(t, e = {}) {
         super(t, e), this.i18n = void 0, this.$button = void 0, this.$skiplinkButton = null, this.$updateSpan = null, this.$indicatorContainer = null, this.$overlay = null, this.keypressCounter = 0, this.lastKeyWasModified = !1, this.timeoutTime = 5e3, this.keypressTimeoutId = null, this.timeoutMessageId = null;
-        const n = this.$root.querySelector(".govuk-exit-this-page__button");
-        if (!(n instanceof HTMLAnchorElement)) throw new ElementError({
+        const s = this.$root.querySelector(".govuk-exit-this-page__button");
+        if (!(s instanceof HTMLAnchorElement)) throw new ElementError({
             component: ExitThisPage,
-            element: n,
+            element: s,
             expectedType: "HTMLAnchorElement",
             identifier: "Button (`.govuk-exit-this-page__button`)"
         });
-        this.i18n = new I18n(this.config.i18n), this.$button = n;
-        const s = document.querySelector(".govuk-js-exit-this-page-skiplink");
-        s instanceof HTMLAnchorElement && (this.$skiplinkButton = s), this.buildIndicator(), this.initUpdateSpan(), this.initButtonClickHandler(), "govukFrontendExitThisPageKeypress" in document.body.dataset || (document.addEventListener("keyup", this.handleKeypress.bind(this), !0), document.body.dataset.govukFrontendExitThisPageKeypress = "true"), window.addEventListener("pageshow", this.resetPage.bind(this))
+        this.i18n = new I18n(this.config.i18n), this.$button = s;
+        const n = document.querySelector(".govuk-js-exit-this-page-skiplink");
+        n instanceof HTMLAnchorElement && (this.$skiplinkButton = n), this.buildIndicator(), this.initUpdateSpan(), this.initButtonClickHandler(), "govukFrontendExitThisPageKeypress" in document.body.dataset || (document.addEventListener("keyup", this.handleKeypress.bind(this), !0), document.body.dataset.govukFrontendExitThisPageKeypress = "true"), window.addEventListener("pageshow", this.resetPage.bind(this))
     }
     initUpdateSpan() {
         this.$updateSpan = document.createElement("span"), this.$updateSpan.setAttribute("role", "status"), this.$updateSpan.className = "govuk-visually-hidden", this.$root.appendChild(this.$updateSpan)
@@ -748,23 +748,23 @@ ExitThisPage.moduleName = "govuk-exit-this-page", ExitThisPage.defaults = Object
         }
     }
 });
-class Header extends GOVUKFrontendComponent {
+class Header extends Component {
     constructor(t) {
         super(t), this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null;
         const e = this.$root.querySelector(".govuk-js-header-toggle");
         if (!e) return this;
-        const n = e.getAttribute("aria-controls");
-        if (!n) throw new ElementError({
+        const s = e.getAttribute("aria-controls");
+        if (!s) throw new ElementError({
             component: Header,
             identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
         });
-        const s = document.getElementById(n);
-        if (!s) throw new ElementError({
+        const n = document.getElementById(s);
+        if (!n) throw new ElementError({
             component: Header,
-            element: s,
-            identifier: `Navigation (\`<ul id="${n}">\`)`
+            element: n,
+            identifier: `Navigation (\`<ul id="${s}">\`)`
         });
-        this.$menu = s, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+        this.$menu = n, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
     }
     setupResponsiveChecks() {
         const t = getBreakpoint("desktop");
@@ -799,23 +799,23 @@ NotificationBanner.moduleName = "govuk-notification-banner", NotificationBanner.
 class PasswordInput extends ConfigurableComponent {
     constructor(t, e = {}) {
         super(t, e), this.i18n = void 0, this.$input = void 0, this.$showHideButton = void 0, this.$screenReaderStatusMessage = void 0;
-        const n = this.$root.querySelector(".govuk-js-password-input-input");
-        if (!(n instanceof HTMLInputElement)) throw new ElementError({
+        const s = this.$root.querySelector(".govuk-js-password-input-input");
+        if (!(s instanceof HTMLInputElement)) throw new ElementError({
             component: PasswordInput,
-            element: n,
+            element: s,
             expectedType: "HTMLInputElement",
             identifier: "Form field (`.govuk-js-password-input-input`)"
         });
-        if ("password" !== n.type) throw new ElementError("Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.");
-        const s = this.$root.querySelector(".govuk-js-password-input-toggle");
-        if (!(s instanceof HTMLButtonElement)) throw new ElementError({
+        if ("password" !== s.type) throw new ElementError("Password input: Form field (`.govuk-js-password-input-input`) must be of type `password`.");
+        const n = this.$root.querySelector(".govuk-js-password-input-toggle");
+        if (!(n instanceof HTMLButtonElement)) throw new ElementError({
             component: PasswordInput,
-            element: s,
+            element: n,
             expectedType: "HTMLButtonElement",
             identifier: "Button (`.govuk-js-password-input-toggle`)"
         });
-        if ("button" !== s.type) throw new ElementError("Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.");
-        this.$input = n, this.$showHideButton = s, this.i18n = new I18n(this.config.i18n, {
+        if ("button" !== n.type) throw new ElementError("Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.");
+        this.$input = s, this.$showHideButton = n, this.i18n = new I18n(this.config.i18n, {
             locale: closestAttributeValue(this.$root, "lang")
         }), this.$showHideButton.removeAttribute("hidden");
         const i = document.createElement("div");
@@ -836,9 +836,9 @@ class PasswordInput extends ConfigurableComponent {
         if (t === this.$input.type) return;
         this.$input.setAttribute("type", t);
         const e = "password" === t,
-            n = e ? "show" : "hide",
-            s = e ? "passwordHidden" : "passwordShown";
-        this.$showHideButton.innerText = this.i18n.t(`${n}Password`), this.$showHideButton.setAttribute("aria-label", this.i18n.t(`${n}PasswordAriaLabel`)), this.$screenReaderStatusMessage.innerText = this.i18n.t(`${s}Announcement`)
+            s = e ? "show" : "hide",
+            n = e ? "passwordHidden" : "passwordShown";
+        this.$showHideButton.innerText = this.i18n.t(`${s}Password`), this.$showHideButton.setAttribute("aria-label", this.i18n.t(`${s}PasswordAriaLabel`)), this.$screenReaderStatusMessage.innerText = this.i18n.t(`${n}Announcement`)
     }
 }
 PasswordInput.moduleName = "govuk-password-input", PasswordInput.defaults = Object.freeze({
@@ -857,7 +857,7 @@ PasswordInput.moduleName = "govuk-password-input", PasswordInput.defaults = Obje
         }
     }
 });
-class Radios extends GOVUKFrontendComponent {
+class Radios extends Component {
     constructor(t) {
         super(t), this.$inputs = void 0;
         const e = this.$root.querySelectorAll('input[type="radio"]');
@@ -882,42 +882,42 @@ class Radios extends GOVUKFrontendComponent {
     syncConditionalRevealWithInputState(t) {
         const e = t.getAttribute("aria-controls");
         if (!e) return;
-        const n = document.getElementById(e);
-        if (null != n && n.classList.contains("govuk-radios__conditional")) {
+        const s = document.getElementById(e);
+        if (null != s && s.classList.contains("govuk-radios__conditional")) {
             const e = t.checked;
-            t.setAttribute("aria-expanded", e.toString()), n.classList.toggle("govuk-radios__conditional--hidden", !e)
+            t.setAttribute("aria-expanded", e.toString()), s.classList.toggle("govuk-radios__conditional--hidden", !e)
         }
     }
     handleClick(t) {
         const e = t.target;
         if (!(e instanceof HTMLInputElement) || "radio" !== e.type) return;
-        const n = document.querySelectorAll('input[type="radio"][aria-controls]'),
-            s = e.form,
+        const s = document.querySelectorAll('input[type="radio"][aria-controls]'),
+            n = e.form,
             i = e.name;
-        n.forEach((t => {
-            const e = t.form === s;
+        s.forEach((t => {
+            const e = t.form === n;
             t.name === i && e && this.syncConditionalRevealWithInputState(t)
         }))
     }
 }
 Radios.moduleName = "govuk-radios";
-class ServiceNavigation extends GOVUKFrontendComponent {
+class ServiceNavigation extends Component {
     constructor(t) {
         super(t), this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null;
         const e = this.$root.querySelector(".govuk-js-service-navigation-toggle");
         if (!e) return this;
-        const n = e.getAttribute("aria-controls");
-        if (!n) throw new ElementError({
+        const s = e.getAttribute("aria-controls");
+        if (!s) throw new ElementError({
             component: ServiceNavigation,
             identifier: 'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
         });
-        const s = document.getElementById(n);
-        if (!s) throw new ElementError({
+        const n = document.getElementById(s);
+        if (!n) throw new ElementError({
             component: ServiceNavigation,
-            element: s,
-            identifier: `Navigation (\`<ul id="${n}">\`)`
+            element: n,
+            identifier: `Navigation (\`<ul id="${s}">\`)`
         });
-        this.$menu = s, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+        this.$menu = n, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
     }
     setupResponsiveChecks() {
         const t = getBreakpoint("tablet");
@@ -935,21 +935,21 @@ class ServiceNavigation extends GOVUKFrontendComponent {
     }
 }
 ServiceNavigation.moduleName = "govuk-service-navigation";
-class SkipLink extends GOVUKFrontendComponent {
+class SkipLink extends Component {
     constructor(t) {
         var e;
         super(t);
-        const n = this.$root.hash,
-            s = null != (e = this.$root.getAttribute("href")) ? e : "";
+        const s = this.$root.hash,
+            n = null != (e = this.$root.getAttribute("href")) ? e : "";
         let i;
         try {
             i = new window.URL(this.$root.href)
         } catch (a) {
-            throw new ElementError(`Skip link: Target link (\`href="${s}"\`) is invalid`)
+            throw new ElementError(`Skip link: Target link (\`href="${n}"\`) is invalid`)
         }
         if (i.origin !== window.location.origin || i.pathname !== window.location.pathname) return;
-        const o = getFragmentFromUrl(n);
-        if (!o) throw new ElementError(`Skip link: Target link (\`href="${s}"\`) has no hash fragment`);
+        const o = getFragmentFromUrl(s);
+        if (!o) throw new ElementError(`Skip link: Target link (\`href="${n}"\`) has no hash fragment`);
         const r = document.getElementById(o);
         if (!r) throw new ElementError({
             component: SkipLink,
@@ -967,7 +967,7 @@ class SkipLink extends GOVUKFrontendComponent {
     }
 }
 SkipLink.elementType = HTMLAnchorElement, SkipLink.moduleName = "govuk-skip-link";
-class Tabs extends GOVUKFrontendComponent {
+class Tabs extends Component {
     constructor(t) {
         super(t), this.$tabs = void 0, this.$tabList = void 0, this.$tabListItems = void 0, this.jsHiddenClass = "govuk-tabs__panel--hidden", this.changingHash = !1, this.boundTabClick = void 0, this.boundTabKeydown = void 0, this.boundOnHashChange = void 0, this.mql = null;
         const e = this.$root.querySelectorAll("a.govuk-tabs__tab");
@@ -976,17 +976,17 @@ class Tabs extends GOVUKFrontendComponent {
             identifier: 'Links (`<a class="govuk-tabs__tab">`)'
         });
         this.$tabs = e, this.boundTabClick = this.onTabClick.bind(this), this.boundTabKeydown = this.onTabKeydown.bind(this), this.boundOnHashChange = this.onHashChange.bind(this);
-        const n = this.$root.querySelector(".govuk-tabs__list"),
-            s = this.$root.querySelectorAll("li.govuk-tabs__list-item");
-        if (!n) throw new ElementError({
+        const s = this.$root.querySelector(".govuk-tabs__list"),
+            n = this.$root.querySelectorAll("li.govuk-tabs__list-item");
+        if (!s) throw new ElementError({
             component: Tabs,
             identifier: 'List (`<ul class="govuk-tabs__list">`)'
         });
-        if (!s.length) throw new ElementError({
+        if (!n.length) throw new ElementError({
             component: Tabs,
             identifier: 'List items (`<li class="govuk-tabs__list-item">`)'
         });
-        this.$tabList = n, this.$tabListItems = s, this.setupResponsiveChecks()
+        this.$tabList = s, this.$tabListItems = n, this.setupResponsiveChecks()
     }
     setupResponsiveChecks() {
         const t = getBreakpoint("tablet");
@@ -1022,8 +1022,8 @@ class Tabs extends GOVUKFrontendComponent {
             e = this.getTab(t);
         if (!e) return;
         if (this.changingHash) return void(this.changingHash = !1);
-        const n = this.getCurrentTab();
-        n && (this.hideTab(n), this.showTab(e), e.focus())
+        const s = this.getCurrentTab();
+        s && (this.hideTab(s), this.showTab(e), e.focus())
     }
     hideTab(t) {
         this.unhighlightTab(t), this.hidePanel(t)
@@ -1038,8 +1038,8 @@ class Tabs extends GOVUKFrontendComponent {
         const e = getFragmentFromUrl(t.href);
         if (!e) return;
         t.setAttribute("id", `tab_${e}`), t.setAttribute("role", "tab"), t.setAttribute("aria-controls", e), t.setAttribute("aria-selected", "false"), t.setAttribute("tabindex", "-1");
-        const n = this.getPanel(t);
-        n && (n.setAttribute("role", "tabpanel"), n.setAttribute("aria-labelledby", t.id), n.classList.add(this.jsHiddenClass))
+        const s = this.getPanel(t);
+        s && (s.setAttribute("role", "tabpanel"), s.setAttribute("aria-labelledby", t.id), s.classList.add(this.jsHiddenClass))
     }
     unsetAttributes(t) {
         t.removeAttribute("id"), t.removeAttribute("role"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-selected"), t.removeAttribute("tabindex");
@@ -1048,14 +1048,14 @@ class Tabs extends GOVUKFrontendComponent {
     }
     onTabClick(t) {
         const e = this.getCurrentTab(),
-            n = t.currentTarget;
-        e && n instanceof HTMLAnchorElement && (t.preventDefault(), this.hideTab(e), this.showTab(n), this.createHistoryEntry(n))
+            s = t.currentTarget;
+        e && s instanceof HTMLAnchorElement && (t.preventDefault(), this.hideTab(e), this.showTab(s), this.createHistoryEntry(s))
     }
     createHistoryEntry(t) {
         const e = this.getPanel(t);
         if (!e) return;
-        const n = e.id;
-        e.id = "", this.changingHash = !0, window.location.hash = n, e.id = n
+        const s = e.id;
+        e.id = "", this.changingHash = !0, window.location.hash = s, e.id = s
     }
     onTabKeydown(t) {
         switch (t.key) {
@@ -1073,16 +1073,16 @@ class Tabs extends GOVUKFrontendComponent {
         if (null == t || !t.parentElement) return;
         const e = t.parentElement.nextElementSibling;
         if (!e) return;
-        const n = e.querySelector("a.govuk-tabs__tab");
-        n && (this.hideTab(t), this.showTab(n), n.focus(), this.createHistoryEntry(n))
+        const s = e.querySelector("a.govuk-tabs__tab");
+        s && (this.hideTab(t), this.showTab(s), s.focus(), this.createHistoryEntry(s))
     }
     activatePreviousTab() {
         const t = this.getCurrentTab();
         if (null == t || !t.parentElement) return;
         const e = t.parentElement.previousElementSibling;
         if (!e) return;
-        const n = e.querySelector("a.govuk-tabs__tab");
-        n && (this.hideTab(t), this.showTab(n), n.focus(), this.createHistoryEntry(n))
+        const s = e.querySelector("a.govuk-tabs__tab");
+        s && (this.hideTab(t), this.showTab(s), s.focus(), this.createHistoryEntry(s))
     }
     getPanel(t) {
         const e = getFragmentFromUrl(t.href);
@@ -1112,7 +1112,7 @@ function initAll(t) {
     if (t = void 0 !== t ? t : {}, !isSupported()) return void(t.onError ? t.onError(new SupportError, {
         config: t
     }) : console.log(new SupportError));
-    const n = [
+    const s = [
             [Accordion, t.accordion],
             [Button, t.button],
             [CharacterCount, t.characterCount],
@@ -1127,32 +1127,32 @@ function initAll(t) {
             [SkipLink],
             [Tabs]
         ],
-        s = {
+        n = {
             scope: null != (e = t.scope) ? e : document,
             onError: t.onError
         };
-    n.forEach((([Component, t]) => {
-        createAll(Component, t, s)
+    s.forEach((([Component, t]) => {
+        createAll(Component, t, n)
     }))
 }
 
 function createAll(Component, t, e) {
-    let n, s = document;
+    let s, n = document;
     var i;
-    "object" == typeof e && (s = null != (i = e.scope) ? i : s, n = e.onError);
-    "function" == typeof e && (n = e), e instanceof HTMLElement && (s = e);
-    const o = s.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+    "object" == typeof e && (n = null != (i = e.scope) ? i : n, s = e.onError);
+    "function" == typeof e && (s = e), e instanceof HTMLElement && (n = e);
+    const o = n.querySelectorAll(`[data-module="${Component.moduleName}"]`);
     return isSupported() ? Array.from(o).map((e => {
         try {
             return void 0 !== t ? new Component(e, t) : new Component(e)
-        } catch (s) {
-            return n ? n(s, {
+        } catch (n) {
+            return s ? s(n, {
                 element: e,
                 component: Component,
                 config: t
-            }) : console.log(s), null
+            }) : console.log(n), null
         }
-    })).filter(Boolean) : (n ? n(new SupportError, {
+    })).filter(Boolean) : (s ? s(new SupportError, {
         component: Component,
         config: t
     }) : console.log(new SupportError), [])
@@ -1163,7 +1163,7 @@ export {
     Button,
     CharacterCount,
     Checkboxes,
-    GOVUKFrontendComponent as Component,
+    Component,
     ConfigurableComponent,
     ErrorSummary,
     ExitThisPage,

Action run for b1f2bf7

github-actions · 2024-11-18T15:01:19Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index 7b511f0cb..d7910105c 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -130,7 +130,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -181,12 +181,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class ConfigurableComponent extends GOVUKFrontendComponent {
+  class ConfigurableComponent extends Component {
     [configOverride](param) {
       return {};
     }
@@ -340,7 +340,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
@@ -1240,7 +1240,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
@@ -1659,7 +1659,7 @@
    *
    * @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.
@@ -1929,7 +1929,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
@@ -2012,7 +2012,7 @@
    *
    * @preserve
    */
-  class ServiceNavigation extends GOVUKFrontendComponent {
+  class ServiceNavigation extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for header
      */
@@ -2090,9 +2090,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
@@ -2143,7 +2143,7 @@
    *
    * @preserve
    */
-  class Tabs extends GOVUKFrontendComponent {
+  class Tabs extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for tabs
      */
@@ -2567,7 +2567,7 @@
   exports.Button = Button;
   exports.CharacterCount = CharacterCount;
   exports.Checkboxes = Checkboxes;
-  exports.Component = GOVUKFrontendComponent;
+  exports.Component = Component;
   exports.ConfigurableComponent = ConfigurableComponent;
   exports.ErrorSummary = ErrorSummary;
   exports.ExitThisPage = ExitThisPage;
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index 536f4b22d..b228e5331 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -124,7 +124,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -175,12 +175,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -334,7 +334,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
@@ -1234,7 +1234,7 @@ CharacterCount.schema = Object.freeze({
  *
  * @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
@@ -1653,7 +1653,7 @@ ExitThisPage.schema = Object.freeze({
  *
  * @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.
@@ -1923,7 +1923,7 @@ PasswordInput.schema = Object.freeze({
  *
  * @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
@@ -2006,7 +2006,7 @@ Radios.moduleName = 'govuk-radios';
  *
  * @preserve
  */
-class ServiceNavigation extends GOVUKFrontendComponent {
+class ServiceNavigation extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for header
    */
@@ -2084,9 +2084,9 @@ ServiceNavigation.moduleName = 'govuk-service-navigation';
  * 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
@@ -2137,7 +2137,7 @@ SkipLink.moduleName = 'govuk-skip-link';
  *
  * @preserve
  */
-class Tabs extends GOVUKFrontendComponent {
+class Tabs extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for tabs
    */
@@ -2557,5 +2557,5 @@ function createAll(Component, config, createAllOptions) {
  * @property {OnErrorCallback<ComponentClass>} [onError] - callback function if error throw by component on init
  */
 
-export { Accordion, Button, CharacterCount, Checkboxes, GOVUKFrontendComponent as Component, ConfigurableComponent, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
+export { Accordion, Button, CharacterCount, Checkboxes, Component, ConfigurableComponent, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
 //# sourceMappingURL=all.bundle.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/all.mjs b/packages/govuk-frontend/dist/govuk/all.mjs
index 0ebb2d609..12576aa7b 100644
--- a/packages/govuk-frontend/dist/govuk/all.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.mjs
@@ -14,6 +14,6 @@ export { SkipLink } from './components/skip-link/skip-link.mjs';
 export { Tabs } from './components/tabs/tabs.mjs';
 export { createAll, initAll } from './init.mjs';
 export { isSupported } from './common/index.mjs';
-export { GOVUKFrontendComponent as Component } from './govuk-frontend-component.mjs';
+export { Component } from './component.mjs';
 export { ConfigurableComponent } from './common/configuration.mjs';
 //# sourceMappingURL=all.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/common/configuration.mjs b/packages/govuk-frontend/dist/govuk/common/configuration.mjs
index 7bdc8f483..cb4f9b4f5 100644
--- a/packages/govuk-frontend/dist/govuk/common/configuration.mjs
+++ b/packages/govuk-frontend/dist/govuk/common/configuration.mjs
@@ -1,9 +1,9 @@
+import { Component } from '../component.mjs';
 import { ConfigError } from '../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../govuk-frontend-component.mjs';
 import { formatErrorMessage, isObject } from './index.mjs';
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -157,7 +157,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 export { ConfigurableComponent, configOverride, extractConfigByNamespace, mergeConfigs, normaliseDataset, normaliseString, validateConfig };
diff --git a/packages/govuk-frontend/dist/govuk/component.mjs b/packages/govuk-frontend/dist/govuk/component.mjs
new file mode 100644
index 000000000..842456993
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/component.mjs
@@ -0,0 +1,60 @@
+import { isInitialised, isSupported } from './common/index.mjs';
+import { InitError, ElementError, SupportError } from './errors/index.mjs';
+
+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;
+
+export { Component };
+//# sourceMappingURL=component.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js b/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js
index a427fd6a9..939eeb575 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js
@@ -90,7 +90,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -141,12 +141,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class ConfigurableComponent extends GOVUKFrontendComponent {
+  class ConfigurableComponent extends Component {
     [configOverride](param) {
       return {};
     }
@@ -280,7 +280,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs
index f16d67139..18628b29a 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs
@@ -84,7 +84,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -135,12 +135,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -274,7 +274,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
index 6abfdf39a..d4697333e 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
@@ -90,7 +90,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -141,12 +141,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class ConfigurableComponent extends GOVUKFrontendComponent {
+  class ConfigurableComponent extends Component {
     [configOverride](param) {
       return {};
     }
@@ -280,7 +280,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
diff --git a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
index d483bfe71..35193f7fb 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
@@ -84,7 +84,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -135,12 +135,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -274,7 +274,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
index 762e6f0b7..76da19cf0 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
@@ -95,7 +95,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -146,12 +146,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class ConfigurableComponent extends GOVUKFrontendComponent {
+  class ConfigurableComponent extends Component {
     [configOverride](param) {
       return {};
     }
@@ -305,7 +305,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
index 2a598bbed..7171721b2 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
@@ -89,7 +89,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -140,12 +140,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -299,7 +299,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.js b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.js
index 112c1e8cb..2a7008879 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.js
@@ -78,7 +78,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -129,16 +129,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Checkboxes component
    *
    * @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
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.mjs
index 934dab1b1..d5caf2cb2 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.mjs
@@ -72,7 +72,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -123,16 +123,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Checkboxes component
  *
  * @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
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.mjs
index 455c9c70c..9d62377e8 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.mjs
@@ -1,12 +1,12 @@
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Checkboxes component
  *
  * @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
diff --git a/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js b/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js
index 935499364..bae0a5c03 100644
--- a/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js
@@ -120,7 +120,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -171,12 +171,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class ConfigurableComponent extends GOVUKFrontendComponent {
+  class ConfigurableComponent extends Component {
     [configOverride](param) {
       return {};
     }
@@ -310,7 +310,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   /**
diff --git a/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.mjs
index acc262b51..168476be5 100644
--- a/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.mjs
@@ -114,7 +114,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -165,12 +165,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -304,7 +304,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 /**
diff --git a/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js b/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js
index 7268abbf0..75df9001f 100644
--- a/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js
@@ -90,7 +90,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -141,12 +141,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class ConfigurableComponent extends GOVUKFrontendComponent {
+  class ConfigurableComponent extends Component {
     [configOverride](param) {
       return {};
     }
@@ -280,7 +280,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs
index bba2c7eae..f4f79801b 100644
--- a/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs
@@ -84,7 +84,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -135,12 +135,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -274,7 +274,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
index 7140400c0..156af47d1 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
@@ -86,7 +86,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -137,16 +137,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * 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.
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
index ceb5d98de..678739ea4 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
@@ -80,7 +80,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -131,16 +131,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * 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.
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.mjs b/packages/govuk-frontend/dist/govuk/components/header/header.mjs
index 5b25b2f69..88991f7da 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/header.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/header/header.mjs
@@ -1,13 +1,13 @@
 import { getBreakpoint } from '../../common/index.mjs';
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.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.
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js b/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js
index 5d8f0a9fa..aab1443dc 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js
@@ -114,7 +114,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -165,12 +165,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class ConfigurableComponent extends GOVUKFrontendComponent {
+  class ConfigurableComponent extends Component {
     [configOverride](param) {
       return {};
     }
@@ -304,7 +304,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   /**
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs
index a151d2eda..4f5689793 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs
@@ -108,7 +108,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -159,12 +159,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -298,7 +298,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 /**
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js b/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js
index 68ac91f75..e7312b67a 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js
@@ -95,7 +95,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -146,12 +146,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class ConfigurableComponent extends GOVUKFrontendComponent {
+  class ConfigurableComponent extends Component {
     [configOverride](param) {
       return {};
     }
@@ -285,7 +285,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs
index 768df71f6..2a155944f 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs
@@ -89,7 +89,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -140,12 +140,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class ConfigurableComponent extends GOVUKFrontendComponent {
+class ConfigurableComponent extends Component {
   [configOverride](param) {
     return {};
   }
@@ -279,7 +279,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.js b/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.js
index 9b01bd738..18ddc1c83 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.js
@@ -78,7 +78,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -129,16 +129,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Radios component
    *
    * @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
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.mjs
index ca0e06f97..01485ab31 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.mjs
@@ -72,7 +72,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -123,16 +123,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Radios component
  *
  * @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
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/radios.mjs b/packages/govuk-frontend/dist/govuk/components/radios/radios.mjs
index 55f6eb727..28fe54d13 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/radios.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/radios/radios.mjs
@@ -1,12 +1,12 @@
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Radios component
  *
  * @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
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
index 038aec585..823625aec 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
@@ -86,7 +86,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -137,16 +137,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Service Navigation component
    *
    * @preserve
    */
-  class ServiceNavigation extends GOVUKFrontendComponent {
+  class ServiceNavigation extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for header
      */
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
index c11e20be8..531307c53 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
@@ -80,7 +80,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -131,16 +131,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Service Navigation component
  *
  * @preserve
  */
-class ServiceNavigation extends GOVUKFrontendComponent {
+class ServiceNavigation extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for header
    */
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
index 37033c8e4..675e72b8d 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
@@ -1,13 +1,13 @@
 import { getBreakpoint } from '../../common/index.mjs';
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Service Navigation component
  *
  * @preserve
  */
-class ServiceNavigation extends GOVUKFrontendComponent {
+class ServiceNavigation extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for header
    */
diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js
index 25755107f..eb2df2ba1 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js
@@ -108,7 +108,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -159,17 +159,17 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * 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
diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs
index 01b46e5f1..9afc51baf 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs
@@ -102,7 +102,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -153,17 +153,17 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * 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
diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs
index fa814a73f..a158d684d 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs
@@ -1,14 +1,14 @@
 import { getFragmentFromUrl, setFocus } from '../../common/index.mjs';
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * 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
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
index 73d9c03cb..63e01b466 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
@@ -92,7 +92,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -143,16 +143,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Tabs component
    *
    * @preserve
    */
-  class Tabs extends GOVUKFrontendComponent {
+  class Tabs extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for tabs
      */
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
index 8ea827012..add1bec0a 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
@@ -86,7 +86,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -137,16 +137,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Tabs component
  *
  * @preserve
  */
-class Tabs extends GOVUKFrontendComponent {
+class Tabs extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for tabs
    */
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.mjs
index f42ab670a..2ab54a246 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.mjs
@@ -1,13 +1,13 @@
 import { getBreakpoint, getFragmentFromUrl } from '../../common/index.mjs';
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Tabs component
  *
  * @preserve
  */
-class Tabs extends GOVUKFrontendComponent {
+class Tabs extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for tabs
    */
diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs b/packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs
index 2c23fcc20..e6a4fae52 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs
@@ -1,60 +1,2 @@
-import { isInitialised, isSupported } from './common/index.mjs';
-import { InitError, ElementError, SupportError } from './errors/index.mjs';
-
-class GOVUKFrontendComponent {
-  /**
-   * 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 GOVUKFrontendComponent & ChildClass} ChildClassConstructor
- */
-GOVUKFrontendComponent.elementType = HTMLElement;
-
-export { GOVUKFrontendComponent };
+export { Component as GOVUKFrontendComponent } from './component.mjs';
 //# sourceMappingURL=govuk-frontend-component.mjs.map

Action run for b1f2bf7

romaricpascal

Thanks for reworking the history, looks good to go! 🙌🏻 ⛵

- `GOVUKFrontendComponent` is now `Component`. Renamed `govuk-frontend-component.mjs` to `component.mjs` and the associated test. Changed references to `GOVUKFrontendComponent` to `Component` in the test. - Created new `govuk-frontend-component.mjs` that imports `Component` and exports it as `GOVUKFrontendComponent` to avoid a breaking change.

Components that extended `GOVUKFrontendComponent` now extend `Component` from `component.mjs`.

Because they're not imported by `all.mjs` deprecated JavaScript files were not included in the package (in which they need to remain until the next breaking release). This adds a module to store the list of deprecated JavaScript files and helper functions that are then used: - in the Gulp configuration, to add a new task building each deprecated file individually - in the Rollup configuration, to prevent the bundled output of the deprecated files as all we want is for them to be in the package as a module Co-authored-by: Patrick Cartlidge <[email protected]> Co-authored-by: Brett Kyle <[email protected]>

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 18, 2024 14:59 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 14:09 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from 6f9861d to de5e37a Compare November 19, 2024 14:25

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 14:25 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from de5e37a to d5f9b5d Compare November 19, 2024 14:34

govuk-design-system-ci had a problem deploying to govuk-frontend-pr-5515 November 19, 2024 14:34 Failure

patrickpatrickpatrick force-pushed the rename-component branch from d5f9b5d to 2c540fa Compare November 19, 2024 14:35

govuk-design-system-ci had a problem deploying to govuk-frontend-pr-5515 November 19, 2024 14:36 Failure

patrickpatrickpatrick force-pushed the rename-component branch from 2c540fa to 4d6727b Compare November 19, 2024 14:36

govuk-design-system-ci had a problem deploying to govuk-frontend-pr-5515 November 19, 2024 14:36 Failure

patrickpatrickpatrick force-pushed the rename-component branch from 4d6727b to 675b7fb Compare November 19, 2024 14:44

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 14:45 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from 675b7fb to 40fef81 Compare November 19, 2024 15:06

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 15:07 Inactive

patrickpatrickpatrick changed the title ~~move the component~~ Remove GOVUKFrontend prefix from GOVUKFrontendComponent and GOVUKFrontendComponentConfigurable Nov 19, 2024

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 16:11 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from 720689c to 8b2650b Compare November 20, 2024 10:05

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 20, 2024 10:05 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from 8b2650b to 03d0100 Compare November 20, 2024 10:20

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 20, 2024 10:21 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 20, 2024 13:45 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 21, 2024 12:48 Inactive

romaricpascal force-pushed the rename-component branch from 59adefb to 5b8a20c Compare November 21, 2024 13:06

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 21, 2024 13:07 Inactive

romaricpascal force-pushed the rename-component branch from 5b8a20c to 9f13658 Compare November 21, 2024 13:23

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 21, 2024 13:23 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from 9f13658 to bcce2be Compare November 22, 2024 11:22

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 22, 2024 11:23 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from bcce2be to 225c1ad Compare November 22, 2024 11:42

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 22, 2024 11:42 Inactive

patrickpatrickpatrick marked this pull request as ready for review November 22, 2024 11:53

patrickpatrickpatrick force-pushed the rename-component branch from 225c1ad to b3125dc Compare November 22, 2024 12:14

patrickpatrickpatrick changed the title ~~Remove GOVUKFrontend prefix from GOVUKFrontendComponent and GOVUKFrontendComponentConfigurable~~ Remove GOVUKFrontend prefix from GOVUKFrontendComponent Nov 22, 2024

govuk-design-system-ci had a problem deploying to govuk-frontend-pr-5515 November 22, 2024 12:14 Failure

patrickpatrickpatrick force-pushed the rename-component branch from b3125dc to fced283 Compare November 22, 2024 12:21

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 22, 2024 12:21 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from fced283 to 95eb0d4 Compare November 22, 2024 12:22

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 22, 2024 12:23 Inactive

romaricpascal approved these changes Nov 22, 2024

View reviewed changes

patrickpatrickpatrick and others added 4 commits January 7, 2025 17:16

Update components to import Component

fb9cacb

Components that extended `GOVUKFrontendComponent` now extend `Component` from `component.mjs`.

Update ConfigurableComponent to use Component

27bba0f

romaricpascal force-pushed the rename-component branch from 95eb0d4 to b1f2bf7 Compare January 7, 2025 17:42

govuk-design-system-ci deployed to govuk-frontend-pr-5515 January 7, 2025 17:42 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` #5515

Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` #5515

patrickpatrickpatrick commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

romaricpascal left a comment

Remove GOVUKFrontend prefix from GOVUKFrontendComponent #5515

Are you sure you want to change the base?

Remove GOVUKFrontend prefix from GOVUKFrontendComponent #5515

Conversation

patrickpatrickpatrick commented Nov 18, 2024 • edited Loading

What

Why

github-actions bot commented Nov 18, 2024 • edited Loading

📋 Stats

File sizes

Modules

github-actions bot commented Nov 18, 2024 • edited Loading

JavaScript changes to npm package

github-actions bot commented Nov 18, 2024 • edited Loading

Other changes to npm package

romaricpascal left a comment

Choose a reason for hiding this comment

Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` #5515

Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` #5515

patrickpatrickpatrick commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading