@qld-gov-au/qgds-bootstrap5 2.0.12 → 2.1.0

package/src/css/functions/string-replace.scss

@@ -0,0 +1,49 @@
+@use "sass:string";
+@use "sass:meta";
+
+///
+/// Adapted from Kitty Giraudel https://kittygiraudel.com/2014/01/13/string-replacement-function-in-sass/
+/// @param {type} $string - The string to be searched, with substring $replace replaced with $replaceWith
+/// @param {type} $replace - The substring to be replaced by $replaceWith
+/// @param {type} $replaceWith - The string to replace $replace
+/// @return {string} - A new string with $replace replaced by $replaceWith
+@function string-replace($string, $replace, $replaceWith) {
+  // validate strings
+  @if meta.type-of($string) !=
+    string or
+    meta.type-of($replace) !=
+    string or
+    meta.type-of($replaceWith) !=
+    string
+  {
+    @warn "One of the 3 arguments is not a string.";
+    @return $string;
+  }
+
+  // avoid infinite recursion
+  @if string.index($replaceWith, $replace) {
+    @warn "The string to be replaced is contained in the new string. Infinite recursion avoided.";
+    @return $string;
+  }
+
+  // Find the index of the string to replace
+  $index: string.index($string, $replace);
+
+  // If $replace string is found
+  @if ($index) and ($replaceWith != $replace) {
+    // Create a new string. Then we loop through each character in the string, and append them to the new string only if they are not part of the $replace string.
+    $newString: string.quote(string.slice($string, 1, $index - 1));
+
+    @for $i from $index through string.length($string) {
+      @if $i < $index or $i >= $index + string.length($replace) {
+        $newString: $newString + string.slice($string, $i, $i);
+      }
+    }
+
+    $newString: string.insert($newString, $replaceWith, $index);
+    @return string-replace($newString, $replace, $replaceWith);
+  }
+
+  // else nothing to do - return original $string
+  @return $string;
+}

package/src/css/functions/svg-encode.scss

@@ -0,0 +1,22 @@
+@use "../functions/string-replace" as *;
+
+///
+/// A simpler version of bootstrap's escape-svg, which cannot be used with sass module system.
+/// Unlike bootstraps' version, this function cannot be used to wrap `url()` function.
+/// It only works on strings!
+/// Based on the same original source at https://codepen.io/kevinweber/pen/dXWoRw
+/// @param {type} $svg -
+/// @return {string} - the encoded svg prefixed with "data:image/svg+xml,", ready to be used within `url()` for background images.
+@function svg-encode($svg) {
+  $encoding-reference: (
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+  );
+  @each $char, $encoded in $encoding-reference {
+    $svg: string-replace($svg, $char, $encoded);
+  }
+  @return "data:image/svg+xml," + $svg;
+}

package/src/css/mixins/make-icon.scss

