@qld-gov-au/qgds-bootstrap5 2.0.2 → 2.0.3

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

@@ -1,6 +1,5 @@
 "use strict";(()=>{function b5(e,t,a,i){switch(t){case"==":return e==a?i.fn(this):i.inverse(this);case"===":return e===a?i.fn(this):i.inverse(this);case"!=":return e!=a?i.fn(this):i.inverse(this);case"!==":return e!==a?i.fn(this):i.inverse(this);case"<":return e<a?i.fn(this):i.inverse(this);case"<=":return e<=a?i.fn(this):i.inverse(this);case">":return e>a?i.fn(this):i.inverse(this);case">=":return e>=a?i.fn(this):i.inverse(this);case"&&":return e&&a?i.fn(this):i.inverse(this);case"||":return e||a?i.fn(this):i.inverse(this);case"contains":return typeof e=="string"&&typeof a=="string"?e.toLowerCase().indexOf(a.toLowerCase())>=0?i.fn(this):i.inverse(this):i.inverse(this);default:return i.inverse(this)}}function r(e){e.registerHelper("contains",function(t,a,i){return t=e.escapeExpression(t),a=e.escapeExpression(a),a.indexOf(t)>-1?i.fn(this):i.inverse(this)}),e.registerHelper("ifCond",b5),e.registerHelper("isType",function(t,a,i){return t===a?i.fn(this):i.inverse(this)}),e.registerHelper("ifAny",function(...t){let a=t.pop();return t.some(i=>!!i)?a.fn(this):a.inverse(this)}),e.registerHelper("now",function(){return new Date().toISOString()}),e.registerHelper("formatDate",function(t,a,i){let s;if(t&&(s=new Date(t)),isNaN(s)&&a&&(s=new Date(a)),isNaN(s))return"Invalid Date";var l=["January","February","March","April","May","June","July","August","September","October","November","December"],o=s.getDate(),n=l[s.getMonth()],C=s.getFullYear();switch(i){case"YYYY":return`${C}`;case"MMMM YYYY":return`${n} ${C}`;default:return`${o} ${n} ${C}`}}),e.registerHelper("formatDateOrToday",function(t,a){let i=t||new Date().toISOString();return e.helpers.formatDate(t,i,a)}),e.registerHelper("formatDuration",function(t,a){if(!t)return"";if(typeof t=="string"&&a!=="long")return t;let i="",s=[],l,o,n;if(typeof t=="string"){let C=t.split(":");n=C[0],C.length==2?[o="",n=""]=C:C.length==3&&([l="",o="",n=""]=C)}else[l="",o="",n=""]=t;return a==="long"?(l>0&&s.push(`${l} hour${l>1?"s":""}`),o>0&&s.push(`${o} minute${o>1?"s":""}`),n>0&&s.push(`${n} second${n>1?"s":""}`),i=s.join(" ")):(l>0&&s.push(l.toString().padStart(2,0)),s.push(o.toString().padStart(2,0)),s.push(n.toString().padStart(2,0)),i=s.join(":")),i}),e.registerHelper("isdefined",function(t,a){return t!==void 0&&t!==""?t:a}),e.registerHelper("getClassNames",function(t,a){let i=t.split(",").map(l=>l.trim()),s=[];for(let l=0;l<i.length;l++){let o=i[l];if(a){for(let n=0;n<a.length;n++)if(a[n][o]===!0){s.push(o);break}}}return s.length>0?s.join(" "):""}),e.registerHelper("join",function(t,a){return(!a||typeof a!="string")&&(a=" "),Array.isArray(t)?t.join(a):t}),e.registerHelper("toCamelCase",function(t){return typeof t!="string"?t:t.toLowerCase().replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(a,i)=>i===0?a.toLowerCase():a.toUpperCase()).replace(/\s+/g,"")})}typeof Handlebars!="undefined"&&r(Handlebars);var c=`<!-- QGDS Component: Accordion -->
 <div class="accordion-group">
-
     {{#if toggleAll}}
         <div class="accordion-toggle">
             <button class="accordion-toggle-btn accordion-toggle-btn--closed" type="button">Open all</button>
@@ -22,9 +21,7 @@
             </div>
         </div>
         {{/each }}
-
     </div>
-
 </div>
 `;var p=`{{#unless hide_back_to_top}}
   <div class="back-to-top d-print-none">
@@ -139,7 +136,7 @@
       </div>
     </div>
   </div>
-</div>`;var h=`{{!-- Button icon partial --}}
+</div>`;var v=`{{!-- Button icon partial --}}
 {{#*inline "buttonIcon"~}}
 <span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
 {{~/inline}} 
@@ -198,7 +195,7 @@
       {{/if}}
     {{/unless}}
     </a>
-{{/unless}}`;var v=`<a class="qld-cta-link {{getClassNames "small, view-all" class}}"
+{{/unless}}`;var h=`<a class="qld-cta-link {{getClassNames "small, view-all" class}}"
     {{#if id}}id="{{id}}"{{/if}}
     href="{{href}}" 
     target="{{target}}" 
@@ -275,7 +272,7 @@
         {{#if feature}}</div>{{/if}}
     </div>
 </div>
-`;var q=`<!DOCTYPE html>
+`;var k=`<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -374,7 +371,7 @@
 
 
 </body>
-</html>`;var k=`  <div class="row {{classes}}">
+</html>`;var q=`  <div class="row {{classes}}">
     {{#if lastUpdated}}
     <div class="col-auto">
       <dl class="qld-content-dates my-0">
@@ -469,7 +466,8 @@
     {{~#if target}} target="{{target}}"{{/if~}}
     {{~#if arialabel}} aria-label="{{arialabel}}" {{/if~}}>
   {{{label}}}
-  <span class="icon" aria-hidden="true"></span>
+  {{!-- <span class="icon" aria-hidden="true"></span> --}}
+  <span class="qld-icon qld-icon-md qld-icon-arrow-{{class}}" aria-hidden="true"></span>
 </a>`;var H=`{{#if customLinks }}
     <ul class="nav footer-link-list footer-link-list--custom flex-column">      
         {{#each customLinks }}
@@ -754,7 +752,7 @@
       </div>
     </div>
   </div>
-</footer>`;var A=`  
+</footer>`;var P=`  
   {{#if questionLabel}}
   <div class="qld-text-input-label {{listClasses}}">
     {{questionLabel}}
@@ -776,7 +774,7 @@
     </label>
   </div>
   {{/each}}
-  `;var P=`<!DOCTYPE html>
+  `;var A=`<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -827,7 +825,7 @@
   </section>
   {{/each }}
 </div>`;var R=`
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.2","branch":"HEAD","tag":"v2.0.2","commit":"76ae36d4b0387b0e6fd2e0c8e3c664aaf0d01a96","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.3","branch":"HEAD","tag":"v2.0.3","commit":"fa72cd132ffaf157e0fe59ce291db6db0d2f2554","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???
@@ -861,7 +859,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
 
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
                                 class="qld-header-dropdown-icon ">
-                                <use href="{{@root.assets.SVGSpritePath}}#qgds-icon-chevron-down"
+                                <use href="{{../assets.SVGSpritePath}}#qgds-icon-chevron-down"
                                     aria-hidden="true"></use>
                             </svg>
                         </a>
@@ -874,7 +872,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
                                 <a class="qld-header-link dropdown-item " href="{{url}}" {{#if target}}target="{{target}}"{{/if}}>
                                     {{text}}
                                     <svg width="24" height="24" class="qld-header-icon qld-header-dropdown-item-icon">
-                                        <use href="{{@root.assets.SVGSpritePath}}#qgds-icon-arrow-right"
+                                        <use href="{{ ../../assets.SVGSpritePath }}#qgds-icon-arrow-right"
                                             aria-hidden="true"></use>
                                     </svg>
                                 </a>
@@ -905,7 +903,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
                     <a class="qld-header-link" href="{{url}}">
                         {{#if icon}} 
                         <svg class="qld-header-link-icon">
-                            <use href="{{@root.assets.SVGSpritePath}}#qgds-icon-{{icon}}" aria-hidden="true"></use>
+                            <use href="{{ ../assets.SVGSpritePath }}#qgds-icon-{{icon}}" aria-hidden="true"></use>
                         </svg>{{/if}}{{{text}}}
                     </a>
                     {{/if}}
@@ -919,11 +917,8 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
                 <button id="qld-header-toggle-search-button" aria-controls="qld-header-search"
                     class="qld-header-toggle-main-nav" aria-expanded="false">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
-                        <use class="icon-search"
-                            href="{{@root.assets.SVGSpritePath}}#qgds-icon-search" aria-hidden="true"
-                            style="display: block;"></use>
-                        <use class="icon-close" href="{{@root.assets.SVGSpritePath}}#qgds-icon-close"
-                            style="display: none;"></use>
+                        <use class="icon-search" href="{{ assets.SVGSpritePath }}#qgds-icon-search" aria-hidden="true" style="display: block;"></use>
+                        <use class="icon-close" href="{{ assets.SVGSpritePath}}#qgds-icon-close" style="display: none;"></use>
                     </svg>
                     <span class="qld-header-toggle-main-nav-text">Search</span>
                 </button>
@@ -933,7 +928,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
                     data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false"
                     aria-label="Open menu">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
-                        <use href="{{@root.assets.SVGSpritePath}}#qgds-icon-menu" aria-hidden="true">
+                        <use href="{{assets.SVGSpritePath}}#qgds-icon-menu" aria-hidden="true">
                         </use>
                     </svg>
                     <span class="qld-header-toggle-main-nav-text">Menu</span>
@@ -980,7 +975,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
             </div>
         </div>
     </div>
-</header>`;var _=`
+</header>`;var I=`
 <div class="qld-header-brand">
     <a class="qld-header-link d-lg-inline-flex" href="{{url}}">
         <div class="qld-header-brand-image qld-header-logo">
@@ -1015,7 +1010,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
         {{/if}}
     </a>
 </div>    
-`;var I=`<svg class="qld-icon-{{size}}"{{#if ariaLabel}} aria-label="{{ariaLabel}}"{{/if}}{{#if ariaHidden}} aria-hidden="{{ariaHidden}}"{{/if}}>
+`;var _=`<svg class="qld-icon-{{size}}"{{#if ariaLabel}} aria-label="{{ariaLabel}}"{{/if}}{{#if ariaHidden}} aria-hidden="{{ariaHidden}}"{{/if}}>
   <use href="./assets/img/icons-sprite.svg#qgds-icon-{{iconId}}"></use>
 </svg>`;var E=`{{! Image template }}
 {{#*inline "imageTag"}}
@@ -1050,7 +1045,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
         {{/if}}
     {{/if}}
     {{{ content }}}
-</div>`;var F=`<!-- QGDS Partial: inpage-nav -->
+</div>`;var G=`<!-- QGDS Partial: inpage-nav -->
 
 <div class="qld-inpage-nav">
 
@@ -1064,7 +1059,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
         {{/each}}
     </ul>
 
-</div>`;var G=`{{!-- Link icon partial --}}
+</div>`;var F=`{{!-- Link icon partial --}}
 {{#*inline "linkIcon"~}}
 <span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
 {{~/inline}} 
@@ -1151,14 +1146,14 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
             {{~{value}~}}
         </a>
     </li>
-{{/inline}}`;var j=`{{#ifCond logo "===" "coa-landscape"}}
+{{/inline}}`;var Q=`{{#ifCond logo "===" "coa-landscape"}}
     {{>logoCOALandscape}}
 {{else ifCond logo "===" "coa-landscape-2lines"}}
     {{>logoCOALandscape2Lines}}
 {{else}}
     {{>logoCOALandscape}}
 {{/ifCond}}
-`;var Q=`{{!prettier-ignore}}
+`;var j=`{{!prettier-ignore}}
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 56" {{#if fill}}fill="{{fill}}"{{/if}} {{#if className}}class="{{className}}"{{/if}} {{#if width}}width="{{width}}"{{/if}}
     {{#if height}}height="{{height}}"{{/if}}>
     <title>Queensland Government</title>
@@ -1441,8 +1436,8 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
                 <ul class="navbar-nav">
                     {{#each navigation}}
                         {{#if navigationItems}}
-                            <li class="nav-item dropdown{{#if @first}} active{{/if}}{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"> 
-                                <a class="nav-link{{#unless ../metadata.verticalOrientation}} dropdown-toggle{{/unless}}" aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}} role="button" data-bs-toggle="dropdown"
+                            <li class="nav-item dropdown{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"> 
+                                <a class="nav-link{{#unless ../metadata.verticalOrientation}} dropdown-toggle{{/unless}}{{#if currentPage}} active{{/if}}{{#if dropdownOptions.hasNoLink}} hasNoLink{{/if}}" {{#if currentPage}}aria-current="page"{{/if}}{{#if dropdownOptions.hasNoLink}} href="#"{{else}} href="{{url}}"{{/if}}{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}} role="button" data-bs-toggle="dropdown"
                             aria-expanded="false">
                                 {{#if iconName}}
                                     <span class="qld-icon qld-icon-md {{iconName}}" aria-hidden="true"></span>
@@ -1455,22 +1450,29 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
                                     {{text}}
                                 {{/if}}
                                 </a>
-                                <button class="nav-link dropdown-toggle" aria-current="page" aria-controls="" data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
+                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
                                     <span class="visually-hidden">Expand</span>
                                 </button>
                                 <ul class="dropdown-menu">
-                                    <li>
-                                        <a class="dropdown-item parent-link" role="button" aria-controls aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{#if dropdownOptions.alternativeText}}{{dropdownOptions.alternativeText}}{{else}}{{title}}{{/if}}</a>
-                                        {{#if dropdownOptions.description}}
-                                            <p>{{dropdownOptions.description}}</p>
-                                        {{/if}}
-                                    </li>
+                                    {{#unless dropdownOptions.hasNoLink}}
+                                        <li>
+                                            <a class="dropdown-item parent-link" role="button"{{#if currentPage}} aria-current="page"{{/if}}{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{#if dropdownOptions.alternativeText}}{{dropdownOptions.alternativeText}}{{else}}{{text}}{{/if}}</a>
+                                            {{#if dropdownOptions.description}}
+                                                <p>{{dropdownOptions.description}}</p>
+                                            {{/if}}
+                                        </li>
+                                    {{/unless}}
                                     {{#each navigationItems}}
                                         <li{{#if mobileOnly}} class="mobile-only"{{/if}}>
-                                            <a class="dropdown-item" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{text}}</a>
-                                            {{#if description}}
-                                                <p>{{description}}</p>
+                                            {{#if isHTML}}
+                                                {{{htmlContent}}}
                                             {{/if}}
+                                            {{#unless isHTML}}
+                                                <a class="dropdown-item" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{text}}</a>
+                                                {{#if description}}
+                                                    <p>{{description}}</p>
+                                                {{/if}}
+                                            {{/unless}}
                                         </li>
                                     {{/each}}
                                     {{#if dropdownOptions.viewAllHref}}
@@ -1481,8 +1483,8 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
                                 </ul>
                             </li>
                         {{else}}
-                            <li class="nav-item{{#if @first}} active{{/if}}{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}">
-                                <a class="nav-link" aria-current="page" href="{{url}}"{{#if target}}  target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>
+                            <li class="nav-item{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}">
+                                <a class="nav-link{{#if currentPage}} active{{/if}}"{{#if currentPage}} aria-current="page"{{/if}} href="{{url}}"{{#if target}}  target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>
                                 {{#if iconName}}
                                     <span class="qld-icon qld-icon-md {{iconName}}" aria-hidden="true"></span>
                                     {{#if hideLabel}}
@@ -1532,7 +1534,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
             <div class="row">
                 {{#if sidenav}}
                 <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
+                <div class="col-12 col-lg-3 mt-5 mt-lg-0 mb-32 mb-lg-0">
                     {{> sidenav sidenav}}
                 </div>
                 {{/if}}
@@ -1613,122 +1615,154 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}}</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
 </head>
 
 <body>
-    <!-- Global ALert -->
-    {{> globalAlert globalAlert}}
-    <!-- Header -->
-    {{> header header}}
-    <!-- Navbar -->
-    {{> navbar navbar}}
+  <!-- Global ALert -->
+  {{> globalAlert globalAlert}}
 
-    {{#if banner}}
-    {{> banner banner}}
-    {{/if}}
+  <!-- Header -->
+  {{> header header }} 
 
-    <main>
-        <div class="container mt-40 mt-lg-64">
-            {{#if breadcrumbs}}
-            <div class="row">
-                <div class="col-12">
-                    <!-- breadcrumbs -->
-                    {{> breadcrumbs breadcrumbs}}
-                </div>
-            </div>
-            {{/if}}
+  <!-- Navbar -->
+  {{> navbar navbar}}
 
-            <!-- Main Grid Layout: Side navigation and content -->
-            <div class="row">
-                {{#if sidenav}}
-                <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
-                    {{> sidenav sidenav}}
-                </div>
-                <!-- Content Col -->
-                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
-                    {{else}}
-                    <div class="col-12">
-                        {{/if}}
+  {{#if banner}}
+  {{> banner banner}}
+  {{/if}}
 
-                        <!-- Main Content Sections -->
-                        <div class="content-section mb-5 px-1 px-md-32">
+  <main>
 
-                            {{#if inpagenav}}
-                            <!-- inpagenav Section -->
-                            {{> inpagenav inpagenav}}
-                            {{/if}}
+    <div class="container mt-40 mt-lg-64">
+      {{#if breadcrumbs}}
+      <div class="row">
+        <div class="col-12">
+          <!-- breadcrumbs -->
+          {{> breadcrumbs breadcrumbs}}
+        </div>
+      </div>
+      {{/if}}
 
-                            <h1 id="section-heading">Section heading (H1)</h1>
-                            <p>
-                                Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum libero ut. Luctus diam pellentesque ipsum accumsan amet commodo. 
-                            </p> 
-                            <p>
-                                Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae amet ornare donec malesuada. Nascetur senectus aenean fames id turpis. 
-                            </p>
-
-                            <h2 id="content-heading">Content heading (H2)</h2>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-                                incididunt ut labore et dolore magna aliqua.</p>
-
-                            {{#if calloutdata}}
-                            <!-- callout Section -->
-                            {{> callout calloutdata}}
-                            {{/if}}
+      <!-- Main Grid Layout: Side navigation and content -->
+      <div class="row">
 
-                            <h3 id="inspection">Pre-registration inspection (H3)</h3>
-                            <p>Information about pre-registration inspection requirements.</p>
+        <!-- Side navigation column -->
+        <div class="col-12 col-lg-3 mt-0 pe-lg-0">
+          {{> sidenav sidenav}}
+        </div>
+        <!-- End Side navigation column -->
 
-                            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
-                            <p>Details about fees and charges for vehicle registration.</p>
+        <!-- Content Column -->
+        <div class="col-lg-8 mt-40 mt-lg-0 ms-lg-32 ps-lg-32">
 
-                        </div>
+          {{#if inpagenav}}
+          <!-- Inpagenav Component (.mb-64 provides vertical spacing) -->
+          {{> inpagenav inpagenav}}
+          {{/if}}
 
-                        {{#if accordionItems}}
-                        <!-- accordion Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> accordion accordionItems}}
-                        </div>
-                        {{/if}} 
 
-                        {{#if video}}
-                        <!-- video Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> video video}}
-                        </div>
-                        {{/if}}
 
-                        <div class="my-5 p-1 p-md-32 bg-light">
-                            <h2 id="inspection">Section heading (H2)</h2>
-                            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
-                                est.
-                                Tincidunt ultrices commodo vestibulum non netus. </p>
-                            <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
-                                condimentum adipiscing augue quisque eu.</p>
+          <!-- Content Section with top vertical spacer (2rem mobile, 4rem LG and above) -->
+          <div class="mt-32 mt-lg-64">
+            <h2 id="section-heading">Section heading (H2)</h2>      
+            <p>
+              Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat
+              feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum
+              libero ut. Luctus diam pellentesque ipsum accumsan amet commodo.
+            </p>
+            <p>
+              Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae
+              amet ornare donec malesuada. Nascetur senectus aenean fames id turpis.
+            </p>
+          </div>
 
-                            {{> callToAction callToAction}}
-                        </div>
 
-                        {{#if table}}
-                        <!-- table Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> table table}}
-                        </div>
-                        {{/if}}
 
-                    </div>
-                </div>
+          <!-- Content Section with top vertical spacer (2rem mobile, 4rem LG and above) -->
+          <div class="mt-32 mt-lg-64">
 
-                <!-- Content Footer -->
-                {{> contentFooter contentFooter}}
+            <h2 id="content-heading">Content heading (H2)</h2>
+          
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
+            {{#if calloutdata}}
+            <!-- Callout Component -->
+            {{> callout calloutdata}}
+            {{/if}}
+          </div>
+          
+
+
+          <!-- Content Section with top vertical spacer (2rem mobile, 2.5rem LG and above) -->
+          <div class="mt-32 mt-lg-40">
+            <h3 id="inspection">Pre-registration inspection (H3)</h3>
+            <p>Information about pre-registration inspection requirements.</p>
+
+            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
+            <p>Details about fees and charges for vehicle registration.</p>
+            
+            
+            {{#if accordionItems}}
+            <!-- QGDS Accordion Component with 1.5rem vertical spacer -->
+            <div class="mt-24">
+            {{> accordion accordionItems}}
+            </div>
+            {{/if}}
+          </div>
+
+          <!-- Top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-32 mt-lg-64">
+            {{#if video}}
+            <!-- QGDS Video Component -->
+            {{> video video}}
+            {{/if}}
+          </div>
+
+          <!-- Emphasis Container, with top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-40 mt-lg-64 bg-light content-emphasis">
+            
+            <h2 id="inspection">Section heading (H2) with emphasis</h2>
+        
+            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. </p>
+            
+            <!-- QGDS Call To Action button -->
+            {{> callToAction callToAction}}
+        
+          </div>
+
+
+
+          <!-- Top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-32 mt-lg-64">
+            <h2 id="inspection">Section heading (H2)</h2>
+            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. </p>
+            
+            {{#if table}}
+            <!-- Table Component (.my-40 wrapper provides vertical spacing) -->
+            <div class="mt-24">
+            {{> table table}}
             </div>
+            {{/if}}
+          </div>
+
         </div>
-    </main>
-    <!-- Footer -->
-    {{> footer footer}}
+        <!-- End Main Content Section -->
+
+      </div>
+      <!-- End Content Column -->
+      
+
+      <!-- QGDS Content Footer Component -->
+      <div class="mt-64">
+      {{> contentFooter contentFooter}}
+      </div>
+
+  </main>
+  <!-- Footer -->
+  {{> footer footer}}
 </body>
 
 </html>`;var e5=`<!DOCTYPE html>
@@ -1816,7 +1850,7 @@ cdn := PROD|STAGING|BETA|TEST|DEV|???
 
             {{#if promotionalPanel}}
             <section class="pt-5 bg-light">
-                <div class="container">
+                <div class="container is-extended">
                     {{> promotionalPanel promotionalPanel}}
                 </div>
             </section>
@@ -2049,72 +2083,91 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
 </select>
-`;var n5=`<div class="qld-side-navigation">
-
+`;var n5=`<nav class="qld-side-navigation" aria-label="Side Navigation">
+  <button
+    class="accordion-button collapsed d-lg-none"
+    type="button"
+    data-bs-toggle="collapse"
+    data-bs-target="#sideNavCollapse"
+    aria-expanded="false"
+    aria-controls="sideNavCollapse"
+  >
+    {{isdefined collapseTitle "In this section"}}
+  </button>
+  <div class="nav-wrapper collapse d-lg-block" id="sideNavCollapse">
     <h2 class="nav-title">
-        {{#if navtitlelink }}
+      {{#if navtitlelink}}
         <a class="nav-link" href="{{navtitlelink}}">{{navtitle}}</a>
-        {{else}}
+      {{else}}
         {{navtitle}}
-        {{/if}}
+      {{/if}}
     </h2>
 
     <!-- Level One -->
     <ul class="nav" aria-label="section navigation">
 
-        {{#each navlist}}
+      {{#each navlist}}
         <li class="nav-item {{class}}">
-            
-            {{#contains "active" class }}
+
+          {{#contains "active" class}}
             <span class="nav-link">{{label}}</span>
-            {{else}}
+          {{else}}
             <a class="nav-link" href="{{link}}" target="{{target}}">
-                {{label}} {{class}}
+              {{label}}
+              {{class}}
             </a>
-            {{/contains}}
+          {{/contains}}
 
-            {{#if children}}
+          {{#if children}}
             <!-- Level Two -->
             <ul>
-            {{#each children}}
+              {{#each children}}
                 <li class="nav-item {{class}}">
-                    
-                {{#contains "active" class }}
-                <span class="nav-link">{{label}}</span>
-                {{else}}
-                <a class="nav-link" href="{{link}}" target="{{target}}">
-                    {{label}} {{class}}
-                </a>
-                {{/contains}}
 
-                    {{#if children}}
+                  {{#contains "active" class}}
+                    <span class="nav-link">{{label}}</span>
+                  {{else}}
+                    <a class="nav-link" href="{{link}}" target="{{target}}">
+                      {{label}}
+                      {{class}}
+                    </a>
+                  {{/contains}}
+
+                  {{#if children}}
                     <!-- Level Three -->
                     <ul class="with-stalks">
-                    {{#each children}}
+                      {{#each children}}
                         <li class="nav-item {{class}}">
-                           
-                        {{#contains "active" class }}
-                        <span class="nav-link">{{label}}</span>
-                        {{else}}
-                        <a class="nav-link" href="{{link}}" target="{{target}}">
-                            {{label}} {{class}}
-                        </a>
-                        {{/contains}}
+
+                          {{#contains "active" class}}
+                            <span class="nav-link">{{label}}</span>
+                          {{else}}
+                            <a
+                              class="nav-link"
+                              href="{{link}}"
+                              target="{{target}}"
+                            >
+                              {{label}}
+                              {{class}}
+                            </a>
+                          {{/contains}}
 
                         </li>
-                    {{/each}}
+                      {{/each}}
                     </ul>
-                    {{/if}}
+                  {{/if}}
 
                 </li>
-            {{/each}}
+              {{/each}}
             </ul>
-            {{/if}}
+          {{/if}}
 
         </li>
-        {{/each}}
+      {{/each}}
     </ul>
-</div>`;var o5=`<!-- Side Nav -->
+  </div>
+
+</nav>`;var o5=`<!-- Side Nav -->
 <div class="col-12 col-lg-3 pe-lg-0 order-last order-lg-first mt-5 mt-lg-0">
   {{> @partial-block }}
 </div>
@@ -2343,5 +2396,5 @@ 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",c),e.registerPartial("backToTop",p),e.registerPartial("banner",f),e.registerPartial("blockquote",u),e.registerPartial("breadcrumbs",m),e.registerPartial("breadcrumbsWrapper",g),e.registerPartial("button",h),e.registerPartial("callToAction",v),e.registerPartial("callout",b),e.registerPartial("card",L),e.registerPartial("containerLayout",q),e.registerPartial("contentFooter",k),e.registerPartial("contentFooterWrapper",y),e.registerPartial("contentWrapper",M),e.registerPartial("correctincorrect",x),e.registerPartial("dateinput",w),e.registerPartial("directionLinks",V),e.registerPartial("customLinks",H),e.registerPartial("feedbackForm",Z),e.registerPartial("followLinks",T),e.registerPartial("footer",S),e.registerPartial("formcheck",A),e.registerPartial("fullPage",P),e.registerPartial("globalAlert",O),e.registerPartial("head",R),e.registerPartial("header",D),e.registerPartial("headerBrand",_),e.registerPartial("icon",I),e.registerPartial("image",E),e.registerPartial("inpageAlert",N),e.registerPartial("inpagenav",F),e.registerPartial("link",G),e.registerPartial("linkColumns",B),e.registerPartial("logo",j),e.registerPartial("logoCOALandscape",Q),e.registerPartial("logoCOALandscape2Lines",J),e.registerPartial("mainContainerWrapper",W),e.registerPartial("metaDcTerms",Y),e.registerPartial("metaOpenGraph",U),e.registerPartial("modal",$),e.registerPartial("navbar",z),e.registerPartial("contentPageWithForm",X),e.registerPartial("contentPageWithSideNavigation",K),e.registerPartial("homePage",e5),e.registerPartial("pagination",i5),e.registerPartial("promotionalPanel",a5),e.registerPartial("quickexit",t5),e.registerPartial("searchInput",s5),e.registerPartial("select",l5),e.registerPartial("sidenav",n5),e.registerPartial("sidenavWrapper",o5),e.registerPartial("skipLinks",C5),e.registerPartial("spinner",r5),e.registerPartial("table",d5),e.registerPartial("tabs",c5),e.registerPartial("tag",p5),e.registerPartial("textarea",f5),e.registerPartial("textbox",u5),e.registerPartial("typography",m5),e.registerPartial("video",g5)}typeof Handlebars!="undefined"&&d(Handlebars);var h5=!1;function v5(e){typeof e=="undefined"&&console.error("Handlebars.init requires HandleBars"),typeof e!="undefined"?(h5?console.log("HandleBars Helpers And Partials already loaded, loading again"):h5=!0,r(e),d(e)):console.log("Handlebars not found, init failed")}typeof Handlebars!="undefined"&&v5(Handlebars);})();
+`;function d(e){e.registerPartial("accordion",c),e.registerPartial("backToTop",p),e.registerPartial("banner",f),e.registerPartial("blockquote",u),e.registerPartial("breadcrumbs",m),e.registerPartial("breadcrumbsWrapper",g),e.registerPartial("button",v),e.registerPartial("callToAction",h),e.registerPartial("callout",b),e.registerPartial("card",L),e.registerPartial("containerLayout",k),e.registerPartial("contentFooter",q),e.registerPartial("contentFooterWrapper",y),e.registerPartial("contentWrapper",M),e.registerPartial("correctincorrect",x),e.registerPartial("dateinput",w),e.registerPartial("directionLinks",V),e.registerPartial("customLinks",H),e.registerPartial("feedbackForm",Z),e.registerPartial("followLinks",T),e.registerPartial("footer",S),e.registerPartial("formcheck",P),e.registerPartial("fullPage",A),e.registerPartial("globalAlert",O),e.registerPartial("head",R),e.registerPartial("header",D),e.registerPartial("headerBrand",I),e.registerPartial("icon",_),e.registerPartial("image",E),e.registerPartial("inpageAlert",N),e.registerPartial("inpagenav",G),e.registerPartial("link",F),e.registerPartial("linkColumns",B),e.registerPartial("logo",Q),e.registerPartial("logoCOALandscape",j),e.registerPartial("logoCOALandscape2Lines",J),e.registerPartial("mainContainerWrapper",W),e.registerPartial("metaDcTerms",Y),e.registerPartial("metaOpenGraph",U),e.registerPartial("modal",$),e.registerPartial("navbar",z),e.registerPartial("contentPageWithForm",X),e.registerPartial("contentPageWithSideNavigation",K),e.registerPartial("homePage",e5),e.registerPartial("pagination",i5),e.registerPartial("promotionalPanel",a5),e.registerPartial("quickexit",t5),e.registerPartial("searchInput",s5),e.registerPartial("select",l5),e.registerPartial("sidenav",n5),e.registerPartial("sidenavWrapper",o5),e.registerPartial("skipLinks",C5),e.registerPartial("spinner",r5),e.registerPartial("table",d5),e.registerPartial("tabs",c5),e.registerPartial("tag",p5),e.registerPartial("textarea",f5),e.registerPartial("textbox",u5),e.registerPartial("typography",m5),e.registerPartial("video",g5)}typeof Handlebars!="undefined"&&d(Handlebars);var v5=!1;function h5(e){typeof e=="undefined"&&console.error("Handlebars.init requires HandleBars"),typeof e!="undefined"?(v5?console.log("HandleBars Helpers And Partials already loaded, loading again"):v5=!0,r(e),d(e)):console.log("Handlebars not found, init failed")}typeof Handlebars!="undefined"&&h5(Handlebars);})();
 //# sourceMappingURL=handlebars.init.min.js.map