@telus-uds/components-base 3.21.0 → 3.23.0

package/CHANGELOG.md

@@ -1,9 +1,39 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 21 Oct 2025 14:46:26 GMT and should not be manually modified.
+This log was last generated on Wed, 19 Nov 2025 05:51:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.23.0
+
+Wed, 19 Nov 2025 05:51:39 GMT
+
+### Minor changes
+
+- `Listbox`: Added test and snapshot for Listbox (david.melara1@telus.com)
+- `Listbox`: Updated style for koodo, allium and public mobile; added new style variant (david.melara1@telus.com)
+- `ButtonGroup`: enhacements for iOS and android implemented and fix for the mobile version (35577399+JoshHC@users.noreply.github.com)
+- `Button`: Implement heightFull prop (oscar.palencia@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.16.0
+
+### Patches
+
+- `Validator`: code refactored to resolve several bugs (35577399+JoshHC@users.noreply.github.com)
+- `Carousel`: fix tab navigation (guillermo.peitzner@telus.com)
+
+## 3.22.0
+
+Wed, 29 Oct 2025 07:40:46 GMT
+
+### Minor changes
+
+- `Carousel`: Add `loopDuration` prop (oscar.palencia@telus.com)
+- `Button`: add RNMQ support (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `Interactive Card`: extra spacing fixed in interactive Cards when padding tokens are set to none (35577399+JoshHC@users.noreply.github.com)
+
 ## 3.21.0
 
 Tue, 21 Oct 2025 14:46:26 GMT

package/lib/cjs/Button/Button.js

@@ -19,19 +19,28 @@ const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     accessibilityRole = 'button',
     tokens,
     variant,
+    heightFull = true,
     ...props
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const buttonVariant = {
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = (0, _ThemeProvider.useTheme)();
+  const buttonVariant = enableMediaQueryStyleSheet ? variant : {
     viewport,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokensCallback : _ThemeProvider.useThemeTokensCallback;
+  const getTokens = useTokens('Button', tokens, buttonVariant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     ...props,
     tokens: getTokens,
+    heightFull: heightFull,
     accessibilityRole: accessibilityRole,
-    ref: ref
+    ref: ref,
+    viewport: viewport
   });
 });
 Button.displayName = 'Button';

package/lib/cjs/Button/ButtonBase.js

@@ -40,23 +40,27 @@ const selectFlexAndWidthStyles = _ref2 => {
   }
   return styles;
 };
