@communitiesuk/svelte-component-library 0.1.19-beta.2 → 0.1.19-beta.21

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";
@@ -51,6 +52,11 @@
     hint?: string; // Add hint prop
     selectedValue?: any; // Bindable selected value, updated on selection
     maxSuggestions?: number; // Maximum number of suggestions to display
+    autoselect?: boolean; // Auto-highlight first suggestion
+    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 {
@@ -85,6 +91,11 @@
     hint = undefined, // Add hint destructuring
     selectedValue = $bindable(), // Bindable prop for selected value
     maxSuggestions = undefined, // Maximum number of suggestions to display
+    autoselect = true, // Default to false as per library default
+    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();
 
@@ -254,19 +265,50 @@
           populateResults([]);
           return;
         }
+
         const lowerQuery = query.toLowerCase();
-        const filtered = options.filter((option) => {
-          const label = typeof option === "string" ? option : option.label;
-          return label.toLowerCase().includes(lowerQuery);
-        });
 
-        // Apply maxSuggestions limit if specified
-        const limitedResults =
-          maxSuggestions && maxSuggestions > 0
-            ? filtered.slice(0, maxSuggestions)
-            : filtered;
+        if (prefixMatchOnly) {
+          // Only show suggestions that start with the query
+          const filtered = options.filter((option) => {
+            const label = typeof option === "string" ? option : option.label;
+            return label.toLowerCase().startsWith(lowerQuery);
+          });
+
+          // Apply maxSuggestions limit if specified
+          const limitedResults =
+            maxSuggestions && maxSuggestions > 0
+              ? filtered.slice(0, maxSuggestions)
+              : filtered;
+
+          populateResults(limitedResults);
+        } else {
+          // Split results into two groups: starts-with and contains (existing behavior)
+          const startsWithResults: Suggestion[] = [];
+          const containsResults: Suggestion[] = [];
+
+          options.forEach((option) => {
+            const label = typeof option === "string" ? option : option.label;
+            const lowerLabel = label.toLowerCase();
+
+            if (lowerLabel.startsWith(lowerQuery)) {
+              startsWithResults.push(option);
+            } else if (lowerLabel.includes(lowerQuery)) {
+              containsResults.push(option);
+            }
+          });
 
-        populateResults(limitedResults);
+          // Combine results: starts-with first (for better hint behavior), then contains
+          const filtered = [...startsWithResults, ...containsResults];
+
+          // Apply maxSuggestions limit if specified
+          const limitedResults =
+            maxSuggestions && maxSuggestions > 0
+              ? filtered.slice(0, maxSuggestions)
+              : filtered;
+
+          populateResults(limitedResults);
+        }
       };
 
       // Determine which source to use
