Update dependency govuk-frontend to v5.13.0 - autoclosed

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
govuk-frontend (source)	5.4.1 -> 5.13.0

---

Warning

Some dependencies could not be looked up. Check the Dependency Dashboard for more information.

---

Release Notes

alphagov/govuk-frontend (govuk-frontend)

v5.13.0

Compare Source

New features

Use Sass functions to create custom media queries

We've added new Sass functions to help write @media and @container queries, mixins and functions whilst still using GOV.UK Frontend's $govuk-breakpoints setting.

You can create min-width and max-width queries using the govuk-from-breakpoint and govuk-until-breakpoint functions:

.element {
  color: red;

  @​media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} {
    color: blue;
  }
}

You can get the configured value of a breakpoint using govuk-breakpoint-value:

@​function wider-than-tablet($width) {
  @​return $width > govuk-breakpoint-value(tablet);
}

Each of these functions allows for passing a custom breakpoint map. This can be useful if a particular component needs to change layout at different dimensions to the rest of the site and for authoring @container queries.

$component-breakpoints: (
  small: 300px,
  medium: 500px,
  large: 750px
);

.element {
  color: red;

  @​container #{govuk-from-breakpoint(small, $component-breakpoints)} {
    color: blue;
  }
}

We've rewritten the internals of the govuk-media-query mixin to make use of these new functions. The rewritten mixin should work identically and return the same CSS as the previous version, but you may want to make sure that your existing media queries work as expected.

We made these changes in the following pull requests:

• #​6264: Add media query functions.
• #​6265: Rewrite govuk-media-query, remove dependency on sass-mq.

Recommended changes

Rename ellipses HTML class in pagination to ellipsis

Within the pagination component, change the govuk-pagination__item--ellipses class to govuk-pagination__item--ellipsis.

We introduced this change in pull request #​5882: Rename ellipses html class to ellipsis. Thanks to @​frankieroberto for making this change.

Fixes

• #​6223: Account for multiple attribute when enhancing a File Input. Thanks to @​deberny for reporting this issue.
• #​6297: Output deprecation warning if $govuk-show-breakpoints is true
• #​6304: Fix long filenames in enhanced file upload not wrapping. Thanks to @​wardt7 for reporting this issue.

v5.12.0

Compare Source

New features

Use the govuk-focused-form-input mixin to style focus states for form inputs

You can now use the govuk-focused-form-input mixin to style the focus state in your own form input components.

Thanks to @​patrickpatrickpatrick for suggesting this change.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​6222: Fall back to the 'other' translation in older browsers that do not support Intl.PluralRules and remove fallback logic
• #​6232: Remove fieldset indentation from checkboxes and radios – thanks to @​RichardBradley, @​devkokov and @​nathdolan for reporting this issue

v5.11.2

Compare Source

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​6138: Fix file upload being invisible when using the 'JavaScript enhanced' version with an empty label – thanks to @​JoPintoPaul for reporting this issue
• #​6164: Fix handling of scope being null when calling createAll() or initAll() – thanks to @​colinrotherham for reporting and fixing this issue
• #​6184: Fix thickness of underlines on previous and next pagination links in Safari – thanks to @​frankieroberto for reporting this issue

v5.11.1

Compare Source

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​6047: Fix text within the inverse Service navigation variant not appearing in white – thanks to @​peteryates for reporting this issue
• #​6084: Output hexadecimal colours for govuk-shade and govuk-tint

v5.11.0

Compare Source

New features

The Service navigation component no longer uses a menu on mobile for a single link

If you're using our Nunjucks macros, the Service navigation component will no longer collapse the navigation behind a Menu toggle on mobile if there's only one navigation link.

You can control this behaviour using the new collapseNavigationOnMobile Nunjucks option.

If you're not using our Nunjucks macros, you can recreate this behaviour by omitting the Menu <button> element when there is only one navigation item.

We made this change in pull request #​6016: Don’t use menu for service nav with a single link.

Add inverse styling to Service navigation for use on product pages