-const selectOuterContainerStyles = _ref3 => {
+const selectOuterContainerStyles = (_ref3, heightFull) => {
   let {
     opacity,
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
     borderRadius,
-    outerBackgroundColor
+    outerBackgroundColor,
+    alignSelf
   } = _ref3;
   return {
+    backgroundColor: outerBackgroundColor,
+    opacity,
     ..._Platform.default.select({
       native: {
+        alignSelf: alignSelf !== undefined ? alignSelf : 'flex-start'
+      },
+      web: heightFull ? {} : {
         alignSelf: 'flex-start'
       }
     }),
-    backgroundColor: outerBackgroundColor,
-    opacity,
     ...(0, _ThemeProvider.applyOuterBorder)({
       outerBorderGap,
       outerBorderWidth,
@@ -255,8 +259,16 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     icon,
     iconPosition = icon ? 'left' : undefined,
     iconProps,
+    heightFull = true,
     ...rawRest
   } = _ref12;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    viewport
+  } = rawRest;
+  const enableMediaQueryStyleSheet = themeOptions.enableMediaQueryStyleSheet && viewport;
   const {
     onPress,
     ...rest
@@ -268,15 +280,55 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
   };
   const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
   const systemProps = selectProps(rest);
+  let layoutMediaQueryStyles;
+  let flexAndWidthStylesIds;
+  if (enableMediaQueryStyleSheet) {
+    const defaultPressableState = {
+      pressed: false,
+      hovered: false,
+      focused: false
+    };
+    const defaultTokensByViewport = resolveButtonTokens(defaultPressableState);
+    const layoutTokensByViewport = Object.entries(defaultTokensByViewport).reduce((acc, _ref13) => {
+      let [vp, viewportTokens] = _ref13;
+      const flexAndWidthStyles = viewportTokens.width === '100%' && viewportTokens.flex === 1 ? selectFlexAndWidthStyles(viewportTokens) : {};
+      acc[vp] = {
+        ...staticStyles.row,
+        ...selectWebOnlyStyles(inactive, viewportTokens, systemProps),
+        ...(Object.keys(flexAndWidthStyles).length > 0 ? flexAndWidthStyles : {}),
+        ...selectOuterSizeStyles(viewportTokens)
+      };
+      return acc;
+    }, {});
+    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(layoutTokensByViewport);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      layout: {
+        ...mediaQueryStyles
+      }
+    });
+    layoutMediaQueryStyles = styles.layout;
+    flexAndWidthStylesIds = ids.layout;
+  }
   const getPressableStyle = pressableState => {
+    if (enableMediaQueryStyleSheet) {
+      const themeTokens = resolveButtonTokens(pressableState)[viewport];
+      return [layoutMediaQueryStyles, selectOuterContainerStyles(themeTokens)];
+    }
     const themeTokens = resolveButtonTokens(pressableState);
-    // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
     const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens, heightFull), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
-  const {
-    themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  const dataSetProp = flexAndWidthStylesIds || rawRest.dataSet ? {
+    dataSet: {
+      ...(flexAndWidthStylesIds ? {
+        media: flexAndWidthStylesIds
+      } : {}),
+      ...rawRest.dataSet
+    }
+  } : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
@@ -288,8 +340,9 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
     disabled: inactive,
     hrefAttrs: hrefAttrs,
     ...systemProps,
+    ...dataSetProp,
     children: pressableState => {
-      const themeTokens = resolveButtonTokens(pressableState);
+      const themeTokens = enableMediaQueryStyleSheet ? resolveButtonTokens(pressableState)[viewport] : resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
       const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, _Platform.default.select({

package/lib/cjs/Button/ButtonDropdown.js

@@ -112,6 +112,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     accessibilityRole = 'radio',
     description,
     singleOption,
+    heightFull = true,
     ...props
   } = _ref2;
   const isFullWidth = variant?.width === FULL_WIDTH_STYLE;
@@ -154,6 +155,7 @@ const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...pressHandlers,
     onPress: handlePress,
     tokens: getButtonTokens,
+    heightFull: heightFull,
     inactive: singleOption || inactive,
     icon: () => null,
     accessibilityRole: accessibilityRole,

package/lib/cjs/Button/ButtonGroup.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-var _StackView = require("../StackView");
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
@@ -17,17 +18,10 @@ var _utils = require("../utils");
 var _pressability = require("../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
-const getStackWrapTokens = variant => {
-  return _Platform.default.select({
-    web: {
-      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
-      width: variant?.width === 'equal' ? '100%' : 'auto'
-    },
-    default: {}
-  });
-};
 const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -60,12 +54,6 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
   });
-  const themeStackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
-  const variantStackTokens = getStackWrapTokens(variant);
-  const stackTokens = {
-    ...themeStackTokens,
-    ...variantStackTokens
-  };
   const {
     direction,
     space,
@@ -75,15 +63,34 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding,
     gap
   } = themeTokens;
+  const isMobileNonContained = _Platform.default.OS !== 'web' && (!variant || variant?.style !== 'contained');
   const themeButtonTokensCallback = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
-  const getButtonTokens = state => {
+  const gapValue = (0, _utils.useSpacingScale)(gap || space);
+  const getButtonTokens = (0, _react.useCallback)(state => {
     const themeButtonTokens = themeButtonTokensCallback(state);
+    const shouldUseTransparentBackground = isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus;
     return {
       ...themeButtonTokens,
-      width: variant?.width === 'equal' ? '100%' : 'auto',
-      flex: variant?.width === 'equal' ? 1 : undefined
+      ...(variant?.width === 'equal' && staticStyles.equalWidth),
+      ...(shouldUseTransparentBackground && {
+        backgroundColor: 'transparent'
+      }),
+      alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
     };
-  };
+  }, [themeButtonTokensCallback, isMobileNonContained, variant?.width]);
+  const fieldsetStyles = (0, _react.useMemo)(() => ({
+    ...staticStyles.fieldsetBase,
+    borderRadius,
+    backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
+    padding,
+    width: variant?.width === 'equal' ? '100%' : 'auto'
+  }), [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]);
+  const viewStyles = (0, _react.useMemo)(() => ({
+    ...staticStyles.viewBase,
+    flexDirection: direction === 'column' ? 'column' : 'row',
+    gap: gapValue || 0,
+    justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
+  }), [direction, gapValue, variant?.width]);
   const {
     currentValues,
     toggleOneValue
@@ -120,25 +127,11 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     accessibilityRole: accessibilityRole,
-    style: {
-      borderRadius,
-      backgroundColor,
-      padding,
-      ...(_Platform.default.OS === 'web' ? {
-        gap,
-        width: variant?.width === 'equal' ? '100%' : 'auto'
-      } : {
-        alignSelf: 'flex-start'
-      })
-    },
+    style: fieldsetStyles,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       accessibilityRole: innerRole,
-      space: space,
-      direction: direction,
-      tokens: stackTokens,
-      gap: gap,
-      ref: ref,
+      style: viewStyles,
       children: items.map((_ref2, index) => {
         let {
           label,
@@ -298,4 +291,18 @@ ButtonGroup.propTypes = {
    */
   copy: _propTypes.default.oneOf(['en', 'fr'])
 };
+const staticStyles = _StyleSheet.default.create({
+  fieldsetBase: {
+    alignSelf: 'flex-start',
+    display: 'inline'
+  },
+  viewBase: {
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  },
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  }
+});
 var _default = exports.default = ButtonGroup;

package/lib/cjs/Button/propTypes.js

@@ -13,6 +13,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const textAndA11yText = exports.textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
 const buttonPropTypes = {
   tokens: (0, _props.getTokensPropType)('Button'),
+  /**
+   * If true, the button will honor the align-items value from its parent flex container.
+   * If false, the button will always align to 'flex-start' in a flex container.
+   * Currently, `heightFull`'s default behaviour will expand to the full height of its parent's flex container. In an upcoming major release, the default behaviour will be changed to expand based on the content. To maintain the expected behaviour, you must explicitly set `heightFull: true`
+   */
+  heightFull: _propTypes.default.bool,
   /**
    * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
    * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme

package/lib/cjs/Card/PressableCardBase.js

@@ -181,7 +181,9 @@ const staticStyles = _StyleSheet.default.create({
   },
   linkContainer: {
     flex: 1,
-    display: 'flex'
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';

package/lib/cjs/Carousel/Carousel.js

@@ -358,11 +358,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     copy,
     slideDuration = 0,
     transitionDuration = 0,
+    loopDuration = transitionDuration,
     autoPlay = false,
     enablePeeking = false,
     ...rest
   } = _ref3;
   let childrenArray = (0, _utils.unpackFragment)(children);
+  const isTransitioningRef = _react.default.useRef(false);
   const viewport = (0, _ViewportProvider.useViewport)();
   const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport);
   const autoPlayFeatureEnabled = autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1;
@@ -433,9 +435,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     setIsAnimating(true);
   }, [onAnimationStart]);
   const handleAnimationEnd = _react.default.useCallback(function () {
-    if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
-    setIsAnimating(false);
-  }, [onAnimationEnd]);
+    var _ref4;
+    const result = (_ref4 = arguments.length - 1, _ref4 < 0 || arguments.length <= _ref4 ? undefined : arguments[_ref4]);
+    if (result?.finished) {
+      if (typeof onAnimationEnd === 'function') onAnimationEnd(...arguments);
+      setIsAnimating(false);
+      isTransitioningRef.current = false;
+    }
+  }, [onAnimationEnd, isTransitioningRef]);
   const updateOffset = _react.default.useCallback(() => {
     if (enablePeeking) {
       const {
@@ -477,6 +484,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
   }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking]);
   const animate = _react.default.useCallback((panToAnimate, toValue, toIndex) => {
+    const applicableTransitionDuration = isLastSlide && toIndex === 0 ? loopDuration : transitionDuration;
     const handleAnimationEndToIndex = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -494,14 +502,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration * 1000
+        duration: applicableTransitionDuration * 1000
       }).start(handleAnimationEndToIndex);
     } else if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       _Animated.default.timing(panToAnimate, {
         ...springConfig,
         toValue,
         useNativeDriver: false,
-        duration: transitionDuration ? transitionDuration * 1000 : 1000
+        duration: applicableTransitionDuration ? applicableTransitionDuration * 1000 : 1000
       }).start(handleAnimationEndToIndex);
     } else {
       _Animated.default.spring(panToAnimate, {
@@ -510,7 +518,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         useNativeDriver: false
       }).start(handleAnimationEndToIndex);
     }
-  }, [springConfig, handleAnimationEnd, transitionDuration, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
+  }, [springConfig, handleAnimationEnd, transitionDuration, loopDuration, isLastSlide, isAutoPlayEnabled, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   const stopAutoplay = _react.default.useCallback(() => {
     if (autoPlayRef?.current) {
       clearTimeout(autoPlayRef?.current);
@@ -542,6 +550,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     const index = activeIndexRef.current + calcDelta;
     if (skipChanges) {
+      isTransitioningRef.current = true;
       animate(pan, toValue, index);
       if (enableHero) {
         animate(heroPan, toValue, index);
@@ -557,6 +566,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       y: 0
     };
     heroToValue.x = heroContainerLayoutRef.current.width * -1 * calcDelta;
+    isTransitioningRef.current = true;
     animate(pan, toValue, index);
     if (enableHero) {
       animate(heroPan, heroToValue, index);
@@ -612,29 +622,29 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     heroContainerLayoutRef.current = heroContainerLayout;
   }, [heroContainerLayout]);
   _react.default.useEffect(() => {
-    pan.x.addListener(_ref4 => {
+    pan.x.addListener(_ref5 => {
       let {
         value
-      } = _ref4;
+      } = _ref5;
       animatedX.current = value;
     });
-    pan.y.addListener(_ref5 => {
+    pan.y.addListener(_ref6 => {
       let {
         value
-      } = _ref5;
+      } = _ref6;
       animatedY.current = value;
     });
     if (enableHero) {
-      heroPan.x.addListener(_ref6 => {
+      heroPan.x.addListener(_ref7 => {
         let {
           value
-        } = _ref6;
+        } = _ref7;
         heroAnimatedX.current = value;
       });
-      heroPan.y.addListener(_ref7 => {
+      heroPan.y.addListener(_ref8 => {
         let {
           value
-        } = _ref7;
+        } = _ref8;
         heroAnimatedY.current = value;
       });
     }
@@ -671,7 +681,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       stopAutoplay();
     };
   }, [stopAutoplay]);
-  const onContainerLayout = _ref8 => {
+  const onContainerLayout = _ref9 => {
     let {
       nativeEvent: {
         layout: {
@@ -681,7 +691,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref8;
+    } = _ref9;
     return setContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -690,7 +700,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onHeroContainerLayout = _ref9 => {
+  const onHeroContainerLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -700,7 +710,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref10;
     return setHeroContainerLayout(prevState => ({
       ...prevState,
       x,
@@ -709,14 +719,14 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       height
     }));
   };
-  const onPreviousNextNavigationButtonLayout = _ref10 => {
+  const onPreviousNextNavigationButtonLayout = _ref11 => {
     let {
       nativeEvent: {
         layout: {
           width
         }
       }
-    } = _ref10;
+    } = _ref11;
     return setPreviousNextNavigationButtonWidth(width);
   };
   const isSwipeAllowed = _react.default.useCallback(() => {
@@ -878,6 +888,11 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
     setisCarouselPlaying(prevState => !prevState);
   }, [isCarouselPlaying, stopAutoplay, startAutoplay]);
+  const handleKeyDown = _react.default.useCallback(event => {
+    if (isTransitioningRef.current && event.key === 'Tab') {
+      event.preventDefault();
+    }
+  }, [isTransitioningRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectRootContainerStyles(enableHero, viewport),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -903,6 +918,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           ref: ref,
           ...systemProps,
           ...containerProps,
+          ...(_Platform.default.OS === 'web' ? {
+            onKeyDown: handleKeyDown
+          } : {}),
           children: [isAutoPlayEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
             style: [staticStyles.animationControlButton, selectControlButtonPositionStyles({
               positionVariant: previousNextNavigationPosition,
@@ -957,10 +975,27 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
               accessibilityLiveRegion: accessibilityLiveRegion,
               children: childrenArray.map((element, index) => {
-                const hidden = !isAnimating && index !== activeIndex;
+                let hidden = !isAnimating && index !== activeIndex;
+                if (enablePeeking && !isAnimating) {
+                  if (enableDisplayMultipleItemsPerSlide) {
+                    const maxItemsForSlide = getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport);
+                    if (index >= activeIndex * maxItemsForSlide - 1 && index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1) {
+                      hidden = false;
+                    } else {
+                      hidden = true;
+                    }
+                  } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
+                    hidden = false;
+                  }
+                } else if (!enablePeeking && enableDisplayMultipleItemsPerSlide && !isAnimating) {
+                  const maxItemsForSlide = getMaximumItemsForSlide(enableDisplayMultipleItemsPerSlide, viewport);
+                  if (index >= activeIndex * maxItemsForSlide && index < activeIndex * maxItemsForSlide + maxItemsForSlide) {
+                    hidden = false;
+                  }
+                }
                 const clonedElement = /*#__PURE__*/_react.default.cloneElement(element, {
                   elementIndex: index,
-                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                  hidden,
                   enablePeeking,
                   peekingProps: getPeekingProps(viewport),
                   enableDisplayMultipleItemsPerSlide,
@@ -1204,6 +1239,12 @@ Carousel.propTypes = {
    * - `autoPlay` and `slideDuration` are required to be set for this to work
    */
   transitionDuration: _propTypes.default.number,
+  /**
+   * Time it takes in seconds to transition from last slide to first slide
+   * - Default value equals `transitionDuration`'s value
+   * - `autoPlay` and `transitionDuration` are required to be set for this to work
+   */
+  loopDuration: _propTypes.default.number,
   /**
    * If set to `true`, the Carousel will show the previous and next slides
    * - Default value is `false`

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -104,13 +104,33 @@ const CarouselItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   const focusabilityProps = activeIndex === elementIndex || enablePeeking ? {} : _utils.a11yProps.nonFocusableProps;
   const handleFocus = _react.default.useCallback(event => {
-    if (_Platform.default.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
-      goTo(activeIndex + 1);
+    if (_Platform.default.OS === 'web') {
+      if (enablePeeking) {
+        if (enableDisplayMultipleItemsPerSlide) {
+          const startIndex = maximumItemsForSlide * activeIndex;
+          const endIndex = startIndex + maximumItemsForSlide - 1;
+          if (elementIndex < startIndex) {
+            if (activeIndex - 1 < 0) {
+              goTo(0);
+            } else {
+              goTo(activeIndex - 1);
+            }
+          } else if (elementIndex > endIndex) {
+            goTo(activeIndex + 1);
+          }
+        } else if (elementIndex !== activeIndex) {
+          if (elementIndex > activeIndex) {
+            goTo(activeIndex + 1);
+          } else if (elementIndex < activeIndex) {
+            goTo(activeIndex - 1);
+          }
+        }
+      }
     }
     if (rest.onFocus) {
       rest.onFocus(event);
     }
-  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]);
+  }, [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest, enablePeeking, enableDisplayMultipleItemsPerSlide]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: selectContainerStyle({
       width,

package/lib/cjs/Icon/Icon.js

@@ -43,17 +43,14 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding: themeTokens.padding
   };
   const getIconContentForMobile = () => {
-    if (Object.keys(paddingStyles).length) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: {
-          backgroundColor: themeTokens.backgroundColor,
-          borderRadius: themeTokens.borderRadius,
-          ...paddingStyles
-        },
-        children: iconContent
-      });
-    }
-    return iconContent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        backgroundColor: themeTokens.backgroundColor,
+        borderRadius: themeTokens.borderRadius,
+        ...paddingStyles
+      },
+      children: iconContent
+    });
   };
   return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref