hr-design-system-handlebars 1.114.112 → 1.114.113

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.114.113 (Fri Feb 28 2025)
+
+#### 🐛 Bug Fix
+
+- Search form fixes [#1254](https://github.com/mumprod/hr-design-system-handlebars/pull/1254) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.114.112 (Wed Feb 26 2025)
 
 #### ⚠️ Pushed to `main`

package/build/handlebars/helpers/handlebar-helpers.js

@@ -262,7 +262,7 @@ var helpers = {
         if (text.includes('suche/index~suggest.jsp'))
             resourceUrl = text.replace(
                 'suche/index~suggest.jsp',
-                'https://hessenschau-dev-red.hr.de/suche/index~suggest.jsp'
+                'https://www-hessenschau.dev-ext.hrcms.gcp.cloud.hr.de/suche/index~suggest.jsp'
             )
 
         return resourceUrl

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hessenschau . d e",
-	"meta_application_name": "hessenschau.de"
+	"meta_application_name": "hessenschau.de",
+	"website_name_search_button": "hessenschau.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr . d e",
-	"meta_application_name": "hr.de"
+	"meta_application_name": "hr.de",
+	"website_name_search_button": "hr.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-bigband . d e",
-	"meta_application_name": "hr-bigband.de"
+	"meta_application_name": "hr-bigband.de",
+	"website_name_search_button": "hr-bigband.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-fernsehen . d e",
-	"meta_application_name": "hr-fernsehen.de"
+	"meta_application_name": "hr-fernsehen.de",
+	"website_name_search_button": "hr-fernsehen.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-inforadio . d e",
-	"meta_application_name": "hr-inforadio.de"
+	"meta_application_name": "hr-inforadio.de",
+	"website_name_search_button": "hr-inforadio.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-rundfunkrat . d e",
-	"meta_application_name": "hr-rundfunkrat.de"
+	"meta_application_name": "hr-rundfunkrat.de",
+	"website_name_search_button": "hr-rundfunkrat.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-sinfonieorchester . d e",
-	"meta_application_name": "hr-sinfonieorchester.de"
+	"meta_application_name": "hr-sinfonieorchester.de",
+	"website_name_search_button": "hr-sinfonieorchester.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr-werbung . d e",
-	"meta_application_name": "hr-werbung.de"
+	"meta_application_name": "hr-werbung.de",
+	"website_name_search_button": "hr-werbung.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr1 . d e",
-	"meta_application_name": "hr1.de"
+	"meta_application_name": "hr1.de",
+	"website_name_search_button": "hr1.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr2 . d e",
-	"meta_application_name": "hr2.de"
+	"meta_application_name": "hr2.de",
+	"website_name_search_button": "hr2.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr3 . d e",
-	"meta_application_name": "hr3.de"
+	"meta_application_name": "hr3.de",
+	"website_name_search_button": "hr3.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite hr4 . d e",
-	"meta_application_name": "hr4.de"
+	"meta_application_name": "hr4.de",
+	"website_name_search_button": "hr4.de"
 }

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

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite you-fm . d e",
-	"meta_application_name": "you-fm.de"
+	"meta_application_name": "you-fm.de",
+	"website_name_search_button": "you-fm.de"
 }

package/dist/assets/index.css

@@ -1221,6 +1221,9 @@ article #commentList {
 .top-10 {
   top: 2.5rem;
 }
+.top-11\.5 {
+  top: 2.875rem;
+}
 .top-14 {
   top: 3.5rem;
 }
@@ -2656,6 +2659,11 @@ article #commentList {
   border-bottom-color: #606060;
   border-bottom-color: var(--color-secondary-ds);
 }
+.border-r-gray-mercury {
+  --tw-border-opacity: 1;
+  border-right-color: rgba(230, 230, 230, 1);
+  border-right-color: rgba(230, 230, 230, var(--tw-border-opacity));
+}
 .border-t-transparent {
   border-top-color: transparent;
 }
