@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

package/dist/cjs/ion-item-option_3.cjs.entry.js

@@ -3,74 +3,67 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
-var theme = require('./theme-Bw0rpaNN.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
-var helpers = require('./helpers-YPQybDph.js');
-var index$1 = require('./index-zVCah4Uz.js');
+var index = require('./index-C1knGA9x.js');
+var theme = require('./theme-IlOsGAz7.js');
+var ionicGlobal = require('./ionic-global-DYLhJaw7.js');
+var helpers = require('./helpers-Dhimwhpn.js');
+var index$1 = require('./index-Bsq0SbXc.js');
 var watchOptions = require('./watch-options-CviOsrTS.js');
-require('./dir-zwDPRE5K.js');
+require('./focus-visible-BIj-I3-C.js');
+require('./dir-DD0jPVH3.js');
 
-const itemOptionIosCss = () => `:host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.button-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-padding-start:0.7em;padding-inline-start:0.7em;-webkit-padding-end:0.7em;padding-inline-end:0.7em;padding-top:0;padding-bottom:0;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted([slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:0;min-width:0.9em;font-size:1.8em}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none;-webkit-transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1)}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;opacity:0.5;pointer-events:none}:host{font-size:clamp(16px, 1rem, 35.2px)}:host(.ion-activated){background:var(--ion-color-primary-shade, #004acd)}:host(.ion-color.ion-activated){background:var(--ion-color-shade)}`;
+const itemOptionIonicCss = () => `:host{background:var(--background);color:var(--color)}.button-native{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;pointer-events:none}:host{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-1, 1%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none}.button-native{-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px));padding-top:var(--token-space-200, var(--token-scale-200, 8px));padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));min-width:var(--token-scale-1600, 64px);height:var(--token-scale-1600, 64px)}::slotted([slot=top]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:var(--token-space-100, var(--token-scale-100, 4px))}::slotted([slot=bottom]){margin-left:0;margin-right:0;margin-top:var(--token-space-100, var(--token-scale-100, 4px));margin-bottom:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-100, var(--token-scale-100, 4px));margin-inline-end:var(--token-space-100, var(--token-scale-100, 4px));margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:var(--token-space-100, var(--token-scale-100, 4px));margin-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted(ion-icon),::slotted([slot=icon-only]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;min-width:initial;font-size:var(--token-font-size-500, 1.25rem)}:host(.item-option-round){border-radius:var(--token-border-radius-300, var(--token-scale-300, 12px))}:host(.item-option-soft){border-radius:var(--token-border-radius-200, var(--token-scale-200, 8px))}:host(.item-option-rectangular){border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host(.item-option-disabled)::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none}:host(.item-option-disabled) .button-native{opacity:1}:host(.item-option-subtle){--background:var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--background-activated:var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));--color:var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))))}:host(.item-option-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.item-option-bold){--background:var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));--background-activated:var(--ion-color-primary-shade, var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));--color:var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)))}:host(.item-option-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.item-option-expand-threshold){-webkit-filter:brightness(0.92);filter:brightness(0.92)}`;
 
-const itemOptionMdCss = () => `:host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.button-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-padding-start:0.7em;padding-inline-start:0.7em;-webkit-padding-end:0.7em;padding-inline-end:0.7em;padding-top:0;padding-bottom:0;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted([slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:0;min-width:0.9em;font-size:1.8em}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none;-webkit-transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1)}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;opacity:0.5;pointer-events:none}:host{font-size:0.875rem;font-weight:500;text-transform:uppercase}`;
+const itemOptionIosCss = () => `:host{background:var(--background);color:var(--color)}.button-native{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;pointer-events:none}:host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);font-family:var(--ion-font-family, inherit)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.button-native{-webkit-padding-start:0.7em;padding-inline-start:0.7em;-webkit-padding-end:0.7em;padding-inline-end:0.7em;padding-top:0;padding-bottom:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted([slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:0;min-width:0.9em;font-size:1.8em}:host(.item-option-disabled) .button-native{opacity:0.5}:host(.item-option-expandable){-webkit-transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1)}:host{font-size:clamp(16px, 1rem, 35.2px)}:host(.ion-activated){background:var(--ion-color-primary-shade, #004acd)}:host(.ion-color.ion-activated){background:var(--ion-color-shade)}`;
+
+const itemOptionMdCss = () => `:host{background:var(--background);color:var(--color)}.button-native{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;pointer-events:none}:host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);font-family:var(--ion-font-family, inherit)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.button-native{-webkit-padding-start:0.7em;padding-inline-start:0.7em;-webkit-padding-end:0.7em;padding-inline-end:0.7em;padding-top:0;padding-bottom:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted([slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:0;min-width:0.9em;font-size:1.8em}:host(.item-option-disabled) .button-native{opacity:0.5}:host(.item-option-expandable){-webkit-transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1)}:host{font-size:0.875rem;font-weight:500;text-transform:uppercase}`;
 
 const ItemOption = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * If `true`, the user cannot interact with the item option.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the option will expand to take up the available width and cover any other options.
+         */
+        this.expandable = false;
+        /**
+         * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for
+         * an option with muted, subtle colors.
+         *
+         * Only applies to the `ionic` theme.
+         */
+        this.hue = 'subtle';
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
+        this.onClick = (ev) => {
+            const el = ev.target.closest('ion-item-option');
+            if (el) {
+                ev.preventDefault();
+            }
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * If `true`, the user cannot interact with the item option.
-     */
-    disabled = false;
-    /**
-     * This attribute instructs browsers to download a URL instead of navigating to
-     * it, so the user will be prompted to save it as a local file. If the attribute
-     * has a value, it is used as the pre-filled file name in the Save prompt
-     * (the user can still change the file name if they want).
-     */
-    download;
-    /**
-     * If `true`, the option will expand to take up the available width and cover any other options.
-     */
-    expandable = false;
-    /**
-     * Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered.
-     */
-    href;
-    /**
-     * Specifies the relationship of the target object to the link object.
-     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-     */
-    rel;
-    /**
-     * Specifies where to display the linked URL.
-     * Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
-     */
-    target;
-    /**
-     * The type of the button.
-     */
-    type = 'button';
-    onClick = (ev) => {
-        const el = ev.target.closest('ion-item-option');
-        if (el) {
-            ev.preventDefault();
+    getShape() {
+        const theme = ionicGlobal.getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-10841): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
         }
-    };
+        return shape;
+    }
     render() {
-        const { disabled, expandable, href } = this;
+        const { disabled, expandable, href, hue } = this;
         const TagType = href === undefined ? 'button' : 'a';
-        const mode = ionicGlobal.getIonMode(this);
+        const theme$1 = ionicGlobal.getIonTheme(this);
+        const shape = this.getShape();
         const attrs = TagType === 'button'
             ? { type: this.type }
             : {
@@ -78,38 +71,39 @@ const ItemOption = class {
                 href: this.href,
                 target: this.target,
             };
-        return (index.h(index.Host, { key: 'a10d36e60d61865141c57c03a114e4845b400a55', onClick: this.onClick, class: theme.createColorClasses(this.color, {
-                [mode]: true,
+        return (index.h(index.Host, { key: '8f1bad23fd3ccbb9d54d57765e6731cd2ee07306', onClick: this.onClick, class: theme.createColorClasses(this.color, {
+                [theme$1]: true,
+                [`item-option-${shape}`]: shape !== undefined,
+                [`item-option-${hue}`]: hue !== undefined,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, index.h(TagType, { key: '5cc49ef73318213f6202d1d0f460f629ea65f17f', ...attrs, class: "button-native", part: "native", disabled: disabled }, index.h("span", { key: '0643b16660b4ca00b0f3b4dbe2739e9ce076abea', class: "button-inner", part: "inner" }, index.h("slot", { key: '8778d6d09aa9e0db278ce00c5456a1acfe82c15f', name: "top" }), index.h("div", { key: '4fc849494c8cb2380015161e096b5c61cf517d90', class: "horizontal-wrapper", part: "container" }, index.h("slot", { key: '9d0c0a5a63d8ec636df9c85d48bbdb39fb63af5e', name: "start" }), index.h("slot", { key: 'a40561497c7e7d73173edd24ed335230e6eebb2b', name: "icon-only" }), index.h("slot", { key: 'b94f2a4aa5bf4a1104497ced1920d6ee43d33659' }), index.h("slot", { key: '91713dbb3e6a617c00f950857f2ed5e5ffceaa9a', name: "end" })), index.h("slot", { key: 'f5af33c3bfb50fc629a06e1120bba55da07b2afb', name: "bottom" })), mode === 'md' && index.h("ion-ripple-effect", { key: 'fc56e1644ef9c5b2e1e66683465a7fd09c05215c' }))));
+            }) }, index.h(TagType, Object.assign({ key: '2baf904e356a87ed463ee5f517e0e95f90b2ef30' }, attrs, { class: "button-native", part: "native", disabled: disabled }), index.h("span", { key: '49b627f72dffd1b150ccd808b1b1f63bbe78e2de', class: "button-inner", part: "inner" }, index.h("slot", { key: 'cdb52f76f1d7e5df411215f17eb76ad25e36241a', name: "top" }), index.h("div", { key: '864204667c6e3ba6f989b24e96c131b67e55d408', class: "horizontal-wrapper", part: "container" }, index.h("slot", { key: '474f4aab708842bb7ef74cb6f1fbe601ceff82cf', name: "start" }), index.h("slot", { key: '2bd726c5ba3ee079a623f1f6229d1ac2afd3e291', name: "icon-only" }), index.h("slot", { key: '2d1a673c447ebf82c92f944ec9e83a5b38698307' }), index.h("slot", { key: '8d0f9337cd84c725190cffd25d74044075e85ab0', name: "end" })), index.h("slot", { key: 'a674039b26d9cbb886e88ea721bbc210484aba9f', name: "bottom" })), theme$1 === 'md' && index.h("ion-ripple-effect", { key: '3e45bf18b7992943c47ece47e9358f4da0b8e865' }))));
     }
+    get el() { return index.getElement(this); }
 };
 ItemOption.style = {
+    ionic: itemOptionIonicCss(),
     ios: itemOptionIosCss(),
     md: itemOptionMdCss()
 };
 
-const itemOptionsIosCss = () => `ion-item-options{top:0;right:0;-ms-flex-pack:end;justify-content:flex-end;display:none;position:absolute;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}:host-context([dir=rtl]) ion-item-options{-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] ion-item-options{-ms-flex-pack:start;justify-content:flex-start}[dir=rtl] ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){ion-item-options:dir(rtl){-ms-flex-pack:start;justify-content:flex-start}ion-item-options:dir(rtl):not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}}.item-options-start{right:auto;left:0;-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) .item-options-start{-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] .item-options-start{-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){.item-options-start:dir(rtl){-ms-flex-pack:end;justify-content:flex-end}}[dir=ltr] .item-options-start ion-item-option:first-child,[dir=rtl] .item-options-start ion-item-option:last-child{padding-left:var(--ion-safe-area-left)}[dir=ltr] .item-options-end ion-item-option:last-child,[dir=rtl] .item-options-end ion-item-option:first-child{padding-right:var(--ion-safe-area-right)}:host-context([dir=rtl]) .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}[dir=rtl] .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}@supports selector(:dir(rtl)){.item-sliding-active-slide:dir(rtl).item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}}.item-sliding-active-slide ion-item-options{display:-ms-flexbox;display:flex;visibility:hidden}.item-sliding-active-slide.item-sliding-active-options-start .item-options-start,.item-sliding-active-slide.item-sliding-active-options-end ion-item-options:not(.item-options-start){width:100%;visibility:visible}.item-options-ios{border-bottom-width:0;border-bottom-style:solid;border-bottom-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}.item-options-ios.item-options-end{border-bottom-width:0.55px}.list-ios-lines-none .item-options-ios{border-bottom-width:0}.list-ios-lines-full .item-options-ios,.list-ios-lines-inset .item-options-ios.item-options-end{border-bottom-width:0.55px}`;
+const itemOptionsIonicCss = () => `ion-item-options{top:0;right:0;-ms-flex-pack:end;justify-content:flex-end;display:none;position:absolute;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host-context([dir=rtl]) ion-item-options{-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] ion-item-options{-ms-flex-pack:start;justify-content:flex-start}[dir=rtl] ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){ion-item-options:dir(rtl){-ms-flex-pack:start;justify-content:flex-start}ion-item-options:dir(rtl):not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}}.item-options-start{right:auto;left:0;-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) .item-options-start{-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] .item-options-start{-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){.item-options-start:dir(rtl){-ms-flex-pack:end;justify-content:flex-end}}[dir=ltr] .item-options-start ion-item-option:first-child,[dir=rtl] .item-options-start ion-item-option:last-child{padding-left:var(--ion-safe-area-left)}[dir=ltr] .item-options-end ion-item-option:last-child,[dir=rtl] .item-options-end ion-item-option:first-child{padding-right:var(--ion-safe-area-right)}:host-context([dir=rtl]) .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}[dir=rtl] .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}@supports selector(:dir(rtl)){.item-sliding-active-slide:dir(rtl).item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}}.item-sliding-active-slide ion-item-options{display:-ms-flexbox;display:flex;visibility:hidden}.item-sliding-active-slide.item-sliding-active-options-start .item-options-start,.item-sliding-active-slide.item-sliding-active-options-end ion-item-options:not(.item-options-start){width:100%;visibility:visible}ion-item-options{z-index:1}.item-options-ionic{-ms-flex-align:center;align-items:center;background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));gap:var(--token-space-100, var(--token-scale-100, 4px))}[dir=ltr] .item-options-start ion-item-option:last-child,[dir=rtl] .item-options-start ion-item-option:first-child{margin-right:var(--token-space-200, var(--token-scale-200, 8px))}[dir=ltr] .item-options-start ion-item-option:first-child,[dir=rtl] .item-options-start ion-item-option:last-child{margin-left:calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--ion-safe-area-left, 0));padding-left:initial}[dir=ltr] .item-options-end ion-item-option:first-child,[dir=rtl] .item-options-end ion-item-option:last-child{margin-left:var(--token-space-200, var(--token-scale-200, 8px))}[dir=ltr] .item-options-end ion-item-option:last-child,[dir=rtl] .item-options-end ion-item-option:first-child{margin-right:calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--ion-safe-area-right, 0));padding-right:initial}`;
+
+const itemOptionsIosCss = () => `ion-item-options{top:0;right:0;-ms-flex-pack:end;justify-content:flex-end;display:none;position:absolute;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host-context([dir=rtl]) ion-item-options{-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] ion-item-options{-ms-flex-pack:start;justify-content:flex-start}[dir=rtl] ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){ion-item-options:dir(rtl){-ms-flex-pack:start;justify-content:flex-start}ion-item-options:dir(rtl):not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}}.item-options-start{right:auto;left:0;-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) .item-options-start{-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] .item-options-start{-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){.item-options-start:dir(rtl){-ms-flex-pack:end;justify-content:flex-end}}[dir=ltr] .item-options-start ion-item-option:first-child,[dir=rtl] .item-options-start ion-item-option:last-child{padding-left:var(--ion-safe-area-left)}[dir=ltr] .item-options-end ion-item-option:last-child,[dir=rtl] .item-options-end ion-item-option:first-child{padding-right:var(--ion-safe-area-right)}:host-context([dir=rtl]) .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}[dir=rtl] .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}@supports selector(:dir(rtl)){.item-sliding-active-slide:dir(rtl).item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}}.item-sliding-active-slide ion-item-options{display:-ms-flexbox;display:flex;visibility:hidden}.item-sliding-active-slide.item-sliding-active-options-start .item-options-start,.item-sliding-active-slide.item-sliding-active-options-end ion-item-options:not(.item-options-start){width:100%;visibility:visible}ion-item-options{z-index:1}.item-options-ios{border-bottom-width:0;border-bottom-style:solid;border-bottom-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}.item-options-ios.item-options-end{border-bottom-width:0.55px}.list-ios-lines-none .item-options-ios{border-bottom-width:0}.list-ios-lines-full .item-options-ios,.list-ios-lines-inset .item-options-ios.item-options-end{border-bottom-width:0.55px}`;
 
-const itemOptionsMdCss = () => `ion-item-options{top:0;right:0;-ms-flex-pack:end;justify-content:flex-end;display:none;position:absolute;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}:host-context([dir=rtl]) ion-item-options{-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] ion-item-options{-ms-flex-pack:start;justify-content:flex-start}[dir=rtl] ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){ion-item-options:dir(rtl){-ms-flex-pack:start;justify-content:flex-start}ion-item-options:dir(rtl):not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}}.item-options-start{right:auto;left:0;-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) .item-options-start{-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] .item-options-start{-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){.item-options-start:dir(rtl){-ms-flex-pack:end;justify-content:flex-end}}[dir=ltr] .item-options-start ion-item-option:first-child,[dir=rtl] .item-options-start ion-item-option:last-child{padding-left:var(--ion-safe-area-left)}[dir=ltr] .item-options-end ion-item-option:last-child,[dir=rtl] .item-options-end ion-item-option:first-child{padding-right:var(--ion-safe-area-right)}:host-context([dir=rtl]) .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}[dir=rtl] .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}@supports selector(:dir(rtl)){.item-sliding-active-slide:dir(rtl).item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}}.item-sliding-active-slide ion-item-options{display:-ms-flexbox;display:flex;visibility:hidden}.item-sliding-active-slide.item-sliding-active-options-start .item-options-start,.item-sliding-active-slide.item-sliding-active-options-end ion-item-options:not(.item-options-start){width:100%;visibility:visible}.item-options-md{border-bottom-width:0;border-bottom-style:solid;border-bottom-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))))}.list-md-lines-none .item-options-md{border-bottom-width:0}.list-md-lines-full .item-options-md,.list-md-lines-inset .item-options-md.item-options-end{border-bottom-width:1px}`;
+const itemOptionsMdCss = () => `ion-item-options{top:0;right:0;-ms-flex-pack:end;justify-content:flex-end;display:none;position:absolute;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host-context([dir=rtl]) ion-item-options{-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] ion-item-options{-ms-flex-pack:start;justify-content:flex-start}[dir=rtl] ion-item-options:not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){ion-item-options:dir(rtl){-ms-flex-pack:start;justify-content:flex-start}ion-item-options:dir(rtl):not(.item-options-end){right:auto;left:0;-ms-flex-pack:end;justify-content:flex-end}}.item-options-start{right:auto;left:0;-ms-flex-pack:start;justify-content:flex-start}:host-context([dir=rtl]) .item-options-start{-ms-flex-pack:end;justify-content:flex-end}[dir=rtl] .item-options-start{-ms-flex-pack:end;justify-content:flex-end}@supports selector(:dir(rtl)){.item-options-start:dir(rtl){-ms-flex-pack:end;justify-content:flex-end}}[dir=ltr] .item-options-start ion-item-option:first-child,[dir=rtl] .item-options-start ion-item-option:last-child{padding-left:var(--ion-safe-area-left)}[dir=ltr] .item-options-end ion-item-option:last-child,[dir=rtl] .item-options-end ion-item-option:first-child{padding-right:var(--ion-safe-area-right)}:host-context([dir=rtl]) .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}[dir=rtl] .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}@supports selector(:dir(rtl)){.item-sliding-active-slide:dir(rtl).item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}}.item-sliding-active-slide ion-item-options{display:-ms-flexbox;display:flex;visibility:hidden}.item-sliding-active-slide.item-sliding-active-options-start .item-options-start,.item-sliding-active-slide.item-sliding-active-options-end ion-item-options:not(.item-options-start){width:100%;visibility:visible}ion-item-options{z-index:1}.item-options-md{border-bottom-width:0;border-bottom-style:solid;border-bottom-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))))}.list-md-lines-none .item-options-md{border-bottom-width:0}.list-md-lines-full .item-options-md,.list-md-lines-inset .item-options-md.item-options-end{border-bottom-width:1px}`;
 
 const ItemOptions = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionSwipe = index.createEvent(this, "ionSwipe", 7);
+        /**
+         * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
+         *
+         */
+        this.side = 'end';
     }
-    get el() { return index.getElement(this); }
-    /**
-     * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
-     *
-     */
-    side = 'end';
-    /**
-     * Emitted when the item has been fully swiped.
-     */
-    ionSwipe; // TODO(FW-2832): type
     /** @internal */
     async fireSwipeEvent() {
         this.ionSwipe.emit({
@@ -117,12 +111,12 @@ const ItemOptions = class {
         });
     }
     render() {
-        const mode = ionicGlobal.getIonMode(this);
+        const theme = ionicGlobal.getIonTheme(this);
         const isEnd = helpers.isEndSide(this.side);
-        return (index.h(index.Host, { key: '6e60ff004d48bf7701711e518ec0b21264496ae8', class: {
-                [mode]: true,
+        return (index.h(index.Host, { key: 'ed05ceebf2cda943ac9efea2f91b71f7e8fc55e8', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`item-options-${mode}`]: true,
+                [`item-options-${theme}`]: true,
                 /**
                  * Note: The "start" and "end" terms refer to the
                  * direction ion-item-option instances within ion-item-options flow.
@@ -135,51 +129,64 @@ const ItemOptions = class {
                 'item-options-end': isEnd,
             } }));
     }
+    get el() { return index.getElement(this); }
 };
 ItemOptions.style = {
+    ionic: itemOptionsIonicCss(),
     ios: itemOptionsIosCss(),
     md: itemOptionsMdCss()
 };
 
-const itemSlidingCss = () => `ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-active-slide .item{position:relative;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);opacity:1;z-index:2;pointer-events:none;will-change:transform}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}`;
+const itemSlidingIonicCss = () => `ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}.item-sliding-transition-open .item{-webkit-transition:-webkit-transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1));transition:-webkit-transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1));transition:transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1));transition:transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1)), -webkit-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{-webkit-transition:-webkit-transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:-webkit-transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38)), -webkit-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{-webkit-transition:-webkit-transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:-webkit-transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1)), -webkit-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{-webkit-transition:-webkit-transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:-webkit-transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));transition:transform var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38)), -webkit-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{-webkit-transition:width var(--token-transition-time-150, 150ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));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{-webkit-transition:width var(--token-transition-time-500, 500ms) var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));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}`;
+
+const iosItemSlidingNativeCss = () => `ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}.item-sliding-active-slide .item{position:relative;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-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-full-swipe-transition .item{-webkit-transition:-webkit-transform 250ms ease-out;transition:-webkit-transform 250ms ease-out;transition:transform 250ms ease-out;transition:transform 250ms ease-out, -webkit-transform 250ms ease-out}.item-sliding-active-slide.item-sliding-dragging .item{-webkit-transition:none;transition:none}`;
+
+const mdItemSlidingNativeCss = () => `ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}.item-sliding-active-slide .item{position:relative;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-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-full-swipe-transition .item{-webkit-transition:-webkit-transform 250ms ease-out;transition:-webkit-transform 250ms ease-out;transition:transform 250ms ease-out;transition:transform 250ms ease-out, -webkit-transform 250ms ease-out}.item-sliding-active-slide.item-sliding-dragging .item{-webkit-transition:none;transition:none}`;
 
 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;
 const ItemSliding = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionDrag = index.createEvent(this, "ionDrag", 7);
+        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 ionicGlobal.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;
-    get el() { return index.getElement(this); }
-    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');
@@ -195,7 +202,7 @@ const ItemSliding = class {
             await this.updateOptions();
         });
         await this.updateOptions();
-        this.gesture = (await Promise.resolve().then(function () { return require('./index-DwlRtFZe.js'); })).createGesture({
+        this.gesture = (await Promise.resolve().then(function () { return require('./index-BJ2-LydH.js'); })).createGesture({
             el,
             gestureName: 'item-swipe',
             gesturePriority: 100,
@@ -208,10 +215,18 @@ const ItemSliding = class {
         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) {
@@ -244,6 +259,10 @@ const ItemSliding = class {
      * @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,
@@ -252,7 +271,7 @@ const ItemSliding = class {
          * However, if the item is already defined then
          * we do not query for it again.
          */
-        const item = (this.item = this.item ?? this.el.querySelector('ion-item'));
+        const item = (this.item = (_a = this.item) !== null && _a !== void 0 ? _a : this.el.querySelector('ion-item'));
         if (item === null) {
             return;
         }
@@ -295,6 +314,9 @@ const ItemSliding = class {
      * 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);
     }
     /**
@@ -325,7 +347,267 @@ const ItemSliding = class {
             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
@@ -339,7 +621,7 @@ const ItemSliding = class {
              */
             // eslint-disable-next-line custom-rules/no-component-on-ready-method
             const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
-            const side = helpers.isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
+            const side = helpers.isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -391,7 +673,12 @@ const ItemSliding = class {
         }
         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) {
@@ -414,22 +701,63 @@ const ItemSliding = class {
                 index.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) {
             index$1.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
@@ -449,17 +777,64 @@ const ItemSliding = class {
             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;
@@ -474,35 +849,30 @@ const ItemSliding = class {
         }
         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);
             }
@@ -536,9 +906,9 @@ const ItemSliding = class {
         }
     }
     render() {
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '15f6a98f8c888e86c29827cdf55d98ace08699dd', class: {
-                [mode]: true,
+        const theme = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: '47de8c8a9721f9223b42d6722a9ad32f378818aa', class: {
+                [theme]: 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,
@@ -546,6 +916,7 @@ const ItemSliding = class {
                 'item-sliding-active-swipe-start': (this.state & 64 /* SlidingState.SwipeStart */) !== 0,
             } }));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "disabledChanged": 0
@@ -569,7 +940,11 @@ const swipeShouldReset = (isResetDirection, isMovingFast, isOnResetZone) => {
     // The resulting expression was generated by resolving the K-map (Karnaugh map):
     return (!isMovingFast && isOnResetZone) || (isResetDirection && isMovingFast);
 };
-ItemSliding.style = itemSlidingCss();
+ItemSliding.style = {
+    ionic: itemSlidingIonicCss(),
+    ios: iosItemSlidingNativeCss(),
+    md: mdItemSlidingNativeCss()
+};
 
 exports.ion_item_option = ItemOption;
 exports.ion_item_options = ItemOptions;