@telus-uds/components-base 3.25.0 → 3.26.0

package/CHANGELOG.md

@@ -1,9 +1,19 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 12 Jan 2026 14:55:21 GMT and should not be manually modified.
+This log was last generated on Mon, 19 Jan 2026 20:39:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.26.0
+
+Mon, 19 Jan 2026 20:39:50 GMT
+
+### Minor changes
+
+- `PriceLockup`: Add inverse variant (david.melara1@telus.com)
+- `Carousel`: add new swipe animation (sergio.ramirez@telus.com)
+- `TextInput`: Add ARIA feedback ID for improved accessibility (david.melara1@telus.com)
+
 ## 3.25.0
 
 Mon, 12 Jan 2026 14:55:21 GMT

package/lib/cjs/Carousel/Carousel.js

@@ -11,6 +11,7 @@ var _PanResponder = _interopRequireDefault(require("react-native-web/dist/cjs/ex
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _ViewportProvider = require("../ViewportProvider");
@@ -30,11 +31,6 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _Constants = require("./Constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TRANSITION_MODES = {
-  MANUAL: 'manual',
-  AUTOMATIC: 'automatic',
-  SWIPE: 'swipe'
-};
 const staticStyles = _StyleSheet.default.create({
   root: {
     backgroundColor: 'transparent',
@@ -369,6 +365,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     autoPlay = false,
     enablePeeking = false,
     contentMaxWidth,
+    swipeReleaseStyle = _Constants.SWIPE_RELEASE_STYLES.INSTANT,
+    swipeReleaseDuration = _Constants.DEFAULT_SWIPE_RELEASE_DURATION,
     ...rest
   } = _ref3;
   let childrenArray = (0, _utils.unpackFragment)(children);
@@ -497,7 +495,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       });
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
-  const animate = _react.default.useCallback((panToAnimate, toValue, toIndex) => {
+  const animate = _react.default.useCallback(function (panToAnimate, toValue, toIndex) {
+    let isSwipeRelease = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     const applicableTransitionDuration = isLastSlide && toIndex === 0 ? loopDuration : transitionDuration;
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -505,10 +504,23 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       }
       return handleAnimationEnd(toIndex, ...args);
     };
-    if (reduceMotionRef.current || isSwiping.current) {
+    if (reduceMotionRef.current) {
+      _Animated.default.timing(panToAnimate, {
+        toValue,
+        duration: _Constants.INSTANT_ANIMATION_DURATION,
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isSwipeRelease && swipeReleaseStyle === _Constants.SWIPE_RELEASE_STYLES.EASE_OUT) {
       _Animated.default.timing(panToAnimate, {
         toValue,
-        duration: 1,
+        duration: swipeReleaseDuration,
+        easing: _Easing.default.out(_Easing.default.cubic),
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isSwiping.current || isSwipeRelease) {
+      _Animated.default.timing(panToAnimate, {
+        toValue,
+        duration: _Constants.INSTANT_ANIMATION_DURATION,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else if (isAutoPlayEnabled) {
@@ -532,7 +544,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide, swipeReleaseStyle, swipeReleaseDuration]);
   const stopAutoplay = _react.default.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -555,19 +567,20 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     };
     let skipChanges = !delta;
     let calcDelta = delta;
+    const isSwipeRelease = transitionMode === _Constants.TRANSITION_MODES.SWIPE;
     if (activeIndexRef.current <= 0 && delta < 0) {
-      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
+      skipChanges = transitionMode !== _Constants.TRANSITION_MODES.AUTOMATIC;
       calcDelta = totalItems + delta;
     } else if (activeIndexRef.current + 1 >= totalItems && delta > 0) {
-      skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
+      skipChanges = transitionMode !== _Constants.TRANSITION_MODES.AUTOMATIC;
       calcDelta = -1 * activeIndexRef.current + delta - 1;
     }
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
       isTransitioningRef.current = true;
-      animate(pan, toValue, index);
+      animate(pan, toValue, index, isSwipeRelease);
       if (enableHero) {
-        animate(heroPan, toValue, index);
+        animate(heroPan, toValue, index, isSwipeRelease);
       }
       return calcDelta;
     }
@@ -581,19 +594,19 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     };
     heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta;
     isTransitioningRef.current = true;
-    animate(pan, toValue, index);
+    animate(pan, toValue, index, isSwipeRelease);
     if (enableHero) {
-      animate(heroPan, heroToValue, index);
+      animate(heroPan, heroToValue, index, isSwipeRelease);
     }
     if (isCarouselPlaying) {
       stopAutoplay();
-      if (index === 0 && activeIndexRef.current + 1 === totalItems && transitionMode === TRANSITION_MODES.AUTOMATIC) {
+      if (index === 0 && activeIndexRef.current + 1 === totalItems && transitionMode === _Constants.TRANSITION_MODES.AUTOMATIC) {
         setisCarouselPlaying(false);
       } else if (isAutoPlayEnabled) {
         autoPlayRef.current = setTimeout(() => {
           updateOffset();
           handleAnimationStart(activeIndexRef.current);
-          updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
+          updateIndex(slideDuration < 0 ? -1 : 1, _Constants.TRANSITION_MODES.AUTOMATIC);
           triggerRefocus();
         }, Math.abs(slideDuration) * 1000);
       }
@@ -607,7 +620,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       autoPlayRef.current = setTimeout(() => {
         updateOffset();
         handleAnimationStart(activeIndexRef.current);
-        updateIndex(slideDuration < 0 ? -1 : 1, TRANSITION_MODES.AUTOMATIC);
+        updateIndex(slideDuration < 0 ? -1 : 1, _Constants.TRANSITION_MODES.AUTOMATIC);
         triggerRefocus();
       }, Math.abs(slideDuration) * 1000);
     }
@@ -620,7 +633,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   }, [updateIndex, updateOffset, handleAnimationStart, triggerRefocus]);
   const goToNeighboring = _react.default.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TRANSITION_MODES.MANUAL;
+    let transitionMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _Constants.TRANSITION_MODES.MANUAL;
     fixOffsetAndGo(toPrev ? -1 : 1, transitionMode);
   }, [fixOffsetAndGo]);
   _react.default.useEffect(() => {
@@ -780,16 +793,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         startAutoplay();
       }
       const correction = gesture.moveX - gesture.x0;
+      isSwiping.current = false;
       if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
         animate(pan, {
           x: 0,
           y: 0
-        }, 0);
+        }, activeIndexRef.current, true);
       } else {
         const delta = correction > 0 ? -1 : 1;
-        updateIndex(delta, TRANSITION_MODES.SWIPE);
+        updateIndex(delta, _Constants.TRANSITION_MODES.SWIPE);
       }
-      isSwiping.current = false;
     }
   }), [pan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const heroPanResponder = _react.default.useMemo(() => _PanResponder.default.create({
@@ -820,16 +833,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         startAutoplay();
       }
       const correction = gesture.moveX - gesture.x0;
+      isSwiping.current = false;
       if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
         animate(heroPan, {
           x: 0,
           y: 0
-        }, 0);
+        }, activeIndexRef.current, true);
       } else {
         const delta = correction > 0 ? -1 : 1;
-        updateIndex(delta, TRANSITION_MODES.SWIPE);
+        updateIndex(delta, _Constants.TRANSITION_MODES.SWIPE);
       }
