@telus-uds/components-base 3.27.0 → 3.28.1

package/CHANGELOG.md

@@ -1,19 +1,44 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 29 Jan 2026 16:42:47 GMT and should not be manually modified.
+This log was last generated on Fri, 20 Feb 2026 23:53:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.28.1
+
+Fri, 20 Feb 2026 23:53:11 GMT
+
+### Patches
+
+- `MultiSelectFilter`: onOpen callback now triggers when filter opens instead of when it closes (josue.higueroscalderon@telus.com)
+- `Carousel`: fix peeking when using a larger maxWidth (guillermo.peitzner@telus.com)
+
+## 3.28.0
+
+Wed, 18 Feb 2026 02:50:19 GMT
+
+### Minor changes
+
+- `SideNav`: Update code logic to support top and bottom borders (david.melara1@telus.com)
+- `ProgressBar`: add layers variant for controlling bar positioning (sergio.ramirez@telus.com)
+- `Modal`: Add `backgroundDismissible` prop to control backdrop dismissal behavior with dynamic cursor styling (josue.higueroscalderon@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.20.0
+
+### Patches
+
+- `Card`: background image hidden behind the default background color issue fixed (josue.higueroscalderon@telus.com)
+- `IconButton`: Fix wrong specific padding calculation (david.melara1@telus.com)
+
 ## 3.27.0
 
-Thu, 29 Jan 2026 16:42:47 GMT
+Thu, 29 Jan 2026 15:50:16 GMT
 
 ### Minor changes
 
-- `Checkbox`: Add padding token (david.melara1@telus.com)
-- `Card`: Add inputPosition prop to InteractiveCard (david.melara1@telus.com)
-- `List`: new feature alignment for the icons added (josue.higueroscalderon@telus.com)
 - `Card`: Add full-bleed content support to Card component allowing content to extend to card edges (josue.higueroscalderon@telus.com)
+- `List`: new feature alignment for the icons added (josue.higueroscalderon@telus.com)
+- `Card`: Add inputPosition prop to InteractiveCard (david.melara1@telus.com)
+- `Checkbox`: Add padding token (david.melara1@telus.com)
 - Bump @telus-uds/system-theme-tokens to v4.19.0
 
 ### Patches

package/lib/cjs/Card/CardBase.js

@@ -236,7 +236,13 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cardState,
     ...rest
   } = _ref5;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
+  const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens;
+  const tokensToUse = backgroundImage && backgroundImage.src ? {
+    ...resolvedTokens,
+    gradient: undefined,
+    backgroundGradient: undefined
+  } : resolvedTokens;
+  const cardStyle = selectStyles(tokensToUse);
   const props = selectProps(rest);
   let content = children;
   const {
@@ -309,7 +315,10 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       }
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: containerStyle,
+      style: {
+        ...containerStyle,
+        borderRadius
+      },
       dataSet: dataSet,
       ref: ref,
       ...props,
@@ -387,7 +396,7 @@ const staticStyles = _StyleSheet.default.create({
   contentOverlay: {
     position: 'relative',
     width: '100%',
-    height: '100%',
+    minHeight: '100%',
     zIndex: 2
   },
   containContainer: {

package/lib/cjs/Carousel/Carousel.js

@@ -91,7 +91,7 @@ const selectControlButtonPositionStyles = _ref => {
     isAutoPlayEnabled,
     viewport,
     maxWidth,
-    viewportWidth
+    containerWidth
   } = _ref;
   const styles = {};
   let positionOffset = 0;
@@ -107,18 +107,19 @@ const selectControlButtonPositionStyles = _ref => {
     }
   }
   if (enablePeeking) {
-    if (positionProperty === _Constants.POSITION_PROPERTIES.RIGHT) {
-      const rightMargin = (viewportWidth - maxWidth) / 2;
-      positionOffset += rightMargin;
-    } else if (positionProperty === _Constants.POSITION_PROPERTIES.LEFT) {
-      const leftMargin = (viewportWidth - maxWidth) / 2;
-      positionOffset += leftMargin;
-    }
+    const {
+      peekingMiddleSpace,
+      peekingGap
+    } = getPeekingProps(viewport);
+    const clampedMaxWidth = Math.min(maxWidth || containerWidth, containerWidth);
+    const slideRightEdge = (containerWidth + clampedMaxWidth) / 2 - peekingMiddleSpace;
+    const buttonCenter = slideRightEdge + peekingGap / 2;
+    positionOffset = containerWidth - buttonCenter - buttonWidth / 2;
   }
   styles[positionProperty] = positionOffset;
   return styles;
 };
-const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, viewportWidth) => {
+const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, areStylesAppliedOnPreviousButton, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerWidth) => {
   const styles = {
     zIndex: 1,
     position: 'absolute'
@@ -142,7 +143,7 @@ const selectPreviousNextNavigationButtonStyles = (previousNextNavigationButtonWi
       isAutoPlayEnabled,
       viewport,
       maxWidth,
-      viewportWidth
+      containerWidth
     })
   };
 };
