@qld-gov-au/qgds-bootstrap5 2.1.11 → 2.1.13

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.11","branch":"HEAD","tag":"v2.1.11","commit":"5a3e313339341709791de452b0963964578103a8","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.13","branch":"HEAD","tag":"v2.1.13","commit":"52e2a0036c32fec19ae46dd2bf41785321ad2010","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

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

@@ -29,7 +29,7 @@
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.categories}}
-                        <li><a tabindex="0"href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.categoriesLink}}
                             <li><a tabindex="0" href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "description": "",
   "repository": {
     "type": "git",
@@ -59,24 +59,23 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/json": "^1.0.0",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@vitejs/plugin-react": "^5.1.2",
     "@storybook/addon-a11y": "^10.1.10",
     "@storybook/addon-docs": "^10.1.10",
     "@storybook/addon-links": "^10.1.10",
     "@storybook/addon-themes": "^10.1.10",
     "@storybook/cli": "^10.1.10",
     "@storybook/html-vite": "^10.1.10",
+    "@vitejs/plugin-react": "^5.1.4",
     "@vitest/ui": "^4.0.10",
     "autoprefixer": "^10.4.20",
     "chai": "^6.2.1",
     "chalk": "^5.6.2",
-    "chromatic": "^13.3.3",
+    "chromatic": "^15.0.0",
     "esbuild": "0.27.3",
     "esbuild-plugin-copy": "^2.1.1",
-    "esbuild-plugin-eslint": "^0.3.12",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.6.0",
-    "eslint": "9.39.2",
+    "eslint": "10.0.0",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-storybook": "^10.1.10",
     "globals": "17.3.0",
@@ -92,7 +91,7 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.38",
     "postcss": "^8.5.6",
-    "prettier": "3.6.2",
+    "prettier": "3.8.1",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.1.0",
     "run-parallel": "^1.2.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "description": "",
   "repository": {
     "type": "git",
@@ -59,24 +59,23 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/json": "^1.0.0",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@vitejs/plugin-react": "^5.1.2",
     "@storybook/addon-a11y": "^10.1.10",
     "@storybook/addon-docs": "^10.1.10",
     "@storybook/addon-links": "^10.1.10",
     "@storybook/addon-themes": "^10.1.10",
     "@storybook/cli": "^10.1.10",
     "@storybook/html-vite": "^10.1.10",
+    "@vitejs/plugin-react": "^5.1.4",
     "@vitest/ui": "^4.0.10",
     "autoprefixer": "^10.4.20",
     "chai": "^6.2.1",
     "chalk": "^5.6.2",
-    "chromatic": "^13.3.3",
+    "chromatic": "^15.0.0",
     "esbuild": "0.27.3",
     "esbuild-plugin-copy": "^2.1.1",
-    "esbuild-plugin-eslint": "^0.3.12",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.6.0",
-    "eslint": "9.39.2",
+    "eslint": "10.0.0",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-storybook": "^10.1.10",
     "globals": "17.3.0",
@@ -92,7 +91,7 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.38",
     "postcss": "^8.5.6",
-    "prettier": "3.6.2",
+    "prettier": "3.8.1",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.1.0",
     "run-parallel": "^1.2.0",

package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap

@@ -27,10 +27,10 @@ exports[`SearchInput > Renders as expected 1`] = `
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">Collection</strong>
                     <ul>
-                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
-                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
-                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
-                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
                             <li><a tabindex="0" href="/queenslanders" class="view-more">View all</a></li>
                     </ul>
                 </div>

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

@@ -196,6 +196,14 @@ export async function showSuggestions(value = "", isDefault = false, form) {
           dynamicSuggestionsContainer.getAttribute("data-view-more");
 
         // Build the services HTML safely
+        const escapeHtmlAttr = (str) =>
+          String(str)
+            .replace(/&/g, "&")
+            .replace(/"/g, """)
+            .replace(/'/g, "'")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+
         const servicesItems = fetchedServices.response.resultPacket.results
           .slice(0, 4)
           .map(
@@ -205,7 +213,7 @@ export async function showSuggestions(value = "", isDefault = false, form) {
           .join("");
 
         const viewMoreItem = viewMoreUrl
-          ? `<li><a tabindex="0" href="${viewMoreUrl}" class="view-more">View more</a></li>`
+          ? `<li><a tabindex="0" href="${escapeHtmlAttr(viewMoreUrl)}" class="view-more">View more</a></li>`
           : "";
 
         dynamicSuggestionsContainer.innerHTML += `

package/src/components/bs5/searchInput/searchInput.hbs

@@ -29,7 +29,7 @@
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.categories}}
-                        <li><a tabindex="0"href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.categoriesLink}}
                             <li><a tabindex="0" href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>