If you enable the GOV.UK rebrand, you can now add the govuk-service-navigation--inverse class to the Service navigation component to use white links on a blue background.

This allows the rebranded GOV.UK header and Service navigation components to flow seamlessly with any following components that have a blue background, as is common on GOV.UK Digital Service Platform pages.

We made this change in pull request #​6015: Add inverse variant to Service navigation component.

You'll now see a deprecation warning if you're using LibSass

If you're using the deprecated LibSass library, you'll now see this deprecation warning when compiling your Sass:

It looks like you may be using LibSass to compile your Sass. LibSass is deprecated and will not be supported by the next major version of GOV.UK Frontend. See https://sass-lang.com/libsass/ for more information. To silence this warning, update $govuk-suppressed-warnings with key: "libsass"

We made this change in pull request #​5993: Warn if Sass is compiled using libsass.

Deprecated features

Replace references to CSS custom properties for breakpoints

We've renamed the CSS custom properties for breakpoints to simplify the prefix from --govuk-frontend to just --govuk.

Old name	New name
--govuk-frontend-breakpoint-mobile	--govuk-breakpoint-mobile
--govuk-frontend-breakpoint-tablet	--govuk-breakpoint-tablet
--govuk-frontend-breakpoint-desktop	--govuk-breakpoint-desktop

You can still use the old names, but we'll remove them in the next breaking release (GOV.UK Frontend v6.0.0).

We made this change in pull request #​6014: Simplify prefix for breakpoint custom properties.

Fixes

We've updated the SVG (Scalable Vector Graphics) file of the GOV.UK logo to fix some imperfections visible at high zoom levels. Thanks to @​matteason for reporting this.

If you're using the govukHeader Nunjucks macro, you do not need to update anything. If you're not using the macro, replace the logo's SVG code in the header with the following code:

<svg
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="226" cy="36" r="7.3"></circle>
  <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
</svg>

We made this change in pull request #​6036: Fix some wordmark artifacts at high zoom levels.

We've also made fixes to GOV.UK Frontend in the following pull requests:

• #​6011: Derive rebranded tints from $govuk-brand-colour – thanks to @​tamoreton for proposing this change
• #​6018: Fix layout of Service navigation in Edge when forced colours are enabled
• #​6019: Fix service nav wrapper not filling available width – thanks to @​joelanman for reporting and fixing this issue

v5.10.2

Compare Source

To install this version with npm, run npm install govuk-frontend@5.10.2. You can also find more information about how to stay up to date in our documentation.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5968: Apply header logo right padding only when menu button is visible

v5.10.1

Compare Source

To install this version with npm, run npm install govuk-frontend@5.10.1. You can also find more information about how to stay up to date in our documentation.

Brand refresh fixes

We’ve fixed the colour of the dot in the refreshed GOV.UK logo as well as made some fixes to the implementation of the brand refresh in GOV.UK Frontend. We did this in the following pull requests:

• #​5962: Fix colour of refreshed GOV.UK logo's dot
• #​5905: Fix unnecessary whitespace after logo
• #​5920: Fix transparency around edge of rebranded favicon.ico, thanks to @​matteason for reporting and fixing this issue

Other fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5908: Fix footer licence link reflowing on focus in Safari
• #​5919: Update deprecation warning message to make it clearer how to update to new organisation colour palette
• #​5953: Move organisation legacy colour palette warning into the govuk-organisation-colour mixin
• #​5918: Fix govuk-font-size mixin outputting the wrong font properties for size 14 text when compiled using libsass, thanks to @​oscarduignan for reporting this issue
• #​5896: Fix character count not having error border colour when rendered with error message, thanks to @​gunjam for fixing this issue

v5.10.0

Compare Source

To install this version with npm, run npm install govuk-frontend@5.10.0. You can also find more information about how to stay up to date in our documentation.

New features

Prepare to use the refreshed GOV.UK brand

We’ve added features to GOV.UK Frontend to implement GOV.UK’s refreshed brand. Ahead of the brand’s go-live date of 25 June 2025, prepare your service by updating its code. You’ll then need to deploy the changes to production on 25 June 2025 or as soon after this date as possible.