@@ -279,7 +280,7 @@ const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth)
       peekingGap,
       peekingMiddleSpace
     } = getPeekingProps(viewport);
-    const baseWidth = maxWidth || containerWidth;
+    const baseWidth = Math.min(maxWidth || containerWidth, containerWidth);
     finalWidth = baseWidth - peekingMiddleSpace * _Constants.PEEKING_MULTIPLIER + peekingGap;
   }
   return finalWidth;
@@ -499,7 +500,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         peekingMiddleSpace
       } = getPeekingProps(viewport);
       let finalWidth;
-      const baseWidth = maxWidth || containerLayoutRef.current.width;
+      const baseWidth = Math.min(maxWidth || containerLayoutRef.current.width, containerLayoutRef.current.width);
       const slideWide = baseWidth - peekingMiddleSpace * _Constants.PEEKING_MULTIPLIER;
       if (activeIndexRef.current === 0) {
         finalWidth = 0;
@@ -1021,7 +1022,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               isAutoPlayEnabled,
               viewport,
               maxWidth,
-              viewportWidth: currentViewportWidth
+              containerWidth: containerLayout.width
             })],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               icon: isCarouselPlaying ? pauseIcon : playIcon,
@@ -1030,7 +1031,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               onPress: onAnimationControlButtonPress
             })
           }) : null, showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "previous-button-container",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onLayout: onPreviousNextNavigationButtonLayout,
@@ -1090,7 +1091,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
               })
             })
           }), showPreviousNextNavigation && totalItems > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, currentViewportWidth),
+            style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false, enablePeeking, enableDisplayMultipleItemsPerSlide, isAutoPlayEnabled, viewport, maxWidth, containerLayout.width),
             testID: "next-button-container",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
               onLayout: onPreviousNextNavigationButtonLayout,

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

