chore(): sync with main

core/src/components/action-sheet/action-sheet.ios.scss

@@ -22,11 +22,6 @@
   text-align: $action-sheet-ios-text-align;
 }
 
-.action-sheet-wrapper {
-  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
-}
-
-
 // iOS Action Sheet Container
 // ---------------------------------------------------
 

core/src/components/action-sheet/action-sheet.scss

@@ -67,7 +67,7 @@
 
 .action-sheet-wrapper {
   @include position(null, 0, 0, 0);
-  @include margin(auto);
+  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
   @include transform(translate3d(0, 100%, 0));
 
   display: block;

core/src/components/slides/IonicSlides.ts

@@ -0,0 +1,102 @@
+export const IonicSlides = (opts: any) => {
+  const { swiper, extendParams } = opts;
+  const slidesParams: any = {
+    effect: undefined,
+    direction: 'horizontal',
+    initialSlide: 0,
+    loop: false,
+    parallax: false,
+    slidesPerView: 1,
+    spaceBetween: 0,
+    speed: 300,
+    slidesPerColumn: 1,
+    slidesPerColumnFill: 'column',
+    slidesPerGroup: 1,
+    centeredSlides: false,
+    slidesOffsetBefore: 0,
+    slidesOffsetAfter: 0,
+    touchEventsTarget: 'container',
+    autoplay: false,
+    freeMode: false,
+    freeModeMomentum: true,
+    freeModeMomentumRatio: 1,
+    freeModeMomentumBounce: true,
+    freeModeMomentumBounceRatio: 1,
+    freeModeMomentumVelocityRatio: 1,
+    freeModeSticky: false,
+    freeModeMinimumVelocity: 0.02,
+    autoHeight: false,
+    setWrapperSize: false,
+    zoom: {
+      maxRatio: 3,
+      minRatio: 1,
+      toggle: false,
+    },
+    touchRatio: 1,
+    touchAngle: 45,
+    simulateTouch: true,
+    touchStartPreventDefault: false,
+    shortSwipes: true,
+    longSwipes: true,
+    longSwipesRatio: 0.5,
+    longSwipesMs: 300,
+    followFinger: true,
+    threshold: 0,
+    touchMoveStopPropagation: true,
+    touchReleaseOnEdges: false,
+    iOSEdgeSwipeDetection: false,
+    iOSEdgeSwipeThreshold: 20,
+    resistance: true,
+    resistanceRatio: 0.85,
+    watchSlidesProgress: false,
+    watchSlidesVisibility: false,
+    preventClicks: true,
+    preventClicksPropagation: true,
+    slideToClickedSlide: false,
+    loopAdditionalSlides: 0,
+    noSwiping: true,
+    runCallbacksOnInit: true,
+    coverflowEffect: {
+      rotate: 50,
+      stretch: 0,
+      depth: 100,
+      modifier: 1,
+      slideShadows: true
+    },
+    flipEffect: {
+      slideShadows: true,
+      limitRotation: true
+    },
+    cubeEffect: {
+      slideShadows: true,
+      shadow: true,
+      shadowOffset: 20,
+      shadowScale: 0.94
+    },
+    fadeEffect: {
+      crossFade: false
+    },
+    a11y: {
+      prevSlideMessage: 'Previous slide',
+      nextSlideMessage: 'Next slide',
+      firstSlideMessage: 'This is the first slide',
+      lastSlideMessage: 'This is the last slide'
+    }
+  }
+
+  if (swiper.pagination) {
+    slidesParams.pagination = {
+      type: 'bullets',
+      clickable: false,
+      hideOnClick: false,
+    }
+  }
+
+  if (swiper.scrollbar) {
+    slidesParams.scrollbar = {
+      hide: true
+    }
+  }
+
+  extendParams(slidesParams);
+}

core/src/components/slides/IonicSwiper.ts

@@ -120,6 +120,8 @@ export const IonicSwiper = {
   name: 'ionic',
   on: {
     afterInit(swiper: any) {
+      console.warn('[Deprecation Warning]: The IonicSwiper module has been deprecated in favor of the IonSlides module. This change was made to better support the Swiper 7 release. The IonicSwiper module will be removed in Ionic 7.0. See https://ionicframework.com/docs/api/slides#migration for revised migration steps.');
+
       setupSwiperInIonic(swiper);
     }
   }

core/src/components/virtual-scroll/readme.md

@@ -11,15 +11,15 @@ This guide will go over the recommended virtual scrolling packages for each fram
 
 ## Angular
 
-For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll).
+For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../../angular/virtual-scroll).
 
 ## React
 
-For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll).
+For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../../react/virtual-scroll).
 
 ## Vue
 
-For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll).
+For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../../vue/virtual-scroll).
 
 ------
 

core/src/css/ionic-swiper.scss

@@ -4,7 +4,7 @@
 // Slides
 // --------------------------------------------------
 
-.swiper-container {
+.swiper {
 
   // These values are the same for iOS and MD
   // We just do not add a .md or .ios class beforehand
@@ -33,11 +33,11 @@
 // Pagination Bullets
 // --------------------------------------------------
 
-.swiper-pagination-bullet {
+.swiper .swiper-pagination-bullet {
   background: var(--bullet-background);
 }
 
-.swiper-pagination-bullet-active {
+.swiper .swiper-pagination-bullet-active {
   background: var(--bullet-background-active);
 }
 
@@ -45,36 +45,29 @@
 // Pagination Progress Bar
 // --------------------------------------------------
 
-.swiper-pagination-progressbar {
+.swiper .swiper-pagination-progressbar {
   background: var(--progress-bar-background);
 }
 
-.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
   background: var(--progress-bar-background-active);
 }
 
 // Scrollbar
 // --------------------------------------------------
 
-.swiper-scrollbar {
+.swiper .swiper-scrollbar {
   background: var(--scroll-bar-background);
 }
 
-.swiper-scrollbar-drag {
+.swiper .swiper-scrollbar-drag {
   background: var(--scroll-bar-background-active);
 }
 
 // Slide
 // --------------------------------------------------
 
-ion-slide {
-  display: block;
-
-  width: 100%;
-  height: 100%;
-}
-
-.slide-zoom {
+.swiper .slide-zoom {
   display: block;
 
   width: 100%;
@@ -82,7 +75,7 @@ ion-slide {
   text-align: center;
 }
 
-.swiper-slide {
+.swiper .swiper-slide {
 
   // Center slide text vertically
   display: flex;
@@ -101,7 +94,7 @@ ion-slide {
   box-sizing: border-box;
 }
 
-.swiper-slide img {
+.swiper .swiper-slide img {
   width: auto;
   max-width: 100%;
   height: auto;

core/src/index.ts

@@ -14,3 +14,4 @@ export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECY
 export { menuController } from './utils/menu-controller';
 export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController } from './utils/overlays';
 export { IonicSwiper } from './components/slides/IonicSwiper';
+export { IonicSlides } from './components/slides/IonicSlides';