These changes affect these components:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

These changes also affect the theme-color metadata and assets, including:

• icons
• Open Graph image
• manifest.json

To help you get ready, we've published this release, which includes several features to make the necessary updates across your service:

• updated markup for the GOV.UK header component (with the refreshed logo) and GOV.UK footer component (adding the crown logo)
• a new govuk-template--rebranded HTML class to apply updated styles from our CSS
• a new set of assets for icons, Open Graph image and page metadata

You’ll need to serve the new assets in your service. What you’ll need to do after that depends on the code in your service and if you use GOV.UK Frontend:

• with its Nunjucks page template and macros
• with its Nunjucks macros (without the page template)
• without using Nunjucks
• using the Prototype Kit

Add the brand refresh assets to your project

GOV.UK Frontend provides updated assets for the icons, Open Graph image and manifest.json to reflect the refreshed brand. These assets are available in the dist/govuk/assets/rebrand folder of the package.

If you serve the assets from the GOV.UK Frontend assets folder, make sure the assets inside the dist/govuk/assets/rebrand folder are served correctly at <YOUR-SITE-URL>/assets/rebrand.

If you copy the font and image files into your application, you’ll need to copy the dist/govuk/assets/rebrand folder to <YOUR-APP>/assets/rebrand. If you use an automated task to copy the files, you may need to update your task to automatically copy our new folder.

Use the refreshed GOV.UK brand if you're using our Nunjucks page template

If you can edit your Nunjucks environment, you can add a govukRebrand global value to your environment, with a value of true. This global value makes the affected components use new styles for the brand refresh and display updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component).

nunjucksEnv.addGlobal(‘govukRebrand’, true)

If you cannot edit your Nunjucks environment, you can use our new govukRebrand 'variable' option from our page template, which makes:

• the Service navigation and Cookie banner components use new styles for the brand refresh
• the GOV.UK header and GOV.UK footer components rendered in the header and footer blocks display updated assets (such as the refreshed logo in the GOV.UK header component and the crown in the GOV.UK footer component)

If you’ve overridden the header or footer block, see the next sections to make sure your header or footer displays the updated assets.

Use set to assign the govukRebrand variable a value of true and enable the new styles:

{% set govukRebrand = true %}

Do not place this snippet between any block and endblock lines. Place it on a separate line.

If you’ve previously customised the template's assetPath, assetUrl or opengraphImageUrl options, you may need to update these to point to the location of the updated icons, Open Graph image and manifest.json.

Use the refreshed GOV.UK brand if you're using Nunjucks macro (without the page template)

You can do this by adding the updated styles for these components:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

Add the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

Enable the refreshed GOV.UK logo by adding rebrand: true to the GOV.UK header component configuration.

{{ govukHeader({
  rebrand: true
}) }}

Enable the GOV.UK crown in the GOV.UK footer component by addingrebrand: true to the component configuration.

{{ govukFooter({
  rebrand: true
}) }}

Update the links to the assets. Change the HTML inside your <head> element to use the new file locations (from /assets/ to /assets/rebrand/) and theme-color. Replace any existing definitions.

<meta name="theme-color" content="#&#8203;1d70b8">
<link rel="icon" sizes="48x48" href="/assets/rebrand/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/rebrand/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/rebrand/images/govuk-icon-mask.svg" color="#&#8203;1d70b8">
<link rel="apple-touch-icon" href="/assets/rebrand/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/rebrand/manifest.json">
<meta property="og:image" content="<SERVICE URL>/assets/rebrand/images/govuk-opengraph-image.png">

Use the refreshed GOV.UK brand if you're not using Nunjucks

You also can use the refreshed GOV.UK brand if you’re not using Nunjucks.

Start by adding the govuk-template--rebranded class to the <html> element of your page to apply the updated styles to all affected components.

As you make changes, use the examples on our website to check your updates:

• GOV.UK header
• GOV.UK footer
• Service navigation
• Cookie banner

