hr-design-system-handlebars 1.114.25 → 1.114.26

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.114.26 (Wed Nov 27 2024)
+
+#### 🐛 Bug Fix
+
+- Dpe 3432 - Form Bugs [#1175](https://github.com/mumprod/hr-design-system-handlebars/pull/1175) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.114.25 (Wed Nov 27 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1146,18 +1146,21 @@ article.indexTextDS .indexTextHighlighted .link {
 .left-2\/4 {
   left: 50%;
 }
+.left-4 {
+  left: 1rem;
+}
 .left-8 {
   left: 2rem;
 }
-.left-\[16px\] {
-  left: 16px;
-}
 .left-\[4px\] {
   left: 4px;
 }
 .right-0 {
   right: 0px;
 }
+.right-11 {
+  right: 2.75rem;
+}
 .right-4 {
   right: 1rem;
 }
@@ -1830,6 +1833,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .w-\[9px\] {
   width: 9px;
 }
+.w-\[calc\(133\%-64px\)\] {
+  width: calc(133% - 64px);
+}
 .w-auto {
   width: auto;
 }
@@ -2074,9 +2080,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .cursor-pointer {
   cursor: pointer;
 }
-.cursor-text {
-  cursor: text;
-}
 .resize {
   resize: both;
 }
@@ -3686,7 +3689,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1732716155989;
+  counter-reset: cnt1732718087499;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4100,7 +4103,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1732716155989 1;
+  counter-increment: cnt1732718087499 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4118,7 +4121,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1732716155989);
+  content: counter(cnt1732718087499);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4225,8 +4228,9 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
 /*! FORMULAR SELECT          */
 /*! ****************************/
 /* Custom CSS to style the label when the first empty option is selected */
-select + label {
+.form-select + label {
   top: 1px !important;
+  width: calc(133.333% - 80px) !important;
   --tw-translate-y: 0px !important;
   --tw-scale-x: .75 !important;
   --tw-scale-y: .75 !important;
@@ -4234,8 +4238,9 @@ select + label {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
 }
 @supports selector(:has(+ *)) {
-        select + label {
+        .form-select + label {
     top: 1px !important;
+    width: auto !important;
     --tw-translate-y: 0.75rem !important;
     --tw-scale-x: 1 !important;
     --tw-scale-y: 1 !important;
@@ -4243,15 +4248,16 @@ select + label {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
   }
     }
-select:has(option:checked:not([value=''])) + label {
+.form-select:has(option:checked:not([value=''])) + label {
   top: 1px !important;
+  width: calc(133.333% - 80px) !important;
   --tw-translate-y: 0px !important;
   --tw-scale-x: .75 !important;
   --tw-scale-y: .75 !important;
   transform: translate(var(--tw-translate-x), 0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.75) scaleY(.75) !important;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
 }
-select:has(option:checked[value='']) {
+.form-select:has(option:checked[value='']) {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -6286,6 +6292,18 @@ select:has(option:checked[value='']) {
   color: rgba(255, 255, 255, 1);
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:right-9 {
+  right: 2.25rem;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:right-9 {
+  right: 2.25rem;
+}
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:w-auto {
+  width: auto;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:w-auto {
+  width: auto;
+}
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(0px, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6318,9 +6336,27 @@ select:has(option:checked[value='']) {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1) scaleY(1);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:whitespace-normal {
+  white-space: normal;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:whitespace-normal {
+  white-space: normal;
+}
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:whitespace-nowrap {
+  white-space: nowrap;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:whitespace-nowrap {
+  white-space: nowrap;
+}
+.peer:focus ~ .peer-focus\:right-0 {
+  right: 0px;
+}
 .peer:focus ~ .peer-focus\:top-px {
   top: 1px;
 }
+.peer:focus ~ .peer-focus\:w-\[calc\(133\%-64px\)\] {
+  width: calc(133% - 64px);
+}
 .peer:focus ~ .peer-focus\:-translate-y-0 {
   --tw-translate-y: -0px;
   transform: translate(var(--tw-translate-x), -0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6347,6 +6383,11 @@ select:has(option:checked[value='']) {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.75) scaleY(.75);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.peer:focus ~ .peer-focus\:truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .peer:focus ~ .peer-focus\:border-l-0 {
   border-left-width: 0px;
 }

package/dist/views/components/forms/components/choice.hbs

@@ -82,13 +82,13 @@
    {{/if}}
 </div>  
 {{#unless _inGroup}}
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 {{/unless}}
 </div>

package/dist/views/components/forms/components/choiceGroup.hbs

@@ -5,7 +5,7 @@
         x-ignore
     {{/if}}
 >
-<div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
+<div class="relative flex flex-col w-full mb-4 md:mb-7 gap-y-1 md:gap-y-2">
     <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
         {{#if _hasBody}}
             {{decorator_body}}{{#if _required}}*{{/if}}
@@ -39,13 +39,13 @@
                 }}
         {{/each}}
     </div>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
-      {{#if _description}}  
-         <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
-      {{/if}}
-      {{#if _required}}
-         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
-      {{/if}}
-   </div>
+    {{#>components/forms/components/supportingTextBox }}      
+        {{#if _description}}  
+            <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
+        {{/if}}
+        {{#if _required}}
+            <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+        {{/if}}
+    {{/components/forms/components/supportingTextBox }}
 </div>
 </fieldset>

package/dist/views/components/forms/components/input.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+<div class="relative flex flex-col w-full mb-4 {{_wrapperClass}}"
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}','{{_name}}')"
    x-init="validateField()"
@@ -42,11 +42,7 @@
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
       
-  <label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
-     
-     peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
-     
-     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
+  <label for="input{{getRandom}}" class="{{_labelClass}} peer-placeholder-shown:whitespace-nowrap {{> components/forms/components/labelClasses }}">
       {{#if _hasBody}}
         {{decorator_body}}
       {{else}}
@@ -64,12 +60,12 @@
       {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
       {{/if}}
       
       <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 </div>

package/dist/views/components/forms/components/labelClasses.hbs

@@ -0,0 +1 @@
+w-[calc(133%-64px)] absolute right-0 truncate transition-transform origin-top-left transform scale-75 translate-x-0 translate-y-0 left-4 top-px text-gray-scorpion peer-placeholder-shown:w-auto peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:right-9 peer-placeholder-shown:whitespace-normal peer-focus:w-[calc(133%-64px)] peer-focus:truncate peer-focus:right-0 peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark

package/dist/views/components/forms/components/select.hbs

@@ -1,10 +1,10 @@
-<div class="relative flex flex-col w-full mb-5 "
+<div class="relative flex flex-col w-full mb-4 "
    ax-load
    x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
    x-ignore
 >
     <select
-        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
+        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
@@ -37,21 +37,18 @@
         {{/if}}
     </select>
     <label for="select{{getRandom}}"
-        class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
-              peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
-              origin-top-left transform transition-transform 
-    ">      
+        class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
+    {{#>components/forms/components/supportingTextBox }} 
         {{#if _description}}  
-            <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
+            <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{{_description}}}</div>
         {{/if}}
         {{#if _required}}
             <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
-    </div>
-    <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
+    {{/components/forms/components/supportingTextBox }}
+    <div class="absolute bg-white right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
         {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
     </div>  
 </div>

package/dist/views/components/forms/components/supportingTextBox.hbs

@@ -0,0 +1,3 @@
+<div class="flex justify-between mt-1 min-h-5 font-heading">
+    {{> @partial-block }}
+</div>

package/dist/views/components/forms/components/textarea.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5"
+<div class="relative flex flex-col w-full mb-4"
    ax-load
    x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-init="validateField()"
@@ -46,11 +46,7 @@
         {{~else~}}
             {{~_defaultValue~}}
         {{~/if}}{{/if}}</textarea>
-   <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
-     
-     peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
-     
-     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
+   <label for="textarea{{getRandom}}" class="{{> components/forms/components/labelClasses }}">
       {{#if _locaKey}}
          {{loca _locaKey}}
       {{else}}
@@ -64,9 +60,9 @@
             {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
@@ -74,5 +70,5 @@
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
       {{/if~}}
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 </div>

package/dist/views/components/forms/components/upload.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
+<div class="relative flex flex-col w-full mb-4 gap-y-1 md:mb-7"
         ax-load
         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
         x-init="validateUpload()"
@@ -61,13 +61,13 @@
             </button>
         </div>
     </div>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
+    {{#>components/forms/components/supportingTextBox }}      
         {{#if _description}}  
-            <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
+            <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
         {{/if}}
         {{#if _required}}
             <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
         {{/if}}
-    </div>
+    {{/components/forms/components/supportingTextBox }}
 </div>
 

package/dist/views_static/components/forms/components/choice.hbs

@@ -82,13 +82,13 @@
    {{/if}}
 </div>  
 {{#unless _inGroup}}
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 {{/unless}}
 </div>

package/dist/views_static/components/forms/components/choiceGroup.hbs

@@ -5,7 +5,7 @@
         x-ignore
     {{/if}}
 >
-<div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
+<div class="relative flex flex-col w-full mb-4 md:mb-7 gap-y-1 md:gap-y-2">
     <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
         {{#if _hasBody}}
             {{decorator_body}}{{#if _required}}*{{/if}}
@@ -39,13 +39,13 @@
                 }}
         {{/each}}
     </div>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
-      {{#if _description}}  
-         <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
-      {{/if}}
-      {{#if _required}}
-         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
-      {{/if}}
-   </div>
+    {{#>components/forms/components/supportingTextBox }}      
+        {{#if _description}}  
+            <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
+        {{/if}}
+        {{#if _required}}
+            <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+        {{/if}}
+    {{/components/forms/components/supportingTextBox }}
 </div>
 </fieldset>

package/dist/views_static/components/forms/components/input.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+<div class="relative flex flex-col w-full mb-4 {{_wrapperClass}}"
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}','{{_name}}')"
    x-init="validateField()"
@@ -42,11 +42,7 @@
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
       
-  <label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
-     
-     peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
-     
-     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
+  <label for="input{{getRandom}}" class="{{_labelClass}} peer-placeholder-shown:whitespace-nowrap {{> components/forms/components/labelClasses }}">
       {{#if _hasBody}}
         {{decorator_body}}
       {{else}}
@@ -64,12 +60,12 @@
       {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
       {{/if}}
       
       <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 </div>

package/dist/views_static/components/forms/components/labelClasses.hbs

@@ -0,0 +1 @@
+w-[calc(133%-64px)] absolute right-0 truncate transition-transform origin-top-left transform scale-75 translate-x-0 translate-y-0 left-4 top-px text-gray-scorpion peer-placeholder-shown:w-auto peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:right-9 peer-placeholder-shown:whitespace-normal peer-focus:w-[calc(133%-64px)] peer-focus:truncate peer-focus:right-0 peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark

package/dist/views_static/components/forms/components/select.hbs

@@ -1,10 +1,10 @@
-<div class="relative flex flex-col w-full mb-5 "
+<div class="relative flex flex-col w-full mb-4 "
    ax-load
    x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
    x-ignore
 >
     <select
-        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
+        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
@@ -37,21 +37,18 @@
         {{/if}}
     </select>
     <label for="select{{getRandom}}"
-        class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
-              peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
-              origin-top-left transform transition-transform 
-    ">      
+        class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
+    {{#>components/forms/components/supportingTextBox }} 
         {{#if _description}}  
-            <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
+            <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{{_description}}}</div>
         {{/if}}
         {{#if _required}}
             <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
-    </div>
-    <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
+    {{/components/forms/components/supportingTextBox }}
+    <div class="absolute bg-white right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
         {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
     </div>  
 </div>

package/dist/views_static/components/forms/components/supportingTextBox.hbs

@@ -0,0 +1,3 @@
+<div class="flex justify-between mt-1 min-h-5 font-heading">
+    {{> @partial-block }}
+</div>

package/dist/views_static/components/forms/components/textarea.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5"
+<div class="relative flex flex-col w-full mb-4"
    ax-load
    x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-init="validateField()"
@@ -46,11 +46,7 @@
         {{~else~}}
             {{~_defaultValue~}}
         {{~/if}}{{/if}}</textarea>
-   <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
-     
-     peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
-     
-     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
+   <label for="textarea{{getRandom}}" class="{{> components/forms/components/labelClasses }}">
       {{#if _locaKey}}
          {{loca _locaKey}}
       {{else}}
@@ -64,9 +60,9 @@
             {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
@@ -74,5 +70,5 @@
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
       {{/if~}}
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 </div>

package/dist/views_static/components/forms/components/upload.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
+<div class="relative flex flex-col w-full mb-4 gap-y-1 md:mb-7"
         ax-load
         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
         x-init="validateUpload()"
@@ -61,13 +61,13 @@
             </button>
         </div>
     </div>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
+    {{#>components/forms/components/supportingTextBox }}      
         {{#if _description}}  
-            <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
+            <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
         {{/if}}
         {{#if _required}}
             <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
         {{/if}}
-    </div>
+    {{/components/forms/components/supportingTextBox }}
 </div>
 

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.114.25",
+  "version": "1.114.26",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/css/custom-utilities.css

@@ -447,21 +447,21 @@
     /*! FORMULAR SELECT          */
     /*! ****************************/
     /* Custom CSS to style the label when the first empty option is selected */
-    select + label {
-        @apply !scale-75 !translate-y-0 !top-px;
+    .form-select + label {
+        @apply !scale-75 !translate-y-0 !top-px !w-[calc(133.333%-80px)];
     }
  
     @supports selector(:has(+ *)) {
-        select + label {
-            @apply !top-px !scale-100 !translate-y-3;
+        .form-select + label {
+            @apply !top-px !scale-100 !translate-y-3 !w-auto;
         }
     }
 
-    select:has(option:checked:not([value=''])) + label {
-        @apply !top-px !scale-75 !translate-y-0;
+    .form-select:has(option:checked:not([value=''])) + label {
+        @apply !top-px !scale-75 !translate-y-0 !w-[calc(133.333%-80px)];
     }
 
-    select:has(option:checked[value='']) {
+    .form-select:has(option:checked[value='']) {
         @apply text-transparent select-none;
     }
 

package/src/stories/views/components/forms/components/choice.hbs

@@ -82,13 +82,13 @@
    {{/if}}
 </div>  
 {{#unless _inGroup}}
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
          <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 {{/unless}}
 </div>

package/src/stories/views/components/forms/components/choiceGroup.hbs

@@ -5,7 +5,7 @@
         x-ignore
     {{/if}}
 >
-<div class="relative flex flex-col w-full mb-5 md:mb-7 gap-y-1 md:gap-y-2">
+<div class="relative flex flex-col w-full mb-4 md:mb-7 gap-y-1 md:gap-y-2">
     <legend class="mb-1 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading md:mb-2">
         {{#if _hasBody}}
             {{decorator_body}}{{#if _required}}*{{/if}}
@@ -39,13 +39,13 @@
                 }}
         {{/each}}
     </div>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
-      {{#if _description}}  
-         <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
-      {{/if}}
-      {{#if _required}}
-         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
-      {{/if}}
-   </div>
+    {{#>components/forms/components/supportingTextBox }}      
+        {{#if _description}}  
+            <div class="text-xs text-gray-scorpion dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
+        {{/if}}
+        {{#if _required}}
+            <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+        {{/if}}
+    {{/components/forms/components/supportingTextBox }}
 </div>
 </fieldset>

package/src/stories/views/components/forms/components/input.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5 {{_wrapperClass}}"
+<div class="relative flex flex-col w-full mb-4 {{_wrapperClass}}"
    ax-load
    x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}','{{_name}}')"
    x-init="validateField()"
@@ -42,11 +42,7 @@
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
       
-  <label for="input{{getRandom}}" class="{{_labelClass}} cursor-text absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
-     
-     peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
-     
-     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
+  <label for="input{{getRandom}}" class="{{_labelClass}} peer-placeholder-shown:whitespace-nowrap {{> components/forms/components/labelClasses }}">
       {{#if _hasBody}}
         {{decorator_body}}
       {{else}}
@@ -64,12 +60,12 @@
       {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
       {{/if}}
       
       <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 </div>

package/src/stories/views/components/forms/components/labelClasses.hbs

@@ -0,0 +1 @@
+w-[calc(133%-64px)] absolute right-0 truncate transition-transform origin-top-left transform scale-75 translate-x-0 translate-y-0 left-4 top-px text-gray-scorpion peer-placeholder-shown:w-auto peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:right-9 peer-placeholder-shown:whitespace-normal peer-focus:w-[calc(133%-64px)] peer-focus:truncate peer-focus:right-0 peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark

package/src/stories/views/components/forms/components/select.hbs

@@ -1,10 +1,10 @@
-<div class="relative flex flex-col w-full mb-5 "
+<div class="relative flex flex-col w-full mb-4 "
    ax-load
    x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
    x-ignore
 >
     <select
-        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
+        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark border-form-highlight dark:border-form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
@@ -37,21 +37,18 @@
         {{/if}}
     </select>
     <label for="select{{getRandom}}"
-        class="absolute pointer-events-none left-[16px] top-0 translate-y-3 translate-x-0 scale-100 text-gray-scorpion dark:text-text-dark
-              peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
-              origin-top-left transform transition-transform 
-    ">      
+        class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
+    {{#>components/forms/components/supportingTextBox }} 
         {{#if _description}}  
-            <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{_description}}</div>
+            <div class="pl-4 text-xs text-gray-scorpion dark:text-text-dark" :class="{'hidden': hideDescription()}">{{{_description}}}</div>
         {{/if}}
         {{#if _required}}
             <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
-    </div>
-    <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
+    {{/components/forms/components/supportingTextBox }}
+    <div class="absolute bg-white right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
         {{> components/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark "}}
     </div>  
 </div>

package/src/stories/views/components/forms/components/supportingTextBox.hbs

@@ -0,0 +1,3 @@
+<div class="flex justify-between mt-1 min-h-5 font-heading">
+    {{> @partial-block }}
+</div>

package/src/stories/views/components/forms/components/textarea.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5"
+<div class="relative flex flex-col w-full mb-4"
    ax-load
    x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
    x-init="validateField()"
@@ -46,11 +46,7 @@
         {{~else~}}
             {{~_defaultValue~}}
         {{~/if}}{{/if}}</textarea>
-   <label for="textarea{{getRandom}}" class="absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion
-     
-     peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-x-0 peer-placeholder-shown:translate-y-3 
-     
-     peer-focus:translate-x-0 peer-focus:-translate-y-0 peer-focus:scale-75 peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark origin-top-left transform transition-transform">
+   <label for="textarea{{getRandom}}" class="{{> components/forms/components/labelClasses }}">
       {{#if _locaKey}}
          {{loca _locaKey}}
       {{else}}
@@ -64,9 +60,9 @@
             {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
-   <div class="flex items-end justify-between min-h-5 font-heading">     
+   {{#>components/forms/components/supportingTextBox }}      
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-scorpion" :class="{'hidden': hideDescription() }">{{{_description}}}</div>
       {{/if}}
       {{#if _required}}
          <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
@@ -74,5 +70,5 @@
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>
       {{/if~}}
-   </div>
+   {{/components/forms/components/supportingTextBox }}
 </div>

package/src/stories/views/components/forms/components/upload.hbs

@@ -1,4 +1,4 @@
-<div class="relative flex flex-col w-full mb-5 gap-y-1 md:mb-7"
+<div class="relative flex flex-col w-full mb-4 gap-y-1 md:mb-7"
         ax-load
         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
         x-init="validateUpload()"
@@ -61,13 +61,13 @@
             </button>
         </div>
     </div>
-    <div class="flex items-end justify-between min-h-5 font-heading">     
+    {{#>components/forms/components/supportingTextBox }}      
         {{#if _description}}  
-            <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{_description}}</div>
+            <div class="text-xs text-gray-500 dark:text-text-dark" {{#if _required}}:class="{'hidden': hideDescription()}"{{/if}}>{{{_description}}}</div>
         {{/if}}
         {{#if _required}}
             <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
         {{/if}}
-    </div>
+    {{/components/forms/components/supportingTextBox }}
 </div>