@ionic/core 8.8.4-dev.11777393099.1a6ea277 → 8.8.4-dev.11777478428.1c0338ab

package/dist/collection/components/item-sliding/item-sliding.ionic.css

@@ -0,0 +1,280 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+ion-item-sliding {
+  display: block;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
+}
+
+ion-item-sliding .item {
+  user-select: none;
+}
+
+.item-sliding-active-slide.item-sliding-dragging .item {
+  transition: none;
+}
+
+.item-sliding-active-slide.item-sliding-full-swipe-transition .item {
+  transition: transform 250ms ease-out;
+}
+
+.item-sliding-closing ion-item-options {
+  pointer-events: none;
+}
+
+.item-sliding-active-swipe-end .item-options-end .item-option-expandable {
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding-left: 100%;
+  order: 1;
+  transition-duration: 0.6s;
+  transition-property: padding-left;
+}
+:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
+  order: -1;
+}
+
+[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
+  order: -1;
+}
+
+@supports selector(:dir(rtl)) {
+  .item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl) {
+    order: -1;
+  }
+}
+
+.item-sliding-active-swipe-start .item-options-start .item-option-expandable {
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding-right: 100%;
+  order: -1;
+  transition-duration: 0.6s;
+  transition-property: padding-right;
+}
+:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
+  order: 1;
+}
+
+[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
+  order: 1;
+}
+
+@supports selector(:dir(rtl)) {
+  .item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl) {
+    order: 1;
+  }
+}
+
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+.item-sliding-transition-open .item {
+  transition: transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.item-sliding-transition-snapback .item {
+  transition: transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));
+}
+
+.item-sliding-ionic-confirm-item-in .item {
+  transition: transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
+}
+
+.item-sliding-ionic-confirm-item-back .item {
+  transition: transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));
+}
+
+ion-item-option.item-sliding-expandable-width-in {
+  transition: width var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
+}
+
+ion-item-option.item-sliding-expandable-width-back {
+  transition: width var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));
+}
+
+.item-sliding-active-slide .item {
+  position: relative;
+  opacity: 1;
+  z-index: 2;
+  pointer-events: none;
+  will-change: transform;
+}

package/dist/collection/components/item-sliding/{item-sliding.css → item-sliding.ios.css}

@@ -71,13 +71,12 @@ ion-item-sliding .item {
   user-select: none;
 }
 