@@ -22,7 +22,7 @@ $prefix: "qld-" !default;
   $include-base: true
 ) {
   // validate $name
-  @if ($name and not f.in-list($name, $icon-names)) {
+  @if ($name and not f.in-list($name, map.keys($icon-names))) {
     @error "Invalid parameter $name: " + $name;
   }
   // validate $include-base

package/src/css/mixins/make-link.scss

@@ -1,24 +1,27 @@
 @use "focusable" as *;
-@use "../variables/animation";
+@use "../functions" as f;
+// @use "../variables/animation";
 
 ///
 /// Apply generic links styles. Ensures consistent styles including transition effects.
 @mixin make-link() {
   color: var(--qld-link-color);
-  transition: {
-    property:
-      color, background-color, border-color, outline-color, outline-offset,
-      outline-width, text-decoration-color, text-decoration-line,
-      text-decoration-thickness, text-underline-offset, opacity;
-    duration: animation.$duration-fast;
-    timing-function: animation.$timing-function;
-  }
+  border-radius: 0.25rem;
+  transition: none; // remove transitions until decisions at design system level.
+  // {
+  //   property:
+  //     color, background-color, border-color, outline-color, outline-offset,
+  //     outline-width, text-decoration-color, text-decoration-line,
+  //     text-decoration-thickness, text-underline-offset, opacity;
+  //   duration: animation.$duration-fast;
+  //   timing-function: animation.$timing-function;
+  // }
 
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
   text-decoration-color: var(--qld-link-underline);
 
-  @include focusable($offsetOutline: true, $outlineWidth: 2px);
+  @include focusable();
 
   &:hover {
     text-decoration-thickness: var(--qld-link-underline-thickness-hover);

package/src/css/qld-palettes.scss

@@ -1,7 +1,6 @@
-// QLD Theme Palette Classes
+// QLD Palette Classes
 // Provides complete theme styling including color, background-color, and CSS variables
 
-// Theme properties mixins to avoid duplication
 %qld-palette-default {
   background-color: var(--qld-body-bg);
   color: var(--qld-body-color);
@@ -11,7 +10,6 @@
   --qld-body-color: #{$body-color};
   --qld-body-font-weight: #{$body-font-weight};
   --qld-border-color: var(--qld-light-border);
-  --qld-focus-color: var(--qld-light-focus);
   --qld-headings-color: #{$headings-color};
   --qld-link-color: #{$link-color};
   --qld-link-color-rgb: #{to-rgb($link-color)};
@@ -22,11 +20,20 @@
   --qld-link-underline-hover: #{$color-default-color-light-underline-default-hover};
   --qld-link-underline-visited: #{$color-default-color-light-underline-visited};
   --qld-link-underline-visited-hover: #{$color-default-color-light-underline-visited-hover};
-  --qld-link-underline-offset: 0.3rem;
+  --qld-link-underline-offset: 0.3em;
   --qld-link-underline-thickness: 0.5px;
   --qld-link-underline-thickness-hover: 2px;
-  --qld-selection-bg: var(--qld-brand-primary);
-  --qld-selection-color: var(--qld-white);
+  --qld-selection-bg: var(--qld-dark-background);
+  --qld-selection-color: var(--qld-neutral-white);
+ 
+
+  // Because a focus ring generally is offset outside of an element, at the boundary between palette themes,
+  // its color should inherit the parent's palette, not the focussed element's palette, so defer setting
+  // focus color until first descendant, unless this is :root
+  &:root,
+  > :where(*) {
+    --qld-focus-color: var(--qld-light-focus);
+  }
 }
 
 %qld-palette-light {
@@ -49,22 +56,23 @@
   --qld-body-bg: var(--qld-dark-background);
   --qld-body-color: #fff;
   --qld-border-color: var(--qld-dark-border);
-  --qld-focus-color: var(--qld-dark-focus);
   --qld-headings-color: #{$color-default-color-dark-text-heading};
   --qld-link-color: #{$color-default-color-dark-link-default};
   --qld-link-color-rgb: 255, 255, 255;
   --qld-link-hover-color: #{$color-default-color-dark-link-default};
   --qld-link-hover-color-rgb: 255, 255, 255;
   --qld-link-visited-color: #{$color-default-color-dark-link-visited};
-  --qld-link-visited: var(
-    --qld-link-visited-dark
-  ); // TODO tidy up these variables, we should only use --qld-link-visited-color
   --qld-link-underline: #{$qld-link-underline-dark};
   --qld-link-underline-hover: #{$qld-link-underline-hover-dark};
   --qld-link-underline-visited: #{$qld-link-underline-visited-dark};
   --qld-link-underline-visited-hover: #{$qld-link-underline-hover-dark};
-  --qld-selection-bg: var(--qld-white);
-  --qld-selection-color: var(--qld-brand-primary);
+  --qld-selection-bg: var(--qld-neutral-white);
+  --qld-selection-color: var(--qld-dark-background);
+
+  &:root,
+  > :where(*) {
+    --qld-focus-color: var(--qld-dark-focus);
+  }
 }
 
 %qld-palette-dark-alt {

package/src/css/qld-type.scss

@@ -68,9 +68,13 @@ h6 {
   color: var(--qld-headings-color);
 }
 
-a,
+a {
+  @include mixins.make-link();
+}
+
 a.nav-link {
   @include mixins.make-link();
+  border-radius: 0;
 }
 
 figure > figcaption {

package/src/css/qld-utilities.scss

@@ -30,6 +30,14 @@ $utilities: map-merge(
           "dark-alt": var(--qld-dark-alt-background),
           "dark-alt-shade": var(--qld-dark-alt-background-shade),
         ),
-      )
+      ),
+    "focus": (
+      class: "qld-focus",
+      property: --qld-focus-color,
+      values: (
+        "light": var(--#{$prefix}light-focus),
+        "dark": var(--#{$prefix}dark-focus),
+      ),
+    )
   )
 );

package/src/css/qld-variables.scss

@@ -21,7 +21,7 @@ $qld-red-border: $core-default-color-status-error-darker;
 $qld-blue-border: $color-default-color-light-border-light;
 $qld-yellow-border: $core-default-color-status-caution-darker;
 $qld-dark-blue-shade: $color-default-color-dark-background-alt-shade;
-$qld-light-background: $core-default-color-status-info-lightest;
+$qld-light-background: $color-default-color-light-background-light;
 $qld-light-background-shade: $color-default-color-light-background-light-shade;
 $qld-light-border: $color-default-color-light-border-default;
 $qld-light-border-alt: $color-default-color-light-border-alt;

package/src/img/icons-sprite.svg

@@ -1,28 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" role="img">
-  <symbol id="qgds-icon-spinner-step-1" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M29.988 8.231A16 16 0 1 1 16.928.027l-.17 2.93a13.064 13.064 0 1 0 10.663 6.7l2.567-1.426Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-2" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M23.768 29.988a16 16 0 1 1 8.205-13.06l-2.93-.17a13.064 13.064 0 1 0-6.7 10.663l1.425 2.567Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-3" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M2.013 23.768a16 16 0 1 1 13.059 8.205l.17-2.93a13.064 13.064 0 1 0-10.663-6.7l-2.566 1.425Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-4" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M8.231 2.012a16 16 0 1 1-8.204 13.06l2.93.17a13.064 13.064 0 1 0 6.7-10.663L8.23 2.012Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-x" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M22.21 6.25h3.282l-7.219 8.297 8.532 11.203h-6.657l-5.25-6.797-5.953 6.797H5.617l7.735-8.813L5.195 6.25h6.844l4.688 6.234L22.21 6.25Zm-1.17 17.531h1.827L11.055 8.125h-1.97L21.04 23.781Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-youtube" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M28.258 9.86c.562 1.968.562 6.187.562 6.187s0 4.172-.562 6.187a3.127 3.127 0 0 1-2.25 2.25C23.992 25 16.023 25 16.023 25s-8.015 0-10.03-.516a3.127 3.127 0 0 1-2.25-2.25c-.563-2.015-.563-6.187-.563-6.187s0-4.219.562-6.188c.281-1.125 1.172-2.015 2.25-2.296C8.008 7 16.023 7 16.023 7s7.97 0 9.985.563c1.078.28 1.969 1.171 2.25 2.296Zm-14.86 9.984 6.657-3.797-6.657-3.797v7.594Z"></path>
-  </symbol>
-
   <symbol id="qgds-icon-accessibility" viewBox="0 0 32 32">
     <path fill="currentColor" d="M15.933 7.738c-.793 0-1.457-.267-1.992-.802-.535-.535-.803-1.2-.803-1.992 0-.793.268-1.458.803-1.993.535-.535 1.2-.802 1.992-.802.793 0 1.457.267 1.993.802.535.535.802 1.2.802 1.993 0 .793-.267 1.457-.802 1.992-.535.535-1.2.802-1.993.802ZM11.805 28.1V12.215a53.57 53.57 0 0 1-3.343-.396 43.696 43.696 0 0 1-3.262-.616 1.505 1.505 0 0 1-.978-.663 1.48 1.48 0 0 1-.212-1.148 1.24 1.24 0 0 1 .7-.918 1.77 1.77 0 0 1 1.198-.138c1.608.342 3.263.596 4.963.763a51.862 51.862 0 0 0 10.175 0 46.103 46.103 0 0 0 5.046-.763 1.767 1.767 0 0 1 1.198.138c.38.187.614.493.7.918.085.417.015.8-.212 1.148a1.506 1.506 0 0 1-.978.663c-1.067.244-2.154.45-3.262.616a53.564 53.564 0 0 1-3.343.396V28.1c0 .395-.14.732-.42 1.013-.281.28-.619.42-1.013.42a1.38 1.38 0 0 1-1.013-.42 1.38 1.38 0 0 1-.42-1.013v-6.72h-2.657v6.72c0 .395-.14.732-.42 1.013-.281.28-.619.42-1.014.42a1.38 1.38 0 0 1-1.012-.42 1.38 1.38 0 0 1-.42-1.013Z"></path>
   </symbol>
@@ -400,6 +376,22 @@
     <path fill="currentColor" d="M7.842 23.526 4.82 26.548c-.337.337-.724.414-1.162.231-.439-.182-.658-.512-.658-.988V5.141c0-.589.21-1.092.63-1.512A2.056 2.056 0 0 1 5.14 3h21.72c.588 0 1.091.21 1.51.63.42.419.63.922.63 1.51v16.246a2.06 2.06 0 0 1-.63 1.511c-.419.42-.922.63-1.51.63H7.842Zm-.744-1.72H26.86a.403.403 0 0 0 .29-.13.403.403 0 0 0 .13-.29V5.14a.403.403 0 0 0-.13-.29.403.403 0 0 0-.29-.13H5.14a.403.403 0 0 0-.29.13.403.403 0 0 0-.13.29v19.14l2.378-2.473Zm3.197-7.383c.335 0 .62-.118.856-.354s.354-.522.354-.857c0-.335-.118-.62-.354-.856a1.167 1.167 0 0 0-.856-.354c-.341 0-.628.118-.861.354-.233.236-.35.521-.35.856 0 .335.117.62.35.857.233.236.52.354.86.354Zm5.756 0c.335 0 .62-.118.857-.354a1.17 1.17 0 0 0 .353-.857c0-.335-.118-.62-.353-.856a1.167 1.167 0 0 0-.857-.354c-.335 0-.62.118-.857.354a1.167 1.167 0 0 0-.354.856c0 .335.118.62.354.857.236.236.522.354.857.354Zm5.64 0c.335 0 .62-.118.857-.354.236-.236.354-.522.354-.857 0-.335-.118-.62-.354-.856a1.167 1.167 0 0 0-.857-.354c-.335 0-.62.118-.856.354a1.167 1.167 0 0 0-.354.856c0 .335.118.62.354.857.236.236.521.354.856.354Z"></path>
   </symbol>
 
+  <symbol id="qgds-icon-spinner-step-1" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M29.988 8.231A16 16 0 1 1 16.928.027l-.17 2.93a13.064 13.064 0 1 0 10.663 6.7l2.567-1.426Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-2" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M23.768 29.988a16 16 0 1 1 8.205-13.06l-2.93-.17a13.064 13.064 0 1 0-6.7 10.663l1.425 2.567Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-3" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M2.013 23.768a16 16 0 1 1 13.059 8.205l.17-2.93a13.064 13.064 0 1 0-10.663-6.7l-2.566 1.425Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-4" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M8.231 2.012a16 16 0 1 1-8.204 13.06l2.93.17a13.064 13.064 0 1 0 6.7-10.663L8.23 2.012Z"></path>
+  </symbol>
+
   <symbol id="qgds-icon-spreadsheet" viewBox="0 0 32 32">
     <path fill="currentColor" d="M4 25.347V6.63c0-.72.258-1.338.774-1.854A2.557 2.557 0 0 1 6.653 4H25.37c.72 0 1.338.258 1.854.775A2.53 2.53 0 0 1 28 6.629v18.706c0 .714-.258 1.336-.775 1.868-.516.531-1.134.797-1.854.797H6.653a2.558 2.558 0 0 1-1.879-.774A2.558 2.558 0 0 1 4 25.347Zm1.8-14.644h20.4V6.665a.842.842 0 0 0-.243-.622.842.842 0 0 0-.622-.244H6.665a.842.842 0 0 0-.622.244.842.842 0 0 0-.244.622v4.038Zm7.383 7.749h5.634v-5.95h-5.634v5.95Zm0 7.749h5.634v-5.95h-5.634v5.95Zm-7.384-7.75h5.62v-5.949h-5.62v5.95Zm14.806 0H26.2v-5.949h-5.596v5.95Zm-13.94 7.75h4.754v-5.95h-5.62v5.084c0 .253.081.46.244.622a.84.84 0 0 0 .622.244Zm13.94 0h4.73c.253 0 .46-.081.622-.244a.842.842 0 0 0 .244-.622v-5.084h-5.596v5.95Z"></path>
   </symbol>
@@ -472,6 +464,14 @@
     <path fill="currentColor" d="M11.627 29.59c-1.837 0-3.401-.652-4.692-1.956C5.645 26.33 5 24.759 5 22.922c0-1.594.512-3.002 1.536-4.226a6.506 6.506 0 0 1 3.882-2.282c.292-.068.562-.02.81.142.25.162.408.39.476.682a.986.986 0 0 1-.14.804c-.164.244-.391.4-.683.468a4.345 4.345 0 0 0-2.668 1.525 4.349 4.349 0 0 0-1.05 2.887c0 1.238.436 2.294 1.31 3.167.873.874 1.934 1.31 3.182 1.31 1.05 0 1.98-.323 2.79-.97a4.438 4.438 0 0 0 1.585-2.473c.092-.292.26-.517.504-.675a.907.907 0 0 1 .805-.099c.292.093.517.263.675.512.158.248.19.519.098.81a6.503 6.503 0 0 1-2.37 3.664 6.503 6.503 0 0 1-4.115 1.422ZM22.135 8.185a2.5 2.5 0 0 1-1.835-.757 2.5 2.5 0 0 1-.757-1.836 2.5 2.5 0 0 1 .757-1.835A2.5 2.5 0 0 1 22.135 3c.72 0 1.329.252 1.829.757s.75 1.116.75 1.835c0 .72-.25 1.331-.75 1.836a2.48 2.48 0 0 1-1.829.757Zm-6.322 13.35c-1.01 0-1.798-.434-2.36-1.303-.563-.869-.633-1.773-.21-2.712l2.806-6.188h-3.46l-.577 1.508a1.046 1.046 0 0 1-.525.581.963.963 0 0 1-.789.062 1.063 1.063 0 0 1-.659-.558.998.998 0 0 1-.029-.867l.558-1.505c.188-.488.482-.86.883-1.114a2.5 2.5 0 0 1 1.368-.38h6.54c.962 0 1.692.373 2.192 1.12.5.749.548 1.578.143 2.49l-2.78 6.08h4.885c.691 0 1.28.245 1.766.736.486.49.73 1.082.73 1.773v5.809c0 .307-.104.564-.311.77-.207.208-.464.311-.771.311s-.564-.103-.771-.31a1.046 1.046 0 0 1-.31-.771V21.84a.314.314 0 0 0-.077-.221c-.05-.056-.127-.084-.228-.084h-8.014Z"></path>
   </symbol>
 
+  <symbol id="qgds-icon-x" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M22.21 6.25h3.282l-7.219 8.297 8.532 11.203h-6.657l-5.25-6.797-5.953 6.797H5.617l7.735-8.813L5.195 6.25h6.844l4.688 6.234L22.21 6.25Zm-1.17 17.531h1.827L11.055 8.125h-1.97L21.04 23.781Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-youtube" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M28.258 9.86c.562 1.968.562 6.187.562 6.187s0 4.172-.562 6.187a3.127 3.127 0 0 1-2.25 2.25C23.992 25 16.023 25 16.023 25s-8.015 0-10.03-.516a3.127 3.127 0 0 1-2.25-2.25c-.563-2.015-.563-6.187-.563-6.187s0-4.219.562-6.188c.281-1.125 1.172-2.015 2.25-2.296C8.008 7 16.023 7 16.023 7s7.97 0 9.985.563c1.078.28 1.969 1.171 2.25 2.296Zm-14.86 9.984 6.657-3.797-6.657-3.797v7.594Z"></path>
+  </symbol>
+
   <symbol id="qgds-icon-zoom" viewBox="0 0 32 32">
     <path fill="currentColor" d="M11 13.05H8.78c-.295 0-.541-.1-.74-.3-.2-.2-.299-.448-.299-.744s.1-.542.299-.739c.199-.196.445-.295.74-.295H11V8.781c0-.295.1-.541.3-.74.2-.2.449-.299.745-.299s.542.1.739.299c.196.199.295.445.295.74v2.191h2.19c.295 0 .542.1.741.3.2.2.299.449.299.745s-.1.543-.299.74a1.013 1.013 0 0 1-.74.294h-2.191v2.219c0 .294-.1.541-.3.74-.201.2-.45.299-.745.299A1.013 1.013 0 0 1 11 15.269v-2.218Zm1.073 9.018c-2.815 0-5.198-.975-7.148-2.924C2.975 17.195 2 14.826 2 12.037c0-2.79.974-5.16 2.924-7.111C6.873 2.976 9.244 2 12.037 2c2.794 0 5.166.975 7.116 2.924 1.95 1.95 2.926 4.32 2.926 7.11a9.823 9.823 0 0 1-.596 3.385 9.62 9.62 0 0 1-1.676 2.924l9.889 9.845c.199.19.301.438.307.74.005.302-.097.556-.307.763-.21.206-.464.309-.76.309a.996.996 0 0 1-.748-.315l-9.862-9.861a8.99 8.99 0 0 1-2.87 1.657 9.935 9.935 0 0 1-3.383.587Zm-.017-2.079c2.217 0 4.096-.771 5.635-2.314C19.23 16.13 20 14.25 20 12.034c0-2.218-.77-4.098-2.31-5.64-1.538-1.544-3.417-2.316-5.634-2.316-2.227 0-4.113.772-5.659 2.315-1.546 1.543-2.319 3.423-2.319 5.64 0 2.218.773 4.098 2.32 5.642 1.545 1.543 3.431 2.314 5.658 2.314Z"></path>
   </symbol>

package/src/js/qld.bootstrap.js

@@ -51,6 +51,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
     // Get all forms with the class 'site-search'
     let forms = document.querySelectorAll(".site-search");
+
     forms.forEach((form) => {
       // Get the search input within the current form
       let searchInput = form.querySelector(".qld-search-input input");
@@ -67,59 +68,6 @@ window.addEventListener("DOMContentLoaded", () => {
           }, 300);
         });
 
-        // Add focus event listener to the search input
-        searchInput.addEventListener("focus", function () {
-          const suggestions = form.querySelector(".suggestions");
-          const dynamicSuggestionsContainer = form.querySelector(
-            ".dynamic-suggestions",
-          );
-
-          if (this.value.trim() === "") {
-            showSuggestions("", true, form);
-          } else if (
-            suggestions &&
-            dynamicSuggestionsContainer &&
-            dynamicSuggestionsContainer.innerHTML.trim() !== ""
-          ) {
-            // Only show existing suggestions if there are actual dynamic suggestions populated
-            suggestions.classList.remove("d-none");
-          }
-        });
-
-        const suggestions = form.querySelector(".suggestions");
-        // If there is no suggestions renderred, do not add event listener to the document
-        if (suggestions) {
-          // Helper function to determine if suggestions should be hidden on focus change
-          const shouldHideSuggestions = (newFocusTarget) => {
-            if (!newFocusTarget) return true;
-
-            const isFocusInsideInput =
-              searchInput.contains(newFocusTarget) ||
-              searchInput === newFocusTarget;
-            const isFocusInsideSuggestions =
-              suggestions.contains(newFocusTarget);
-
-            return !isFocusInsideInput && !isFocusInsideSuggestions;
-          };
-
-          // Handle focusout event for keyboard accessibility
-          const handleFocusOut = (event) => {
-            const newFocusTarget = event.relatedTarget;
-
-            if (shouldHideSuggestions(newFocusTarget)) {
-              suggestions.classList.add("d-none");
-            }
-          };
-
-          // Attach focusout event listener to search input
-          searchInput.addEventListener("focusout", handleFocusOut);
-
-          // Attach focusout event listener to suggestions container
-          suggestions.addEventListener("focusout", handleFocusOut);
-        } else {
-          console.warn("Required suggestions elements not found.");
-        }
-
         // Attach event listener to form submit
         form.addEventListener("submit", function (event) {
           event.preventDefault();
@@ -129,9 +77,9 @@ window.addEventListener("DOMContentLoaded", () => {
       }
     });
 
-    //Header
-    // Get the <header> element
+    //Header - get the <header> element
     let header = document.querySelector("header");
+
     if (header) {
       // Get the current page URL without query string parameters
       let url = window.location.origin + window.location.pathname;