@salla.sa/twilight-components 3.0.14 → 3.0.16

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-_VQc877V.js');
+var index = require('./index-PB4iLztN.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-_VQc877V.js');
+var index = require('./index-PB4iLztN.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-_VQc877V.js');
+var index = require('./index-PB4iLztN.js');
 var heart = require('./heart-ClVn_Co8.js');
-var Helper = require('./Helper-BQjkdKQR.js');
+var Helper = require('./Helper-BV6HUQzI.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-_VQc877V.js');
+var index = require('./index-PB4iLztN.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*

package/dist/cjs/{vanilla-picker-C9MGx2jV.js → vanilla-picker-ZsewI4gd.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-_VQc877V.js');
+var index = require('./index-PB4iLztN.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-filters-widget/salla-filters-widget.js

@@ -120,8 +120,14 @@ export class SallaFiltersWidget {
         if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {
             return '';
         }
+        // snapshot once per widget instance: selected options float to the top on page load
+        // only, so checking a box later doesn't shuffle the list under the cursor
+        if (!this.pinnedValues) {
+            //@ts-ignore
+            this.pinnedValues = new Set(option.values.map(v => this.optionValue(v)).filter(v => this.isSelectedOption(option, v)));
+        }
         //@ts-ignore
-        const filteredValues = option.values.filter((filterOption) => {
+        const filteredValues = [...option.values].sort((a, b) => Number(this.pinnedValues.has(this.optionValue(b))) - Number(this.pinnedValues.has(this.optionValue(a)))).filter((filterOption) => {
             if (!this.searchQuery)
                 return true;
             const label = typeof filterOption === 'number'
@@ -136,11 +142,14 @@ export class SallaFiltersWidget {
             return (h("div", { class: "s-filters-widget-empty-state" }, salla.lang.get('common.elements.no_options') || 'لا توجد نتائج'));
         }
         //@ts-ignore
-        return filteredValues.map((filterOption, index) => {
-            let value = typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);
+        return filteredValues.map((filterOption) => {
+            const value = this.optionValue(filterOption);
             return h("label", { class: "s-filters-label", htmlFor: `${option.key}-option-${value}`, key: `${option.key}-option-${value}` }, h("input", { id: `${option.key}-option-${value}`, name: option.key, type: option.type === FilterOptionTypes.VALUES ? 'checkbox' : 'radio', checked: this.isSelectedOption(option, value), class: option.type === FilterOptionTypes.VALUES ? 's-filters-checkbox' : 's-filters-radio', onChange: event => this.changed.emit({ event, option, value }) }), this.getOptionLabel(option, filterOption));
         });
     }
+    optionValue(filterOption) {
+        return typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);
+    }
     isSelectedOption(option, value) {
         if (option.type === FilterOptionTypes.MINIMUM) {
             return this.filtersData[option.key] == value;
@@ -173,12 +182,12 @@ export class SallaFiltersWidget {
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: '22e7662e98691ff8be05e8dd6f0b10550b0b4f7f', class: "s-filters-widget-container" }, h("h3", { key: 'a0fcdec4dbd6262f8b3dcaba3009f7daa7201ed5', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '6a83731bc66b2d48164cdb3069f773e85223dabe' }, this.option.label), h("span", { key: 'ebb6c75aa35297d20721ac21a8ec1b7156752ae6', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'ea068e1bdc9c35106b1f48a0a33ae022960e771a', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'b591ba684e2f6dbd1473499e848d8f7473993d97', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '1d0caf13b9033334f525da643c378b7a23a3f227', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '09b6925befe4eda2912d2fa277ecc9fbfe539166', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: 'b675d934c1cf7d11c71a5c2e5c607f59cba4e44b' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '5d0e0ab6de7efb4eb75c2e1c85421dd6f3cf3e1d', class: "s-filters-widget-container" }, h("h3", { key: 'df5a000bf4de2c59ada08cdee02e2239f6052db7', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '0e55827c11e6d936cd9fd5f489f40bdaacd636fd' }, this.option.label), h("span", { key: 'ebcd57b65904b8669a4bcb8d6d849360bfa5b2da', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '30e65251f0f2c2d88ad8232ef9c5a1dc407edcd9', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'b661a373929b51e16eb6b23190d78a4b6290117d', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '3e5eebd5d36957d09953f4a6a0629891304a3f7e', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '774f6590dd76edbd334f41ca2d15518019e8d43a', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '0fe6b327f9065c53fbeec8a74fa01a21403b5e2b' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '7f3358dd636b01df91510c09f472fee7b4bfb0bf', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: 'a07b802f1f9432826578992bf77518f3793589a8', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     static get is() { return "salla-filters-widget"; }
     static get originalStyleUrls() {

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-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-scopes/salla-scopes.js

@@ -130,7 +130,7 @@ export class SallaScopees {
                 'id': this.current_scope.id
             });
             salla.cart.reset();
-            window.location.replace(salla.helpers.addParamToUrl('scope', this.current_scope.id));
+            window.location.replace(salla.scope.urlFor(this.current_scope));
         }).catch(e => console.log(e))
             .finally(() => {
             this.changeBtn.stop();

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) {