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

package/src/components/bs5/inpageAlert/inpageAlert.data.json

@@ -1,6 +1,6 @@
 {
   "variantClass": "alert-success",
-  "alertType": "",
+  "ariaLabel": "Success alert",
   "heading": "Alert heading",
   "headingTag": "h2",
   "content": "<p>This is an alert notice with some important information. <a href='#'>Find out more</a>.</p>"

package/src/components/bs5/inpageAlert/inpageAlert.hbs

@@ -1,5 +1,13 @@
-<div class="alert {{variantClass}} {{customClass}}" role="alert" 
-    {{#if alertType}}aria-label="{{alertType}}"{{/if}}>
+<div class="alert {{variantClass}} {{customClass}}" role="alert"
+    {{#if ariaLabel}}
+    aria-label="{{ ariaLabel }}"
+    {{else}}
+    {{#ifCond variantClass "==" "alert-info"}}aria-label="Information alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-success"}}aria-label="Success alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-error"}}aria-label="Error alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-warning"}}aria-label="Warning alert"{{/ifCond}}
+    {{/if}}
+>
     {{#if heading}}
         {{#if headingTag}}
             <{{headingTag}} class="alert-heading">{{{ heading }}}</{{headingTag}}>

package/src/components/bs5/inpageAlert/inpageAlert.scss

@@ -1,5 +1,6 @@
 // QLD Desing System Bootstrap 5 library
 // Extends: https://getbootstrap.com/docs/5.3/components/alerts/#variables
+@use "../../../css/mixins" as m;
 
 //All alerts have the same text and background color, even on darker themes
 //To account for this, we redefine the global vars at the .alert scope
@@ -12,6 +13,7 @@
 }
 
 .alert {
+  position: relative;
   padding-left: 4rem;
   overflow-wrap: break-word;
 
@@ -28,12 +30,11 @@
   ul,
   ol {
     line-height: 1.5;
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
   }
 
+  &> :last-child {
+    margin-bottom: 0;
+  }
   // Close button for dismissible alerts
   .btn-close {
     position: absolute;
@@ -45,79 +46,75 @@
       no-repeat center center;
   }
 
-  //Alert sidebar color and icon
-  //Colors and icons defined below
-  &:before,
-  &:after {
-    content: "";
-    width: 3rem;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-  }
-
-  &:after {
-    color: #fff;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-
-  //alerts color map
-  $alert-colors-map: (
+  //alerts color map with icons
+  $alert-icons-map: (
     "success": (
-      color: var(--#{$prefix}success),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82645' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath d='M9.2207 12.6953C8.99805 12.918 8.58984 12.918 8.36719 12.6953L5.99219 10.3203C5.76953 10.0977 5.76953 9.68945 5.99219 9.4668C6.21484 9.24414 6.62305 9.24414 6.8457 9.4668L8.8125 11.4336L13.1172 7.0918C13.3398 6.86914 13.748 6.86914 13.9707 7.0918C14.1934 7.31445 14.1934 7.72266 13.9707 7.94531L9.2207 12.6953ZM19.5 9.875C19.5 15.1445 15.2324 19.375 10 19.375C4.73047 19.375 0.5 15.1445 0.5 9.875C0.5 4.64258 4.73047 0.375 10 0.375C15.2324 0.375 19.5 4.64258 19.5 9.875ZM10 1.5625C5.39844 1.5625 1.6875 5.31055 1.6875 9.875C1.6875 14.4766 5.39844 18.1875 10 18.1875C14.5645 18.1875 18.3125 14.4766 18.3125 9.875C18.3125 5.31055 14.5645 1.5625 10 1.5625Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82645)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}success),
+      "icon": "alert-success",
     ),
     "info": (
-      color: var(--#{$prefix}info),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}info),
+      "icon": "alert-information",
     ),
     "warning": (
-      color: var(--#{$prefix}warning),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_80802' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='2' width='20' height='17'%3E%3Cpath d='M10 13.9062C10.457 13.9062 10.8438 14.293 10.8086 14.75C10.8086 15.2422 10.457 15.5938 10 15.5938C9.54297 15.5938 9.15625 15.2422 9.15625 14.75C9.15625 14.293 9.50781 13.9062 10 13.9062ZM10 12.5C9.68359 12.5 9.4375 12.2539 9.4375 11.9375V6.875C9.4375 6.59375 9.71875 6.3125 10 6.3125C10.2461 6.3125 10.5273 6.59375 10.5273 6.875V11.9375C10.5273 12.2539 10.2812 12.5 10 12.5ZM18.7188 15.2422C19.0703 15.8398 19.0703 16.543 18.7188 17.1406C18.3672 17.7734 17.7344 18.125 17.0312 18.125H2.96875C2.23047 18.125 1.59766 17.7734 1.24609 17.1406C0.894531 16.543 0.894531 15.8398 1.24609 15.2422L8.27734 3.35938C8.62891 2.76172 9.26172 2.375 10 2.375C10.7031 2.41016 11.3359 2.76172 11.6875 3.35938L18.7188 15.2422ZM17.7344 16.5781C17.9102 16.332 17.875 16.0508 17.7344 15.8047L10.7031 3.92188C10.5625 3.67578 10.2812 3.53516 10 3.5C9.96484 3.5 10 3.5 10 3.5C9.68359 3.5 9.40234 3.67578 9.26172 3.92188L2.23047 15.8047C2.08984 16.0508 2.05469 16.332 2.23047 16.5781C2.37109 16.8594 2.65234 17 2.96875 17H16.9961C17.3125 17 17.5938 16.8594 17.7344 16.5781Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_80802)'%3E%3Crect width='20' height='20' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}warning),
+      "icon": "alert-warning",
     ),
     "danger": (
-      color: var(--#{$prefix}danger),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_34619_4370' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='12' height='12'%3E%3Cpath d='M14.8438 14.875C14.6562 15.0625 14.3125 15.0625 14.125 14.875L10 10.7188L5.84375 14.875C5.65625 15.0625 5.3125 15.0625 5.125 14.875C4.9375 14.6875 4.9375 14.3438 5.125 14.1562L9.28125 10L5.125 5.875C4.9375 5.6875 4.9375 5.34375 5.125 5.15625C5.3125 4.96875 5.65625 4.96875 5.84375 5.15625L10 9.3125L14.125 5.15625C14.3125 4.96875 14.6562 4.96875 14.8438 5.15625C15.0312 5.34375 15.0312 5.6875 14.8438 5.875L10.6875 10L14.8438 14.1562C15.0312 14.3438 15.0312 14.6875 14.8438 14.875Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_34619_4370)'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='white'/%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}danger),
+      "icon": "alert-danger",
     ),
-    //.alert-error can be a clone of .alert-danger
     "error": (
-        color: var(--#{$prefix}danger),
-        icon:
-          "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_34619_4370' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='12' height='12'%3E%3Cpath d='M14.8438 14.875C14.6562 15.0625 14.3125 15.0625 14.125 14.875L10 10.7188L5.84375 14.875C5.65625 15.0625 5.3125 15.0625 5.125 14.875C4.9375 14.6875 4.9375 14.3438 5.125 14.1562L9.28125 10L5.125 5.875C4.9375 5.6875 4.9375 5.34375 5.125 5.15625C5.3125 4.96875 5.65625 4.96875 5.84375 5.15625L10 9.3125L14.125 5.15625C14.3125 4.96875 14.6562 4.96875 14.8438 5.15625C15.0312 5.34375 15.0312 5.6875 14.8438 5.875L10.6875 10L14.8438 14.1562C15.0312 14.3438 15.0312 14.6875 14.8438 14.875Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_34619_4370)'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='white'/%3E%3C/svg%3E%0A",
-      ),
+      "color": var(--#{$prefix}danger),
+      "icon": "alert-danger",
+    ),
     "light": (
-      color: var(--#{$prefix}light-grey),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23595959'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}light-grey),
+      "icon": null,
     ),
     "dark": (
-      color: var(--#{$prefix}dark-grey),
-      icon:
-        "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E%0A",
+      "color": var(--#{$prefix}dark-grey),
+      "icon": null,
     ),
   );
 
-  //Sets colors (border and icon-background) and icons for each alert type
-  @each $key, $properties in $alert-colors-map {
-    $color: map-get($properties, color);
-    $icon: map-get($properties, icon);
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    color: #fff;
+  }
+
+  &:before {
+    width: 3rem;
+  }
 
+  //Sets border color and icon for each alert type
+  @each $key, $values in $alert-icons-map {
     &-#{$key} {
-      border-color: $color;
+      border-color: map-get($values, "color");
       border-width: 2px;
 
       &:before {
-        background-color: $color;
+        background-color: map-get($values, "color");
       }
 
-      &:after {
-        background-image: url($icon);
+      @if map-get($values, "icon") {
+        @include m.make-icon(
+          $name: map-get($values, "icon"),
+          $size: "md",
+          $pseudo: "after"
+        ) {
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+          margin: 0 0.75rem;
+        }
       }
     }
   }

package/src/components/bs5/inpageAlert/inpageAlert.stories.js

@@ -49,9 +49,9 @@ export default {
       },
       options: ["alert-success", "alert-info", "alert-warning", "alert-error"],
     },
-    alertType: {
-      name: "Alert Type",
-      description: `Type of the alert. i.g "Success", "Information", "Warning", "Error".`,
+    ariaLabel: {
+      name: "ARIA Label",
+      description: `Accessible label for the alert announced to screen readers. e.g "Success alert", "Information alert", "Warning alert", "Error alert".`,
     },
     headingTag: {
       name: "Heading Tag",
@@ -88,3 +88,54 @@ export const Dark = {
     },
   ],
 };
+
+/**
+ * All alert variants with proper accessibility.
+ * Each alert includes CSS-based icons and a visually-hidden span for screen readers.
+ */
+export const AllVariants = {
+  name: "All Alert Types (Accessibility)",
+  render: () => {
+    const alerts = [
+      {
+        variantClass: "alert-success",
+        ariaLabel: "Success alert",
+        heading: "Success Alert",
+        content: "<p>This action was completed successfully.</p>",
+      },
+      {
+        variantClass: "alert-info",
+        ariaLabel: "Information alert",
+        heading: "Information Alert",
+        content: "<p>Here is some important information for you to know.</p>",
+      },
+      {
+        variantClass: "alert-warning",
+        ariaLabel: "Warning alert",
+        heading: "Warning Alert",
+        content: "<p>Please be aware of this potential issue.</p>",
+      },
+      {
+        variantClass: "alert-error",
+        ariaLabel: "Error alert",
+        heading: "Error Alert",
+        content: "<p>An error occurred. Please try again.</p>",
+      },
+    ];
+
+    return alerts
+      .map(
+        (alertData) => `
+      <div class="mb-4">
+        ${new InpageAlert(alertData).html}
+      </div>
+    `
+      )
+      .join("");
+  },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};

package/src/components/bs5/inpagenav/inpagenav.scss

@@ -14,7 +14,7 @@
   --#{$prefix}inpage-nav-border-color: var(--#{$prefix}dark-action-primary);
 
   .nav {
-    --#{$prefix}nav-link-color: var(--#{$prefix}white);
+    --#{$prefix}nav-link-color: var(--#{$prefix}neutral-white);
     --#{$prefix}nav-link-hover-color: var(--#{$prefix}brand-accent);
   }
 }
@@ -40,12 +40,20 @@
 
   .nav-item {
     margin-top: 0;
+    display: inline-flex;
+
     .nav-link {
       padding-top: var(--#{$prefix}inpage-nav-link-padding-y);
       padding-bottom: var(--#{$prefix}inpage-nav-link-padding-y);
       padding-left: var(--#{$prefix}inpage-nav-title-padding-left);
+      padding-right: 0;
       color: var(--#{$prefix}nav-link-color);
       text-decoration-line: underline;
+
+      &:hover,
+      &:visited {
+        text-decoration-color: var(--qld-link-underline);
+      }
     }
 
     &:first-child .nav-link {

package/src/components/bs5/modal/modal.scss

@@ -51,7 +51,7 @@
       --#{$prefix}color-default-color-light-text-heading
     );
     --#{$prefix}btn-close-focus-shadow: none;
-    --#{$prefix}btn-close-focus-border: var(--#{$prefix}focus-color) solid 3px;
+    --#{$prefix}btn-close-focus-border: var(--#{$prefix}color-default-color-light-focus-default) solid 3px;
   }
 }
 

package/src/components/bs5/navbar/navbar.functions.js

@@ -1,7 +1,8 @@
 import { createFocusTrap } from "../../../js/utils.js";
+import { breakpoints } from "../../../js/constants.js";
 
 export function initializeNavbar() {
-  const navbarCollapse = document.getElementById("main-nav");
+  const navbar = document.getElementById("main-nav");
   const overlay = document.getElementById("overlay");
   const burgerBtn = document.getElementById("burgerBtn");
   const burgerCloseBtn = document.getElementById("burgerCloseBtn");
@@ -25,26 +26,21 @@ export function initializeNavbar() {
   let mobileFocusTrap = null;
   const dropdownFocusTraps = new Map();
 
-  // Helper function to close navbar
   function closeNavbar() {
-    if (navbarCollapse?.classList.contains("show")) {
-      navbarCollapse.classList.remove("show");
-      overlay?.classList.remove("show");
-      document.body.style.overflow = "";
-      setAriaHidden(false);
-
-      // Deactivate and destroy mobile focus trap
-      if (mobileFocusTrap) {
-        mobileFocusTrap.deactivate();
-        mobileFocusTrap = null;
-      }
+    // Do not call static method bootstrap.Collapse.getInstance(navbar).hide()
+    // because storybook has a problem with referencing global bootstrap object in production build.
+    // Instead simulate the close button click - same thing.
+    // Do not put side effects of closing menu here (eg clearing menu focus trap), instead use "hidden.bs.collapse" or "hide.bs.collapse" event handlers declared below.
+    // Need to check if menu is actually set to show, otherwise cick will open instead.
+    if (navbar?.classList.contains("show")) {
+      burgerCloseBtn?.click();
     }
   }
 
   // Create mobile focus trap on-demand (when mobile menu opens)
   function createMobileFocusTrap() {
-    if (!mobileFocusTrap && navbarCollapse) {
-      mobileFocusTrap = createFocusTrap(navbarCollapse, {
+    if (!mobileFocusTrap && navbar) {
+      mobileFocusTrap = createFocusTrap(navbar, {
         returnFocusElement: burgerBtn,
         onEscape: () => {
           closeNavbar();
@@ -75,7 +71,7 @@ export function initializeNavbar() {
   // Setup dropdown event listeners
   function setupDropdownListeners() {
     // Find all dropdown toggles (elements with data-bs-toggle="dropdown")
-    const dropdownToggles = navbarCollapse?.querySelectorAll(
+    const dropdownToggles = navbar?.querySelectorAll(
       '[data-bs-toggle="dropdown"]',
     );
 
@@ -90,7 +86,7 @@ export function initializeNavbar() {
 
       // Listen for dropdown show event (desktop only)
       toggle.addEventListener("shown.bs.dropdown", () => {
-        const isMobile = window.innerWidth < 992;
+        const isMobile = window.innerWidth < breakpoints.lg;
         if (!isMobile) {
           // Create and activate focus trap on-demand
           const dropdownTrap = getOrCreateDropdownFocusTrap(dropdown, toggle);
@@ -101,7 +97,7 @@ export function initializeNavbar() {
       // Listen for dropdown hide event
       toggle.addEventListener("hidden.bs.dropdown", () => {
         const dropdownTrap = dropdownFocusTraps.get(dropdown);
-        if (dropdownTrap && dropdownTrap.isActive()) {
+        if (dropdownTrap && dropdownTrap.isActive) {
           dropdownTrap.deactivate();
         }
       });
@@ -109,7 +105,7 @@ export function initializeNavbar() {
   }
 
   // Setup dropdown listeners on load
-  if (navbarCollapse) {
+  if (navbar) {
     setupDropdownListeners();
   }
 
@@ -119,7 +115,7 @@ export function initializeNavbar() {
   });
 
   const resetNavbarState = () => {
-    const isMobile = window.innerWidth < 992;
+    const isMobile = window.innerWidth < breakpoints.lg;
     const dropdownToggles = document.querySelectorAll(
       ".navbar a.dropdown-toggle, .navbar a.no-dropdown-toggle",
     );
@@ -138,20 +134,40 @@ export function initializeNavbar() {
         toggle.setAttribute("data-bs-toggle", "dropdown");
       }
     });
+
+    if (!isMobile) {
+      closeNavbar();
+    }
   };
 
   window.addEventListener("resize", resetNavbarState);
   resetNavbarState();
 
+  //All associated side effects of navbar collapse beginning belong here
+  navbar?.addEventListener("hide.bs.collapse", () => {
+    overlay?.classList.remove("show");
+  });
+
+  // All associated side effects of navbar collapse completion belong here.
+  navbar?.addEventListener("hidden.bs.collapse", () => {
+    setAriaHidden(false);
+
+    // Deactivate and destroy mobile focus trap
+    if (mobileFocusTrap) {
+      mobileFocusTrap.deactivate();
+      mobileFocusTrap = null;
+    }
+  });
+
   // Burger buttons - handle open (mobile only)
-  navbarCollapse?.addEventListener("shown.bs.collapse", () => {
+  navbar?.addEventListener("shown.bs.collapse", () => {
     // Check if navbar is opening
     setTimeout(() => {
-      if (navbarCollapse?.classList.contains("show")) {
+      if (navbar?.classList.contains("show")) {
         setAriaHidden(true);
 
         // Create and activate focus trap when navbar opens (mobile only - whole navbar)
-        const isMobile = window.innerWidth < 992;
+        const isMobile = window.innerWidth < breakpoints.lg;
         if (isMobile) {
           const trap = createMobileFocusTrap();
           trap.activate();
@@ -159,9 +175,4 @@ export function initializeNavbar() {
       }
     }, 0);
   });
-
-  // Close button
-  burgerCloseBtn?.addEventListener("click", () => {
-    closeNavbar();
-  });
 }

package/src/components/bs5/navbar/navbar.scss

@@ -52,7 +52,7 @@
           }
           & > a {
             width: calc(100% - 3rem);
-            border-start-end-radius: 1rem;            
+            border-start-end-radius: 1rem;
           }
           &:has(.show) {
             background-color: var(--background-color-hover);
@@ -64,7 +64,6 @@
               }
             }
             .nav-link {
-              
               background-color: var(--dropdown-show-bg);
               border-inline-start-color: var(--dropdown-show-bg);
             }
@@ -152,7 +151,11 @@
               position: absolute;
               left: -9999px;
             }
-            h2,h3,h4,h5,h6 {
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
               color: var(--text-color);
             }
             div {
@@ -197,7 +200,7 @@
         border-inline-start: 0.25rem solid var(--link-border-color-hover);
         text-decoration: underline;
         text-underline-offset: 0.3rem;
-        text-decoration-thickness: 0.125rem;        
+        text-decoration-thickness: 0.125rem;
       }
     }
     a.dropdown-item {
@@ -217,7 +220,7 @@
         border-inline-start: 5px solid var(--link-border-color);
         left: -5px;
         top: 0;
-        bottom: calc(var(--border-width) *  -1);      
+        bottom: calc(var(--border-width) * -1);
       }
       &:hover,
       &.active {
@@ -226,15 +229,15 @@
           margin-block-end: 0;
           border-block-end: 0;
         }
-      &::before {
-        border-inline-start: 0.25rem solid var(--link-border-color-hover);
-      }
+        &::before {
+          border-inline-start: 0.25rem solid var(--link-border-color-hover);
+        }
       }
       &:hover {
         .qld-icon {
           background-color: var(--link-border-color-hover);
-        }       
-      }     
+        }
+      }
       &.dropdown-toggle {
         &::after {
           display: none;
@@ -312,7 +315,8 @@
     height: 2rem;
   }
   /* colours */
-  &.dark, &.dark-alt  {
+  &.dark,
+  &.dark-alt {
     --vert-background-color: var(--#{$prefix}default-background);
     --background-color: var(--#{$prefix}dark-background-shade);
     --background-color-hover: var(--#{$prefix}dark-alt-background);
@@ -345,7 +349,7 @@
       --header-color: var(--#{$prefix}light-text-heading);
       --action-icon-color: var(--#{$prefix}alt-button-hover);
       --dropdown-show-btn-bg: var(--#{$prefix}default-background);
-      --dropdown-show-btn-icon-color: var(--#{$prefix}alt-button-hover);    
+      --dropdown-show-btn-icon-color: var(--#{$prefix}alt-button-hover);
       --nav-header-color: var(--#{$prefix}dark-text-text);
       --nav-header-border-color: var(--#{$prefix}dark-border);
       --nav-header-icon-color: var(--#{$prefix}brand-accent);
@@ -388,7 +392,7 @@
       --nav-header-icon-color: var(--#{$prefix}alt-button-hover);
       --navbar-collapse-bg: var(--#{$prefix}default-background-shade);
       --action-icon-color_active: var(--text-color);
-      
+
       .alt {
         --vert-background-color: var(--#{$prefix}dark-background);
         --background-color: var(--#{$prefix}default-background);
@@ -441,7 +445,8 @@
     }
   }
   background-color: var(--background-color);
-  border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color);
+  border-block-end: var(--horizontal-bar-border-width) solid
+    var(--link-border-color);
   padding-block: 0;
   button.dropdown-toggle,
   .nav-header {
@@ -463,28 +468,33 @@
   }
   .navbar-nav a.nav-link {
     background-color: var(--background-color);
-    border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color);
+    border-block-end: var(--horizontal-bar-border-width) solid
+      var(--link-border-color);
     margin-block-end: calc(var(--horizontal-bar-border-width) * -1);
     &.show {
       color: var(--link-color);
       background-color: var(--dropdown-bg-color);
-      border-block-end: var(--horizontal-bar-border-width) solid var(--dropdown-bg-color);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--dropdown-bg-color);
       font-weight: 600;
       z-index: 20;
       &:hover {
         background-color: var(--dropdown-bg-color);
-        border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color-hover);
+        border-block-end: var(--horizontal-bar-border-width) solid
+          var(--link-border-color-hover);
       }
     }
     &.active {
       color: var(--link-color);
       background-color: var(--background-color);
-      border-block-end: var(--horizontal-bar-border-width) solid var(--background-color);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--background-color);
     }
     &:hover,
     &.active:hover {
       background-color: var(--background-color-hover);
-      border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color-hover);
+      border-block-end: var(--horizontal-bar-border-width) solid
+        var(--link-border-color-hover);
     }
     .qld-icon {
       background-color: var(--action-icon-color);
@@ -492,7 +502,7 @@
   }
   .navbar-nav a.nav-link,
   a.dropdown-item {
-    color: var(--link-color);
+    color: var(--text-color);
     padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
@@ -500,6 +510,7 @@
     gap: 0.5rem;
     align-items: center;
     &:hover {
+      color: var(--link-color);
       text-decoration: underline;
       text-underline-offset: 0.3rem;
       text-decoration-thickness: 0.125rem;
@@ -535,7 +546,9 @@
     }
   }
   .dropdown-menu.show {
-    margin-block-start: calc(var(--horizontal-bar-border-width) - var(--border-width));
+    margin-block-start: calc(
+      var(--horizontal-bar-border-width) - var(--border-width)
+    );
     inset-inline: 0;
     background-color: var(--dropdown-bg-color);
     padding: 4rem;
@@ -548,7 +561,7 @@
     grid-template-columns: repeat(3, 1fr);
     column-gap: 2rem;
     row-gap: 0;
-    z-index: 10;
+    z-index: 999;
     border-width: 0;
     @include media-breakpoint-up(xl) {
       column-gap: 4rem;
@@ -732,9 +745,9 @@
     transition: max-width var(--animation-time) ease-in;
     .navbar-collapse {
       background-color: var(--navbar-collapse-bg);
-    }    
+    }
     a.dropdown-item {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
     @include repeatedVerticalStyles;
     .nav-header .navbar-brand {
@@ -783,7 +796,7 @@
       }
       .nav-header {
         display: flex;
-      }    
+      }
       &.collapse > .container {
         animation-name: slideToRight;
         animation-duration: var(--animation-time);
@@ -821,8 +834,10 @@
     }
   }
 }
+
 //Prevent double scrollbar when navabr is open
-body:has(.navbar.show) {
-  overflow: hidden;
+@include media-breakpoint-down("lg") {
+  body:has(.navbar.show) {
+    overflow: hidden;
+  }
 }
-