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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -71,15 +71,6 @@ ion-item-sliding .item {
71
71
  user-select: none;
72
72
  }
73
73
 
74
- .item-sliding-active-slide .item {
75
- position: relative;
76
- transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
77
- opacity: 1;
78
- z-index: 2;
79
- pointer-events: none;
80
- will-change: transform;
81
- }
82
-
83
74
  .item-sliding-closing ion-item-options {
84
75
  pointer-events: none;
85
76
  }
@@ -124,4 +115,82 @@ ion-item-sliding .item {
124
115
  .item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl) {
125
116
  order: 1;
126
117
  }
118
+ }
119
+
120
+ /**
121
+ * Convert a pixels given value into rem
122
+ *
123
+ * @param pixels - Value in pixels to be converted (i.e. px)
124
+ * @param context (optional) - Baseline value
125
+ */
126
+ /**
127
+ * Convert a font size to a dynamic font size.
128
+ * Fonts that participate in Dynamic Type should use
129
+ * dynamic font sizes.
130
+ * @param size - The initial font size including the unit (i.e. px or pt)
131
+ * @param unit (optional) - The unit to convert to. Use this if you want to
132
+ * convert to a unit other than $baselineUnit.
133
+ */
134
+ /**
135
+ * Convert a font size to a dynamic font size but impose
136
+ * a maximum font size.
137
+ * @param size - The initial font size including the unit (i.e. px or pt)
138
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
139
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
140
+ * convert to a unit other than $baselineUnit.
141
+ */
142
+ /**
143
+ * Convert a font size to a dynamic font size but impose
144
+ * a minimum font size.
145
+ * @param size - The initial font size including the unit (i.e. px or pt)
146
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
147
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
148
+ * convert to a unit other than $baselineUnit.
149
+ */
150
+ /**
151
+ * Convert a font size to a dynamic font size but impose
152
+ * maximum and minimum font sizes.
153
+ * @param size - The initial font size including the unit (i.e. px or pt)
154
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
155
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
156
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
157
+ * convert to a unit other than $baselineUnit.
158
+ */
159
+ /**
160
+ * A heuristic that applies CSS to tablet
161
+ * viewports.
162
+ *
163
+ * Usage:
164
+ * @include tablet-viewport() {
165
+ * :host {
166
+ * background-color: green;
167
+ * }
168
+ * }
169
+ */
170
+ /**
171
+ * A heuristic that applies CSS to mobile
172
+ * viewports (i.e. phones, not tablets).
173
+ *
174
+ * Usage:
175
+ * @include mobile-viewport() {
176
+ * :host {
177
+ * background-color: blue;
178
+ * }
179
+ * }
180
+ */
181
+ .item-sliding-active-slide .item {
182
+ position: relative;
183
+ transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
184
+ opacity: 1;
185
+ z-index: 2;
186
+ pointer-events: none;
187
+ will-change: transform;
188
+ }
189
+
190
+ .item-sliding-active-slide.item-sliding-full-swipe-transition .item {
191
+ transition: transform 250ms ease-out;
192
+ }
193
+
194
+ .item-sliding-active-slide.item-sliding-dragging .item {
195
+ transition: none;
127
196
  }
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2026-05-07T14:27:03",
2
+ "timestamp": "2026-05-12T15:19:49",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.43.0",
@@ -9,7 +9,7 @@ import { f as findClosestIonContent, d as disableContentScrollY, r as resetConte
9
9
  import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
10
10
  import './focus-visible-vXpMhGrs.js';
11
11
 
12
- 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;width:var(--token-scale-500, 20px);min-width:initial;height:var(--token-scale-500, 20px)}: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-expandable){-webkit-transition-timing-function:var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1))}`;
12
+ 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;width:var(--token-scale-500, 20px);min-width:initial;height:var(--token-scale-500, 20px)}: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)}`;
13
13
 
