@telus-uds/components-base 3.26.0 → 3.27.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 19 Jan 2026 20:39:50 GMT and should not be manually modified.
+This log was last generated on Thu, 29 Jan 2026 16:42:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.27.0
+
+Thu, 29 Jan 2026 16:42:47 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)
+- Bump @telus-uds/system-theme-tokens to v4.19.0
+
+### Patches
+
+- `Card`: background-color covering images issue fixed (josue.higueroscalderon@telus.com)
+- `Carousel`: fix horizontal behavior when using peeking (guillermo.peitzner@telus.com)
+
 ## 3.26.0
 
-Mon, 19 Jan 2026 20:39:50 GMT
+Mon, 19 Jan 2026 20:01:22 GMT
 
 ### Minor changes
 

package/lib/cjs/Card/Card.js

@@ -25,18 +25,26 @@ const SelectionType = {
   Radio: 'radiogroup',
   None: undefined
 };
-const selectInputStyle = _ref => {
+const selectInputStyle = (_ref, _ref2) => {
   let {
     paddingTop,
-    paddingRight
+    paddingRight,
+    paddingLeft
   } = _ref;
+  let {
+    inputPositionProp
+  } = _ref2;
   return {
     position: 'absolute',
     top: paddingTop,
-    right: paddingRight
+    ...(inputPositionProp === 'left' ? {
+      left: paddingLeft
+    } : {
+      right: paddingRight
+    })
   };
 };
-const getInputProps = _ref2 => {
+const getInputProps = _ref3 => {
   let {
     id,
     checkColor,
@@ -46,7 +54,7 @@ const getInputProps = _ref2 => {
     isChecked,
     isInactive,
     handleChange
-  } = _ref2;
+  } = _ref3;
   return {
     inputId: id,
     tokens: {
@@ -109,7 +117,7 @@ const getInputProps = _ref2 => {
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Card = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     tokens,
@@ -119,8 +127,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     id,
     interactiveCard,
     backgroundImage,
+    testID,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     themeOptions
@@ -191,8 +200,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let cardStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
-      let [vp, viewportTokens] = _ref4;
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref5) => {
+      let [vp, viewportTokens] = _ref5;
       const tokensToTransform = selectionType ? (0, _CardBase.selectStyles)({
         ...viewportTokens,
         paddingTop: 0,
@@ -219,13 +228,18 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     cardStyles = themeTokens;
   }
   const renderInputPerSelectionType = props => {
+    const containerStyle = selectInputStyle(getThemeTokens(), {
+      inputPositionProp: interactiveCard?.inputPosition
+    });
+    const inputTestID = testID && `${testID}-selection-input`;
     if (!isControl) {
       return null;
     }
     switch (selectionType) {
       case SelectionType.Checkbox:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectInputStyle(getThemeTokens()),
+          style: containerStyle,
+          testID: inputTestID,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.default, {
             ...props,
             tokens: {
@@ -236,7 +250,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         });
       case SelectionType.Radio:
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectInputStyle(getThemeTokens()),
+          style: containerStyle,
+          testID: inputTestID,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
             ...props,
             tokens: {
@@ -257,6 +272,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       dataSet: mediaIds && {
         media: mediaIds
       },
+      testID: testID,
       ...selectProps(rest),
       children: [interactiveCard?.body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {
         ref: ref,
@@ -335,7 +351,8 @@ Card.propTypes = {
     selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
     variant: _utils.variantProp.propType,
     href: _propTypes.default.string,
-    hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types)
+    hrefAttrs: _propTypes.default.shape(_props.hrefAttrsProp.types),
+    inputPosition: _propTypes.default.oneOf(['left', 'right'])
   }),
   /**
    * Apply background image to the card.
@@ -352,6 +369,10 @@ Card.propTypes = {
   /**
    * Data set for the card.
    */
-  dataSet: _propTypes.default.object
+  dataSet: _propTypes.default.object,
+  /**
+   * Test ID used for e2e testing.
+   */
+  testID: _propTypes.default.string
 };
 var _default = exports.default = Card;

package/lib/cjs/Card/CardBase.js

@@ -114,9 +114,51 @@ const setBackgroundImage = _ref => {
     children: content
   });
 };
+const selectPaddedContentStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    hasInteractiveBorder
+  } = _ref2;
+  return {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...(hasInteractiveBorder ? {
+      borderWidth,
+      borderColor,
+      borderRadius
+    } : {})
+  };
+};
+const selectInteractiveOverlayStyles = _ref3 => {
+  let {
+    backgroundColor,
+    borderRadius,
+    borderWidth
+  } = _ref3;
+  const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth);
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor,
+    borderRadius: adjustedBorderRadius,
+    pointerEvents: 'none',
+    zIndex: 1
+  };
+};
 
 // Ensure explicit selection of tokens
-const selectStyles = _ref2 => {
+const selectStyles = _ref4 => {
   let {
     flex,
     backgroundColor,
@@ -137,7 +179,7 @@ const selectStyles = _ref2 => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref2;
+  } = _ref4;
   const hasGradient = (gradient || backgroundGradient) && _Platform.default.OS === 'web';
   let backgroundImageValue = null;
   if (hasGradient) {
@@ -184,7 +226,7 @@ const selectStyles = _ref2 => {
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 exports.selectStyles = selectStyles;
-const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     children,
     tokens,
@@ -193,7 +235,7 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     fullBleedContent,
     cardState,
     ...rest
-  } = _ref3;
+  } = _ref5;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
   const props = selectProps(rest);
   let content = children;
@@ -220,26 +262,51 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       paddingBottom,
       paddingLeft,
       paddingRight,
+      borderWidth,
+      borderColor,
+      borderRadius,
+      backgroundColor,
       ...containerStyle
     } = cardStyle;
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
-    const paddedContent = hasPadding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: {
+    const hasInteractiveBorder = borderWidth && borderWidth > 0;
+    const hasInteractiveOverlay = isOverlayColor(backgroundColor);
+    const paddedContent = hasPadding || hasInteractiveBorder ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectPaddedContentStyles({
         paddingTop,
         paddingBottom,
         paddingLeft,
-        paddingRight
-      },
+        paddingRight,
+        borderWidth,
+        borderColor,
+        borderRadius,
+        hasInteractiveBorder
+      }),
       children: children
     }) : children;
+    const contentWithOverlay = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [hasInteractiveOverlay && _Platform.default.OS === 'web' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectInteractiveOverlayStyles({
+          backgroundColor,
+          borderRadius,
+          borderWidth
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.contentOverlay,
+        children: paddedContent
+      })]
+    });
     content = setBackgroundImage({
       src: imageSourceViewport,
       alt,
       backgroundImageResizeMode,
       backgroundImagePosition,
       backgroundImageAlign,
-      content: paddedContent,
-      cardStyle: containerStyle
+      content: contentWithOverlay,
+      cardStyle: {
+        ...containerStyle,
+        borderRadius
+      }
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: containerStyle,
@@ -321,7 +388,7 @@ const staticStyles = _StyleSheet.default.create({
     position: 'relative',
     width: '100%',
     height: '100%',
-    zIndex: 1
+    zIndex: 2
   },
   containContainer: {
     width: '100%',

package/lib/cjs/Card/PressableCardBase.js

@@ -19,6 +19,72 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const selectFocusOverlayContainerStyles = tokens => {
+  const {
+    flex,
+    minWidth,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight
+  } = tokens;
+  return {
+    flex: flex || 1,
+    minWidth: minWidth || 0,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight
+  };
+};
+const selectFocusBorderStyles = tokens => {
+  const {
+    borderWidth,
+    borderColor,
+    borderRadius
+  } = tokens;
+  return {
+    borderWidth,
+    borderColor,
+    borderRadius: borderRadius || 0
+  };
+};
+const FocusBorderOverlay = _ref => {
+  let {
+    tokens,
+    pressableState,
+    children
+  } = _ref;
+  const {
+    borderWidth = 0
+  } = tokens;
+  const showFocusBorder = pressableState.focused && borderWidth > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [staticStyles.focusOverlayContainer, selectFocusOverlayContainerStyles(tokens), _Platform.default.OS === 'web' && staticStyles.webOutlineNone],
+    children: [children, showFocusBorder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.focusBorder, selectFocusBorderStyles(tokens)],
+      accessible: false,
+      importantForAccessibility: "no"
+    })]
+  });
+};
+FocusBorderOverlay.propTypes = {
+  tokens: _propTypes.default.shape({
+    flex: _propTypes.default.number,
+    minWidth: _propTypes.default.number,
+    marginTop: _propTypes.default.number,
+    marginBottom: _propTypes.default.number,
+    marginLeft: _propTypes.default.number,
+    marginRight: _propTypes.default.number,
+    borderColor: _propTypes.default.string,
+    borderWidth: _propTypes.default.number,
+    borderRadius: _propTypes.default.number
+  }).isRequired,
+  pressableState: _propTypes.default.shape({
+    focused: _propTypes.default.bool
+  }).isRequired,
+  children: _propTypes.default.node
+};
 const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
@@ -31,7 +97,7 @@ const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key
  * apps or sites directly: build themed components on top of this.
  */
 exports.selectPressableCardTokens = selectPressableCardTokens;
-const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -45,7 +111,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     fullBleedContent,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
-  } = _ref;
+  } = _ref2;
   const {
     onPress,
     ...rest
@@ -62,11 +128,62 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     partial: true,
     allowFunction: true
   }), 'PressableCard');
-  const getCardTokens = pressableState => (0, _utils.selectTokens)('Card', getTokens(pressableState));
+  const getCardTokens = pressableState => {
+    const allTokens = getTokens(pressableState);
+    const cardTokens = (0, _utils.selectTokens)('Card', allTokens);
+
+    // Handle focus border transparency to avoid double borders
+    if (pressableState.focused && allTokens.borderWidth > 0) {
+      const result = {
+        ...cardTokens,
+        borderColor: 'transparent'
+      };
+
+      // Also handle backgroundImage for interactive states
+      if (backgroundImage) {
+        const {
+          hovered,
+          pressed,
+          focused
+        } = pressableState || {};
+        const isInteractiveState = hovered || pressed || focused;
+        if (!isInteractiveState) {
+          const {
+            backgroundColor,
+            ...restTokens
+          } = result;
+          return restTokens;
+        }
+      }
+      return result;
+    }
+
+    // Handle backgroundImage when not in focus state
+    if (backgroundImage) {
+      const {
+        hovered,
+        pressed,
+        focused
+      } = pressableState || {};
+      const isInteractiveState = hovered || pressed || focused;
+      if (!isInteractiveState) {
+        const {
+          backgroundColor,
+          ...restTokens
+        } = cardTokens;
+        return restTokens;
+      }
+    }
+    return cardTokens;
+  };
   const getOuterBorderStyle = pressableState => {
     const {
       flex,
       minWidth,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
       outerBorderColor,
       outerBorderGap = 0,
       outerBorderWidth = 0,
@@ -75,6 +192,10 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     return {
       flex,
       minWidth: minWidth + outerBorderGap + outerBorderWidth,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
       ...(0, _ThemeProvider.applyOuterBorder)({
         outerBorderColor,
         outerBorderGap,
@@ -168,11 +289,15 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       ...rest,
       accessibilityRole
     }),
-    children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
-      tokens: getCardTokens(pressableState),
-      backgroundImage: backgroundImage,
-      fullBleedContent: fullBleedContent,
-      children: typeof children === 'function' ? children(getCardState(pressableState)) : children
+    children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusBorderOverlay, {
+      tokens: getTokens(pressableState),
+      pressableState: pressableState,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+        tokens: getCardTokens(pressableState),
+        backgroundImage: backgroundImage,
+        fullBleedContent: fullBleedContent,
+        children: typeof children === 'function' ? children(getCardState(pressableState)) : children
+      })
     })
   });
 });
@@ -187,6 +312,20 @@ const staticStyles = _StyleSheet.default.create({
     alignItems: 'stretch',
     justifyContent: 'flex-start',
     textDecorationLine: 'none'
+  },
+  focusOverlayContainer: {
+    position: 'relative'
+  },
+  webOutlineNone: {
+    outline: 'none'
+  },
+  focusBorder: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';