Replace the <svg> element in your header with the following SVG code to display the refreshed GOV.UK logo:

<svg
  xmlns="http://www.w3.org/2000/svg"
  focusable="false"
  role="img"
  viewBox="0 0 324 60"
  height="30"
  width="162"
  fill="currentcolor"
  class="govuk-header__logotype"
  aria-label="GOV.UK">
  <title>GOV.UK</title>
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
  <circle class="govuk-logo-dot" cx="227" cy="36" r="7.3"></circle>
  <path d="M94.7,36.1c0,1.9.2,3.6.7,5.4.5,1.7,1.2,3.2,2.1,4.5.9,1.3,2.2,2.4,3.6,3.2,1.5.8,3.2,1.2,5.3,1.2s3.6-.3,4.9-.9c1.3-.6,2.3-1.4,3.1-2.3.8-.9,1.3-2,1.6-3,.3-1.1.5-2.1.5-3v-.4h-11v-6.6h19.5v24h-7.7v-5.4c-.5.8-1.2,1.6-2,2.3-.8.7-1.7,1.3-2.7,1.8-1,.5-2.1.9-3.3,1.2-1.2.3-2.5.4-3.8.4-3.2,0-6-.6-8.4-1.7-2.5-1.1-4.5-2.7-6.2-4.7-1.7-2-3-4.4-3.8-7.1-.9-2.7-1.3-5.6-1.3-8.7s.5-6,1.5-8.7,2.4-5.1,4.2-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.6-1.7,4,.2,5.9.7c1.8.5,3.5,1.1,5.1,2,1.5.9,2.9,1.9,4,3.2,1.2,1.2,2.1,2.6,2.8,4.1l-7.7,4.3c-.5-.9-1-1.8-1.6-2.6-.6-.8-1.3-1.5-2.2-2.1-.8-.6-1.7-1-2.8-1.4-1-.3-2.2-.5-3.5-.5-2,0-3.8.4-5.3,1.2s-2.7,1.9-3.6,3.2c-.9,1.3-1.7,2.8-2.1,4.6s-.7,3.5-.7,5.3v.3h0ZM152.9,13.7c3.2,0,6.1.6,8.7,1.7,2.6,1.2,4.7,2.7,6.5,4.7,1.8,2,3.1,4.4,4.1,7.1s1.4,5.6,1.4,8.7-.5,6-1.4,8.7c-.9,2.7-2.3,5.1-4.1,7.1s-4,3.6-6.5,4.7c-2.6,1.1-5.5,1.7-8.7,1.7s-6.1-.6-8.7-1.7c-2.6-1.1-4.7-2.7-6.5-4.7-1.8-2-3.1-4.4-4.1-7.1-.9-2.7-1.4-5.6-1.4-8.7s.5-6,1.4-8.7,2.3-5.1,4.1-7.1c1.8-2,4-3.6,6.5-4.7s5.4-1.7,8.7-1.7h0ZM152.9,50.4c1.9,0,3.6-.4,5-1.1,1.4-.7,2.7-1.7,3.6-3,1-1.3,1.7-2.8,2.2-4.5.5-1.7.8-3.6.8-5.7v-.2c0-2-.3-3.9-.8-5.7-.5-1.7-1.3-3.3-2.2-4.5-1-1.3-2.2-2.3-3.6-3-1.4-.7-3.1-1.1-5-1.1s-3.6.4-5,1.1c-1.5.7-2.7,1.7-3.6,3s-1.7,2.8-2.2,4.5c-.5,1.7-.8,3.6-.8,5.7v.2c0,2.1.3,4,.8,5.7.5,1.7,1.2,3.2,2.2,4.5,1,1.3,2.2,2.3,3.6,3,1.5.7,3.1,1.1,5,1.1ZM189.1,58l-12.3-44h9.8l8.4,32.9h.3l8.2-32.9h9.7l-12.3,44M262.9,50.4c1.3,0,2.5-.2,3.6-.6,1.1-.4,2-.9,2.8-1.7.8-.8,1.4-1.7,1.9-2.9.5-1.2.7-2.5.7-4.1V14h8.6v28.5c0,2.4-.4,4.6-1.3,6.6-.9,2-2.1,3.6-3.7,5-1.6,1.4-3.4,2.4-5.6,3.2-2.2.7-4.5,1.1-7.1,1.1s-4.9-.4-7.1-1.1c-2.2-.7-4-1.8-5.6-3.2s-2.8-3-3.7-5c-.9-2-1.3-4.1-1.3-6.6V14h8.7v27.2c0,1.6.2,2.9.7,4.1.5,1.2,1.1,2.1,1.9,2.9.8.8,1.7,1.3,2.8,1.7s2.3.6,3.6.6h0ZM288.5,14h8.7v19.1l15.5-19.1h10.8l-15.1,17.6,16.1,26.4h-10.2l-11.5-19.7-5.6,6.3v13.5h-8.7"></path>
