hr-design-system-handlebars 1.110.11 → 1.110.13

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.110.13 (Thu Oct 17 2024)
+
+#### 🐛 Bug Fix
+
+- Forms colors and spacing v2 [#1117](https://github.com/mumprod/hr-design-system-handlebars/pull/1117) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.110.12 (Thu Oct 17 2024)
+
+#### 🐛 Bug Fix
+
+- reactivate error icon in message.hbs [#1116](https://github.com/mumprod/hr-design-system-handlebars/pull/1116) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.110.11 (Wed Oct 16 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
 	"meta_application_name": "hessenschau.de"
 }

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr . d e",
 	"meta_application_name": "hr.de"
 }

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
 	"meta_application_name": "hr-bigband.de"
 }

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
 	"meta_application_name": "hr-fernsehen.de"
 }

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
 	"meta_application_name": "hr-inforadio.de"
 }

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
 	"meta_application_name": "hr-rundfunkrat.de"
 }

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
 	"meta_application_name": "hr-sinfonieorchester.de"
 }

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
 	"meta_application_name": "hr-werbung.de"
 }

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr1 . d e",
 	"meta_application_name": "hr1.de"
 }

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr2 . d e",
 	"meta_application_name": "hr2.de"
 }

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr3 . d e",
 	"meta_application_name": "hr3.de"
 }

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite hr4 . d e",
 	"meta_application_name": "hr4.de"
 }

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -190,6 +190,8 @@
 	"teaser_more_video_livestream_brand": "zum {0} Livestream",
 	"teaser_more_video_livestream_brand_sr": "zum {0} Livestream",
 	"teaser_more_video_livestream_sr": "zum Livestream",
+	"webform_send_text_success": "Das Formular wurde erfolgreich versendet.",
+	"webform_send_text_error": "Das Formular konnte nicht versendet werden.",
 	"header_homepage_link_title": "Startseite you-fm . d e",
 	"meta_application_name": "you-fm.de"
 }

package/dist/assets/index.css

@@ -1571,6 +1571,9 @@ article.indexTextDS .indexTextHighlighted .link {
   -webkit-box-orient: horizontal;
   -webkit-line-clamp: none;
 }
+.\!block {
+  display: block !important;
+}
 .block {
   display: block;
 }
@@ -2383,6 +2386,10 @@ article.indexTextDS .indexTextHighlighted .link {
   border-color: #cc1a14;
   border-color: var(--color-error);
 }
+.border-error-dark {
+  border-color: #e07672;
+  border-color: var(--color-error-dark);
+}
 .border-event-calendar-secondary {
   border-color: #797979;
   border-color: var(--color-eventcalendar-secondary);
@@ -3260,11 +3267,6 @@ article.indexTextDS .indexTextHighlighted .link {
   color: rgba(22, 163, 74, 1);
   color: rgba(22, 163, 74, var(--tw-text-opacity));
 }
-.text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgba(22, 101, 52, 1);
-  color: rgba(22, 101, 52, var(--tw-text-opacity));
-}
 .text-inherit {
   color: inherit;
 }
@@ -3296,11 +3298,6 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #005293;
   color: var(--color-primary-ds);
 }
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgba(185, 28, 28, 1);
-  color: rgba(185, 28, 28, var(--tw-text-opacity));
-}
 .text-search-footer-text {
   color: #000000;
   color: var(--color-search-footer-text);
@@ -3329,6 +3326,10 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #006dc1;
   color: var(--color-subline);
 }