-      isSwiping.current = false;
     }
   }), [heroPan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const goToNext = _react.default.useCallback(() => {
@@ -842,7 +855,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     const delta = index - activeIndexRef.current;
     if (delta) {
-      fixOffsetAndGo(delta, TRANSITION_MODES.MANUAL);
+      fixOffsetAndGo(delta, _Constants.TRANSITION_MODES.MANUAL);
     }
   }, [fixOffsetAndGo]);
 
@@ -1285,7 +1298,23 @@ Carousel.propTypes = {
     md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
     sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
     xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number])
-  })
+  }),
+  /**
+   * Animation style for swipe release transitions.
+   * - `'instant'`: Immediate snap to position (current default)
+   * - `'ease-out'`: Smooth deceleration animation
+   * - Default value is `'instant'`
+   * - Use `swipeReleaseDuration` to customize the animation duration when using `'ease-out'`
+   *
+   * @deprecated The default will change to `'ease-out'` in Q2 2026 (introduced Jan 2026).
+   */
+  swipeReleaseStyle: _propTypes.default.oneOf(['instant', 'ease-out']),
+  /**
+   * Duration in milliseconds of the ease-out animation when releasing a swipe gesture.
+   * Only applies when `swipeReleaseStyle` is set to `'ease-out'`.
+   * - Default value is `500` (500ms)
+   */
+  swipeReleaseDuration: _propTypes.default.number
 };
 Carousel.Item = _CarouselItem.default;
 Carousel.displayName = 'Carousel';

