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

package/dist/components/bs5/callToAction/callToAction.hbs

@@ -1,8 +1,8 @@
 <a class="qld-cta-link {{getClassNames "small, view-all" class}}"
     {{#if id}}id="{{id}}"{{/if}}
-    href="{{href}}" 
-    target="{{target}}" 
-    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} 
+    href="{{href}}"
+    target="{{target}}"
+    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}}
     >
      {{label}}
     <span class="icon" aria-hidden="true"></span>

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

@@ -1,8 +1,6 @@
 <!-- QGDS Component: Date input -->
 
-<label id="{{id}}-label"
-    class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="{{id}}">
+<label id="{{id}}-label" class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
@@ -12,53 +10,49 @@
 {{#if hint-text}}
 <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
-
 {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
 <span class="qld-input-success">{{successMessageText}}</span>
-{{else}}
-{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
+{{else if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
 <div class="valid-feedback">{{successMessageText}}</div>
-{{/if}}{{/contains}}
-
+{{/contains}}
 {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
 <span class="qld-input-error">{{errorMessageText}}</span>
-{{else}}
-{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
+{{else if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
 <div class="invalid-feedback">{{errorMessageText}}</div>
-{{/if}}{{/contains}}
+{{/contains}}
 
 <div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">
     <!-- day group -->
     <div class="day-group">
         <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>
         <div>
-            <input id="{{id}}-dayinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"
-                inputmode="numeric" maxlength="2"
-                class="qld-text-input 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 aria-required="true"
-                {{/if}}>
+            <input id="{{id}}-dayinput" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"
+                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}}>
         </div>
     </div>
     <!-- month group -->
     <div class="date-group">
         <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>
         <div>
-            <input id="{{id}}-monthinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"
-                type="text" inputmode="numeric" maxlength="2"
-                class="qld-text-input 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 aria-required="true"
-                {{/if}}>
+            <input id="{{id}}-monthinput" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"
+                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}}>
         </div>
     </div>
     <!-- year group -->
     <div class="date-group">
-        <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>
+        <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label qld-text-input-label">Year</label>
         <div class="year-label">
-            <input id="{{id}}-yearinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-yearinput-label"
-                placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"
-                class="qld-text-input 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}}>
+            <input id="{{id}}-yearinput" aria-labelledby="{{id}}-label {{id}}-yearinput-label"
+                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}}>
         </div>
     </div>
 </div>

package/dist/components/bs5/globalAlert/globalAlert.hbs

@@ -3,7 +3,13 @@
 <div class="global-alert-include">
   {{#each alertItems}}
   <section role="region" class="global-alert alert container-full d-none {{variant}}" data-variant="{{variant}}"
-    aria-label="{{ariaLabel}}" {{#if id}} data-id="{{id}}" {{/if}}{{#if dismissedExpiryDays}}
+    {{#if ariaLabel}} aria-label="{{ ariaLabel }}"
+    {{~else ifCond variant "==" "global-alert-critical"}} aria-label="Critical alert"
+    {{~else ifCond variant "==" "global-alert-info"}} aria-label="Informational alert"
+    {{~else ifCond variant "==" "global-alert-warning"}} aria-label="Warning alert"
+    {{~else}} aria-label="Informational alert"
+    {{~/if}}
+    {{#if id}} data-id="{{id}}" {{/if}}{{#if dismissedExpiryDays}}
     data-expiry-days="{{dismissedExpiryDays}}" {{/if}}>
     <div class="qld-global-alert-main">
       <div class="global-alert-icon">
@@ -13,6 +19,7 @@
         <span class="qld-icon qld-icon-sm qld-icon-alert-information" aria-hidden="true"></span>
         {{else ifCond variant '==' 'global-alert-warning'}}
         <span class="qld-icon qld-icon-sm qld-icon-alert-warning" aria-hidden="true"></span>
+        {{else}}<span class="qld-icon qld-icon-sm qld-icon-alert-information" aria-hidden="true"></span>
         {{/ifCond}}
       </div>
 

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

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

package/dist/components/bs5/pagination/pagination.hbs

@@ -23,8 +23,13 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
             {{! More button }}
             <span></span>
             {{else}}
-            {{! Page button }}
-            <a class="page-link" href="{{href}}" aria-label="{{arialabel}}">{{ linktext }}</a>
+                {{#ifCond "active" "in" customClasses}}
+                {{! Active page - not a link }}
+                <span class="page-link" aria-current="page" aria-label="{{#if arialabel}}{{arialabel}}{{else}}Page {{linktext}}, current page{{/if}}">{{ linktext }}</span>
+                {{else}}
+                {{! Page button }}
+                <a class="page-link" href="{{href}}" aria-label="{{#if arialabel}}{{arialabel}}{{else}}Page {{linktext}}{{/if}}">{{ linktext }}</a>
+                {{/ifCond}}
             {{/if}}
         </li>
 

package/dist/components/bs5/promotionalPanel/promotionalPanel.hbs

@@ -5,7 +5,7 @@
         {{/ifCond}}>
         <div class="image-panel">
             {{#ifCond type '!=' 'promo'}}
-            <img class="promo-panel-image" src="{{promoImage}}" alt="Promotional Image">
+            <img class="promo-panel-image" src="{{promoImage}}" alt="{{isdefined promoImageDescription "Promotional image"}}">
             {{else}}
                 <div class="promo-panel-image"></div>
             {{/ifCond}}

package/dist/components/bs5/searchInput/searchInput.hbs

@@ -4,8 +4,8 @@
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
         aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} placeholder="{{placeholder}}" />
-    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-        <span class="btn-icon"></span>
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}" aria-label="{{ buttonLabel }}">
+        <span class="btn-icon" aria-hidden="true"></span>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
     {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -12,13 +12,15 @@
   },
   "scripts": {
     "prepare": "husky && npm run build",
+    "ci:all": "npm ci && npm run lint && npm run test:run && npm run test:integration && npm run build && npm run build-storybook",
     "start": "npm run build",
     "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' --ignore-pattern 'src/js/handlebars.partials.js' .",
     "build": "node esbuild.js",
     "build:icons": "node esbuild.js --icons",
     "build:theme": "node esbuild.js --theme",
     "build:theme:icons": "node esbuild.js --theme --icons",
-    "test": "vitest",
+    "test": "vitest watch",
+    "test:run": "vitest run",
     "test:ui": "vitest --ui",
     "test:integration": "npm-run-all --parallel --race serve:test test:testrunner",
     "test:testrunner": "sleep 2 && mocha --timeout 10000 --require ./test/testServer.test.js ",
@@ -53,56 +55,55 @@
     "bootstrap": "^5.3.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.3",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/json": "^0.13.2",
+    "@eslint/json": "^0.14.0",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/addon-themes": "^9.1.13",
-    "@storybook/cli": "^9.1.13",
-    "@storybook/html-vite": "^9.1.13",
-    "@vitejs/plugin-vue": "5.2.4",
-    "@vitest/ui": "^3.2.4",
+    "@storybook/addon-a11y": "^10.0.8",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/addon-themes": "^10.0.8",
+    "@storybook/cli": "^10.0.8",
+    "@storybook/html-vite": "^10.0.8",
+    "@vitest/ui": "^4.0.10",
     "autoprefixer": "^10.4.20",
-    "chai": "^5.2.0",
-    "chalk": "^5.3.0",
-    "chromatic": "^13.3.1",
-    "esbuild": "0.25.11",
+    "chai": "^6.2.1",
+    "chalk": "^5.6.2",
+    "chromatic": "^13.3.3",
+    "esbuild": "0.27.0",
     "esbuild-plugin-copy": "^2.1.1",
-    "esbuild-plugin-eslint": "^0.3.7",
+    "esbuild-plugin-eslint": "^0.3.12",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "9.38.0",
+    "eslint": "9.39.1",
     "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-storybook": "^9.1.13",
-    "globals": "16.4.0",
+    "eslint-plugin-storybook": "^10.0.8",
+    "globals": "16.5.0",
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.2.0",
     "mini-svg-data-uri": "^1.4.4",
     "minimist": "^1.2.8",
-    "mocha": "^11.6.0",
+    "mocha": "^11.7.5",
     "node-html-parser": "^7.0.1",
     "npm-run-all2": "^8.0.4",
     "onchange": "^7.1.0",
-    "portfinder": "^1.0.37",
-    "postcss": "^8.5.4",
+    "portfinder": "^1.0.38",
+    "postcss": "^8.5.6",
     "prettier": "3.6.2",
     "raw-loader": "^4.0.2",
-    "rimraf": "^6.0.1",
+    "rimraf": "^6.1.0",
     "run-parallel": "^1.2.0",
-    "sass": "^1.89.2",
-    "selenium-webdriver": "^4.33.0",
-    "storybook": "^9.1.13",
-    "storybook-addon-deep-controls": "^0.9.5",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.4"
+    "sass": "^1.94.0",
+    "selenium-webdriver": "^4.38.0",
+    "storybook": "^10.0.8",
+    "storybook-addon-deep-controls": "^0.10.0",
+    "vite": "^7.1.11",
+    "vitest": "^4.0.10"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": ">=5.0.0 <5.9.0"
   },
   "exports": {
     "./qld.bootstrap.min.js": "./dist/assets/js/qld.bootstrap.min.js",

package/dist/sample-data/callToAction/callToAction.data.json

@@ -1,10 +1,11 @@
 {
 	"id": "",
 	"label": "View all",
+	"arialabel": "View all services",
 	"href": "#123",
 	"target": "_blank",
 	"class": [
-		{"small": false}, 
+		{"small": false},
 		{"view-all": true}
 	]
 }

package/dist/sample-data/dateinput/dateinput.data.json

@@ -12,5 +12,7 @@
   "optional-text": "optional",
   "hint-text": "(dd/mm/yyyy)",
   "successMessageText": "Success message",
-  "errorMessageText": "Error message"
+  "errorMessageText": "Error message",
+  "yearMin": "",
+  "yearMax": ""
 }

package/dist/sample-data/pagination/pagination.data.json

@@ -12,10 +12,10 @@
   },
 
   "pages": [
-    { "href": "#", "linktext": "1", "customClasses": "" },
-    { "href": "#", "linktext": "2", "customClasses": "active" },
-    { "href": "#", "linktext": "3", "customClasses": "" },
+    { "href": "#", "linktext": "1", "arialabel": "Page 1", "customClasses": "" },
+    { "href": "#", "linktext": "2", "arialabel": "Page 2, current page", "customClasses": "active" },
+    { "href": "#", "linktext": "3", "arialabel": "Page 3", "customClasses": "" },
     { "href": "#", "linktext": "", "customClasses": "more", "more": true },
-    { "href": "#", "linktext": "7", "customClasses": "" }
+    { "href": "#", "linktext": "7", "arialabel": "Page 7", "customClasses": "" }
   ]
 }

package/dist/sample-data/promotionalPanel/promotionalPanel.data.json

@@ -1,48 +1,46 @@
 {
-    "type": "indent-text",
-    "variantClass": "light",
-    "promoImage": "./assets/img/banner-example-3-to-2.jpg",
-    "contentAlignment": "content-left",
-    "icon": "icon-dot-grid",
-    "title": "Title goes here and has a maximum of 65 character limit",
-    "abstract": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
-    "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
-    "cta": {
-      "items": [
-        {
-          "url": "#",
-          "id": "https://www.wired.com",
-          "value": "Label",
-          "target": "_blank",
-          "class": [
-              {"small": false}, 
-              {"view-all": false}
-          ]
-        }
-      ]
-    },
-    "btn": {
-      "items": [
-        {
-          "variantClass": "btn-primary",
-          "islink": true,
-          "isdisabled": false,
-          "iconClass": "",
-          "iconPosition": "",
-          "label": "Primary",
-          "href": "https://google.com",
-          "target": "_self"
-        },
-        {
-          "variantClass": "btn-secondary",
-          "islink": true,
-          "isdisabled": false,
-          "iconClass": "",
-          "iconPosition": "",
-          "label": "Secondary",
-          "href": "https://google.com",
-          "target": "_self"
-        }
-      ]
-    }
-  }
+  "type": "indent-text",
+  "variantClass": "light",
+  "promoImage": "./assets/img/banner-example-3-to-2.jpg",
+  "promoImageDescription": "Promotional image",
+  "contentAlignment": "content-left",
+  "icon": "icon-dot-grid",
+  "title": "Title goes here and has a maximum of 65 character limit",
+  "abstract": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
+  "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
+  "cta": {
+    "items": [
+      {
+        "url": "#",
+        "id": "https://www.wired.com",
+        "value": "Label",
+        "target": "_blank",
+        "class": [{ "small": false }, { "view-all": false }]
+      }
+    ]
+  },
+  "btn": {
+    "items": [
+      {
+        "variantClass": "btn-primary",
+        "islink": true,
+        "isdisabled": false,
+        "iconClass": "",
+        "iconPosition": "",
+        "label": "Primary",
+        "href": "https://google.com",
+        "target": "_self"
+      },
+      {
+        "variantClass": "btn-secondary",
+        "islink": true,
+        "isdisabled": false,
+        "iconClass": "",
+        "iconPosition": "",
+        "label": "Secondary",
+        "href": "https://google.com",
+        "target": "_self"
+      }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -12,13 +12,15 @@
   },
   "scripts": {
     "prepare": "husky && npm run build",
+    "ci:all": "npm ci && npm run lint && npm run test:run && npm run test:integration && npm run build && npm run build-storybook",
     "start": "npm run build",
     "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' --ignore-pattern 'src/js/handlebars.partials.js' .",
     "build": "node esbuild.js",
     "build:icons": "node esbuild.js --icons",
     "build:theme": "node esbuild.js --theme",
     "build:theme:icons": "node esbuild.js --theme --icons",
-    "test": "vitest",
+    "test": "vitest watch",
+    "test:run": "vitest run",
     "test:ui": "vitest --ui",
     "test:integration": "npm-run-all --parallel --race serve:test test:testrunner",
     "test:testrunner": "sleep 2 && mocha --timeout 10000 --require ./test/testServer.test.js ",
@@ -53,56 +55,55 @@
     "bootstrap": "^5.3.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.3",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/json": "^0.13.2",
+    "@eslint/json": "^0.14.0",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/addon-themes": "^9.1.13",
-    "@storybook/cli": "^9.1.13",
-    "@storybook/html-vite": "^9.1.13",
-    "@vitejs/plugin-vue": "5.2.4",
-    "@vitest/ui": "^3.2.4",
+    "@storybook/addon-a11y": "^10.0.8",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/addon-themes": "^10.0.8",
+    "@storybook/cli": "^10.0.8",
+    "@storybook/html-vite": "^10.0.8",
+    "@vitest/ui": "^4.0.10",
     "autoprefixer": "^10.4.20",
-    "chai": "^5.2.0",
-    "chalk": "^5.3.0",
-    "chromatic": "^13.3.1",
-    "esbuild": "0.25.11",
+    "chai": "^6.2.1",
+    "chalk": "^5.6.2",
+    "chromatic": "^13.3.3",
+    "esbuild": "0.27.0",
     "esbuild-plugin-copy": "^2.1.1",
-    "esbuild-plugin-eslint": "^0.3.7",
+    "esbuild-plugin-eslint": "^0.3.12",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "9.38.0",
+    "eslint": "9.39.1",
     "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-storybook": "^9.1.13",
-    "globals": "16.4.0",
+    "eslint-plugin-storybook": "^10.0.8",
+    "globals": "16.5.0",
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.2.0",
     "mini-svg-data-uri": "^1.4.4",
     "minimist": "^1.2.8",
-    "mocha": "^11.6.0",
+    "mocha": "^11.7.5",
     "node-html-parser": "^7.0.1",
     "npm-run-all2": "^8.0.4",
     "onchange": "^7.1.0",
-    "portfinder": "^1.0.37",
-    "postcss": "^8.5.4",
+    "portfinder": "^1.0.38",
+    "postcss": "^8.5.6",
     "prettier": "3.6.2",
     "raw-loader": "^4.0.2",
-    "rimraf": "^6.0.1",
+    "rimraf": "^6.1.0",
     "run-parallel": "^1.2.0",
-    "sass": "^1.89.2",
-    "selenium-webdriver": "^4.33.0",
-    "storybook": "^9.1.13",
-    "storybook-addon-deep-controls": "^0.9.5",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.4"
+    "sass": "^1.94.0",
+    "selenium-webdriver": "^4.38.0",
+    "storybook": "^10.0.8",
+    "storybook-addon-deep-controls": "^0.10.0",
+    "vite": "^7.1.11",
+    "vitest": "^4.0.10"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": ">=5.0.0 <5.9.0"
   },
   "exports": {
     "./qld.bootstrap.min.js": "./dist/assets/js/qld.bootstrap.min.js",

package/src/components/bs5/breadcrumbs/breadcrumbs.scss

@@ -57,6 +57,7 @@ $expander-icon-color: $qld-light-link;
       box-shadow: var(--#{$prefix}dropdown-box-shadow);
       pointer-events: all;
       transition: max-height 0.5s ease-in;
+      z-index: 1;
     }
   }
 

package/src/components/bs5/button/button.scss

@@ -170,6 +170,7 @@ a.btn,
     color: var(--#{$prefix}btn-color);
     text-decoration: underline;
     text-decoration-color: inherit;
+    text-decoration-thickness: var(--qld-link-underline-thickness-hover, 2px);
     text-underline-offset: 0.3em;
   }
 

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

@@ -48,7 +48,10 @@ function buttonVariantsMarkup() {
       return `<div class="d-grid p-32">
               <div class="fw-bold">${variantLabel}</div>
               <div class="d-flex gap-3">
+
+                <!-- Example buttons -->
                 ${variantButtons}
+
               </div>
             </div>`;
     })
@@ -61,11 +64,20 @@ export default {
   args: defaultdata,
   render: (args) => {
     return `
+    <!-- Wrapper div for storybook only -->
     <div class="d-flex gap-3 p-32">
-      ${new Button(args).html}
-      ${new Button({ ...args, isdisabled: true }).html}
-      ${new Button({ ...args, isprogress: true, iconClass: "", label: "Loading button", progressLabel: "Loading...", islink: false, dataatts: 'data-loading-btn="true"' }).html}
-    </div>
+
+      <!-- Example link presented as QGDS button -->
+      ${new Button(args).html.trim()}
+
+      <!-- Example link presented as QGDS button -->
+      ${new Button({ ...args, isdisabled: true }).html.trim()}
+
+      <!-- Example button presented as QGDS button -->
+      ${new Button({ ...args, isprogress: true, iconClass: "", label: "Loading button", progressLabel: "Loading...", islink: false, dataatts: 'data-loading-btn="true"' }).html.trim()}
+    
+    
+      </div>
     `; //expand arguments, specifically turn isdisabled into true
   },
 

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

@@ -1,10 +1,11 @@
 {
 	"id": "",
 	"label": "View all",
+	"arialabel": "View all services",
 	"href": "#123",
 	"target": "_blank",
 	"class": [
-		{"small": false}, 
+		{"small": false},
 		{"view-all": true}
 	]
 }

package/src/components/bs5/callToAction/callToAction.hbs

@@ -1,8 +1,8 @@
 <a class="qld-cta-link {{getClassNames "small, view-all" class}}"
     {{#if id}}id="{{id}}"{{/if}}
-    href="{{href}}" 
-    target="{{target}}" 
-    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} 
+    href="{{href}}"
+    target="{{target}}"
+    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}}
     >
      {{label}}
     <span class="icon" aria-hidden="true"></span>