@salla.sa/twilight-components 2.14.354 → 2.14.355

package/dist/esm/salla-multiple-bundle-product-cart_2.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement, F as Fragment } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host, a as getElement, F as Fragment } from './index-PHxPq4LJ.js';
 
 const sallaMultipleBundleProductCartCss = "";
 

package/dist/esm/salla-multiple-bundle-product-options-modal_2.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-PHxPq4LJ.js';
 import { A as ArrowLeftIcon, a as ArrowRightIcon } from './keyboard_arrow_right-Vqpj4CWE.js';
 
 const sallaMultipleBundleProductOptionsModalCss = ":host{display:block}";

package/dist/esm/salla-multiple-bundle-product.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host } from './index-PHxPq4LJ.js';
 
 const sallaMultipleBundleProductCss = ":host{display:block}";
 

package/dist/esm/salla-notification-item.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-B74h9G6a.js';
+import { r as registerInstance, h } from './index-PHxPq4LJ.js';
 
 const sallaNotificationsCss = "";
 

package/dist/esm/salla-notifications.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, a as getElement } from './index-PHxPq4LJ.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import './anime.es-CgtvEd63.js';
 

package/dist/esm/salla-offer-modal.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, a as getElement } from './index-PHxPq4LJ.js';
 import { S as SpecialDiscountIcon } from './special-discount-Ctkfc4K-.js';
 
 var Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-offer.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, a as getElement } from './index-PHxPq4LJ.js';
 
 var PageType;
 (function (PageType) {

package/dist/esm/salla-order-details-multiple-bundle-product.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host } from './index-PHxPq4LJ.js';
 
 const sallaOrderDetailsMultipleBundleProductCss = "";
 

package/dist/esm/salla-order-details-options.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host } from './index-PHxPq4LJ.js';
 
 var copyIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-order-details.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, F as Fragment, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, h, F as Fragment, H as Host } from './index-PHxPq4LJ.js';
 
 const sallaOrderDetailsCss = "";
 

