@ionic/core 8.8.7-dev.11778163906.173cadb1 → 8.8.7-dev.11778599050.191a48e3

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

@@ -0,0 +1,211 @@
+/**
+ * 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-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.
+ */
+.item-sliding-transition-open .item {
+  transition: transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, 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-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-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: var(--token-z-index-100, 100);
+  pointer-events: none;
+  will-change: transform;
+}

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

@@ -9,6 +9,18 @@ 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 = 40;
+const IONIC_FULL_SWIPE_VELOCITY_THRESHOLD = 400;
+const IONIC_OPEN_VELOCITY_THRESHOLD = 200;
+const IONIC_ACTION_BASE_WIDTH = 64;
+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.
@@ -25,12 +37,17 @@ export class ItemSliding {
         this.optsDirty = true;
         this.contentEl = null;
         this.initialContentScrollY = true;
+        this.leftExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
+        this.rightExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
         this.state = 2 /* SlidingState.Disabled */;
         /**
          * If `true`, the user cannot interact with the sliding item.
          */
         this.disabled = false;
     }
+    isIonicTheme() {
+        return getIonTheme(this) === 'ionic';
+    }
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
@@ -230,7 +247,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', () => {
@@ -248,8 +265,8 @@ export class ItemSliding {
         return maxWidth + SWIPE_MARGIN;
     }
     /**
-     * Animate the item through a full swipe sequence: off-screen → trigger action → return.
-     * This is used when an expandable option is swiped beyond the threshold.
+     * Native (ios/md) full swipe: off-screen → fire swipe → return.
+     * Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
      */
     async animateFullSwipe(direction) {
         const abortController = new AbortController();
@@ -271,7 +288,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();
@@ -279,7 +296,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.
@@ -287,8 +304,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;
@@ -301,6 +318,160 @@ export class ItemSliding {
             }
         }
     }
+    queryExpandableOption(options) {
+        if (!options) {
+            return undefined;
+        }
+        const expandableOptions = Array.from(options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR));
+        if (expandableOptions.length === 0) {
+            return undefined;
+        }
+        if (expandableOptions.length === 1) {
+            return expandableOptions[0];
+        }
+        const isRTL = document.dir === 'rtl';
+        const isEndSide = options.classList.contains('item-options-end');
+        // Match native edge behavior for multi-expandable configs
+        const pickLast = (isEndSide && !isRTL) || (!isEndSide && isRTL);
+        return pickLast ? expandableOptions[expandableOptions.length - 1] : expandableOptions[0];
+    }
+    getExpandableOption(direction) {
+        return this.queryExpandableOption(direction === 'end' ? this.rightOptions : this.leftOptions);
+    }
+    getOpenDirectionFromAmount(openAmount) {
+        if (openAmount > 0) {
+            return 'end';
+        }
+        if (openAmount < 0) {
+            return 'start';
+        }
+        return undefined;
+    }
+    getOptionsWidthForDirection(direction) {
+        return direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
+    }
+    getExpandableBaseWidth(direction) {
+        return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
+    }
+    setIonicExpandableWidth(direction, width) {
+        const expandableOption = this.getExpandableOption(direction);
+        if (!expandableOption) {
+            return;
+        }
+        const style = expandableOption.style;
+        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.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;
+        }
+        const direction = this.getOpenDirectionFromAmount(openAmount);
+        if (direction === undefined) {
+            const previousDirection = this.getOpenDirectionFromAmount(previousOpenAmount);
+            if (previousDirection === undefined) {
+                this.resetIonicExpandableOptions();
+                return;
+            }
+            (_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));
+            return;
+        }
+        const baseWidth = this.getExpandableBaseWidth(direction);
+        const optionsWidth = this.getOptionsWidthForDirection(direction);
+        const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
+        const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
+        const targetWidth = baseWidth + resistedExtraWidth;
+        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);
+    }
+    async animateIonicFullSwipe(direction) {
+        const abortController = new AbortController();
+        this.animationAbortController = abortController;
+        const { signal } = abortController;
+        const expandableOption = this.getExpandableOption(direction);
+        const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+        if (this.gesture) {
+            this.gesture.enable(false);
+        }
+        try {
+            this.state =
+                direction === 'end'
+                    ? 8 /* SlidingState.End */ | 128 /* SlidingState.AnimatingFullSwipe */
+                    : 16 /* SlidingState.Start */ | 128 /* SlidingState.AnimatingFullSwipe */;
+            if (!this.item) {
+                return;
+            }
+            const itemWidth = this.el.offsetWidth || window.innerWidth;
+            const baseWidth = this.getExpandableBaseWidth(direction);
+            const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
+            const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
+            if (expandableOption) {
+                expandableOption.classList.remove('item-sliding-expandable-width-back');
+                expandableOption.classList.add('item-sliding-expandable-width-in');
+                expandableOption.style.width = `${expandableTargetWidth}px`;
+            }
+            this.el.classList.remove('item-sliding-confirm-item-back');
+            this.el.classList.add('item-sliding-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.classList.remove('item-sliding-expandable-width-in');
+                expandableOption.classList.add('item-sliding-expandable-width-back');
+                expandableOption.style.width = `${baseWidth}px`;
+            }
+            this.el.classList.remove('item-sliding-confirm-item-in');
+            this.el.classList.add('item-sliding-confirm-item-back');
+            this.item.style.transform = 'translate3d(0, 0, 0)';
+            await this.delay(500, signal);
+        }
+        catch (_a) {
+            // Animation was aborted. finally handles cleanup.
+        }
+        finally {
+            this.animationAbortController = undefined;
+            this.el.classList.remove('item-sliding-confirm-item-in', 'item-sliding-confirm-item-back');
+            if (this.item) {
+                this.item.style.transform = '';
+            }
+            this.resetIonicExpandableOptions();
+            this.openAmount = 0;
+            this.state = 2 /* SlidingState.Disabled */;
+            if (openSlidingItem === this.el) {
+                openSlidingItem = undefined;
+            }
+            if (this.gesture) {
+                this.gesture.enable(!this.disabled);
+            }
+        }
+    }
     async updateOptions() {
         var _a;
         const options = this.el.querySelectorAll('ion-item-options');
@@ -368,7 +539,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) {
@@ -391,22 +567,46 @@ 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);
+        }
+        else {
+            this.onEndNative(gesture);
+        }
+    }
+    restoreContentScrollAfterSlide() {
         const { contentEl, initialContentScrollY } = this;
         if (contentEl) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
+    }
+    onEndNative(gesture) {
         // Check for full swipe conditions with expandable options
         const rawSwipeDistance = Math.abs(gesture.deltaX);
         const direction = gesture.deltaX < 0 ? 'end' : 'start';
@@ -443,17 +643,64 @@ export class ItemSliding {
             this.leftOptions.fireSwipeEvent();
         }
     }
