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

package/.esbuild/plugins/qgds-plugin-generate-icon-assets.js

@@ -4,7 +4,7 @@ import log from "../helpers/logger.js";
 import svgToMiniDataURI from "mini-svg-data-uri";
 import { parse } from "node-html-parser";
 
-const PREFIX_QGDS = 'qgds-icon-';
+const PREFIX_QGDS = "qgds-icon-";
 
 /**
  * Generate CSS variables of icons from SVG files.
@@ -13,19 +13,18 @@ const PREFIX_QGDS = 'qgds-icon-';
  * @param {string} outputIconNames - Output SASS file for the generated icon names - to build icon utility classes
  * @param {string} outputIconJs - Output JS file for the generated icon names - to be used in Storybook
  */
-export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons", 
+export function QGDSgenerateIconAssetsPlugin(
+  inputDir = "./src/img/icons",
   outputIconSprite = "./src/img/icons-sprite.svg",
-  outputIconVars = "./src/components/bs5/icons/_icons.variables.scss", 
-  outputIconNames = "./src/components/bs5/icons/_icons.list.scss", 
-  outputIconJs = "./src/components/bs5/icons/_icons.list.js") {
-
+  outputIconVars = "./src/components/bs5/icons/_icons.variables.scss",
+  outputIconNames = "./src/components/bs5/icons/_icons.list.scss",
+  outputIconJs = "./src/components/bs5/icons/_icons.list.js",
+) {
   return {
     name: "qgds-generate-icon-variables",
 
     setup(build) {
-
       const regenerate = () => {
-        
         log("yellow", "\n Start generating icons assets... \n");
 
         if (!fs.existsSync(inputDir)) {
@@ -33,7 +32,9 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
           return;
         }
 
-        const icons = fs.readdirSync(inputDir).filter((file) => file.endsWith(".svg"));
+        const icons = fs
+          .readdirSync(inputDir)
+          .filter((file) => file.endsWith(".svg"));
 
         if (icons.length === 0) {
           log("red", `SVG files not found in ${inputDir}`);
@@ -41,8 +42,8 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
         }
 
         let spriteContent = `<svg xmlns="http://www.w3.org/2000/svg" role="img">\n`;
-        let cssVariables = `:root {\n`;
-        let sassVariables = `$icon-names: (\n`;
+        let cssVariables = `// This file is autogenerated. Do not edit directly!\n:root {\n`;
+        let sassVariables = `// This file is autogenerated. Do not edit directly!\n$icon-names: (\n`;
         let jsVariables = [];
 
         for (const file of icons) {
@@ -62,7 +63,9 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
           }
 
           // Sanitise the name to avoid issues with special characters (and space) on filename
-          const sanitisedName = name.replace(/[^a-zA-Z0-9\-_]/g, '-').toLowerCase();
+          const sanitisedName = name
+            .replace(/[^a-zA-Z0-9\-_]/g, "-")
+            .toLowerCase();
           if (sanitisedName !== name) {
             log("yellow", `  Renaming icon: "${name}" to "${sanitisedName}"`);
           }
@@ -72,7 +75,7 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
 
           cssVariables += `  --${PREFIX_QGDS}${sanitisedName}: url("${dataUri}");\n`;
 
-          sassVariables += `  ${sanitisedName},\n`;
+          sassVariables += `  ${sanitisedName}: '${svgContent.replace(/\n|\r/g, "")}',\n`;
 
           jsVariables.push(sanitisedName);
         }
@@ -83,21 +86,25 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
         fs.writeFileSync(outputIconSprite, spriteContent);
         fs.writeFileSync(outputIconVars, cssVariables);
         fs.writeFileSync(outputIconNames, sassVariables);
-        fs.writeFileSync(outputIconJs, `export default ${JSON.stringify(jsVariables, null, 2)};\n`);
-
-        log("magenta", `Successfully generated icons assets:
-                         - Sprite file   ${outputIconSprite}
-                         - CSS variables ${outputIconVars}
-                         - SASS names    ${outputIconNames}
-                         - JS names      ${outputIconJs}
-                         \n\n`);
-
+        fs.writeFileSync(
+          outputIconJs,
+          `export default ${JSON.stringify(jsVariables, null, 2)};\n`,
+        );
+
+        log(
+          "magenta",
+          `Successfully generated icons assets:
+  - Sprite file   ${outputIconSprite}
+  - CSS variables ${outputIconVars}
+  - SASS names    ${outputIconNames}
+  - JS names      ${outputIconJs}
+\n\n`,
+        );
       };
 
       build.onStart(() => {
         regenerate();
       });
-
     },
   };
-}
+}

package/.storybook/preview.js

@@ -1,5 +1,4 @@
 import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