14
14
  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)}`;
15
15
 
@@ -134,10 +134,26 @@ ItemOptions.style = {
134
134
  md: itemOptionsMdCss()
135
135
  };
136
136
 
137
- 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}}`;
137
+ 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}`;
138
+
139
+ 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}`;
140
+
141
+ 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}`;
138
142
 
139
143
  const SWIPE_MARGIN = 30;
140
144
  const ELASTIC_FACTOR = 0.55;
145
+ const IONIC_ELASTIC_FACTOR = 0.15;
146
+ const IONIC_SNAP_OPEN_RATIO = 0.4;
147
+ const IONIC_EXPAND_TRIGGER = 40;
148
+ const IONIC_FULL_SWIPE_VELOCITY_THRESHOLD = 400;
149
+ const IONIC_OPEN_VELOCITY_THRESHOLD = 200;
150
+ const IONIC_ACTION_BASE_WIDTH = 64;
151
+ const IONIC_CONFIRM_PAUSE = 300;
152
+ const FULL_SWIPE_TRANSITION_MS = 250;
153
+ const IONIC_EXPAND_RESISTANCE_FACTOR = 0.95;
154
+ /** Expandable, non-disabled option (matches item-option expandable class). */
155
+ const EXPANDABLE_OPTION_SELECTOR = 'ion-item-option.item-option-expandable:not(.item-option-disabled)';
156
+ const ITEM_OPTION_EXPAND_THRESHOLD_CLASS = 'item-option-expand-threshold';
141
157
  let openSlidingItem;
142
158
  const ItemSliding = class {
143
159
  constructor(hostRef) {
@@ -152,12 +168,17 @@ const ItemSliding = class {
152
168
  this.optsDirty = true;
153
169
  this.contentEl = null;
154
170
  this.initialContentScrollY = true;
171
+ this.leftExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
172
+ this.rightExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
155
173
  this.state = 2 /* SlidingState.Disabled */;
156
174
  /**
157
175
  * If `true`, the user cannot interact with the sliding item.
158
176
  */
159
177
  this.disabled = false;
160
178
  }
179
+ isIonicTheme() {
180
+ return getIonTheme(this) === 'ionic';
181
+ }
161
182
  disabledChanged() {
162
183
  if (this.gesture) {
163
184
  this.gesture.enable(!this.disabled);
@@ -357,7 +378,7 @@ const ItemSliding = class {
357
378
  if (!this.item) {
358
379
  return resolve();
359
380
  }
360
- this.item.style.transition = `transform ${duration}ms ease-out`;
381
+ this.el.classList.add('item-sliding-full-swipe-transition');
361
382
  this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
362
383
  const id = setTimeout(resolve, duration);
363
384
  signal.addEventListener('abort', () => {
@@ -375,8 +396,8 @@ const ItemSliding = class {
375
396
  return maxWidth + SWIPE_MARGIN;
376
397
  }
377
398
  /**
378
- * Animate the item through a full swipe sequence: off-screen → trigger action → return.
379
- * This is used when an expandable option is swiped beyond the threshold.
399
+ * Native (ios/md) full swipe: off-screen → fire swipe → return.
400
+ * Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
380
401
  */
381
402
  async animateFullSwipe(direction) {
382
403
  const abortController = new AbortController();
@@ -398,7 +419,7 @@ const ItemSliding = class {
398
419
  await this.delay(100, signal);
399
420
  // Animate off-screen while maintaining the expanded state
400
421
  const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
401
- await this.animateToPosition(offScreenDistance, 250, signal);
422
+ await this.animateToPosition(offScreenDistance, FULL_SWIPE_TRANSITION_MS, signal);
402
423
  // Trigger action
403
424
  if (options) {
404
425
  options.fireSwipeEvent();
@@ -406,7 +427,7 @@ const ItemSliding = class {
406
427
  // Small delay before returning
407
428
  await this.delay(300, signal);
408
429
  // Return to closed state
409
- await this.animateToPosition(0, 250, signal);
430
+ await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
410
431
  }
411
432
  catch (_a) {
412
433
  // Animation was aborted (e.g. component disconnected). finally handles cleanup.
@@ -414,8 +435,8 @@ const ItemSliding = class {
414
435
  finally {
415
436
  this.animationAbortController = undefined;
416
437
  // Reset state
438
+ this.el.classList.remove('item-sliding-full-swipe-transition');
417
439
  if (this.item) {
418
- this.item.style.transition = '';
419
440
  this.item.style.transform = '';
420
441
  }
421
442
  this.openAmount = 0;
@@ -428,6 +449,160 @@ const ItemSliding = class {
428
449
  }
429
450
  }
430
451
  }
452
+ queryExpandableOption(options) {
453
+ if (!options) {
454
+ return undefined;
455
+ }
456
+ const expandableOptions = Array.from(options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR));
457
+ if (expandableOptions.length === 0) {
458
+ return undefined;
459
+ }
460
+ if (expandableOptions.length === 1) {
461
+ return expandableOptions[0];
462
+ }
463
+ const isRTL = document.dir === 'rtl';
464
+ const isEndSide = options.classList.contains('item-options-end');
465
+ // Match native edge behavior for multi-expandable configs
466
+ const pickLast = (isEndSide && !isRTL) || (!isEndSide && isRTL);
467
+ return pickLast ? expandableOptions[expandableOptions.length - 1] : expandableOptions[0];
468
+ }
469
+ getExpandableOption(direction) {
470
+ return this.queryExpandableOption(direction === 'end' ? this.rightOptions : this.leftOptions);
471
+ }
472
+ getOpenDirectionFromAmount(openAmount) {
473
+ if (openAmount > 0) {
474
+ return 'end';
475
+ }
476
+ if (openAmount < 0) {
477
+ return 'start';
478
+ }
479
+ return undefined;
480
+ }
481
+ getOptionsWidthForDirection(direction) {
482
+ return direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
483
+ }
484
+ getExpandableBaseWidth(direction) {
485
+ return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
486
+ }
487
+ setIonicExpandableWidth(direction, width) {
488
+ const expandableOption = this.getExpandableOption(direction);
489
+ if (!expandableOption) {
490
+ return;
491
+ }
492
+ const style = expandableOption.style;
493
+ const baseWidth = this.getExpandableBaseWidth(direction);
494
+ style.width = `${Math.max(baseWidth, width)}px`;
495
+ }
496
+ resetIonicExpandableOptions() {
497
+ [this.leftOptions, this.rightOptions].forEach((options) => {
498
+ if (!options) {
499
+ return;
500
+ }
501
+ options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR).forEach((node) => {
502
+ node.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
503
+ });
504
+ const expandableOption = this.queryExpandableOption(options);
505
+ if (!expandableOption) {
506
+ return;
507
+ }
508
+ expandableOption.style.width = '';
509
+ expandableOption.classList.remove('item-sliding-expandable-open', 'item-sliding-expandable-snapback', 'item-sliding-expandable-width-in', 'item-sliding-expandable-width-back');
510
+ });
511
+ }
512
+ updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount) {
513
+ var _a;
514
+ if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
515
+ return;
516
+ }
517
+ const direction = this.getOpenDirectionFromAmount(openAmount);
518
+ if (direction === undefined) {
519
+ const previousDirection = this.getOpenDirectionFromAmount(previousOpenAmount);
520
+ if (previousDirection === undefined) {
521
+ this.resetIonicExpandableOptions();
522
+ return;
523
+ }
524
+ (_a = this.queryExpandableOption(previousDirection === 'end' ? this.rightOptions : this.leftOptions)) === null || _a === void 0 ? void 0 : _a.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
525
+ this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection));
526
+ return;
527
+ }
528
+ const baseWidth = this.getExpandableBaseWidth(direction);
529
+ const optionsWidth = this.getOptionsWidthForDirection(direction);
530
+ const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
531
+ const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
532
+ const targetWidth = baseWidth + resistedExtraWidth;
533
+ const expandableOption = this.getExpandableOption(direction);
534
+ if (expandableOption) {
535
+ if (!isFinal && extraWidth >= IONIC_EXPAND_TRIGGER) {
536
+ expandableOption.classList.add(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
537
+ }
538
+ else {
539
+ expandableOption.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
540
+ }
541
+ }
542
+ this.setIonicExpandableWidth(direction, targetWidth);
543
+ }
544
+ async animateIonicFullSwipe(direction) {
545
+ const abortController = new AbortController();
546
+ this.animationAbortController = abortController;
547
+ const { signal } = abortController;
548
+ const expandableOption = this.getExpandableOption(direction);
549
+ const options = direction === 'end' ? this.rightOptions : this.leftOptions;
550
+ if (this.gesture) {
551
+ this.gesture.enable(false);
552
+ }
553
+ try {
554
+ this.state =
555
+ direction === 'end'
556
+ ? 8 /* SlidingState.End */ | 128 /* SlidingState.AnimatingFullSwipe */
557
+ : 16 /* SlidingState.Start */ | 128 /* SlidingState.AnimatingFullSwipe */;
558
+ if (!this.item) {
559
+ return;
560
+ }
561
+ const itemWidth = this.el.offsetWidth || window.innerWidth;
562
+ const baseWidth = this.getExpandableBaseWidth(direction);
563
+ const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
564
+ const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
565
+ if (expandableOption) {
566
+ expandableOption.classList.remove('item-sliding-expandable-width-back');
567
+ expandableOption.classList.add('item-sliding-expandable-width-in');
568
+ expandableOption.style.width = `${expandableTargetWidth}px`;
569
+ }
570
+ this.el.classList.remove('item-sliding-confirm-item-back');
571
+ this.el.classList.add('item-sliding-confirm-item-in');
572
+ this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
573
+ await this.delay(150, signal);
574
+ options === null || options === void 0 ? void 0 : options.fireSwipeEvent();
575
+ await this.delay(IONIC_CONFIRM_PAUSE, signal);
576
+ if (expandableOption) {
577
+ expandableOption.classList.remove('item-sliding-expandable-width-in');
578
+ expandableOption.classList.add('item-sliding-expandable-width-back');
579
+ expandableOption.style.width = `${baseWidth}px`;
580
+ }
581
+ this.el.classList.remove('item-sliding-confirm-item-in');
582
+ this.el.classList.add('item-sliding-confirm-item-back');
583
+ this.item.style.transform = 'translate3d(0, 0, 0)';
584
+ await this.delay(500, signal);
585
+ }
586
+ catch (_a) {
587
+ // Animation was aborted. finally handles cleanup.
588
+ }
589
+ finally {
590
+ this.animationAbortController = undefined;
591
+ this.el.classList.remove('item-sliding-confirm-item-in', 'item-sliding-confirm-item-back');
592
+ if (this.item) {
593
+ this.item.style.transform = '';
594
+ }
595
+ this.resetIonicExpandableOptions();
596
+ this.openAmount = 0;
597
+ this.state = 2 /* SlidingState.Disabled */;
598
+ if (openSlidingItem === this.el) {
599
+ openSlidingItem = undefined;
600
+ }
601
+ if (this.gesture) {
602
+ this.gesture.enable(!this.disabled);
603
+ }
604
+ }
605
+ }
431
606
  async updateOptions() {
432
607
  var _a;
433
608
  const options = this.el.querySelectorAll('ion-item-options');
@@ -495,7 +670,12 @@ const ItemSliding = class {
495
670
  }
496
671
  this.initialOpenAmount = this.openAmount;
497
672
  if (this.item) {
498
- this.item.style.transition = 'none';
673
+ if (this.isIonicTheme()) {
674
+ this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
675
+ }
676
+ else {
677
+ this.el.classList.add('item-sliding-dragging');
678
+ }
499
679
  }
500
680
  }
501
681
  onMove(gesture) {
@@ -518,22 +698,46 @@ const ItemSliding = class {
518
698
  printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
519
699
  break;
520
700
  }
521
- let optsWidth;
522
- if (openAmount > this.optsWidthRightSide) {
523
- optsWidth = this.optsWidthRightSide;
524
- openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
701
+ if (this.isIonicTheme()) {
702
+ if (openAmount > this.optsWidthRightSide) {
703
+ const overDrag = openAmount - this.optsWidthRightSide;
704
+ openAmount = this.optsWidthRightSide + overDrag * IONIC_ELASTIC_FACTOR;
705
+ }
706
+ else if (openAmount < -this.optsWidthLeftSide) {
707
+ const overDrag = openAmount + this.optsWidthLeftSide;
708
+ openAmount = -this.optsWidthLeftSide + overDrag * IONIC_ELASTIC_FACTOR;
709
+ }
525
710
  }
526
- else if (openAmount < -this.optsWidthLeftSide) {
527
- optsWidth = -this.optsWidthLeftSide;
528
- openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
711
+ else {
712
+ let optsWidth;
713
+ if (openAmount > this.optsWidthRightSide) {
714
+ optsWidth = this.optsWidthRightSide;
715
+ openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
716
+ }
717
+ else if (openAmount < -this.optsWidthLeftSide) {
718
+ optsWidth = -this.optsWidthLeftSide;
719
+ openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
720
+ }
529
721
  }
530
722
  this.setOpenAmount(openAmount, false);
531
723
  }
532
724
  onEnd(gesture) {
725
+ this.el.classList.remove('item-sliding-dragging');
726
+ this.restoreContentScrollAfterSlide();
727
+ if (this.isIonicTheme()) {
728
+ this.onEndIonic(gesture);
729
+ }
730
+ else {
731
+ this.onEndNative(gesture);
732
+ }
733
+ }
734
+ restoreContentScrollAfterSlide() {
533
735
  const { contentEl, initialContentScrollY } = this;
534
736
  if (contentEl) {
535
737
  resetContentScrollY(contentEl, initialContentScrollY);
536
738
  }
739
+ }
740
+ onEndNative(gesture) {
537
741
  // Check for full swipe conditions with expandable options
538
742
  const rawSwipeDistance = Math.abs(gesture.deltaX);
539
743
  const direction = gesture.deltaX < 0 ? 'end' : 'start';
@@ -570,17 +774,64 @@ const ItemSliding = class {
570
774
  this.leftOptions.fireSwipeEvent();
571
775
  }
572
776
  }
777
+ onEndIonic(gesture) {
778
+ const velocity = gesture.velocityX;
779
+ const velocityX = velocity * 1000;
780
+ const activeDirection = this.getOpenDirectionFromAmount(this.openAmount);
781
+ if (activeDirection === undefined) {
782
+ this.setOpenAmount(0, true);
783
+ return;
784
+ }
785
+ const optionsWidth = this.getOptionsWidthForDirection(activeDirection);
786
+ const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
787
+ const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
788
+ const closeDirection = activeDirection === 'end'
789
+ ? velocityX > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD
790
+ : velocityX < -400;
791
+ if (closeDirection) {
792
+ this.setOpenAmount(0, true);
793
+ return;
794
+ }
795
+ if (hasExpandable &&
796
+ (extraWidth >= IONIC_EXPAND_TRIGGER ||
797
+ (extraWidth > 0 && Math.abs(velocityX) > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD))) {
798
+ this.animateIonicFullSwipe(activeDirection).catch(() => {
799
+ if (this.gesture) {
800
+ this.gesture.enable(!this.disabled);
801
+ }
802
+ });
803
+ return;
804
+ }
805
+ const flickOpen = activeDirection === 'end'
806
+ ? velocityX < -200
807
+ : velocityX > IONIC_OPEN_VELOCITY_THRESHOLD;
808
+ const fullOpen = activeDirection === 'end' ? this.optsWidthRightSide : -this.optsWidthLeftSide;
809
+ const openThreshold = optionsWidth * IONIC_SNAP_OPEN_RATIO;
810
+ const shouldSnapOpen = flickOpen || Math.abs(this.openAmount) > openThreshold;
811
+ const restingPoint = shouldSnapOpen ? fullOpen : 0;
812
+ this.setOpenAmount(restingPoint, true);
813
+ }
573
814
  calculateOptsWidth() {
574
815
  this.optsWidthRightSide = 0;
575
816
  if (this.rightOptions) {
576
817
  this.rightOptions.style.display = 'flex';
577
818
  this.optsWidthRightSide = this.rightOptions.offsetWidth;
819
+ const rightExpandable = this.queryExpandableOption(this.rightOptions);
820
+ if (rightExpandable) {
821
+ rightExpandable.style.width = '';
822
+ this.rightExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, rightExpandable.getBoundingClientRect().width);
823
+ }
578
824
  this.rightOptions.style.display = '';
579
825
  }
580
826
  this.optsWidthLeftSide = 0;
581
827
  if (this.leftOptions) {
582
828
  this.leftOptions.style.display = 'flex';
583
829
  this.optsWidthLeftSide = this.leftOptions.offsetWidth;
830
+ const leftExpandable = this.queryExpandableOption(this.leftOptions);
831
+ if (leftExpandable) {
832
+ leftExpandable.style.width = '';
833
+ this.leftExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, leftExpandable.getBoundingClientRect().width);
834
+ }
584
835
  this.leftOptions.style.display = '';
585
836
  }
586
837
  this.optsDirty = false;
@@ -595,35 +846,30 @@ const ItemSliding = class {
595
846
  }
596
847
  const { el } = this;
597
848
  const style = this.item.style;
849
+ const previousOpenAmount = this.openAmount;
598
850
  this.openAmount = openAmount;
599
- if (isFinal) {
600
- style.transition = '';
851
+ if (this.isIonicTheme()) {
852
+ this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
853
+ }
854
+ if (this.isIonicTheme() && isFinal) {
855
+ const closing = Math.abs(openAmount) < Math.abs(previousOpenAmount);
856
+ if (closing) {
857
+ this.el.classList.add('item-sliding-transition-snapback');
858
+ }
859
+ else {
860
+ this.el.classList.add('item-sliding-transition-open');
861
+ }
601
862
  }
602
863
  if (openAmount > 0) {
603
- this.state =
604
- openAmount >= this.optsWidthRightSide + SWIPE_MARGIN
605
- ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */
606
- : 8 /* SlidingState.End */;
864
+ const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
865
+ this.state = fullSwipe ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ : 8 /* SlidingState.End */;
607
866
  }
608
867
  else if (openAmount < 0) {
609
- this.state =
610
- openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN
611
- ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */
612
- : 16 /* SlidingState.Start */;
868
+ const fullSwipe = !this.isIonicTheme() && openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN;
869
+ this.state = fullSwipe ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ : 16 /* SlidingState.Start */;
613
870
  }
614
871
  else {
615
- /**
616
- * The sliding options should not be
617
- * clickable while the item is closing.
618
- */
619
872
  el.classList.add('item-sliding-closing');
620
- /**
621
- * Item sliding cannot be interrupted
622
- * while closing the item. If it did,
623
- * it would allow the item to get into an
624
- * inconsistent state where multiple
625
- * items are then open at the same time.
626
- */
627
873
  if (this.gesture) {
628
874
  this.gesture.enable(false);
629
875
  }
@@ -658,7 +904,7 @@ const ItemSliding = class {
658
904
  }
659
905
  render() {
660
906
  const theme = getIonTheme(this);
661
- return (h(Host, { key: 'c945f30d9f7deb90d22064d4059e2b08f35614be', class: {
907
+ return (h(Host, { key: 'ca0730d5ee00f245b6a139d9fb53fcc8c529a8c6', class: {
662
908
  [theme]: true,
663
909
  'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
664
910
  'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -691,6 +937,10 @@ const swipeShouldReset = (isResetDirection, isMovingFast, isOnResetZone) => {
691
937
  // The resulting expression was generated by resolving the K-map (Karnaugh map):
692
938
  return (!isMovingFast && isOnResetZone) || (isResetDirection && isMovingFast);
693
939
  };
694
- ItemSliding.style = itemSlidingCss();
940
+ ItemSliding.style = {
941
+ ionic: itemSlidingIonicCss(),
942
+ ios: iosItemSlidingNativeCss(),
943
+ md: mdItemSlidingNativeCss()
944
+ };
695
945
 
696
946
  export { ItemOption as ion_item_option, ItemOptions as ion_item_options, ItemSliding as ion_item_sliding };