chore(build): update dist artifacts after header hydration improvements

Author: Fergus Bisset

dist/components/Header/Header.css

@@ -53,6 +53,8 @@
 .nhsuk-header__navigation-container {
   margin: 0 auto;
   position: relative;
+  /* Default reserve for More button space (0 by default; can be overridden) */
+  --nhs-header-more-reserve: 0px;
   box-shadow: inset 0 0.25px 0 0 #d8dde0;
 }
 .nhsuk-header__navigation-container.nhsuk-header__navigation-container--padded {
@@ -67,6 +69,8 @@
 }
 .nhsuk-header__navigation-container--initializing {
   transition: opacity 150ms ease-in-out;
+  /* During init, conservatively reserve space for the More button to avoid shifts */
+  --nhs-header-more-reserve: var(--fdp-header-more-reserve, 104px);
 }
 .nhsuk-header__navigation-container:not(.nhsuk-header__navigation-container--initializing) {
   opacity: 1;
@@ -288,6 +292,13 @@
   margin: 0 -8px;
   padding: 0;
   width: calc(100% + 24px);
+  /* Flex spacer to reserve space for potential More button */
+}
+.nhsuk-header__navigation-list::after {
+  content: "";
+  flex: 0 0 var(--nhs-header-more-reserve, 0px);
+  inline-size: var(--nhs-header-more-reserve, 0px);
+  block-size: 1px; /* minimal size to avoid affecting line-height */
 }
 @media (min-width: 768px) {
   .nhsuk-header__navigation-list {
@@ -402,7 +413,7 @@
   width: 24px;
   height: 24px;
   margin-left: 4px;
-  margin-top: -4px;
+  margin-top: -6px;
   vertical-align: middle;
   transform: rotate(90deg);
   transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
@@ -716,11 +727,11 @@
 }
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue {
   background-color: var(--fdp-header-dark-blue-bg, #003087);
-  color: var(--fdp-header-dark-blue-text, #ffffff);
+  color: #ffffff;
 }
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation {
-  background-color: var(--fdp-header-dark-blue-nav-bg, #003087);
-  color: var(--fdp-header-dark-blue-nav-text, #ffffff);
+  background-color: transparent;
+  color: #ffffff;
 }
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation a {
   color: var(--fdp-header-dark-blue-nav-text, #ffffff);
@@ -730,19 +741,23 @@
   color: #003087;
 }
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation__navigation-link, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation__navigation-button {
-  color: var(--fdp-header-dark-blue-nav-text, #ffffff);
-}
-[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__navigation-link, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__navigation-button {
-  color: var(--fdp-header-dark-blue-nav-text, #ffffff);
+  color: #ffffff;
 }
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-logo,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-name,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-name[href],
-[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__organisation-name,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__organisation-name {
+  color: #ffffff;
+}
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-link,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-button {
   color: #ffffff;
 }
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-link:focus,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-button:focus {
+  background-color: #d6cce3;
+  color: #003087;
+}
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-logo:hover, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-name:hover, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-name[href]:hover {
   color: #ffffff;
   text-decoration: none;
@@ -808,10 +823,17 @@
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-logo,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-name,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-name[href],
-[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__organisation-name,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__organisation-name {
+  color: #ffffff;
+}
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-link,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-button {
-  color: var(--fdp-header-dark-grey-text, #ffffff);
+  color: #ffffff;
+}
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-link:focus,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-button:focus {
+  background-color: #d6cce3;
+  color: #212b32;
 }
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-logo, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-name, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-name[href] {
   color: var(--fdp-header-dark-grey-text, #ffffff);
@@ -842,10 +864,17 @@
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-logo,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-name,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-name[href],
-[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__organisation-name,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__organisation-name {
+  color: #ffffff;
+}
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-link,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-button {
-  color: var(--fdp-header-mid-grey-text, #ffffff);
+  color: #ffffff;
+}
+[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-link:focus,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-button:focus {
+  background-color: #d6cce3;
+  color: #212b32;
 }
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation {
   background-color: transparent;
@@ -879,10 +908,17 @@
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-logo,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-name,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-name[href],
-[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__organisation-name,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__organisation-name {
+  color: #ffffff;
+}
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-link,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-button {
-  color: var(--fdp-header-dark-grey-gradient-text, #ffffff);
+  color: #ffffff;
+}
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-link:focus,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-button:focus {
+  background-color: #d6cce3;
+  color: #212b32;
 }
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-container {
   background: inherit;

dist/components/Header/index.css

@@ -245,6 +245,8 @@ span .nhsuk-u-visually-hidden {
 .nhsuk-header__navigation-container {
   margin: 0 auto;
   position: relative;
+  /* Default reserve for More button space (0 by default; can be overridden) */
+  --nhs-header-more-reserve: 0px;
   box-shadow: inset 0 0.25px 0 0 #d8dde0;
 }
 
@@ -262,6 +264,8 @@ span .nhsuk-u-visually-hidden {
 
 .nhsuk-header__navigation-container--initializing {
   transition: opacity 150ms ease-in-out;
+  /* During init, conservatively reserve space for the More button to avoid shifts */
+  --nhs-header-more-reserve: var(--fdp-header-more-reserve, 104px);
 }
 
 .nhsuk-header__navigation-container:not(.nhsuk-header__navigation-container--initializing) {
@@ -522,6 +526,14 @@ span .nhsuk-u-visually-hidden {
   margin: 0 -8px;
   padding: 0;
   width: calc(100% + 24px);
+  /* Flex spacer to reserve space for potential More button */
+}
+
+.nhsuk-header__navigation-list::after {
+  content: "";
+  flex: 0 0 var(--nhs-header-more-reserve, 0px);
+  inline-size: var(--nhs-header-more-reserve, 0px);
+  block-size: 1px; /* minimal size to avoid affecting line-height */
 }
 
 @media (min-width: 768px) {
@@ -658,7 +670,7 @@ span .nhsuk-u-visually-hidden {
   width: 24px;
   height: 24px;
   margin-left: 4px;
-  margin-top: -4px;
+  margin-top: -6px;
   vertical-align: middle;
   transform: rotate(90deg);
   transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
@@ -1036,12 +1048,12 @@ span .nhsuk-u-visually-hidden {
 
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue {
   background-color: var(--fdp-header-dark-blue-bg, #003087);
-  color: var(--fdp-header-dark-blue-text, #ffffff);
+  color: #ffffff;
 }
 
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation {
-  background-color: var(--fdp-header-dark-blue-nav-bg, #003087);
-  color: var(--fdp-header-dark-blue-nav-text, #ffffff);
+  background-color: transparent;
+  color: #ffffff;
 }
 
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation a {
@@ -1054,22 +1066,27 @@ span .nhsuk-u-visually-hidden {
 }
 
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation__navigation-link, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation__navigation-button {
-  color: var(--fdp-header-dark-blue-nav-text, #ffffff);
-}
-
-[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__navigation-link, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__navigation-button {
-  color: var(--fdp-header-dark-blue-nav-text, #ffffff);
+  color: #ffffff;
 }
 
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-logo,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-name,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__service-name[href],
-[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__organisation-name,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__organisation-name {
+  color: #ffffff;
+}
+
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-link,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-button {
   color: #ffffff;
 }
 
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-link:focus,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue .nhsuk-header__navigation-button:focus {
+  background-color: #d6cce3;
+  color: #003087;
+}
+
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-logo:hover, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-name:hover, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-blue__service-name[href]:hover {
   color: #ffffff;
   text-decoration: none;
@@ -1151,10 +1168,19 @@ span .nhsuk-u-visually-hidden {
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-logo,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-name,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__service-name[href],
-[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__organisation-name,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__organisation-name {
+  color: #ffffff;
+}
+
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-link,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-button {
-  color: var(--fdp-header-dark-grey-text, #ffffff);
+  color: #ffffff;
+}
+
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-link:focus,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey .nhsuk-header__navigation-button:focus {
+  background-color: #d6cce3;
+  color: #212b32;
 }
 
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-logo, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-name, [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey__service-name[href] {
@@ -1193,10 +1219,19 @@ span .nhsuk-u-visually-hidden {
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-logo,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-name,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__service-name[href],
-[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__organisation-name,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__organisation-name {
+  color: #ffffff;
+}
+
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-link,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-button {
-  color: var(--fdp-header-mid-grey-text, #ffffff);
+  color: #ffffff;
+}
+
+[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-link:focus,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation-button:focus {
+  background-color: #d6cce3;
+  color: #212b32;
 }
 
 [data-brand=fdp] .nhsuk-header.nhsuk-header--mid-grey .nhsuk-header__navigation {
@@ -1239,10 +1274,19 @@ span .nhsuk-u-visually-hidden {
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-logo,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-name,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__service-name[href],
-[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__organisation-name,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__organisation-name {
+  color: #ffffff;
+}
+
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-link,
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-button {
-  color: var(--fdp-header-dark-grey-gradient-text, #ffffff);
+  color: #ffffff;
+}
+
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-link:focus,
+[data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-button:focus {
+  background-color: #d6cce3;
+  color: #212b32;
 }
 
 [data-brand=fdp] .nhsuk-header.nhsuk-header--dark-grey-gradient .nhsuk-header__navigation-container {
@@ -1329,6 +1373,8 @@ nav[data-ssr-hydrating=true] + .nhsuk-header__dropdown-menu {
 /* SSR Fallback Navigation Container */
 
 .nhsuk-header__navigation-container--ssr {
+  /* Reserve space for potential More button to avoid layout shift on hydration */
+  --nhs-header-more-reserve: var(--fdp-header-more-reserve, 104px);
   /* Server-side: start as single line; overflow handled via progressive enhancement */
 }
 
@@ -1365,9 +1411,9 @@ nav[data-ssr-hydrating=true] + .nhsuk-header__dropdown-menu {
 /* Progressive Enhancement Indicator */
 
 .nhsuk-header__navigation-container--initializing {
-  /* Subtle loading state while JavaScript calculates overflow */
-  opacity: 0.95;
-  transition: opacity 150ms ease-in-out;
+  /* Avoid visual change during hydration to prevent flash */
+  opacity: 1;
+  transition: none;
 }
 
 /* No-JS Fallback Styles */

dist/index.esm.js

@@ -3147,6 +3147,10 @@ const eu = ({
       H += P, J += 1;
     }
     const L = J < i.items.length, G = L ? J : i.items.length;
+    try {
+      I.style.setProperty("--nhs-header-more-reserve", L ? `${D}px` : "0px");
+    } catch {
+    }
     x((U) => U === L ? U : L), g((U) => U === G ? U : G), I.classList.remove("nhsuk-header__navigation-container--measuring"), j.current = !1;
   }, [T, i?.items]);
   rt(() => {