-import "../src/js/qld.bootstrap.js";
 import "../src/css/main.scss";
 import { withThemeByClassName } from "@storybook/addon-themes";
 // import { allBackgrounds } from "./modes.js";
@@ -11,8 +10,13 @@ import {
 // Check if dynamic theme should be enabled via environment variable
 const ENABLE_DYNAMIC_THEME = import.meta.env.ENABLE_DYNAMIC_THEME;
 import { INITIAL_VIEWPORTS } from "storybook/viewport";
+
+// Initialize Handlebars helpers IMMEDIATELY, before any stories load
 import init from "../src/js/handlebars.init.js";
 import Handlebars from "handlebars";
+init(Handlebars);
+
+import "../src/js/qld.bootstrap.js";
 
 // NOTE: TurboSnap Performance Warning
 // The handlebars.init.js import above loads handlebars.partials.js which is
@@ -129,7 +133,6 @@ const preview = {
       defaultTheme: "None",
     }),
     (Story, { parameters }) => {
-      init(Handlebars);
       const { pageLayout, wrapperClasses } = parameters;
       switch (pageLayout) {
         case "with-wrapper":

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

@@ -10,7 +10,7 @@
 
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}} {{label}}" 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}}}" {{#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}}>
     {{#if isprogress}}
       {{~>progressSpinner~}}
     {{else}}

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

@@ -1,64 +1,64 @@
 <!-- QGDS Component: Date input -->
 
-<!-- Label -->
-<label id="dategroup-label"
+<label id="{{id}}-label"
     class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="example-1">
+    for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
     {{/if}}
 </label>
 
-<!-- Hint text -->
 {{#if hint-text}}
-<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" customClass}}
-<span id="text-field-success" class="qld-input-success">
-    {{successMessageText}}
-</span>
-{{/contains}}
+{{#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`}}
+<div class="valid-feedback">{{successMessageText}}</div>
+{{/if}}{{/contains}}
 
-{{#contains "qld-input-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/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`}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
-<div aria-labelledby="dategroup-label" role="group" class="row date-container {{customClass}}">
+<div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">
     <!-- day group -->
     <div class="day-group">
-        <label for="dayinput" class="date-label qld-text-input-label">Day</label>
+        <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>
         <div>
-            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"
+            <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}}" id="dayinput" ref="day"
+                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}}>
         </div>
     </div>
     <!-- month group -->
     <div class="date-group">
-        <label for="monthinput" class="date-label qld-text-input-label">Month</label>
+        <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>
         <div>
-            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"
+            <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}}" id="monthinput" ref="month"
+                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}}>
         </div>
     </div>
     <!-- year group -->
     <div class="date-group">
-        <label for="yearinput" class="date-label">Year</label>
+        <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>
         <div class="year-label">
-            <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-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}}"
-                id="yearinput" ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
-                isRequired}}required aria-required="true" {{/if}}>
+                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}}>
         </div>
     </div>
 </div>

package/dist/assets/components/bs5/footer/customLinks.hbs

