@qld-gov-au/qgds-bootstrap5 2.1.2 → 2.1.3

package/src/components/bs5/backToTop/backToTop.mdx

@@ -9,6 +9,5 @@ import * as BackToTopStories from "./backToTop.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/XPeQMu5zKhEPKXdtZclWIW/Back-to-top?node-id=2004-2461&m=dev)
 - [Master component file (Figma)]()
 - [Design System website](https://www.designsystem.qld.gov.au/components/back-to-top)

package/src/components/bs5/banner/Banner.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./banner.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=10861-449385&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6037-22593&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/banners)
 

package/src/components/bs5/blockquote/Blockquote.mdx

@@ -9,6 +9,5 @@ import * as BlockquoteStories from "./blockquote.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6310-45849&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=11056-321340&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/callouts#section__quote-example)

package/src/components/bs5/breadcrumbs/Breadcrumbs.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./breadcrumbs.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=11185-261509&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98076&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/breadcrumbs)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/breadcrumb/)

package/src/components/bs5/button/Button.mdx

@@ -9,7 +9,6 @@ import * as ButtonStories from "./button.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6274-44764&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98058&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/buttons)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/buttons/)

package/src/components/bs5/callToAction/callToAction.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./callToAction.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395565&t=TIV8Ku0uZZw4wtEa-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=PtLTzZO7iSzsq4Qn-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/call-to-action-cta)
 

package/src/components/bs5/callout/Callout.mdx

@@ -9,6 +9,5 @@ import * as CalloutStories from "./callout.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6310-45849&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98115&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/callouts)

package/src/components/bs5/card/Card.mdx

@@ -14,7 +14,6 @@ Use the field `headingTag` to apply the correct heading level of your card title
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6273-41238&mode=design&t=Y96ILJNKlcVOEkpC-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98141&mode=design&t=d1ly5fkj79b8cqJ6-0)
 - [Design System website](https://www.design-system.health.qld.gov.au/components/cards)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/card/)

package/src/components/bs5/directionLinks/DirectionLinks.mdx

@@ -9,6 +9,5 @@ import * as DirectionLinksStories from "./directionLinks.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395560&t=7cFV6FheiSfxWCL8-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321363&p=f&t=cQBFbBP6J97taQCN-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/direction-links)

package/src/components/bs5/footer/Footer.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./footer.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5728-106979&mode=design&t=2A547O8zdXmQCwY7-0)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5728-106979&mode=design&t=2A547O8zdXmQCwY7-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/footer)
 

package/src/components/bs5/formcheck/stories/checkbox/Checkbox.mdx

@@ -13,7 +13,5 @@ import * as FormCheckCheckboxStories from "./checkbox.stories";
 
 ### Checkbox
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=11185-257399&mode=design&t=9b0T06NG5P47amzB-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=11056-321348&mode=design&t=9b0T06NG5P47amzB-0)
-- [Design System website](https://www.design-system.health.qld.gov.au/components/checkboxes)./formcheckRadio.stories
-  ../../formcheckCheckbox.stories./checkbox.stories
+- [Design System website](https://www.design-system.health.qld.gov.au/components/checkboxes)

package/src/components/bs5/formcheck/stories/radio/Radio.mdx

@@ -13,6 +13,5 @@ import * as FormCheckRadioStories from "./radio.stories";
 
 ### Radio
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6274-42582&mode=design&t=sWeMBpAnKzpGzmWI-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=11056-321347&mode=design&t=9b0T06NG5P47amzB-0)
 - [Design System website](https://www.design-system.health.qld.gov.au/components/radio-buttons)

package/src/components/bs5/globalAlert/GlobalAlert.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./globalAlert.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23805-314551&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-97590&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/alerts-global)
 

package/src/components/bs5/header/header.scss

@@ -78,7 +78,7 @@
         --qld-icon-color: var(--qld-action-icon-hover-color);
       }
 
