@qld-gov-au/qgds-bootstrap5 2.0.10 → 2.0.12

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

@@ -64,6 +64,10 @@ function handlebarsHelpers(handlebars) {
     const options = args.pop();
     return args.some((arg) => !!arg) ? options.fn(this) : options.inverse(this);
   });
+  handlebars.registerHelper("ifAll", function(...args) {
+    const options = args.pop();
+    return args.every((arg) => !!arg) ? options.fn(this) : options.inverse(this);
+  });
   handlebars.registerHelper("now", function() {
     return (/* @__PURE__ */ new Date()).toISOString();
   });
@@ -244,7 +248,7 @@ var init_backToTop = __esm({
 var banner_default;
 var init_banner = __esm({
   "src/components/bs5/banner/banner.hbs?raw"() {
-    banner_default = '<!-- QGDS Banner Component -->\n  <div class="qld-banner qld-banner-grid {{ bannerType }} {{ variantClass }} {{ backgroundType }}" role="banner">\n    <div class="container-fluid">\n      <div class="banner-inner">\n\n        <div class="banner-breadcrumbs">\n          {{> breadcrumbs breadcrumbs }}\n        </div>\n\n        <div class="banner-content">\n\n          {{#if title}}\n\n          {{!-- titleClasses accepts a "title-block" class --}}\n          <h1 class="banner-title-wrap {{ join titleClasses }}">\n            <span class="banner-title">{{~title~}}</span>\n            {{#if subtitle }}\n            <span class="banner-subtitle">{{~subtitle~}}</span>\n            {{/if}}\n          </h1>\n          {{/if}}\n\n\n          {{#if abstract}}\n          <div class="banner-abstract">\n            {{abstract}}\n          </div>\n          {{/if}}\n\n          {{!-- CTA Buttons block. Pass an array of button data objects --}}\n          {{#if buttons}}\n          <div class="banner-cta" role="group" aria-label="Available options">\n            <div class="cta-buttons">\n              {{#each buttons}}\n              {{> button this }}\n              {{/each}}\n            </div>\n          </div>\n          {{/if}}\n\n          {{!-- CTA Cards block. Pass an array of card data objects --}}\n          {{#if cards}}\n          <div class="banner-cta" role="group" aria-label="Available options">\n            <div class="cta-cards">\n              {{#each cards }}\n              {{> card this }}\n              {{/each }}\n            </div>\n          </div>\n          {{/if}}\n\n        </div>\n        {{!-- End banner content --}}\n\n        {{#if image }}\n        <div class="banner-image {{ join image.classes }}">\n          <div class="banner-image-inner" style="background-image:url({{image.url}})" role="img"\n            aria-label="{{ image.alt }}"></div>\n        </div>\n        {{/if}}\n\n      </div>\n\n    </div>\n  </div>';
+    banner_default = '<!-- QGDS Banner Component -->\n  <div class="qld-banner qld-banner-grid {{ bannerType }} {{ variantClass }} {{ backgroundType }}" >\n    <div class="container-fluid">\n      <div class="banner-inner">\n\n        <div class="banner-breadcrumbs">\n          {{> breadcrumbs breadcrumbs }}\n        </div>\n\n        <div class="banner-content">\n\n          {{#if title}}\n          {{!-- titleClasses accepts a "title-block" class --}}\n          <h1 class="banner-title-wrap {{ join titleClasses }}">\n            <span class="banner-title">{{~title~}}</span>\n            {{#if subtitle }}\n            <span class="banner-subtitle">{{~subtitle~}}</span>\n            {{/if}}\n          </h1>\n          {{/if}}\n\n\n          {{#if abstract}}\n          <div class="banner-abstract">\n            {{abstract}}\n          </div>\n          {{/if}}\n\n          {{!-- CTA Buttons block. Pass an array of button data objects --}}\n          {{#if buttons}}\n          <div class="banner-cta" role="group" aria-label="Available options">\n            <div class="cta-buttons">\n              {{#each buttons}}\n              {{> button this }}\n              {{/each}}\n            </div>\n          </div>\n          {{/if}}\n\n          {{!-- CTA Cards block. Pass an array of card data objects --}}\n          {{#if cards}}\n          <div class="banner-cta" role="group" aria-label="Available options">\n            <div class="cta-cards">\n              {{#each cards }}\n              {{> card this }}\n              {{/each }}\n            </div>\n          </div>\n          {{/if}}\n\n        </div>\n        {{!-- End banner content --}}\n\n        {{#ifAll image image.url (cond backgroundType "==" "with-hero-image")}}\n        <div class="banner-image {{ join image.classes }}">\n          <div class="banner-image-inner" style="background-image:url({{image.url}})" role="img"\n            aria-label="{{ image.alt }}"></div>\n        </div>\n        {{/ifAll}}\n      </div>\n    </div>\n  </div>';
   }
 });
 
@@ -396,13 +400,13 @@ var init_card = __esm({
                 {{#if date}}
                 <div class="card-date">{{date}}</div>
                 {{/if}}
-                <h3 class="card-title">
+                <{{isdefined headingTag 'h3'}} class="card-title">
                     {{#if link}}
                     <a href="{{link}}" {{#ifCond action '===' 'single'}}class="stretched-link"{{/ifCond}}>{{title}}</a>
                     {{else}}
                     {{ title }}
                     {{/if }}
-                </h3>
+                </{{isdefined headingTag 'h3'}}>
                 {{#if description}}
                 <div class="card-text">
                     {{{description}}}
@@ -619,7 +623,7 @@ var init_customLinks = __esm({
 var dateinput_default;
 var init_dateinput = __esm({
   "src/components/bs5/dateinput/dateinput.hbs?raw"() {
-    dateinput_default = '<!-- QGDS Component: Date input -->\n\n<!-- Label -->\n<label id="dategroup-label"\n    class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n    for="example-1">\n    {{label-text}}\n    {{#if optional-text}}\n    <span class="label-text-optional">({{optional-text}})</span>\n    {{/if}}\n</label>\n\n<!-- Hint text -->\n{{#if hint-text}}\n<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}\n<span id="text-field-success" class="qld-input-success">\n    {{successMessageText}}\n</span>\n{{/contains}}\n\n{{#contains "qld-input-error" customClass}}\n<span id="text-field-error" class="qld-input-error">\n    {{errorMessageText}}\n</span>\n{{/contains}}\n\n<div aria-labelledby="dategroup-label" role="group" class="row date-container {{customClass}}">\n    <!-- day group -->\n    <div class="day-group">\n        <label for="dayinput" class="date-label qld-text-input-label">Day</label>\n        <div>\n            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"\n                inputmode="numeric" maxlength="2"\n                class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="dayinput" ref="day"\n                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n                {{/if}}>\n        </div>\n    </div>\n    <!-- month group -->\n    <div class="date-group">\n        <label for="monthinput" class="date-label qld-text-input-label">Month</label>\n        <div>\n            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"\n                type="text" inputmode="numeric" maxlength="2"\n                class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="monthinput" ref="month"\n                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n                {{/if}}>\n        </div>\n    </div>\n    <!-- year group -->\n    <div class="date-group">\n        <label for="yearinput" class="date-label">Year</label>\n        <div class="year-label">\n            <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-label"\n                placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"\n                class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"\n                id="yearinput" ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if\n                isRequired}}required aria-required="true" {{/if}}>\n        </div>\n    </div>\n</div>\n';
+    dateinput_default = '<!-- QGDS Component: Date input -->\n\n<label id="{{id}}-label"\n    class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n    for="{{id}}">\n    {{label-text}}\n    {{#if optional-text}}\n    <span class="label-text-optional">({{optional-text}})</span>\n    {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">\n    <!-- day group -->\n    <div class="day-group">\n        <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>\n        <div>\n            <input id="{{id}}-dayinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"\n                inputmode="numeric" maxlength="2"\n                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"\n                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n                {{/if}}>\n        </div>\n    </div>\n    <!-- month group -->\n    <div class="date-group">\n        <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>\n        <div>\n            <input id="{{id}}-monthinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"\n                type="text" inputmode="numeric" maxlength="2"\n                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"\n                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n                {{/if}}>\n        </div>\n    </div>\n    <!-- year group -->\n    <div class="date-group">\n        <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>\n        <div class="year-label">\n            <input id="{{id}}-yearinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-yearinput-label"\n                placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"\n                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}}"\n                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if\n                isRequired}}required{{/if}}>\n        </div>\n    </div>\n</div>\n';
   }
 });
 
@@ -902,7 +906,7 @@ var init_footer = __esm({
 var formcheck_default;
 var init_formcheck = __esm({
   "src/components/bs5/formcheck/formcheck.hbs?raw"() {
-    formcheck_default = '  \n  {{#if questionLabel}}\n  <div class="qld-text-input-label {{listClasses}}">\n    {{questionLabel}}\n    {{#if optionalLabel}}\n    <span class="label-text-optional">{{optionalLabel}}</span>\n    {{/if}}\n  </div>\n  {{/if}}\n\n  {{#if hintLabel}}\n  <span class="qld-hint-text">{{hintLabel}}</span>\n  {{/if}}\n  \n  {{#each listitems}}\n  <div class="form-check">\n    <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}}>\n    <label class="form-check-label" for="{{id}}">\n      {{label}}\n    </label>\n  </div>\n  {{/each}}\n  ';
+    formcheck_default = '  \n  {{#if questionLabel}}\n  <div class="qld-text-input-label {{listClasses}}">\n    {{questionLabel}}\n    {{#if optionalLabel}}\n    <span class="label-text-optional">{{optionalLabel}}</span>\n    {{/if}}\n  </div>\n  {{/if}}\n\n  {{#if hintLabel}}\n  <span class="qld-hint-text">{{hintLabel}}</span>\n  {{/if}}\n\n  {{#if successMessageText}}\n  <div class="valid-feedback">{{successMessageText}}</div>\n  {{/if}}\n\n  {{#if errorMessageText}}\n  <div class="invalid-feedback">{{errorMessageText}}</div>\n  {{/if}}\n  \n  {{#each listitems}}\n  <div class="form-check {{#if ../isValid}}is-valid{{else}}{{#ifCond ../isValid "===" false}}is-invalid{{/ifCond}}{{/if}}">\n    <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}} >\n    <label class="form-check-label" for="{{id}}">\n      {{label}}\n    </label>\n  </div>\n  {{/each}}\n  ';
   }
 });
 
@@ -962,7 +966,7 @@ var head_default;
 var init_head = __esm({
   "src/components/bs5/head/head.hbs?raw"() {
     head_default = `
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.10","branch":"HEAD","tag":"v2.0.10","commit":"0c2b6d8a1c3232b2314e3f6283476abe5b254c53","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.12","branch":"HEAD","tag":"v2.0.12","commit":"8a144c9ab3a88493219cbc779eb61a0ca8b8d059","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???
@@ -1365,7 +1369,51 @@ var init_quickexit = __esm({
 var searchInput_default;
 var init_searchInput = __esm({
   "src/components/bs5/searchInput/searchInput.hbs?raw"() {
-    searchInput_default = '<!-- \n    QGDS Component: Search input \n-->\n<div class="qld-search-input {{customClass}}">\n    <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"\n        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />\n    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">\n        <span class="btn-icon"></span>\n        <span class="btn-label">{{ buttonLabel }}</span>\n    </button>\n    {{#if suggestions}}\n    <div class="suggestions suggestions__group d-none">\n        <div class="default-suggestions">\n            <div class="suggestions-category mt-16">\n                <strong class="suggestions-category-label d-block">Popular services</strong>\n                <ul class="mt-2">\n                    {{#each default_suggestions.popular_services}}\n                    <li><a href="{{link}}">{{title}}</a></li>\n                    {{/each}}\n                </ul>\n            </div>\n\n            <div class="suggestions-category mt-16">\n                <strong class="suggestions-category-label d-block">Browse by category</strong>\n                <ul class="mt-12 mb-0">\n                    {{#each default_suggestions.categories}}\n                    <li><a href="{{link}}">{{title}}</a></li>\n                    {{/each}}\n                </ul>\n            </div>\n\n            {{#if default_suggestions.options.view_more}}\n            <div class="suggestions-category">\n                <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"\n                    href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>\n            </div>\n            {{/if}}\n        </div>\n        <div class="dynamic-suggestions"></div>\n    </div>\n    {{/if}}\n    \n</div>';
+    searchInput_default = `<!-- 
+    QGDS Component: Search input 
+-->
+<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}} />
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
+        <span class="btn-icon"></span>
+        <span class="btn-label">{{ buttonLabel }}</span>
+    </button>
+    {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
+    <div class="suggestions suggestions__group d-none 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 href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                        {{#if defaultSuggestions.popularServicesLink}}
+                            <li><a href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
+                        {{/if}}
+                    </ul>
+                </div>
+
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
+                    <ul>
+                        {{#each defaultSuggestions.categories}}
+                        <li><a href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                        {{#if defaultSuggestions.categoriesLink}}
+                            <li><a href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
+                        {{/if}}
+                    </ul>
+                </div>
+            </div>
+        {{/if}}
+        {{#if hasDynamicSuggestions}}
+            <div class="dynamic-suggestions" {{#if dynamicSuggestionsServiceLink.href}}data-view-more="{{dynamicSuggestionsServiceLink.href}}"{{/if}}></div>
+        {{/if}}
+    </div>
+    {{/ifCond}}    
+</div>`;
   }
 });
 
@@ -1373,7 +1421,7 @@ var init_searchInput = __esm({
 var select_default;
 var init_select = __esm({
   "src/components/bs5/select/select.hbs?raw"() {
-    select_default = '<!-- QGDS Component: Select -->\n\n<!-- Label for the first input field -->\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="example-1">\n    {{label-text}}\n    {{#if optional-text}}\n    <span class="label-text-optional">({{optional-text}})</span></label>\n    {{/if}}\n\n<!-- Hint text for the first input field -->\n{{#if hint-text}}\n<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}\n<span id="text-field-success" class="qld-input-success">\n    {{successMessageText}}\n</span>\n{{/contains}}\n\n{{#contains "qld-input-error" customClass}}\n<span id="text-field-error" class="qld-input-error">\n    {{errorMessageText}}\n</span>\n{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}}"\n    aria-label="Default select example" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"{{/if}}>\n    <option selected>{{placeholder}}</option>\n    <option value="1">Option 1</option>\n    <option value="2">Option 2</option>\n    <option value="3">Option 3</option>\n</select>\n';
+    select_default = '<!-- QGDS Component: Select -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="{{id}}">\n    {{label-text}}\n    {{#if optional-text}}\n    <span class="label-text-optional">({{optional-text}})</span>\n    {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}{{! updated bootstrap style classes - `valid-feedback`}}\n{{#if successMessageText}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}{{! updated bootstrap style classes - `invalid-feedback`}}\n{{#if errorMessageText}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<select id={{id}} class="form-select {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}} {{customClass}}" \n    {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >\n    <option selected value="">{{placeholder}}</option>\n    <option value="1">Option 1</option>\n    <option value="2">Option 2</option>\n    <option value="3">Option 3</option>\n</select>\n';
   }
 });
 
@@ -1474,7 +1522,7 @@ var init_tabs = __esm({
 var tag_default;
 var init_tag = __esm({
   "src/components/bs5/tag/tag.hbs?raw"() {
-    tag_default = '<!-- QGDS Component: Tag -->\n\n<ul class="tag-list {{variant}}">\n  {{#each tagItems}}\n    <li class="tag-item {{classes}} {{../size}} {{../emphasis}}">\n      {{{content}}}\n      {{#if applied-filter}}\n        <button class="tag-clear-filter-button" aria-label="Remove"></button>\n      {{/if}}\n    </li>\n  {{/each }}\n</ul>\n';
+    tag_default = '<!-- QGDS Component: Tag -->\n\n<ul class="tag-list {{variant}} {{classes}}">\n  {{#each tagItems}}\n    <li class="tag-item {{classes}} {{../size}} {{../emphasis}}">\n      {{{content}}}\n      {{#if applied-filter}}\n        <button class="tag-clear-filter-button" aria-label="Remove"></button>\n      {{/if}}\n    </li>\n  {{/each }}\n</ul>\n';
   }
 });
 
@@ -1482,7 +1530,7 @@ var init_tag = __esm({
 var textarea_default;
 var init_textarea = __esm({
   "src/components/bs5/textarea/textarea.hbs?raw"() {
-    textarea_default = '<!-- QGDS Component: Textarea -->\n\n<!-- Label for the first input field -->\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n    for="example-1">\n    {{label-text}}\n    {{#if optional-text}}\n    <span class="label-text-optional">({{optional-text}})</span>\n    {{/if}}\n</label>\n\n<!-- Hint text for the first input field -->\n{{#if hint-text}}\n<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}\n<span id="text-field-success" class="qld-input-success">\n    {{successMessageText}}\n</span>\n{{/contains}}\n\n{{#contains "qld-input-error" customClass}}\n<span id="text-field-error" class="qld-input-error">\n    {{errorMessageText}}\n</span>\n{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<textarea id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"\n    placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required\n    aria-required="true" {{/if}}></textarea>';
+    textarea_default = '<!-- QGDS Component: Textarea -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n    for="{{id}}">\n    {{label-text}}\n    {{#if optional-text}}\n    <span class="label-text-optional">({{optional-text}})</span>\n    {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<textarea id="{{id}}" class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"\n    placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}\n    {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}}>{{value}}</textarea>';
   }
 });
 
@@ -1490,7 +1538,7 @@ var init_textarea = __esm({
 var textbox_default;
 var init_textbox = __esm({
   "src/components/bs5/textbox/textbox.hbs?raw"() {
-    textbox_default = '<!-- QGDS Component: Textbox -->\n\n<!-- Label for the first input field -->\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n    for="example-1">\n    {{label-text}}\n    {{#if optional-text}}\n    <span class="label-text-optional">({{optional-text}})</span>\n    {{/if}}\n</label>\n\n<!-- Hint text for the first input field -->\n{{#if hint-text}}\n<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}\n<span id="text-field-success" class="qld-input-success">\n    {{successMessageText}}\n</span>\n{{/contains}}\n\n{{#contains "qld-input-error" customClass}}\n<span id="text-field-error" class="qld-input-error">\n    {{errorMessageText}}\n</span>\n{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"\n    type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if\n    isRequired}}required aria-required="true" {{/if}} />';
+    textbox_default = '<!-- QGDS Component: Textbox -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n    for="{{id}}">\n    {{label-text}}\n    {{#if optional-text}}\n    <span class="label-text-optional">({{optional-text}})</span>\n    {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<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}}"\n    type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if\n    isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />';
   }
 });