@salla.sa/twilight-components 3.0.15 → 3.0.17

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-BAwxpXnB.js');
 var mail = require('./mail-CO8cFZH7.js');
 
 var AndroidPhoneIcon = `<!-- Generated by IcoMoon.io -->

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-BAwxpXnB.js');
 
 const sallaWalletCss = "/*!twlt*/@charset \"UTF-8\";.s-wallet-table{min-width:100%}.s-wallet-table-balance-container{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:1rem}.s-wallet-table-balance-icon{border-radius:50%;width:52px;height:52px;font-size:25px;padding:16px 13px;background:var(--color-primary-reverse);color:var(--color-primary)}.s-wallet-table-empty-state{display:flex;flex-direction:column;align-items:center}.s-wallet-table-empty-state i{font-size:80px;margin:4rem 0 2rem;color:var(--infinte-color)}.s-wallet-table-transaction-status{padding:6px 19px !important;border-radius:20px;width:max-content;display:flex;align-items:center}.s-wallet-table-transaction-status-default{background:#fff6eb;color:#a46f29}.s-wallet-table-transaction-status-cashback{background:#effbf6;color:#00af6c}.s-wallet-table-transaction-status-refund{background:#ecf3fe;color:#5196f3}.s-wallet-table-transaction-status-purchase{background:#feecec;color:#f55157}.s-wallet-table-transaction-status-icons-success{color:#00af6c}.s-wallet-summary{display:flex;align-items:stretch;gap:16px;margin-bottom:28px}.s-wallet-balance-card{flex:0 0 34%;max-width:240px;background:#fff;border-radius:12px;padding:20px;box-sizing:border-box}.s-wallet-balance-mark{width:48px;height:48px;border-radius:9999px;background:var(--color-primary-reverse, #eaf7f0);color:var(--color-primary, #2e8b57);display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}.s-wallet-balance-figure{font-size:18px;font-weight:700;color:#1c1c1c}.s-wallet-balance-label{margin-top:2px;font-size:12px;color:#9aa0a6}.s-wallet-amount{display:inline-flex;align-items:center;gap:4px;font-weight:700;white-space:nowrap}.s-wallet-amount-credit{color:#00af6c}.s-wallet-amount-debit{color:#f55157}.s-wallet-transaction-type{display:flex;align-items:center;color:#4b5563}@media screen and (min-width: 768px){.s-wallet-balance-card{display:flex;flex-direction:column;justify-content:center}}@media screen and (max-width: 767px){.s-wallet-summary{gap:12px;margin-bottom:20px}.s-wallet-balance-card{flex:0 0 38%;padding:16px;text-align:center}.s-wallet-balance-mark{margin-bottom:8px}}.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.table{display:table}.hidden{display:none}.items-center{align-items:center}.p-3{padding:0.75rem}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-normal{font-weight:400}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-wallet-container>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.625rem * var(--tw-space-y-reverse))}@media (min-width: 768px){.s-wallet-container>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}}.s-wallet-mobile-title{display:inline-block;width:8rem;font-weight:400;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}@media (min-width: 768px){.s-wallet-mobile-title{display:none}}.s-wallet-reference-id{display:none}@media (min-width: 768px){.s-wallet-reference-id{display:inline-block}}.s-wallet-buy-as-gift-icon{margin-left:0.25rem;margin-right:0.25rem;display:inline-block;color:var(--color-primary)}.s-wallet-copy-to-clipboard-button{display:flex;align-items:center}@media (min-width: 768px){.s-wallet-copy-to-clipboard-button{display:none}}.s-wallet-copy-to-clipboard-button salla-button{position:relative}.s-wallet-copy-to-clipboard-button-icon{pointer-events:none;font-size:0.75rem;line-height:1rem}.s-wallet-copy-to-clipboard-button-icon:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:0.25rem}.s-wallet-copy-to-clipboard-button-icon:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:0.25rem}@media (min-width: 768px){.s-wallet-status-container{margin-left:0px;margin-right:0px}}.s-wallet-status-container:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:auto}.s-wallet-status-container:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:auto}.s-wallet-status-container i{margin-top:0.25rem}.s-wallet-status-container i:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:0.25rem}.s-wallet-status-container i:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:0.25rem}.s-wallet-rated-text{--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.s-wallet-unrated-text{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.s-wallet-no-content{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding-top:2.5rem;padding-bottom:5rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-wallet-no-content .icon{margin-bottom:1rem;display:flex;height:8rem;width:8rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));font-size:3rem;line-height:1;--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.s-wallet-no-content p{margin-bottom:1rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-wallet-table{min-width:100%;border-collapse:separate}@media (min-width: 768px){.s-wallet-table{margin-bottom:-0.75rem;--tw-border-spacing-y:1.25rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}}.s-wallet-table-head{margin-bottom:1.25rem;display:none;--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}@media (min-width: 768px){.s-wallet-table-head{display:table-header-group}}.s-wallet-table-head-tr-th{padding-left:1.5rem;padding-right:1.5rem;text-align:start;font-size:0.875rem;line-height:1.25rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}.s-wallet-table-head-tr-th:where([dir=\"ltr\"],[dir=\"ltr\"] *){text-align:left}.s-wallet-table-head-tr-th:last-child:where([dir=\"ltr\"],[dir=\"ltr\"] *){text-align:right}.s-wallet-table-head-tr-th:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:right}.s-wallet-table-head-tr-th:last-child:where([dir=\"rtl\"],[dir=\"rtl\"] *){text-align:left}.s-wallet-table-tbody-tr{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;overflow:hidden;border-radius:var(--s-radius, 0.25rem);border-bottom-width:8px;border-top-width:8px;--tw-border-opacity:1;border-color:rgb(249 250 251 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.5rem;transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:500ms}@media (min-width: 768px){.s-wallet-table-tbody-tr{display:table-row;flex-direction:row;flex-wrap:nowrap;padding:0px}}.s-wallet-table-tbody-tr-td{width:100%;white-space:nowrap;font-size:0.875rem;line-height:1.25rem}.s-wallet-table-tbody-tr-td:first-child{font-weight:700}@media (min-width: 768px){.s-wallet-table-tbody-tr-td{height:5rem;width:auto}.s-wallet-table-tbody-tr-td:last-child{text-align:end}.s-wallet-table-tbody-tr-td:first-child:where([dir=\"ltr\"],[dir=\"ltr\"] *){border-top-left-radius:0.375rem;border-bottom-left-radius:0.375rem}.s-wallet-table-tbody-tr-td:first-child:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-top-right-radius:0.375rem;border-bottom-right-radius:0.375rem}}.s-wallet-table-tbody-tr-td:first-child{font-weight:700}.s-wallet-table-tbody-tr-td-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem}@media (min-width: 768px){.s-wallet-table-tbody-tr-td-content{padding-left:1.5rem;padding-right:1.5rem;padding-top:1.5rem;padding-bottom:1.5rem}}.s-wallet-table-tbody-tr-td-content:where([dir=\"ltr\"],[dir=\"ltr\"] *){padding-right:0.5rem}.s-wallet-table-tbody-tr-td-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){padding-left:0.5rem}.s-wallet-table-tbody-tr a{position:absolute;top:0px;bottom:0px;display:block;width:100%}.s-wallet-table-tbody-tr a:where([dir=\"ltr\"],[dir=\"ltr\"] *){left:0px}.s-wallet-table-tbody-tr a:where([dir=\"rtl\"],[dir=\"rtl\"] *){right:0px}@media (min-width: 768px){.md\\:mx-0{margin-left:0px;margin-right:0px}.md\\:inline-block{display:inline-block}.md\\:hidden{display:none}}.ltr\\:ml-auto:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-left:auto}.ltr\\:mr-4:where([dir=\"ltr\"],[dir=\"ltr\"] *){margin-right:1rem}.rtl\\:ml-4:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-left:1rem}.rtl\\:mr-auto:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:auto}";
 

package/dist/cjs/salla-wishlist-actions.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-BAwxpXnB.js');
 
 const sallaWishlistActionsCss = "/*!twlt*/:host{display:block}.s-wishlist-actions-menu{min-width:200px;inset-inline-end:0;inset-inline-start:auto;list-style:none;margin:0;padding:4px 0;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}.s-wishlist-actions-menu-item{display:block;width:100%;padding:10px 16px;text-align:start;font-size:0.875rem;color:#374151;background:transparent;cursor:pointer;white-space:nowrap}.s-wishlist-actions-menu-item:hover{background-color:#f3f4f6;color:var(--color-primary)}.s-wishlist-actions-panel{box-shadow:0 1px 3px rgba(0, 0, 0, 0.08)}.s-wishlist-actions-panel-select-all{user-select:none}.s-wishlist-actions-select-all:indeterminate,.s-wishlist-actions-select-all:indeterminate:hover,.s-wishlist-actions-select-all:indeterminate:focus{background-color:var(--color-primary);border-color:var(--color-primary)}.s-wishlist-actions-select-all:indeterminate::after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:2px;background:#fff;border:none;transform:translate(-50%, -50%)}.s-wishlist-actions-social-anchor{display:none}h1.s-wishlist-actions-page-title{text-align:start !important}.static{position:static}.absolute{position:absolute}.relative{position:relative}.z-20{z-index:20}.mb-3{margin-bottom:0.75rem}.mt-1{margin-top:0.25rem}.mt-3{margin-top:0.75rem}.flex{display:flex}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.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)}.outline{outline-style:solid}";
 

package/dist/cjs/salla-wishlist-summary.cjs.entry.js

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-BAwxpXnB.js');
 var heart = require('./heart-ClVn_Co8.js');
-var Helper = require('./Helper-Dmb3FQQs.js');
+var Helper = require('./Helper-DSYelC4c.js');
 
 const sallaWishlistSummaryCss = "/*!twlt*/:host{display:inline-flex;align-items:center;margin-inline-start:1rem}.hidden{display:none}.s-wishlist-summary-wrapper{position:relative;margin-inline-start:0.75rem;display:inline-flex;align-items:center;border-style:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms}.s-wishlist-summary-wrapper:hover{opacity:0.8}.s-wishlist-summary-icon{display:inline-flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;border-color:var(--color-border,#e5e7eb);color:var(--color-text-primary,#374151)}.s-wishlist-summary-icon svg{height:1.25rem;width:1.25rem;fill:currentColor}.s-wishlist-summary-count{position:absolute;top:-4px;left:-6px;display:inline-flex;height:1.25rem;width:1.25rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity, 1));padding:0.25rem;font-size:0.75rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-wishlist-summary-count:where([dir=\"rtl\"],[dir=\"rtl\"] *){left:unset;right:-6px}";
 

package/dist/cjs/twilight.cjs.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-BAwxpXnB.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*

package/dist/cjs/{vanilla-picker-D1DK9OwS.js → vanilla-picker-Cm_uNdps.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-Cbi9cOBy.js');
+var index = require('./index-BAwxpXnB.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/collection/components/salla-bullet-delivery/salla-bullet-delivery.css

@@ -14,11 +14,14 @@
   }
 }
 
-/* Allow searchable dropdown popover to paint outside the modal body */
-.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
-  overflow: visible !important;
+/* Allow searchable dropdown popover to paint outside the modal body (tablet/desktop only).
+   On mobile the modal body is the bottom-sheet scroll container (overflow-y: auto); forcing it
+   visible lets the panel run off-screen so the options can't be reached or scrolled. */
+@media screen and (min-width: 640px) {
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
+    overflow: visible !important;
+  }
 }
-
 .s-bullet-delivery-form-actions.s-bullet-delivery-form-actions--single {
   padding-bottom: 0;
   flex-direction: column;
@@ -455,8 +458,10 @@
     overflow-y: auto;
   }
 }
-.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open){
-  overflow: visible !important;
+@media (min-width: 640px){
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open){
+    overflow: visible !important;
+  }
 }
 .s-bullet-delivery-inner{
   min-block-size: 0;

package/dist/collection/components/salla-color-picker/color-popup-placement.js

@@ -0,0 +1,68 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+const CLIPPING_OVERFLOW = new Set(['hidden', 'auto', 'clip', 'scroll']);
+/**
+ * Intersect the viewport with the nearest ancestor that clips each axis.
+ * `overflow-x` / `overflow-y` of `hidden`, `auto`, `clip`, or `scroll` clip.
+ * `visible` does not.
+ */
+export function clippingFrame(start, viewport) {
+    const frame = {
+        left: 0,
+        right: viewport.width,
+        top: 0,
+        bottom: viewport.height,
+    };
+    let clipsX = false;
+    let clipsY = false;
+    let node = start.parentElement;
+    while (node && (!clipsX || !clipsY)) {
+        const style = getComputedStyle(node);
+        const hitX = !clipsX && CLIPPING_OVERFLOW.has(style.overflowX);
+        const hitY = !clipsY && CLIPPING_OVERFLOW.has(style.overflowY);
+        if (hitX || hitY) {
+            const rect = node.getBoundingClientRect();
+            if (hitX) {
+                frame.left = Math.max(frame.left, rect.left);
+                frame.right = Math.min(frame.right, rect.right);
+                clipsX = true;
+            }
+            if (hitY) {
+                frame.top = Math.max(frame.top, rect.top);
+                frame.bottom = Math.min(frame.bottom, rect.bottom);
+                clipsY = true;
+            }
+        }
+        node = node.parentElement;
+    }
+    return frame;
+}
+/**
+ * Keep the legacy popup position unless it leaves the visible frame.
+ * The frame is the viewport, or the viewport intersected with a clipping ancestor.
+ * Open downward unless that would clip the Ok button and there is more room above.
+ * `shift` is a pixel correction on top of the left already applied.
+ */
+export function placeColorPopup(input) {
+    const margin = input.margin ?? 8;
+    const { popup, widget, viewport } = input;
+    const frame = input.frame ?? {
+        left: 0,
+        right: viewport.width,
+        top: 0,
+        bottom: viewport.height,
+    };
+    const spaceBelow = frame.bottom - widget.bottom;
+    const spaceAbove = widget.top - frame.top;
+    const clipsBottom = popup.bottom > frame.bottom - margin;
+    const side = clipsBottom && spaceAbove > spaceBelow ? 'top' : 'bottom';
+    let shift = 0;
+    if (popup.left < frame.left + margin) {
+        shift = frame.left + margin - popup.left;
+    }
+    else if (popup.right > frame.right - margin) {
+        shift = frame.right - margin - popup.right;
+    }
+    return { side, shift };
+}

package/dist/collection/components/salla-color-picker/salla-color-picker.css

@@ -1,4 +1,10 @@
-/*!twlt*/.resize {
+/*!twlt*/.visible {
+    visibility: visible
+}
+.hidden {
+    display: none
+}
+.resize {
     resize: both
 }
 .s-hidden {
@@ -14,6 +20,12 @@
     --tw-shadow-colored: 0 0 #0000 !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
 }
+.s-color-picker-main .picker_wrapper.popup {
+    z-index: 30 !important
+}
+.s-color-picker-main .picker_wrapper.\!popup {
+    z-index: 30 !important
+}
 .s-color-picker-main .picker_arrow {
     display: none
 }

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -4,6 +4,7 @@
 import { h, Host, } from "@stencil/core";
 import ArrowDown from "../../assets/svg/keyboard_arrow_down.svg";
 import { isSallaSdkAvailable } from "../../utils/ssr-helpers";
+import { clippingFrame, placeColorPopup } from "./color-popup-placement";
 export class SallaColorPicker {
     constructor() {
         /** Lazy-loaded to avoid bundling vanilla-picker (Babel polyfills) into main/hydrate bundle. */
@@ -159,12 +160,13 @@ export class SallaColorPicker {
         return 375;
     }
     setPopInPosition() {
-        // Use cached viewport width – reading innerWidth at popup open causes forced reflow.
-        // Fallback: matchMedia-based value when cache is 0 (e.g. SSR before hydration). Same breakpoints as updateViewportCache.
+        // Legacy offset still uses the breakpoint cache, not innerWidth.
+        // The clip check reads the viewport and the nearest clipping ancestor
+        // in the same turn as getBoundingClientRect, so those reads share that layout flush.
         const viewportWidth = this.cachedViewportWidth || this.getViewportWidthFromBreakpoints();
         const popup = this.host.querySelector('.picker_wrapper');
         const widgetEl = this.host.querySelector('.s-color-picker-widget');
-        if (!popup || !widgetEl)
+        if (!popup || !widgetEl || typeof window === 'undefined')
             return;
         const widgetPosition = widgetEl.getBoundingClientRect();
         const widgetToWindowEq = viewportWidth / 2 - widgetPosition.width / 2;
@@ -179,7 +181,24 @@ export class SallaColorPicker {
             popup.style.left = 'auto';
         }
         if (!isMobile || (isMobile && ((!widgetInRight && !widgetInLeft) || widgetInCenter))) {
-            popup.style.left = `-95px`;
+            popup.style.left = '-95px';
+        }
+        popup.classList.add('popup_bottom');
+        popup.classList.remove('popup_top');
+        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        const placement = placeColorPopup({
+            popup: popup.getBoundingClientRect(),
+            widget: { top: widgetPosition.top, bottom: widgetPosition.bottom },
+            viewport,
+            frame: clippingFrame(popup, viewport),
+        });
+        popup.classList.remove('popup_bottom');
+        popup.classList.remove('popup_top');
+        popup.classList.add(placement.side === 'top' ? 'popup_top' : 'popup_bottom');
+        if (placement.shift !== 0) {
+            const base = popup.style.left === 'auto' ? parseFloat(getComputedStyle(popup).left) || 0 : parseFloat(popup.style.left);
+            popup.style.left = `${base + placement.shift}px`;
+            popup.style.right = 'auto';
         }
     }
     initColorPicker() {
@@ -203,7 +222,7 @@ export class SallaColorPicker {
         });
     }
     render() {
-        return (h(Host, { key: '07854a7e805e42a1f951fc7fbf32e72190104c10', class: "s-color-picker-main" }, h("slot", { key: '041f76cc8829cc8c69aa6a37edbeada7bdf0ec2f', name: "widget" }, h("div", { key: '6834f5fb645d1934d7a5a859e5e1642b6feb3b7a', class: "s-color-picker-widget" }, h("div", { key: 'f5859253aa89ca001f240ef96a8afeff2f24f072', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: '7d2260c312e04e5c756cb342a6600af1a3b9fabf', innerHTML: ArrowDown }))), h("input", { key: '81aee3223b9fd228015809319c40eed173938292', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
+        return (h(Host, { key: '9b733fabacb7d18cbe2dee845ef96d7770fad402', class: "s-color-picker-main" }, h("slot", { key: '077d47dc2a759500db5eb588df1caa05a3d04ecc', name: "widget" }, h("div", { key: '76252b75d56cdc0587c327b5c0777a91d8e8dcba', class: "s-color-picker-widget" }, h("div", { key: '334ce5f8aa8ab3b529fa19310b551f2f57a776ea', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: 'b43c29d5e939ee7da3b69257c088efb1e9871737', innerHTML: ArrowDown }))), h("input", { key: 'c607e63377ceab32cd6cf77de572c0e2afbf72c7', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
     }
     componentDidLoad() {
         if (this.canvas)

package/dist/collection/components/salla-modal/salla-modal.css

@@ -62,8 +62,10 @@
     overflow-y: auto;
   }
 }
-.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
-  overflow: visible !important;
+@media (min-width: 640px) {
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
+    overflow: visible !important;
+  }
 }
 .s-comments-item-images-slider .s-modal-close {
   background-color: transparent;

package/dist/collection/components/salla-multiple-bundle-product/components/salla-multiple-bundle-product-details.js

@@ -302,29 +302,44 @@ export class SallaMultipleBundleProductDetails {
         }
         return '0';
     }
+    ensureProductCountLang() {
+        if (SallaMultipleBundleProductDetails.productCountLangReady) {
+            return;
+        }
+        salla.lang.add('pages.products.bundle_product_count', {
+            ar: '{1} منتج|{2} منتجان|[3,10] :count منتجات|[11,99] :count منتجًا|[0,*] :count منتج',
+            en: '{1} :count product|[0,*] :count products',
+        });
+        SallaMultipleBundleProductDetails.productCountLangReady = true;
+    }
     getSectionSelectionNote(section) {
         const min = this.getObligatoryMin(section);
         const max = Number(section.max_obligatory_products) || 0;
-        const hasMin = min > 0;
-        const hasMax = max > 0;
-        if (!hasMin && !hasMax) {
+        if (min <= 0 && max <= 0) {
             return null;
         }
-        if (hasMin && hasMax) {
+        this.ensureProductCountLang();
+        const products = (count) => salla.lang.choice('pages.products.bundle_product_count', count);
+        const num = (v) => salla.helpers.number(String(v));
+        const ar = (salla.lang.getLocale?.() || 'ar') === 'ar';
+        if (min > 0 && max > 0) {
             if (min === max) {
-                return salla.lang.getWithDefault('pages.products.bundle_select_exact', `اختر ${min} منتجات`, { count: min });
+                return ar ? `اختر ${products(min)}` : `Select ${products(min)}`;
             }
-            return salla.lang.getWithDefault('pages.products.bundle_select_range', `اختر من ${min} إلى ${max} منتجات`, { min, max });
+            return ar
+                ? `اختر من ${num(min)} إلى ${products(max)}`
+                : `Select from ${num(min)} to ${products(max)}`;
         }
-        if (hasMin) {
-            return salla.lang.getWithDefault('pages.products.bundle_select_min', `اختر على الأقل ${min} منتجات`, { min });
+        if (min > 0) {
+            return ar ? `اختر على الأقل ${products(min)}` : `Select at least ${products(min)}`;
         }
-        return salla.lang.getWithDefault('pages.products.bundle_select_max', `اختر حتى ${max} منتجات`, { max });
+        return ar ? `اختر حتى ${products(max)}` : `Select up to ${products(max)}`;
     }
     handleSectionsChange() {
         this.autoSelectSingleProductSections();
     }
     componentWillLoad() {
+        this.ensureProductCountLang();
         this.autoSelectSingleProductSections();
     }
     renderAccordionHeader(section) {
@@ -360,9 +375,9 @@ export class SallaMultipleBundleProductDetails {
         }
     }
     render() {
-        return (h(Host, { key: '716869ccc9770ebbf8d4873c3c9e666c6ce0294c', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '1d8756931ac2968db4f951b29c409f676498b2bf', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
+        return (h(Host, { key: 'ccc37b0f67b64192f1d7c12660b8c968aa776b15', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '6529eb0eea69ea8440fbba251df56a3e7bdcff32', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
             return (h("salla-accordion", { key: section.id, collapsed: index === 0 ? false : true }, h("salla-accordion-head", null, this.renderAccordionHeader(section)), h("salla-accordion-body", null, h("salla-multiple-bundle-product-slider", { section: section, sectionIndex: index, selectedProducts: this.selectedProducts, selectionLimit: this.getEffectiveMax(section), isSelectionLocked: this.isProductSelectionLocked(section), onProductSelected: this.handleBundleSliderProductSelected, onProductOptionsSelected: this.handleBundleSliderProductOptionsSelected }))));
-        })), h("salla-multiple-bundle-product-options-modal", { key: '065067fdeb3487f5b0b71649d0f2718ec62caf38' })));
+        })), h("salla-multiple-bundle-product-options-modal", { key: 'ea769a631840c75d2906da8f97c7127ddd772f04' })));
     }
     static get is() { return "salla-multiple-bundle-product-details"; }
     static get originalStyleUrls() {
@@ -446,3 +461,4 @@ export class SallaMultipleBundleProductDetails {
             }];
     }
 }
+SallaMultipleBundleProductDetails.productCountLangReady = false;

package/dist/collection/components/salla-multiple-bundle-product/salla-multiple-bundle-product.css

@@ -4,6 +4,9 @@
 .visible {
   visibility: visible;
 }
+.static {
+  position: static;
+}
 .hidden {
   display: none;
 }

package/dist/collection/components/salla-offer/salla-offer.js

@@ -102,7 +102,9 @@ export class SallaOffer {
             id: offer.id,
             name: offer.title,
             creative: offer.description || '',
-            position: index + 1
+            position: index + 1,
+            type: offer.type,
+            source: 'offers_section'
         }));
         salla.event.emit('salla::offer.promotion.viewed', promotionDataArray);
     }
@@ -118,7 +120,9 @@ export class SallaOffer {
             id: targetOffer.id,
             name: targetOffer.title,
             creative: targetOffer.description || '',
-            position: position
+            position: position,
+            type: targetOffer.type,
+            source: 'offers_section'
         };
         salla.event.emit('salla::offer.promotion.clicked', [promotionData]);
     }

package/dist/collection/components/salla-offer-modal/salla-offer-modal.js

@@ -53,7 +53,9 @@ export class SallaOfferModal {
                 id: offer.id?.toString(),
                 creative: offer.message,
                 name: offer.name,
-                position: `${this.offer_type}_offer_modal`
+                position: `${this.offer_type}_offer_modal`,
+                type: offer.offer_type,
+                source: 'offer_popup'
             }]);
     }
     /**
@@ -67,7 +69,9 @@ export class SallaOfferModal {
                 id: offer.id?.toString(),
                 creative: offer.message,
                 name: offer.name,
-                position: `${this.offer_type}_offer_modal`
+                position: `${this.offer_type}_offer_modal`,
+                type: offer.offer_type,
+                source: 'offer_popup'
             }]);
     }
     /**
@@ -246,7 +250,7 @@ export class SallaOfferModal {
     //       '</div>';
     //   }
     render() {
-        return h("salla-modal", { key: 'eea310c97e29879b488d40e2ce62acb6977fb483', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: 'dc9aeb18fe9888071a1396be8c537d188e328f65', slot: 'loading' }, h("div", { key: 'ec579b77c00a7cfccf82436f25ff96356fae857f', class: "s-offer-modal-skeleton" }, h("div", { key: '7ef03bf1e1bf37709c1b58e9860e72b06f6316be', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '45e59edcacaede3b207458d539b80f0e60a92567', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '468485e71e90c726b1fb4a2a8821fd6facd80869', height: '15px', width: '50%' }), h("salla-skeleton", { key: '656a93eab1eef3d3ec33895ae3b7c631a39794bf', height: '10px', width: '30%' })), h("div", { key: '5ffb43c87bafd5b7eeff843ffc077e68e66c7a6a', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: 'f7e44efdedde091aa9e43a51b139bdc06b8f78e9', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '4693f07f002b5eed8e3b0f16cc99ec797c322a32', height: '15px', width: '50%' }), h("salla-skeleton", { key: 'dd7b651fee51e03d7cff0534febb31808ecfa7a1', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+        return h("salla-modal", { key: '71406265e704b3c5a60ddd1be00cf72cda5e75b2', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: '30eec029e649fcb4bfb8868b14c2886f9060e320', slot: 'loading' }, h("div", { key: '5989afa516f8e175de636342655864dfa0fe5109', class: "s-offer-modal-skeleton" }, h("div", { key: '09fec5c367bae84b1f5a6c15f85ee006f5c50487', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '3e110f82bc9872a0e3d66f7a75a602f215d0bf6a', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '74399af02937a11638c0d0b77d621d1a6ed066c7', height: '15px', width: '50%' }), h("salla-skeleton", { key: '9bf668017079ec6499493f08ebb80a47476e8574', height: '10px', width: '30%' })), h("div", { key: 'f6e3b6476c6c98c58b2dce08ff0944ae64843df1', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: 'f8c171a56c0bee10756b3e04060ec014197a7b13', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '4e5cbd7f594d9e2517b1833bf636181ccd6aba51', height: '15px', width: '50%' }), h("salla-skeleton", { key: 'ed341e4c04799c744e2ffc04f8a5d77c76f98141', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
             ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(),
                 this.getOfferConditions(), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
                     h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)

package/dist/collection/components/salla-product-options/salla-product-options.css

@@ -98,6 +98,11 @@
         grid-column: span 2 / span 2;
         margin-top: 0px
     }
+}
+.s-product-options-option-content-color {
+    overflow: visible !important
+}
+@media (min-width: 640px) {
     .s-product-options-option-content-full-width {
         grid-column: span 3 / span 3
     }

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -615,7 +615,11 @@ export class SallaProductOptions {
         }
         return (h(Host, { class: { 's-product-options-wrapper': true, 's-product-options-no-padding': this.noPadding } }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
             this.splitterOption()
-            : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: this.generateInputId(option.id), class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: `s-product-options-option-content ${this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) ? 's-product-options-option-content-full-width' : ''}` }, this.getDisplayForType(option))))))));
+            : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: this.generateInputId(option.id), class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: {
+                    's-product-options-option-content': true,
+                    's-product-options-option-content-full-width': this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page('cart')),
+                    's-product-options-option-content-color': option.type === DisplayType.COLOR_PICKER,
+                } }, this.getDisplayForType(option))))))));
     }
     generateUniqueKey(defaultValue) {
         const contextData = this.bundleContext;

package/dist/collection/components/salla-quick-buy/salla-quick-buy.js

@@ -314,7 +314,15 @@ export class SallaQuickBuy {
         return salla.api.request('checkout/quick-purchase/' + this.productId, data, 'post');
     }
     isGuestCheckout() {
-        return salla.config.isGuest() && salla.config.get('store.features').includes('guest-checkout') && this.isPhysicalProduct();
+        return salla.config.isGuest() && this.isGuestCheckoutAllowed() && this.isPhysicalProduct();
+    }
+    // store.features scores the shopper's cart; buy_now.guest_checkout scores this product alone
+    isGuestCheckoutAllowed() {
+        const buyNowGuest = salla.config.get('store.settings.buy_now.guest_checkout');
+        if (typeof buyNowGuest === 'boolean' && this.productId == salla.config.get('page.id')) {
+            return buyNowGuest;
+        }
+        return salla.config.get('store.features').includes('guest-checkout');
     }
     getRequiredShippingContactFields() {
         let fields = [];

package/dist/collection/components/salla-searchable-dropdown/salla-searchable-dropdown.css

@@ -149,6 +149,9 @@
   max-height: min(40vh, 220px);
   overflow-y: auto;
   scrollbar-width: thin;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
 }
 
 .s-searchable-dropdown-item {
@@ -264,8 +267,11 @@
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
 }
-.s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
-  overflow: visible !important;
+@media (min-width: 640px) {
+
+  .s-bullet-delivery .s-bullet-delivery-modal .s-modal-body:has(.s-searchable-dropdown--open) {
+    overflow: visible !important;
+  }
 }
 .s-searchable-dropdown {
   position: relative;

package/dist/collection/components/salla-searchable-dropdown/salla-searchable-dropdown.js

@@ -116,19 +116,32 @@ export class SallaSearchableDropdown {
         }
         return null;
     }
+    /** Touch-first devices: focusing the search input raises the on-screen keyboard, which covers the list. */
+    isCoarsePointer() {
+        return !!window.matchMedia?.('(pointer: coarse)').matches;
+    }
+    /** Mobile bottom-sheet layout: the modal body is the scroll container and must keep scrolling. */
+    isNarrowViewport() {
+        return !!window.matchMedia?.('(max-width: 639px)').matches;
+    }
     open() {
         if (this.disabled || this.loading)
             return;
         this.isOpen = true;
         this.focusedIndex = -1;
-        if (!this.keepParentScroll) {
+        if (!this.keepParentScroll && !this.isNarrowViewport()) {
             this.scrollableAncestor = this.findScrollableAncestor();
             if (this.scrollableAncestor) {
                 this.scrollableAncestor.style.overflow = 'visible';
             }
         }
         this.dropdownOpened.emit();
-        requestAnimationFrame(() => this.searchInputRef?.focus());
+        requestAnimationFrame(() => {
+            if (!this.isCoarsePointer()) {
+                this.searchInputRef?.focus();
+            }
+            this.panelRef?.scrollIntoView?.({ block: 'nearest' });
+        });
     }
     close() {
         if (!this.isOpen)
@@ -188,18 +201,18 @@ export class SallaSearchableDropdown {
     render() {
         const hasSelection = this.selectedItem != null;
         const listboxId = `${this.inputId}-listbox`;
-        return (h(Host, { key: '9bf5bb827d3738d4782736af17630208771342eb', class: "s-searchable-dropdown" }, h("div", { key: '2d2f88a24afa01d6f3e554906ee6d936fede5c02', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: 'a3c68d7a0a73229691df9bf30cf973b74ea62999', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '5c068cd4babd03a5fc3604ad0acc98f4a61f05cc', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: 'e80750322f9e4d72e45d23f0b830e2b64b5e531e', class: {
+        return (h(Host, { key: 'eadd6ff762e66bc3458d19f7d2490da939a268d0', class: "s-searchable-dropdown" }, h("div", { key: '0cb614d73e06626c0cd3b5e5eadc76ebfc296093', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '6f3c440ccad07f3ab271f85f508ddf6294464947', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '9415e3b6b87e702079c2fc810aa7621e623e5641', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: '7ed8979005ef68e40976a536ead5da4c736bb0ba', class: {
                 's-searchable-dropdown-trigger': true,
                 's-searchable-dropdown-trigger--disabled': this.disabled || this.loading,
                 's-searchable-dropdown-trigger--open': this.isOpen,
-            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '030dddd73a8909d51847c6a8ea98b628674002c1', class: {
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '7df0a517cb916ad6652544c1b738c569ab2f290f', class: {
                 'sicon-keyboard_arrow_down': true,
                 's-searchable-dropdown-trigger-icon': true,
                 's-searchable-dropdown-trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'ced396bea68ce724a04b4cd2a85c8972ff7f7f3d', class: {
+            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: '797dea9a0b0a26402132f5d33c49b74cde5f617d', class: {
                 's-searchable-dropdown-panel': true,
                 's-searchable-dropdown-panel--up': this.dropUp,
-            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: '2d93d2156463cb53e4d8422bbbc54a90d58cde49', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: '651f0b1e13e55bd67a0465241bc2d38fbc2192e7', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: '563c06758fdd5027e227218e77b7c2fb29ca07db', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: '20b26b044bba28fc74c0a0f81c6fcc8dae63d9de', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
+            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: 'e7b7ec94dbc99ac40a1f833b7aa61c5d2a8742b7', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: '59fc0e1986726f99639688c18bc6c501fae966b4', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: '70a63f4297d7f1f204d95336cc6aaea28d8f14e1', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: 'f998cc8115062d98befdb814cba0a282c491ef4e', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
     }
     renderListContent() {
         if (this.searching || this.loading) {