@@ -3844,12 +3852,15 @@ article #commentList {
 .border-t-transparent {
   border-top-color: transparent;
 }
+.border-r-gray-mercury {
+  border-right-color: #E6E6E6;
+}
 .border-b-secondary {
   border-bottom-color: #606060;
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1740588087735;
+  counter-reset: cnt1740759091674;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4294,7 +4305,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1740588087735 1;
+  counter-increment: cnt1740759091674 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4312,7 +4323,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1740588087735);
+  content: counter(cnt1740759091674);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -7031,10 +7042,6 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-left: 1.531rem;
   }
 
-  .sm\:mr-4 {
-    margin-right: 1rem;
-  }
-
   .sm\:mr-5 {
     margin-right: 1.25rem;
   }

package/dist/views/components/page/search/search_form.hbs

@@ -1,40 +1,143 @@
 <form id="search_form" method="GET" action="#">
-            <div class="relative flex flex-col px-2 pt-6 pb-6 mt-8 mb-8 sm:flex-row sm:px-4 bg-highlight-1 dark:bg-highlight-1-dark sm:pt-6 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
-                <div class="relative h-12 sm:mr-4 basis-full width-full">
-                    {{~> components/forms/components/input
-                            _locaKey="search_form_label_searchTerm"
-                            _name="query"
-                            _label="Suchbegriff"
-                            _labelClass=""
-                            _description=""
-                            _type="text"
-                            _value=this.queryString
-                            _autocompleteOff=true
-                            _autoSuggestFeature=true
-                    }}
-                </div>
-                <div class="relative flex h-12 basis-full width-full">
-                    <div class="relative h-12 basis-full">
-                        <select 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 pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none border-form-highlight dark:border-form-highlight-dark"  id="select_search" title="" name="all" isFocused="false">
-                            <option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
-                                    "website_name_search_button"}}</option>
-                            <option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
-                                    "search_select_all"}}</option>
-                        </select>
-                        <label for="select_search" 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 ">
-                            {{loca "search_form_label_searchType"}}
-                        </label>
-                        <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="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
-                        </div>
-                    </div>
-                    <div class="relative">
-                        <button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
-                                class="inline-flex items-center justify-center order-2 w-12 h-12 border rounded-r cursor-pointer ds-button font-heading text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark active:scale-95 min-w-11">
-                            {{> components/base/image/icon _icon="suche" _addClass="sb-icon w-5 h-5 fill-white dark:fill-text-dark"}}
-                            <span class="hide">{{loca "search_button_label"}}</span>
-                        </button>
-                    </div>
+    <div class="relative flex flex-col px-2 pt-6 pb-6 mt-8 mb-8 sm:flex-row sm:px-4 bg-highlight-1 dark:bg-highlight-1-dark sm:pt-6 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
+        <div class="relative h-12 basis-full width-full "  x-data="searchSuggest()">
+            <div id="search-content"
+                @click.away="active=false; cursorIndex=-1"
+                @keydown.arrow-down="moveDownList()"
+                @keydown.arrow-up="moveUpList()"
+            >     
+                <input 
+                    @input.debounce="getSuggestionsForInput();cursorIndex=-1"
+                    @click="active=true" 
+                    name="query" 
+                    x-model="query"
+                    placeholder='{{loca "search_input_placeholder" }}' 
+                    class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white border-r border-r-gray-mercury placeholder:select-none 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"
+                    type="text"
+                    id="searchInput--{{nextRandom}}"
+                    autocomplete="off"
+                    role="combobox" 
+                    aria-haspopup="listbox" 
+                    aria-autocomplete="list" 
+                    x-effect="$el.setAttribute('aria-expanded', (query.length > 1 && active && suggestions.length > 0))"
+                    title="{{loca 'search_form_label_searchTerm'}}"
+                    placeholder="{{loca 'search_form_label_searchTerm'}}"
+                    
+                > 
+                <label for="searchInput--{{getRandom}}"
+                        class="{{_labelClass}} peer-placeholder-shown:whitespace-nowrap {{> components/forms/components/labelClasses }}">
+                    {{loca "search_form_label_searchTerm" }}
+                </label>
+                <div 
+                    class="absolute left-0 w-auto min-w-full z-100 top-11.5" 
+                    x-show="query.length > 1 && active && suggestions.length"
+                    x-cloak
+                    x-transition:leave="transition ease-in duration-100"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                >
+                    <ul 
+                        role="listbox" 
+                        id="suggestionlist--{{getRandom}}" 
+                        aria-label="Suche öffnen"
+                        x-effect="$el.setAttribute('aria-expanded', query.length > 1 && active && suggestions.length > 0);$el.setAttribute('aria-hidden', !(query.length > 1 && active && suggestions.length > 0))"
+                        class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl"
+                        x-ref="list"
+                    >
+                        
+                        <template x-for="(suggestion, index) in suggestions" :key="index">
+                            <li class="first-of-type:border-none">
+                                <a  
+                                    x-bind:active="false"
+                                    x-bind:href="'{{resourceUrl "suche/index.nocache"}}?query=' + suggestion"
+                                    x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full text-secondary rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
+                                >
+                                    <span x-text="suggestion"></span>
+                                </a>
+                            </li>
+                        </template>
+                        
+                    </ul>
+                </div> 
+            </div>
+            <script type="text/javascript">
+
+                function searchSuggest() {
+
+                    return {
+                        active:true,
+                        cursorIndex: -1,
+                        query: "",
+                        suggestions: [],
+
+                        getSuggestionsForInput() {
+
+                            suggestionDataUrl = '{{resourceUrl "suche/index~suggest.jsp"}}' + '?suggestions=' + this.query;
+
+                            fetch(suggestionDataUrl)
+
+                                .then((res) =>{  return res.text()})
+
+                                .then((data) => {
+                                    data = JSON.parse(data.replace(/&quot;/g, '"'))
+                                    data.solrSuggestions = this.filterStartwith(data.solrSuggestions, this.query)
+                                    this.suggestions= this.filterSortbylength(data.solrSuggestions)
+                                });
+
+                        },
+
+                        filterStartwith(data, query) {
+                        return data.filter(Suggestion => Suggestion.toLowerCase().startsWith(query.toLowerCase().trim()))
+                        },
+
+                        filterSortbylength(data) {
+                        return data.sort((a, b) => a.length - b.length)
+                        },
+
+                        moveDownList() {
+                                if (this.suggestions.length > 0 && this.cursorIndex < this.suggestions.length - 1) 
+                                {
+                                    this.cursorIndex++;
+                                    this.query = this.suggestions[this.cursorIndex];
+                                }
+                        },
+
+                        moveUpList() {
+                                if (this.suggestions.length > 0 && this.cursorIndex > 0) 
+                                {
+                                    this.cursorIndex--;
+                                    this.query = this.suggestions[this.cursorIndex];
+                                }
+                        },
+
+                    };
+
+                }
+
+            </script>
+        </div>
+        <div class="relative flex h-12 basis-full width-full">
+            <div class="relative h-12 basis-full">
+                <select 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 pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none border-form-highlight dark:border-form-highlight-dark"  id="select_search" title="" name="all" isFocused="false">
+                    <option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
+                            "website_name_search_button"}}</option>
+                    <option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
+                            "search_select_all"}}</option>
+                </select>
+                <label for="select_search" 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 ">
+                    {{loca "search_form_label_searchType"}}
+                </label>
+                <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="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
                 </div>
             </div>
-        </form>
+            <div class="relative">
+                <button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
+                        class="inline-flex items-center justify-center order-2 w-12 h-12 border rounded-r cursor-pointer ds-button font-heading text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark active:scale-95 min-w-11">
+                    {{> components/base/image/icon _icon="suche-ds" _addClass="sb-icon w-7 h-7 fill-white dark:fill-text-dark"}}
+                    <span class="sr-only">{{loca "search_input_aria_submit" }}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</form>