</svg>

Update the HTML inside your <footer> element by adding the following SVG code at the start of the <div> with the govuk-width-container class.

<svg
  xmlns="http://www.w3.org/2000/svg"
  focusable="false"
  role="presentation"
  viewBox="0 0 64 60"
  height="30"
  width="32"
  fill="currentcolor"
  class="govuk-footer__crown">
  <g>
    <circle cx="20" cy="17.6" r="3.7"></circle>
    <circle cx="10.2" cy="23.5" r="3.7"></circle>
    <circle cx="3.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <circle cx="43.3" cy="17.6" r="3.7"></circle>
    <circle cx="53.2" cy="23.5" r="3.7"></circle>
    <circle cx="59.7" cy="33.2" r="3.7"></circle>
    <circle cx="31.7" cy="30.6" r="3.7"></circle>
    <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
  </g>
</svg>

Update the links to the assets. Change the HTML inside your <head> element to use the new file locations (from /assets/ to /assets/rebrand/) and theme-color. Replace any existing definitions.

<meta name="theme-color" content="#&#8203;1d70b8">
<link rel="icon" sizes="48x48" href="/assets/rebrand/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/rebrand/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/rebrand/images/govuk-icon-mask.svg" color="#&#8203;1d70b8">
<link rel="apple-touch-icon" href="/assets/rebrand/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/rebrand/manifest.json">
<meta property="og:image" content="<SERVICE URL>/assets/rebrand/images/govuk-opengraph-image.png">

Use the refreshed GOV.UK brand in your Prototype Kit prototype

If you use GOV.UK Frontend in a Prototype Kit prototype, enable the refreshed brand by adding the following to your prototype's app/config.json :

"plugins": {
  "govuk-frontend": {
	"rebrand": true
  }
}

Pull requests

These changes were made in the following pull requests:

• #​5794: Add redesigned header component
• #​5796: Update template background colour and components using it
• #​5797: Add refreshed brand to service navigation component
• #​5798: Add mixin to help rebrand specific properties
• #​5800: Update favicons, app icons and OpenGraph image
• #​5804: Use logo in new Footer design
• #​5806: Update background colour of Cookie banner for brand refresh
• #​5810: Update logo SVG
• #​5853: Add rebrand variable to page template
• #​5857: Increase spacing in logo to 3 dots, increase viewbox size
• #​5870: Service navigation spacing adjustments
• #​5872: Improvements to the rebranded footer in forced colors mode
• #​5874: Add checks for govukRebrand Nunjucks global
• #​5877: Update prototype kit plugin rebrand function to be specific to govuk-frontend
• #​5883: Fix old wordmark using incorrect coordinates

Other changes

The GOV.UK footer component top border is now consistent with GOV.UK

We've updated the border of the GOV.UK footer component so it matches the border used on the GOV.UK website. This will provide a more consistent experience for users as they navigate from the GOV.UK website and into services.

This change was introduced in pull request #​5792: Update footer top border to be consistent with GOV.UK.

The Royal Arms in the GOV.UK footer component now matches the text colour

We've updated the colour of the Royal Arms in the GOV.UK footer so it matches the text colour in browsers supporting the mask-image CSS property.

