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

package/dist/assets/js/handlebars.init.min.js

@@ -1,4 +1,4 @@
-"use strict";(()=>{function c(e,a,i){switch(a){case"==":return e==i;case"===":return e===i;case"!=":return e!=i;case"!==":return e!==i;case"<":return e<i;case"<=":return e<=i;case">":return e>i;case">=":return e>=i;case"&&":return e&&i;case"||":return e||i;case"in":return typeof e=="string"&&typeof i=="string"?i.split(",").map(t=>t.trim()).includes(e):!1;case"contains":return typeof e=="string"&&typeof i=="string"?e.toLowerCase().indexOf(i.toLowerCase())>=0:!1;default:return!1}}function r(e){e.registerHelper("contains",function(a,i,t){return a=e.escapeExpression(a),i=e.escapeExpression(i),i.indexOf(a)>-1?t.fn(this):t.inverse(this)}),e.registerHelper("ifCond",function(a,i,t,C){return c(a,i,t)?C.fn(this):C.inverse(this)}),e.registerHelper("cond",(a,i,t)=>c(a,i,t)),e.registerHelper("isType",function(a,i,t){return a===i?t.fn(this):t.inverse(this)}),e.registerHelper("ifAny",function(...a){let i=a.pop();return a.some(t=>!!t)?i.fn(this):i.inverse(this)}),e.registerHelper("ifAll",function(...a){let i=a.pop();return a.every(t=>!!t)?i.fn(this):i.inverse(this)}),e.registerHelper("now",function(){return new Date().toISOString()}),e.registerHelper("formatDate",function(a,i,t){let C;if(a&&(C=new Date(a)),isNaN(C)&&i&&(C=new Date(i)),isNaN(C))return"Invalid Date";var s=["January","February","March","April","May","June","July","August","September","October","November","December"],o=C.getDate(),l=s[C.getMonth()],n=C.getFullYear();switch(t){case"YYYY":return`${n}`;case"MMMM YYYY":return`${l} ${n}`;default:return`${o} ${l} ${n}`}}),e.registerHelper("formatDateOrToday",function(a,i){let t=a||new Date().toISOString();return e.helpers.formatDate(a,t,i)}),e.registerHelper("formatDuration",function(a,i){if(!a)return"";if(typeof a=="string"&&i!=="long")return a;let t="",C=[],s,o,l;if(typeof a=="string"){let n=a.split(":");l=n[0],n.length==2?[o="",l=""]=n:n.length==3&&([s="",o="",l=""]=n)}else[s="",o="",l=""]=a;return i==="long"?(s>0&&C.push(`${s} hour${s>1?"s":""}`),o>0&&C.push(`${o} minute${o>1?"s":""}`),l>0&&C.push(`${l} second${l>1?"s":""}`),t=C.join(" ")):(s>0&&C.push(s.toString().padStart(2,0)),C.push(o.toString().padStart(2,0)),C.push(l.toString().padStart(2,0)),t=C.join(":")),t}),e.registerHelper("isdefined",function(a,i){return a!==void 0&&a!==""?a:i}),e.registerHelper("getClassNames",function(a,i){let t=a.split(",").map(s=>s.trim()),C=[];for(let s=0;s<t.length;s++){let o=t[s];if(i){for(let l=0;l<i.length;l++)if(i[l][o]===!0){C.push(o);break}}}return C.length>0?C.join(" "):""}),e.registerHelper("join",function(a,i){return(!i||typeof i!="string")&&(i=" "),Array.isArray(a)?a.join(i):a}),e.registerHelper("toCamelCase",function(a){return typeof a!="string"?a:a.toLowerCase().replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(i,t)=>t===0?i.toLowerCase():i.toUpperCase()).replace(/\s+/g,"")})}typeof Handlebars!="undefined"&&r(Handlebars);var p=`<!-- QGDS Component: Accordion -->
+"use strict";(()=>{function c(e,a,i){switch(a){case"==":return e==i;case"===":return e===i;case"!=":return e!=i;case"!==":return e!==i;case"<":return e<i;case"<=":return e<=i;case">":return e>i;case">=":return e>=i;case"&&":return e&&i;case"||":return e||i;case"in":return typeof e=="string"&&typeof i=="string"?i.split(",").map(t=>t.trim()).includes(e):!1;case"contains":return typeof e=="string"&&typeof i=="string"?e.toLowerCase().indexOf(i.toLowerCase())>=0:!1;default:return!1}}function r(e){e.registerHelper("contains",function(a,i,t){return a=e.escapeExpression(a),i=e.escapeExpression(i),i.indexOf(a)>-1?t.fn(this):t.inverse(this)}),e.registerHelper("ifCond",function(a,i,t,C){return c(a,i,t)?C.fn(this):C.inverse(this)}),e.registerHelper("cond",(a,i,t)=>c(a,i,t)),e.registerHelper("isType",function(a,i,t){return a===i?t.fn(this):t.inverse(this)}),e.registerHelper("ifAny",function(...a){let i=a.pop();return a.some(t=>!!t)?i.fn(this):i.inverse(this)}),e.registerHelper("ifAll",function(...a){let i=a.pop();return a.every(t=>!!t)?i.fn(this):i.inverse(this)}),e.registerHelper("now",function(){return new Date().toISOString()}),e.registerHelper("formatDate",function(a,i,t){let C;if(a&&(C=new Date(a)),isNaN(C)&&i&&(C=new Date(i)),isNaN(C))return"Invalid Date";var s=["January","February","March","April","May","June","July","August","September","October","November","December"],n=C.getDate(),l=s[C.getMonth()],o=C.getFullYear();switch(t){case"YYYY":return`${o}`;case"MMMM YYYY":return`${l} ${o}`;default:return`${n} ${l} ${o}`}}),e.registerHelper("formatDateOrToday",function(a,i){let t=a||new Date().toISOString();return e.helpers.formatDate(a,t,i)}),e.registerHelper("formatDuration",function(a,i){if(!a)return"";if(typeof a=="string"&&i!=="long")return a;let t="",C=[],s,n,l;if(typeof a=="string"){let o=a.split(":");l=o[0],o.length==2?[n="",l=""]=o:o.length==3&&([s="",n="",l=""]=o)}else[s="",n="",l=""]=a;return i==="long"?(s>0&&C.push(`${s} hour${s>1?"s":""}`),n>0&&C.push(`${n} minute${n>1?"s":""}`),l>0&&C.push(`${l} second${l>1?"s":""}`),t=C.join(" ")):(s>0&&C.push(s.toString().padStart(2,0)),C.push(n.toString().padStart(2,0)),C.push(l.toString().padStart(2,0)),t=C.join(":")),t}),e.registerHelper("isdefined",function(a,i){return a!==void 0&&a!==""?a:i}),e.registerHelper("getClassNames",function(a,i){let t=a.split(",").map(s=>s.trim()),C=[];for(let s=0;s<t.length;s++){let n=t[s];if(i){for(let l=0;l<i.length;l++)if(i[l][n]===!0){C.push(n);break}}}return C.length>0?C.join(" "):""}),e.registerHelper("join",function(a,i){return(!i||typeof i!="string")&&(i=" "),Array.isArray(a)?a.join(i):a}),e.registerHelper("toCamelCase",function(a){return typeof a!="string"?a:a.toLowerCase().replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(i,t)=>t===0?i.toLowerCase():i.toUpperCase()).replace(/\s+/g,"")})}typeof Handlebars!="undefined"&&r(Handlebars);var f=`<!-- QGDS Component: Accordion -->
 <div class="accordion-group">
     {{#if toggleAll}}
         <div class="accordion-toggle">
@@ -23,7 +23,7 @@
         {{/each }}
     </div>
 </div>
-`;var f=`{{#unless hide_back_to_top}}
+`;var p=`{{#unless hide_back_to_top}}
   <div class="back-to-top d-print-none">
     {{> directionLinks  
         label= (isdefined directionalLink.label "Back to top")
@@ -123,7 +123,7 @@
       {{/if}}
     {{/each}}
   </ol>
-</nav>`;var h=`<!-- breadcrumbs-->
+</nav>`;var v=`<!-- breadcrumbs-->
 <div class="container-fluid alt">
   <div class="container">
     <div class="row">
@@ -133,7 +133,7 @@
       </div>
     </div>
   </div>
-</div>`;var v=`{{!-- Button icon partial --}}
+</div>`;var h=`{{!-- Button icon partial --}}
 {{#*inline "buttonIcon"~}}
 <span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
 {{~/inline}} 
@@ -145,7 +145,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}}
@@ -387,7 +387,7 @@
   <div class="row">
     {{> @partial-block }}
   </div>
-</div>`;var q=`<!DOCTYPE html>
+</div>`;var y=`<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -514,7 +514,7 @@
 </body>
 
 
-</html>`;var Z=`<!DOCTYPE html>
+</html>`;var q=`<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -672,82 +672,82 @@
 </body>
 
 
-</html>`;var y=`<!-- Content Wrapper -->
+</html>`;var Z=`<!-- Content Wrapper -->
 <div class="col-12 col-lg-8 ps-lg-64 qld-content-body" id="content">
   {{#if title}}<h1>{{title}}</h1>{{/if}}
   {{> @partial-block }}
 </div>
-`;var x="";var w=`{{#if customLinks }}
-    <ul class="nav footer-link-list footer-link-list--custom flex-column">      
+`;var w="";var x=`{{#if customLinks }}
+    <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 }}
     </ul>
-{{/if}}`;var T=`<!-- QGDS Component: Date input -->
+{{/if}}`;var S=`<!-- 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>
-`;var S=`{{! valid class values are: up, down, left, right}}
+`;var T=`{{! valid class values are: up, down, left, right}}
 <a class="qld-dir-link {{class}}" 
     {{~#if id}} id="{{id}}" {{/if~}} 
     href="{{href}}" 
@@ -788,12 +788,12 @@
               <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 }}
     </ul>
-{{/if}}`;var P=`<footer class="qld-footer {{ variantClass }}" role="contentinfo">
+{{/if}}`;var O=`<footer class="qld-footer {{ variantClass }}" role="contentinfo">
   <!-- Footer content container -->
   <div class="container">
     {{#if sitename}}
@@ -1036,7 +1036,7 @@
       </div>
     </div>
   </div>
-</footer>`;var O=`  
+</footer>`;var P=`  
   {{#if questionLabel}}
   <div class="qld-text-input-label {{listClasses}}">
     {{questionLabel}}
@@ -1049,10 +1049,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>
@@ -1109,7 +1117,7 @@
   </section>
   {{/each }}
 </div>`;var I=`
-<!-- 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|???
@@ -1420,8 +1428,16 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
     {{>imageTag}}
   {{/ifAny}}
 {{/if}}
-`;var B=`<div class="alert {{variantClass}} {{customClass}}" role="alert" 
-    {{#if alertType}}aria-label="{{alertType}}"{{/if}}>
+`;var B=`<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}}>
@@ -2019,78 +2035,82 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
 -->
 <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}}
-    
-</div>`;var o1=`<!-- QGDS Component: Select -->
+    {{/ifCond}}    
+</div>`;var n1=`<!-- 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-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/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>
+{{#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}}{{! 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}}
+
+<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>
 </select>
-`;var n1=`<nav class="qld-side-navigation" aria-label="Side Navigation">
+`;var o1=`<nav class="qld-side-navigation" aria-label="Side Navigation">
   <button
     class="accordion-button collapsed d-lg-none"
     type="button"
@@ -2190,7 +2210,7 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
         Loading...
     </span>
 </div>
-`;var p1=`<!-- QGDS Component: Table -->
+`;var f1=`<!-- QGDS Component: Table -->
 
 <div class="table-responsive qld-table {{customClass}}">
 
@@ -2238,7 +2258,7 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
         {{/if}}
 
     </table>
-</div>`;var f1=`
+</div>`;var p1=`
 {{#ifCond type_variant '==' 'section-tabs'}}
     <section class="container tab-content pb-5 pt-5 mb-0 {{~#if tab_variant}} {{tab_variant}} {{else}} default{{/if~}}">
         <div class="row" style="padding-inline: 2.5rem;">
@@ -2297,67 +2317,66 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
 </ul>
 `;var m1=`<!-- 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>`;var g1=`<!-- QGDS Component: Textbox -->
+<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>`;var g1=`<!-- 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}} />`;var h1="<!-- QGDS Partial: typography -->";var v1=`<!-- QGDS Component: Video -->
+<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}} />`;var v1="<!-- QGDS Partial: typography -->";var h1=`<!-- QGDS Component: Video -->
 
 {{#if analyticsTrackingCode}}
 <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/{{analyticsTrackingCode}}.js">
@@ -2403,6 +2422,6 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
     </div>
     {{! Render the transcript content in an accordion template }}
 </section>
-`;function d(e){e.registerPartial("accordion",p),e.registerPartial("backToTop",f),e.registerPartial("banner",u),e.registerPartial("blockquote",m),e.registerPartial("breadcrumbs",g),e.registerPartial("breadcrumbsWrapper",h),e.registerPartial("button",v),e.registerPartial("callout",b),e.registerPartial("callToAction",L),e.registerPartial("card",H),e.registerPartial("containerLayout",V),e.registerPartial("contentFooter",M),e.registerPartial("contentFooterWrapper",k),e.registerPartial("contentPageWithForm",q),e.registerPartial("contentPageWithSideNavigation",Z),e.registerPartial("contentWrapper",y),e.registerPartial("correctincorrect",x),e.registerPartial("customLinks",w),e.registerPartial("dateinput",T),e.registerPartial("directionLinks",S),e.registerPartial("feedbackForm",A),e.registerPartial("followLinks",D),e.registerPartial("footer",P),e.registerPartial("formcheck",O),e.registerPartial("fullPage",R),e.registerPartial("globalAlert",E),e.registerPartial("head",I),e.registerPartial("header",_),e.registerPartial("headerBrand",N),e.registerPartial("homePage",F),e.registerPartial("icon",G),e.registerPartial("image",Q),e.registerPartial("inpageAlert",B),e.registerPartial("inpagenav",j),e.registerPartial("link",W),e.registerPartial("linkColumns",J),e.registerPartial("logo",Y),e.registerPartial("logoCOADeliveringForQLD",U),e.registerPartial("logoCOALandscape",$),e.registerPartial("logoCOALandscape2Lines",z),e.registerPartial("mainContainerWrapper",X),e.registerPartial("metaDcTerms",K),e.registerPartial("metaOpenGraph",e1),e.registerPartial("modal",i1),e.registerPartial("navbar",a1),e.registerPartial("pagination",t1),e.registerPartial("promotionalPanel",C1),e.registerPartial("quickexit",s1),e.registerPartial("searchInput",l1),e.registerPartial("select",o1),e.registerPartial("sidenav",n1),e.registerPartial("sidenavWrapper",r1),e.registerPartial("skipLinks",d1),e.registerPartial("spinner",c1),e.registerPartial("table",p1),e.registerPartial("tabs",f1),e.registerPartial("tag",u1),e.registerPartial("textarea",m1),e.registerPartial("textbox",g1),e.registerPartial("typography",h1),e.registerPartial("video",v1)}typeof Handlebars!="undefined"&&d(Handlebars);var b1=!1;function L1(e){typeof e=="undefined"&&console.error("Handlebars.init requires HandleBars"),typeof e!="undefined"?(b1?console.log("HandleBars Helpers And Partials already loaded, loading again"):b1=!0,r(e),d(e)):console.log("Handlebars not found, init failed")}typeof Handlebars!="undefined"&&L1(Handlebars);})();
-//# @qld-gov-au/qgds-bootstrap5 - v2.0.11
+`;function d(e){e.registerPartial("accordion",f),e.registerPartial("backToTop",p),e.registerPartial("banner",u),e.registerPartial("blockquote",m),e.registerPartial("breadcrumbs",g),e.registerPartial("breadcrumbsWrapper",v),e.registerPartial("button",h),e.registerPartial("callout",b),e.registerPartial("callToAction",L),e.registerPartial("card",H),e.registerPartial("containerLayout",V),e.registerPartial("contentFooter",M),e.registerPartial("contentFooterWrapper",k),e.registerPartial("contentPageWithForm",y),e.registerPartial("contentPageWithSideNavigation",q),e.registerPartial("contentWrapper",Z),e.registerPartial("correctincorrect",w),e.registerPartial("customLinks",x),e.registerPartial("dateinput",S),e.registerPartial("directionLinks",T),e.registerPartial("feedbackForm",A),e.registerPartial("followLinks",D),e.registerPartial("footer",O),e.registerPartial("formcheck",P),e.registerPartial("fullPage",R),e.registerPartial("globalAlert",E),e.registerPartial("head",I),e.registerPartial("header",_),e.registerPartial("headerBrand",N),e.registerPartial("homePage",F),e.registerPartial("icon",G),e.registerPartial("image",Q),e.registerPartial("inpageAlert",B),e.registerPartial("inpagenav",j),e.registerPartial("link",W),e.registerPartial("linkColumns",J),e.registerPartial("logo",Y),e.registerPartial("logoCOADeliveringForQLD",U),e.registerPartial("logoCOALandscape",$),e.registerPartial("logoCOALandscape2Lines",z),e.registerPartial("mainContainerWrapper",X),e.registerPartial("metaDcTerms",K),e.registerPartial("metaOpenGraph",e1),e.registerPartial("modal",i1),e.registerPartial("navbar",a1),e.registerPartial("pagination",t1),e.registerPartial("promotionalPanel",C1),e.registerPartial("quickexit",s1),e.registerPartial("searchInput",l1),e.registerPartial("select",n1),e.registerPartial("sidenav",o1),e.registerPartial("sidenavWrapper",r1),e.registerPartial("skipLinks",d1),e.registerPartial("spinner",c1),e.registerPartial("table",f1),e.registerPartial("tabs",p1),e.registerPartial("tag",u1),e.registerPartial("textarea",m1),e.registerPartial("textbox",g1),e.registerPartial("typography",v1),e.registerPartial("video",h1)}typeof Handlebars!="undefined"&&d(Handlebars);var b1=!1;function L1(e){typeof e=="undefined"&&console.error("Handlebars.init requires HandleBars"),typeof e!="undefined"?(b1?console.log("HandleBars Helpers And Partials already loaded, loading again"):b1=!0,r(e),d(e)):console.log("Handlebars not found, init failed")}typeof Handlebars!="undefined"&&L1(Handlebars);})();
+//# @qld-gov-au/qgds-bootstrap5 - v2.1.0
 //# sourceMappingURL=handlebars.init.min.js.map