@@ -1,5 +1,5 @@
 {{#if customLinks }}
-    <ul class="nav footer-link-list footer-link-list--custom flex-column">      
+    <ul class="nav footer-link-list footer-link-list--custom flex-column">
         {{#each customLinks }}
         <li><a class="nav-link" href="{{ link }}" {{#if target }} target="_blank" {{/if}}>{{ label }}</a></li>
         {{/each }}

package/dist/assets/components/bs5/footer/followLinks.hbs

@@ -6,7 +6,7 @@
               <span class="qld-icon qld-icon-md qld-icon-{{icon}} d-lg-none" aria-hidden="true"></span>
               <span class="qld-icon qld-icon-sm qld-icon-{{icon}} d-none d-lg-block" aria-hidden="true"></span>
               <span class="nav-link-label d-none d-lg-block">{{ label }}</span>
-              <span class="sr-only">{{ label }}</span>
+              <span class="sr-only">{{isdefined accessibleLabel label}}</span>
           </a>
       </li>
     {{/each }}

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

@@ -11,10 +11,18 @@
   {{#if hintLabel}}
   <span class="qld-hint-text">{{hintLabel}}</span>
   {{/if}}
+
+  {{#if successMessageText}}
+  <div class="valid-feedback">{{successMessageText}}</div>
+  {{/if}}
+
+  {{#if errorMessageText}}
+  <div class="invalid-feedback">{{errorMessageText}}</div>
+  {{/if}}
   
   {{#each listitems}}
-  <div class="form-check">
-    <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}}>
+  <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}} >
     <label class="form-check-label" for="{{id}}">
       {{label}}
     </label>

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

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

package/dist/assets/components/bs5/inpageAlert/inpageAlert.hbs

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

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

@@ -3,41 +3,45 @@
 -->
 <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}} />
+        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>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
-    {{#if suggestions}}
-    <div class="suggestions suggestions__group d-none">
-        <div class="default-suggestions">
-            <div class="suggestions-category mt-16">
-                <strong class="suggestions-category-label d-block">Popular services</strong>
-                <ul class="mt-2">
-                    {{#each default_suggestions.popular_services}}
-                    <li><a href="{{link}}">{{title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-
-            <div class="suggestions-category mt-16">
-                <strong class="suggestions-category-label d-block">Browse by category</strong>
-                <ul class="mt-12 mb-0">
-                    {{#each default_suggestions.categories}}
-                    <li><a href="{{link}}">{{title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-
-            {{#if default_suggestions.options.view_more}}
-            <div class="suggestions-category">
-                <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
-                    href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
+    {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
+    
+    <div class="suggestions suggestions__group default">
+        {{#if hasDefaultSuggestions}}
+            <div class="default-suggestions">
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
+                    <ul>
+                        {{#each defaultSuggestions.popularServices}}
+                        <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                        {{#if defaultSuggestions.popularServicesLink}}
+                            <li><a tabindex="0" href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
+                        {{/if}}
+                    </ul>
+                </div>
+                {{#if defaultSuggestions.categories}}
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
+                    <ul>
+                        {{#each defaultSuggestions.categories}}
+                        <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>
+                        {{/if}}
+                    </ul>
+                </div>
+                {{/if}}
             </div>
-            {{/if}}
-        </div>
-        <div class="dynamic-suggestions"></div>
+        {{/if}}
+        {{#if hasDynamicSuggestions}}
+            <div class="dynamic-suggestions" {{#if dynamicSuggestionsServiceLink.href}}data-view-more="{{dynamicSuggestionsServiceLink.href}}"{{/if}}></div>
+        {{/if}}
     </div>
-    {{/if}}
-    
+    {{/ifCond}}    
 </div>

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

@@ -1,33 +1,33 @@
 <!-- QGDS Component: Select -->
 
-<!-- Label for the first input field -->
-<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="example-1">
+<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></label>
+    <span class="label-text-optional">({{optional-text}})</span>
     {{/if}}
+</label>
 
-<!-- Hint text for the first input field -->
 {{#if hint-text}}
-<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" customClass}}
-<span id="text-field-success" class="qld-input-success">
-    {{successMessageText}}
-</span>
-{{/contains}}
+{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
+<span class="qld-input-success">{{successMessageText}}</span>
+{{else}}{{! updated bootstrap style classes - `valid-feedback`}}
+{{#if successMessageText}}
+<div class="valid-feedback">{{successMessageText}}</div>
+{{/if}}{{/contains}}
 
-{{#contains "qld-input-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/contains}}
+{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
+<span class="qld-input-error">{{errorMessageText}}</span>
+{{else}}{{! updated bootstrap style classes - `invalid-feedback`}}
+{{#if errorMessageText}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
-<!-- First text input field, described by the hint text above -->
-<select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}}"
-    aria-label="Default select example" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"{{/if}}>
-    <option selected>{{placeholder}}</option>
+<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}} >
+    <option selected value="">{{placeholder}}</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>

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

@@ -1,32 +1,32 @@
 <!-- QGDS Component: Textarea -->
 
-<!-- Label for the first input field -->
 <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="example-1">
+    for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
     {{/if}}
 </label>
 
-<!-- Hint text for the first input field -->
 {{#if hint-text}}
-<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" customClass}}
-<span id="text-field-success" class="qld-input-success">
-    {{successMessageText}}
-</span>
-{{/contains}}
+{{#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`}}
+<div class="valid-feedback">{{successMessageText}}</div>
+{{/if}}{{/contains}}
 
-{{#contains "qld-input-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/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`}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
 <!-- First text input field, described by the hint text above -->
-<textarea id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
-    placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
-    aria-required="true" {{/if}}></textarea>
+<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}}
+    {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}}>{{value}}</textarea>

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

@@ -1,32 +1,31 @@
 <!-- QGDS Component: Textbox -->
 
-<!-- Label for the first input field -->
 <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="example-1">
+    for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
     {{/if}}
 </label>
 
-<!-- Hint text for the first input field -->
 {{#if hint-text}}
-<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" customClass}}
-<span id="text-field-success" class="qld-input-success">
-    {{successMessageText}}
-</span>
-{{/contains}}
+{{#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`}}
+<div class="valid-feedback">{{successMessageText}}</div>
+{{/if}}{{/contains}}
 
-{{#contains "qld-input-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/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`}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
-<!-- First text input field, described by the hint text above -->
-<input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
-    type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if
-    isRequired}}required aria-required="true" {{/if}} />
+<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
+    isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />