alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.17k stars 320 forks source link

Service Header Fix Demo #5023

Closed patrickpatrickpatrick closed 3 months ago

github-actions[bot] commented 4 months ago

:clipboard: Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 119.19 KiB
dist/govuk-frontend-development.min.js 44.1 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 90.97 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 85.44 KiB
packages/govuk-frontend/dist/govuk/all.mjs 1.04 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 119.18 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 44.09 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs 4.96 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 81.04 KiB 41.96 KiB
accordion.mjs 22.71 KiB 12.85 KiB
button.mjs 5.98 KiB 2.69 KiB
character-count.mjs 22.4 KiB 9.92 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 7.89 KiB 3.46 KiB
exit-this-page.mjs 17.1 KiB 9.26 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 6.26 KiB 2.62 KiB
password-input.mjs 15.15 KiB 7.25 KiB
radios.mjs 4.83 KiB 2.38 KiB
service-header.mjs 4.42 KiB 2.66 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.13 KiB 6.11 KiB

View stats and visualisations on the review app


Action run for a6a47607d0556aee4a02dd08d37560d676f2aa03

github-actions[bot] commented 4 months ago

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 9192c3082..f19e1f89e 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -2,43 +2,43 @@ const version = "development";

 function normaliseString(e, t) {
     const n = e ? e.trim() : "";
-    let s, i = null == t ? void 0 : t.type;
-    switch (i || (["true", "false"].includes(n) && (i = "boolean"), n.length > 0 && isFinite(Number(n)) && (i = "number")), i) {
+    let i, s = null == t ? void 0 : t.type;
+    switch (s || (["true", "false"].includes(n) && (s = "boolean"), n.length > 0 && isFinite(Number(n)) && (s = "number")), s) {
         case "boolean":
-            s = "true" === n;
+            i = "true" === n;
             break;
         case "number":
-            s = Number(n);
+            i = Number(n);
             break;
         default:
-            s = e
+            i = e
     }
-    return s
+    return i
 }

 function mergeConfigs(...e) {
     const t = {};
     for (const n of e)
         for (const e of Object.keys(n)) {
-            const s = t[e],
-                i = n[e];
-            isObject(s) && isObject(i) ? t[e] = mergeConfigs(s, i) : t[e] = i
+            const i = t[e],
+                s = n[e];
+            isObject(i) && isObject(s) ? t[e] = mergeConfigs(i, s) : t[e] = s
         }
     return t
 }

 function extractConfigByNamespace(e, t, n) {
-    const s = e.schema.properties[n];
-    if ("object" !== (null == s ? void 0 : s.type)) return;
-    const i = {
+    const i = e.schema.properties[n];
+    if ("object" !== (null == i ? void 0 : i.type)) return;
+    const s = {
         [n]: {}
     };
     for (const [o, r] of Object.entries(t)) {
-        let e = i;
+        let e = s;
         const t = o.split(".");
-        for (const [s, i] of t.entries()) "object" == typeof e && (s < t.length - 1 ? (isObject(e[i]) || (e[i] = {}), e = e[i]) : o !== n && (e[i] = normaliseString(r)))
+        for (const [i, s] of t.entries()) "object" == typeof e && (i < t.length - 1 ? (isObject(e[s]) || (e[s] = {}), e = e[s]) : o !== n && (e[s] = normaliseString(r)))
     }
-    return i[n]
+    return s[n]
 }

 function getFragmentFromUrl(e) {
@@ -55,13 +55,13 @@ function getBreakpoint(e) {

 function setFocus(e, t = {}) {
     var n;
-    const s = e.getAttribute("tabindex");
+    const i = e.getAttribute("tabindex");

     function onBlur() {
         var n;
-        null == (n = t.onBlur) || n.call(e), s || e.removeAttribute("tabindex")
+        null == (n = t.onBlur) || n.call(e), i || e.removeAttribute("tabindex")
     }
-    s || e.setAttribute("tabindex", "-1"), e.addEventListener("focus", (function() {
+    i || e.setAttribute("tabindex", "-1"), e.addEventListener("focus", (function() {
         e.addEventListener("blur", onBlur, {
             once: !0
         })
@@ -82,7 +82,7 @@ function isObject(e) {

 function normaliseDataset(e, t) {
     const n = {};
-    for (const [s, i] of Object.entries(e.schema.properties)) s in t && (n[s] = normaliseString(t[s], i)), "object" === (null == i ? void 0 : i.type) && (n[s] = extractConfigByNamespace(e, t, s));
+    for (const [i, s] of Object.entries(e.schema.properties)) i in t && (n[i] = normaliseString(t[i], s)), "object" === (null == s ? void 0 : s.type) && (n[i] = extractConfigByNamespace(e, t, i));
     return n
 }
 class GOVUKFrontendError extends Error {
@@ -107,11 +107,11 @@ class ElementError extends GOVUKFrontendError {
         if ("object" == typeof e) {
             const {
                 componentName: n,
-                identifier: s,
-                element: i,
+                identifier: i,
+                element: s,
                 expectedType: o
             } = e;
-            t = `${n}: ${s}`, t += i ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found"
+            t = `${n}: ${i}`, t += s ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found"
         }
         super(t), this.name = "ElementError"
     }
@@ -133,8 +133,8 @@ class I18n {
         if (!e) throw new Error("i18n: lookup key missing");
         let n = this.translations[e];
         if ("number" == typeof(null == t ? void 0 : t.count) && "object" == typeof n) {
-            const s = n[this.getPluralSuffix(e, t.count)];
-            s && (n = s)
+            const i = n[this.getPluralSuffix(e, t.count)];
+            i && (n = i)
         }
         if ("string" == typeof n) {
             if (n.match(/%{(.\S+)}/)) {
@@ -147,9 +147,9 @@ class I18n {
     }
     replacePlaceholders(e, t) {
         const n = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : void 0;
-        return e.replace(/%{(.\S+)}/g, (function(e, s) {
-            if (Object.prototype.hasOwnProperty.call(t, s)) {
-                const e = t[s];
+        return e.replace(/%{(.\S+)}/g, (function(e, i) {
+            if (Object.prototype.hasOwnProperty.call(t, i)) {
+                const e = t[i];
                 return !1 === e || "number" != typeof e && "string" != typeof e ? "" : "number" == typeof e ? n ? n.format(e) : `${e}` : e
             }
             throw new Error(`i18n: no data found to replace ${e} placeholder in string`)
@@ -161,10 +161,10 @@ class I18n {
     getPluralSuffix(e, t) {
         if (t = Number(t), !isFinite(t)) return "other";
         const n = this.translations[e],
-            s = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(t) : this.selectPluralFormUsingFallbackRules(t);
+            i = this.hasIntlPluralRulesSupport() ? new Intl.PluralRules(this.locale).select(t) : this.selectPluralFormUsingFallbackRules(t);
         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"
+            if (i in n) return i;
+            if ("other" in n) return console.warn(`i18n: Missing plural form ".${i}" for "${this.locale}" locale. Falling back to ".other".`), "other"
         }
         throw new Error(`i18n: Plural form ".other" is required for "${this.locale}" locale`)
     }
@@ -214,14 +214,14 @@ class Accordion extends GOVUKFrontendComponent {
             identifier: "Root element (`$module`)"
         });
         this.$module = t, this.config = mergeConfigs(Accordion.defaults, n, normaliseDataset(Accordion, t.dataset)), this.i18n = new I18n(this.config.i18n);
-        const s = this.$module.querySelectorAll(`.${this.sectionClass}`);
-        if (!s.length) throw new ElementError({
+        const i = this.$module.querySelectorAll(`.${this.sectionClass}`);
+        if (!i.length) throw new ElementError({
             componentName: "Accordion",
             identifier: `Sections (\`<div class="${this.sectionClass}">\`)`
         });
-        this.$sections = s, this.browserSupportsSessionStorage = e.checkForSessionStorage(), this.initControls(), this.initSectionHeaders();
-        const i = this.checkIfAllSectionsOpen();
-        this.updateShowAllButton(i)
+        this.$sections = i, this.browserSupportsSessionStorage = e.checkForSessionStorage(), this.initControls(), this.initSectionHeaders();
+        const s = this.checkIfAllSectionsOpen();
+        this.updateShowAllButton(s)
     }
     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);
@@ -240,9 +240,9 @@ class Accordion extends GOVUKFrontendComponent {
     }
     constructHeaderMarkup(e, t) {
         const n = e.querySelector(`.${this.sectionButtonClass}`),
-            s = e.querySelector(`.${this.sectionHeadingClass}`),
-            i = e.querySelector(`.${this.sectionSummaryClass}`);
-        if (!s) throw new ElementError({
+            i = e.querySelector(`.${this.sectionHeadingClass}`),
+            s = e.querySelector(`.${this.sectionSummaryClass}`);
+        if (!i) throw new ElementError({
             componentName: "Accordion",
             identifier: `Section heading (\`.${this.sectionHeadingClass}\`)`
         });
@@ -263,14 +263,14 @@ class Accordion extends GOVUKFrontendComponent {
         c.classList.add(this.sectionShowHideToggleFocusClass), l.appendChild(c);
         const h = document.createElement("span"),
             u = document.createElement("span");
-        if (u.classList.add(this.upChevronIconClass), c.appendChild(u), h.classList.add(this.sectionShowHideTextClass), c.appendChild(h), o.appendChild(r), o.appendChild(this.getButtonPunctuationEl()), null != i && i.parentNode) {
+        if (u.classList.add(this.upChevronIconClass), c.appendChild(u), h.classList.add(this.sectionShowHideTextClass), c.appendChild(h), o.appendChild(r), o.appendChild(this.getButtonPunctuationEl()), null != s && s.parentNode) {
             const e = document.createElement("span"),
                 t = document.createElement("span");
             t.classList.add(this.sectionSummaryFocusClass), e.appendChild(t);
-            for (const n of Array.from(i.attributes)) e.setAttribute(n.nodeName, `${n.nodeValue}`);
-            t.innerHTML = i.innerHTML, i.parentNode.replaceChild(e, i), o.appendChild(e), o.appendChild(this.getButtonPunctuationEl())
+            for (const n of Array.from(s.attributes)) e.setAttribute(n.nodeName, `${n.nodeValue}`);
+            t.innerHTML = s.innerHTML, s.parentNode.replaceChild(e, s), o.appendChild(e), o.appendChild(this.getButtonPunctuationEl())
         }
-        o.appendChild(l), s.removeChild(n), s.appendChild(o)
+        o.appendChild(l), i.removeChild(n), i.appendChild(o)
     }
     onBeforeMatch(e) {
         const t = e.target;
@@ -290,23 +290,23 @@ class Accordion extends GOVUKFrontendComponent {
     }
     setExpanded(e, t) {
         const n = t.querySelector(`.${this.upChevronIconClass}`),
-            s = t.querySelector(`.${this.sectionShowHideTextClass}`),
-            i = t.querySelector(`.${this.sectionButtonClass}`),
+            i = t.querySelector(`.${this.sectionShowHideTextClass}`),
+            s = t.querySelector(`.${this.sectionButtonClass}`),
             o = t.querySelector(`.${this.sectionContentClass}`);
         if (!o) throw new ElementError({
             componentName: "Accordion",
             identifier: `Section content (\`<div class="${this.sectionContentClass}">\`)`
         });
-        if (!n || !s || !i) return;
+        if (!n || !i || !s) return;
         const r = e ? this.i18n.t("hideSection") : this.i18n.t("showSection");
-        s.textContent = r, i.setAttribute("aria-expanded", `${e}`);
+        i.textContent = r, s.setAttribute("aria-expanded", `${e}`);
         const a = [],
             l = t.querySelector(`.${this.sectionHeadingTextClass}`);
         l && a.push(`${l.textContent}`.trim());
         const c = t.querySelector(`.${this.sectionSummaryClass}`);
         c && a.push(`${c.textContent}`.trim());
         const h = e ? this.i18n.t("hideSectionAriaLabel") : this.i18n.t("showSectionAriaLabel");
-        a.push(h), i.setAttribute("aria-label", a.join(" , ")), e ? (o.removeAttribute("hidden"), t.classList.add(this.sectionExpandedClass), n.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), t.classList.remove(this.sectionExpandedClass), n.classList.add(this.downChevronIconClass));
+        a.push(h), s.setAttribute("aria-label", a.join(" , ")), e ? (o.removeAttribute("hidden"), t.classList.add(this.sectionExpandedClass), n.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), t.classList.remove(this.sectionExpandedClass), n.classList.add(this.downChevronIconClass));
         const u = this.checkIfAllSectionsOpen();
         this.updateShowAllButton(u)
     }
@@ -334,8 +334,8 @@ class Accordion extends GOVUKFrontendComponent {
             const t = e.querySelector(`.${this.sectionButtonClass}`);
             if (t) {
                 const n = t.getAttribute("aria-controls"),
-                    s = n ? window.sessionStorage.getItem(n) : null;
-                null !== s && this.setExpanded("true" === s, e)
+                    i = n ? window.sessionStorage.getItem(n) : null;
+                null !== i && this.setExpanded("true" === i, e)
             }
         }
     }
@@ -410,16 +410,16 @@ Button.moduleName = "govuk-button", Button.defaults = Object.freeze({
 });
 class CharacterCount extends GOVUKFrontendComponent {
     constructor(e, t = {}) {
-        var n, s;
+        var n, i;
         if (super(), this.$module = void 0, this.$textarea = void 0, this.$visibleCountMessage = void 0, this.$screenReaderCountMessage = void 0, this.lastInputTimestamp = null, this.lastInputValue = "", this.valueChecker = null, this.config = void 0, this.i18n = void 0, this.maxLength = void 0, !(e instanceof HTMLElement)) throw new ElementError({
             componentName: "Character count",
             element: e,
             identifier: "Root element (`$module`)"
         });
-        const i = e.querySelector(".govuk-js-character-count");
-        if (!(i instanceof HTMLTextAreaElement || i instanceof HTMLInputElement)) throw new ElementError({
+        const s = e.querySelector(".govuk-js-character-count");
+        if (!(s instanceof HTMLTextAreaElement || s instanceof HTMLInputElement)) throw new ElementError({
             componentName: "Character count",
-            element: i,
+            element: s,
             expectedType: "HTMLTextareaElement or HTMLInputElement",
             identifier: "Form field (`.govuk-js-character-count`)"
         });
@@ -431,15 +431,15 @@ class CharacterCount extends GOVUKFrontendComponent {
         }), this.config = mergeConfigs(CharacterCount.defaults, t, r, o);
         const a = function(e, t) {
             const n = [];
-            for (const [s, i] of Object.entries(e)) {
+            for (const [i, s] of Object.entries(e)) {
                 const e = [];
-                if (Array.isArray(i)) {
+                if (Array.isArray(s)) {
                     for (const {
                             required: n,
-                            errorMessage: s
+                            errorMessage: i
                         }
-                        of i) n.every((e => !!t[e])) || e.push(s);
-                    "anyOf" !== s || i.length - e.length >= 1 || n.push(...e)
+                        of s) n.every((e => !!t[e])) || e.push(i);
+                    "anyOf" !== i || s.length - e.length >= 1 || n.push(...e)
                 }
             }
             return n
@@ -447,7 +447,7 @@ class CharacterCount extends GOVUKFrontendComponent {
         if (a[0]) throw new ConfigError(`Character count: ${a[0]}`);
         this.i18n = new I18n(this.config.i18n, {
             locale: closestAttributeValue(e, "lang")
-        }), this.maxLength = null != (n = null != (s = this.config.maxwords) ? s : this.config.maxlength) ? n : 1 / 0, this.$module = e, this.$textarea = i;
+        }), this.maxLength = null != (n = null != (i = this.config.maxwords) ? i : this.config.maxlength) ? n : 1 / 0, this.$module = e, this.$textarea = s;
         const l = `${this.$textarea.id}-info`,
             c = document.getElementById(l);
         if (!c) throw new ElementError({
@@ -635,8 +635,8 @@ class ErrorSummary extends GOVUKFrontendComponent {
         if (!t) return !1;
         const n = document.getElementById(t);
         if (!n) return !1;
-        const s = this.getAssociatedLegendOrLabel(n);
-        return !!s && (s.scrollIntoView(), n.focus({
+        const i = this.getAssociatedLegendOrLabel(n);
+        return !!i && (i.scrollIntoView(), n.focus({
             preventScroll: !0
         }), !0)
     }
@@ -648,10 +648,10 @@ class ErrorSummary extends GOVUKFrontendComponent {
             if (t.length) {
                 const n = t[0];
                 if (e instanceof HTMLInputElement && ("checkbox" === e.type || "radio" === e.type)) return n;
-                const s = n.getBoundingClientRect().top,
-                    i = e.getBoundingClientRect();
-                if (i.height && window.innerHeight) {
-                    if (i.top + i.height - s < window.innerHeight / 2) return n
+                const i = n.getBoundingClientRect().top,
+                    s = e.getBoundingClientRect();
+                if (s.height && window.innerHeight) {
+                    if (s.top + s.height - i < window.innerHeight / 2) return n
                 }
             }
         }
@@ -682,8 +682,8 @@ class ExitThisPage extends GOVUKFrontendComponent {
             identifier: "Button (`.govuk-exit-this-page__button`)"
         });
         this.config = mergeConfigs(ExitThisPage.defaults, t, normaliseDataset(ExitThisPage, e.dataset)), this.i18n = new I18n(this.config.i18n), this.$module = e, 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))
+        const i = document.querySelector(".govuk-js-exit-this-page-skiplink");
+        i instanceof HTMLAnchorElement && (this.$skiplinkButton = i), 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.$module.appendChild(this.$updateSpan)
@@ -759,13 +759,13 @@ class Header extends GOVUKFrontendComponent {
             componentName: "Header",
             identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
         });
-        const s = document.getElementById(n);
-        if (!s) throw new ElementError({
+        const i = document.getElementById(n);
+        if (!i) throw new ElementError({
             componentName: "Header",
-            element: s,
+            element: i,
             identifier: `Navigation (\`<ul id="${n}">\`)`
         });
-        this.$menu = s, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+        this.$menu = i, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
     }
     setupResponsiveChecks() {
         const e = getBreakpoint("desktop");
@@ -817,19 +817,19 @@ class PasswordInput extends GOVUKFrontendComponent {
             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 = e.querySelector(".govuk-js-password-input-toggle");
-        if (!(s instanceof HTMLButtonElement)) throw new ElementError({
+        const i = e.querySelector(".govuk-js-password-input-toggle");
+        if (!(i instanceof HTMLButtonElement)) throw new ElementError({
             componentName: "Password input",
-            element: s,
+            element: i,
             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.$module = e, this.$input = n, this.$showHideButton = s, this.config = mergeConfigs(PasswordInput.defaults, t, normaliseDataset(PasswordInput, e.dataset)), this.i18n = new I18n(this.config.i18n, {
+        if ("button" !== i.type) throw new ElementError("Password input: Button (`.govuk-js-password-input-toggle`) must be of type `button`.");
+        this.$module = e, this.$input = n, this.$showHideButton = i, this.config = mergeConfigs(PasswordInput.defaults, t, normaliseDataset(PasswordInput, e.dataset)), this.i18n = new I18n(this.config.i18n, {
             locale: closestAttributeValue(e, "lang")
         }), this.$showHideButton.removeAttribute("hidden");
-        const i = document.createElement("div");
-        i.className = "govuk-password-input__sr-status govuk-visually-hidden", i.setAttribute("aria-live", "polite"), this.$screenReaderStatusMessage = i, this.$input.insertAdjacentElement("afterend", i), this.$showHideButton.addEventListener("click", this.toggle.bind(this)), this.$input.form && this.$input.form.addEventListener("submit", (() => this.hide())), window.addEventListener("pageshow", (e => {
+        const s = document.createElement("div");
+        s.className = "govuk-password-input__sr-status govuk-visually-hidden", s.setAttribute("aria-live", "polite"), this.$screenReaderStatusMessage = s, this.$input.insertAdjacentElement("afterend", s), this.$showHideButton.addEventListener("click", this.toggle.bind(this)), this.$input.form && this.$input.form.addEventListener("submit", (() => this.hide())), window.addEventListener("pageshow", (e => {
             e.persisted && "password" !== this.$input.type && this.hide()
         })), this.hide()
     }
@@ -847,8 +847,8 @@ class PasswordInput extends GOVUKFrontendComponent {
         this.$input.setAttribute("type", e);
         const t = "password" === e,
             n = t ? "show" : "hide",
-            s = t ? "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`)
+            i = t ? "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(`${i}Announcement`)
     }
 }
 PasswordInput.moduleName = "govuk-password-input", PasswordInput.defaults = Object.freeze({
@@ -906,15 +906,54 @@ class Radios extends GOVUKFrontendComponent {
         const t = e.target;
         if (!(t instanceof HTMLInputElement) || "radio" !== t.type) return;
         const n = document.querySelectorAll('input[type="radio"][aria-controls]'),
-            s = t.form,
-            i = t.name;
+            i = t.form,
+            s = t.name;
         n.forEach((e => {
-            const t = e.form === s;
-            e.name === i && t && this.syncConditionalRevealWithInputState(e)
+            const t = e.form === i;
+            e.name === s && t && this.syncConditionalRevealWithInputState(e)
         }))
     }
 }
 Radios.moduleName = "govuk-radios";
+class ServiceHeader extends GOVUKFrontendComponent {
+    constructor(e) {
+        if (super(), this.$module = void 0, this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null, !e) throw new ElementError({
+            componentName: "Service Header",
+            element: e,
+            identifier: "Root element (`$module`)"
+        });
+        this.$module = e;
+        const t = e.querySelector(".govuk-js-service-header-toggle");
+        if (!t) return this;
+        const n = t.getAttribute("aria-controls");
+        if (!n) throw new ElementError({
+            componentName: "Service Header",
+            identifier: 'Navigation button (`<button class="govuk-js-service-header-toggle">`) attribute (`aria-controls`)'
+        });
+        const i = document.getElementById(n);
+        if (!i) throw new ElementError({
+            componentName: "Service Header",
+            element: i,
+            identifier: `Navigation (\`<ul id="${n}">\`)`
+        });
+        this.$menu = i, this.$menuButton = t, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+    }
+    setupResponsiveChecks() {
+        const e = getBreakpoint("tablet");
+        if (!e.value) throw new ElementError({
+            componentName: "Service Header",
+            identifier: `CSS custom property (\`${e.property}\`) on pseudo-class \`:root\``
+        });
+        this.mql = window.matchMedia(`(min-width: ${e.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
+    }
+    checkMode() {
+        this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), this.$menuButton.setAttribute("hidden", "")) : (this.$menuButton.removeAttribute("hidden"), this.$menuButton.setAttribute("aria-expanded", this.menuIsOpen.toString()), this.menuIsOpen ? this.$menu.removeAttribute("hidden") : this.$menu.setAttribute("hidden", "")))
+    }
+    handleMenuButtonClick() {
+        this.menuIsOpen = !this.menuIsOpen, this.checkMode()
+    }
+}
+ServiceHeader.moduleName = "govuk-service-header";
 class SkipLink extends GOVUKFrontendComponent {
     constructor(e) {
         var t;
@@ -926,16 +965,16 @@ class SkipLink extends GOVUKFrontendComponent {
         });
         this.$module = e;
         const n = this.$module.hash,
-            s = null != (t = this.$module.getAttribute("href")) ? t : "";
-        let i;
+            i = null != (t = this.$module.getAttribute("href")) ? t : "";
+        let s;
         try {
-            i = new window.URL(this.$module.href)
+            s = new window.URL(this.$module.href)
         } catch (a) {
-            throw new ElementError(`Skip link: Target link (\`href="${s}"\`) is invalid`)
+            throw new ElementError(`Skip link: Target link (\`href="${i}"\`) is invalid`)
         }
-        if (i.origin !== window.location.origin || i.pathname !== window.location.pathname) return;
+        if (s.origin !== window.location.origin || s.pathname !== window.location.pathname) return;
         const o = getFragmentFromUrl(n);
-        if (!o) throw new ElementError(`Skip link: Target link (\`href="${s}"\`) has no hash fragment`);
+        if (!o) throw new ElementError(`Skip link: Target link (\`href="${i}"\`) has no hash fragment`);
         const r = document.getElementById(o);
         if (!r) throw new ElementError({
             componentName: "Skip link",
@@ -967,16 +1006,16 @@ class Tabs extends GOVUKFrontendComponent {
         });
         this.$module = e, this.$tabs = t, this.boundTabClick = this.onTabClick.bind(this), this.boundTabKeydown = this.onTabKeydown.bind(this), this.boundOnHashChange = this.onHashChange.bind(this);
         const n = this.$module.querySelector(".govuk-tabs__list"),
-            s = this.$module.querySelectorAll("li.govuk-tabs__list-item");
+            i = this.$module.querySelectorAll("li.govuk-tabs__list-item");
         if (!n) throw new ElementError({
             componentName: "Tabs",
             identifier: 'List (`<ul class="govuk-tabs__list">`)'
         });
-        if (!s.length) throw new ElementError({
+        if (!i.length) throw new ElementError({
             componentName: "Tabs",
             identifier: 'List items (`<li class="govuk-tabs__list-item">`)'
         });
-        this.$tabList = n, this.$tabListItems = s, this.setupResponsiveChecks()
+        this.$tabList = n, this.$tabListItems = i, this.setupResponsiveChecks()
     }
     setupResponsiveChecks() {
         const e = getBreakpoint("tablet");
@@ -1115,22 +1154,23 @@ function initAll(e) {
             [NotificationBanner, e.notificationBanner],
             [PasswordInput, e.passwordInput],
             [Radios],
+            [ServiceHeader],
             [SkipLink],
             [Tabs]
         ],
-        s = null != (t = e.scope) ? t : document;
+        i = null != (t = e.scope) ? t : document;
     n.forEach((([e, t]) => {
-        createAll(e, t, s)
+        createAll(e, t, i)
     }))
 }

 function createAll(e, t, n = document) {
-    const s = n.querySelectorAll(`[data-module="${e.moduleName}"]`);
-    return Array.from(s).map((n => {
+    const i = n.querySelectorAll(`[data-module="${e.moduleName}"]`);
+    return Array.from(i).map((n => {
         try {
             return "defaults" in e && void 0 !== t ? new e(n, t) : new e(n)
-        } catch (s) {
-            return console.log(s), null
+        } catch (i) {
+            return console.log(i), null
         }
     })).filter(Boolean)
 }
@@ -1146,6 +1186,7 @@ export {
     NotificationBanner,
     PasswordInput,
     Radios,
+    ServiceHeader,
     SkipLink,
     Tabs,
     createAll,

Action run for a6a47607d0556aee4a02dd08d37560d676f2aa03

github-actions[bot] commented 4 months ago

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index de0a3a8db..82925a934 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3631,7 +3631,7 @@ only screen and (min-resolution:2dppx) {
     font-weight: 400;
     font-size: .875rem;
     line-height: 1;
-    border-bottom: 10px solid #fff;
+    border-bottom: 10px solid #1d70b8;
     color: #fff;
     background: #0b0c0c
 }
@@ -3657,8 +3657,7 @@ only screen and (min-resolution:2dppx) {
 }

 .govuk-header__container--full-width {
-    padding: 0 15px;
-    border-color: #1d70b8
+    padding: 0 15px
 }

 .govuk-header__container--full-width .govuk-header__menu-button {
@@ -3667,9 +3666,7 @@ only screen and (min-resolution:2dppx) {

 .govuk-header__container {
     position: relative;
-    margin-bottom: -10px;
-    padding-top: 10px;
-    border-bottom: 10px solid #1d70b8
+    padding-top: 10px
 }

 .govuk-header__container:after {
@@ -4784,7 +4781,8 @@ only screen and (min-resolution:2dppx) {
     font-size: .875rem;
     line-height: 1.1428571429;
     color: #0b0c0c;
-    display: table;
+    display: flex;
+    align-items: baseline;
     margin: 0
 }

@@ -4840,6 +4838,47 @@ only screen and (min-resolution:2dppx) {
     vertical-align: middle
 }

+.govuk-template__header .govuk-phase-banner__content {
+    max-width: 960px;
+    margin-right: 15px;
+    margin-left: 15px
+}
+
+@supports (margin:max(calc(0px))) {
+    .govuk-template__header .govuk-phase-banner__content {
+        margin-right: max(15px, calc(15px + env(safe-area-inset-right)));
+        margin-left: max(15px, calc(15px + env(safe-area-inset-left)))
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-template__header .govuk-phase-banner__content {
+        margin-right: 30px;
+        margin-left: 30px
+    }
+
+    @supports (margin:max(calc(0px))) {
+        .govuk-template__header .govuk-phase-banner__content {
+            margin-right: max(30px, calc(15px + env(safe-area-inset-right)));
+            margin-left: max(30px, calc(15px + env(safe-area-inset-left)))
+        }
+    }
+}
+
+@media (min-width:1020px) {
+    .govuk-template__header .govuk-phase-banner__content {
+        margin-right: auto;
+        margin-left: auto
+    }
+
+    @supports (margin:max(calc(0px))) {
+        .govuk-template__header .govuk-phase-banner__content {
+            margin-right: auto;
+            margin-left: auto
+        }
+    }
+}
+
 .govuk-radios__item {
     display: flex;
     flex-wrap: wrap;
@@ -5131,6 +5170,311 @@ screen and (forced-colors:active) {
     border-color: #0b0c0c
 }

+.govuk-service-header {
+    border-bottom: 1px solid #b1b4b6;
+    background-color: #f3f2f1
+}
+
+.govuk-service-header__container {
+    display: flex;
+    padding-top: 5px
+}
+
+@media (max-width:40.0525em) {
+    .govuk-service-header__container {
+        flex-direction: column;
+        align-items: start;
+        margin-bottom: 5px
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__container {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between
+    }
+}
+
+.govuk-service-header__link {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: underline;
+    text-decoration-thickness: max(1px, .0625rem);
+    text-underline-offset: .1578em
+}
+
+@media print {
+    .govuk-service-header__link {
+        font-family: sans-serif
+    }
+}
+
+.govuk-service-header__link:hover {
+    text-decoration-thickness: max(3px, .1875rem, .12em);
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+    -webkit-text-decoration-skip: none;
+    text-decoration-skip: none
+}
+
+.govuk-service-header__link:focus {
+    outline: 3px solid transparent;
+    background-color: #fd0;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    text-decoration: none;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone
+}
+
+.govuk-service-header__link:visited {
+    color: #4c2c92
+}
+
+.govuk-service-header__link:link,
+.govuk-service-header__link:visited {
+    color: #1d70b8
+}
+
+.govuk-service-header__link:hover {
+    color: #003078
+}
+
+.govuk-service-header__link:active,
+.govuk-service-header__link:focus {
+    color: #0b0c0c
+}
+
+.govuk-service-header__link:not(:hover) {
+    text-decoration: none
+}
+
+.govuk-service-header__link:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+
+.govuk-service-header__link--service-name:link,
+.govuk-service-header__link--service-name:visited {
+    color: #0b0c0c
+}
+
+@media print {
+
+    .govuk-service-header__link--service-name:link,
+    .govuk-service-header__link--service-name:visited {
+        color: #000
+    }
+}
+
+.govuk-service-header__link--service-name:hover {
+    color: rgba(11, 12, 12, .99)
+}
+
+.govuk-service-header__link--service-name:active,
+.govuk-service-header__link--service-name:focus {
+    color: #0b0c0c
+}
+
+@media print {
+
+    .govuk-service-header__link--service-name:active,
+    .govuk-service-header__link--service-name:focus {
+        color: #000
+    }
+}
+
+.govuk-service-header__navigation-item,
+.govuk-service-header__service-name {
+    position: relative
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-service-header__navigation-item,
+    .govuk-service-header__service-name {
+        display: inline-block;
+        padding: 15px 0
+    }
+}
+
+.govuk-service-header__service-name {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 1.25
+}
+
+@media print {
+    .govuk-service-header__service-name {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__service-name {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-header__service-name {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__service-name {
+        margin-bottom: 5px
+    }
+}
+
+.govuk-service-header__toggle {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 700;
+    font-size: 1rem;
+    line-height: 1.25;
+    display: inline-flex;
+    margin: 5px 0;
+    padding: 0;
+    border: 0;
+    color: #1d70b8;
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+    align-items: center
+}
+
+@media print {
+    .govuk-service-header__toggle {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__toggle {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-header__toggle {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+.govuk-service-header__toggle:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
+    clip-path: polygon(0 0, 50% 100%, 100% 0);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 8.66px 5px 0;
+    border-top-color: inherit;
+    content: "";
+    margin-left: 5px
+}
+
+.govuk-service-header__toggle[aria-expanded=true]:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 0 5px 8.66px;
+    border-bottom-color: inherit
+}
+
+.govuk-service-header__toggle[hidden] {
+    display: none
+}
+
+.govuk-service-header__navigation-list {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.25;
+    margin: 0;
+    padding: 0;
+    list-style: none
+}
+
+@media print {
+    .govuk-service-header__navigation-list {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__navigation-list {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-service-header__navigation-list {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
+.govuk-service-header__navigation-item {
+    margin: 10px 0;
+    border: 0 solid
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__navigation-item {
+        margin: 0 30px 0 0
+    }
+
+    .govuk-service-header__navigation-item:last-of-type {
+        margin: 0
+    }
+}
+
+.govuk-service-header__navigation-item--active {
+    border-color: #1d70b8
+}
+
+@media (max-width:40.0525em) {
+    .govuk-service-header__navigation-item--active {
+        margin-left: -15px;
+        padding-left: 10px;
+        border-left-width: 5px
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-service-header__navigation-item--active {
+        border-bottom-width: 5px
+    }
+}
+
+.govuk-service-header__active-fallback {
+    font-weight: 400
+}
+
 .govuk-skip-link {
     position: absolute !important;
     width: 1px !important;

Action run for a6a47607d0556aee4a02dd08d37560d676f2aa03

github-actions[bot] commented 4 months ago

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-default.html b/packages/govuk-frontend/dist/govuk/components/header/template-default.html
index 91ab515f4..89f65d2ce 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-default.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,5 +18,6 @@
         </svg>
       </a>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html
index 41bc217b3..70732b8bd 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-header__container--full-width">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -45,5 +46,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html b/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
index bbebb0f68..5d75b94cc 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-header__container--full-width">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -20,5 +21,6 @@
         </span>
       </a>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html
index 75ad6abc2..7750533be 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -45,5 +46,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html
index 6a04c6b18..f06a0fbc8 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -39,5 +40,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-label.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-label.html
index be66d9450..f6cc48265 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-label.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-label.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -47,5 +48,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html
index fef844ab2..d701aac99 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -47,5 +48,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-navigation-label.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-navigation-label.html
index c4e96ac14..bbccb9a62 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-navigation-label.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-navigation-label.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -47,5 +48,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html
index 6406765d3..8945b9fc9 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -107,5 +108,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html
index 7863fa81e..d887e02d3 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -47,5 +48,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
index 0ee1f2818..97a01f2d0 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -20,5 +21,6 @@
         </span>
       </a>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html
index f2fc493ad..1c6e4c6fa 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -50,5 +51,6 @@
         </ul>
       </nav>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html
index d460416a5..4e3f0d944 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -22,5 +23,6 @@
         Service Name
       </span>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html
index f01029178..ccf933b79 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -22,5 +23,6 @@
         Service Name
       </a>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-st-edwards-crown.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-st-edwards-crown.html
index 24f79ac7b..d91942750 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-st-edwards-crown.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-st-edwards-crown.html
@@ -1,5 +1,6 @@
-<header class="govuk-header" data-module="govuk-header">
+<div class="govuk-header" data-module="govuk-header">
   <div class="govuk-header__container govuk-width-container">
+
     <div class="govuk-header__logo">
       <a href="/" class="govuk-header__link govuk-header__link--homepage">
         <svg
@@ -17,5 +18,6 @@
         </svg>
       </a>
     </div>
+
   </div>
-</header>
+</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-default.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-default.html
new file mode 100644
index 000000000..31d55bf51
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-default.html
@@ -0,0 +1,17 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+      <div class="govuk-service-header">
+        <div class="govuk-width-container">
+          <span class="govuk-service-header__service-name">
+Service name          </span>        
+        </div>
+      </div>
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-html-navigation-items.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-html-navigation-items.html
new file mode 100644
index 000000000..e2e92e341
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-html-navigation-items.html
@@ -0,0 +1,36 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>
+
+              <ul class="govuk-service-header__navigation-list" id="navigation" >
+
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+<em>Navigation item 1</em>                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/2">
+                        
+<em>Navigation item 2</em>                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+<em>Navigation item 3</em>                      </a>
+                  </li>
+
+                </ul>
+            </nav>
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-large-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-large-navigation.html
new file mode 100644
index 000000000..ae936e29b
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-large-navigation.html
@@ -0,0 +1,101 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>
+
+              <ul class="govuk-service-header__navigation-list" id="navigation" >
+
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/benefits">
+                        
+Benefits                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/births-deaths-marriages">
+                        
+Births, deaths, marriages and care                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/business">
+                        
+Business and self-employed                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/childcare-parenting">
+                        
+Childcare and parenting                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/citizenship">
+                        
+Citizenship and living in the UK                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/justice">
+                        
+Crime, justice and the law                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/disabilities">
+                        
+Disabled people                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/driving">
+                        
+Driving and transport                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/education">
+                        
+Education and learning                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/employing-people">
+                        
+Employing people                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/environment-countryside">
+                        
+Environment and countryside                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/housing-local-services">
+                        
+Housing and local services                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/tax">
+                        
+Money and tax                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/abroad">
+                        
+Passports, travel and living abroad                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/visas-immigration">
+                        
+Visas and immigration                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/browse/working">
+                        
+Working, jobs and pensions                      </a>
+                  </li>
+
+                </ul>
+            </nav>
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-long-service-name.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-long-service-name.html
new file mode 100644
index 000000000..b9fd5f1a8
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-long-service-name.html
@@ -0,0 +1,20 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+      <div class="govuk-service-header">
+        <div class="govuk-width-container">
+          <span class="govuk-service-header__service-name">
+            <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
+              Apply to receive a rare holofoil Charizard Pokémon card from the King
+            </a>
+          </span>        
+        </div>
+      </div>
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-a-current-item.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-a-current-item.html
new file mode 100644
index 000000000..4ff867d1d
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-a-current-item.html
@@ -0,0 +1,42 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>
+
+              <ul class="govuk-service-header__navigation-list" id="navigation" >
+
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+Navigation item 1                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
+                      <a class="govuk-service-header__link" href="#/2" aria-current="page">
+                        
+                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
+                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+Navigation item 3                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/4">
+                        
+Navigation item 4                      </a>
+                  </li>
+
+                </ul>
+            </nav>
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-an-active-item.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-an-active-item.html
new file mode 100644
index 000000000..9991126ec
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation-with-an-active-item.html
@@ -0,0 +1,42 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>
+
+              <ul class="govuk-service-header__navigation-list" id="navigation" >
+
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+Navigation item 1                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
+                      <a class="govuk-service-header__link" href="#/2" aria-current="true">
+                        
+                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
+                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+Navigation item 3                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/4">
+                        
+Navigation item 4                      </a>
+                  </li>
+
+                </ul>
+            </nav>
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation.html
new file mode 100644
index 000000000..e45da0d87
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-navigation.html
@@ -0,0 +1,41 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>
+
+              <ul class="govuk-service-header__navigation-list" id="navigation" >
+
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+Navigation item 1                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/2">
+                        
+Navigation item 2                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+Navigation item 3                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/4">
+                        
+Navigation item 4                      </a>
+                  </li>
+
+                </ul>
+            </nav>
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-non-link-navigation-items.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-non-link-navigation-items.html
new file mode 100644
index 000000000..e81b6e68a
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-non-link-navigation-items.html
@@ -0,0 +1,30 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>
+
+              <ul class="govuk-service-header__navigation-list" id="navigation" >
+
+                                  <li class="govuk-service-header__navigation-item">
+                      <span class="govuk-service-header__navigation-text">Navigation item 1</span>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <span class="govuk-service-header__navigation-text"><em>Navigation item 2</em></span>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <span class="govuk-service-header__navigation-text">Navigation item 3</span>
+                  </li>
+
+                </ul>
+            </nav>
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-link.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-link.html
new file mode 100644
index 000000000..ba461970b
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-link.html
@@ -0,0 +1,20 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+      <div class="govuk-service-header">
+        <div class="govuk-width-container">
+          <span class="govuk-service-header__service-name">
+            <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
+              Service name
+            </a>
+          </span>        
+        </div>
+      </div>
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+
+          </div>
+    </div>
+  </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-name-and-navigation.html b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-name-and-navigation.html
new file mode 100644
index 000000000..f1cc232fa
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/service-header/template-with-service-name-and-navigation.html
@@ -0,0 +1,51 @@
+
+  <div class="" data-module="govuk-service-header">
+    
+      <div class="govuk-service-header">
+        <div class="govuk-width-container">
+          <span class="govuk-service-header__service-name">
+            <a href="#/" class="govuk-service-header__link govuk-service-header__link--service-name">
+              Apply for a juggling license
+            </a>
+          </span>        
+        </div>
+      </div>
+   
+    <div class="govuk-service-header">
+      <div class="govuk-service-header__container govuk-width-container">
+          
+            <nav aria-label="Menu" class="govuk-service-header__navigation">
+              <button type="button" class="govuk-service-header__toggle govuk-js-service-header-toggle" aria-controls="navigation" hidden>
+                Menu
+              </button>
+
+              <ul class="govuk-service-header__navigation-list" id="navigation" >
+
+                                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/1">
+                        
+Navigation item 1                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item govuk-service-header__navigation-item--active">
+                      <a class="govuk-service-header__link" href="#/2" aria-current="true">
+                        
+                          <strong class="govuk-service-header__active-fallback">Navigation item 2</strong>
+                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/3">
+                        
+Navigation item 3                      </a>
+                  </li>
+                  <li class="govuk-service-header__navigation-item">
+                      <a class="govuk-service-header__link" href="#/4">
+                        
+Navigation item 4                      </a>
+                  </li>
+
+                </ul>
+            </nav>
+
+          </div>
+    </div>
+  </div>

Action run for a6a47607d0556aee4a02dd08d37560d676f2aa03

github-actions[bot] commented 4 months ago

Other changes to npm package

The diff could not be posted as a comment. You can download it from the workflow artifacts.


Action run for a6a47607d0556aee4a02dd08d37560d676f2aa03