@@ -31,10 +31,10 @@ const selectContainerStyle = _ref => {
   let marginLeft = 0;
   if (enablePeeking) {
     const isFirst = elementIndex === 0;
-    const baseWidth = maxWidth || width;
-    adjustedWidth = baseWidth - peekingMiddleSpace * 2;
+    const clampedMaxWidth = Math.min(maxWidth || width, width);
+    adjustedWidth = clampedMaxWidth - peekingMiddleSpace * 2;
     if (isFirst) {
-      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2;
+      marginLeft = peekingMiddleSpace + (viewportWidth - clampedMaxWidth) / 2;
     } else {
       marginLeft = peekingGap;
     }

package/lib/cjs/ExpandCollapse/Control.js

@@ -64,7 +64,11 @@ function selectIconContainerStyles(_ref2) {
   const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
   return {
     [paddingSide]: iconGap,
-    paddingTop: iconPaddingTop
+    ...(iconPaddingTop && {
+      transform: [{
+        translateY: iconPaddingTop
+      }]
+    })
   };
 }
 function selectTextContainerStyles(_ref3) {

package/lib/cjs/ExpandCollapse/ExpandCollapse.js

@@ -13,13 +13,22 @@ var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps, _utils.contentfulProps]);
-function selectBorderStyles(tokens) {
+const selectWrapperStyles = _ref => {
+  let {
+    borderWidth,
+    borderTopWidth,
+    borderStyle,
+    borderColor
+  } = _ref;
   return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
+    borderStyle,
+    borderColor,
+    borderTopWidth,
+    borderBottomWidth: borderWidth,
+    borderBottomStyle: borderStyle,
+    borderBottomColor: borderColor
   };
-}
+};
 
 /**
  * Flexible base component for lists where some or all items are collapsible headers.
@@ -28,7 +37,7 @@ function selectBorderStyles(tokens) {
  * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -39,7 +48,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange,
     dataSet,
     ...rest
-  } = _ref;
+  } = _ref2;
   const instanceId = (0, _utils.useUniqueId)('ExpandCollapse');
   const {
     currentValues: openIds,
@@ -60,7 +69,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...selectProps(rest),
     dataSet: dataSet,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectBorderStyles(themeTokens),
+      style: selectWrapperStyles(themeTokens),
       children: typeof children === 'function' ? children({
         openIds,
         onToggle,

package/lib/cjs/ExpandCollapse/Panel.js

@@ -110,6 +110,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     controlRef,
     content,
     copy = 'en',
+    disableMobileScrollBuffer = false,
     ...rest
   } = _ref5;
   const [containerHeight, setContainerHeight] = _react.default.useState(null);
@@ -131,7 +132,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
 
   // on mobile devices we require a scroll buffer equal to the font size
   // to avoid triggering scrolling unnecessarily
-  const mobileScrollBuffer = _Platform.default.OS === 'web' ? 0 : selectTextStyles(themeTokens)?.fontSize;
+  const mobileScrollBuffer = _Platform.default.OS === 'web' || disableMobileScrollBuffer ? 0 : selectTextStyles(themeTokens)?.fontSize;
   const handleControlPress = event => {
     onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
@@ -278,6 +279,10 @@ ExpandCollapsePanel.propTypes = {
   /**
    * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
    */
-  content: _propTypes.default.bool
+  content: _propTypes.default.bool,
+  /**
+   * A boolean prop to disable the extra scroll buffer on mobile devices (only applicable on iOS/Android, ignored on web)
+   */
+  disableMobileScrollBuffer: _propTypes.default.bool
 };
 var _default = exports.default = ExpandCollapsePanel;

package/lib/cjs/IconButton/IconButton.js

@@ -85,6 +85,11 @@ const selectInnerStyle = (_ref2, password) => {
     width,
     height
   } = _ref2;
+  const basePadding = calculatePadding(padding, borderWidth);
+  const calculateSpecificPadding = (specificPadding, specificBorderWidth) => {
+    const calculated = calculatePadding(specificPadding ?? padding, specificBorderWidth ?? borderWidth);
+    return calculated !== basePadding && calculated !== undefined ? calculated : undefined;
+  };
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
     borderColor,
@@ -98,11 +103,11 @@ const selectInnerStyle = (_ref2, password) => {
     borderRightWidth,
     borderBottomWidth,
     borderLeftWidth,
-    padding: calculatePadding(padding, borderWidth),
-    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
-    paddingRight: calculatePadding(paddingRight, borderRightWidth),
-    paddingTop: calculatePadding(paddingTop, borderTopWidth),
-    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
+    padding: basePadding,
+    paddingLeft: calculateSpecificPadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculateSpecificPadding(paddingRight, borderRightWidth),
+    paddingTop: calculateSpecificPadding(paddingTop, borderTopWidth),
+    paddingBottom: calculateSpecificPadding(paddingBottom, borderBottomWidth),
     ..._Platform.default.select({
       web: {
         pointerEvents: 'none',

package/lib/cjs/Modal/Modal.js

@@ -71,11 +71,15 @@ const selectModalStyles = _ref2 => {
 const selectBackdropStyles = _ref3 => {
   let {
     backdropColor,
-    backdropOpacity
+    backdropOpacity,
+    backdropCursor
   } = _ref3;
   return {
     backgroundColor: backdropColor,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    ...(_Platform.default.OS === 'web' && backdropCursor ? {
+      cursor: backdropCursor
+    } : {})
   };
 };
 const selectCloseButtonContainerStyles = _ref4 => {
@@ -128,12 +132,15 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cancelButtonText,
     cancelButtonType,
     footer,
+    backgroundDismissible = true,
     ...rest
   } = _ref5;
   const viewport = (0, _ViewportProvider.useViewport)();
+  const isBackdropClickable = onClose && backgroundDismissible;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport,
-    maxWidth
+    maxWidth,
+    backdropCursor: isBackdropClickable ? 'pointer' : 'default'
   });
   const modalRef = (0, _useScrollBlocking.default)(isOpen);
   const modalBodyRef = _react.default.useRef(ref);
@@ -239,7 +246,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
-        onPress: handleClose,
+        onPress: isBackdropClickable && handleClose,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })
@@ -336,7 +343,15 @@ Modal.propTypes = {
   /**
    * Receive a react node or an array of nodes to render at the bottom of the modal, above the action buttons.
    */
-  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)])
+  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
+  /**
+   * Controls whether the modal can be dismissed by clicking on the backdrop.
+   * When set to `false`, clicking the backdrop will not close the modal.
+   * The backdrop cursor automatically changes to 'default' to indicate it's not clickable.
+   * Note: Backdrop dismissal requires `onClose` to be defined.
+   * @default true
+   */
+  backgroundDismissible: _propTypes.default.bool
 };
 var _default = exports.default = Modal;
 const staticStyles = _StyleSheet.default.create({
@@ -346,12 +361,7 @@ const staticStyles = _StyleSheet.default.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: -1,
-    ..._Platform.default.select({
-      web: {
-        cursor: 'pointer'
-      }
-    })
+    zIndex: -1
   },
   positioningContainer: {
     flexBasis: '100%',

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -185,6 +185,11 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     setMaxWidth(items.length >= rowLimit);
   }, [items.length, rowLimit]);
   _react.default.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
+  _react.default.useEffect(() => {
+    if (isOpen && onOpen) {
+      onOpen();
+    }
+  }, [isOpen, onOpen]);
   const uniqueFields = ['id', 'label'];
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
@@ -197,7 +202,6 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
   }]);
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers?.onPress(event);
-    if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
   const onApply = e => {

package/lib/cjs/Progress/Progress.js

@@ -10,6 +10,7 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
+var _ProgressContext = _interopRequireDefault(require("./ProgressContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
@@ -54,6 +55,12 @@ const selectProgressStyles = _ref => {
  *
  * - Use the `size` variant to control the height of your progress bars:  passing `'mini'` will make your
  *   progress bar container narrower.
+ * - Use the `layers` variant to control how multiple progress bars are positioned:
+ *   - `false` (default): bars are positioned vertically one below the other.
+ *   - `true`: bars overlay on top of each other (layered/stacked on z-axis).
+ *   Note: The `layers` prop is deprecated. After August 2026, `layers: true` will become the permanent
+ *   default behavior and the `layers` prop will be removed. To maintain vertical layout after removal,
+ *   use separate individual Progress components.
  *
  * ## Usability and A11y guidelines
  *
@@ -70,11 +77,18 @@ const Progress = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Progress', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    ref: ref,
-    style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
-    ...selectProps(rest),
-    children: children
+  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
+  const layers = variant?.layers ?? false;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressContext.default.Provider, {
+    value: {
+      layers
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
+      ...selectProps(rest),
+      children: children
+    })
   });
 });
 Progress.displayName = 'Progress';

package/lib/cjs/Progress/ProgressBar.js

