@salla.sa/twilight-components 2.14.416 → 2.14.417

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
 
 const sallaMultipleBundleProductOptionsModalCss = ":host{display:block}";

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaMultipleBundleProductCss = ":host{display:block}";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaNotificationsCss = "";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var specialDiscount = require('./special-discount-DC2oXurL.js');
 var tag = require('./tag-D-PcUR33.js');
 var cart2 = require('./cart2-B98PSAFN.js');

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 var PageType;
 (function (PageType) {

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaOrderDetailsMultipleBundleProductCss = "";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.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/cjs/salla-order-details.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaOrderDetailsCss = "";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaOrderEditItemCss = "";
 

package/dist/cjs/salla-order-edit.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaOrderEditCss = "";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var check = require('./check-BnVBPQNp.js');
 
 var iconFileArchive = `<!-- Generated by IcoMoon.io -->

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaOrderTotalsCardCss = ":host{display:block}";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaPaymentsCss = ":host{display:block}";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.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/cjs/salla-price-range.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var arrowLeft = require('./arrow-left-xSEmRpp6.js');
 
 var arrowRight = `<!-- Generated by IcoMoon.io -->

package/dist/cjs/salla-product-card_2.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var star2 = require('./star2-R146a27p.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.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/cjs/salla-products-list.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var shoppingBag = require('./shopping-bag-C1gvTVHr.js');
 var Helper = require('./Helper-CU4Xuiki.js');

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaProgressBarCss = "";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var iphoneX = require('./iphone-x-qC21wCLj.js');
 var mail = require('./mail-Bgvt2hc9.js');
 var cancel = require('./cancel-B5SbMYEk.js');

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var star = require('./star-DGcH7Yso.js');
 var checkCircle2 = require('./check-circle2-BDvlT4_n.js');
 var Helper = require('./Helper-CU4Xuiki.js');

package/dist/cjs/salla-reward-action_4.cjs.entry.js

@@ -3,13 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
-var functions = require('./functions-4ojGKP4U.js');
+var index = require('./index-BQnJvBnq.js');
+var functions = require('./functions-B0oYwrYv.js');
 var gift = require('./gift-DbNivqYO.js');
 var tag = require('./tag-D-PcUR33.js');
 var check = require('./check-BnVBPQNp.js');
 var cancel = require('./cancel-B5SbMYEk.js');
-var trackedPromise = require('./tracked-promise-DZzEOWGH.js');
+var trackedPromise = require('./tracked-promise-BYjrk7x6.js');
 
 const sallaLoyaltyProgramCss$3 = "";
 

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

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

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var search = require('./search-c7Aa7lM9.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaSkeletonCss = ":host{display:block}";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
 
 /**
@@ -9822,7 +9822,7 @@ const SallaSlider = class {
          */
         this.blockTitle = '';
         /**
-         * Enable call a specific slide by index from thumbnails option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide
+         * Enable call a specific slide by index from thumbnails or color option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide
          */
         this.listenToThumbnailsOption = false;
         /**
@@ -10141,9 +10141,16 @@ const SallaSlider = class {
         this.hasThumbSlot = !!this.host.querySelector('[slot="thumbs"]');
         if (this.listenToThumbnailsOption) {
             salla.event.on('product-options::change', data => {
-                if (data.option.type == 'thumbnail') {
-                    const slideIndex = this.sliderWrapper?.querySelector(`[data-img-id="${data.detail.option_value}"]`)?.getAttribute('data-slid-index');
-                    slideIndex ? this.slideTo(parseInt(slideIndex), 300, false) : '';
+                const isSupportedOptionType = ['thumbnail', 'color'].includes(data?.option?.type);
+                const optionImageId = data?.detail?.option_value;
+                if (!isSupportedOptionType || !optionImageId) {
+                    return;
+                }
+                const slideIndex = this.sliderWrapper
+                    ?.querySelector(`[data-img-id="${optionImageId}"]`)
+                    ?.getAttribute('data-slid-index');
+                if (slideIndex) {
+                    this.slideTo(parseInt(slideIndex), 300, false);
                 }
             });
         }

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var facebook = require('./facebook-DbXua6B9.js');
 var mail = require('./mail-Bgvt2hc9.js');

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var facebook = require('./facebook-DbXua6B9.js');
 
 var instagram = `<!-- Generated by IcoMoon.io -->

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaTabContentCss = "";
 

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

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

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaTooltipCss = ".s-tooltip-container{position:relative;display:inline-block}.s-tooltip-item{position:absolute;transform:translateX(-39%);background-color:#baf3e6;color:#004d5a;bottom:100%;left:50%;text-align:center;border-radius:5px;z-index:1;white-space:nowrap;opacity:0;transition:opacity 0.3s;pointer-events:none;margin:0 0 16px 8px;padding:12px;max-width:150px;width:190px;white-space:normal;opacity:1}.s-tooltip-item::after{content:\"\";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#baf3e6 transparent transparent transparent}.s-tooltip-item:dir(ltr){transform:translateX(-72%)}.s-tooltip-item--dark{background-color:#555555;color:white;padding:5px 15px;border-radius:8px;font-size:12px;font-weight:normal;max-width:330px;width:max-content}.s-tooltip-item--dark::after{border-color:#555555 transparent transparent transparent}";
 

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaTrustBadgesCss = "";
 

package/dist/cjs/salla-user-menu.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var keyboard_arrow_down = require('./keyboard_arrow_down-DHJ3FFZq.js');
 var bellRing = require('./bell-ring-BfKPinNo.js');
 var cart = require('./cart-s-x1Fshk.js');

package/dist/cjs/salla-user-profile.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var interfaces = require('./interfaces-CRqrf5RX.js');
 
 const sallaUserProfileCss = ":host{display:block}";

package/dist/cjs/salla-user-settings.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 var Bullhorn = `<!-- 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/cjs/salla-verify.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 var mail = require('./mail-Bgvt2hc9.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-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 const sallaWalletCss = ".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}";
 

package/dist/cjs/{tracked-promise-DZzEOWGH.js → tracked-promise-BYjrk7x6.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CCPcy3yV.js');
+var index = require('./index-BQnJvBnq.js');
 
 function TrackedPromise(fn, options = {}) {
     options = Object.assign({ initialData: undefined, initialStatus: 'idle' }, options);

package/dist/cjs/twilight.cjs.js

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

package/dist/cjs/{vanilla-picker-BxCWwAM4.js → vanilla-picker-DbbhCpKU.js}

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

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

@@ -154,6 +154,7 @@ export class SallaBulletDelivery {
         this.loading = true;
         // Open modal immediately to show skeleton/loading state
         this.modal.open();
+        Salla.event.dispatch("salla::bullet-delivery.modal.opened");
         try {
             this.isLoggedIn = !this.isGuestUser();
             const savedIntent = this.cleanStaleGuestAddressIdIfNeeded(this.getStoredIntent());
@@ -896,7 +897,7 @@ export class SallaBulletDelivery {
     handleLogin() {
         // Keep bullet-delivery flow in-place and avoid full page reload after login.
         Salla.auth.setCanRedirect(false);
-        Salla.event.dispatch("bullet-delivery::close");
+        Salla.event.dispatch("salla::bullet-delivery.modal.close.requested");
         Salla.event.dispatch("login::open", Salla.url.is_page("cart")
             ? { withoutReload: true, source: "cart-submit" }
             : { withoutReload: true, source: "bullet-delivery" });
@@ -1129,7 +1130,7 @@ export class SallaBulletDelivery {
                 allocation_request: allocationPayload,
                 allocation_response: allocationResult.data ?? null,
             };
-            Salla.event.dispatch("bullet-delivery::allocation.confirmed", allocationConfirmedPayload);
+            Salla.event.dispatch("salla::bullet-delivery.allocation.confirmed", allocationConfirmedPayload);
             this.bulletDeliveryConfirmed.emit({
                 ...result,
                 address: selectedAddress,
@@ -1217,7 +1218,7 @@ export class SallaBulletDelivery {
         btn.setAttribute("fill", "outline");
         btn.setAttribute("color", "primary");
         btn.textContent = buttonText;
-        btn.addEventListener("click", () => Salla.event.emit("bullet-delivery::open", openPayload));
+        btn.addEventListener("click", () => Salla.event.emit("salla::bullet-delivery.modal.open.requested", openPayload));
         const wrapper = document.createElement("div");
         wrapper.className = "s-bullet-delivery-cart-view";
         wrapper.append(info, btn);
@@ -1611,9 +1612,9 @@ export class SallaBulletDelivery {
         catch (e) {
             console.warn("SallaBulletDelivery: overrideScopeSwitchUI failed", e);
         }
-        Salla.event.on("bullet-delivery::open", this.bulletDeliveryOpenHandler);
+        Salla.event.on("salla::bullet-delivery.modal.open.requested", this.bulletDeliveryOpenHandler);
         this.closeHandler = this.close.bind(this);
-        Salla.event.on("bullet-delivery::close", this.closeHandler);
+        Salla.event.on("salla::bullet-delivery.modal.close.requested", this.closeHandler);
         this.isRTL = Salla.config.get("theme.is_rtl");
         this.authLoggedInHandler = () => {
             if (this.cartSubmitConfirmationPending) {
@@ -1659,7 +1660,7 @@ export class SallaBulletDelivery {
         }
     }
     render() {
-        return (h(Host, { key: '83c8404002c477d2eedc8103fde0a8645e81d9a8', class: "s-bullet-delivery" }, h("salla-modal", { key: '5ba5b3fb56422415654e5d48f9656a86abe02c10', ref: (modal) => {
+        return (h(Host, { key: '8ca46eeae00aea840c260c599b10c7c544da1edc', class: "s-bullet-delivery" }, h("salla-modal", { key: '6197fa0b5f3d0a3479d37d9d54a2fe977a632215', ref: (modal) => {
                 this.modal = modal;
             }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), class: "s-bullet-delivery-modal", isLoading: this.loading, width: "sm" }, this.loading ? (this.renderSkeleton()) : (h("div", { class: "s-bullet-delivery-inner" }, this.viewMode === "main" && this.renderMainView(), this.viewMode === "add-address" && this.renderAddAddressForm())))));
     }
@@ -1713,9 +1714,9 @@ export class SallaBulletDelivery {
     }
     disconnectedCallback() {
         this.componentReady = false;
-        Salla.event.off("bullet-delivery::open", this.bulletDeliveryOpenHandler);
+        Salla.event.off("salla::bullet-delivery.modal.open.requested", this.bulletDeliveryOpenHandler);
         if (this.closeHandler) {
-            Salla.event.off("bullet-delivery::close", this.closeHandler);
+            Salla.event.off("salla::bullet-delivery.modal.close.requested", this.closeHandler);
             this.closeHandler = null;
         }
         if (this.cartItemAddedHandler) {

package/dist/collection/components/salla-delivery-promise/salla-delivery-promise.js

@@ -111,7 +111,7 @@ export class SallaDeliveryPromise {
         }
     }
     openBulletDeliveryModal() {
-        salla.event.emit('bullet-delivery::open', buildBulletOpenPayload());
+        salla.event.emit('salla::bullet-delivery.modal.open.requested', buildBulletOpenPayload());
     }
     // ═══════════════════════════════════════════════════════════════════════
     //  Standard flow (city list, no login cycle)

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

@@ -846,7 +846,7 @@ export class SallaProductOptions {
     }
     //@ts-ignore
     colorOption(option) {
-        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`) }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
+        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
     }
     //@ts-ignore
     thumbnailOption(option) {

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

@@ -17,7 +17,7 @@ export class SallaSlider {
          */
         this.blockTitle = '';
         /**
-         * Enable call a specific slide by index from thumbnails option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide
+         * Enable call a specific slide by index from thumbnails or color option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide
          */
         this.listenToThumbnailsOption = false;
         /**
@@ -336,9 +336,16 @@ export class SallaSlider {
         this.hasThumbSlot = !!this.host.querySelector('[slot="thumbs"]');
         if (this.listenToThumbnailsOption) {
             salla.event.on('product-options::change', data => {
-                if (data.option.type == 'thumbnail') {
-                    const slideIndex = this.sliderWrapper?.querySelector(`[data-img-id="${data.detail.option_value}"]`)?.getAttribute('data-slid-index');
-                    slideIndex ? this.slideTo(parseInt(slideIndex), 300, false) : '';
+                const isSupportedOptionType = ['thumbnail', 'color'].includes(data?.option?.type);
+                const optionImageId = data?.detail?.option_value;
+                if (!isSupportedOptionType || !optionImageId) {
+                    return;
+                }
+                const slideIndex = this.sliderWrapper
+                    ?.querySelector(`[data-img-id="${optionImageId}"]`)
+                    ?.getAttribute('data-slid-index');
+                if (slideIndex) {
+                    this.slideTo(parseInt(slideIndex), 300, false);
                 }
             });
         }
@@ -661,7 +668,7 @@ export class SallaSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enable call a specific slide by index from thumbnails option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide"
+                    "text": "Enable call a specific slide by index from thumbnails or color option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide"
                 },
                 "getter": false,
                 "setter": false,