@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -6,53 +6,40 @@ import { findClosestIonContent, disableContentScrollY, resetContentScrollY } fro
 import { isEndSide } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { watchForOptions } from "../../utils/watch-options";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class ItemSliding {
-    constructor() {
-        this.item = null;
-        this.openAmount = 0;
-        this.initialOpenAmount = 0;
-        this.optsWidthRightSide = 0;
-        this.optsWidthLeftSide = 0;
-        this.sides = 0 /* ItemSide.None */;
-        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';
-    }
+    item = null;
+    openAmount = 0;
+    initialOpenAmount = 0;
+    optsWidthRightSide = 0;
+    optsWidthLeftSide = 0;
+    sides = 0 /* ItemSide.None */;
+    tmr;
+    leftOptions;
+    rightOptions;
+    optsDirty = true;
+    gesture;
+    contentEl = null;
+    initialContentScrollY = true;
+    mutationObserver;
+    el;
+    state = 2 /* SlidingState.Disabled */;
+    /**
+     * If `true`, the user cannot interact with the sliding item.
+     */
+    disabled = false;
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
+    /**
+     * Emitted when the sliding position changes.
+     */
+    ionDrag;
     async connectedCallback() {
         const { el } = this;
         this.item = el.querySelector('ion-item');
@@ -81,18 +68,10 @@ export class ItemSliding {
         this.disabledChanged();
     }
     disconnectedCallback() {
-        var _a;
         if (this.gesture) {
             this.gesture.destroy();
             this.gesture = undefined;
         }
-        if (this.tmr !== undefined) {
-            clearTimeout(this.tmr);
-            this.tmr = undefined;
-        }
-        // Abort any in-progress animation. The abort handler rejects the pending
-        // promise, causing animateFullSwipe's finally block to run cleanup.
-        (_a = this.animationAbortController) === null || _a === void 0 ? void 0 : _a.abort();
         this.item = null;
         this.leftOptions = this.rightOptions = undefined;
         if (openSlidingItem === this.el) {
@@ -125,10 +104,6 @@ export class ItemSliding {
      * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
      */
     async open(side) {
-        var _a;
-        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
-            return;
-        }
         /**
          * It is possible for the item to be added to the DOM
          * after the item-sliding component was created. As a result,
@@ -137,7 +112,7 @@ export class ItemSliding {
          * However, if the item is already defined then
          * we do not query for it again.
          */
-        const item = (this.item = (_a = this.item) !== null && _a !== void 0 ? _a : this.el.querySelector('ion-item'));
+        const item = (this.item = this.item ?? this.el.querySelector('ion-item'));
         if (item === null) {
             return;
         }
@@ -180,9 +155,6 @@ export class ItemSliding {
      * Close the sliding item. Items can also be closed from the [List](./list).
      */
     async close() {
-        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
-            return;
-        }
         this.setOpenAmount(0, true);
     }
     /**
@@ -213,267 +185,7 @@ export class ItemSliding {
             return this.rightOptions;
         }
     }
-    /**
-     * Check if the given item options element contains at least one expandable, non-disabled option.
-     */
-    hasExpandableOptions(options) {
-        if (!options)
-            return false;
-        const optionElements = options.querySelectorAll('ion-item-option');
-        return Array.from(optionElements).some((option) => {
-            return option.expandable === true && !option.disabled;
-        });
-    }
-    /**
-     * Returns a Promise that resolves after `ms` milliseconds, or rejects if the
-     * given AbortSignal is fired before the timer expires.
-     */
-    delay(ms, signal) {
-        return new Promise((resolve, reject) => {
-            const id = setTimeout(resolve, ms);
-            signal.addEventListener('abort', () => {
-                clearTimeout(id);
-                reject(new DOMException('Animation cancelled', 'AbortError'));
-            }, { once: true });
-        });
-    }
-    /**
-     * Animate the item to a specific position using CSS transitions.
-     * Returns a Promise that resolves when the animation completes, or rejects if
-     * the given AbortSignal is fired.
-     */
-    animateToPosition(position, duration, signal) {
-        return new Promise((resolve, reject) => {
-            if (!this.item) {
-                return resolve();
-            }
-            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', () => {
-                clearTimeout(id);
-                reject(new DOMException('Animation cancelled', 'AbortError'));
-            }, { once: true });
-        });
-    }
-    /**
-     * Calculate the swipe threshold distance required to trigger a full swipe animation.
-     * Returns the maximum options width plus a margin to ensure it's achievable.
-     */
-    getSwipeThreshold(direction) {
-        const maxWidth = direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
-        return maxWidth + SWIPE_MARGIN;
-    }
-    /**
-     * Native (ios/md) full swipe: off-screen → fire swipe → return.
-     * Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
-     */
-    async animateFullSwipe(direction) {
-        const abortController = new AbortController();
-        this.animationAbortController = abortController;
-        const { signal } = abortController;
-        // Prevent interruption during animation
-        if (this.gesture) {
-            this.gesture.enable(false);
-        }
-        try {
-            const options = direction === 'end' ? this.rightOptions : this.leftOptions;
-            // Trigger expandable state without moving the item
-            // Set state directly so expandable option fills its container, starting from
-            // the exact position where the user released, without any visual snap.
-            this.state =
-                direction === 'end'
-                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ | 128 /* SlidingState.AnimatingFullSwipe */
-                    : 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ | 128 /* SlidingState.AnimatingFullSwipe */;
-            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, FULL_SWIPE_TRANSITION_MS, signal);
-            // Trigger action
-            if (options) {
-                options.fireSwipeEvent();
-            }
-            // Small delay before returning
-            await this.delay(300, signal);
-            // Return to closed state
-            await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
-        }
-        catch (_a) {
-            // Animation was aborted (e.g. component disconnected). finally handles cleanup.
-        }
-        finally {
-            this.animationAbortController = undefined;
-            // Reset state
-            this.el.classList.remove('item-sliding-full-swipe-transition');
-            if (this.item) {
-                this.item.style.transform = '';
-            }
-            this.openAmount = 0;
-            this.state = 2 /* SlidingState.Disabled */;
-            if (openSlidingItem === this.el) {
-                openSlidingItem = undefined;
-            }
-            if (this.gesture) {
-                this.gesture.enable(!this.disabled);
-            }
-        }
-    }
-    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');
         let sides = 0;
         // Reset left and right options in case they were removed
@@ -487,7 +199,7 @@ export class ItemSliding {
              */
             // eslint-disable-next-line custom-rules/no-component-on-ready-method
             const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
-            const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
+            const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -539,12 +251,7 @@ export class ItemSliding {
         }
         this.initialOpenAmount = this.openAmount;
         if (this.item) {
-            if (this.isIonicTheme()) {
-                this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
-            }
-            else {
-                this.el.classList.add('item-sliding-dragging');
-            }
+            this.item.style.transition = 'none';
         }
     }
     onMove(gesture) {
@@ -567,63 +274,22 @@ export class ItemSliding {
                 printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
                 break;
         }
-        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;
-            }
+        let optsWidth;
+        if (openAmount > this.optsWidthRightSide) {
+            optsWidth = this.optsWidthRightSide;
+            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;
-            }
+        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';
-        const options = direction === 'end' ? this.rightOptions : this.leftOptions;
-        const hasExpandable = this.hasExpandableOptions(options);
-        const shouldTriggerFullSwipe = hasExpandable &&
-            (rawSwipeDistance > this.getSwipeThreshold(direction) ||
-                (Math.abs(gesture.velocityX) > 0.5 &&
-                    rawSwipeDistance > (direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide) * 0.5));
-        if (shouldTriggerFullSwipe) {
-            this.animateFullSwipe(direction).catch(() => {
-                if (this.gesture) {
-                    this.gesture.enable(!this.disabled);
-                }
-            });
-            return;
-        }
         const velocity = gesture.velocityX;
         let restingPoint = this.openAmount > 0 ? this.optsWidthRightSide : -this.optsWidthLeftSide;
         // Check if the drag didn't clear the buttons mid-point
@@ -643,64 +309,17 @@ 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;
@@ -715,30 +334,35 @@ export class ItemSliding {
         }
         const { el } = this;
         const style = this.item.style;
-        const previousOpenAmount = this.openAmount;
         this.openAmount = openAmount;
-        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 (isFinal) {
+            style.transition = '';
         }
         if (openAmount > 0) {
-            const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
-            this.state = fullSwipe ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ : 8 /* SlidingState.End */;
+            this.state =
+                openAmount >= this.optsWidthRightSide + SWIPE_MARGIN
+                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */
+                    : 8 /* SlidingState.End */;
         }
         else if (openAmount < 0) {
-            const fullSwipe = !this.isIonicTheme() && openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN;
-            this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
+            this.state =
+                openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN
+                    ? 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);
             }
@@ -772,9 +396,9 @@ export class ItemSliding {
         }
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '47de8c8a9721f9223b42d6722a9ad32f378818aa', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '15f6a98f8c888e86c29827cdf55d98ace08699dd', class: {
+                [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
                 'item-sliding-active-options-start': (this.state & 16 /* SlidingState.Start */) !== 0,
@@ -785,16 +409,12 @@ export class ItemSliding {
     static get is() { return "ion-item-sliding"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["item-sliding.native.scss"],
-            "md": ["item-sliding.native.scss"],
-            "ionic": ["item-sliding.ionic.scss"]
+            "$": ["item-sliding.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["item-sliding.native.css"],
-            "md": ["item-sliding.native.css"],
-            "ionic": ["item-sliding.ionic.css"]
+            "$": ["item-sliding.css"]
         };
     }
     static get properties() {

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

@@ -2,19 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { expect } from "@playwright/test";
-/**
- * Drag distances that reveal options without crossing the full swipe
- * threshold (`optsWidth` + `SWIPE_MARGIN`). A narrower options panel
- * requires a shorter drag.
- */
-export const DRAG_DISTANCE_SINGLE_OPTION = 100;
-export const DRAG_DISTANCE_MULTIPLE_OPTIONS = 150;
-/**
- * The number of drag steps used when revealing options. A higher step
- * count slows the drag velocity, keeping it below the full swipe
- * threshold in WebKit. See `dragElementBy` for more details.
- */
-export const DRAG_STEPS_UNDER_FULL_SWIPE = 15;
 /**
  * Warning: This function will fail when in RTL mode.
  * TODO(FW-3711): Remove the `directions` config when this issue preventing