package/dist/esm/salla-order-summary.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-B74h9G6a.js';
+import { r as registerInstance, h } from './index-PHxPq4LJ.js';
 import { i as iconCheck } from './check-BsXh13x8.js';
 
 var iconFileArchive = `<!-- Generated by IcoMoon.io -->

package/dist/esm/salla-order-totals-card.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host } from './index-PHxPq4LJ.js';
 
 const sallaOrderTotalsCardCss = ":host{display:block}";
 

package/dist/esm/salla-orders.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, a as getElement } from './index-PHxPq4LJ.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import './anime.es-CgtvEd63.js';
 

package/dist/esm/salla-payments.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-PHxPq4LJ.js';
 
 const sallaPaymentsCss = ":host{display:block}";
 
@@ -25,36 +25,24 @@ const SallaPayments = class {
                     this.exclude = [];
                 }
             }
-            this.placeholderImage = salla.url.cdn(`images/s-empty.png`);
-            this.paymentSlot = this.host.querySelector('[slot="payment"]')?.innerHTML || `<li class="s-payments-list-item"><img class="lazy" width="100%" height="100%" src="${this.placeholderImage}" data-src="{image}" alt={payment} /><li>`;
-            this.sbcSlot = this.host.querySelector('[slot="sbc"]')?.innerHTML || `<li class="s-payments-list-item"><a target="_blank" href="{link}"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy s-payments-sbc-image" alt="SBC"/></a><li>`;
-            this.codSlot = this.host.querySelector('[slot="cod"]')?.innerHTML || `<li class="s-payments-list-item"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy" alt="COD"/><li>`;
+            this.paymentSlot = this.host.querySelector('[slot="payment"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="{payment}" /></li>`;
+            this.sbcSlot = this.host.querySelector('[slot="sbc"]')?.innerHTML || `<li class="s-payments-list-item"><a target="_blank" href="{link}"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" class="s-payments-sbc-image" alt="SBC" /></a></li>`;
+            this.codSlot = this.host.querySelector('[slot="cod"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="COD" /></li>`;
             this.payments = salla.config.get('store.settings.payments');
         });
     }
     render() {
         const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
         const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
-        return (h(Host, { key: '171f3100fd67a51ad678cfdf648ff69c64c2a3a1', class: "s-payments-list-wrap" }, h("ul", { key: 'e6f55f5a6b1670d1f2c270cf4316c90ff5353a08', class: "s-payments-list" }, madeInKSA && h("li", { key: '42bd30418212c78184ccc22a449d724cc82df46b', class: "s-payments-list-item" }, h("img", { key: '8affc4db8a1fd708197a00dceba7f31759b7febd', class: "lazy", width: "100%", height: "100%", decoding: "async", loading: "lazy", "data-src": salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
+        return (h(Host, { key: 'd93c9cfafd67203e3d85f78296b6256dbdfd8d78', class: "s-payments-list-wrap" }, h("ul", { key: '9520b4979082d6e733edb3ec5d6defe97beec6de', class: "s-payments-list" }, madeInKSA && h("li", { key: '93ba9c342f5809d6b75ab00f99126a351c18ccc5', class: "s-payments-list-item" }, h("img", { key: '8e62415523f4a1ccf839d394d5089ee49e0873c4', width: "100%", height: "100%", decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
             h("div", { id: "cod-slot", innerHTML: this.codSlot
                     .replace(/\{image\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58)) }) :
             h("div", { id: "payment-slot", innerHTML: this.paymentSlot
                     .replace(/\{image\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))
-                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: 'a0b88ee6a9c0378bc2946ab5506747ba0ff4ff12', id: "sbc-slot", innerHTML: this.sbcSlot
+                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '0acb0d8a0f4c4c53c9e439127418081684cd2bd1', id: "sbc-slot", innerHTML: this.sbcSlot
                 .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
                 .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
     }
-    componentDidLoad() {
-        //todo:: double check about the following workaround, it looks not normal
-        document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
-        // fix lazy loaded images that have 100% width and height
-        this.host.querySelectorAll('.lazy').forEach((img) => {
-            img.addEventListener('load', () => {
-                img.setAttribute('width', "100%");
-                img.setAttribute('height', "100%");
-            });
-        });
-    }
     componentDidRender() {
         //todo:: double check about the following workaround to reduce the dom length, it looks unusal
         this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));

package/dist/esm/salla-placeholder.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host } from './index-PHxPq4LJ.js';
 
 var Inbox = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-price-range.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-PHxPq4LJ.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
 
 var arrowRight = `<!-- Generated by IcoMoon.io -->

package/dist/esm/salla-product-size-guide.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, a as getElement } from './index-PHxPq4LJ.js';
 
 var PencilRuler = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-products-list.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-PHxPq4LJ.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { S as ShoppingBag } from './shopping-bag-DiKTtDW5.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';

package/dist/esm/salla-products-slider.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-PHxPq4LJ.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import './anime.es-CgtvEd63.js';
 
@@ -104,7 +104,7 @@ const SallaProductsSlider = class {
         if (!this.canRender()) {
             return;
         }
-        return (h(Host, { class: "s-products-slider-wrapper" }, h("salla-slider", { class: "s-products-slider-slider", id: this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`, "auto-play": this.autoplay, type: "carousel", "block-title": this.blockTitle, "block-subTitle": this.subTitle, "display-all-url": this.displayAllUrl, sliderConfig: this.sliderConfig ? this.sliderConfig : null }, h("div", { slot: "items" }, this.productsData?.map(product => this.getItemHTML(product))))));
+        return (h(Host, { class: "s-products-slider-wrapper" }, h("salla-slider", { class: "s-products-slider-slider", id: this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`, ...(this.sliderProps || {}), "auto-play": this.autoplay, type: "carousel", "block-title": this.blockTitle, "block-subTitle": this.subTitle, "display-all-url": this.displayAllUrl, sliderConfig: this.sliderConfig ? this.sliderConfig : null }, h("div", { slot: "items" }, this.productsData?.map(product => this.getItemHTML(product))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/salla-progress-bar.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-B74h9G6a.js';
+import { r as registerInstance, h } from './index-PHxPq4LJ.js';
 
 const sallaProgressBarCss = "";
 

package/dist/esm/salla-quick-order.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-PHxPq4LJ.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
 import { C as Cancel } from './cancel-BsLF_HK7.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-PHxPq4LJ.js';
 import { W as WishListIcon } from './star-ZT7ehBBk.js';
 import { C as CheckCircle2 } from './check-circle2-BV4kqbdL.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host } from './index-PHxPq4LJ.js';
 import { S as Search } from './search-BscTeWDc.js';
 
 var StoreAlt = `<!-- Generated by IcoMoon.io -->

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, a as getElement } from './index-PHxPq4LJ.js';
 import { S as Search } from './search-BscTeWDc.js';
 import { H as Helper } from './Helper-B5RLi6Xo.js';
 import './anime.es-CgtvEd63.js';

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host } from './index-PHxPq4LJ.js';
 
 const sallaSkeletonCss = ":host{display:block}";
 

package/dist/esm/salla-slider.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-PHxPq4LJ.js';
 import { a as ArrowRightIcon, A as ArrowLeftIcon } from './keyboard_arrow_right-Vqpj4CWE.js';
 
 /**
@@ -9857,6 +9857,11 @@ const SallaSlider = class {
          * Show/hide thumbs slider arrows
          */
         this.showThumbsControls = true;
+        /**
+         * When enabled and there is exactly one slide in the `items` slot,
+         * render without initializing Swiper (single slide mode).
+         */
+        this.enableSingleSlideMode = false;
         /**
          * Enable autoplay  - working with `type="carousel" only`
          */
@@ -9888,6 +9893,9 @@ const SallaSlider = class {
         this.isBeginning = true;
         /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse recommended) */
         this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
+        /** When true, only one slide is present; we render without Swiper for performance. */
+        this.singleSlideMode = false;
+        this._rafId = null;
         this.viewportMediaQuery = null;
         this.hasThumbSlot = false;
         this.pre_defined_config = {
@@ -9943,7 +9951,7 @@ const SallaSlider = class {
      * @returns The Swiper slider instance
      */
     async sliderInstance() {
-        return this.slider;
+        return this.singleSlideMode ? undefined : this.slider;
     }
     /**
      * Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.
@@ -9953,6 +9961,8 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideTo(index, speed, runCallbacks) {
+        if (!this.slider)
+            return;
         return this.slider.slideTo(index, speed, runCallbacks);
     }
     /**
@@ -9980,7 +9990,7 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideToLoop(index, speed, runCallbacks) {
-        this.slider.slideToLoop(index, speed, runCallbacks);
+        this.slider?.slideToLoop(index, speed, runCallbacks);
     }
     /**
      * Does the same as .slideNext but for the case when used with enabled loop. So this method will slide to next slide with realIndex matching to next index
@@ -9989,7 +9999,7 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideNextLoop(speed, runCallbacks) {
-        this.slider.slideNextLoop(speed, runCallbacks);
+        this.slider?.slideNextLoop(speed, runCallbacks);
     }
     /**
      * Does the same as .slidePrev but for the case when used with enabled loop. So this method will slide to previous slide with realIndex matching to previous index
@@ -9998,7 +10008,7 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slidePrevLoop(speed, runCallbacks) {
-        this.slider.slidePrevLoop(speed, runCallbacks);
+        this.slider?.slidePrevLoop(speed, runCallbacks);
     }
     /**
      * Reset slider position to currently active slide for the duration equal to 'speed' parameter.
@@ -10007,7 +10017,7 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideReset(speed, runCallbacks) {
-        this.slider.slideReset(speed, runCallbacks);
+        this.slider?.slideReset(speed, runCallbacks);
     }
     /**
      * Reset slider position to closest slide/snap point for the duration equal to 'speed' parameter.
@@ -10015,56 +10025,56 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async slideToClosest(speed, runCallbacks) {
-        this.slider.slideToClosest(speed, runCallbacks);
+        this.slider?.slideToClosest(speed, runCallbacks);
     }
     /**
      *  You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
      * **/
     async update() {
-        this.slider.update();
+        this.slider?.update();
     }
     /**
      * Force slider to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter
      * @param {number} speed - Transition duration (in ms).
      * **/
     async updateAutoHeight(speed) {
-        this.slider.updateAutoHeight(speed);
+        this.slider?.updateAutoHeight(speed);
     }
     /**
      * recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript
      * **/
     async updateSlides() {
-        this.slider.updateSlides();
+        this.slider?.updateSlides();
     }
     /**
      * recalculate slider progress
      * **/
     async updateProgress() {
-        this.slider.updateProgress();
+        this.slider?.updateProgress();
     }
     /**
      * update active/prev/next classes on slides and bullets
      * **/
     async updateSlidesClasses() {
-        this.slider.updateSlidesClasses();
+        this.slider?.updateSlidesClasses();
     }
     /**
      * Get slider slides
      * **/
     async getSlides() {
-        return await this.slider?.slides;
+        return this.singleSlideMode ? undefined : await this.slider?.slides;
     }
     /**
      * Get slider slides
      * **/
     async updateSize() {
-        return await this.slider.updateSize();
+        return await this.slider?.updateSize();
     }
     /**
      * Get thumbs slider update
      * **/
     async sliderInit() {
-        return await this.slider.init();
+        return await this.slider?.init();
     }
     /**
      * Get thumbs slider slides
@@ -10103,6 +10113,8 @@ const SallaSlider = class {
      * @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
      * **/
     async thumbsSlideTo(index, speed, runCallbacks) {
+        if (!this.thumbsSlider)
+            return;
         return this.thumbsSlider.slideTo(index, speed, runCallbacks);
     }
     /**
@@ -10290,7 +10302,16 @@ const SallaSlider = class {
         classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal ';
         classes += this.arrowsCentered ? ' s-slider-v-centered ' : '';
         classes += this.gridThumbs ? ' s-slider-with-grid-thumbs ' : '';
-        return (h(Host, { key: '44f6baf2ec3a6421cd8d8ce6779c6ce781cecc7f', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
+        if (this.singleSlideMode) {
+            return (h(Host, { class: 's-slider-wrapper s-slider-single-mode ' + classes }, this.blockTitle || this.displayAllUrl ?
+                h("div", { class: "s-slider-block__title" }, this.blockTitle ?
+                    h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
+                    : '', this.displayAllUrl ?
+                    h("div", { class: "s-slider-block__title-left" }, h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle))
+                    : '')
+                : '', h("div", { class: "swiper s-slider-container s-slider-single", dir: this.vertical ? "ltr" : this.direction }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper" }, h("slot", { name: 'items' })))));
+        }
+        return (h(Host, { class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
             h("div", { class: "s-slider-block__title" }, this.blockTitle ?
                 h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
                 : '', h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
@@ -10298,7 +10319,7 @@ const SallaSlider = class {
                 : '', this.showControls ?
                 h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : ArrowRightIcon })))
                 : ''))
-            : '', h("div", { key: '384d3224e9e2f9ad08d71093ee4c6f907232c07e', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: '578756df5b652d9b7e86d3f0424e4ec886b7a75f' }), h("div", { key: '7966a00ec720374a3dac1533d72fdfeb31db8105', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '39f9656cabb053dc4878ae1f2bd94a6efc19f975', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
+            : '', h("div", { class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", null), h("div", { class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
             h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : ArrowRightIcon })))
             : null))
             : null));
@@ -10357,25 +10378,43 @@ const SallaSlider = class {
         }
         this.lazyObserver.observe(el);
     }
-    /** Keep only element nodes so Swiper never sees text nodes (getAttribute would throw). */
-    flattenSlotToElements(container, slotSelector) {
-        const slotEl = container?.querySelector(slotSelector);
-        if (!slotEl)
-            return;
-        const elements = Array.from(slotEl.children).filter((node) => node.nodeType === Node.ELEMENT_NODE);
-        if (elements.length)
-            slotEl.replaceWith(...elements);
-    }
     componentDidLoad() {
-        this.flattenSlotToElements(this.sliderWrapper, 'div[slot="items"]');
+        // 1. Batch Reads (Get all elements first without modifying DOM)
+        const tasks = [];
+        let _singleSlideMode = false;
+        const prepareFlatten = (container, slotSelector) => {
+            const slotEl = container?.querySelector(slotSelector);
+            if (!slotEl)
+                return;
+            const elements = Array.from(slotEl.children).filter((node) => node.nodeType === Node.ELEMENT_NODE);
+            if (elements.length) {
+                // Queue the Write operation
+                tasks.push(() => slotEl.replaceWith(...elements));
+                if (elements.length === 1 && this.enableSingleSlideMode) {
+                    _singleSlideMode = true;
+                    elements[0].classList.add('swiper-slide');
+                }
+            }
+        };
+        prepareFlatten(this.sliderWrapper, 'div[slot="items"]');
         if (this.type == 'thumbs' && this.hasThumbSlot) {
-            this.flattenSlotToElements(this.thumbsSliderWrapper, 'div[slot="thumbs"]');
+            prepareFlatten(this.thumbsSliderWrapper, 'div[slot="thumbs"]');
         }
-        this.initSlider();
+        // 2. Batch Writes (Execute all DOM modifications together)
+        tasks.forEach(task => task());
+        // 3. Init Swiper inside rAF
+        this._rafId = requestAnimationFrame(() => {
+            this.singleSlideMode = _singleSlideMode;
+            if (!_singleSlideMode) {
+                this.initSlider();
+            }
+        });
         this.viewportMediaQuery = window.matchMedia('(min-width: 768px)');
         this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
     }
     disconnectedCallback() {
+        if (this._rafId)
+            cancelAnimationFrame(this._rafId);
         this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
         this.lazyObserver?.disconnect();
         this.lazyImageObserver?.disconnect();

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, a as getElement } from './index-PHxPq4LJ.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
@@ -148,7 +148,7 @@ const SallaSocialShare = class {
         window.a2a?.init('page');
     }
     render() {
-        return (h("div", { key: 'c4ac8faea4a8ec8aa5ba9f4e744710d508387d78', class: "s-social-share-wrapper" }, h("slot", { key: '6c6b54513f67be8818a9a042570286d09b7115f8', name: 'widget' }, h("salla-button", { key: '8a57650940dad634cf3576dada4cc35687ed447c', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '207f2fb0e2f89e7057775153ffcc68eebb069824', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'fd9b25a483a93efa10994c2a7a876b6741d976c2', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
+        return (h("div", { key: '05350f69911825a04716569eaac5769c67b07e24', class: "s-social-share-wrapper" }, h("slot", { key: 'c9bb03b5907e8d211d1a2bc7d36b0924dd2fa00b', name: 'widget' }, h("salla-button", { key: '3120d746deabb24bc2b3994a1088a42e355c2796', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '7874b8c8aceb1372d061d0142405a3f07e3c0ba3', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'deaa966a6ae4a91a350361f44316d749f8459cec', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
             return (h("li", null, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
                 if (icon.name === platform) {
                     return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-PHxPq4LJ.js';
 import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 
 var instagram = `<!-- Generated by IcoMoon.io -->
@@ -55,7 +55,7 @@ const SallaSocial = class {
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (h(Host, { key: 'a0bcd60fddd2fd8e86f32cd71d484ec76d02cf49' }, h("ul", { key: 'b595d8de59199de5081370b9440c8a46cb8c751f', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (h(Host, { key: '20f01d2027bf9ac9fa635c2e814bf9778c5abf8c' }, h("ul", { key: '016fc5a496d6efd36cf15dc805dd83ee4d6a9845', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, 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()) })))))));