@@ -297,6 +339,7 @@
       const dynamicSourceFunction = sourceSelector
         ? (query: string, populateResults: (results: Suggestion[]) => void) => {
             const selectedSource = sourceSelector(query, options || []);
+
             // Handle invalid returns by falling back to default logic
             if (selectedSource === "api") {
               getResultsFromApi(query, populateResults);
@@ -368,34 +411,39 @@
       const handleConfirm = (confirmedValue: Suggestion | undefined) => {
         if (confirmedValue === undefined || isSubmitting) return;
 
-        // 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
+        isSubmitting = true;
+
+        // 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");
-
-        if (!inputElement || !form) return;
+        if (inputElement) {
+          inputElement.value = inputValueTemplate(confirmedValue);
+          inputElement.dataset.autocompleteAccepted = "true";
+        }
 
-        isSubmitting = true;
-        inputElement.value = inputValueTemplate(confirmedValue);
-        inputElement.dataset.autocompleteAccepted = "true"; // Set tracking attribute
+        // Auto-focus submit button if enabled
+        if (autoFocusSubmitOnSelection) {
+          const submitButton = containerElement?.querySelector(
+            'button[type="submit"]',
+          ) as HTMLButtonElement | null;
+          if (submitButton) {
+            requestAnimationFrame(() => submitButton.focus());
+          }
+        }
 
-        // Submit form
-        if (form.requestSubmit) {
-          form.requestSubmit();
-        } else {
-          form.submit(); // Fallback for older browsers
+        // Submit form if present
+        const form = containerElement?.closest("form");
+        if (form) {
+          form.requestSubmit?.() ?? form.submit();
         }
-        // Reset flag after a short delay in case submission fails/is prevented
-        setTimeout(() => {
-          isSubmitting = false;
-        }, 500);
+
+        isSubmitting = false;
       };
 
       // Initialise accessible-autocomplete
@@ -406,6 +454,8 @@
         inputClasses: searchInput.classList, // Pass original classes directly
         source: finalSourceFunction,
         minLength: minLength,
+        autoselect: autoselect,
+        hintClasses: hideHint ? "hidden-hint" : "",
         confirmOnBlur: confirmOnBlur,
         showNoOptionsFound: showNoOptionsFound,
         defaultValue: defaultValue,
@@ -430,10 +480,8 @@
       const autocompleteInputElement = containerElement?.querySelector(
         ".gem-c-search-with-autocomplete__input",
       ) as HTMLInputElement | null;
-      // console.log(
-      //   "SearchAutocomplete: Input element queried from DOM:",
-      //   autocompleteInputElement,
-      // ); // Updated log
+
+      // Apply hint visibility classes via hintClasses API
 
       // Post-initialisation tweaks
       if (autocompleteInputElement) {
@@ -444,8 +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");
+            isSubmitting = false;
+          }
+
           // Remove any existing 'too-short' warning before adding a new one to ensure we don't accumulate multiple warning items.
           suggestionsMenu
             ?.querySelector(
@@ -476,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";
@@ -499,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) {
@@ -539,6 +632,64 @@
       position: relative;
     }
 
+    /* Hide hint when requested via hintClasses - must come AFTER the default styling for proper cascade */
+    .gem-c-search-with-autocomplete
+      .gem-c-search-with-autocomplete__hint.hidden-hint {
+      display: none !important;
+      visibility: hidden !important;
+    }
+
+    /* Default hint styling when visible - ensure smooth overlapping with main input */
+    .gem-c-search-with-autocomplete .gem-c-search-with-autocomplete__hint {
+      /* Use identical positioning and sizing as main input */
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      z-index: 99 !important;
+
+      /* Visual styling for hint */
+      color: rgba(0, 0, 0, 0.4);
+      background: transparent;
+      pointer-events: none;
+
+      /* Copy EXACT styling from main input */
+      margin: 0;
+      width: 100%;
+      height: 2.1052631579em;
+      padding: 0.3157894737em;
+      border: 2px solid transparent; /* Transparent instead of visible */
+      border-radius: 0;
+      box-sizing: border-box;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      font-family: "GDS Transport", arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      font-weight: 400;
+      font-size: 1.1875rem;
+      line-height: 1.4736842105;
+
+      /* Text alignment */
+      text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+
+      /* Ensure visibility - but allow hidden-hint to override */
+      display: block;
+      visibility: visible;
+      opacity: 1;
+    }
+
+    /* Custom focus styles for submit button (when focused after autocomplete selection) */
+    .gem-c-search-with-autocomplete .gem-c-search__submit:focus {
+      background-color: #ffdd00; /* GDS focus yellow */
+      border-color: #0b0c0c; /* GDS text color for contrast */
+      color: #0b0c0c; /* Dark text on yellow background */
+      outline: 3px solid #ffdd00;
+      outline-offset: 0;
+    }
+
     .gem-c-search-with-autocomplete__menu {
       margin: 0;
       padding: 0;

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

@@ -36,6 +36,11 @@ type Props = {
     hint?: string;
     selectedValue?: any;
     maxSuggestions?: number;
+    autoselect?: boolean;
+    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/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("#");
@@ -70,7 +75,7 @@
   // 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 +112,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 +120,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 +230,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 +284,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 +307,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 +324,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,7 @@
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.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 +29,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

@@ -2,6 +2,7 @@
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.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 +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';