framework7 8.2.0 → 8.3.0

package/framework7-bundle.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.2.0
+ * Framework7 8.3.0
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: July 6, 2023
+ * Released on: August 18, 2023
  */
 
 (function (global, factory) {
@@ -9524,7 +9524,7 @@
             view = $(clickedLinkData.view)[0].f7View;
           } else {
             view = $clickedEl.parents('.view')[0] && $clickedEl.parents('.view')[0].f7View;
-            if (!$clickedLinkEl.hasClass('back') && view && view.params.linksView) {
+            if (view && view.params.linksView && (!$clickedLinkEl.hasClass('back') || $clickedLinkEl.hasClass('back') && view.router.history.length === 1)) {
               if (typeof view.params.linksView === 'string') view = $(view.params.linksView)[0].f7View;else if (view.params.linksView instanceof View$1) view = view.params.linksView;
             }
           }
@@ -9573,31 +9573,65 @@
           const params = {
             ...options
           };
+          const component = (props, ctx) => {
+            const {
+              $h,
+              $onMounted,
+              $el,
+              $f7
+            } = ctx;
+            $onMounted(() => {
+              const viewEl = $el.value.find('.view');
+              const view = $f7.view.create(viewEl, {
+                linksView: router.view.selector,
+                ignoreOpenIn: true,
+                loadInitialPage: false
+              });
+              view.router.navigate(url, {
+                props: options.props,
+                reloadAll: true
+              });
+            });
+            // eslint-disable-next-line
+            return () => {
+              if (options.openIn === 'popup') {
+                return $h`<div class="popup popup-router-open-in" data-url="${url}"><div class="view"></div></div>`;
+              }
+              if (options.openIn === 'loginScreen') {
+                return $h`<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view"></div></div>`;
+              }
+              if (options.openIn === 'sheet') {
+                return $h`<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view"></div></div></div>`;
+              }
+              if (options.openIn === 'popover') {
+                return $h`<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view"></div></div></div>`;
+              }
+              if (options.openIn.indexOf('panel') >= 0) {
+                const parts = options.openIn.split(':');
+                const side = parts[1] || 'left';
+                const effect = parts[2] || 'cover';
+                return $h`<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view"></div></div>`;
+              }
+            };
+          };
           if (options.openIn === 'popup') {
-            params.content = `<div class="popup popup-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
             navigateOptions.route.popup = params;
           }
           if (options.openIn === 'loginScreen') {
-            params.content = `<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
             navigateOptions.route.loginScreen = params;
           }
           if (options.openIn === 'sheet') {
-            params.content = `<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
             navigateOptions.route.sheet = params;
           }
           if (options.openIn === 'popover') {
             params.targetEl = options.clickedEl || options.targetEl;
-            params.content = `<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
             navigateOptions.route.popover = params;
           }
           if (options.openIn.indexOf('panel') >= 0) {
-            const parts = options.openIn.split(':');
-            const side = parts[1] || 'left';
-            const effect = parts[2] || 'cover';
             params.targetEl = options.clickedEl || options.targetEl;
-            params.content = `<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
             navigateOptions.route.panel = params;
           }
+          params.component = component;
           return router.navigate(navigateOptions);
         },
         componentLoader(component, componentUrl, options, resolve, reject) {
@@ -13895,6 +13929,7 @@
           if (popup.params.swipeHandler && $(e.target).closest(popup.params.swipeHandler).length === 0) {
             return;
           }
+          if ($(e.target).closest('.sortable-handler').length > 0) return;
           isTouched = true;
           isMoved = false;
           startTouch = {
@@ -15061,6 +15096,7 @@
         function pushViewScale(offset) {
           return (app.height - offset * 2) / app.height;
         }
+        const useBreakpoints = sheet.params.breakpoints && sheet.params.breakpoints.length > 0;
         let isTouched = false;
         let startTouch;
         let currentTouch;
@@ -15081,11 +15117,15 @@
         let sheetPageContentScrollTop;
         let sheetPageContentScrollHeight;
         let sheetPageContentOffsetHeight;
+        let breakpointsTranslate = [];
+        let currentBreakpointIndex;
+        let backdropBreakpointSet = true;
         function handleTouchStart(e) {
           if (isTouched || !(sheet.params.swipeToClose || sheet.params.swipeToStep) || !e.isTrusted) return;
           if (sheet.params.swipeHandler && $(e.target).closest(sheet.params.swipeHandler).length === 0) {
             return;
           }
+          if ($(e.target).closest('.sortable-handler').length > 0) return;
           isTouched = true;
           isMoved = false;
           startTouch = {
@@ -15137,14 +15177,23 @@
               maxTranslate = 0;
             } else {
               minTranslate = 0;
-              maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : swipeStepTranslate;
+              maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : useBreakpoints ? breakpointsTranslate[0] : swipeStepTranslate;
             }
             isMoved = true;
           }
           currentTranslate = startTranslate - touchesDiff;
           currentTranslate = Math.min(Math.max(currentTranslate, minTranslate), maxTranslate);
           e.preventDefault();
-          if (sheet.push && pushOffset) {
+          if (useBreakpoints) {
+            let progress = isTopSheetModal ? 1 + currentTranslate / sheetElOffsetHeight : 1 - currentTranslate / sheetElOffsetHeight;
+            progress = Math.abs(progress);
+            progress = Math.min(Math.max(progress, 0), 1);
+            // eslint-disable-next-line
+            setBackdropBreakpoint(progress);
+            // eslint-disable-next-line
+            setPushBreakpoint(progress);
+          }
+          if (sheet.push && pushOffset && !useBreakpoints) {
             let progress = (currentTranslate - startTranslate) / sheetElOffsetHeight;
             if (sheet.params.swipeToStep) {
               if (isTopSheetModal) {
@@ -15185,14 +15234,17 @@
           isMoved = false;
           $el.transform('').transition('');
           if (sheet.push && pushOffset) {
-            $pushViewEl.transition('').transform('');
-            $pushViewEl.css('border-radius', '');
+            $pushViewEl.transition('');
+            if (!useBreakpoints) {
+              $pushViewEl.transform('');
+              $pushViewEl.css('border-radius', '');
+            }
           }
           const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
           const diff = Math.abs(touchesDiff);
           if (diff === 0 || currentTranslate === startTranslate) return;
           const timeDiff = new Date().getTime() - touchStartTime;
-          if (!sheet.params.swipeToStep) {
+          if (!sheet.params.swipeToStep && !useBreakpoints) {
             if (direction !== (isTopSheetModal ? 'to-top' : 'to-bottom')) {
               return;
             }
@@ -15205,7 +15257,34 @@
           const closeDirection = isTopSheetModal ? 'to-top' : 'to-bottom';
           const absCurrentTranslate = Math.abs(currentTranslate);
           const absSwipeStepTranslate = Math.abs(swipeStepTranslate);
-          if (timeDiff < 300 && diff > 10) {
+          if (timeDiff < 300 && diff > 10 && useBreakpoints) {
+            // SHORT SWIPES BREAKPOINTS
+            if (direction === openDirection && typeof currentBreakpointIndex !== 'undefined') {
+              if (currentBreakpointIndex === params.breakpoints.length - 1) {
+                // open
+                sheet.setBreakpoint(1);
+              } else {
+                // move to next breakpoint
+                currentBreakpointIndex = Math.min(breakpointsTranslate.length - 1, currentBreakpointIndex + 1);
+                sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+              }
+            }
+            if (direction === closeDirection) {
+              if (currentBreakpointIndex === 0) {
+                // close
+                sheet.close();
+              } else {
+                // move to prev breakpoint
+                if (typeof currentBreakpointIndex === 'undefined') {
+                  currentBreakpointIndex = params.breakpoints.length - 1;
+                } else {
+                  currentBreakpointIndex = Math.max(0, currentBreakpointIndex - 1);
+                }
+                sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+              }
+            }
+          } else if (timeDiff < 300 && diff > 10) {
+            // SHORT SWIPES SWIPE STEP
             if (direction === openDirection && absCurrentTranslate < absSwipeStepTranslate) {
               // open step
               $el.removeClass('modal-in-swipe-step');
@@ -15252,7 +15331,26 @@
             }
             return;
           }
-          if (timeDiff >= 300) {
+          if (timeDiff >= 300 && useBreakpoints) {
+            // LONG SWIPES BREAKPOINTS
+            const allBreakpoints = [sheetElOffsetHeight, ...breakpointsTranslate, 0];
+            const closestTranslate = allBreakpoints.reduce((prev, curr) => {
+              return Math.abs(curr - currentTranslate) < Math.abs(prev - currentTranslate) ? curr : prev;
+            });
+            const closestIndex = allBreakpoints.indexOf(closestTranslate);
+            if (closestTranslate === 0) {
+              // open
+              sheet.setBreakpoint(1);
+            } else if (closestIndex === 0) {
+              // close
+              sheet.close();
+            } else {
+              // set bp
+              currentBreakpointIndex = closestIndex - 1;
+              sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+            }
+          } else if (timeDiff >= 300) {
+            // LONG SWIPES SWIPE STEP
             const stepOpened = !$el.hasClass('modal-in-swipe-step');
             if (!stepOpened) {
               if (absCurrentTranslate < absSwipeStepTranslate / 2) {
@@ -15291,12 +15389,133 @@
             }
           }
         }
+        const setPushBreakpoint = breakpoint => {
+          const {
+            pushBreakpoint
+          } = params;
+          if (pushBreakpoint === null || typeof pushBreakpoint === 'undefined' || !sheet.push || !pushOffset) return;
+          if (breakpoint >= pushBreakpoint) {
+            sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+            $pushViewEl.transition('').forEach(el => {
+              el.style.setProperty('transform', `translate3d(0,0,0) scale(${pushViewScale(pushOffset)})`, 'important');
+            });
+            $pushViewEl.css('border-radius', `${pushBorderRadius * 1}px`);
+          } else {
+            const pushBreakpoints = [0, ...params.breakpoints, 1];
+            const pushTransparentBreakpoint = pushBreakpoints[pushBreakpoints.indexOf(pushBreakpoint) - 1];
+            if (breakpoint <= pushTransparentBreakpoint) {
+              $pushViewEl.transition('').css('transform', '');
+              $pushViewEl.css('border-radius', '');
+              sheet.$htmlEl.removeClass('with-modal-sheet-push');
+              if (breakpoint === pushTransparentBreakpoint) {
+                sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+              }
+            } else {
+              const progress = (breakpoint - pushTransparentBreakpoint) / (pushBreakpoint - pushTransparentBreakpoint);
+              sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+              $pushViewEl.transition(0).forEach(el => {
+                el.style.setProperty('transform', `translate3d(0,0,0) scale(${1 - (1 - pushViewScale(pushOffset)) * progress})`, 'important');
+              });
+              $pushViewEl.css('border-radius', `${pushBorderRadius * progress}px`);
+            }
+          }
+        };
+        const setBackdropBreakpoint = breakpoint => {
+          const {
+            backdrop,
+            backdropBreakpoint
+          } = params;
+          if (!backdropBreakpoint || !backdrop || !$backdropEl.length) return;
+          if (breakpoint >= backdropBreakpoint) {
+            if (!backdropBreakpointSet) {
+              $backdropEl.transition('').css({
+                opacity: '',
+                pointerEvents: ''
+              });
+            }
+            backdropBreakpointSet = true;
+          } else {
+            const backdropBreakpoints = [0, ...params.breakpoints, 1];
+            const backdropTransparentBreakpoint = backdropBreakpoints[backdropBreakpoints.indexOf(backdropBreakpoint) - 1];
+            if (breakpoint <= backdropTransparentBreakpoint) {
+              if (backdropBreakpointSet) {
+                $backdropEl.transition('').css({
+                  opacity: 0,
+                  pointerEvents: 'none'
+                });
+              }
+              backdropBreakpointSet = false;
+            } else {
+              const progress = (breakpoint - backdropTransparentBreakpoint) / (backdropBreakpoint - backdropTransparentBreakpoint);
+              $backdropEl.transition(0).css({
+                opacity: progress,
+                pointerEvents: 'auto'
+              });
+            }
+          }
+        };
+        sheet.calcBreakpoints = () => {
+          if (!useBreakpoints) {
+            return;
+          }
+          const fullSize = $el[0].offsetHeight;
+          // eslint-disable-next-line
+          const isTopSheetModal = $el.hasClass('sheet-modal-top');
+          breakpointsTranslate = [];
+          sheet.params.breakpoints.forEach(ratio => {
+            breakpointsTranslate.push((fullSize - fullSize * ratio) * (isTopSheetModal ? -1 : 1));
+          });
+        };
+        sheet.setBreakpoint = value => {
+          if (!useBreakpoints) {
+            return sheet;
+          }
+          if (value === 1) {
+            // open
+            if (!sheet.opened) {
+              sheet.open();
+            }
+            $el.removeClass('modal-in-breakpoint');
+            currentBreakpointIndex = undefined;
+            setBackdropBreakpoint(value);
+            setPushBreakpoint(value);
+            $el.trigger('sheet:breakpoint', value);
+            sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+          } else if (value === 0) {
+            // close
+            $el.trigger('sheet:breakpoint', value);
+            sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+            sheet.close();
+          } else {
+            const index = params.breakpoints.indexOf(value);
+            if (index < 0) return sheet;
+            if (!sheet.opened) {
+              sheet.open();
+            }
+            setBackdropBreakpoint(value);
+            setPushBreakpoint(value);
+            $el.trigger('sheet:breakpoint', value);
+            sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+            currentBreakpointIndex = index;
+            $el[0].style.setProperty('--f7-sheet-breakpoint', `${breakpointsTranslate[index]}px`);
+            $el.addClass('modal-in-breakpoint');
+          }
+          return sheet;
+        };
+        const setBreakpointsOnResize = () => {
+          sheet.calcBreakpoints();
+          if (typeof currentBreakpointIndex !== 'undefined') {
+            sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+          }
+        };
         sheet.setSwipeStep = function setSwipeStep(byResize) {
           if (byResize === void 0) {
             byResize = true;
           }
           const $swipeStepEl = $el.find('.sheet-modal-swipe-step').eq(0);
           if (!$swipeStepEl.length) return;
+
+          // eslint-disable-next-line
           if ($el.hasClass('sheet-modal-top')) {
             swipeStepTranslate = -($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
           } else {
@@ -15309,12 +15528,16 @@
           }
         };
         function onResize() {
-          sheet.setSwipeStep(true);
+          if (useBreakpoints) {
+            setBreakpointsOnResize();
+          } else {
+            sheet.setSwipeStep(true);
+          }
         }
         const passive = support.passiveListener ? {
           passive: true
         } : false;
-        if (sheet.params.swipeToClose || sheet.params.swipeToStep) {
+        if (sheet.params.swipeToClose || sheet.params.swipeToStep || useBreakpoints) {
           $el.on(app.touchEvents.start, handleTouchStart, passive);
           app.on('touchmove', handleTouchMove);
           app.on('touchend:passive', handleTouchEnd);
@@ -15329,10 +15552,7 @@
             $(document).on('keydown', onKeyDown);
           }
           $el.prevAll('.popup.modal-in').addClass('popup-behind');
-          if (sheet.params.swipeToStep) {
-            sheet.setSwipeStep(false);
-            app.on('resize', onResize);
-          }
+          app.on('resize', onResize);
           if (sheet.params.scrollToEl) {
             scrollToElementOnOpen();
           }
@@ -15342,15 +15562,23 @@
             if (!pushOffset) pushOffset = app.theme === 'ios' ? 44 : 48;
             sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-offset', `${pushOffset}px`);
             $el.addClass('sheet-modal-push');
-            sheet.$htmlEl.addClass('with-modal-sheet-push');
-            if (!sheet.params.swipeToStep) {
+            if (!useBreakpoints) {
+              sheet.$htmlEl.addClass('with-modal-sheet-push');
+            }
+            if (!sheet.params.swipeToStep && !useBreakpoints) {
               sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
             } else {
               $pushViewEl = app.$el.children('.view, .views');
-              pushBorderRadius = parseFloat($el.css(`border-${isTopSheetModal ? 'bottom' : 'top'}-left-radius`));
+              pushBorderRadius = app.theme === 'ios' ? 10 : 16;
               $pushViewEl.css('border-radius', '0px');
             }
           }
+          if (useBreakpoints) {
+            sheet.calcBreakpoints();
+            sheet.setBreakpoint(params.breakpoints[0]);
+          } else if (sheet.params.swipeToStep) {
+            sheet.setSwipeStep(false);
+          }
         });
         sheet.on('opened', () => {
           if (sheet.params.closeByOutsideClick || sheet.params.closeByBackdropClick) {
@@ -15358,8 +15586,9 @@
           }
         });
         sheet.on('close', () => {
-          if (sheet.params.swipeToStep) {
-            $el.removeClass('modal-in-swipe-step');
+          currentBreakpointIndex = undefined;
+          if (sheet.params.swipeToStep || useBreakpoints) {
+            $el.removeClass('modal-in-swipe-step modal-in-breakpoint');
             sheet.emit('local::_swipeStep', false);
             app.off('resize', onResize);
           }
@@ -15376,6 +15605,10 @@
           if (sheet.push && pushOffset) {
             sheet.$htmlEl.removeClass('with-modal-sheet-push');
             sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+            if ($pushViewEl) {
+              $pushViewEl.transform('');
+              $pushViewEl.css('border-radius', '');
+            }
           }
         });
         sheet.on('closed', () => {
@@ -15427,6 +15660,9 @@
           closeOnEscape: false,
           swipeToClose: false,
           swipeToStep: false,
+          breakpoints: [],
+          backdropBreakpoint: 0,
+          pushBreakpoint: 0,
           swipeHandler: null,
           containerEl: null
         }
@@ -15455,6 +15691,11 @@
             const sheetInstance = app.sheet.get(sheet);
             if (sheetInstance && sheetInstance.stepToggle) return sheetInstance.stepToggle();
             return undefined;
+          },
+          setBreakpoint(sheet, breakpoint) {
+            const sheetInstance = app.sheet.get(sheet);
+            if (sheetInstance && sheetInstance.setBreakpoint) return sheetInstance.setBreakpoint(breakpoint);
+            return undefined;
           }
         });
       },
@@ -31084,13 +31325,13 @@
       const init = () => {
         if (!swiper.params.observer) return;
         if (swiper.params.observeParents) {
-          const containerParents = elementParents(swiper.el);
+          const containerParents = elementParents(swiper.hostEl);
           for (let i = 0; i < containerParents.length; i += 1) {
             attach(containerParents[i]);
           }
         }
         // Observe container
-        attach(swiper.el, {
+        attach(swiper.hostEl, {
           childList: swiper.params.observeSlideChildren
         });
 
@@ -31754,7 +31995,10 @@
       const slideSelector = () => swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`;
       const slideEl = imageEl.closest(slideSelector());
       if (slideEl) {
-        const lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+        let lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+        if (!lazyEl && swiper.isElement) {
+          lazyEl = slideEl.shadowRoot.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+        }
         if (lazyEl) lazyEl.remove();
       }
     };
@@ -32101,6 +32345,7 @@
       const swiper = this;
       if (!swiper.params.cssMode) {
         swiper.wrapperEl.style.transitionDuration = `${duration}ms`;
+        swiper.wrapperEl.style.transitionDelay = duration === 0 ? `0ms` : '';
       }
       swiper.emit('setTransition', duration, byController);
     }
@@ -32662,11 +32907,13 @@
               swiper.slideTo(activeIndex + slidesPrepended, 0, false, true);
               if (setTranslate) {
                 swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
+                swiper.touchEventsData.currentTranslate = swiper.translate;
               }
             }
           } else {
             if (setTranslate) {
               swiper.slideToLoop(slideRealIndex, 0, false, true);
+              swiper.touchEventsData.currentTranslate = swiper.translate;
             }
           }
         } else if (appendSlidesIndexes.length > 0 && isNext) {
@@ -32680,6 +32927,7 @@
               swiper.slideTo(activeIndex - slidesAppended, 0, false, true);
               if (setTranslate) {
                 swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
+                swiper.touchEventsData.currentTranslate = swiper.translate;
               }
             }
           } else {
@@ -32692,7 +32940,6 @@
       if (swiper.controller && swiper.controller.control && !byController) {
         const loopParams = {
           slideRealIndex,
-          slideTo: false,
           direction,
           setTranslate,
           activeSlideIndex,
@@ -32700,10 +32947,16 @@
         };
         if (Array.isArray(swiper.controller.control)) {
           swiper.controller.control.forEach(c => {
-            if (!c.destroyed && c.params.loop) c.loopFix(loopParams);
+            if (!c.destroyed && c.params.loop) c.loopFix({
+              ...loopParams,
+              slideTo: c.params.slidesPerView === params.slidesPerView ? slideTo : false
+            });
           });
         } else if (swiper.controller.control instanceof swiper.constructor && swiper.controller.control.params.loop) {
-          swiper.controller.control.loopFix(loopParams);
+          swiper.controller.control.loopFix({
+            ...loopParams,
+            slideTo: swiper.controller.control.params.slidesPerView === params.slidesPerView ? slideTo : false
+          });
         }
       }
       swiper.emit('loopFix');
@@ -33128,8 +33381,8 @@
       if (pointerIndex >= 0) {
         data.evCache.splice(pointerIndex, 1);
       }
-      if (['pointercancel', 'pointerout', 'pointerleave'].includes(event.type)) {
-        const proceed = event.type === 'pointercancel' && (swiper.browser.isSafari || swiper.browser.isWebView);
+      if (['pointercancel', 'pointerout', 'pointerleave', 'contextmenu'].includes(event.type)) {
+        const proceed = ['pointercancel', 'contextmenu'].includes(event.type) && (swiper.browser.isSafari || swiper.browser.isWebView);
         if (!proceed) {
           return;
         }
@@ -33405,6 +33658,9 @@
       document[domMethod]('pointerleave', swiper.onTouchEnd, {
         passive: true
       });
+      document[domMethod]('contextmenu', swiper.onTouchEnd, {
+        passive: true
+      });
 
       // Prevent Links Clicks
       if (params.preventClicks || params.preventClicksPropagation) {
@@ -34223,7 +34479,7 @@
           return false;
         }
         el.swiper = swiper;
-        if (el.parentNode && el.parentNode.host) {
+        if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === 'SWIPER-CONTAINER') {
           swiper.isElement = true;
         }
         const getWrapperSelector = () => {
@@ -34249,7 +34505,7 @@
         Object.assign(swiper, {
           el,
           wrapperEl,
-          slidesEl: swiper.isElement ? el.parentNode.host : wrapperEl,
+          slidesEl: swiper.isElement && !el.parentNode.host.slideSlots ? el.parentNode.host : wrapperEl,
           hostEl: swiper.isElement ? el.parentNode.host : el,
           mounted: true,
           // RTL
@@ -34302,7 +34558,11 @@
 
         // Attach events
         swiper.attachEvents();
-        [...swiper.el.querySelectorAll('[loading="lazy"]')].forEach(imageEl => {
+        const lazyElements = [...swiper.el.querySelectorAll('[loading="lazy"]')];
+        if (swiper.isElement) {
+          lazyElements.push(...swiper.hostEl.querySelectorAll('[loading="lazy"]'));
+        }
+        lazyElements.forEach(imageEl => {
           if (imageEl.complete) {
             processLazyPreloader(swiper, imageEl);
           } else {
@@ -35182,7 +35442,9 @@
             // Stop autoplay
             if (swiper.params.autoplay && swiper.params.autoplayDisableOnInteraction) swiper.autoplay.stop();
             // Return page scroll on edge positions
-            if (position === swiper.minTranslate() || position === swiper.maxTranslate()) return true;
+            if (params.releaseOnEdges && (position === swiper.minTranslate() || position === swiper.maxTranslate())) {
+              return true;
+            }
           }
         }
         if (e.preventDefault) e.preventDefault();else e.returnValue = false;
@@ -35275,10 +35537,7 @@
         nextEl: null,
         prevEl: null
       };
-      const makeElementsArray = el => {
-        if (!Array.isArray(el)) el = [el].filter(e => !!e);
-        return el;
-      };
+      const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);
       function getEl(el) {
         let res;
         if (el && typeof el === 'string' && swiper.isElement) {
@@ -35494,10 +35753,7 @@
       };
       let bulletSize;
       let dynamicBulletIndex = 0;
-      const makeElementsArray = el => {
-        if (!Array.isArray(el)) el = [el].filter(e => !!e);
-        return el;
-      };
+      const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);
       function isPaginationDisabled() {
         return !swiper.params.pagination.el || !swiper.pagination.el || Array.isArray(swiper.pagination.el) && swiper.pagination.el.length === 0;
       }
@@ -35524,14 +35780,20 @@
         const index = elementIndex(bulletEl) * swiper.params.slidesPerGroup;
         if (swiper.params.loop) {
           if (swiper.realIndex === index) return;
+          const realIndex = swiper.realIndex;
           const newSlideIndex = swiper.getSlideIndexByData(index);
           const currentSlideIndex = swiper.getSlideIndexByData(swiper.realIndex);
           if (newSlideIndex > swiper.slides.length - swiper.loopedSlides) {
+            const indexBeforeLoopFix = swiper.activeIndex;
             swiper.loopFix({
               direction: newSlideIndex > currentSlideIndex ? 'next' : 'prev',
               activeSlideIndex: newSlideIndex,
               slideTo: false
             });
+            const indexAfterFix = swiper.activeIndex;
+            if (indexBeforeLoopFix === indexAfterFix) {
+              swiper.slideToLoop(realIndex, 0, false, true);
+            }
           }
           swiper.slideToLoop(index);
         } else {
@@ -35762,7 +36024,7 @@
         el = makeElementsArray(el);
         el.forEach(subEl => {
           if (params.type === 'bullets' && params.clickable) {
-            subEl.classList.add(params.clickableClass);
+            subEl.classList.add(...(params.clickableClass || '').split(' '));
           }
           subEl.classList.add(params.modifierClass + params.type);
           subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
@@ -35795,6 +36057,7 @@
             subEl.classList.remove(params.modifierClass + params.type);
             subEl.classList.remove(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
             if (params.clickable) {
+              subEl.classList.remove(...(params.clickableClass || '').split(' '));
               subEl.removeEventListener('click', onBulletClick);
             }
           });
@@ -36256,6 +36519,7 @@
           enabled: false
         }
       });
+      const elementsSelector = '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]';
       const setTransform = (el, progress) => {
         const {
           rtl
@@ -36307,9 +36571,14 @@
           el,
           slides,
           progress,
-          snapGrid
+          snapGrid,
+          isElement
         } = swiper;
-        elementChildren(el, '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').forEach(subEl => {
+        const elements = elementChildren(el, elementsSelector);
+        if (swiper.isElement) {
+          elements.push(...elementChildren(swiper.hostEl, elementsSelector));
+        }
+        elements.forEach(subEl => {
           setTransform(subEl, progress);
         });
         slides.forEach((slideEl, slideIndex) => {
@@ -36318,7 +36587,7 @@
             slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);
           }
           slideProgress = Math.min(Math.max(slideProgress, -1), 1);
-          slideEl.querySelectorAll('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale], [data-swiper-parallax-rotate]').forEach(subEl => {
+          slideEl.querySelectorAll(`${elementsSelector}, [data-swiper-parallax-rotate]`).forEach(subEl => {
             setTransform(subEl, slideProgress);
           });
         });
@@ -36328,9 +36597,14 @@
           duration = swiper.params.speed;
         }
         const {
-          el
+          el,
+          hostEl
         } = swiper;
-        el.querySelectorAll('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').forEach(parallaxEl => {
+        const elements = [...el.querySelectorAll(elementsSelector)];
+        if (swiper.isElement) {
+          elements.push(...hostEl.querySelectorAll(elementsSelector));
+        }
+        elements.forEach(parallaxEl => {
           let parallaxDuration = parseInt(parallaxEl.getAttribute('data-swiper-parallax-duration'), 10) || duration;
           if (duration === 0) parallaxDuration = 0;
           parallaxEl.style.transitionDuration = `${parallaxDuration}ms`;
@@ -36457,7 +36731,7 @@
       function eventWithinZoomContainer(e) {
         const selector = `.${swiper.params.zoom.containerClass}`;
         if (e.target.matches(selector)) return true;
-        if ([...swiper.el.querySelectorAll(selector)].filter(containerEl => containerEl.contains(e.target)).length > 0) return true;
+        if ([...swiper.hostEl.querySelectorAll(selector)].filter(containerEl => containerEl.contains(e.target)).length > 0) return true;
         return false;
       }
 
@@ -37159,10 +37433,7 @@
         notification.innerHTML = '';
         notification.innerHTML = message;
       }
-      const makeElementsArray = el => {
-        if (!Array.isArray(el)) el = [el].filter(e => !!e);
-        return el;
-      };
+      const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);
       function getRandomNumber(size) {
         if (size === void 0) {
           size = 16;
@@ -37887,6 +38158,7 @@
       const onPointerEnter = e => {
         if (e.pointerType !== 'mouse') return;
         pausedByInteraction = true;
+        if (swiper.animating || swiper.autoplay.paused) return;
         pause(true);
       };
       const onPointerLeave = e => {
@@ -39500,7 +39772,7 @@
     }
 
     /**
-     * Swiper 10.0.3
+     * Swiper 10.2.0
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * https://swiperjs.com
      *
@@ -39508,7 +39780,7 @@
      *
      * Released under the MIT License
      *
-     * Released on: July 3, 2023
+     * Released on: August 17, 2023
      */
 
     // Swiper Class
@@ -39685,6 +39957,7 @@
         if (swiper.isElement && (!paginationEl || typeof paginationEl === 'string')) {
           paginationEl = document.createElement('div');
           paginationEl.classList.add('swiper-pagination');
+          paginationEl.part.add('pagination');
           swiper.el.appendChild(paginationEl);
         }
         if (paginationEl) currentParams.pagination.el = paginationEl;
@@ -39696,6 +39969,7 @@
         if (swiper.isElement && (!scrollbarEl || typeof scrollbarEl === 'string')) {
           scrollbarEl = document.createElement('div');
           scrollbarEl.classList.add('swiper-scrollbar');
+          scrollbarEl.part.add('scrollbar');
           swiper.el.appendChild(scrollbarEl);
         }
         if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
@@ -39708,13 +39982,15 @@
           if (!nextEl || typeof nextEl === 'string') {
             nextEl = document.createElement('div');
             nextEl.classList.add('swiper-button-next');
-            nextEl.innerHTML = swiper.hostEl.nextButtonSvg;
+            nextEl.innerHTML = swiper.hostEl.constructor.nextButtonSvg;
+            nextEl.part.add('button-next');
             swiper.el.appendChild(nextEl);
           }
           if (!prevEl || typeof prevEl === 'string') {
             prevEl = document.createElement('div');
             prevEl.classList.add('swiper-button-prev');
-            nextEl.innerHTML = swiper.hostEl.prevButtonSvg;
+            prevEl.innerHTML = swiper.hostEl.constructor.prevButtonSvg;
+            prevEl.part.add('button-prev');
             swiper.el.appendChild(prevEl);
           }
         }
@@ -39842,7 +40118,7 @@
     }
 
     /**
-     * Swiper Custom Element 10.0.3
+     * Swiper Custom Element 10.2.0
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * https://swiperjs.com
      *
@@ -39850,19 +40126,19 @@
      *
      * Released under the MIT License
      *
-     * Released on: July 3, 2023
+     * Released on: August 17, 2023
      */
 
     /* eslint-disable spaced-comment */
 
-    const SwiperCSS = `:host{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{width:100%;height:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;overflow:clip;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android ::slotted(swiper-slide),.swiper-ios ::slotted(swiper-slide),.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}::slotted(swiper-slide){flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}::slotted(.swiper-slide-invisible-blank){visibility:hidden}.swiper-autoheight,.swiper-autoheight ::slotted(swiper-slide){height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden ::slotted(swiper-slide){transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d ::slotted(swiper-slide){transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode ::slotted(swiper-slide){scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode ::slotted(swiper-slide){scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered ::slotted(swiper-slide){scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal ::slotted(swiper-slide):first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical ::slotted(swiper-slide):first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-virtual ::slotted(swiper-slide){-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:host{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}::slotted(.swiper-slide-zoomed){cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode ::slotted(swiper-slide){transition-timing-function:ease-out}.swiper-fade ::slotted(swiper-slide){pointer-events:none;transition-property:opacity}.swiper-fade ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-fade ::slotted(.swiper-slide-active),.swiper-fade ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-cube.swiper-rtl ::slotted(swiper-slide){transform-origin:100% 0}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-next),.swiper-cube ::slotted(.swiper-slide-prev){pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube ::slotted(.swiper-slide-next)+::slotted(swiper-slide){pointer-events:auto;visibility:visible}.swiper-flip{overflow:visible}.swiper-flip ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-flip ::slotted(.swiper-slide-active),.swiper-flip ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-creative ::slotted(swiper-slide){-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards ::slotted(swiper-slide){transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}`;
-    const SwiperSlideCSS = `::slotted(.swiper-slide-shadow),::slotted(.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-top){position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}::slotted(.swiper-slide-shadow){background:rgba(0,0,0,.15)}::slotted(.swiper-slide-shadow-left){background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-right){background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-top){background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-bottom){background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-lazy-preloader){animation:swiper-preloader-spin 1s infinite linear;width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}`;
+    const SwiperCSS = `:host{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{width:100%;height:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;overflow:clip;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android ::slotted(swiper-slide),.swiper-ios ::slotted(swiper-slide),.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}::slotted(swiper-slide){flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}::slotted(.swiper-slide-invisible-blank){visibility:hidden}.swiper-autoheight,.swiper-autoheight ::slotted(swiper-slide){height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden ::slotted(swiper-slide){transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d ::slotted(swiper-slide){transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode ::slotted(swiper-slide){scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode ::slotted(swiper-slide){scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered ::slotted(swiper-slide){scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal ::slotted(swiper-slide):first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical ::slotted(swiper-slide):first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-virtual ::slotted(swiper-slide){-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:host{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}::slotted(.swiper-slide-zoomed){cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode ::slotted(swiper-slide){transition-timing-function:ease-out}.swiper-fade ::slotted(swiper-slide){pointer-events:none;transition-property:opacity}.swiper-fade ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-fade ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-fade ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-cube.swiper-rtl ::slotted(swiper-slide){transform-origin:100% 0}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-next),.swiper-cube ::slotted(.swiper-slide-prev){pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube ::slotted(.swiper-slide-next)+::slotted(swiper-slide){pointer-events:auto;visibility:visible}.swiper-flip{overflow:visible}.swiper-flip ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-flip ::slotted(.swiper-slide-active),.swiper-flip ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-creative ::slotted(swiper-slide){-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards ::slotted(swiper-slide){transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}`;
+    const SwiperSlideCSS = `::slotted(.swiper-slide-shadow),::slotted(.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-top){position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}::slotted(.swiper-slide-shadow){background:rgba(0,0,0,.15)}::slotted(.swiper-slide-shadow-left){background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-right){background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-top){background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-bottom){background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear;width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-zoom-container){width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}::slotted(.swiper-zoom-container)>canvas,::slotted(.swiper-zoom-container)>img,::slotted(.swiper-zoom-container)>svg{max-width:100%;max-height:100%;object-fit:contain}`;
     class DummyHTMLElement {}
     const ClassToExtend = typeof window === 'undefined' || typeof HTMLElement === 'undefined' ? DummyHTMLElement : HTMLElement;
     const arrowSvg = `<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z" fill="currentColor"/></svg>
     `;
     const addStyle = (shadowRoot, styles) => {
-      if (typeof CSSStyleSheet !== 'undefined' && !shadowRoot.adoptedStyleSheets) {
+      if (typeof CSSStyleSheet !== 'undefined' && shadowRoot.adoptedStyleSheets) {
         const styleSheet = new CSSStyleSheet();
         styleSheet.replaceSync(styles);
         shadowRoot.adoptedStyleSheets = [styleSheet];
@@ -39894,11 +40170,41 @@
       cssLinks() {
         return this.injectStylesUrls || [];
       }
+      calcSlideSlots() {
+        const currentSideSlots = this.slideSlots || 0;
+        // slide slots
+        const slideSlotChildren = [...this.querySelectorAll(`[slot^=slide-]`)].map(child => {
+          return parseInt(child.getAttribute('slot').split('slide-')[1], 10);
+        });
+        this.slideSlots = slideSlotChildren.length ? Math.max(...slideSlotChildren) + 1 : 0;
+        if (!this.rendered) return;
+        if (this.slideSlots > currentSideSlots) {
+          for (let i = currentSideSlots; i < this.slideSlots; i += 1) {
+            const slideEl = document.createElement('swiper-slide');
+            slideEl.setAttribute('part', `slide slide-${i + 1}`);
+            const slotEl = document.createElement('slot');
+            slotEl.setAttribute('name', `slide-${i + 1}`);
+            slideEl.appendChild(slotEl);
+            this.shadowRoot.querySelector('.swiper-wrapper').appendChild(slideEl);
+          }
+        } else if (this.slideSlots < currentSideSlots) {
+          const slides = this.swiper.slides;
+          for (let i = slides.length - 1; i >= 0; i -= 1) {
+            if (i > this.slideSlots) {
+              slides[i].remove();
+            }
+          }
+        }
+      }
       render() {
         if (this.rendered) return;
+        this.calcSlideSlots();
 
         // local styles
-        const localStyles = this.cssStyles();
+        let localStyles = this.cssStyles();
+        if (this.slideSlots > 0) {
+          localStyles = localStyles.replace(/::slotted\(([a-z-0-9.]*)\)/g, '$1');
+        }
         if (localStyles.length) {
           addStyle(this.shadowRoot, localStyles);
         }
@@ -39914,11 +40220,19 @@
         const el = document.createElement('div');
         el.classList.add('swiper');
         el.part = 'container';
+
         // prettier-ignore
         el.innerHTML = `
       <slot name="container-start"></slot>
       <div class="swiper-wrapper" part="wrapper">
         <slot></slot>
+        ${Array.from({
+      length: this.slideSlots
+    }).map((_, index) => `
+        <swiper-slide part="slide slide-${index}">
+          <slot name="slide-${index}"></slot>
+        </swiper-slide>
+        `).join('')}
       </div>
       <slot name="container-end"></slot>
       ${needsNavigation(this.passedParams) ? `
@@ -39947,14 +40261,19 @@
         this.passedParams = passedParams;
         delete this.swiperParams.init;
         this.render();
+
         // eslint-disable-next-line
         this.swiper = new Swiper$1(this.shadowRoot.querySelector('.swiper'), {
-          ...swiperParams,
-          touchEventsTarget: 'container',
           ...(swiperParams.virtual ? {} : {
-            observer: true
+            observer: true,
+            observeSlideChildren: this.slideSlots > 0
           }),
+          ...swiperParams,
+          touchEventsTarget: 'container',
           onAny: function (name) {
+            if (name === 'observerUpdate') {
+              _this.calcSlideSlots();
+            }
             const eventName = swiperParams.eventsPrefix ? `${swiperParams.eventsPrefix}${name.toLowerCase()}` : name.toLowerCase();
             for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
               args[_key - 1] = arguments[_key];
@@ -40051,7 +40370,8 @@
         if (lazy) {
           const lazyDiv = document.createElement('div');
           lazyDiv.classList.add('swiper-lazy-preloader');
-          this.appendChild(lazyDiv);
+          lazyDiv.part.add('preloader');
+          this.shadowRoot.appendChild(lazyDiv);
         }
       }
       initialize() {