This improves its accessibility and reduces the number of colours used in the footer.

This change was introduced in pull request #​5801: Update colour of the copyright logo using CSS

Deprecated features

Deprecation of $govuk-canvas-background-colour

The responsibilities of the $govuk-canvas-background-colour variable were unclear, as the variable name and the description in the Sass API did not reflect how we were using it.

We’re replacing it with the $govuk-template-background-colour variable, which you can use to get the background colour of the <html> elements and of elements that need to match for visual continuity, such as the GOV.UK footer and Cookie banner components.

If you were using $govuk-canvas-background-colour to match the background colour of the <html> element, use $govuk-template-background-colour instead.

If you were using $govuk-canvas-background-colour to set the background colour in your custom styling to light-grey, use govuk-colour('light-grey') instead.

This change was introduced in pull request #​5790: Deprecate $govuk-canvas-background-colour, use $govuk-template-background-colour instead

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5785: Add missing Sass imports of components depended on - thanks to @​matthew-shaw for reporting this issue and proposing a fix
• #​5863: Omit ‘empty’ nav items from service navigation – thanks to @​NikhilNanjappa for reporting this issue

v5.9.0

Compare Source

To install this version with npm, run npm install govuk-frontend@5.9.0. You can also find more information about how to stay up to date in our documentation.

New features

Use our improved File upload component

We've added a JavaScript enhancement to the File upload component which:

• makes the component easier to use for drag and drop
• allows the text of the component to be translated
• fixes accessibility issues for users of Dragon, a speech recognition software

This improvement is opt-in, as it's a substantial visual change which risks shifting other content on the page.

To enable this improvement for your users, you'll first need to update the markup of your File upload component:

• if you use our Nunjucks macro, using the new javascript option of govukFileUpload

  {{ govukFileUpload({
    id: "file-upload",
    name: "photo",
    label: {
      text: "Upload your photo"
    },
    javascript: true
  }) }}

• if you're using HTML, wrapping the <input type="file"> of the File upload markup in a <div class="govuk-drop-zone" data-module="govuk-file-upload">

  <div class="govuk-form-group">
    <label class="govuk-label" for="file-upload-1">
      Upload your photo
    </label>
    <div class="govuk-drop-zone" data-module="govuk-file-upload">
      <input class="govuk-file-upload" id="file-upload" name="photo" type="file">
    </div>
  </div>

If you're importing components individually in your JavaScript, which we recommend for better performance, you'll then need to import and initialise the new FileUpload component.

import {FileUpload} from 'govuk-frontend'

createAll(FileUpload)

This change was introduced in pull request #​5305: Add progressively enhanced File Upload component

Form control components now have default id attributes

If you're using the included Nunjucks macros, these components now automatically use the value of the name parameter for the id parameter:

• Text input
• Textarea
• Password input
• Character count
• File upload
• Select

You’ll only have to provide the name parameters if they both have the same value.

The Date input component still requires an id attribute.

This change was introduced in pull request #​5658: Update form control components to set a default id based on name.

Deprecated features

Move service name and navigation links from the GOV.UK header to Service navigation component

We’ve deprecated the option to show a service name in the GOV.UK header component. This option will be removed from the GOV.UK header in the next breaking release of GOV.UK Frontend.

We recommend updating your service to use the Service navigation component as soon as possible.

Previously, we deprecated the option to show navigation links in the GOV.UK header component. This option will be removed as well, along with the GOV.UK header JavaScript component, since its only purpose was to make the navigation links responsive.

This change was introduced in pull request #​5721: Add deprecation field and deprecate header navigation.

Migrate to the new organisation colour palette

The legacy organisation colour palette has been deprecated and will be removed in the next major version.

If your service uses the organisation colour palette, make sure that things still look as expected with the $govuk-new-organisation-colours feature flag enabled.