package/src/components/bs5/searchInput/searchInput.scss

@@ -17,6 +17,10 @@
   --border-radius: 0.25rem;
   --hover-background-color: var(--#{$prefix}neutral-light);
   --_size: 3rem;
+  container-type: inline-size;
+  display: flex;
+  position: relative;
+  border-radius: var(--border-radius);
 
   .dark &,
   .dark-alt & {
@@ -40,11 +44,7 @@
       --text-color: var(--#{$prefix}light-text-text);
     }
   }
-
-  display: flex;
-  position: relative;
-  border-radius: var(--border-radius);
-
+  
   .suggestions {
     transition-behavior: allow-discrete;
     opacity: 0;
@@ -106,6 +106,7 @@
       --background-color: var(--#{$prefix}white);
       outline: none;
     }
+    
   }
 
   > button {
@@ -133,10 +134,40 @@
       --qld-icon-color: currentColor;
     }
   }
+  
 
+  // Fallback for browsers that don't support container queries
   @include media-breakpoint-up(md) {
     --_size: 3.25rem;
 
+    &:before {
+      content: "";
+      mask-image: var(--qgds-icon-search);
+      mask-repeat: no-repeat;
+      mask-position: left;
+      background-color: var(--text-color);
+      width: 1.25rem;
+      aspect-ratio: 1 / 1;
+      position: absolute;
+      margin-inline-start: .5rem;
+      left: .5rem;
+      height: 100%;
+    }
+    .form-control {
+      padding-inline-start: 2.5rem;
+    }
+    .dark &,
+    .dark-alt & {
+      &:has(.form-control:focus) {
+        &:before {
+          background-color: var(--#{$prefix}light-text-text);
+        }
+      }
+      &:before {
+        background-color: var(--#{$prefix}dark-text-text);
+      }
+    }
+
     > button {
       padding-block: calc(0.75rem - 0.125rem);
       padding-inline: var(--qld-btn-padding-x);
@@ -154,6 +185,58 @@
     }
   }
 
+  // Container query for browsers that support it (overrides @media)
+  @supports (container-type: inline-size) {
+    @container (width > 450px) {
+      --_size: 3.25rem;
+
+      &:before {
+        content: "";
+        mask-image: var(--qgds-icon-search);
+        mask-repeat: no-repeat;
+        mask-position: left;
+        background-color: var(--text-color);
+        width: 1.25rem;
+        aspect-ratio: 1 / 1;
+        position: absolute;
+        margin-inline-start: .5rem;
+        left: .5rem;
+        height: 100%;
+      }
+      .form-control {
+        padding-inline-start: 2.5rem;
+      }
+      .dark &,
+      .dark-alt & {
+        &:has(.form-control:focus) {
+          &:before {
+            background-color: var(--#{$prefix}light-text-text);
+          }
+        }
+        &:before {
+          background-color: var(--#{$prefix}dark-text-text);
+        }
+      }
+
+      > button {
+        padding-block: calc(0.75rem - 0.125rem);
+        padding-inline: var(--qld-btn-padding-x);
+        margin: 0;
+        width: auto;
+
+        .btn-label {
+          display: block;
+        }
+
+        .btn-icon {
+          display: none;
+          margin-inline-start: 0;
+        }
+      }
+    }
+  }
+  
+
   //Search dropdown
   .suggestions {
     position: absolute;

package/src/components/bs5/sidenav/sidenav.scss

@@ -13,7 +13,6 @@
   --sidenav-level-two-padding: 2rem;
   --sidenav-level-three-padding: 3.5rem;
   --sidenav-navlink-padding: 1rem;
-
   --sidenav-hover-bg: var(--#{$prefix}neutral-lightest);
   --sidenav-hover-color: var(--#{$prefix}light-action-primary);
   --sidenav-hover-underline-color: var(
@@ -149,7 +148,7 @@
   .nav-link {
     padding: var(--sidenav-navlink-padding);
     font-size: 0.875rem;
-    color: var(--#{$prefix}light-text-text);
+    color: var(--qld-body-color);
     text-decoration: none;
     transition-duration: 0s;
     line-height: 1.25rem;

package/src/css/qld-tokens.scss

@@ -10,21 +10,21 @@ $color-default-color-dark-background-alt-shade: #000764 !default;
 $color-default-color-dark-background-alt: #001d74 !default;
 $color-default-color-dark-background-default-shade: #003e96 !default;
 $color-default-color-dark-background-default: #005eb8 !default;
-$color-default-color-dark-border-alt: #63b1ff !default;
+$color-default-color-dark-border-alt: #73c2ff !default;
 $color-default-color-dark-border-default: #418fed !default;
 $color-default-color-dark-crest-fill: #ffffff !default;
 $color-default-color-dark-focus-default: #c6ffff !default;
 $color-default-color-dark-link-default: #ffffff !default;
 $color-default-color-dark-link-on-action: #001c37 !default;
-$color-default-color-dark-link-visited: #F2CDFF !default;
+$color-default-color-dark-link-visited: #f2cdff !default;
 $color-default-color-dark-site-title: #ffffff !default;
 $color-default-color-dark-text-default: #ffffff !default;
 $color-default-color-dark-text-heading: #ffffff !default;
 $color-default-color-dark-text-lighter: #deebf9 !default;
 $color-default-color-dark-underline-default-hover: #ffffff !default;
 $color-default-color-dark-underline-default: #b5cce2 !default;
-$color-default-color-dark-underline-visited-hover: #F2CDFF !default;
-$color-default-color-dark-underline-visited: #C6AED9 !default;
+$color-default-color-dark-underline-visited-hover: #f2cdff !default;
+$color-default-color-dark-underline-visited: #c6aed9 !default;
 
 /* Light palettes */
 $color-default-color-light-accent-design-accent: #84d3ff !default;

package/src/stories/Introduction.mdx

@@ -79,7 +79,7 @@ The following core components are available in this library.  Additional layout
   {componentList.map(component => (
     <a 
       key={component.id} 
-      href={`/?path=${component.storyPath}`}
+      href={`/qgds-bootstrap5/?path=${component.storyPath}`}
       className="component-card"
     >
       <div className="component-card-title">{component.title}</div>
@@ -88,18 +88,21 @@ The following core components are available in this library.  Additional layout
 </div>
 
 
-## [How to use](?path=/docs/introduction-how-to-use--overview)
-> Use this guide to implement the QGDS Bootstrap 5 edition in your web page or application.
+## How to use
+Use this guide to implement the QGDS Bootstrap 5 edition in your web page or application.<br /><br />
+[How to use guide](?path=/docs/introduction-how-to-use--overview)
 
-## [Project development](?path=/docs/introduction-development---overview)
-> Use this guide if working on or contributing to the QGDS Bootstrap 5 source code itself. It outlines the architecture, build processes, Github setup and repository forking.
+
+## How to contribute
+Use this guide if working on or contributing to the QGDS Bootstrap 5 source code itself. It outlines the architecture, build processes, Github setup and repository forking.<br /><br />
+[Project development guide](?path=/docs/introduction-development---overview)
 
 
 ## The QGDS Ecosystem
 This library is part of a coordinated suite of tools designed to ensure visual and functional consistency across all Queensland Government digital touchpoints:
 
 - [Figma UI Kit](https://www.figma.com/community/file/978450410021220739): The design source of truth and visual specification for all components.
-- [QGDS Website](https://www.designsystem.qld.gov.au): The central hgub for Design System and component guidance and documentation.
-- Design Tokens: The foundational variables (colors, spacing, typography) that power our styles.
-- QGDS Web Components: A framework-agnostic implementation of Design System by the Queensland Government.
-- Vanilla Component Library: An independent framework-agnostic implementation of Design System by Queensland Health.
+- [QGDS Website](https://www.designsystem.qld.gov.au): The central hub for Design System and component guidance and documentation.
+- [Design Tokens](https://github.com/qld-gov-au/design-tokens): (WIP) The foundational variables (colors, spacing, typography) that power our styles.
+- [QGDS Web Components](https://github.com/qld-gov-au/qgds-web-components): (WIP) A framework-agnostic implementation of Design System by the Queensland Government.
+- [Vanilla QGDS Component Library](https://github.com/Qld-Health-Online-Team/design-system): An independent framework-agnostic implementation of Design System by Queensland Health.