package/lib/cjs/Carousel/Constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
+exports.TRANSITION_MODES = exports.SWIPE_RELEASE_STYLES = exports.PEEKING_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.INSTANT_ANIMATION_DURATION = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_SWIPE_RELEASE_DURATION = exports.DEFAULT_POSITION_OFFSET = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = void 0;
 const ITEMS_PER_VIEWPORT_XS_SM = exports.ITEMS_PER_VIEWPORT_XS_SM = 1;
 const ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_MD = 2;
 const ITEMS_PER_VIEWPORT_LG_XL = exports.ITEMS_PER_VIEWPORT_LG_XL = 3;
@@ -14,4 +14,15 @@ const LARGE_VIEWPORT_MARGIN = exports.LARGE_VIEWPORT_MARGIN = 40;
 const DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_VIEWPORT_MARGIN = 10;
 const PEEKING_MULTIPLIER = exports.PEEKING_MULTIPLIER = 2;
 const ACTIVE_INDEX_OFFSET_MULTIPLIER = exports.ACTIVE_INDEX_OFFSET_MULTIPLIER = 1;
-const NEGATIVE_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = -1;
+const NEGATIVE_MULTIPLIER = exports.NEGATIVE_MULTIPLIER = -1;
+const TRANSITION_MODES = exports.TRANSITION_MODES = {
+  MANUAL: 'manual',
+  AUTOMATIC: 'automatic',
+  SWIPE: 'swipe'
+};
+const SWIPE_RELEASE_STYLES = exports.SWIPE_RELEASE_STYLES = {
+  INSTANT: 'instant',
+  EASE_OUT: 'ease-out'
+};
+const INSTANT_ANIMATION_DURATION = exports.INSTANT_ANIMATION_DURATION = 1;
+const DEFAULT_SWIPE_RELEASE_DURATION = exports.DEFAULT_SWIPE_RELEASE_DURATION = 500;

package/lib/cjs/InputSupports/InputSupports.js

@@ -72,7 +72,8 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation
+      validation: feedbackValidation,
+      accessibilityDescribedBy: feedbackId
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -149,7 +149,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.topText,
-      children: (0, _renderTypography.default)(topText, topTextTypographyTokens)
+      children: (0, _renderTypography.default)(topText, topTextTypographyTokens, undefined, fontColor)
     }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
         testID: "price-lockup-divider",

package/lib/esm/Carousel/Carousel.js

@@ -5,6 +5,7 @@ import PanResponder from "react-native-web/dist/exports/PanResponder";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import Dimensions from "react-native-web/dist/exports/Dimensions";
+import Easing from "react-native-web/dist/exports/Easing";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useTheme } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
@@ -21,13 +22,8 @@ import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
 import Box from '../Box';