This change was introduced in pull request #​5627: Deprecate legacy organisation colour palette.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5628: Add focused error state to Character count - thanks to @​edwardhorsford for reporting this issue
• #​5717: Fix prototype kit sass import path - thanks to @​joelanman
• #​5720: Fix summary card actions appearance when there are lots of links
• #​5728: Prevent menu button being overlaid at high zoom levels - thanks to @​govindmalurwardwp for reporting this issue

v5.8.0

Compare Source

To install this version with npm, run npm install govuk-frontend@5.8.0. You can also find more information about how to stay up to date in our documentation.

New features

Use our base configurable component to build your own configurable component

We've added a ConfigurableComponent class to help you build your own configurable components. It extends our Component class and allows you to focus on your components' specific features by handling these shared behaviours across components:

• checking that GOV.UK Frontend is supported
• checking that the component is not already initialised on its root element
• checking the type of the root element and storing it for access within the component as this.$root
• taking a configuration object as a parameter and then storing it for access within the component as this.config
• merging a passed configuration object with configuration options specified on the data attributes of the root element

We introduced this change in:

• #​5499: Rename GOVUKFrontendComponentConfigurable, export ConfigurableComponent
• #​5456: Refactor Accordion to extend from a GOVUKFrontendConfigurableComponent

Deprecated features

Importing Sass using govuk/all

You'll see a warning when compiling your Sass if you import all of GOV.UK Frontend's styling using govuk/all. Importing using the all file is deprecated, and we’ll remove it in the next major release.

In your import statements, use a trailing /index rather than /all to load GOV.UK Frontend's files:

• @import "govuk/index"; instead of @import "govuk/all";

You do not need /index at the end of each import path if you’re using Dart Sass.

This change was introduced in pull request #​5518: Deprecate govuk/all.scss and only reference govuk/index.scss internally.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5533: Fix UMD files overriding existing global

v5.7.1

Compare Source

To install this version with npm, run npm install govuk-frontend@5.7.1. You can also find more information about how to stay up to date in our documentation.

Recommended changes

Stop setting a value for File upload components

The File upload component currently supports a value parameter, which populates the value HTML attribute of the input.

However, since no modern browser supports passing a value to a file input, we've made the decision to remove this parameter. It has been deprecated and will be removed in a future version of GOV.UK Frontend.

We introduced this change in pull request #​5330: Deprecate File upload component's value parameter.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5396: Update various department brand colours

v5.7.0

Compare Source

To install this version with npm, run npm install govuk-frontend@5.7.0. You can also find more information about how to stay up to date in our documentation.

New features

The Royal Arms has been updated

The Royal Arms in the GOV.UK footer has been updated to reflect the version introduced by King Charles III.

If your service does not use the image directly from the Frontend package, you should ensure the new image is being copied to your service’s image assets folder. By default this folder is located at /assets/images.

If you’re using Nunjucks, the asset path may have been changed by the assetPath global variable or assetsPath parameter on the header component.

Copy the govuk-crest.svg file from /dist/assets/images into your assets folder.

You can safely delete the old image files, named govuk-crest.png and govuk-crest-2x.png.

We introduced this change in pull request #​5376: Update the Royal Arms graphic in footer (v5.x).

Components will not longer initialise twice on the same element

GOV.UK Frontend components now throw an error if they've already been initialised on the DOM Element they're receiving for initialisation.
This prevents components from being initialised more than once and therefore not working properly.

We introduced this change in pull request #​5272: Prevent multiple initialisations of a single component instance

Respond to initialisation errors when using createAll and initAll

We've added a new onError option for createAll and initAll that lets you respond to initialisation errors.
The functions will continue catching errors and initialising components further down the page if one component fails to initialise,
but this option will let you react to a component failing to initialise. For example, to allow reporting to an error monitoring service.

We introduced this change in:

• pull request #​5252: Add onError to createAll
• pull request #​5276: Add onError to initAll

Check if GOV.UK Frontend is supported

We've added the isSupported function to let you check if GOV.UK Frontend is supported in the browser running your script.
GOV.UK Frontend components have been checking this automatically since the release of v5.0.0, but you may want to use the isSupported function to avoid running some code when GOV.UK Frontend is not supported.

