@salla.sa/twilight-components 2.14.557 → 2.14.559

package/dist/cjs/salla-rating-modal.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var checkCircle2 = require('./check-circle2-BDvlT4_n.js');
 var image = require('./image-BoZ6Hums.js');

package/dist/cjs/salla-review-factors-tags.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 var star2 = require('./star2-R146a27p.js');
 var helpers = require('./helpers-ClOJIAG8.js');
 

package/dist/cjs/salla-review-order-item.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 var helpers = require('./helpers-ClOJIAG8.js');
 
 const SallaReviewOrderItem = class {

package/dist/cjs/salla-scopes.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 var search = require('./search-c7Aa7lM9.js');
 
 var StoreAlt = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-search.cjs.entry.js

@@ -3,21 +3,147 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 var search = require('./search-c7Aa7lM9.js');
+var cancel = require('./cancel-De6vslRA.js');
+var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
 var Helper = require('./Helper-N5wrs9vm.js');
 require('./anime.es-BqW8JHZi.js');
 
-const sallaSearchCss = "/*!twlt*/.s-search-placeholder-wrapper{position:relative;display:inline-block}.s-search-input-wrapper{position:relative}.s-search-placeholder-trigger{cursor:pointer;appearance:none;text-align:start}.block{display:block}.inline{display:inline}.border{border-width:1px}.s-search-container{position:relative;z-index:99;max-height:14rem;border-radius:0.375rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-search-oval{border-radius:20px}.s-search-inline{min-width:220px}.s-search-container-open{max-height:24rem;border-radius:0px !important}.s-search-container-open .s-search-input{border-top-left-radius:0.375rem !important;border-top-right-radius:0.375rem !important;border-bottom-right-radius:0px !important;border-bottom-left-radius:0px !important;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-search-no-results .s-search-input{border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-search-input{height:2.5rem;width:100%;border-radius:0.375rem;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-top:0px;padding-bottom:0.125rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-input:focus{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-ring-color:transparent}.s-search-input:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:2.5rem}.s-search-input:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:2.5rem}.s-search-icon-wrap{position:absolute;top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-icon-wrap:where([dir=\"ltr\"],[dir=\"ltr\"] *){left:1rem}.s-search-icon-wrap:where([dir=\"rtl\"],[dir=\"rtl\"] *){right:1rem}.s-search-icon svg{height:1rem;width:1rem;fill:#9ca3af}.s-search-spinner-loader{display:block;height:1rem;width:1rem}@keyframes spin{to{transform:rotate(360deg)}}.s-search-spinner-loader{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));border-right-color:var(--color-primary)}.s-search-results{position:absolute;margin:auto;max-height:24rem;width:100%;max-width:100%;overflow-y:auto;border-bottom-right-radius:0.375rem;border-bottom-left-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.s-search-no-results{border-bottom-right-radius:0px !important;border-bottom-left-radius:0px !important}.s-search-no-results-placeholder{padding:1rem;text-align:center;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-product{display:flex;height:100%;justify-content:space-around;overflow:hidden;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));background-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-product:last-child{border-bottom-width:0px}.s-search-product:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (min-width: 480px){.s-search-product{padding-left:1.25rem;padding-right:1.25rem}}.s-search-product-image-container{position:relative;height:3.5rem;width:5rem;overflow:hidden;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-search-product-image{position:relative;height:100%;width:100%;object-fit:cover;font-size:0px}.s-search-product-image::before{position:absolute;top:0px;left:0px;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-search-product-details{flex:1 1 0%;padding-top:0.25rem}.s-search-product-details:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:1rem}@media (min-width: 480px){.s-search-product-details:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:1.25rem}}.s-search-product-details:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:1rem}@media (min-width: 480px){.s-search-product-details:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:1.25rem}}.s-search-product-title{margin-bottom:0.375rem;display:flex;flex-direction:column;align-items:baseline;justify-content:flex-start;font-size:0.875rem;font-weight:700;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-product-price{display:flex;width:100%;align-items:center;font-size:0.875rem;line-height:1.25rem;font-weight:700;color:var(--color-primary)}.s-search-product-regular-price{padding-left:0.75rem;padding-right:0.75rem;font-weight:500;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));text-decoration-line:line-through}.s-search-product-not-available{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-search-action{position:absolute;height:100%}.s-search-action:where([dir=\"ltr\"],[dir=\"ltr\"] *){right:0px}.s-search-action:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px}.s-search-action-oval:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-right-radius:9999px;border-bottom-right-radius:9999px}.s-search-action-oval:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-left-radius:9999px;border-bottom-left-radius:9999px}.s-search-input-wrapper{position:relative;display:flex;flex-grow:1;align-items:center}.s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}.s-search-modal .s-modal-spacer{display:inline}.s-search-modal .s-modal-body{padding:0;width:700px;max-width:90%;margin-top:3.2rem;border-radius:0.5rem;background:transparent;overflow:visible;position:relative !important}.s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}";
+const NEW_SEARCH_FEATURE_FLAG = 'new-search-ui-enabled';
+const SEARCH_HISTORY_KEY = 'salla::search-history';
+const SEARCH_HISTORY_LIMIT = 10;
+// Multi-market stores scope search history per market via the `scope` query param.
+function getSearchHistoryKey() {
+    if (typeof window === 'undefined') {
+        return SEARCH_HISTORY_KEY;
+    }
+    const scope = new URLSearchParams(window.location.search).get('scope');
+    return scope ? `${SEARCH_HISTORY_KEY}-${scope}` : SEARCH_HISTORY_KEY;
+}
+const DEFAULT_LABELS = {
+    searchPlaceholder: '',
+    noOptions: '',
+    outOfStock: '',
+    close: '',
+    back: '',
+    remove: '',
+    searchHistory: '',
+    trendingCategories: '',
+    mostSearched: '',
+    searchSuggestions: '',
+    categories: '',
+    searchResults: '',
+    searchViewAllTemplate: '',
+};
+// Labels not yet in the central translation files - seeded via addBulk only when missing.
+const TRANSLATION_DEFAULTS = {
+    'common.elements.search_history': { ar: 'آخر ما تم البحث عنه', en: 'Recently Searched' },
+    'common.elements.trending_categories': {
+        ar: 'التصنيفات الأكثر بحثاً',
+        en: 'Trending categories',
+    },
+    'common.elements.most_searched': { ar: 'الأكثر بحثاً', en: 'Most searched' },
+    'common.elements.search_suggestions': { ar: 'اقتراحات البحث', en: 'Search suggestions' },
+    'common.elements.categories': { ar: 'التصنيفات', en: 'Categories' },
+    'common.elements.search_results': { ar: 'نتائج البحث', en: 'Search results' },
+    'common.elements.search_view_all': {
+        ar: 'عرض كل النتائج لـ ":word"',
+        en: 'View all results for ":word"',
+    },
+};
+function isNewSearchFeatureEnabled() {
+    const flag = salla.storage.get(NEW_SEARCH_FEATURE_FLAG, false);
+    return flag === true || flag === 'true';
+}
+function getSearchResultsUrl(term) {
+    return salla.url.get('search?q=' + encodeURI(term));
+}
+function loadSearchHistory() {
+    const key = getSearchHistoryKey();
+    const stored = salla.storage.get(key, []);
+    return Array.isArray(stored) ? stored.filter(term => typeof term === 'string') : [];
+}
+function saveSearchHistory(history) {
+    const key = getSearchHistoryKey();
+    salla.storage.set(key, history);
+}
+function addToSearchHistory(history, term) {
+    const trimmed = term.trim();
+    if (!trimmed) {
+        return history;
+    }
+    const withoutDuplicate = history.filter(existing => existing.toLowerCase() !== trimmed.toLowerCase());
+    return [trimmed, ...withoutDuplicate].slice(0, SEARCH_HISTORY_LIMIT);
+}
+function registerTranslationDefaults() {
+    if (!salla?.lang?.addBulk) {
+        return;
+    }
+    const missing = Object.entries(TRANSLATION_DEFAULTS).reduce((acc, [key, value]) => {
+        if (salla.lang.get(key) === key) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+    if (Object.keys(missing).length) {
+        salla.lang.addBulk(missing);
+    }
+}
+function loadLabels() {
+    return {
+        searchPlaceholder: salla.lang.get('blocks.header.search_placeholder'),
+        noOptions: salla.lang.get('common.elements.no_options'),
+        outOfStock: salla.lang.get('pages.products.out_of_stock'),
+        close: salla.lang.get('common.elements.close'),
+        back: salla.lang.get('common.elements.back'),
+        remove: salla.lang.get('common.elements.remove'),
+        searchHistory: salla.lang.get('common.elements.search_history'),
+        trendingCategories: salla.lang.get('common.elements.trending_categories'),
+        mostSearched: salla.lang.get('common.elements.most_searched'),
+        searchSuggestions: salla.lang.get('common.elements.search_suggestions'),
+        categories: salla.lang.get('common.elements.categories'),
+        searchResults: salla.lang.get('common.elements.search_results'),
+        searchViewAllTemplate: salla.lang.get('common.elements.search_view_all'),
+    };
+}
+function getDefaultProductSlot() {
+    return ('<div class="s-search-product-image-container">' +
+        '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
+        '</div>' +
+        '<div class="s-search-product-details">' +
+        '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
+        '</div>');
+}
+
+const sallaSearchCss = "/*!twlt*/.s-search-placeholder-wrapper{position:relative;display:inline-block}.s-search-input-wrapper{position:relative}.s-search-placeholder-trigger{cursor:pointer;appearance:none;text-align:start}.visible{visibility:visible}.block{display:block}.inline{display:inline}.hidden{display:none}.border{border-width:1px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-search-container{position:relative;z-index:99;max-height:14rem;border-radius:0.375rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.s-search-oval{border-radius:20px}.s-search-inline{min-width:220px}.s-search-container-open{max-height:24rem;border-radius:0px !important}.s-search-container-open .s-search-input{border-top-left-radius:0.375rem !important;border-top-right-radius:0.375rem !important;border-bottom-right-radius:0px !important;border-bottom-left-radius:0px !important;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-search-no-results .s-search-input{border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.s-search-input{height:2.5rem;width:100%;border-radius:0.375rem;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-top:0px;padding-bottom:0.125rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-input:focus{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-ring-color:transparent}.s-search-input:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:2.5rem}.s-search-input:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:2.5rem}.s-search-modal-new .s-search-input{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-search-icon-wrap{position:absolute;top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-icon-wrap:where([dir=\"ltr\"],[dir=\"ltr\"] *){left:1rem}.s-search-icon-wrap:where([dir=\"rtl\"],[dir=\"rtl\"] *){right:1rem}.s-search-icon svg{height:1rem;width:1rem;fill:#9ca3af}.s-search-spinner-loader{display:block;height:1rem;width:1rem}@keyframes spin{to{transform:rotate(360deg)}}.s-search-spinner-loader{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));border-right-color:var(--color-primary)}.s-search-results{position:absolute;margin:auto;max-height:24rem;width:100%;max-width:100%;overflow-y:auto;border-bottom-right-radius:0.375rem;border-bottom-left-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.s-search-no-results{border-bottom-right-radius:0px !important;border-bottom-left-radius:0px !important}.s-search-no-results-placeholder{grid-column:1 / -1;padding:1rem;text-align:center;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-product{display:flex;height:100%;justify-content:space-around;overflow:hidden;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));background-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-product:last-child{border-bottom-width:0px}.s-search-product:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (min-width: 480px){.s-search-product{padding-left:1.25rem;padding-right:1.25rem}}.s-search-product-image-container{position:relative;height:3.5rem;width:5rem;overflow:hidden;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-search-product-image{position:relative;height:100%;width:100%;object-fit:cover;font-size:0px}.s-search-product-image::before{position:absolute;top:0px;left:0px;height:100%;width:100%;--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));--tw-content:'';content:var(--tw-content)}.s-search-product-details{flex:1 1 0%;padding-top:0.25rem}.s-search-product-details:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:1rem}@media (min-width: 480px){.s-search-product-details:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:1.25rem}}.s-search-product-details:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:1rem}@media (min-width: 480px){.s-search-product-details:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:1.25rem}}.s-search-product-title{margin-bottom:0.375rem;display:flex;flex-direction:column;align-items:baseline;justify-content:flex-start;font-size:0.875rem;font-weight:700;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-product-price{display:flex;width:100%;align-items:center;font-size:0.875rem;line-height:1.25rem;font-weight:700;color:var(--color-primary)}.s-search-product-regular-price{padding-left:0.75rem;padding-right:0.75rem;font-weight:500;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));text-decoration-line:line-through}.s-search-product-not-available{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-search-action{position:absolute;height:100%}.s-search-action:where([dir=\"ltr\"],[dir=\"ltr\"] *){right:0px}.s-search-action:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px}.s-search-action-oval:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-right-radius:9999px;border-bottom-right-radius:9999px}.s-search-action-oval:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-left-radius:9999px;border-bottom-left-radius:9999px}.s-search-input-row{display:flex;align-items:center;gap:0.25rem}.s-search-back-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0.25rem;line-height:1;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-search-back-btn:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.s-search-back-btn{display:none}}.s-search-back-btn svg{height:1.5rem;width:1.5rem;fill:#6b7280}.s-search-input-wrapper{position:relative;display:flex;flex-grow:1;align-items:center}.s-search-input-clearable:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-right:2.25rem}.s-search-input-clearable:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-left:2.25rem}.s-search-input-clearable::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.s-search-clear-icon{position:absolute;top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));padding:0.25rem;line-height:1;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-clear-icon:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-clear-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){right:0.75rem}.s-search-clear-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:0.75rem}.s-search-clear-icon svg{height:1rem;width:1rem;fill:#9ca3af}.s-search-panel{display:flex;flex-direction:column;gap:0.75rem;padding:0px}@media (min-width: 640px){.s-search-panel{padding:1rem}}.s-search-results-body{display:flex;max-height:24rem;gap:0.75rem;overflow-y:auto}.s-search-results-grid-wrap{min-width:0px;flex:1 1 0%}.s-search-results-grid{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));align-content:flex-start;column-gap:0.75rem;row-gap:0.25rem}@media (min-width: 640px){.s-search-results-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}.s-search-grid-item{cursor:pointer;border-radius:0.375rem;padding:0.25rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-search-grid-item:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.s-search-grid-item .s-product-card-out-badge{--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1));--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.s-search-view-all{display:flex;flex-shrink:0;align-items:center;justify-content:center;gap:0.25rem;border-top-width:1px;--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1));padding-top:0.75rem;text-align:center;font-size:0.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-search-view-all:hover{text-decoration-line:underline}.s-search-view-all-icon{line-height:1}.s-search-view-all-icon svg{height:1rem;width:1rem;fill:#6b7280}.s-search-sidebar{width:7rem;flex-shrink:0}.s-search-sidebar>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.s-search-sidebar{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}@media (min-width: 480px){.s-search-sidebar{width:8rem}}.s-search-sidebar:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-right-width:1px;padding-right:0.75rem}.s-search-sidebar:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-left-width:1px;padding-left:0.75rem}.s-search-idle-panel{max-height:24rem;min-height:6rem}.s-search-idle-panel>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.s-search-idle-panel{overflow-y:auto}.s-search-idle-section-title{margin-bottom:0.5rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-history-list{display:flex;flex-wrap:wrap;gap:0.5rem}.s-search-history-chip{display:inline-flex;align-items:center;gap:0.375rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));padding-top:0.375rem;padding-bottom:0.375rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-history-chip:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-left:0.75rem;padding-right:0.5rem}.s-search-history-chip:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-right:0.75rem;padding-left:0.5rem}.s-search-history-chip-term{line-height:1}.s-search-history-chip-remove svg{height:0.625rem;width:0.625rem;fill:#9ca3af}.s-search-idle-categories-list{display:flex;flex-wrap:wrap;gap:0.5rem}.s-search-idle-category-chip{display:inline-flex;align-items:center;gap:0.25rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-idle-category-chip:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.s-search-idle-category-count{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-search-most-searched-list{display:flex;flex-direction:column}.s-search-most-searched-item{display:flex;width:100%;align-items:center;gap:0.5rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-search-most-searched-item:hover{color:var(--color-primary)}.s-search-most-searched-icon svg{height:0.875rem;width:0.875rem;fill:#9ca3af}@media (min-width: 640px){.s-search-modal .s-modal-wrapper{align-items:flex-start;padding:0}.s-search-modal .s-modal-spacer{display:inline}}@media (max-width: 639px){.s-search-modal .s-modal-body{height:100dvh;max-height:100dvh !important}}@media (min-width: 640px){.s-search-modal .s-modal-body{padding:0;width:700px;max-width:90%;margin-top:3.2rem;border-radius:0.5rem;background:transparent;overflow:visible;position:relative !important}}.s-search-modal .s-modal-close{top:50%;transform:translateY(-50%)}@media (min-width: 640px){.s-search-modal.s-search-modal-new .s-modal-body{background:white;overflow:hidden;width:1100px;max-width:95%}}";
 
 const SallaSearch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.newSearchEnabled = isNewSearchFeatureEnabled();
         this.inputValue = '';
+        this.hasTrackedFocus = false;
         this.translationLoaded = false;
+        this.labels = DEFAULT_LABELS;
         this.loading = false;
         this.typing = false;
         this.debounce = setTimeout(() => '', 1000);
+        this.search_term = '';
+        this.hasInputValue = false;
+        this.searchHistory = loadSearchHistory();
+        /**
+         * Most-searched categories to surface before the customer types a query.
+         * Not wired to a live endpoint yet - stays empty (and hidden) until a future
+         * story populates it.
+         */
+        this.trendingCategories = [];
+        /**
+         * Most-searched terms, reused both as the pre-search "most searched" list and
+         * as the results-view "search suggestions" sidebar. Same not-wired-yet status
+         * as trendingCategories.
+         */
+        this.mostSearchedTerms = [];
         /**
          * Set the component to display as a placeholder (button) that will open the modal. Defaults to `false`
          */
@@ -42,37 +168,72 @@ const SallaSearch = class {
          * Show submit action buttons at the end.
          */
         this.showAction = false;
+        this.tracking = {
+            searchFocus: () => {
+                if (this.hasTrackedFocus) {
+                    return;
+                }
+                this.hasTrackedFocus = true;
+                salla.event.emit('salla-search::input.focused');
+            },
+            productClick: (product, position) => {
+                salla.event.emit('salla-search::product.clicked', [{ product, position }]);
+            },
+            recommendationClick: (term, source) => {
+                salla.event.emit('salla-search::recommendation.clicked', { term, source });
+            },
+        };
         this.productSlot =
-            this.host.querySelector('[slot="product"]')?.innerHTML || this.getDefaultProductSlot();
+            this.host?.querySelector('[slot="product"]')?.innerHTML || getDefaultProductSlot();
         salla.event.on('search::open', () => this.open());
-        salla.lang.onLoaded(() => {
-            this.translationLoaded = true;
-        });
         salla.event.on('modalClosed', () => this.onModalClose());
     }
     async open() {
-        if (!this.inline) {
-            await this.modal.open().then(() => setTimeout(() => this.searchInput.focus(), 300));
+        if (this.newSearchEnabled || !this.inline) {
+            await this.modal?.open().then(() => setTimeout(() => this.searchInput?.focus(), 300));
         }
     }
     onModalClose() {
-        this.searchInput.value = '';
+        if (this.searchInput) {
+            this.searchInput.value = '';
+        }
         this.results = undefined;
+        this.hasInputValue = false;
         this.afterSearching();
-        this.container.classList.remove('s-search-no-results');
+        this.container?.classList.remove('s-search-no-results');
     }
     handleKeyDown(ev) {
         if (ev.key === 'Enter' && this.search_term?.length) {
-            window.location.href = salla.url.get('search?q=' + encodeURI(this.search_term));
+            window.location.href = getSearchResultsUrl(this.search_term);
+        }
+    }
+    clearSearch() {
+        if (this.searchInput) {
+            this.searchInput.value = '';
+        }
+        this.hasInputValue = false;
+        this.search_term = '';
+        this.searchInput?.focus();
+    }
+    removeFromSearchHistory(term) {
+        this.searchHistory = this.searchHistory.filter(existing => existing !== term);
+        saveSearchHistory(this.searchHistory);
+        this.afterSearching(!this.results);
+    }
+    applySuggestedTerm(term, source) {
+        this.tracking.recommendationClick(term, source);
+        if (this.searchInput) {
+            this.searchInput.value = term;
         }
+        this.hasInputValue = true;
+        this.search_term = term;
+        this.searchInput?.focus();
     }
-    getDefaultProductSlot() {
-        return ('<div class="s-search-product-image-container">' +
-            '  <img class="s-search-product-image" src="{image}" alt="{name}"/>' +
-            '</div>' +
-            '<div class="s-search-product-details">' +
-            '  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div>' +
-            '</div>');
+    async componentWillLoad() {
+        await salla.lang.onLoaded();
+        registerTranslationDefaults();
+        this.labels = loadLabels();
+        this.translationLoaded = true;
     }
     debounceSearch(event) {
         this.typing = true;
@@ -84,10 +245,13 @@ const SallaSearch = class {
     }
     limitWordsAndSearch(event) {
         let value = event.target.value;
+        this.hasInputValue = value.length > 0;
         const words = value.trim().split(/\s+/);
         if (words.length > this.maxWords) {
             const truncatedInput = words.slice(0, this.maxWords).join(' ');
-            this.searchInput.value = truncatedInput;
+            if (this.searchInput) {
+                this.searchInput.value = truncatedInput;
+            }
         }
         this.debounceSearch(event);
     }
@@ -111,7 +275,7 @@ const SallaSearch = class {
         }
     }
     search(val) {
-        this.noResults.style.display = 'none';
+        this.noResults && (this.noResults.style.display = 'none');
         //run loading spinner or stop it
         this.loading = true;
         salla.product
@@ -119,22 +283,29 @@ const SallaSearch = class {
             .then(response => {
             this.results = response;
             salla.event.emit('Products Searched', val);
+            if (this.newSearchEnabled) {
+                this.searchHistory = addToSearchHistory(this.searchHistory, val);
+                saveSearchHistory(this.searchHistory);
+            }
         })
             .catch(err => (err !== 'Query is same as previous one!' ? (this.results = undefined) : null))
             .finally(() => this.afterSearching(/*isEmpty*/ false));
     }
     afterSearching(isEmpty = true) {
-        this.noResults.style.display = isEmpty || this.results?.data.length > 0 ? 'none' : 'block';
-        Helper.Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => this.results?.data.length);
+        if (this.noResults) {
+            this.noResults.style.display = isEmpty || !!this.results?.data?.length ? 'none' : 'block';
+        }
+        // The new search experience is always a fully-visible modal panel (no collapsed/expanded
+        // input trick needed), so this open/no-results cosmetic toggle only applies to the legacy UI.
+        if (!this.newSearchEnabled) {
+            Helper.Helper.toggleElementClassIf(this.container, 's-search-container-open', 's-search-no-results', () => this.results?.data.length);
+        }
         this.loading = false;
         salla.product.api.previousQuery = ''; //avoid having error 'Query is same as previous one!' after reopen modal;
-        this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
+        this.inputValue.length < 3 ? this.container?.classList.remove('s-search-no-results') : '';
     }
-    render() {
-        const searchContent = (index.h("div", { key: 'ca8dec5eb90cd0893a1a3364df34ba0ee4d60891', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, index.h("div", { key: '212f8180ecca220a8b89231311dec6cdf3ef0b06', class: "s-search-input-wrapper" }, index.h("span", { key: '51fb0f9a2e342afd35eb82b57f55471aa9e1519f', class: "s-search-icon-wrap" }, index.h("span", { key: 'e75117068c51c6d200e8e20fa0f00ca02ed0c61d', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : search.Search })), index.h("input", { key: '442b1704b75a33e8c9e02da8200151a1d8e8db72', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => (this.searchInput = input), style: {
-                height: this.height + 'px',
-                borderRadius: this.oval ? this.height / 2 + 'px' : '',
-            } }), this.showAction ? (index.h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && index.h("span", { innerHTML: search.Search }))) : null), index.h("div", { key: 'f3b40ce4ec24678f6d8421f3da8ac9e1bd631c3a', class: "s-search-results" }, this.results?.data.map(product => (index.h("a", { href: product.url + '?from=search-bar', class: {
+    renderLegacyResults() {
+        return (index.h("div", { class: "s-search-results" }, this.results?.data.map(product => (index.h("a", { href: product.url + '?from=search-bar', class: {
                 's-search-product': true,
                 's-search-product-not-available': !product.is_available,
             }, innerHTML: this.productSlot
@@ -143,12 +314,83 @@ const SallaSearch = class {
                 .replace(/\{regular_price\}/g, product.is_on_sale && product.regular_price
                 ? salla.money(product.regular_price)
                 : '')
-                .replace(/\{image\}/g, product.image.url) }))), index.h("p", { key: 'fdbb21061c599a59c6d828eec80e8d591a708cca', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
-        const modalContent = (index.h("salla-modal", { key: 'ca90aea3fb92d1ba7d8270c26e2ecd82d5018784', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
-        const placeholderContent = (index.h("div", { key: '73333ce51cabadc4963a9fe9d1372bb7d63925c8', class: "s-search-placeholder-wrapper s-search-inline" }, index.h("div", { key: '77a66e9bba504557160c8c50d91f1216cc68f253', class: "s-search-input-wrapper" }, index.h("span", { key: '18fb5ce6e3e72874e76dd1ef2c6db8718a68f778', class: "s-search-icon-wrap" }, index.h("span", { key: '63b9e9af1c51647df734cc4d5cf7a825b922ce38', class: "s-search-icon", innerHTML: search.Search })), index.h("button", { key: 'b70169ed2d80ec2ad6b09952ad104824610212df', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                .replace(/\{image\}/g, product.image.url) }))), index.h("p", { ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, this.labels.noOptions)));
+    }
+    renderCategoriesSection(title) {
+        if (!this.trendingCategories.length) {
+            return null;
+        }
+        return (index.h("div", null, index.h("p", { class: "s-search-idle-section-title" }, title), index.h("div", { class: "s-search-idle-categories-list" }, this.trendingCategories.map(category => (index.h("a", { class: "s-search-idle-category-chip", href: category.url, onClick: () => this.tracking.recommendationClick(category.name, 'category') }, category.name, category.count ? (index.h("span", { class: "s-search-idle-category-count" }, category.count)) : null))))));
+    }
+    renderTermsSection(title, source) {
+        if (!this.mostSearchedTerms.length) {
+            return null;
+        }
+        return (index.h("div", null, index.h("p", { class: "s-search-idle-section-title" }, title), index.h("ul", { class: "s-search-most-searched-list" }, this.mostSearchedTerms.map(term => (index.h("li", null, index.h("button", { type: "button", class: "s-search-most-searched-item", onClick: () => this.applySuggestedTerm(term, source) }, index.h("span", { class: "s-search-most-searched-icon", innerHTML: search.Search }), term)))))));
+    }
+    renderSearchHistorySection() {
+        // Only in the empty/zero state - hidden as soon as there's input text or results.
+        if (!this.searchHistory.length || this.hasInputValue) {
+            return null;
+        }
+        return (index.h("div", null, index.h("p", { class: "s-search-idle-section-title" }, this.labels.searchHistory), index.h("div", { class: "s-search-history-list" }, this.searchHistory.map(term => (index.h("span", { class: "s-search-history-chip" }, index.h("button", { type: "button", class: "s-search-history-chip-term", onClick: () => this.applySuggestedTerm(term, 'history') }, term), index.h("button", { type: "button", class: "s-search-history-chip-remove", "aria-label": this.labels.remove, onClick: () => this.removeFromSearchHistory(term) }, index.h("span", { innerHTML: cancel.Cancel }))))))));
+    }
+    renderIdlePanel() {
+        // Always renders - even with nothing in history/trending yet - so the panel opens as a
+        // visible (if empty) container rather than disappearing until there's something to show.
+        return (index.h("div", { class: "s-search-idle-panel" }, this.renderSearchHistorySection(), this.renderCategoriesSection(this.labels.trendingCategories), this.renderTermsSection(this.labels.mostSearched, 'trending')));
+    }
+    renderResultsBody() {
+        // Search history never shows here (only in the empty/zero state), so the sidebar's
+        // visibility depends only on categories/terms - not the full idle-panel content check.
+        const hasSidebarContent = this.trendingCategories.length > 0 || this.mostSearchedTerms.length > 0;
+        return (index.h("div", { class: "s-search-results-body" }, hasSidebarContent ? (index.h("div", { class: "s-search-sidebar" }, this.renderTermsSection(this.labels.searchSuggestions, 'suggestion'), this.renderCategoriesSection(this.labels.categories))) : null, index.h("div", { class: "s-search-results-grid-wrap" }, index.h("p", { class: "s-search-idle-section-title" }, this.labels.searchResults), index.h("div", { class: "s-search-results-grid" }, this.results?.data.map((product, position) => (index.h("div", { class: "s-search-grid-item", onClick: () => this.tracking.productClick(product, position) }, index.h("salla-product-card", { product: { ...product, url: product.url + '?from=search-bar' }, horizontal: true, compact: true, "show-quantity": !product.is_available, "show-out-of-stock-beside-price": true, hideAddBtn: true })))), this.results?.data.length === 0 ? (index.h("p", { class: "s-search-no-results-placeholder" }, this.labels.noOptions)) : null))));
+    }
+    renderViewAllLink() {
+        if (!this.results?.data.length) {
+            return null;
+        }
+        return (index.h("a", { class: "s-search-view-all", href: getSearchResultsUrl(this.search_term) }, this.labels.searchViewAllTemplate.replace(':word', this.search_term), index.h("span", { class: "s-search-view-all-icon", innerHTML: salla.config.get('theme.is_rtl', true) ? keyboard_arrow_right.ArrowLeftIcon : keyboard_arrow_right.ArrowRightIcon })));
+    }
+    renderDropdown() {
+        if (!this.newSearchEnabled) {
+            return this.renderLegacyResults();
+        }
+        return this.results ? this.renderResultsBody() : this.renderIdlePanel();
+    }
+    renderInputWrapper() {
+        const inputWrapper = (index.h("div", { class: "s-search-input-wrapper" }, index.h("span", { class: "s-search-icon-wrap" }, index.h("span", { class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : search.Search })), index.h("input", { type: "search", enterkeyhint: "search", autocomplete: "off", class: { 's-search-input': true, 's-search-input-clearable': this.newSearchEnabled }, placeholder: this.labels.searchPlaceholder, onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.newSearchEnabled && this.tracking.searchFocus(), ref: input => (this.searchInput = input), style: {
                 height: this.height + 'px',
                 borderRadius: this.oval ? this.height / 2 + 'px' : '',
-            } }, salla.lang.get('blocks.header.search_placeholder'))), modalContent));
+            } }), this.newSearchEnabled && this.hasInputValue ? (index.h("button", { type: "button", class: "s-search-clear-icon", "aria-label": this.labels.close, onClick: () => this.clearSearch() }, index.h("span", { innerHTML: cancel.Cancel }))) : null, this.showAction ? (index.h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && index.h("span", { innerHTML: search.Search }))) : null));
+        if (!this.newSearchEnabled) {
+            return inputWrapper;
+        }
+        return (index.h("div", { class: "s-search-input-row" }, index.h("button", { type: "button", class: "s-search-back-btn", "aria-label": this.labels.back, onClick: () => this.modal?.close() }, index.h("span", { innerHTML: salla.config.get('theme.is_rtl', true)
+                ? keyboard_arrow_right.ArrowRightIcon
+                : keyboard_arrow_right.ArrowLeftIcon })), inputWrapper));
+    }
+    renderPlaceholderTrigger() {
+        return (index.h("div", { class: "s-search-input-wrapper" }, index.h("span", { class: "s-search-icon-wrap" }, index.h("span", { class: "s-search-icon", innerHTML: search.Search })), index.h("button", { type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                height: this.height + 'px',
+                borderRadius: this.oval ? this.height / 2 + 'px' : '',
+            } }, this.labels.searchPlaceholder)));
+    }
+    /**
+     * The new search UI is always a modal opened from a placeholder trigger (never inline,
+     * never a bare/self-triggering modal), with its own padded panel layout - the input and
+     * dropdown content share one bordered card instead of the legacy floating-dropdown look.
+     */
+    renderNewSearchExperience() {
+        return (index.h("div", { class: "s-search-placeholder-wrapper s-search-inline" }, this.renderPlaceholderTrigger(), index.h("salla-modal", { position: "top", class: "s-search-modal s-search-modal-new", "hide-close-button": true, ref: modal => (this.modal = modal) }, index.h("div", { class: "s-search-panel", ref: container => (this.container = container) }, this.renderInputWrapper(), this.renderDropdown(), this.renderViewAllLink()))));
+    }
+    render() {
+        if (this.newSearchEnabled) {
+            return this.renderNewSearchExperience();
+        }
+        const searchContent = (index.h("div", { class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, this.renderInputWrapper(), this.renderDropdown()));
+        const modalContent = (index.h("salla-modal", { position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
+        const placeholderContent = (index.h("div", { class: "s-search-placeholder-wrapper s-search-inline" }, this.renderPlaceholderTrigger(), modalContent));
         return this.placeholder ? (placeholderContent) : this.inline ? (index.h("div", { class: "s-search-modal" }, searchContent)) : (modalContent);
     }
     /**
@@ -156,7 +398,11 @@ const SallaSearch = class {
      */
     componentDidLoad() {
         this.afterSearching();
-        this.searchInput.value = this.getQueryParam('q');
+        const initialQuery = this.getQueryParam('q');
+        if (initialQuery && this.searchInput) {
+            this.searchInput.value = initialQuery;
+            this.hasInputValue = true;
+        }
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/salla-skeleton.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 
 const sallaSkeletonCss = "/*!twlt*/:host{display:block}.s-loyalty-skeleton .s-loyalty-prize-item .s-skeleton-wrapper{margin-left:auto;margin-right:auto}.s-skeleton-wrapper{display:block}@keyframes pulse{50%{opacity:.5}}.s-skeleton-wrapper{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.s-skeleton-item{height:100%;width:100%;border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.s-skeleton-item:is(.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.s-skeleton-item-circular{border-radius:9999px}";
 
@@ -28,7 +28,7 @@ const SallaSkeleton = class {
             's-skeleton-item': true,
             's-skeleton-item-circular': this.type == 'circle',
         };
-        return (index.h(index.Host, { key: '7b36da96585cfefe9aa96df6262be14f6a03c585', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, index.h("div", { key: '568ae1bc0aeae182bb32468b19601c0245e9617d', class: classes }, "\u00A0")));
+        return (index.h(index.Host, { key: '363b803ca0428a575313a96b569ddab7f67b3703', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, index.h("div", { key: 'bd1e4607e4753ef8b148a125b8d9bc60ca20dc72', class: classes }, "\u00A0")));
     }
 };
 SallaSkeleton.style = sallaSkeletonCss;

package/dist/cjs/salla-social-share.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var facebook = require('./facebook-DbXua6B9.js');
 var mail = require('./mail-CO8cFZH7.js');
@@ -383,7 +383,7 @@ const SallaSocialShare = class {
         })));
     }
     render() {
-        return (index.h("div", { key: 'cd2d10a50c7d07fb261471e7ca8e81891bc489e9', class: "s-social-share-wrapper" }, index.h("slot", { key: '94627cdb3aa11d3844c984d8890b13dc7e1f0e3c', name: "widget" }, index.h("salla-button", { key: '3b5ea25966484669a935e62ccbc3d383078337d8', "aria-label": "Share", onClick: () => this.handleShareClick(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, index.h("span", { key: '3de3ea0b6f4843a24eeab1f7d6f0be3c8f85de41', innerHTML: this.opened ? cancel.Cancel : ShareAlt }))), this.mode === 'modal' ? this.renderModal() : this.renderPopupList()));
+        return (index.h("div", { key: '4de560059da2e2dd232bbcd693cd8ad937da9c8e', class: "s-social-share-wrapper" }, index.h("slot", { key: '7ab0a6d03088e0c741c5f432c6c8991db1f0e7b8', name: "widget" }, index.h("salla-button", { key: '574fc864d8552114ead6061740581d72521fd38d', "aria-label": "Share", onClick: () => this.handleShareClick(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, index.h("span", { key: 'c8456382fec13bf8b9a429ca199780b242d7992e', innerHTML: this.opened ? cancel.Cancel : ShareAlt }))), this.mode === 'modal' ? this.renderModal() : this.renderPopupList()));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/salla-social.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 var facebook = require('./facebook-DbXua6B9.js');
 
 var instagram = `<!-- Generated by IcoMoon.io -->
@@ -57,7 +57,7 @@ const SallaSocial = class {
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (index.h(index.Host, { key: 'e7d69dbae46ef54588471875ada751103d14d393' }, index.h("ul", { key: 'ff4b15127e6664cca17fa7f6f49e4cda25829d74', class: "s-social-list" }, linksArray.map((link) => (index.h("li", { class: "s-social-link" }, index.h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (index.h(index.Host, { key: 'd084cee5461e8e68ca735b86b6d453fe761280ad' }, index.h("ul", { key: 'e83912816c1b2f2ec1f00f1991b2ca1afd21ffe5', class: "s-social-list" }, linksArray.map((link) => (index.h("li", { class: "s-social-link" }, index.h("div", { id: "social-slot", innerHTML: this.socialSlot
                 .replace(/\{icon\}/g, this.iconsList[link.type])
                 .replace(/\{type\}/g, link.type)
                 .replace(/\{link\}/g, link.value.toString()) })))))));

package/dist/cjs/salla-tab-content_3.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 
 const sallaTabContentCss = "";
 
@@ -33,7 +33,7 @@ const SallaTabContent = class {
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (index.h("div", { key: 'f5cfa9676bc8314149cb78e103b9ef580c0d7559', class: classes }, index.h("slot", { key: '1b86591377c09f1acb25cda20024b3af9c6a874d' })));
+        return (index.h("div", { key: '12884a255f05baac9d70e8b0d2144a369fdd3cfc', class: classes }, index.h("slot", { key: '331d86d51ec576614e69e7190ab3cd9c31ed9117' })));
     }
 };
 SallaTabContent.style = sallaTabContentCss;
@@ -92,7 +92,7 @@ const SallaTabHeader = class {
             's-tabs-active': this.isSelected,
         };
         return [
-            index.h("div", { key: 'a9548ed2a74d30e6fcf365dbe26aa5f7fdab2468', class: classes, onClick: this.onClick.bind(this) }, index.h("slot", { key: '547edd40aab5843c6035bd3c36a34d9449dc12d3' })),
+            index.h("div", { key: 'd9f961d47da1347b5b5f4677b3a3905f073b7b63', class: classes, onClick: this.onClick.bind(this) }, index.h("slot", { key: '056593968bd13d806fa34a481e5ab773e23e8084' })),
         ];
     }
 };
@@ -145,7 +145,7 @@ const SallaTabs = class {
     }
     render() {
         return [
-            index.h("div", { key: 'e9054cb114c2bd66940b6afa98d7c7c230353a74', class: "s-tabs" }, index.h("div", { key: 'd245f64aef9b7fd77c9c51eb1d86ddfd9202e5fb', class: "s-tabs-header" }, index.h("slot", { key: 'f1b9a982cd746d637db5d514cb691f188af0cb7e', name: "header" })), index.h("div", { key: '0ba8441707b087a8c4d068b1a72bf10c8efb41cc', class: "s-tabs-content-wrapper" }, index.h("slot", { key: 'afcee28724a5a9ce263fcc3a38d624a631069945', name: "content" })))
+            index.h("div", { key: '84647185ccebd52494bfff8cf9468a833dfda468', class: "s-tabs" }, index.h("div", { key: 'bfec0faae20e236920197fc9a518cb3fae7e820e', class: "s-tabs-header" }, index.h("slot", { key: '51c0297a5c75395e867e7621780fd030253393dc', name: "header" })), index.h("div", { key: 'b3c155ba7de23b62de2f23d0b3ac4232937f7a57', class: "s-tabs-content-wrapper" }, index.h("slot", { key: '2d1d90a7bed705c01efb05a8ab1ea5be543d71dc', name: "content" })))
         ];
     }
     get host() { return index.getElement(this); }

package/dist/cjs/salla-tiered-offer.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 
 var DiscountType;
 (function (DiscountType) {

package/dist/cjs/salla-tooltip.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 
 const sallaTooltipCss = "/*!twlt*/.s-tooltip-container{position:relative;display:inline-block}.s-tooltip-item{position:absolute;transform:translateX(-63%) translateY(-50%);background-color:var(--color-primary);color:var(--color-primary-reverse);bottom:100%;left:50%;text-align:center;border-radius:5px;z-index:1;white-space:nowrap;transition:opacity 0.3s;pointer-events:none;margin:0 0 16px 8px;padding:12px;max-width:150px;width:190px;white-space:normal;opacity:1}.s-tooltip-item::after{content:\"\";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--color-primary) transparent transparent transparent}.s-tooltip-item:dir(ltr){transform:translateX(-72%)}.s-tooltip-item--dark{background-color:#555555;color:white;padding:5px 15px;border-radius:8px;font-size:12px;font-weight:normal;max-width:330px;width:max-content}.s-tooltip-item--dark::after{border-color:#555555 transparent transparent transparent}.block{display:block}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}";
 
@@ -33,7 +33,7 @@ const SallaTooltip = class {
     }
     render() {
         const validTheme = ['default', 'dark'].includes(this.theme) ? this.theme : 'default';
-        return (index.h("div", { key: '84dfb23d4eb2689ff71b65c4a8b24dd36f8cb6ca', class: "s-tooltip-container" }, index.h("div", { key: '59d3bac320e20f99de1c4bf49531a61962190efc', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? index.h("span", null, this.text) : index.h("slot", null))));
+        return (index.h("div", { key: 'c2172752ccc5634d2223042d359571d4ba4e6816', class: "s-tooltip-container" }, index.h("div", { key: 'b37b92c725bdad1ff3fc10caedd2fe98b506f5e7', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? index.h("span", null, this.text) : index.h("slot", null))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/salla-trust-badges.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CyKUnNvM.js');
+var index = require('./index-CwneDx5o.js');
 
 const sallaTrustBadgesCss = "/*!twlt*/.s-trust-badges-wrapper{display:flex;align-items:center}.s-trust-badges-wrapper>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.s-trust-badges-wrapper:where([dir=\"rtl\"],[dir=\"rtl\"] *)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.s-trust-badges-label{margin-bottom:0.25rem;font-size:0.875rem;line-height:1.25rem}.s-trust-badges-number{font-size:0.875rem;line-height:1.25rem}";