hr-design-system-handlebars 1.110.10 → 1.110.11

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.110.11 (Wed Oct 16 2024)
+
+#### 🐛 Bug Fix
+
+- Forms colors and spacing v2 [#1115](https://github.com/mumprod/hr-design-system-handlebars/pull/1115) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.110.10 (Wed Oct 16 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1722,6 +1722,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .min-h-3 {
   min-height: 0.75rem;
 }
+.min-h-6 {
+  min-height: 1.5rem;
+}
 .min-h-\[88px\] {
   min-height: 88px;
 }
@@ -2030,6 +2033,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .cursor-pointer {
   cursor: pointer;
 }
+.cursor-text {
+  cursor: text;
+}
 .resize {
   resize: both;
 }
@@ -2265,10 +2271,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .rounded-lg {
   border-radius: 0.5rem;
 }
-.rounded-b {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-}
 .rounded-l {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -2330,9 +2332,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .border-t {
   border-top-width: 1px;
 }
-.border-t-0 {
-  border-top-width: 0px;
-}
 .border-t-\[3px\] {
   border-top-width: 3px;
 }
@@ -2396,6 +2395,14 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #000000;
   border-color: var(--color-footer-heading);
 }
+.border-form-highlight {
+  border-color: #006eb7;
+  border-color: var(--color-form-highlight);
+}
+.border-form-highlight-dark {
+  border-color: #006eb7;
+  border-color: var(--color-form-highlight-dark);
+}
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, 1);
@@ -2421,14 +2428,6 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: rgba(96, 96, 96, 1);
   border-color: rgba(96, 96, 96, var(--tw-border-opacity));
 }
-.border-link {
-  border-color: #006eb7;
-  border-color: var(--color-link);
-}
-.border-link-dark {
-  border-color: #006eb7;
-  border-color: var(--color-link-dark);
-}
 .border-navigation-border-color {
   border-color: #fff;
   border-color: var(--color-navigation-border-color);
@@ -2437,11 +2436,6 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #005293;
   border-color: var(--color-primary-ds);
 }
-.border-red-400 {
-  --tw-border-opacity: 1;
-  border-color: rgba(248, 113, 113, 1);
-  border-color: rgba(248, 113, 113, var(--tw-border-opacity));
-}
 .border-servicenavigation-border-color {
   border-color: #fff;
   border-color: var(--color-servicenavigation-border-color);
@@ -2649,16 +2643,6 @@ article.indexTextDS .indexTextHighlighted .link {
   background-color: #005293;
   background-color: var(--color-primary-ds);
 }
-.bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(254, 226, 226, 1);
-  background-color: rgba(254, 226, 226, var(--tw-bg-opacity));
-}
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(239, 68, 68, 1);
-  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
-}
 .bg-slate-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(226, 232, 240, 1);
@@ -2747,9 +2731,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .fill-\[\#606060\] {
   fill: #606060;
 }
-.fill-blue-500 {
-  fill: #3b82f6;
-}
 .fill-blue-congress-hex {
   fill: #005293;
 }
@@ -2778,6 +2759,10 @@ article.indexTextDS .indexTextHighlighted .link {
   fill: #000000;
   fill: var(--color-footer-text);
 }