+.text-success {
+  color: #2c7e13;
+  color: var(--color-success);
+}
 .text-text {
   color: #000000;
   color: var(--color-standard-text);
@@ -3569,7 +3570,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1729089548088;
+  counter-reset: cnt1729168861889;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -3983,7 +3984,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1729089548088 1;
+  counter-increment: cnt1729168861889 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4001,7 +4002,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(cnt1729089548088);
+  content: counter(cnt1729168861889);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4334,6 +4335,8 @@ input[type='radio']:checked::after {
     --structure-nav-text-mobile: var(--color-primary-ds);
 
     --color-error: #cc1a14;
+    --color-error-dark: #e07672;
+    --color-success: #2c7e13;
     --color-form-highlight: var(--color-link);
     --color-form-highlight-dark: var(--color-link-dark);
 
@@ -8193,9 +8196,9 @@ input[type='radio']:checked::after {
 .rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 1;
 }
-.dark\:border-error:where(.dark, .dark *) {
-  border-color: #cc1a14;
-  border-color: var(--color-error);
+.dark\:border-error-dark:where(.dark, .dark *) {
+  border-color: #e07672;
+  border-color: var(--color-error-dark);
 }
 .dark\:border-form-highlight-dark:where(.dark, .dark *) {
   border-color: #006eb7;
@@ -8228,6 +8231,10 @@ input[type='radio']:checked::after {
   background-color: #006eb7;
   background-color: var(--color-podcast-text);
 }
+.dark\:fill-error-dark:where(.dark, .dark *) {
+  fill: #e07672;
+  fill: var(--color-error-dark);
+}
 .dark\:fill-form-highlight-dark:where(.dark, .dark *) {
   fill: #006eb7;
   fill: var(--color-form-highlight-dark);
@@ -8240,6 +8247,10 @@ input[type='radio']:checked::after {
   fill: #f0f0f0;
   fill: var(--color-standard-text-dark);
 }
+.dark\:text-error-dark:where(.dark, .dark *) {
+  color: #e07672;
+  color: var(--color-error-dark);
+}
 .dark\:text-link-dark:where(.dark, .dark *) {
   color: #006eb7;
   color: var(--color-link-dark);

package/dist/assets/js/alpine.js

@@ -19,8 +19,8 @@ AsyncAlpine.init(Alpine)
     )
     
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
-    .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
-    .data('contactForm', ()=> import('components/forms/contactForm.alpine.js'))
+    .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
+    .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))
     .start()
 
 window.Alpine = Alpine

package/dist/views/components/dataPolicySettings/data_policy_settings.hbs

@@ -51,7 +51,7 @@
                         class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
+                        {{> components/forms/components/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
@@ -60,7 +60,7 @@
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -85,7 +85,7 @@
                 <div class="flex justify-between">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -96,7 +96,7 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
+                                {{> components/forms/components/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}

package/dist/{views_static/components/forms → views/components/forms/components}/choice.hbs

@@ -12,7 +12,7 @@
 <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-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -80,7 +80,7 @@
          <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" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 {{/unless}}

package/dist/views/components/forms/{choiceGroup.hbs → components/choiceGroup.hbs}

@@ -22,7 +22,7 @@
     <div class="flex flex-row flex-wrap gap-x-6 md:gap-x-7 gap-y-5" >
         {{#each _items}}   
             <div>
-                {{> components/forms/choice
+                {{> components/forms/components/choice
                         _type=../_type
                         _name=../_name
                         _required=(if ../_isRadio ../_required)
@@ -42,7 +42,7 @@
          <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" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 </div>

package/dist/views/components/forms/{error_icon.hbs → components/error_icon.hbs}

@@ -1,3 +1,3 @@
 <div class="hidden w-5 h-5 {{_class}}"{{#if _xclass}} :class="{{_xclass}}"{{/if}}>
-    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error"}}
+    {{> components/base/image/icon _icon="error-ds" _addClass="w-5 h-5 fill-error dark:fill-error-dark"}}
 </div>

package/{src/stories/views/components/forms → dist/views/components/forms/components}/fields.hbs

@@ -4,18 +4,18 @@
         {{#if this.caption}}         
             <fieldset>
                 <legend class="mb-5 text-lg font-bold text-text dark:text-text-dark md:text-xl font-heading">{{this.caption}}</legend>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>            
         {{else}}
             <fieldset>
-                {{~> components/forms/fields}}
+                {{~> components/forms/components/fields}}
             </fieldset>
         {{/if}}
         
     {{else}}
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
-                {{~> components/forms/textarea
+                {{~> components/forms/components/textarea
                     _name=this.name
                     _label=this.label
                     _description=this.description
@@ -29,7 +29,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isText}}
-                {{~> components/forms/input
+                {{~> components/forms/components/input
                     _type=this.type.asString
                     _isEmail=this.type.isEmail
                     _name=this.name
@@ -46,7 +46,7 @@
                     _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
-                {{~> components/forms/select
+                {{~> components/forms/components/select
                     _name=this.name
                     _label=this.label
                     _labelClass="hide"
@@ -58,7 +58,7 @@
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
-                    {{~> components/forms/choiceGroup
+                    {{~> components/forms/components/choiceGroup
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label
@@ -72,7 +72,7 @@
                         _formId=../_formId  
                     }}
                 {{else}}
-                    {{~> components/forms/choice
+                    {{~> components/forms/components/choice
                         _type=this.type.asString
                         _name=this.name
                         _label=this.label

package/{src/stories/views/components/forms → dist/views/components/forms/components}/input.hbs

@@ -5,7 +5,7 @@
    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-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() }"
+      :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
       x-bind:data-is-valid="valid ? 'true' : 'false'"     
@@ -61,7 +61,7 @@
    </label> 
    
    <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-      {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+      {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
    </div>
  
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <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" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       
    </div>
 </div>

package/dist/views/components/forms/{message.hbs → components/message.hbs}

@@ -2,16 +2,15 @@
         <div class="flex items-center gap-x-2 md:gap-x-3">
             {{#if _success}}
                 {{> components/forms/success_icon}}
-                <span class="font-bold text-green-800">{{_messageText}}</span>       
+                <span class="h-5 font-bold text-success">{{#if this.successText}}{{this.successText.richtext}}{{else}}{{~loca "webform_send_text_success"}}{{/if}}</span>       
             {{else}}
-                {{> components/forms/error_icon}}
-                <span class="font-bold text-red-700">{{_messageText}}</span>  
+                {{> components/forms/error_icon _class="!block"}}
+                <span class="h-5 font-bold text-error dark:text-error-dark">{{~loca "webform_send_text_error"}}</span>  
             {{/if}}
         </div>
         {{#unless _success}}
             {{#> components/button/button _variant="primary"_size="lg" _css="" _type="reset"}} 
                 <span class="text-base ds-button-label ">Nochmal versuchen</span>        
             {{/components/button/button}}  
-        {{/unless}}
-        
+        {{/unless}}   
 </div>

package/{src/stories/views/components/forms → dist/views/components/forms/components}/select.hbs

@@ -5,7 +5,7 @@
 >
     <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="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+        :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
         x-model="select{{getRandom}}"
         id="select{{getRandom}}"
         title="{{#if _locaKey}}{{loca _locaKey}}{{else}}{{#if _Label}}{{_label}}{{#if _required}}*{{/if}}{{/if}}{{/if}}"
@@ -48,7 +48,7 @@
             <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" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+            <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">

package/{src/stories/views/components/forms → dist/views/components/forms/components}/textarea.hbs

@@ -36,7 +36,7 @@
       {{#if _required}}required{{/if}}
       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-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+         :class="{'border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -61,7 +61,7 @@
    </label>
    {{#if _required}}
          <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-            {{> components/forms/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
+            {{> components/forms/components/error_icon _class="hidden" _xclass="{'hidden': hideError() }"}}
          </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
@@ -69,7 +69,7 @@
          <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" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
       {{/if}}
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-scorpion"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>

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

@@ -1,5 +1,5 @@
 {{~#if _newWebForm ~}}
-    {{#>components/forms/backgroundBox  }}  
+    {{#>components/forms/components/backgroundBox  }}  
 
         
         <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
@@ -22,21 +22,21 @@
                 accept-charset="utf-8"
                 
                 >
-                {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
+                {{> components/forms/components/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
-                {{> components/forms/controls }}
+                {{> components/forms/components/controls }}
 
                 <template id="successMessage">
-                    {{> components/forms/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
+                    {{> components/forms/components/message _success=true _messageText="Das Formular wurde erforlgreich versendet." }}
                 </template>
 
                 <template id="errorMessage">
-                    {{> components/forms/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
+                    {{> components/forms/components/message _success=false _messageText="Das Formular konnte nicht versendet werden." }}
                 </template>
                 
             </form>
         </div>   
-    {{/components/forms/backgroundBox }}
+    {{/components/forms/components/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}
 {{~/if~}}

package/dist/views_static/components/dataPolicySettings/data_policy_settings.hbs

@@ -51,7 +51,7 @@
                         class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
+                        {{> components/forms/components/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="agf aktivieren/deaktivieren" }}
                     </div>
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3]">
@@ -60,7 +60,7 @@
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit">
-                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _whitelisted=true _screenReaderText="at internet aktivieren/deaktivieren"}}
                     </div>
                 </li>
             </ul>
@@ -85,7 +85,7 @@
                 <div class="flex justify-between">
                     <span class="inline-flex text-base text-black js-providerTitle">x</span>
                     <div class="flex float-right">
-                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
+                        {{> components/forms/components/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all" _screenReaderText="alle aktivieren/deaktivieren"}}
                     </div>
                 </div>
             </div>
@@ -96,7 +96,7 @@
                         <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3]">
                             <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
                             <div class="flex float-right">
-                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
+                                {{> components/forms/components/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _whitelisted=this.isInitiallyHidden _screenReaderText=(loca "screen_reader_text_external_anbieter" this.key)}}
                             </div>
                         </li>
                     {{/each}}

package/{src/stories/views/components/forms → dist/views_static/components/forms/components}/choice.hbs

@@ -12,7 +12,7 @@
 <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-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error': hideDescription() }"
+            :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}
       {{#if _inGroup }}
          {{#if _required}}
@@ -80,7 +80,7 @@
          <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" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+         <div class="hidden text-xs text-error dark:text-error-dark" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
       {{/if}}
    </div>
 {{/unless}}