-import { ITEMS_PER_VIEWPORT_XS_SM, ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN, PEEKING_MULTIPLIER, ACTIVE_INDEX_OFFSET_MULTIPLIER, NEGATIVE_MULTIPLIER } from './Constants';
+import { ITEMS_PER_VIEWPORT_XS_SM, ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, DEFAULT_POSITION_OFFSET, LARGE_VIEWPORT_MARGIN, DEFAULT_VIEWPORT_MARGIN, PEEKING_MULTIPLIER, ACTIVE_INDEX_OFFSET_MULTIPLIER, NEGATIVE_MULTIPLIER, TRANSITION_MODES, SWIPE_RELEASE_STYLES, INSTANT_ANIMATION_DURATION, DEFAULT_SWIPE_RELEASE_DURATION } from './Constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TRANSITION_MODES = {
-  MANUAL: 'manual',
-  AUTOMATIC: 'automatic',
-  SWIPE: 'swipe'
-};
 const staticStyles = StyleSheet.create({
   root: {
     backgroundColor: 'transparent',
@@ -362,6 +358,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     autoPlay = false,
     enablePeeking = false,
     contentMaxWidth,
+    swipeReleaseStyle = SWIPE_RELEASE_STYLES.INSTANT,
+    swipeReleaseDuration = DEFAULT_SWIPE_RELEASE_DURATION,
     ...rest
   } = _ref3;
   let childrenArray = unpackFragment(children);
@@ -490,7 +488,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       });
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
-  const animate = React.useCallback((panToAnimate, toValue, toIndex) => {
+  const animate = React.useCallback(function (panToAnimate, toValue, toIndex) {
+    let isSwipeRelease = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     const applicableTransitionDuration = isLastSlide && toIndex === 0 ? loopDuration : transitionDuration;
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -498,10 +497,23 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       }
       return handleAnimationEnd(toIndex, ...args);
     };
-    if (reduceMotionRef.current || isSwiping.current) {
+    if (reduceMotionRef.current) {
+      Animated.timing(panToAnimate, {
+        toValue,
+        duration: INSTANT_ANIMATION_DURATION,
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isSwipeRelease && swipeReleaseStyle === SWIPE_RELEASE_STYLES.EASE_OUT) {
       Animated.timing(panToAnimate, {
         toValue,
-        duration: 1,
+        duration: swipeReleaseDuration,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false
+      }).start(handleAnimationEndToIndex);
+    } else if (isSwiping.current || isSwipeRelease) {
+      Animated.timing(panToAnimate, {
+        toValue,
+        duration: INSTANT_ANIMATION_DURATION,
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     } else if (isAutoPlayEnabled) {
@@ -525,7 +537,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide, swipeReleaseStyle, swipeReleaseDuration]);
   const stopAutoplay = React.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -548,6 +560,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     };
     let skipChanges = !delta;
     let calcDelta = delta;
+    const isSwipeRelease = transitionMode === TRANSITION_MODES.SWIPE;
     if (activeIndexRef.current <= 0 && delta < 0) {
       skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC;
       calcDelta = totalItems + delta;
@@ -558,9 +571,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
       isTransitioningRef.current = true;
-      animate(pan, toValue, index);
+      animate(pan, toValue, index, isSwipeRelease);
       if (enableHero) {
-        animate(heroPan, toValue, index);
+        animate(heroPan, toValue, index, isSwipeRelease);
       }
       return calcDelta;
     }
@@ -574,9 +587,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     };
     heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta;
     isTransitioningRef.current = true;
-    animate(pan, toValue, index);
+    animate(pan, toValue, index, isSwipeRelease);
     if (enableHero) {
-      animate(heroPan, heroToValue, index);
+      animate(heroPan, heroToValue, index, isSwipeRelease);
     }
     if (isCarouselPlaying) {
       stopAutoplay();
@@ -773,16 +786,16 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         startAutoplay();
       }
       const correction = gesture.moveX - gesture.x0;
+      isSwiping.current = false;
       if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
         animate(pan, {
           x: 0,
           y: 0
-        }, 0);
+        }, activeIndexRef.current, true);
       } else {
         const delta = correction > 0 ? -1 : 1;
         updateIndex(delta, TRANSITION_MODES.SWIPE);
       }
-      isSwiping.current = false;
     }
   }), [pan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const heroPanResponder = React.useMemo(() => PanResponder.create({
@@ -813,16 +826,16 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         startAutoplay();
       }
       const correction = gesture.moveX - gesture.x0;
+      isSwiping.current = false;
       if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
         animate(heroPan, {
           x: 0,
           y: 0
-        }, 0);
+        }, activeIndexRef.current, true);
       } else {
         const delta = correction > 0 ? -1 : 1;
         updateIndex(delta, TRANSITION_MODES.SWIPE);
       }
-      isSwiping.current = false;
     }
   }), [heroPan, updateIndex, updateOffset, animate, isSwipeAllowed, minDistanceForAction, handleAnimationStart, minDistanceToCapture, startAutoplay, stopAutoplay, isCarouselPlaying]);
   const goToNext = React.useCallback(() => {
@@ -1278,7 +1291,23 @@ Carousel.propTypes = {
     md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
-  })
+  }),
+  /**
+   * Animation style for swipe release transitions.
+   * - `'instant'`: Immediate snap to position (current default)
+   * - `'ease-out'`: Smooth deceleration animation
+   * - Default value is `'instant'`
+   * - Use `swipeReleaseDuration` to customize the animation duration when using `'ease-out'`
+   *
+   * @deprecated The default will change to `'ease-out'` in Q2 2026 (introduced Jan 2026).
+   */
+  swipeReleaseStyle: PropTypes.oneOf(['instant', 'ease-out']),
+  /**
+   * Duration in milliseconds of the ease-out animation when releasing a swipe gesture.
+   * Only applies when `swipeReleaseStyle` is set to `'ease-out'`.
+   * - Default value is `500` (500ms)
+   */
+  swipeReleaseDuration: PropTypes.number
 };
 Carousel.Item = CarouselItem;
 Carousel.displayName = 'Carousel';

package/lib/esm/Carousel/Constants.js

@@ -8,4 +8,15 @@ export const LARGE_VIEWPORT_MARGIN = 40;
 export const DEFAULT_VIEWPORT_MARGIN = 10;
 export const PEEKING_MULTIPLIER = 2;
 export const ACTIVE_INDEX_OFFSET_MULTIPLIER = 1;
-export const NEGATIVE_MULTIPLIER = -1;
+export const NEGATIVE_MULTIPLIER = -1;
+export const TRANSITION_MODES = {
+  MANUAL: 'manual',
+  AUTOMATIC: 'automatic',
+  SWIPE: 'swipe'
+};
+export const SWIPE_RELEASE_STYLES = {
+  INSTANT: 'instant',
+  EASE_OUT: 'ease-out'
+};
+export const INSTANT_ANIMATION_DURATION = 1;
+export const DEFAULT_SWIPE_RELEASE_DURATION = 500;

package/lib/esm/InputSupports/InputSupports.js

@@ -65,7 +65,8 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation
+      validation: feedbackValidation,
+      accessibilityDescribedBy: feedbackId
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/_jsx(Feedback, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,

package/lib/esm/PriceLockup/PriceLockup.js

@@ -142,7 +142,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.topText,
-      children: renderTypography(topText, topTextTypographyTokens)
+      children: renderTypography(topText, topTextTypographyTokens, undefined, fontColor)
     }) : null, renderPrice(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens, isPriceBaseline), bottomText ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Divider, {
         testID: "price-lockup-divider",

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.25.0",
+  "version": "3.26.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.25.0",
+  "version": "3.26.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/Carousel.jsx

@@ -1,5 +1,13 @@
 import React from 'react'
-import { View, Animated, PanResponder, StyleSheet, Platform, Dimensions } from 'react-native'
+import {
+  View,
+  Animated,
+  PanResponder,
+  StyleSheet,
+  Platform,
+  Dimensions,
+  Easing
+} from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, useTheme } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
@@ -38,15 +46,13 @@ import {
   DEFAULT_VIEWPORT_MARGIN,
   PEEKING_MULTIPLIER,
   ACTIVE_INDEX_OFFSET_MULTIPLIER,
-  NEGATIVE_MULTIPLIER
+  NEGATIVE_MULTIPLIER,
+  TRANSITION_MODES,
+  SWIPE_RELEASE_STYLES,
+  INSTANT_ANIMATION_DURATION,
+  DEFAULT_SWIPE_RELEASE_DURATION
 } from './Constants'
 