+.fill-form-highlight {
+  fill: #006eb7;
+  fill: var(--color-form-highlight);
+}
 .fill-link {
   fill: #006eb7;
   fill: var(--color-link);
@@ -3584,7 +3569,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1729088219642;
+  counter-reset: cnt1729089548088;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -3998,7 +3983,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1729088219642 1;
+  counter-increment: cnt1729089548088 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4016,7 +4001,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(cnt1729088219642);
+  content: counter(cnt1729089548088);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4133,7 +4118,7 @@ select + label {
 }
 @supports selector(:has(+ *)) {
         select + label {
-    top: 0px !important;
+    top: 1px !important;
     --tw-translate-y: 0.75rem !important;
     --tw-scale-x: 1 !important;
     --tw-scale-y: 1 !important;
@@ -4349,6 +4334,8 @@ input[type='radio']:checked::after {
     --structure-nav-text-mobile: var(--color-primary-ds);
 
     --color-error: #cc1a14;
+    --color-form-highlight: var(--color-link);
+    --color-form-highlight-dark: var(--color-link-dark);
 
     --feature-box-height: 0;
 }
@@ -5009,6 +4996,9 @@ input[type='radio']:checked::after {
     /* Font */
     --font-title: RobotoCond, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
     --font-weight-title: 700;
+
+    --color-form-highlight: var(--color-secondary-ds);
+    --color-form-highlight-dark: var(--color-secondary-ds);
 }
 [data-theme='hr-sinfonieorchester'] .ardplayer.ardplayer-light-mode {
             --ardplayer-color-primary-base: #AB2F2D;
@@ -5430,6 +5420,9 @@ input[type='radio']:checked::after {
     --search-border-color-desktop: var(--color-navigation-icons);
 
     --feature-box-height: 96px;
+
+    --color-form-highlight: var(--color-secondary-ds);
+    --color-form-highlight-dark: var(--color-secondary-ds);
 }
 [data-theme='hr2'] .ardplayer.ardplayer-light-mode {
             --ardplayer-color-primary-base: #8C033D;
@@ -5546,6 +5539,9 @@ input[type='radio']:checked::after {
     --search-border-color-desktop: #606060;
 
     --feature-box-height: 96px;
+
+    --color-form-highlight: var(--color-secondary-ds);
+    --color-form-highlight-dark: var(--color-secondary-ds);
 }
 [data-theme='hr3'] .ardplayer.ardplayer-light-mode {
             --ardplayer-color-primary-base: #c20016;
@@ -5926,13 +5922,13 @@ input[type='radio']:checked::after {
 .last-of-type\:pb-3:last-of-type {
   padding-bottom: 0.75rem;
 }
-.checked\:border-link:checked {
+.checked\:border-form-highlight:checked {
   border-color: #006eb7;
-  border-color: var(--color-link);
+  border-color: var(--color-form-highlight);
 }
-.checked\:bg-link:checked {
+.checked\:bg-form-highlight:checked {
   background-color: #006eb7;
-  background-color: var(--color-link);
+  background-color: var(--color-form-highlight);
 }
 .checked\:bg-white:checked {
   --tw-bg-opacity: 1;
@@ -6195,9 +6191,9 @@ input[type='radio']:checked::after {
 .peer:focus ~ .peer-focus\:border-r {
   border-right-width: 1px;
 }
-.peer:focus ~ .peer-focus\:text-link {
+.peer:focus ~ .peer-focus\:text-form-highlight {
   color: #006eb7;
-  color: var(--color-link);
+  color: var(--color-form-highlight);
 }
 .aria-hidden\:hidden[aria-hidden="true"] {
   display: none;
@@ -7304,6 +7300,10 @@ input[type='radio']:checked::after {
     padding-left: 0px;
   }
 
+  .md\:pl-3 {
+    padding-left: 0.75rem;
+  }
+
   .md\:pl-5 {
     padding-left: 1.25rem;
   }
@@ -8197,9 +8197,9 @@ input[type='radio']:checked::after {
   border-color: #cc1a14;
   border-color: var(--color-error);
 }
-.dark\:border-link-dark:where(.dark, .dark *) {
+.dark\:border-form-highlight-dark:where(.dark, .dark *) {
   border-color: #006eb7;
-  border-color: var(--color-link-dark);
+  border-color: var(--color-form-highlight-dark);
 }
 .dark\:border-text-dark:where(.dark, .dark *) {
   border-color: #f0f0f0;
@@ -8228,6 +8228,10 @@ input[type='radio']:checked::after {
   background-color: #006eb7;
   background-color: var(--color-podcast-text);
 }
+.dark\:fill-form-highlight-dark:where(.dark, .dark *) {
+  fill: #006eb7;
+  fill: var(--color-form-highlight-dark);
+}
 .dark\:fill-link-dark:where(.dark, .dark *) {
   fill: #006eb7;
   fill: var(--color-link-dark);
@@ -8258,9 +8262,9 @@ input[type='radio']:checked::after {
 .dark\:border-t-transparent:where(.dark, .dark *) {
   border-top-color: transparent;
 }
-.peer:focus ~ .peer-focus\:dark\:text-text-dark:where(.dark, .dark *) {
-  color: #f0f0f0;
-  color: var(--color-standard-text-dark);
+.peer:focus ~ .peer-focus\:dark\:text-form-highlight-dark:where(.dark, .dark *) {
+  color: #006eb7;
+  color: var(--color-form-highlight-dark);
 }
 @media print {
 

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

@@ -1,17 +1,18 @@
+{{~changeRandom~}}
 <div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
    {{#unless _inGroup}}
       {{#if _required}}
          ax-load
-         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+         x-data="inputHandler('input{{getRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
          x-init="validateChoice()"
          x-ignore
       {{/if}}
    {{/unless}}
 >
-<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-link dark:border-link-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-link checked:border-link"," checked:bg-white checked:border-link rounded-full",""]'}}"
+<div class="flex flex-row items-center w-full cursor-pointer ">
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
       {{#if _required}}
-            :class="{' border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -59,7 +60,7 @@
          {{/if}}
       {{/if~}}
    >
-  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-text dark:text-text-dark md:text-sm font-headingSerif ">
+  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
       {{#if _hasBody}}
         {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}

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

@@ -1,6 +1,6 @@
-<div class="flex items-center justify-between">
-    <div class="text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
-    <div class="flex items-center">
+<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
+    <div class="flex items-center justify-end w-full basis-full">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
             <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
             <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>

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

@@ -4,8 +4,8 @@
    x-init="validateField()"
    x-ignore
    >
-   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-link dark:border-link-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
-      :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark: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:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -42,11 +42,11 @@
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
       
-  <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
+  <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-link peer-focus:dark:text-text-dark origin-top-left transform transition-transform">
+     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">
       {{#if _hasBody}}
         {{decorator_body}}
       {{else}}
@@ -72,25 +72,4 @@
       <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
-   <div class="hidden">
-      <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
-         DEBUG
-      </div>
-      <div class="px-4 py-3 bg-red-100 border border-t-0 border-red-400 rounded-b text-error">
-         <div>name:<span x-text="name" class="font-bold" ></span></div>
-         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-error'"></span></div>
-         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-error'"></span></div>
-         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-error'"></span></div>
-        
-         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-error'"></span></div>   
-         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-error'"></span></div>   
-         <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
-         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
-         <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
-         <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
-         <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
-         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-error'"></span></div>
-                    
-      </div> 
-   </div>
 </div>

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

@@ -4,8 +4,8 @@
    x-ignore
 >
     <select
-        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none text-text dark:bg-black dark:text-text-dark border-link bg- pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
-        :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        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="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -38,7 +38,7 @@
     </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-link peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
+              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 
     ">      
         {{_label}}{{#if _required}}*{{/if}}
@@ -52,6 +52,6 @@
         {{/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/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-blue-500 dark:fill-text-dark "}}
+        {{> 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/textarea.hbs

@@ -34,9 +34,9 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-link dark:border-link-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
+      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -50,7 +50,7 @@
      
      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-link origin-top-left transform transition-transform">
+     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">
       {{#if _locaKey}}
          {{loca _locaKey}}
       {{else}}

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

@@ -1,17 +1,18 @@
+{{~changeRandom~}}
 <div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
    {{#unless _inGroup}}
       {{#if _required}}
          ax-load
-         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+         x-data="inputHandler('input{{getRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
          x-init="validateChoice()"
          x-ignore
       {{/if}}
    {{/unless}}
 >
-<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-link dark:border-link-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-link checked:border-link"," checked:bg-white checked:border-link rounded-full",""]'}}"
+<div class="flex flex-row items-center w-full cursor-pointer ">
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
       {{#if _required}}
-            :class="{' border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -59,7 +60,7 @@
          {{/if}}
       {{/if~}}
    >
-  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-text dark:text-text-dark md:text-sm font-headingSerif ">
+  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
       {{#if _hasBody}}
         {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}

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

@@ -1,6 +1,6 @@
-<div class="flex items-center justify-between">
-    <div class="text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
-    <div class="flex items-center">
+<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
+    <div class="flex items-center justify-end w-full basis-full">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
             <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
             <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>

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

@@ -4,8 +4,8 @@
    x-init="validateField()"
    x-ignore
    >
-   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-link dark:border-link-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
-      :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark: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:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -42,11 +42,11 @@
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
       
-  <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
+  <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-link peer-focus:dark:text-text-dark origin-top-left transform transition-transform">
+     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">
       {{#if _hasBody}}
         {{decorator_body}}
       {{else}}
@@ -72,25 +72,4 @@
       <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
-   <div class="hidden">
-      <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
-         DEBUG
-      </div>
-      <div class="px-4 py-3 bg-red-100 border border-t-0 border-red-400 rounded-b text-error">
-         <div>name:<span x-text="name" class="font-bold" ></span></div>
-         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-error'"></span></div>
-         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-error'"></span></div>
-         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-error'"></span></div>
-        
-         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-error'"></span></div>   
-         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-error'"></span></div>   
-         <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
-         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
-         <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
-         <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
-         <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
-         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-error'"></span></div>
-                    
-      </div> 
-   </div>
 </div>

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

@@ -4,8 +4,8 @@
    x-ignore
 >
     <select
-        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none text-text dark:bg-black dark:text-text-dark border-link bg- pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
-        :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        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="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -38,7 +38,7 @@
     </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-link peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
+              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 
     ">      
         {{_label}}{{#if _required}}*{{/if}}
@@ -52,6 +52,6 @@
         {{/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/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-blue-500 dark:fill-text-dark "}}
+        {{> 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/textarea.hbs

@@ -34,9 +34,9 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-link dark:border-link-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
+      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -50,7 +50,7 @@
      
      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-link origin-top-left transform transition-transform">
+     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">
       {{#if _locaKey}}
          {{loca _locaKey}}
       {{else}}

package/package.json

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

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

@@ -453,7 +453,7 @@
  
     @supports selector(:has(+ *)) {
         select + label {
-            @apply !top-0 !scale-100 !translate-y-3;
+            @apply !top-px !scale-100 !translate-y-3;
         }
     }
 

package/src/assets/tailwind.css

@@ -164,6 +164,8 @@
     --structure-nav-text-mobile: var(--color-primary-ds);
 
     --color-error: theme('colors.red.thunderbird.hex');
+    --color-form-highlight: var(--color-link);
+    --color-form-highlight-dark: var(--color-link-dark);
 
     --feature-box-height: 0;
 
@@ -910,6 +912,9 @@
     --font-title: theme('fontFamily.heading');
     --font-weight-title: theme('fontWeight.bold');
 
+    --color-form-highlight: var(--color-secondary-ds);
+    --color-form-highlight-dark: var(--color-secondary-ds);
+
     .ardplayer {
         &.ardplayer-light-mode {
             --ardplayer-color-primary-base: theme('colors.red.wellRead.hex');
@@ -1377,6 +1382,9 @@
 
     --feature-box-height: 96px;
 
+    --color-form-highlight: var(--color-secondary-ds);
+    --color-form-highlight-dark: var(--color-secondary-ds);
+
     .ardplayer {
         &.ardplayer-light-mode {
             --ardplayer-color-primary-base: theme('colors.red.paprika.hex');
@@ -1508,6 +1516,9 @@
 
     --feature-box-height: 96px;
 
+    --color-form-highlight: var(--color-secondary-ds);
+    --color-form-highlight-dark: var(--color-secondary-ds);
+
     .ardplayer {
         &.ardplayer-light-mode {
             --ardplayer-color-primary-base: theme('colors.red.monza.hex');

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

@@ -1,17 +1,18 @@
+{{~changeRandom~}}
 <div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
    {{#unless _inGroup}}
       {{#if _required}}
          ax-load
-         x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
+         x-data="inputHandler('input{{getRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}','', '', '{{_name}}')"
          x-init="validateChoice()"
          x-ignore
       {{/if}}
    {{/unless}}
 >
-<div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-link dark:border-link-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-link checked:border-link"," checked:bg-white checked:border-link rounded-full",""]'}}"
+<div class="flex flex-row items-center w-full cursor-pointer ">
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight"," checked:bg-white checked:border-form-highlight rounded-full",""]'}}"
       {{#if _required}}
-            :class="{' border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -59,7 +60,7 @@
          {{/if}}
       {{/if~}}
    >
-  <label for="input{{getRandom}}" class="items-center justify-center text-xs text-text dark:text-text-dark md:text-sm font-headingSerif ">
+  <label for="input{{getRandom}}" class="min-h-6 pt-0.5 items-center justify-center pl-2 text-xs cursor-pointer md:pl-3 text-text dark:text-text-dark md:text-sm font-headingSerif ">
       {{#if _hasBody}}
         {{decorator_body}}{{#unless _inGroup}}{{#if _required}}*{{/if}}{{/unless}}
       {{else}}

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

@@ -1,6 +1,6 @@
-<div class="flex items-center justify-between">
-    <div class="text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
-    <div class="flex items-center">
+<div class="flex flex-col-reverse items-center justify-between sm:flex-row gap-y-6">
+    <div class="w-full text-xs basis-full text-gray-scorpion dark:text-text-dark font-headingSerif">Pflichtfeld*</div>
+    <div class="flex items-center justify-end w-full basis-full">
         <label class="order-2 cursor-pointer {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant='primary'}} {{> components/button/utilities/button_dimension_classes _size='lg'}}">     
             <span class="hidden" :class="{'hidden': !isPosting}">{{> components/base/image/icon _icon="reload" _addClass="w-5 h-5 fill-white dark:fill-text-dark animate-spin"}}</span>
             <span class="" :class="{'hidden': isPosting}">{{> components/base/image/icon _icon="send-ds" _addClass="w-5 h-5 fill-white dark:fill-text-dark "}}</span>

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

@@ -4,8 +4,8 @@
    x-init="validateField()"
    x-ignore
    >
-   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-link dark:border-link-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none" 
-      :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+   <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark: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:form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -42,11 +42,11 @@
          data-hr-search-suggest='{"templateUrl":"{{resourceUrl "suche/index~suggest.jsp"}}"}'{{/if}}
       >
       
-  <label for="input{{getRandom}}" class="{{_labelClass}} absolute left-[16px] top-px translate-y-0 translate-x-0 scale-75 text-gray-scorpion dark:text-text-dark
+  <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-link peer-focus:dark:text-text-dark origin-top-left transform transition-transform">
+     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">
       {{#if _hasBody}}
         {{decorator_body}}
       {{else}}
@@ -72,25 +72,4 @@
       <div class="hidden pl-4 text-xs text-error" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
-   <div class="hidden">
-      <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
-         DEBUG
-      </div>
-      <div class="px-4 py-3 bg-red-100 border border-t-0 border-red-400 rounded-b text-error">
-         <div>name:<span x-text="name" class="font-bold" ></span></div>
-         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-error'"></span></div>
-         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-error'"></span></div>
-         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-error'"></span></div>
-        
-         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-error'"></span></div>   
-         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-error'"></span></div>   
-         <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
-         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
-         <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
-         <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
-         <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
-         <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-error'"></span></div>
-                    
-      </div> 
-   </div>
 </div>

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

@@ -4,8 +4,8 @@
    x-ignore
 >
     <select
-        class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none text-text dark:bg-black dark:text-text-dark border-link bg- pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
-        :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        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="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -38,7 +38,7 @@
     </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-link peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px
+              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 
     ">      
         {{_label}}{{#if _required}}*{{/if}}
@@ -52,6 +52,6 @@
         {{/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/base/image/icon _icon="arrow-down" _addClass="w-3 h-3 fill-blue-500 dark:fill-text-dark "}}
+        {{> 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/textarea.hbs

@@ -34,9 +34,9 @@
          maxlength="{{_maxLength}}"
       {{/if~}}
       {{#if _required}}required{{/if}}
-      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-link dark:border-link-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
+      class="relative w-full px-4 pb-px text-black placeholder-transparent bg-white border-form-highlight dark:border-form-highlight-dark min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-link dark:border-link-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -50,7 +50,7 @@
      
      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-link origin-top-left transform transition-transform">
+     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">
       {{#if _locaKey}}
          {{loca _locaKey}}
       {{else}}

package/tailwind.config.js

@@ -426,7 +426,9 @@ module.exports = {
                 'structure-nav': 'var(--structure-nav-background)',
                 'structure-nav-text': 'var(--structure-nav-text)',
                 'structure-nav-text-mobile': 'var(--structure-nav-text-mobile)',
-                'error':'var(--color-error)'
+                'error':'var(--color-error)',
+                'form-highlight':'var(--color-form-highlight)',
+                'form-highlight-dark':'var(--color-form-highlight-dark)'
             },
         },
     },