-.item-sliding-active-slide .item {
-  position: relative;
-  transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
-  opacity: 1;
-  z-index: 2;
-  pointer-events: none;
-  will-change: transform;
+.item-sliding-active-slide.item-sliding-dragging .item {
+  transition: none;
+}
+
+.item-sliding-active-slide.item-sliding-full-swipe-transition .item {
+  transition: transform 250ms ease-out;
 }
 
 .item-sliding-closing ion-item-options {
@@ -124,4 +123,74 @@ ion-item-sliding .item {
   .item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl) {
     order: 1;
   }
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+.item-sliding-active-slide .item {
+  position: relative;
+  transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
+  opacity: 1;
+  z-index: 2;
+  pointer-events: none;
+  will-change: transform;
 }

package/dist/collection/components/item-sliding/item-sliding.js

@@ -9,18 +9,17 @@ import { watchForOptions } from "../../utils/watch-options";
 import { getIonTheme } from "../../global/ionic-global";
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
+const IONIC_ELASTIC_FACTOR = 0.15;
 const IONIC_SNAP_OPEN_RATIO = 0.4;
-const IONIC_EXPAND_TRIGGER = 80;
-const IONIC_VELOCITY_THRESHOLD = 0.4;
+const IONIC_EXPAND_TRIGGER = 40;
+const IONIC_VELOCITY_THRESHOLD = 400;
 const IONIC_ACTION_BASE_WIDTH = 64;
-const IONIC_OPEN_TRANSITION = '250ms cubic-bezier(0.25, 1, 0.5, 1)';
-const IONIC_SNAPBACK_TRANSITION = '300ms cubic-bezier(0.34, 1.4, 0.64, 1)';
-const IONIC_CONFIRM_EASE_IN = '150ms ease-in';
-const IONIC_CONFIRM_SNAPBACK = '480ms cubic-bezier(0.34, 1.4, 0.64, 1)';
-const IONIC_CONFIRM_PAUSE = 900;
+const IONIC_CONFIRM_PAUSE = 300;
+const FULL_SWIPE_TRANSITION_MS = 250;
 const IONIC_EXPAND_RESISTANCE_FACTOR = 0.95;
 /** Expandable, non-disabled option (matches item-option expandable class). */
 const EXPANDABLE_OPTION_SELECTOR = 'ion-item-option.item-option-expandable:not(.item-option-disabled)';
+const ITEM_OPTION_EXPAND_THRESHOLD_CLASS = 'item-option-expand-threshold';
 let openSlidingItem;
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -247,7 +246,7 @@ export class ItemSliding {
             if (!this.item) {
                 return resolve();
             }
-            this.item.style.transition = `transform ${duration}ms ease-out`;
+            this.el.classList.add('item-sliding-full-swipe-transition');
             this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
             const id = setTimeout(resolve, duration);
             signal.addEventListener('abort', () => {
@@ -288,7 +287,7 @@ export class ItemSliding {
             await this.delay(100, signal);
             // Animate off-screen while maintaining the expanded state
             const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
-            await this.animateToPosition(offScreenDistance, 250, signal);
+            await this.animateToPosition(offScreenDistance, FULL_SWIPE_TRANSITION_MS, signal);
             // Trigger action
             if (options) {
                 options.fireSwipeEvent();
@@ -296,7 +295,7 @@ export class ItemSliding {
             // Small delay before returning
             await this.delay(300, signal);
             // Return to closed state
-            await this.animateToPosition(0, 250, signal);
+            await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
         }
         catch (_a) {
             // Animation was aborted (e.g. component disconnected). finally handles cleanup.
@@ -304,8 +303,8 @@ export class ItemSliding {
         finally {
             this.animationAbortController = undefined;
             // Reset state
+            this.el.classList.remove('item-sliding-full-swipe-transition');
             if (this.item) {
-                this.item.style.transition = '';
                 this.item.style.transform = '';
             }
             this.openAmount = 0;
@@ -340,27 +339,41 @@ export class ItemSliding {
     getExpandableBaseWidth(direction) {
         return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
     }
-    setIonicExpandableWidth(direction, width, animate, easing) {
+    setIonicExpandableWidth(direction, width, opening) {
         const expandableOption = this.getExpandableOption(direction);
         if (!expandableOption) {
             return;
         }
         const style = expandableOption.style;
-        style.transition = animate ? `width ${easing !== null && easing !== void 0 ? easing : IONIC_OPEN_TRANSITION}` : 'none';
+        if (opening) {
+            expandableOption.classList.remove('item-sliding-expandable-snapback');
+            expandableOption.classList.add('item-sliding-expandable-open');
+        }
+        else {
+            expandableOption.classList.remove('item-sliding-expandable-open');
+            expandableOption.classList.add('item-sliding-expandable-snapback');
+        }
         const baseWidth = this.getExpandableBaseWidth(direction);
         style.width = `${Math.max(baseWidth, width)}px`;
     }
     resetIonicExpandableOptions() {
         [this.leftOptions, this.rightOptions].forEach((options) => {
+            if (!options) {
+                return;
+            }
+            options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR).forEach((node) => {
+                node.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
+            });
             const expandableOption = this.queryExpandableOption(options);
             if (!expandableOption) {
                 return;
             }
-            expandableOption.style.transition = '';
             expandableOption.style.width = '';
+            expandableOption.classList.remove('item-sliding-expandable-open', 'item-sliding-expandable-snapback', 'item-sliding-expandable-width-in', 'item-sliding-expandable-width-back');
         });
     }
     updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount) {
+        var _a;
         if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
             return;
         }
@@ -371,7 +384,8 @@ export class ItemSliding {
                 this.resetIonicExpandableOptions();
                 return;
             }
-            this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection), isFinal, IONIC_SNAPBACK_TRANSITION);
+            (_a = this.queryExpandableOption(previousDirection === 'end' ? this.rightOptions : this.leftOptions)) === null || _a === void 0 ? void 0 : _a.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
+            this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection), false);
             return;
         }
         const baseWidth = this.getExpandableBaseWidth(direction);
@@ -379,8 +393,16 @@ export class ItemSliding {
         const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
         const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
         const targetWidth = baseWidth + resistedExtraWidth;
-        const easing = openAmount === 0 ? IONIC_SNAPBACK_TRANSITION : IONIC_OPEN_TRANSITION;
-        this.setIonicExpandableWidth(direction, targetWidth, isFinal, easing);
+        const expandableOption = this.getExpandableOption(direction);
+        if (expandableOption) {
+            if (!isFinal && extraWidth >= IONIC_EXPAND_TRIGGER) {
+                expandableOption.classList.add(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
+            }
+            else {
+                expandableOption.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
+            }
+        }
+        this.setIonicExpandableWidth(direction, targetWidth, true);
     }
     async animateIonicFullSwipe(direction) {
         const abortController = new AbortController();
@@ -404,19 +426,23 @@ export class ItemSliding {
             const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
             const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
             if (expandableOption) {
-                expandableOption.style.transition = `width ${IONIC_CONFIRM_EASE_IN}`;
+                expandableOption.classList.remove('item-sliding-expandable-width-back');
+                expandableOption.classList.add('item-sliding-expandable-width-in');
                 expandableOption.style.width = `${expandableTargetWidth}px`;
             }
-            this.item.style.transition = `transform ${IONIC_CONFIRM_EASE_IN}`;
+            this.el.classList.remove('item-sliding-ionic-confirm-item-back');
+            this.el.classList.add('item-sliding-ionic-confirm-item-in');
             this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
             await this.delay(150, signal);
             options === null || options === void 0 ? void 0 : options.fireSwipeEvent();
             await this.delay(IONIC_CONFIRM_PAUSE, signal);
             if (expandableOption) {
-                expandableOption.style.transition = `width ${IONIC_CONFIRM_SNAPBACK}`;
+                expandableOption.classList.remove('item-sliding-expandable-width-in');
+                expandableOption.classList.add('item-sliding-expandable-width-back');
                 expandableOption.style.width = `${baseWidth}px`;
             }
-            this.item.style.transition = `transform ${IONIC_CONFIRM_SNAPBACK}`;
+            this.el.classList.remove('item-sliding-ionic-confirm-item-in');
+            this.el.classList.add('item-sliding-ionic-confirm-item-back');
             this.item.style.transform = 'translate3d(0, 0, 0)';
             await this.delay(480, signal);
         }
@@ -425,8 +451,8 @@ export class ItemSliding {
         }
         finally {
             this.animationAbortController = undefined;
+            this.el.classList.remove('item-sliding-ionic-confirm-item-in', 'item-sliding-ionic-confirm-item-back');
             if (this.item) {
-                this.item.style.transition = '';
                 this.item.style.transform = '';
             }
             this.resetIonicExpandableOptions();
@@ -507,7 +533,12 @@ export class ItemSliding {
         }
         this.initialOpenAmount = this.openAmount;
         if (this.item) {
-            this.item.style.transition = 'none';
+            if (this.isIonicTheme()) {
+                this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
+            }
+            else {
+                this.el.classList.add('item-sliding-dragging');
+            }
         }
     }
     onMove(gesture) {
@@ -530,18 +561,31 @@ export class ItemSliding {
                 printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
                 break;
         }
-        let optsWidth;
-        if (openAmount > this.optsWidthRightSide) {
-            optsWidth = this.optsWidthRightSide;
-            openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+        if (this.isIonicTheme()) {
+            if (openAmount > this.optsWidthRightSide) {
+                const overDrag = openAmount - this.optsWidthRightSide;
+                openAmount = this.optsWidthRightSide + overDrag * IONIC_ELASTIC_FACTOR;
+            }
+            else if (openAmount < -this.optsWidthLeftSide) {
+                const overDrag = openAmount + this.optsWidthLeftSide;
+                openAmount = -this.optsWidthLeftSide + overDrag * IONIC_ELASTIC_FACTOR;
+            }
         }
-        else if (openAmount < -this.optsWidthLeftSide) {
-            optsWidth = -this.optsWidthLeftSide;
-            openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+        else {
+            let optsWidth;
+            if (openAmount > this.optsWidthRightSide) {
+                optsWidth = this.optsWidthRightSide;
+                openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+            }
+            else if (openAmount < -this.optsWidthLeftSide) {
+                optsWidth = -this.optsWidthLeftSide;
+                openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+            }
         }
         this.setOpenAmount(openAmount, false);
     }
     onEnd(gesture) {
+        this.el.classList.remove('item-sliding-dragging');
         this.restoreContentScrollAfterSlide();
         if (this.isIonicTheme()) {
             this.onEndIonic(gesture);
@@ -605,8 +649,10 @@ export class ItemSliding {
         const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
         const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
         const wasRevealed = Math.abs(this.initialOpenAmount) >= optionsWidth;
-        if (hasExpandable &&
-            (extraWidth >= IONIC_EXPAND_TRIGGER || (wasRevealed && velocityX < Math.abs(IONIC_VELOCITY_THRESHOLD * 1000)))) {
+        const closeDirection = activeDirection === 'end' ? velocityX > IONIC_VELOCITY_THRESHOLD : velocityX < -IONIC_VELOCITY_THRESHOLD;
+        if (!closeDirection &&
+            hasExpandable &&
+            (extraWidth >= IONIC_EXPAND_TRIGGER || (extraWidth > 0 && (wasRevealed && Math.abs(velocityX) > IONIC_VELOCITY_THRESHOLD)))) {
             this.animateIonicFullSwipe(activeDirection).catch(() => {
                 if (this.gesture) {
                     this.gesture.enable(!this.disabled);
@@ -614,9 +660,6 @@ export class ItemSliding {
             });
             return;
         }
-        const closeDirection = activeDirection === 'end'
-            ? velocityX > IONIC_VELOCITY_THRESHOLD * 1000
-            : velocityX < -IONIC_VELOCITY_THRESHOLD * 1000;
         if (closeDirection) {
             this.setOpenAmount(0, true);
             return;
@@ -670,8 +713,14 @@ export class ItemSliding {
         if (this.isIonicTheme()) {
             this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
         }
-        if (isFinal) {
-            style.transition = '';
+        if (this.isIonicTheme() && isFinal) {
+            const closing = Math.abs(openAmount) < Math.abs(previousOpenAmount);
+            if (closing) {
+                this.el.classList.add('item-sliding-transition-snapback');
+            }
+            else {
+                this.el.classList.add('item-sliding-transition-open');
+            }
         }
         if (openAmount > 0) {
             const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
@@ -682,18 +731,7 @@ export class ItemSliding {
             this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
         }
         else {
-            /**
-             * The sliding options should not be
-             * clickable while the item is closing.
-             */
             el.classList.add('item-sliding-closing');
-            /**
-             * Item sliding cannot be interrupted
-             * while closing the item. If it did,
-             * it would allow the item to get into an
-             * inconsistent state where multiple
-             * items are then open at the same time.
-             */
             if (this.gesture) {
                 this.gesture.enable(false);
             }
@@ -728,7 +766,7 @@ export class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '7b360e8bf19b76aefa220c4f17af80b8d48caf3f', class: {
+        return (h(Host, { key: '948e61ebcd5fc08bcb6091b62f797da04f931e16', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -740,16 +778,16 @@ export class ItemSliding {
     static get is() { return "ion-item-sliding"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["item-sliding.scss"],
-            "md": ["item-sliding.scss"],
-            "ionic": ["item-sliding.scss"]
+            "ios": ["item-sliding.ios.scss"],
+            "md": ["item-sliding.md.scss"],
+            "ionic": ["item-sliding.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["item-sliding.css"],
-            "md": ["item-sliding.css"],
-            "ionic": ["item-sliding.css"]
+            "ios": ["item-sliding.ios.css"],
+            "md": ["item-sliding.md.css"],
+            "ionic": ["item-sliding.ionic.css"]
         };
     }
     static get properties() {