+    onEndIonic(gesture) {
+        const velocity = gesture.velocityX;
+        const velocityX = velocity * 1000;
+        const activeDirection = this.getOpenDirectionFromAmount(this.openAmount);
+        if (activeDirection === undefined) {
+            this.setOpenAmount(0, true);
+            return;
+        }
+        const optionsWidth = this.getOptionsWidthForDirection(activeDirection);
+        const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
+        const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
+        const closeDirection = activeDirection === 'end'
+            ? velocityX > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD
+            : velocityX < -IONIC_FULL_SWIPE_VELOCITY_THRESHOLD;
+        if (closeDirection) {
+            this.setOpenAmount(0, true);
+            return;
+        }
+        if (hasExpandable &&
+            (extraWidth >= IONIC_EXPAND_TRIGGER ||
+                (extraWidth > 0 && Math.abs(velocityX) > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD))) {
+            this.animateIonicFullSwipe(activeDirection).catch(() => {
+                if (this.gesture) {
+                    this.gesture.enable(!this.disabled);
+                }
+            });
+            return;
+        }
+        const flickOpen = activeDirection === 'end'
+            ? velocityX < -IONIC_OPEN_VELOCITY_THRESHOLD
+            : velocityX > IONIC_OPEN_VELOCITY_THRESHOLD;
+        const fullOpen = activeDirection === 'end' ? this.optsWidthRightSide : -this.optsWidthLeftSide;
+        const openThreshold = optionsWidth * IONIC_SNAP_OPEN_RATIO;
+        const shouldSnapOpen = flickOpen || Math.abs(this.openAmount) > openThreshold;
+        const restingPoint = shouldSnapOpen ? fullOpen : 0;
+        this.setOpenAmount(restingPoint, true);
+    }
     calculateOptsWidth() {
         this.optsWidthRightSide = 0;
         if (this.rightOptions) {
             this.rightOptions.style.display = 'flex';
             this.optsWidthRightSide = this.rightOptions.offsetWidth;
+            const rightExpandable = this.queryExpandableOption(this.rightOptions);
+            if (rightExpandable) {
+                rightExpandable.style.width = '';
+                this.rightExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, rightExpandable.getBoundingClientRect().width);
+            }
             this.rightOptions.style.display = '';
         }
         this.optsWidthLeftSide = 0;
         if (this.leftOptions) {
             this.leftOptions.style.display = 'flex';
             this.optsWidthLeftSide = this.leftOptions.offsetWidth;
+            const leftExpandable = this.queryExpandableOption(this.leftOptions);
+            if (leftExpandable) {
+                leftExpandable.style.width = '';
+                this.leftExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, leftExpandable.getBoundingClientRect().width);
+            }
             this.leftOptions.style.display = '';
         }
         this.optsDirty = false;
@@ -468,35 +715,30 @@ export class ItemSliding {
         }
         const { el } = this;
         const style = this.item.style;
+        const previousOpenAmount = this.openAmount;
         this.openAmount = openAmount;
-        if (isFinal) {
-            style.transition = '';
+        if (this.isIonicTheme()) {
+            this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
+        }
+        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) {
-            this.state =
-                openAmount >= this.optsWidthRightSide + SWIPE_MARGIN
-                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */
-                    : 8 /* SlidingState.End */;
+            const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
+            this.state = fullSwipe ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ : 8 /* SlidingState.End */;
         }
         else if (openAmount < 0) {
-            this.state =
-                openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN
-                    ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */
-                    : 16 /* SlidingState.Start */;
+            const fullSwipe = !this.isIonicTheme() && openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN;
+            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);
             }
@@ -531,7 +773,7 @@ export class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'c945f30d9f7deb90d22064d4059e2b08f35614be', class: {
+        return (h(Host, { key: 'ca0730d5ee00f245b6a139d9fb53fcc8c529a8c6', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -543,12 +785,16 @@ export class ItemSliding {
     static get is() { return "ion-item-sliding"; }
     static get originalStyleUrls() {
         return {
-            "$": ["item-sliding.scss"]
+            "ios": ["item-sliding.native.scss"],
+            "md": ["item-sliding.native.scss"],
+            "ionic": ["item-sliding.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["item-sliding.css"]
+            "ios": ["item-sliding.native.css"],
+            "md": ["item-sliding.native.css"],
+            "ionic": ["item-sliding.ionic.css"]
         };
     }
     static get properties() {