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

core/package.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/src/components/item-option/item-option.ionic.scss

@@ -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-sliding/item-sliding.scss → core/src/components/item-sliding/item-sliding.common.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;
 }

core/src/components/item-sliding/item-sliding.ionic.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.native.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;
+}