We introduced this change in pull request #​5250: Add isSupported to all.mjs

Use our base component to build your own components

We've added a Component class to help you build your own components. It allows you to focus on your components' specific features by handling these shared behaviours across components:

• checking that GOV.UK Frontend is supported
• checking that the component is not already initialised on its root element
• checking the type of the root element and storing it for access within the component as this.$root

We introduced this change in:

• pull request #​5350: Export a base Component class.
• pull request #​5354: Refactor the root type check in GOVUKFrontendComponent

New brand colour

We've added a brand colour for the Serious Fraud Office in pull request #​5389.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5278: Fix service navigation mobile toggle spacing
• #​5331: Fix Warning Text font weight when <strong> styles are reset
• #​5352: Only apply margin to details summary when open
• #​5089: Fix details expanded state not announced on iOS
• #​5332: Improve how licence description wraps in the footer

v5.6.0

Compare Source

To install this version with npm, run npm install govuk-frontend@5.6.0. You can also find more information about how to stay up to date in our documentation.

New features

Make it easier to navigate complex services with the Service navigation component

We've added a new Service navigation component to help users to navigate services with multiple top-level sections. This replaces the navigation functions of the Header component, which will be deprecated in a future release of GOV.UK Frontend.

This component includes some features we consider experimental. We intend to iterate these features in response to user feedback. These are:

• moving the service name from the Header to the Service navigation
• providing slots for injecting custom HTML into specified locations within the component

We introduced this change in pull request #​5206: Service navigation component.

v5.5.0

Compare Source

To install this version with npm, run npm install govuk-frontend@5.5.0. You can also find more information about how to stay up to date in our documentation.

New features

We've updated the list of organisations and brand colours included in Frontend

We've overhauled the list of organisations and organisation brand colours that are shipped with GOV.UK Frontend.

The previous list was outdated and had not kept up with changes to the machinery of government. We’ve updated the list to:

• add all current government departments and their brand colours
• add variants of brand colours that meet a 4.5:1 contrast ratio against white, where required
• provide warnings if defunct organisations are still being referenced in your Sass code

To enable these changes, set the feature flag variable $govuk-new-organisation-colours to true before you import GOV.UK Frontend in your Sass files:

// application.scss
$govuk-new-organisation-colours: true;
@​import "govuk-frontend/all";

You can also silence warnings about defunct organisations by adding organisation-colours to the $govuk-suppressed-warnings setting.

We introduced this change in pull request #​3407: Update organisation colours.

Stop long words breaking out of components with govuk-!-text-break-word

We've added a new override class to help display long words with no obvious break points when the space is too narrow to display them on one line. An example of a long word might be an email address entered by a user.

Wrapping the content with the govuk-!-text-break-word class forces words that are too long for the parent element to break onto a new line.

A confirmation email will be sent to <span class="govuk-!-text-break-word">arthur_phillip_dent.42@&#8203;peoplepersonalitydivision.siriuscyberneticscorporation.corp</span>.

Sass users can also use the govuk-text-break-word mixin.

We introduced this change in pull request #​5159: Add break-word typography helper.

Recommended changes

Update the $websafe parameter on the govuk-organisation-colour function

The govuk-organisation-colour Sass function's $websafe parameter has been renamed to $contrast-safe.

This is to more accurately describe the functionality of the parameter.

The old parameter name will stop working in the next major version of GOV.UK Frontend.

We introduced this change in pull request #​3407: Update organisation colours.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #​5046: Skip ‘empty’ tasks in the task list
• #​5066: Fix whitespace affecting text alignment in pagination block variant
• #​5158: Remove ↑ up and ↓ down arrow key bindings from tabs
• #​5191: Fix rendering of Back link's href and text for falsy values

---

Configuration

📅 Schedule: Branch creation - Between 12:00 AM and 03:59 AM, only on Monday ( * 0-3 * * 1 ) in timezone Europe/London, Automerge - "after 10am every weekday,before 4pm every weekday" in timezone Europe/London.

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud