feat(Search): Use Vite asset imports for cancel and suggestion icons

Refactors Search and SearchAutocomplete components to use Vite's ?url import suffix for SVG icons used in CSS (icon-close.svg and icon-autocomplete-search-suggestion.svg).
This ensures that:
Vite bundles and hashes these assets correctly.
CSS url() references are resolved to the correct, hashed asset paths at build time.
Icons are reliably displayed when components are consumed by other applications.
The implementation uses CSS Custom Properties to pass the Vite-generated asset URLs from the Svelte script scope to the CSS style scope. This addresses issues where relative paths in <style> tags were not being correctly resolved at runtime in consuming applications.

Author: Ibrahim-Haizel

src/lib/components/ui/Search.svelte

@@ -3,6 +3,7 @@
   import { browser } from "$app/environment";
   import { onMount } from "svelte";
   import IconSearch from "$lib/icons/IconSearch.svelte";
+  import closeIconUrl from "$lib/assets/govuk_publishing_components/images/icon-close.svg?url";
 
   // SSR-safe HTML sanitizer: no-op on server
   let sanitize = $state<(html: string) => string>((html) => html);
@@ -216,6 +217,7 @@
             : undefined}
         autocorrect={correctionValue}
         autocapitalize={correctionValue}
+        style={`--cancel-icon: url("${closeIconUrl}")`}
       />
     </div>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
@@ -358,8 +360,7 @@
 
   .gem-c-search__input[type="search"]::-webkit-search-cancel-button {
     -webkit-appearance: none;
-    /* Use a relative path so Vite bundles the asset */
-    background-image: url(../../assets/govuk_publishing_components/images/icon-close.svg);
+    background-image: var(--cancel-icon);
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;

src/lib/components/ui/SearchAutocomplete.svelte

@@ -4,6 +4,9 @@
   import Search from "$lib/components/ui/Search.svelte"; // Base component
   import "accessible-autocomplete/dist/accessible-autocomplete.min.css";
   import { browser } from "$app/environment";
+  import suggestionIconUrl from "$lib/assets/govuk_publishing_components/images/icon-autocomplete-search-suggestion.svg?url";
+  import closeIconUrl from "$lib/assets/govuk_publishing_components/images/icon-close.svg?url"; // Import for the cancel button
+  
 
   // SSR-safe HTML sanitizer: no-op on server
   let sanitize: (html: string) => string = (html) => html;
@@ -341,42 +344,45 @@
       //   autocompleteInputElement,
       // ); // Updated log
 
-    // Post-initialisation tweaks
-    if (autocompleteInputElement) {
-      // Post-init: dynamically show a 'too-short' warning when the user types fewer than minLength characters
-      // Find the dropdown menu <ul> generated by accessible-autocomplete
-      const suggestionsMenu = containerElement.querySelector<HTMLUListElement>(
-        ".gem-c-search-with-autocomplete__menu",
-      );
-      // Listen for input changes on the autocomplete field
-      autocompleteInputElement.addEventListener("input", () => {
-        const val = autocompleteInputElement.value;
-        // Remove any existing 'too-short' warning before adding a new one to ensure we don't accumulate multiple warning items.
-        suggestionsMenu
-          ?.querySelector(".gem-c-search-with-autocomplete__option--too-short")
-          ?.remove();
-        if (val.length < minLength) {
-          // Force the menu open so the warning is shown
-          autocompleteInputElement.setAttribute("aria-expanded", "true");
-          suggestionsMenu?.classList.add(
-            "gem-c-search-with-autocomplete__menu--visible",
+      // Post-initialisation tweaks
+      if (autocompleteInputElement) {
+        // Post-init: dynamically show a 'too-short' warning when the user types fewer than minLength characters
+        // Find the dropdown menu <ul> generated by accessible-autocomplete
+        const suggestionsMenu =
+          containerElement.querySelector<HTMLUListElement>(
+            ".gem-c-search-with-autocomplete__menu",
           );
-          suggestionsMenu?.classList.remove(
-            "gem-c-search-with-autocomplete__menu--hidden",
-          );
-          // Create a new <li> element with the warning text. Classes match the library's own suggestion items (so it looks and behaves consistently). Set role="option" and aria-disabled="true" for accessibility
-          const li = document.createElement("li");
-          li.className =
-            "gem-c-search-with-autocomplete__option gem-c-search-with-autocomplete__option--too-short";
-          li.setAttribute("role", "option");
-          li.setAttribute("aria-disabled", "true");
-          li.textContent = tooShort(minLength);
-          // Insert the warning at the top of the suggestions list menu
-          suggestionsMenu?.prepend(li);
-        }
-      });
-      autocompleteInputElement.setAttribute("type", "search"); // Ensure input type is search
-      // autocompleteInputElement.classList.add("autocomplete__input"); // Add specific class if needed
+        // Listen for input changes on the autocomplete field
+        autocompleteInputElement.addEventListener("input", () => {
+          const val = autocompleteInputElement.value;
+          // Remove any existing 'too-short' warning before adding a new one to ensure we don't accumulate multiple warning items.
+          suggestionsMenu
+            ?.querySelector(
+              ".gem-c-search-with-autocomplete__option--too-short",
+            )
+            ?.remove();
+          if (val.length < minLength) {
+            // Force the menu open so the warning is shown
+            autocompleteInputElement.setAttribute("aria-expanded", "true");
+            suggestionsMenu?.classList.add(
+              "gem-c-search-with-autocomplete__menu--visible",
+            );
+            suggestionsMenu?.classList.remove(
+              "gem-c-search-with-autocomplete__menu--hidden",
+            );
+            // Create a new <li> element with the warning text. Classes match the library's own suggestion items (so it looks and behaves consistently). Set role="option" and aria-disabled="true" for accessibility
+            const li = document.createElement("li");
+            li.className =
+              "gem-c-search-with-autocomplete__option gem-c-search-with-autocomplete__option--too-short";
+            li.setAttribute("role", "option");
+            li.setAttribute("aria-disabled", "true");
+            li.textContent = tooShort(minLength);
+            // Insert the warning at the top of the suggestions list menu
+            suggestionsMenu?.prepend(li);
+          }
+        });
+        autocompleteInputElement.setAttribute("type", "search"); // Ensure input type is search
+        // autocompleteInputElement.classList.add("autocomplete__input"); // Add specific class if needed
 
         // Add Enter key workaround from original JS
         autocompleteInputElement.addEventListener("keydown", (e) => {
@@ -426,6 +432,7 @@
   data-source-key={source_key}
   data-source-property={source_property}
   {...outerDataAttributes}
+  style={`--suggestion-icon: url("${suggestionIconUrl}"); --cancel-icon: url("${closeIconUrl}")`}
 >
   <!-- Render the base Search component initially -->
   <!-- accessible-autocomplete will enhance the input inside it -->
@@ -546,9 +553,8 @@
       height: 40px;
       margin-right: 10px;
       flex: none;
-      /* Use relative paths so Vite bundles the asset */
-      mask-image: url(../../assets/govuk_publishing_components/images/icon-autocomplete-search-suggestion.svg);
-      -webkit-mask-image: url(../../assets/govuk_publishing_components/images/icon-autocomplete-search-suggestion.svg);
+      mask-image: var(--suggestion-icon);
+      -webkit-mask-image: var(--suggestion-icon);
       background-color: #505a5f;
     }