@@ -13,17 +13,24 @@ var _ProgressBarBackground = _interopRequireDefault(require("./ProgressBarBackgr
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _constants = require("./constants");
+var _ProgressContext = _interopRequireDefault(require("./ProgressContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
+const selectBarStyles = _ref => {
   let {
+    themeTokens,
+    calculatedPercentage,
+    barPosition,
+    layers
+  } = _ref;
+  const {
     backgroundColor,
     borderRadius,
     outlineWidth,
     outlineColor,
     shadow
-  } = _ref;
+  } = themeTokens;
   return {
     backgroundColor,
     borderRadius,
@@ -31,7 +38,10 @@ const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
     outlineColor,
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
     width: `${calculatedPercentage}%`,
-    left: `${barPosition}%`
+    left: `${barPosition}%`,
+    ...(layers ? {
+      position: 'absolute'
+    } : {})
   };
 };
 
@@ -82,6 +92,9 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     },
     ...rest
   } = _ref2;
+  const {
+    layers
+  } = _react.default.useContext(_ProgressContext.default);
   const {
     items,
     current
@@ -114,7 +127,12 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   return percentage > _constants.MIN_PERCENT_VALUE || items ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    style: [staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)],
+    style: [staticStyles.bar, selectBarStyles({
+      themeTokens,
+      calculatedPercentage,
+      barPosition,
+      layers
+    })],
     ...selectedProps,
     children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
       variant: variant

package/lib/cjs/Progress/ProgressContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const ProgressContext = /*#__PURE__*/(0, _react.createContext)({
+  layers: false
+});
+var _default = exports.default = ProgressContext;

package/lib/cjs/SideNav/Item.js

@@ -29,9 +29,9 @@ function selectItemStyles(_ref) {
   } = _ref;
   return {
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderBottomColor: borderColor,
+    borderBottomWidth: borderWidth,
+    borderBottomStyle: borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,

package/lib/cjs/SideNav/ItemsGroup.js

@@ -12,6 +12,19 @@ var _utils = require("../utils");
 var _ThemeProvider = require("../ThemeProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const selectPanelTokens = _ref => {
+  let {
+    borderWidth,
+    borderColor,
+    backgroundColor
+  } = _ref;
+  return {
+    contentPanelBackgroundColor: backgroundColor,
+    borderBottomWidth: borderWidth,
+    borderColor
+  };
+};
+
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -21,7 +34,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
- */const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const ItemsGroup = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     label,
@@ -32,7 +46,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     tokens,
     itemTokens,
     onToggle
-  } = _ref;
+  } = _ref2;
   // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
   // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
   const getAppearance = appearance => ({
@@ -45,28 +59,27 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     type: 'parent'
   });
   const getGroupTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
-  const getPanelTokens = appearance => {
-    const {
-      panelBorderColor,
-      ...itemsGroupTokens
-    } = getGroupTokens(getAppearance(appearance));
-    const groupTokens = {
-      ...itemsGroupTokens,
-      borderWidth: 0,
-      marginBottom: 0
-    };
-    return (0, _utils.selectTokens)('ExpandCollapsePanel', groupTokens);
-  };
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
-  const getControlTokens = appearance => (0, _utils.selectTokens)('ExpandCollapseControl', {
-    ...getItemTokens(getItemAppearance(appearance)),
-    // main style from SideNavItem
-    ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
+  const getPanelTokens = appearance => (0, _utils.selectTokens)('ExpandCollapsePanel', {
+    ...staticTokens.panel,
+    ...getGroupTokens(getAppearance(appearance)),
+    ...selectPanelTokens(getItemTokens(getItemAppearance(appearance)))
+  });
+  const getControlTokens = appearance => ({
+    ...(0, _utils.selectTokens)('ExpandCollapseControl', {
+      ...getItemTokens(getItemAppearance(appearance)),
+      // main style from SideNavItem
+      ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc,
+    }),
+    ...staticTokens.control
   });
   const controlContent = controlState => {
     const currentItemTokens = getItemTokens(getItemAppearance(controlState));
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContent.default, {
-      tokens: currentItemTokens,
+      tokens: {
+        ...currentItemTokens,
+        ...staticTokens.content
+      },
       children: label
     });
   };
@@ -82,9 +95,23 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
       active: isActive
     } // ExpandCollapse.Panel handles expanded state
     ,
+    disableMobileScrollBuffer: true,
     children: children
   });
 });
+const staticTokens = {
+  panel: {
+    borderWidth: 0,
+    marginBottom: 0
+  },
+  control: {
+    borderWidth: 0,
+    textLine: null
+  },
+  content: {
+    accentWidth: 0
+  }
+};
 ItemsGroup.displayName = 'ItemsGroup';
 ItemsGroup.propTypes = {
   /**