@communitiesuk/svelte-component-library 0.1.19-beta.3 → 0.1.19-beta.33

package/dist/components/ui/RelatedContent.svelte

@@ -30,11 +30,13 @@
     headingLevel = 2 as 1 | 2 | 3 | 4 | 5 | 6, // Main heading level (used by first 'main' section)
     listTruncateThreshold = 5, // Default threshold, can be overridden per section
     disableGa4 = false,
+    marginBottom = "60px",
   } = $props<{
     sections?: RelatedContentSection[];
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     listTruncateThreshold?: number; // Default threshold
     disableGa4?: boolean;
+    marginBottom?: string;
   }>();
 
   // Helper to check if a link is external
@@ -229,6 +231,7 @@
   class="gem-c-related-navigation govuk-!-display-none-print {hasJavaScript
     ? 'govuk-frontend-supported'
     : ''}"
+  style="margin-bottom: {marginBottom};"
   role="complementary"
 >
   {#if mainSection && mainSection.title}
@@ -304,7 +307,7 @@
 <style>
   .gem-c-related-navigation {
     border-top: 2px solid #1d70b8;
-    margin-bottom: 60px;
+    /* margin-bottom: 60px; */
     color: #0b0c0c;
   }
 

package/dist/components/ui/RelatedContent.svelte.d.ts

@@ -24,6 +24,7 @@ type $$ComponentProps = {
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     listTruncateThreshold?: number;
     disableGa4?: boolean;
+    marginBottom?: string;
 };
 declare const RelatedContent: import("svelte").Component<$$ComponentProps, {}, "">;
 type RelatedContent = ReturnType<typeof RelatedContent>;

package/dist/components/ui/SearchAutocomplete.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { clsx } from "clsx";
+  import { on } from "svelte/events";
   import Search from "./Search.svelte"; // Base component
   import "accessible-autocomplete/dist/accessible-autocomplete.min.css";
   import { browser } from "$app/environment";
@@ -55,6 +56,7 @@
     hideHint?: boolean; // Hide the hint input element when autoselect is true
     prefixMatchOnly?: boolean; // Only show suggestions that start with the query (better for hint behavior)
     autoFocusSubmitOnSelection?: boolean; // Auto-focus submit button when selection is confirmed
+    allowFreeTextSubmission?: boolean; // Treat free-typed input as confirmed when submitted (works with or without form)
   };
 
   let {
@@ -93,6 +95,7 @@
     hideHint = false, // Default to false - show hint by default
     prefixMatchOnly = false, // Default to false - show all matches
     autoFocusSubmitOnSelection = false, // Default to false - don't auto-focus by default
+    allowFreeTextSubmission = false, // Default to false - only confirmed suggestions submit
     ...restSearchProps // Other props for the base Search component
   }: Props = $props();
 
@@ -105,8 +108,6 @@
   let currentSourceKey = $state<string | undefined>(undefined);
   let currentSourceProperty = $state<string | undefined>(undefined);
 
-
-
   // --- Derived Values ---
   const wrapperClasses = $derived(
     clsx(
@@ -408,55 +409,41 @@
       // Define confirm function
       let isSubmitting = false; // Prevent double submit
       const handleConfirm = (confirmedValue: Suggestion | undefined) => {
-        console.log('handleConfirm called with:', confirmedValue, 'isSubmitting:', isSubmitting); // Debug log
-        
-        if (confirmedValue === undefined) return;
-        
-        // Reset submitting flag at the start of each new confirmation
-        isSubmitting = false;
+        if (confirmedValue === undefined || isSubmitting) return;
+
+        isSubmitting = true;
 
-        // Re-assign selectedValue before any form-based guard checks (!form) so bindings still update
-        // (e.g. when no <form> exists around the component usage) and search component value is being used clienside without a page reload
+        // Update selectedValue
         selectedValue =
           typeof confirmedValue === "string"
             ? confirmedValue
             : confirmedValue.value;
 
-        // Type assertion needed here
+        // Mark as accepted to prevent form submit handler from processing again
         const inputElement =
           autocompleteInstance?.inputElement as HTMLInputElement;
-        const form = containerElement?.closest("form");
-        const submitButton = containerElement?.querySelector('button[type="submit"]') as HTMLButtonElement;
-        
-        console.log('Submit button found:', !!submitButton); // Debug log
-
-        // Always focus the submit button first, regardless of form presence (if feature is enabled)
-        if (autoFocusSubmitOnSelection && submitButton) {
-          console.log('Focusing submit button'); // Debug log
-          // Use requestAnimationFrame to ensure the focus happens after DOM updates
-          requestAnimationFrame(() => {
-            submitButton.focus();
-            console.log('Submit button focused, document.activeElement:', document.activeElement === submitButton);
-          });
+        if (inputElement) {
+          inputElement.value = inputValueTemplate(confirmedValue);
+          inputElement.dataset.autocompleteAccepted = "true";
         }
 
-        // Handle form submission separately
-        if (inputElement && form) {
-          isSubmitting = true;
-          inputElement.value = inputValueTemplate(confirmedValue);
-          inputElement.dataset.autocompleteAccepted = "true"; // Set tracking attribute
-
-          // Submit form immediately
-          console.log('Submitting form'); // Debug log
-          if (form.requestSubmit) {
-            form.requestSubmit();
-          } else {
-            form.submit(); // Fallback for older browsers
+        // Auto-focus submit button if enabled
+        if (autoFocusSubmitOnSelection) {
+          const submitButton = containerElement?.querySelector(
+            'button[type="submit"]',
+          ) as HTMLButtonElement | null;
+          if (submitButton) {
+            requestAnimationFrame(() => submitButton.focus());
           }
-          
-          // Reset flag after submission
-          isSubmitting = false;
         }
+
+        // Submit form if present
+        const form = containerElement?.closest("form");
+        if (form) {
+          form.requestSubmit?.() ?? form.submit();
+        }
+
+        isSubmitting = false;
       };
 
       // Initialise accessible-autocomplete
@@ -505,15 +492,15 @@
             ".gem-c-search-with-autocomplete__menu",
           );
         // Listen for input changes on the autocomplete field
-        autocompleteInputElement.addEventListener("input", () => {
+        on(autocompleteInputElement, "input", () => {
           const val = autocompleteInputElement.value;
-          
+
           // Reset isSubmitting flag when user starts typing again
           if (isSubmitting) {
-            console.log('User typing, resetting isSubmitting flag');
+            console.log("User typing, resetting isSubmitting flag");
             isSubmitting = false;
           }
-          
+
           // Remove any existing 'too-short' warning before adding a new one to ensure we don't accumulate multiple warning items.
           suggestionsMenu
             ?.querySelector(
@@ -544,7 +531,7 @@
         // autocompleteInputElement.classList.add("autocomplete__input"); // Add specific class if needed
 
         // Add Enter key workaround from original JS
-        autocompleteInputElement.addEventListener("keydown", (e) => {
+        on(autocompleteInputElement, "keydown", (e) => {
           if (isSubmitting) return; // Don't interfere if already submitting
           const dropdownVisible =
             autocompleteInputElement.getAttribute("aria-expanded") === "true";
@@ -567,6 +554,44 @@
         // );
       }
 
+      // Handle free-text submission when allowFreeTextSubmission is enabled
+      // handleConfirm is only called by the library when selecting from dropdown
+      // We need to catch: (1) form submit events, (2) button clicks outside forms
+      if (allowFreeTextSubmission) {
+        const updateFreeText = () => {
+          if (!autocompleteInputElement) return;
+
+          const wasAccepted =
+            autocompleteInputElement.dataset.autocompleteAccepted === "true";
+          const value = autocompleteInputElement.value?.trim();
+
+          if (value && !wasAccepted) {
+            selectedValue = value;
+          }
+
+          // Reset flag after submission
+          setTimeout(() => {
+            if (autocompleteInputElement) {
+              autocompleteInputElement.dataset.autocompleteAccepted = "false";
+            }
+          }, 100);
+        };
+
+        // Handle form submission
+        const form = containerElement?.closest("form");
+        if (form) {
+          on(form, "submit", updateFreeText);
+        }
+
+        // Handle button clicks (for non-form usage)
+        const submitButton = containerElement?.querySelector(
+          'button[type="submit"]',
+        ) as HTMLButtonElement | null;
+        if (submitButton && !form) {
+          on(submitButton, "click", updateFreeText);
+        }
+      }
+
       // IMPORTANT: Remove the original Search.svelte input, as accessible-autocomplete replaces it.
       // We render it initially so accessible-autocomplete can grab its id, name, value.
       if (searchInput) {

package/dist/components/ui/SearchAutocomplete.svelte.d.ts

@@ -40,6 +40,7 @@ type Props = {
     hideHint?: boolean;
     prefixMatchOnly?: boolean;
     autoFocusSubmitOnSelection?: boolean;
+    allowFreeTextSubmission?: boolean;
 };
 declare const SearchAutocomplete: import("svelte").Component<Props, {}, "selectedValue">;
 type SearchAutocomplete = ReturnType<typeof SearchAutocomplete>;

package/dist/components/ui/Select.svelte

@@ -225,20 +225,31 @@
 
 <style>
   .select-row {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: stretch;
-    -moz-column-gap: 0;
-         column-gap: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.5rem;
+    width: 100%;
   }
 
   .select-cell {
+    flex: 0 1 auto;
     min-width: 0;
+    max-width: 100%;
   }
 
   .select-addon {
     display: flex;
-    align-items: stretch; /* match .choices container height */
-    max-height: 46px;
+    align-items: stretch;
+    flex: 0 0 auto;
+  }
+
+  .govuk-select {
+    max-width: 100%;
+    min-width: 0;
+    padding-right: 2rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 </style>

package/dist/components/ui/Tabs.svelte

@@ -19,12 +19,14 @@
     idPrefix = "tab",
     selectedTabId = $bindable(),
     autoAddHeadings = true,
+    forceTabBehavior = false,
   } = $props<{
     title?: string;
     tabs: TabItem[];
     idPrefix?: string;
     selectedTabId?: string | null;
     autoAddHeadings?: boolean;
+    forceTabBehavior?: boolean;
   }>();
 
   // Component state variables
@@ -32,6 +34,9 @@
   let isSupported = $state(false);
   let isMobile = $state(false);
 
+  // Derived value: use mobile behavior only if isMobile is true AND forceTabBehavior is false
+  let useMobileBehavior = $derived(isMobile && !forceTabBehavior);
+
   // DOM element references for programmatic focus
   let tabElements: { [key: string]: HTMLAnchorElement } = {};
 
@@ -56,7 +61,7 @@
     }
 
     // Update URL hash on non-mobile views
-    if (!isMobile) {
+    if (!useMobileBehavior) {
       // Use history.replaceState to update the displayed URL hash without causing scroll/navigation.
       const currentUrl = window.location.href;
       const hashIndex = currentUrl.indexOf("#");
@@ -67,10 +72,12 @@
     }
   }
 
+  //$inspect(isSupported, "isSupported");
+
   // Handle keyboard navigation
   function handleKeydown(event: KeyboardEvent, currentIndex: number): void {
     // Skip navigation on mobile or if component isn't ready
-    if (isMobile || !isSupported || !isInitialized) return;
+    if (useMobileBehavior || !isSupported || !isInitialized) return;
 
     // Initialize to null, indicating no valid navigation key pressed yet.
     // Will be updated to a valid index (0+) if ArrowLeft/Right is pressed.
@@ -107,7 +114,7 @@
   // Handle tab click
   function handleTabClick(event: MouseEvent, tabId: string): void {
     // On mobile or without JS support, let default browser behavior happen
-    if (isMobile || !isSupported) return;
+    if (useMobileBehavior || !isSupported) return;
     event.preventDefault();
     selectTab(tabId);
   }
@@ -115,7 +122,7 @@
   // Handle hash change
   function handleHashChange(): void {
     // Skip on mobile or when not properly initialized
-    if (isMobile || !isSupported || !isInitialized) return;
+    if (useMobileBehavior || !isSupported || !isInitialized) return;
 
     const hash = window.location.hash.substring(1);
     if (hash && tabs.some((tab) => tab.id === hash)) {
@@ -225,32 +232,45 @@
   });
 </script>
 
-<div class="govuk-tabs" data-module="govuk-tabs">
+<div
+  class="govuk-tabs"
+  data-module="govuk-tabs"
+  data-force-desktop={forceTabBehavior || null}
+>
   <h2 class="govuk-tabs__title">
     {title}
   </h2>
 
   <ul
     class="govuk-tabs__list"
-    role={isSupported && !isMobile ? "tablist" : null}
+    role={isSupported && !useMobileBehavior ? "tablist" : null}
   >
     {#each tabs as tab, index}
       {@const isSelected = selectedTabId === tab.id}
       {#key tab.id}
         <li
           class="govuk-tabs__list-item"
-          class:govuk-tabs__list-item--selected={isSelected && !isMobile}
-          role={isSupported && !isMobile ? "presentation" : null}
+          class:govuk-tabs__list-item--selected={isSelected &&
+            !useMobileBehavior}
+          role={isSupported && !useMobileBehavior ? "presentation" : null}
         >
           <!-- svelte-ignore binding_property_non_reactive -->
           <a
             class="govuk-tabs__tab"
             href={"#" + tab.id}
-            id={isSupported && !isMobile ? `${idPrefix}_${tab.id}` : null}
-            role={isSupported && !isMobile ? "tab" : null}
-            aria-controls={isSupported && !isMobile ? tab.id : null}
-            aria-selected={isSupported && !isMobile ? isSelected : null}
-            tabindex={isSupported && !isMobile ? (isSelected ? 0 : -1) : null}
+            id={isSupported && !useMobileBehavior
+              ? `${idPrefix}_${tab.id}`
+              : null}
+            role={isSupported && !useMobileBehavior ? "tab" : null}
+            aria-controls={isSupported && !useMobileBehavior ? tab.id : null}
+            aria-selected={isSupported && !useMobileBehavior
+              ? isSelected
+              : null}
+            tabindex={isSupported && !useMobileBehavior
+              ? isSelected
+                ? 0
+                : -1
+              : null}
             onclick={(e) => handleTabClick(e, tab.id)}
             onkeydown={(e) => handleKeydown(e, index)}
             bind:this={tabElements[tab.id]}
@@ -266,13 +286,15 @@
     {@const isSelected = selectedTabId === tab.id}
     <div
       class="govuk-tabs__panel"
-      class:govuk-tabs__panel--hidden={!isSelected && isSupported && !isMobile}
+      class:govuk-tabs__panel--hidden={!isSelected &&
+        isSupported &&
+        !useMobileBehavior}
       id={tab.id}
-      role={isSupported && !isMobile ? "tabpanel" : null}
-      aria-labelledby={isSupported && !isMobile
+      role={isSupported && !useMobileBehavior ? "tabpanel" : null}
+      aria-labelledby={isSupported && !useMobileBehavior
         ? `${idPrefix}_${tab.id}`
         : null}
-      hidden={!isSelected && isSupported && !isMobile}
+      hidden={!isSelected && isSupported && !useMobileBehavior}
     >
       {#if autoAddHeadings}
         <h2 class="govuk-heading-l">{tab.label}</h2>
@@ -287,7 +309,8 @@
       {:else if tab.content satisfies Snippet}
         {@render tab.content()}
       {:else if tab.content}
-        <svelte:component this={tab.content} />
+        {@const Component = tab.content}
+        <Component />
       {/if}
     </div>
   {/each}
@@ -303,4 +326,155 @@
   .govuk-tabs__panel--hidden {
     display: none;
   }
+
+  /* 
+   * Force desktop tab appearance when forceTabBehavior is enabled
+   * These styles are copied verbatim from GOV.UK Frontend's desktop (40.0625em+) styles
+   * but applied at mobile breakpoints when data-force-desktop attribute is present
+   */
+  @media (max-width: 40.0624em) {
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list {
+      margin-bottom: 0;
+      border-bottom: 1px solid #b1b4b6;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list:after {
+      content: "";
+      display: block;
+      clear: both;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__title {
+      display: none;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list-item {
+      position: relative;
+      margin-right: 5px;
+      margin-bottom: 0;
+      margin-left: 0;
+      padding: 10px 20px;
+      float: left;
+      background-color: #f3f2f1;
+      text-align: center;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list-item:before {
+      content: none;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list-item--selected {
+      position: relative;
+      margin-top: -5px;
+      margin-bottom: -1px;
+      padding: 14px 19px 16px;
+      border: 1px solid #b1b4b6;
+      border-bottom: 0;
+      background-color: #fff;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__list-item--selected
+      .govuk-tabs__tab {
+      text-decoration: none;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab {
+      margin-bottom: 0;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:link,
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:visited {
+      color: #0b0c0c;
+    }
+
+    @media print {
+      :global(.govuk-frontend-supported)
+        .govuk-tabs[data-force-desktop]
+        .govuk-tabs__tab:link,
+      :global(.govuk-frontend-supported)
+        .govuk-tabs[data-force-desktop]
+        .govuk-tabs__tab:visited {
+        color: #000;
+      }
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:hover {
+      color: rgba(11, 12, 12, 0.99);
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:active,
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:focus {
+      color: #0b0c0c;
+    }
+
+    @media print {
+      :global(.govuk-frontend-supported)
+        .govuk-tabs[data-force-desktop]
+        .govuk-tabs__tab:active,
+      :global(.govuk-frontend-supported)
+        .govuk-tabs[data-force-desktop]
+        .govuk-tabs__tab:focus {
+        color: #000;
+      }
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__tab:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__panel {
+      margin-bottom: 0;
+      padding: 30px 20px;
+      border: 1px solid #b1b4b6;
+      border-top: 0;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__panel
+      > :last-child {
+      margin-bottom: 0;
+    }
+
+    :global(.govuk-frontend-supported)
+      .govuk-tabs[data-force-desktop]
+      .govuk-tabs__panel--hidden {
+      display: none;
+    }
+  }
 </style>

package/dist/components/ui/Tabs.svelte.d.ts

@@ -12,6 +12,7 @@ type $$ComponentProps = {
     idPrefix?: string;
     selectedTabId?: string | null;
     autoAddHeadings?: boolean;
+    forceTabBehavior?: boolean;
 };
 declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "selectedTabId">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.svelte';
+export { default as Tag } from './components/content/Tag.svelte';
 export { default as WarningText } from './components/content/WarningText.svelte';
+export { default as Histogram } from './components/data-vis/Histogram.svelte';
 export { default as Axis } from './components/data-vis/axis/Axis.svelte';
 export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
 export { default as Line } from './components/data-vis/line-chart/Line.svelte';
@@ -28,8 +30,11 @@ export { default as MobileNav } from './components/layout/service-navigation-nes
 export { default as ServiceNavigationNestedMobile } from './components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte';
 export { default as SideNav } from './components/layout/service-navigation-nested-mobile/SideNav.svelte';
 export { default as Accordion } from './components/ui/Accordion.svelte';
+export { default as BasicMultiSelect } from './components/ui/BasicMultiSelect.svelte';
 export { default as Button } from './components/ui/Button.svelte';
 export { default as Card } from './components/ui/Card.svelte';
+export { default as CardHeader } from './components/ui/CardHeader.svelte';
+export { default as ChartExporter } from './components/ui/ChartExporter.svelte';
 export { default as CheckBox } from './components/ui/CheckBox.svelte';
 export { default as ContentsList } from './components/ui/ContentsList.svelte';
 export { default as CookieBanner } from './components/ui/CookieBanner.svelte';

package/dist/index.js

@@ -1,7 +1,9 @@
 // this file is auto-generated — do not edit by hand
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.svelte';
+export { default as Tag } from './components/content/Tag.svelte';
 export { default as WarningText } from './components/content/WarningText.svelte';
+export { default as Histogram } from './components/data-vis/Histogram.svelte';
 export { default as Axis } from './components/data-vis/axis/Axis.svelte';
 export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
 export { default as Line } from './components/data-vis/line-chart/Line.svelte';
@@ -29,8 +31,11 @@ export { default as MobileNav } from './components/layout/service-navigation-nes
 export { default as ServiceNavigationNestedMobile } from './components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte';
 export { default as SideNav } from './components/layout/service-navigation-nested-mobile/SideNav.svelte';
 export { default as Accordion } from './components/ui/Accordion.svelte';
+export { default as BasicMultiSelect } from './components/ui/BasicMultiSelect.svelte';
 export { default as Button } from './components/ui/Button.svelte';
 export { default as Card } from './components/ui/Card.svelte';
+export { default as CardHeader } from './components/ui/CardHeader.svelte';
+export { default as ChartExporter } from './components/ui/ChartExporter.svelte';
 export { default as CheckBox } from './components/ui/CheckBox.svelte';
 export { default as ContentsList } from './components/ui/ContentsList.svelte';
 export { default as CookieBanner } from './components/ui/CookieBanner.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.3",
+  "version": "0.1.19-beta.33",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"
@@ -101,13 +101,16 @@
     "@types/dompurify": "^3.0.5",
     "accessible-autocomplete": "^3.0.1",
     "choices.js": "^11.1.0",
+    "chroma-js": "^3.2.0",
     "csv-parser": "^3.0.0",
     "d3": "^7.9.0",
+    "d3-array": "^3.2.4",
     "decimal.js": "^10.5.0",
     "dompurify": "^3.2.5",
     "flowbite-svelte-icons": "^2.0.3",
     "gh-pages": "^6.3.0",
     "govuk-frontend": "^5.11.1",
+    "html-to-image": "^1.11.13",
     "labelplacer": "^0.0.0",
     "leaflet": "^1.9.4",
     "mapbox-gl": "^1.13.3",