@qhealth-design-system/core 1.18.2 → 1.18.4

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.18.4 - 2025-11-24
+
+## 1.18.3 - 2025-11-20
+
 ## 1.18.2 - 2025-11-19
 
 ## 1.18.1 - 2025-11-12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qhealth-design-system/core",
-    "version": "1.18.2",
+    "version": "1.18.4",
     "description": "",
     "licence": "MIT",
     "main": "index.js",

package/src/components/header/js/global.js

@@ -22,6 +22,8 @@ let isHeaderOpen = false;
 let headerSearchEvents = {};
 // Breakpoint for mobile mode
 const mobileBreakpoint = 992;
+// Hold width value to detect resize
+let lastWidth = window.innerWidth;
 
 export default function initHeader(document = document) {
     // Add action so the search works only if JS is enabled
@@ -40,12 +42,17 @@ export default function initHeader(document = document) {
 
     // We want to ensure the search input is visible on desktop at all times
     window.addEventListener("resize", () => {
+        const currentWidth = window.innerWidth;
+        // Ignore resize events that do not change the viewport size. Required for Android devices
+        if (currentWidth === lastWidth) return;
+        else lastWidth = currentWidth;
+
         if (window.innerWidth >= mobileBreakpoint && !isHeaderOpen) {
-            openHeader();
+            openHeader(false);
             // Disable focus trap as it's not needed on desktop
             disableFocusTrap();
         } else if (window.innerWidth < mobileBreakpoint && isHeaderOpen) {
-            closeHeader();
+            closeHeader(false);
         }
     });
 }
@@ -88,7 +95,7 @@ function toggleHeaderSearch() {
     }
 }
 
-function openHeader() {
+function openHeader(requireFocusChange = true) {
     isHeaderOpen = true;
     searchToggle.setAttribute("aria-expanded", true);
     searchToggle.classList.remove("qld__main-nav__toggle-search--open");
@@ -99,7 +106,9 @@ function openHeader() {
     // Wait for display: block, and then add class to open smoothly
     setTimeout(function () {
         target.classList.add("qld__main-nav__search--open");
-        target.querySelector(".qld__text-input").focus();
+        if (requireFocusChange) {
+            target.querySelector(".qld__text-input").focus();
+        }
 
         // Close header search on click outside
         headerSearchEvents.background = addEvent(document, "click", function () {
@@ -128,13 +137,15 @@ function openHeader() {
     });
 }
 
-function closeHeader() {
+function closeHeader(requireFocusChange = true) {
     isHeaderOpen = false;
     searchToggle.setAttribute("aria-expanded", false);
     searchToggle.classList.remove("qld__main-nav__toggle-search--close");
     searchToggle.classList.add("qld__main-nav__toggle-search--open");
     searchToggleText.textContent = "Search";
-    searchToggle.focus();
+    if (requireFocusChange) {
+        searchToggle.focus();
+    }
     target.classList.remove("qld__main-nav__search--open");
     target.style.display = "none";
 
@@ -221,5 +232,5 @@ function addEvent(element, event, rawHandler) {
  * @param {event} token     The event to remove
  */
 function removeEvent(token) {
-    token.element.removeEventListener(token.event, token.handler);
+    if (token && token.element) token.element.removeEventListener(token.event, token.handler);
 }

package/src/styles/imports/variables.scss

@@ -388,7 +388,7 @@ $QLD-color-dark__heading: #ffffff !default;
 $QLD-color-dark__text: #ffffff !default;
 $QLD-color-dark__text--lighter: #deebf9 !default;
 $QLD-color-dark__link: #ffffff !default;
-$QLD-color-dark__link--visited: #e1bbee !default;
+$QLD-color-dark__link--visited: #f2cdff !default;
 $QLD-color-dark__link--on-action: #001c37 !default;
 $QLD-color-dark__action--primary: #84d3ff !default;
 $QLD-color-dark__action--primary-hover: #a6f7ff !default;
@@ -422,7 +422,7 @@ $QLD-color-light__underline--hover-visited: #{$QLD-color-light__link--visited} !
 $QLD-color-status__dark-underline: rgba(3, 33, 63, 0.72) !default;
 $QLD-color-dark__underline: #b5cce2 !default;
 $QLD-color-dark__underline--hover: #{$QLD-color-dark__link} !default;
-$QLD-color-dark__underline--visited: #e1c2ff !default;
+$QLD-color-dark__underline--visited: #c6aed9 !default;
 $QLD-color-dark__underline--hover-visited: #{$QLD-color-dark__link--visited} !default;
 
 /**