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

package/dist/components/bs5/button/button.hbs

@@ -10,7 +10,8 @@
 
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
+  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" tabindex="0" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}} {{{dataatts}}} >
+    
     {{#if isprogress}}
       {{~>progressSpinner~}}
     {{else}}

package/dist/components/bs5/dateinput/dateinput.hbs

@@ -30,7 +30,7 @@
                 inputmode="numeric" maxlength="2" minlength="2" min="1" max="31" pattern="^(0?[1-9]|[12][0-9]|3[01])$"
                 class="form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} 
                 {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="day"
-                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
+                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} tabindex="0" >
         </div>
     </div>
     <!-- month group -->
@@ -41,7 +41,7 @@
                 type="text" inputmode="numeric" maxlength="2" minlength="2" min="1" max="12" pattern="^(0?[1-9]|[1][0-2])$"
                 class="form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} 
                 {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="month"
-                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
+                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} tabindex="0">
         </div>
     </div>
     <!-- year group -->
@@ -52,7 +52,7 @@
                 placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4" minlength="4" pattern="[0-9]*" 
                 {{#if yearMin}}min="{{yearMin}}"{{/if}} {{#if yearMax}}max="{{yearMax}}"{{/if}}
                 class="form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
-                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
+                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} tabindex="0">
         </div>
     </div>
 </div>

package/dist/components/bs5/formcheck/formcheck.hbs

@@ -22,7 +22,7 @@
   
   {{#each listitems}}
   <div class="form-check {{#if ../isValid}}is-valid{{else}}{{#ifCond ../isValid "===" false}}is-invalid{{/ifCond}}{{/if}}">
-    <input class="form-check-input" type="{{#if ../type}}{{../type}}{{else}}{{#if type}}{{type}}{{else}}checkbox{{/if}}{{/if}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}} {{#if isRequired}}required{{/if}} >
+    <input class="form-check-input" type="{{#if ../type}}{{../type}}{{else}}{{#if type}}{{type}}{{else}}checkbox{{/if}}{{/if}}" name="{{name}}" id="{{id}}" value="{{value}}" tabindex="{{isdefined ../tabindex 0}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}} {{#if isRequired}}required{{/if}} >
     <label class="form-check-label" for="{{id}}">
       {{label}}
     </label>

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.1","branch":"HEAD","tag":"v2.1.1","commit":"e9b014307ee0b957ab946f973a0bd735811415db","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.3","branch":"HEAD","tag":"v2.1.3","commit":"0459f9571a74eab35ed443c3d02fece2a811642c","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/select/select.hbs

@@ -26,7 +26,7 @@
 {{/if}}{{/contains}}
 
 <select id={{id}} class="form-select {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}} {{customClass}}" 
-    {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >
+    {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} tabindex="0" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >
     <option selected value="">{{placeholder}}</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>

package/dist/components/bs5/textarea/textarea.hbs

@@ -28,5 +28,5 @@
 
 <!-- First text input field, described by the hint text above -->
 <textarea id="{{id}}" class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
-    placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}
+    placeholder="{{placeholder}}" rows="{{rows}}" tabindex="0" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}
     {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}}>{{value}}</textarea>

package/dist/components/bs5/textbox/textbox.hbs

@@ -27,5 +27,5 @@
 {{/if}}{{/contains}}
 
 <input id={{id}} {{#if value}}value="{{value}}"{{/if}}  class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
-    type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if
+    type="text" placeholder="{{placeholder}}" tabindex="0" {{#if isDisabled}}disabled{{/if}} {{#if
     isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "",
   "repository": {
     "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "",
   "repository": {
     "type": "git",

package/src/components/bs5/accordion/mdx/_designResources.mdx

@@ -1,6 +1,5 @@
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6276-45691&mode=design&t=chjWFr1CLu6KQXzg-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98109&mode=design&t=ORVHLonASEFQzPeD-0)
 - [Design System website](https://www.design-system.health.qld.gov.au/components/accordions)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/accordion/)

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/button/button.hbs

@@ -10,7 +10,8 @@
 
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
+  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" tabindex="0" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}} {{{dataatts}}} >
+    
     {{#if isprogress}}
       {{~>progressSpinner~}}
     {{else}}

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/dateinput/dateinput.hbs

@@ -30,7 +30,7 @@
                 inputmode="numeric" maxlength="2" minlength="2" min="1" max="31" pattern="^(0?[1-9]|[12][0-9]|3[01])$"
                 class="form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} 
                 {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="day"
-                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
+                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} tabindex="0" >
         </div>
     </div>
     <!-- month group -->
@@ -41,7 +41,7 @@
                 type="text" inputmode="numeric" maxlength="2" minlength="2" min="1" max="12" pattern="^(0?[1-9]|[1][0-2])$"
                 class="form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} 
                 {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="month"
-                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
+                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} tabindex="0">
         </div>
     </div>
     <!-- year group -->
@@ -52,7 +52,7 @@
                 placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4" minlength="4" pattern="[0-9]*" 
                 {{#if yearMin}}min="{{yearMin}}"{{/if}} {{#if yearMax}}max="{{yearMax}}"{{/if}}
                 class="form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
-                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
+                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} tabindex="0">
         </div>
     </div>
 </div>

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/formcheck.hbs

@@ -22,7 +22,7 @@
   
   {{#each listitems}}
   <div class="form-check {{#if ../isValid}}is-valid{{else}}{{#ifCond ../isValid "===" false}}is-invalid{{/ifCond}}{{/if}}">
-    <input class="form-check-input" type="{{#if ../type}}{{../type}}{{else}}{{#if type}}{{type}}{{else}}checkbox{{/if}}{{/if}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}} {{#if isRequired}}required{{/if}} >
+    <input class="form-check-input" type="{{#if ../type}}{{../type}}{{else}}{{#if type}}{{type}}{{else}}checkbox{{/if}}{{/if}}" name="{{name}}" id="{{id}}" value="{{value}}" tabindex="{{isdefined ../tabindex 0}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}} {{#if isRequired}}required{{/if}} >
     <label class="form-check-label" for="{{id}}">
       {{label}}
     </label>

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/pageLayout/pageLayout.stories.js

@@ -381,12 +381,14 @@ export const ContentPageWithSingleForm = {
           variantClass: "btn-primary",
           label: "Submit",
           type: "submit",
+          islink: false,
         },
         {
           ...buttonData,
           variantClass: "btn-secondary",
           label: "Reset",
           type: "reset",
+          islink: false,
         },
       ],
     },

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/)