-      @include mixins.focusable($offsetOutline: false);
+      @include mixins.focusable($offsetOutline: -3px);
 
       &:before {
         content: "";

package/src/components/bs5/image/Image.mdx

@@ -9,6 +9,5 @@ import * as ImageStories from "./image.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11009-239702&t=EU1m2kX6Y0PGJw2O-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97962&p=f&t=EU1m2kX6Y0PGJw2O-0)
 - [Design System website](https://www.designsystem.qld.gov.au/styles/images)

package/src/components/bs5/inpageAlert/InpageAlert.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./inpageAlert.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6314-44622&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98125&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/alerts-in-page)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/alerts/)

package/src/components/bs5/inpagenav/Inpagenav.mdx

@@ -9,7 +9,6 @@ import * as InpagenavStories from "./inpagenav.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395561&mode=design&t=BToeasIYcqL5uxRb-0)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=7905-252906&mode=design&t=BToeasIYcqL5uxRb-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/in-page-navigation)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/navs-tabs/#vertical)

package/src/components/bs5/link/link.mdx

@@ -9,6 +9,4 @@ import * as linkStories from "./link.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/2hnawnMhbVAHbYj91Z3S0I/00.-QLD.GOV-extended-components-and-templates?node-id=7402-2821&m=dev)
-- [Master component file (Figma)]()
-- [Design System website]()
+- [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=12900-201779&p=f&m=dev)

package/src/components/bs5/linkColumns/linkColumns.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./linkColumns.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f&t=6pghtHXhO8h5PAit-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f&t=6sRnJtEdRnteiQXM-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/link-columns-link-list)
 

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

@@ -1,3 +1,5 @@
+@use "../../../css/mixins" as m;
+
 @mixin repeatedVerticalStyles {
   .nav-header {
     min-height: var(--qld-header-preheader-height, 4rem);
@@ -18,6 +20,8 @@
       border-radius: 0;
       display: block;
       padding-inline: 1.5rem;
+
+      @include m.focusable($offsetOutline: -3px);
     }
   }
   > .container {
@@ -82,6 +86,9 @@
             box-shadow:
               0px 1px 2px rgba(0, 0, 0, 0.2),
               0px 1px 3px rgba(0, 0, 0, 0.1);
+
+            @include m.focusable();
+
             &:hover {
               box-shadow:
                 0px 4px 8px 3px rgba(0, 0, 0, 0.1),
@@ -100,9 +107,6 @@
               transform: rotate(0deg);
               transition: transform var(--animation-time) ease-in;
             }
-            &:focus {
-              outline: 2px solid var(--qld-focus-color);
-            }
           }
           .nav-link {
             border-block-end: 0;
@@ -140,12 +144,15 @@
               border-inline-start-color: var(--dropdown-show-bg);
               gap: 0;
               &::after {
-                content: "";
                 content: none;
               }
               &:hover {
                 transition: none;
               }
+
+              &:focus {
+                outline-offset: -3px;
+              }
             }
             p {
               position: absolute;
@@ -172,7 +179,6 @@
                 text-decoration-color: inherit;
                 padding: 0;
                 &:after {
-                  content: "";
                   content: none;
                 }
               }
@@ -214,6 +220,8 @@
       border-block-end: 0;
       margin-block-end: 0;
       position: relative;
+      outline-offset: -3px;
+
       &::before {
         content: "";
         position: absolute;
@@ -248,8 +256,9 @@
           background-color: transparent;
         }
       }
-      &:focus {
-        outline-offset: 0;
+
+      &:focus::before {
+        z-index: -1;
       }
     }
   }