-const TRANSITION_MODES = {
-  MANUAL: 'manual',
-  AUTOMATIC: 'automatic',
-  SWIPE: 'swipe'
-}
-
 const staticStyles = StyleSheet.create({
   root: {
     backgroundColor: 'transparent',
@@ -412,6 +418,8 @@ const Carousel = React.forwardRef(
       autoPlay = false,
       enablePeeking = false,
       contentMaxWidth,
+      swipeReleaseStyle = SWIPE_RELEASE_STYLES.INSTANT,
+      swipeReleaseDuration = DEFAULT_SWIPE_RELEASE_DURATION,
       ...rest
     },
     ref
@@ -553,14 +561,29 @@ const Carousel = React.forwardRef(
     }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking])
 
     const animate = React.useCallback(
-      (panToAnimate, toValue, toIndex) => {
+      (panToAnimate, toValue, toIndex, isSwipeRelease = false) => {
         const applicableTransitionDuration =
           isLastSlide && toIndex === 0 ? loopDuration : transitionDuration
         const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
-        if (reduceMotionRef.current || isSwiping.current) {
-          Animated.timing(panToAnimate, { toValue, duration: 1, useNativeDriver: false }).start(
-            handleAnimationEndToIndex
-          )
+        if (reduceMotionRef.current) {
+          Animated.timing(panToAnimate, {
+            toValue,
+            duration: INSTANT_ANIMATION_DURATION,
+            useNativeDriver: false
+          }).start(handleAnimationEndToIndex)
+        } else if (isSwipeRelease && swipeReleaseStyle === SWIPE_RELEASE_STYLES.EASE_OUT) {
+          Animated.timing(panToAnimate, {
+            toValue,
+            duration: swipeReleaseDuration,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: false
+          }).start(handleAnimationEndToIndex)
+        } else if (isSwiping.current || isSwipeRelease) {
+          Animated.timing(panToAnimate, {
+            toValue,
+            duration: INSTANT_ANIMATION_DURATION,
+            useNativeDriver: false
+          }).start(handleAnimationEndToIndex)
         } else if (isAutoPlayEnabled) {
           Animated.timing(panToAnimate, {
             ...springConfig,
@@ -591,7 +614,9 @@ const Carousel = React.forwardRef(
         isLastSlide,
         isAutoPlayEnabled,
         enablePeeking,
-        enableDisplayMultipleItemsPerSlide
+        enableDisplayMultipleItemsPerSlide,
+        swipeReleaseStyle,
+        swipeReleaseDuration
       ]
     )
 
@@ -612,6 +637,7 @@ const Carousel = React.forwardRef(
         const toValue = { x: 0, y: 0 }
         let skipChanges = !delta
         let calcDelta = delta
+        const isSwipeRelease = transitionMode === TRANSITION_MODES.SWIPE
         if (activeIndexRef.current <= 0 && delta < 0) {
           skipChanges = transitionMode !== TRANSITION_MODES.AUTOMATIC
           calcDelta = totalItems + delta
@@ -623,10 +649,10 @@ const Carousel = React.forwardRef(
         const index = activeIndexRef.current + calcDelta
         if (skipChanges) {
           isTransitioningRef.current = true
-          animate(pan, toValue, index)
+          animate(pan, toValue, index, isSwipeRelease)
 
           if (enableHero) {
-            animate(heroPan, toValue, index)
+            animate(heroPan, toValue, index, isSwipeRelease)
           }
           return calcDelta
         }
@@ -645,9 +671,9 @@ const Carousel = React.forwardRef(
         const heroToValue = { x: 0, y: 0 }
         heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta
         isTransitioningRef.current = true
-        animate(pan, toValue, index)
+        animate(pan, toValue, index, isSwipeRelease)
         if (enableHero) {
-          animate(heroPan, heroToValue, index)
+          animate(heroPan, heroToValue, index, isSwipeRelease)
         }
         if (isCarouselPlaying) {
           stopAutoplay()
@@ -866,14 +892,14 @@ const Carousel = React.forwardRef(
             }
             const correction = gesture.moveX - gesture.x0
 
+            isSwiping.current = false
+
             if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-              animate(pan, { x: 0, y: 0 }, 0)
+              animate(pan, { x: 0, y: 0 }, activeIndexRef.current, true)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta, TRANSITION_MODES.SWIPE)
             }
-
-            isSwiping.current = false
           }
         }),
       [
@@ -924,14 +950,14 @@ const Carousel = React.forwardRef(
             }
             const correction = gesture.moveX - gesture.x0
 
+            isSwiping.current = false
+
             if (Math.abs(correction) < containerLayoutRef.current.width * minDistanceForAction) {
-              animate(heroPan, { x: 0, y: 0 }, 0)
+              animate(heroPan, { x: 0, y: 0 }, activeIndexRef.current, true)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta, TRANSITION_MODES.SWIPE)
             }
-
-            isSwiping.current = false
           }
         }),
       [
@@ -1495,7 +1521,23 @@ Carousel.propTypes = {
     md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
-  })
+  }),
+  /**
+   * Animation style for swipe release transitions.
+   * - `'instant'`: Immediate snap to position (current default)
+   * - `'ease-out'`: Smooth deceleration animation
+   * - Default value is `'instant'`
+   * - Use `swipeReleaseDuration` to customize the animation duration when using `'ease-out'`
+   *
+   * @deprecated The default will change to `'ease-out'` in Q2 2026 (introduced Jan 2026).
+   */
+  swipeReleaseStyle: PropTypes.oneOf(['instant', 'ease-out']),
+  /**
+   * Duration in milliseconds of the ease-out animation when releasing a swipe gesture.
+   * Only applies when `swipeReleaseStyle` is set to `'ease-out'`.
+   * - Default value is `500` (500ms)
+   */
+  swipeReleaseDuration: PropTypes.number
 }
 
 Carousel.Item = CarouselItem

package/src/Carousel/Constants.js

@@ -9,3 +9,17 @@ export const DEFAULT_VIEWPORT_MARGIN = 10
 export const PEEKING_MULTIPLIER = 2
 export const ACTIVE_INDEX_OFFSET_MULTIPLIER = 1
 export const NEGATIVE_MULTIPLIER = -1
+
+export const TRANSITION_MODES = {
+  MANUAL: 'manual',
+  AUTOMATIC: 'automatic',
+  SWIPE: 'swipe'
+}
+
+export const SWIPE_RELEASE_STYLES = {
+  INSTANT: 'instant',
+  EASE_OUT: 'ease-out'
+}
+
+export const INSTANT_ANIMATION_DURATION = 1
+export const DEFAULT_SWIPE_RELEASE_DURATION = 500

package/src/InputSupports/InputSupports.jsx

@@ -66,7 +66,12 @@ const InputSupports = React.forwardRef(
           />
         )}
         {typeof children === 'function'
-          ? children({ inputId, ...a11yProps, validation: feedbackValidation })
+          ? children({
+              inputId,
+              ...a11yProps,
+              validation: feedbackValidation,
+              accessibilityDescribedBy: feedbackId
+            })
           : children}
         {feedback || maxCharsReachedErrorMessage ? (
           <Feedback

package/src/PriceLockup/PriceLockup.jsx

@@ -121,7 +121,7 @@ const PriceLockup = React.forwardRef(
       >
         {topText ? (
           <View style={staticStyles.topText}>
-            {renderTypography(topText, topTextTypographyTokens)}
+            {renderTypography(topText, topTextTypographyTokens, undefined, fontColor)}
           </View>
         ) : null}
         {renderPrice(