@communitiesuk/svelte-component-library 0.1.17 → 0.2.0-alpha.2

package/dist/components/data-vis/map/mapUtils.d.ts

@@ -3,3 +3,5 @@ export declare function getColor(value: number, breaks: number[], colors: string
 export declare function filterGeo(geo: FeatureCollection, year: number | string): any;
 export declare function jenksBreaks(data: any, numBreaks: any): any[];
 export declare function quantileBreaks(data: number[], numBreaks: number): number[];
+export declare function createPaintObjectFromMetric(metricProperty: string, breaks: number[], fillColors: string[], fillOpacity?: number): object;
+export declare function extractVectorMetricValues(map: maplibregl.Map, layerId: string, metricProperty: string): number[];

package/dist/components/data-vis/map/mapUtils.js

@@ -84,3 +84,53 @@ export function quantileBreaks(data, numBreaks) {
     breaks.push(data[len - 1]);
     return breaks;
 }
+export function createPaintObjectFromMetric(metricProperty, breaks, fillColors, fillOpacity = 0.4) {
+    const usableLength = Math.min(breaks.length, fillColors.length);
+    breaks.sort((a, b) => a - b);
+    function parseNumberWithCommas(value) {
+        if (typeof value === "number")
+            return value;
+        const cleaned = value.toString().replace(/,/g, "").trim();
+        const parsed = Number(cleaned);
+        return isNaN(parsed) ? 0 : parsed;
+    }
+    const matchExpression = [
+        "step",
+        ["to-number", ["get", metricProperty]],
+        "#d3d3d3", // Default color
+    ];
+    for (let i = 0; i < usableLength; i++) {
+        const breakValue = parseNumberWithCommas(breaks[i]);
+        matchExpression.push(breakValue, fillColors[i]);
+    }
+    return {
+        "fill-color": matchExpression,
+        "fill-opacity": fillOpacity,
+    };
+}
+export function extractVectorMetricValues(map, layerId, metricProperty) {
+    if (!map || !map.isStyleLoaded())
+        return [];
+    const features = map.queryRenderedFeatures({ layers: [layerId] });
+    const seen = new Set();
+    return features
+        .filter((f) => {
+        const id = f.id;
+        if (!id || seen.has(id))
+            return false;
+        seen.add(id);
+        return true;
+    })
+        .map((f) => {
+        const raw = f.properties?.[metricProperty];
+        if (typeof raw === "string") {
+            const cleaned = raw.replace(/,/g, "");
+            return parseFloat(cleaned);
+        }
+        else if (typeof raw === "number") {
+            return raw;
+        }
+        return NaN;
+    })
+        .filter((v) => !isNaN(v));
+}

package/dist/components/data-vis/table/Table.svelte

@@ -1,15 +1,14 @@
 <script>
-  import Button from "../../ui/Button.svelte";
+  import Button from "./../../ui/Button.svelte";
 
   let {
-    componentNameProp = undefined,
     data = undefined,
     metaData = undefined,
     caption = undefined,
     colourScale = undefined,
   } = $props();
 
-  let localCopyOfData = $state([...data]);
+  let localCopyOfData = $derived([...data]);
 
   function hasUniqueValues(array, key) {
     const seen = new Set();
@@ -22,17 +21,6 @@
     return true; // All values are unique
   }
 
-  // $inspect(
-  //   localCopyOfData[0].areaName,
-  //   "data type is",
-  //   typeof localCopyOfData[0].areaName,
-  // );
-  // $inspect(
-  //   localCopyOfData[0]["Household waste recycling rate"],
-  //   "data type is",
-  //   typeof localCopyOfData[0]["Household waste recycling rate"],
-  // );
-
   let columns = [];
 
   for (const column in localCopyOfData[0]) {
@@ -55,8 +43,6 @@
     .filter((column) => column.dataType === "number")
     .map((column) => column.key);
 
-  // $inspect("metrics is", metrics);
-
   let sortState = $state({ column: "sortedColumn", order: "ascending" });
 
   function updateSortState(columnToSort, sortOrder) {
@@ -133,8 +119,6 @@
   }
 
   const colorKey = Object.entries({ Good: 1, Ok: 0.5, Bad: 0 });
-
-  // $inspect("the first column key is", columns[0].key);
 </script>
 
 <div class="p-4">
@@ -150,8 +134,8 @@
   {/if}
 
   <div class="table-container">
+    <div id="table-caption" class="sticky-caption">{caption}</div>
     <table class="govuk-table" data-module="moj-sortable-table">
-      <caption class="govuk-table__caption">{caption}</caption>
       <thead class="govuk-table__head"
         ><tr class="govuk-table__row">
           {#each columns as column}
@@ -159,7 +143,12 @@
               scope="col"
               class={`govuk-table__header ${column.dataType === "number" ? "govuk-table__header--numeric" : ""}`}
               title={metaData[column.key].explainer}
-              aria-sort="none"
+              aria-sort={sortState.column !== column.key
+                ? "none"
+                : sortState.column === column.key &&
+                    sortState.order === "descending"
+                  ? "descending"
+                  : "ascending"}
             >
               <div class="header">
                 <Button
@@ -187,27 +176,17 @@
             {#each columns as column}
               {#if column.dataType === "number"}
                 {#if colourScale === "On"}
-                  {#if metaData[column.key].direction === "Higher is better"}
-                    <td
-                      class="govuk-table__cell govuk-table__cell--numeric"
-                      style="background-color: {normToColor(
-                        row[column.key + '__normalised'],
-                      )}"
-                      data-sort-value="42">{row[column.key]}</td
-                    >
-                  {:else}
-                    <td
-                      class="govuk-table__cell govuk-table__cell--numeric"
-                      style="background-color: {normToColorReverse(
-                        row[column.key + '__normalised'],
-                      )}"
-                      data-sort-value="42">{row[column.key]}</td
-                    >
-                  {/if}
-                {:else}
                   <td
                     class="govuk-table__cell govuk-table__cell--numeric"
-                    data-sort-value="42">{row[column.key]}</td
+                    style="background-color: {metaData[column.key].direction ===
+                    'Higher is better'
+                      ? normToColor(row[column.key + '__normalised'])
+                      : normToColorReverse(row[column.key + '__normalised'])}"
+                    >{row[column.key]}</td
+                  >
+                {:else}
+                  <td class="govuk-table__cell govuk-table__cell--numeric"
+                    >{row[column.key]}</td
                   >
                 {/if}
               {:else}
@@ -223,8 +202,10 @@
 
 <style>
   .table-container {
-    max-height: 80vh;
+    max-height: 85vh;
     overflow-y: auto;
+    overflow-x: scroll;
+    width: 100%;
   }
 
   th {
@@ -234,6 +215,13 @@
     background-color: white;
   }
 
+  .sticky-caption {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: white;
+  }
+
   .legend {
     display: flex;
     justify-content: center;

package/dist/components/data-vis/table/Table.svelte.d.ts

@@ -4,14 +4,12 @@ type Table = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const Table: import("svelte").Component<{
-    componentNameProp?: any;
     data?: any;
     metaData?: any;
     caption?: any;
     colourScale?: any;
 }, {}, "">;
 type $$ComponentProps = {
-    componentNameProp?: any;
     data?: any;
     metaData?: any;
     caption?: any;

package/dist/components/layout/Breadcrumbs.svelte

@@ -26,11 +26,13 @@
     collapseOnMobile = false,
     inverse = false,
     ariaLabel = "Breadcrumb",
+    formatBreadcrumbText,
   } = $props<{
     items?: BreadcrumbItem[];
     collapseOnMobile?: boolean;
     inverse?: boolean;
     ariaLabel?: string;
+    formatBreadcrumbText?: (text: string[]) => string;
   }>();
 
   // Load all page modules for route detection
@@ -53,7 +55,7 @@
 
   // Effect to update breadcrumb items when dependencies change
   $effect(() => {
-    breadcrumbItems = items || generateBreadcrumbItems(page, routeModules);
+    breadcrumbItems = generateBreadcrumbItems(page, routeModules);
   });
 
   // Generate breadcrumb items from the current route
@@ -156,23 +158,19 @@
   /**
    * Converts route segments to human-readable text
    */
-  function formatBreadcrumbText(text: string): string {
+  /*function formatBreadcrumbText(text: string): string {
     // Handle special cases
-    if (text === "ui") return "UI Components";
-    if (text === "data-vis") return "Data Visualization";
-    if (text === "content") return "Content Components";
-    if (text === "layout") return "Layout Components";
-    if (text === "user-guide") return "User Guide";
-    if (text === "playground") return "Playground";
-    if (text === "components") return "Components";
-    if (text === "local-lib") return "Local Library";
+    const urlLookupObject = {
+      ui: "UI Components",
+      "data-vis": "Data Visualization",
+    };
 
     // Default: capitalize and replace hyphens with spaces
-    return text
+    return (text in urlLookupObject ? urlLookupObject[text] : text)
       .split("-")
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
       .join(" ");
-  }
+  }*/
 </script>
 
 <nav

package/dist/components/layout/Breadcrumbs.svelte.d.ts

@@ -18,6 +18,7 @@ type $$ComponentProps = {
     collapseOnMobile?: boolean;
     inverse?: boolean;
     ariaLabel?: string;
+    formatBreadcrumbText?: (text: string[]) => string;
 };
 declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
 type Breadcrumbs = ReturnType<typeof Breadcrumbs>;

package/dist/components/layout/Footer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import legacyDefaultCopyrightLogo from "./../../assets/images/govuk-crest.svg";
   // Define component props with default values
   // sections: array of footer navigation sections
   // inlineLinks: array of inline footer links
@@ -14,6 +15,8 @@
   // licenceTextBefore: Text to display before the licence link
   // licenceTextAfter: Text to display after the licence link
   // copyrightHref: URL for the crown copyright link
+  // rebrand: whether to use the new rebranded crown logo
+  // borderTopColor: custom color for the footer's top border (overrides default #1d70b8)
 
   // Define types for component props
   interface FooterItem {
@@ -21,6 +24,7 @@
     label: string;
     lang?: string;
     hrefLang?: string;
+    onclick?: (event: Event) => void;
   }
 
   interface FooterSection {
@@ -37,7 +41,7 @@
     containerWidth = "govuk-width-container",
     showLicence = true,
     showCopyright = true,
-    copyrightLogoUrl = "/assets/images/govuk-crest.svg",
+    copyrightLogoUrl,
     copyrightText = "© Crown copyright",
     crownSvgPath = "M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145",
     licenceHref = "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/",
@@ -45,6 +49,8 @@
     licenceTextBefore = "All content is available under the ",
     licenceTextAfter = ", except where otherwise stated",
     copyrightHref = "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/",
+    rebrand = true,
+    borderTopColor = "#00625E",
   } = $props<{
     sections?: FooterSection[];
     inlineLinks?: FooterItem[];
@@ -60,12 +66,46 @@
     licenceTextBefore?: string;
     licenceTextAfter?: string;
     copyrightHref?: string;
+    rebrand?: boolean;
+    borderTopColor?: string;
   }>();
 </script>
 
 <!-- Main footer container -->
-<footer class="govuk-footer">
+<footer
+  class="govuk-footer"
+  class:govuk-footer--rebranded={rebrand}
+  style:border-top-color={borderTopColor}
+>
   <div class={containerWidth}>
+    {#if rebrand}
+      <!-- New rebranded crown logo for footer -->
+      <svg
+        focusable="false"
+        role="presentation"
+        xmlns="http://www.w3.org/2000/svg"
+        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>
+    {/if}
+
     <!-- Navigation sections (optional) -->
     {#if sections.length > 0}
       <div class="govuk-footer__navigation">
@@ -117,6 +157,7 @@
                   href={link.href}
                   lang={link.lang}
                   hreflang={link.hrefLang}
+                  onclick={link.onclick}
                 >
                   {link.label}
                 </a>
@@ -157,10 +198,34 @@
       <!-- Crown copyright section (optional) -->
       {#if showCopyright}
         <div class="govuk-footer__meta-item">
+          <!-- 
+            Copyright logo handling:
+            
+            The GOV.UK Frontend CSS uses a ::before pseudo-element on .govuk-footer__copyright-logo
+            to display the crown logo. This creates conflicts when we want to use custom logos.
+            
+            Our approach:
+            1. When using a custom logo (copyrightLogoUrl provided):
+               - Remove the govuk-footer__copyright-logo class to disable the pseudo-element
+               - Apply explicit background-image styles to show the custom logo
+            
+            2. When using default logos:
+               - Rebrand mode: Let the CSS pseudo-element handle it (uses rebrand assets)
+               - Legacy mode: Always use explicit styling (uses legacy assets)
+            
+            This prevents logo duplication/overlap while maintaining backward compatibility.
+          -->
           <a
-            class="govuk-footer__link govuk-footer__copyright-logo"
+            class={[
+              "govuk-footer__link",
+              {
+                "govuk-footer__copyright-logo": !copyrightLogoUrl && rebrand,
+              },
+            ]}
             href={copyrightHref}
-            style="background-image: url({copyrightLogoUrl});"
+            style={copyrightLogoUrl || !rebrand
+              ? `background-image: url(${copyrightLogoUrl ?? legacyDefaultCopyrightLogo}); display: block; width: 100%; padding-top: 112px; background-repeat: no-repeat; background-position: 50% 0; background-size: 125px 102px; text-align: center;`
+              : ""}
           >
             {copyrightText}
           </a>

package/dist/components/layout/Footer.svelte.d.ts

@@ -3,6 +3,7 @@ interface FooterItem {
     label: string;
     lang?: string;
     hrefLang?: string;
+    onclick?: (event: Event) => void;
 }
 interface FooterSection {
     title: string;
@@ -24,6 +25,8 @@ type $$ComponentProps = {
     licenceTextBefore?: string;
     licenceTextAfter?: string;
     copyrightHref?: string;
+    rebrand?: boolean;
+    borderTopColor?: string;
 };
 declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/components/layout/Header.svelte

@@ -4,9 +4,14 @@ Most services on GOV.UK should use the default GOV.UK header.
 It should only show the GOV.UK logo and any GOV.UK-wide links and tools to help your users. Do not add the menu of GOV.UK topic links to your service's GOV.UK header. -->
 
 <script lang="ts">
-  let { fullWidthBorder = false, homepageUrl = "/" } = $props<{
+  let {
+    fullWidthBorder = false,
+    homepageUrl = "/",
+    rebrand = true,
+  } = $props<{
     fullWidthBorder?: boolean;
     homepageUrl?: string;
+    rebrand?: boolean;
   }>();
 </script>
 
@@ -22,21 +27,56 @@ It should only show the GOV.UK logo and any GOV.UK-wide links and tools to help
         href={homepageUrl}
         class="govuk-header__link govuk-header__link--homepage"
       >
-        <svg
-          focusable="false"
-          role="img"
-          class="govuk-header__logotype"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 148 30"
-          height="30"
-          width="148"
-          aria-label="GOV.UK"
-        >
-          <title>GOV.UK</title>
-          <path
-            d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"
-          ></path>
-        </svg>
+        {#if rebrand}
+          <!-- New rebranded GOV.UK logo with integrated crown -->
+          <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.7s4,.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>
+        {:else}
+          <!-- Original GOV.UK logo -->
+          <svg
+            focusable="false"
+            role="img"
+            class="govuk-header__logotype"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 148 30"
+            height="30"
+            width="148"
+            aria-label="GOV.UK"
+          >
+            <title>GOV.UK</title>
+            <path
+              d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"
+            ></path>
+          </svg>
+        {/if}
       </a>
     </div>
   </div>

package/dist/components/layout/Header.svelte.d.ts

@@ -1,6 +1,7 @@
 type $$ComponentProps = {
     fullWidthBorder?: boolean;
     homepageUrl?: string;
+    rebrand?: boolean;
 };
 declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
 type Header = ReturnType<typeof Header>;