@@ -336,6 +345,7 @@
     --mobile-only-display: block;
     --visibility-display: visible;
     --nav-header-border-color: var(--#{$prefix}dark-border);
+
     .qld-header:has(.qld-header-pre-header.dark) ~ & {
       --vert-background-color: var(--#{$prefix}dark-background);
       --background-color: var(--#{$prefix}default-background-shade);
@@ -355,6 +365,15 @@
       --nav-header-icon-color: var(--#{$prefix}brand-accent);
       --navbar-collapse-bg: var(--#{$prefix}dark-background-shade);
       --action-icon-color_active: var(--text-color);
+
+      > :where(*) {
+        --qld-focus-color: var(--qld-light-focus);
+      }
+
+      .nav-header {
+        --qld-focus-color: var(--qld-dark-focus);
+      }
+
       .alt {
         --vert-background-color: var(--#{$prefix}default-background);
         --background-color: var(--#{$prefix}sapphire-blue);
@@ -369,6 +388,11 @@
         --dropdown-bg-color: var(--#{$prefix}dark-background);
         --action-icon-color: var(--#{$prefix}brand-accent);
         --action-icon-color_active: var(--text-color);
+
+        > :where(*) {
+          --qld-focus-color: var(--qld-dark-focus);
+        }
+
         .nav-link {
           border-inline-start: 0;
         }
@@ -393,6 +417,14 @@
       --navbar-collapse-bg: var(--#{$prefix}default-background-shade);
       --action-icon-color_active: var(--text-color);
 
+      > :where(*) {
+        --qld-focus-color: var(--qld-dark-focus);
+      }
+
+      .nav-header {
+        --qld-focus-color: var(--qld-light-focus);
+      }
+
       .alt {
         --vert-background-color: var(--#{$prefix}dark-background);
         --background-color: var(--#{$prefix}default-background);
@@ -406,11 +438,13 @@
         --header-color: var(--#{$prefix}default-background);
         --action-icon-color: var(--#{$prefix}alt-button-hover);
         --action-icon-color_active: var(--text-color);
+
         .nav-link {
           border-inline-start: 0;
         }
       }
     }
+
     .qld-header:has(.qld-header-pre-header.dark-alt) ~ & {
       --background-color: var(--#{$prefix}dark-background-shade);
       --background-color-hover: var(--#{$prefix}dark-alt-background);
@@ -429,6 +463,15 @@
       --nav-header-border-color: var(--#{$prefix}dark-border);
       --nav-header-icon-color: var(--#{$prefix}dark-action-secondary);
       --action-icon-color_active: var(--text-color);
+
+      > :where(*) {
+        --qld-focus-color: var(--qld-dark-focus);
+      }
+
+      .nav-header {
+        --qld-focus-color: var(--qld-dark-focus);
+      }
+
       .alt {
         --background-color: var(--#{$prefix}dark-alt-background-shade);
         --background-color-hover: var(--#{$prefix}dark-alt-background-shade);
@@ -438,6 +481,11 @@
         --action-icon-color: var(--#{$prefix}brand-accent);
         --link-border-color-hover: var(--#{$prefix}dark-action-secondary-hover);
         --action-icon-color_active: var(--text-color);
+
+        > :where(*) {
+          --qld-focus-color: var(--qld-dark-focus);
+        }
+
         .nav-link {
           border-inline-start: 0;
         }
@@ -500,8 +548,7 @@
       background-color: var(--action-icon-color);
     }
   }
-  .navbar-nav a.nav-link,
-  a.dropdown-item {
+  .navbar-nav a.nav-link {
     color: var(--text-color);
     padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
@@ -515,8 +562,23 @@
       text-underline-offset: 0.3rem;
       text-decoration-thickness: 0.125rem;
     }
-    &:focus {
-      outline-offset: -2px;
+  }
+
+  a.dropdown-item {
+    color: var(--link-color);
+    padding-block: var(--nav-link-padding-block);
+    padding-inline: 0.75rem;
+    display: flex;
+    line-height: 2rem;
+    gap: 0.5rem;
+    align-items: center;
+    &:hover {
+      color: var(--link-color);
+      text-decoration: underline;
+      text-underline-offset: 0.3rem;
+      text-decoration-thickness: 0.125rem;
+    }
+    @include m.focusable($offsetOutline: -3px) {
       box-shadow: none;
     }
   }
@@ -624,8 +686,7 @@
             padding-inline-end var(--animation-time) ease-in-out,
             gap var(--animation-time) ease-in-out;
         }
-        &:focus {
-          outline-offset: 2px;
+        @include m.focusable() {
           box-shadow: none;
         }
       }
@@ -753,6 +814,7 @@
     .nav-header .navbar-brand {
       color: var(--nav-header-color);
     }
+
     #burgerCloseBtn {
       --qld-btn-close-bg: none;
       --qld-btn-close-opacity: 1;

package/src/components/bs5/pagination/Pagination.mdx

@@ -9,7 +9,6 @@ import * as PaginationStories from "./pagination.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395566&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=11056-321779&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/pagination)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/pagination/)

package/src/components/bs5/pagination/pagination.scss

@@ -1,6 +1,8 @@
 // QGDS QOL Pagination
 // extends https://getbootstrap.com/docs/5.3/components/pagination/#variables
 
+@use "../../../css/mixins" as m;
+
 //PREV NEXT ARROW on default background
 $pagination-icon-prevnext-color: var(--#{$prefix}light-action-secondary);
 $pagination-icon-prevnext-hover-color: var(
@@ -45,7 +47,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
   --#{$prefix}pagination-focus-border-color: var(
     --#{$prefix}dark-action-secondary
   );
-  --#{$prefix}pagination-focus-outline-color: var(--#{$prefix}light-link);
+  --#{$prefix}focus-color: var(--#{$prefix}light-focus);
   --#{$prefix}pagination-focus-bg: transparent;
 
   //Hover
@@ -99,7 +101,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
   --#{$prefix}pagination-focus-border-color: var(
     --#{$prefix}dark-action-secondary
   );
-  --#{$prefix}pagination-focus-outline-color: var(--#{$prefix}dark-focus);
+  --#{$prefix}focus-color: var(--#{$prefix}dark-focus);
   --#{$prefix}pagination-focus-bg: transparent;
 
   //Hover
@@ -171,9 +173,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
         background-color: var(--#{$prefix}pagination-hover-bg);
       }
 
-      &:focus {
-        outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-        outline-offset: 2px;
+      @include m.focusable($offsetOutline: 2px) {
         border-color: var(--#{$prefix}pagination-hover-border-color);
         box-shadow: inset 0 0 0 1px
           var(--#{$prefix}pagination-hover-border-color);
@@ -245,9 +245,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
           box-shadow: none;
         }
 
-        &:focus {
-          outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-          outline-offset: 2px;
+        @include m.focusable($offsetOutline: 2px) {
           border: none;
           box-shadow: none;
         }
@@ -260,18 +258,16 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
       background-color: var(--#{$prefix}pagination-active-bg);
       border-color: var(--#{$prefix}pagination-active-border-color);
 
-      &:hover {
-        border-color: var(--#{$prefix}pagination-active-bg);
-        box-shadow: var(--#{$prefix}pagination-active-dropshadow);
-        background-color: var(--#{$prefix}pagination-active-hover-bg);
+      @include m.focusable($offsetOutline: 2px) {
+        box-shadow: none;
+        border-color: var(--#{$prefix}pagination-active-focus-bg);
+        background-color: var(--#{$prefix}pagination-active-focus-bg);
       }
 
-      &:focus {
-        outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-        outline-offset: 2px;
-        border-color: var(--#{$prefix}pagination-active-bg);
-        box-shadow: var(--#{$prefix}pagination-active-dropshadow);
-        background-color: var(--#{$prefix}pagination-active-focus-bg);
+      &:hover {
+        box-shadow: none;
+        border-color: var(--#{$prefix}pagination-active-hover-bg);
+        background-color: var(--#{$prefix}pagination-active-hover-bg);
       }
     }
 

package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx

@@ -10,7 +10,6 @@ import defaultdata from "./promotionalPanel.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=SY0WW7uiwAl3ioEj-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=nVLTSHpRu8jvVSar-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/promotional-panel)
 

package/src/components/bs5/searchInput/SearchInput.mdx

@@ -9,4 +9,4 @@ import * as SearchInputStories from "./searchInput.stories";
 
 ## Design resources
 
-- [Component library(Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)
+- [Component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)

package/src/components/bs5/searchInput/search.functions.js

@@ -145,7 +145,30 @@ export async function showSuggestions(value = "", isDefault = false, form) {
             let linkItem = event.target.closest("a");
             if (linkItem) {
               event.preventDefault();
-              selectDynamicSuggestion(linkItem.textContent, form);
+
+              // Check if the link has a valid absolute URL
+              const href = linkItem.getAttribute("href");
+              const isValidUrl =
+                href &&
+                href !== "#" &&
+                (() => {
+                  try {
+                    const url = new URL(href, window.location.origin);
+                    return (
+                      url.protocol === "http:" || url.protocol === "https:"
+                    );
+                  } catch {
+                    return false;
+                  }
+                })();
+
+              if (isValidUrl) {
+                // Navigate directly to the URL
+                window.location.href = href;
+              } else {
+                // Use the search suggestion flow
+                selectDynamicSuggestion(linkItem.textContent, form);
+              }
             }
           });
       } else {
@@ -200,7 +223,30 @@ export async function showSuggestions(value = "", isDefault = false, form) {
             let linkItem = event.target.closest("a");
             if (linkItem) {
               event.preventDefault();
-              selectDynamicSuggestion(linkItem.textContent, form);
+
+              // Check if the link has a valid absolute URL
+              const href = linkItem.getAttribute("href");
+              const isValidUrl =
+                href &&
+                href !== "#" &&
+                (() => {
+                  try {
+                    const url = new URL(href, window.location.origin);
+                    return (
+                      url.protocol === "http:" || url.protocol === "https:"
+                    );
+                  } catch {
+                    return false;
+                  }
+                })();
+
+              if (isValidUrl) {
+                // Navigate directly to the URL
+                window.location.href = href;
+              } else {
+                // Use the search suggestion flow
+                selectDynamicSuggestion(linkItem.textContent, form);
+              }
             }
           });
       }

package/src/components/bs5/table/Table.mdx

@@ -9,7 +9,6 @@ import * as TableStories from "./table.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395552&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-97592&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/tables)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/content/tables/)

package/src/components/bs5/tabs/Tabs.mdx

@@ -9,7 +9,6 @@ import * as TabsStories from "./tabs.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=6247-38705&p=f&t=AHTplcCqsKKRWGvc-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=25951-236134&p=f&t=GBRfQxrdnGxAh30j-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/tabs)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/navs-tabs/)

package/src/components/bs5/tag/Tag.mdx

@@ -9,6 +9,5 @@ import * as TagStories from "./tag.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395550&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-97596&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/tags)

package/src/components/bs5/video/Video.mdx

@@ -9,5 +9,4 @@ import * as VideoStories from "./video.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23203-295341&mode=design&t=eRH1gEfJNDna1ovz-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=13297-214065&mode=design&t=YLfxdziHdqD2Ty0o-0)

package/src/components/bs5/video/video.scss

@@ -256,7 +256,7 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
   }
 
   .accordion {
-    margin-bottom: 0;
+    margin: 0;
     grid-area: transcript;
     &-item {
       &,

package/src/css/mixins/focusable.scss

@@ -18,7 +18,7 @@
   @if $offsetOutline == true {
     $offsetOutline: 2px;
   } @else if $offsetOutline == false {
-    $offsetOutline: $initial-offset;
+    $offsetOutline: 0px;
   }
 
   outline: $outlineWidth solid transparent;