feat(item-sliding): added specific animations for ionic (#31103)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The `item-sliding`has the same animations for md, iOS and Ionic

## What is the new behavior?
New animations were added for the Ionic theme, including:

- Animation for opening the `item-sliding`
- Animation for closing the `item-sliding`
- Animation for expandable options

New conditions were also included to ensure a smoother experience:

- Closing  `item-sliding` by exceeding velocity
- Selecting an extendable option by exceeding the velocity when options
are visible
- Rubber effect  when selecting the option


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Susmita Bhowmik <susmita.bhowmik@outsystems.com>

Author: os-davidlourenco

core/package-lock.json

@@ -68,7 +68,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.3.8",
+    "outsystems-design-tokens": "^1.3.9",
     "playwright-core": "^1.58.2",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",

core/package.json

@@ -100,9 +100,6 @@
   color: globals.current-color(contrast);
 }
 
-// Item Expandable Animation
-// --------------------------------------------------
-
-:host(.item-option-expandable) {
-  transition-timing-function: globals.$ion-transition-curve-expressive;
+:host(.item-option-expand-threshold) {
+  filter: brightness(0.92);
 }

core/src/components/item-option/item-option.ionic.scss

@@ -18,17 +18,6 @@ ion-item-sliding .item {
   user-select: none;
 }
 
-.item-sliding-active-slide .item {
-  position: relative;
-
-  transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
-
-  opacity: 1;
-  z-index: $z-index-item-options + 1;
-  pointer-events: none;
-  will-change: transform;
-}
-
 .item-sliding-closing ion-item-options {
   pointer-events: none;
 }

…omponents/item-sliding/item-sliding.scss …ts/item-sliding/item-sliding.common.scsscore/src/components/item-sliding/item-sliding.scss renamed to core/src/components/item-sliding/item-sliding.common.scss core/src/components/item-sliding/item-sliding.scss renamed to core/src/components/item-sliding/item-sliding.common.scss

@@ -0,0 +1,37 @@
+@use "./item-sliding.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Transition utility classes
+.item-sliding-transition-open .item {
+  transition: transform globals.$ion-transition-time-250 globals.$ion-transition-curve-smooth;
+}
+
+.item-sliding-transition-snapback .item {
+  transition: transform globals.$ion-transition-time-300 globals.$ion-transition-curve-bounce;
+}
+
+// Ionic full-swipe confirm sequence (replaces inline `transition` on item / expandable width)
+.item-sliding-confirm-item-in .item {
+  transition: transform globals.$ion-transition-time-150 globals.$ion-transition-curve-base;
+}
+
+.item-sliding-confirm-item-back .item {
+  transition: transform globals.$ion-transition-time-500 globals.$ion-transition-curve-bounce;
+}
+
+ion-item-option.item-sliding-expandable-width-in {
+  transition: width globals.$ion-transition-time-150 globals.$ion-transition-curve-base;
+}
+
+ion-item-option.item-sliding-expandable-width-back {
+  transition: width globals.$ion-transition-time-500 globals.$ion-transition-curve-bounce;
+}
+
+.item-sliding-active-slide .item {
+  position: relative;
+
+  opacity: 1;
+  z-index: globals.$ion-z-index-100;
+  pointer-events: none;
+  will-change: transform;
+}

core/src/components/item-sliding/item-sliding.ionic.scss

@@ -0,0 +1,23 @@
+@use "./item-sliding.common";
+@import "../../themes/native/native.globals";
+
+.item-sliding-active-slide .item {
+  position: relative;
+
+  transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
+
+  opacity: 1;
+  z-index: $z-index-item-options + 1;
+  pointer-events: none;
+  will-change: transform;
+}
+
+// Native full-swipe animation (250ms ease-out; replaces inline styles on `ion-item`)
+.item-sliding-active-slide.item-sliding-full-swipe-transition .item {
+  transition: transform 250ms ease-out;
+}
+
+// During drag on native (ios/md), disable transition — matches former inline `transition: none`
+.item-sliding-active-slide.item-sliding-dragging .item {
+  transition: none;
+}