@telus-uds/components-web 4.17.0 → 4.18.1

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 19 Jan 2026 20:39:51 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Feb 2026 02:50:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.18.1
+
+Wed, 18 Feb 2026 02:50:19 GMT
+
+### Patches
+
+- refactor: simplify cardBaseTokens object creation by removing redundant destructuring (josue.higueroscalderon@telus.com)
+- `IconButton`: Update stories (david.melara1@telus.com)
+- `Card`: background image hidden behind the default color issue fixed (josue.higueroscalderon@telus.com)
+- Bump @telus-uds/components-base to v3.28.0
+- Bump @telus-uds/system-theme-tokens to v4.20.0
+
+## 4.18.0
+
+Thu, 29 Jan 2026 15:50:17 GMT
+
+### Minor changes
+
+- `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)
+- `QuantitySelector`: add inactive prop (guillermo.peitzner@telus.com)
+- `Card`: Unnecessary comments removed. (josue.higueroscalderon@telus.com)
+- `NavigationBar`: add contentMaxWidth prop (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v3.27.0
+- Bump @telus-uds/system-theme-tokens to v4.19.0
+
+### Patches
+
+- `QuantitySelector`: spacer alignment issue fixed (josue.higueroscalderon@telus.com)
+- `NavigationBar`: fix console warning (guillermo.peitzner@telus.com)
+- `Card`: component enhaced to manage the hover, focus and pressed states of interactiveCard properly (josue.higueroscalderon@telus.com)
+
 ## 4.17.0
 
-Mon, 19 Jan 2026 20:39:51 GMT
+Mon, 19 Jan 2026 20:01:22 GMT
 
 ### Minor changes
 
@@ -15,7 +47,7 @@ Mon, 19 Jan 2026 20:39:51 GMT
 
 ### Patches
 
-- `NavigationBar`: Fix flickering from overlay overflow  (david.melara1@telus.com)
+- `NavigationBar`: Fix flickering from overlay overflow (david.melara1@telus.com)
 
 ## 4.16.0
 

package/lib/cjs/Card/Card.js

@@ -19,6 +19,61 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
 const GRID_COLUMNS = 12;
+const POSITION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  NONE: 'none'
+};
+
+/**
+ * Helper function to get StackView tokens
+ * @param {Object} columnFlex - Column flex properties
+ * @param {string} contentStackAlign - Alignment value for content stack
+ * @returns {Object} StackView tokens object
+ */
+const getStackViewTokens = (columnFlex, contentStackAlign) => ({
+  ...columnFlex,
+  alignItems: contentStackAlign
+});
+
+/**
+ * Helper function to get CardContent tokens
+ * @param {Object} baseTokens - Base tokens to spread
+ * @param {Object} options - Options object
+ * @param {boolean} options.backgroundImage - Whether background image is present
+ * @param {string} options.fullBleedContentChildrenAlign - Alignment for full bleed content children
+ * @param {boolean} options.useTransparentBackground - Whether to use transparent background when no backgroundImage
+ * @returns {Object} CardContent tokens object
+ */
+const getCardContentTokens = function (baseTokens) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    backgroundImage,
+    fullBleedContentChildrenAlign,
+    useTransparentBackground
+  } = options;
+
+  // Determine background color based on conditions
+  let backgroundColorOverride = {};
+  if (useTransparentBackground) {
+    backgroundColorOverride = {
+      backgroundColor: 'transparent'
+    };
+  } else if (backgroundImage) {
+    backgroundColorOverride = {
+      backgroundColor: 'transparent'
+    };
+  }
+  return {
+    ...baseTokens,
+    ...backgroundColorOverride,
+    ...(fullBleedContentChildrenAlign && {
+      alignSelf: fullBleedContentChildrenAlign
+    })
+  };
+};
 
 /**
  * A basic card component, unstyled by default.
@@ -77,6 +132,59 @@ const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withCon
     alignSelf
   };
 });
+const InteractiveCardWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__InteractiveCardWrapper",
+  componentId: "components-web__sc-1elbtwd-1"
+})(() => ({
+  position: 'relative',
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column'
+}));
+const InteractiveOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__InteractiveOverlay",
+  componentId: "components-web__sc-1elbtwd-2"
+})(_ref2 => {
+  let {
+    overlayOpacity,
+    borderRadius
+  } = _ref2;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: `rgba(0, 0, 0, ${overlayOpacity || 0})`,
+    borderRadius,
+    pointerEvents: 'none',
+    transition: 'background-color 0.2s ease',
+    zIndex: 1
+  };
+});
+const FocusBorder = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__FocusBorder",
+  componentId: "components-web__sc-1elbtwd-3"
+})(_ref3 => {
+  let {
+    borderWidth,
+    borderColor,
+    borderRadius
+  } = _ref3;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    borderStyle: 'solid',
+    pointerEvents: 'none',
+    zIndex: 2
+  };
+});
 const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   let {
     children,
@@ -126,39 +234,87 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
-  const allThemeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  const variantForTokens = backgroundImage ? {
+    ...variant,
+    style: undefined
+  } : variant;
+  const allThemeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variantForTokens);
   const {
     borderRadius
   } = allThemeTokens;
-  const cardBaseBorderWidth = allThemeTokens.borderWidth;
-  const pressableBorderWidth = (0, _componentsBase.useThemeTokens)('Card', {}, {
+
+  // Interactive cards: merge variants for CardBase (outer container)
+  // The outer variant takes priority over interactiveCard.variant for the style property
+  // This ensures the gradient is only applied to CardBase, not PressableCardBase and avoid duplication
+  const interactiveStyle = interactiveCard?.variant?.style;
+  const outerStyle = variant?.style;
+  const mergedVariant = {
+    ...variant,
+    style: outerStyle || interactiveStyle
+  };
+
+  // Interactive cards: build configuration for PressableCardBase
+  // This determines which style to use for interactive states (hover, pressed, etc.)
+  // without causing gradient duplication
+  let interactiveCardConfig = {};
+  if (interactiveCard?.body) {
+    const styleToUse = interactiveCard?.variant?.style || variant?.style;
+    const {
+      style,
+      ...otherVariantProps
+    } = interactiveCard?.variant || {};
+    interactiveCardConfig = {
+      interactive: true,
+      ...(styleToUse && {
+        style: styleToUse
+      }),
+      ...otherVariantProps
+    };
+  }
+  const getThemeTokensBase = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard?.tokens, interactiveCardConfig);
+
+  // Wrap getThemeTokens to remove gradient from resolved tokens
+  // PressableCardBase calls this function with pressableState (hover, pressed, etc.)
+  // We intercept the resolved tokens and remove gradient properties to prevent duplication
+  // since the gradient should only appear on CardBase (outer container)
+  const getThemeTokens = _react.default.useCallback(pressableState => {
+    const resolvedTokens = getThemeTokensBase(pressableState);
+    const {
+      gradient,
+      backgroundGradient,
+      ...tokensWithoutGradient
+    } = resolvedTokens;
+    return tokensWithoutGradient;
+  }, [getThemeTokensBase]);
+  const getFocusBorderTokens = (0, _componentsBase.useThemeTokensCallback)('Card', {}, {
     ...variant,
     interactive: true
-  }).borderWidth;
-  const marginOffset = `${-(cardBaseBorderWidth + pressableBorderWidth) / 2}px`;
-  const getThemeTokens = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
-    interactive: true,
-    ...(interactiveCard?.variant || {})
   });
-  const {
-    backgroundColor: _,
-    ...tokensWithoutBg
-  } = tokens;
-  const getFullBleedInteractiveTokens = (0, _componentsBase.useThemeTokensCallback)('Card', tokensWithoutBg, {
+
+  // Keep backgroundColor for CardContent, it won't affect FullBleedContent image
+  const tokensWithoutBg = tokens;
+  const fullBleedInteractiveVariant = backgroundImage ? {
+    ...variant,
+    interactive: true,
+    style: undefined
+  } : {
     ...variant,
     interactive: true
-  });
-  const getFullBleedInteractiveCardTokens = cardState => ({
-    ...getFullBleedInteractiveTokens(cardState),
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    // Suppress gradient if interactiveCard.body exists to avoid border duplication
-    ...(interactiveCard?.body ? {
-      gradient: undefined
-    } : {})
-  });
+  };
+  const getFullBleedInteractiveTokens = (0, _componentsBase.useThemeTokensCallback)('Card', tokensWithoutBg, fullBleedInteractiveVariant);
+  const getFullBleedInteractiveCardTokens = cardState => {
+    return {
+      ...getFullBleedInteractiveTokens(cardState),
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+      borderWidth: 0,
+      ...(interactiveCard?.body ? {
+        gradient: undefined
+      } : {})
+    };
+  };
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
 
@@ -167,12 +323,15 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   // pass as props to ConditionalWrapper
   const imgColCurrentViewport = (0, _componentsBase.useResponsiveProp)(imgCol);
   const maxCol = GRID_COLUMNS;
-  const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
-  const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
-  const isImageWidthAdjustable = imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right');
+  const hasValidImgCol = imgCol && imgColCurrentViewport !== undefined && !Number.isNaN(imgColCurrentViewport);
+  const fullBleedImageWidth = hasValidImgCol ? `${imgColCurrentViewport / maxCol * 100}%` : undefined;
+  const adaptiveContentWidth = hasValidImgCol ? `${(maxCol - imgColCurrentViewport) / maxCol * 100}%` : undefined;
+  const isImageWidthAdjustable = hasValidImgCol && (fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT);
   const contentWrapperStyleProps = {
-    width: adaptiveContentWidth,
-    ...(imgColCurrentViewport >= maxCol && {
+    ...(hasValidImgCol && {
+      width: adaptiveContentWidth
+    }),
+    ...(hasValidImgCol && imgColCurrentViewport >= maxCol && {
       display: 'none'
     }),
     ...(fullBleedContentChildrenAlign && {
@@ -184,26 +343,35 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
-  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref2 => {
-    let [key] = _ref2;
-    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor'] : [])].includes(key);
+  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref4 => {
+    let [key] = _ref4;
+    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor', 'gradient', 'backgroundGradient'] : [])].includes(key);
   }));
+  const cardBaseVariant = backgroundImage ? {
+    ...(interactiveCard?.body ? mergedVariant : variant),
+    padding: 'custom',
+    style: undefined
+  } : {
+    ...(interactiveCard?.body ? mergedVariant : variant),
+    padding: 'custom'
+  };
+  const isHorizontalFullBleed = fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT;
+  const isVerticalFullBleed = fullBleedContentPosition === POSITION.TOP || fullBleedContentPosition === POSITION.BOTTOM;
   const imageWrapperStyleProps = {
-    width: fullBleedImageWidth,
-    ...(imgColCurrentViewport >= maxCol && {
+    ...(isImageWidthAdjustable && {
+      width: fullBleedImageWidth
+    }),
+    ...(isImageWidthAdjustable && imgColCurrentViewport >= maxCol && {
       borderRadius,
       overflow: 'hidden'
     }),
-    ...(imgColCurrentViewport === 0 && {
+    ...(isImageWidthAdjustable && imgColCurrentViewport === 0 && {
       display: 'none'
     })
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
     ref: ref,
-    variant: {
-      ...variant,
-      padding: 'custom'
-    },
+    variant: cardBaseVariant,
     tokens: cardBaseTokens,
     backgroundImage: backgroundImage,
     onPress: fullBleedInteractive ? undefined : onPress,
@@ -213,9 +381,12 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     }),
     ...selectProps(restProps),
     children: [interactiveCard?.selectionType && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-      tokens: tokens,
+      tokens: getCardContentTokens(tokens, {
+        backgroundImage
+      }),
       variant: variant,
       withFooter: hasFooter,
+      backgroundImage: backgroundImage,
       children: children
     }) : null, interactiveCard?.body && !interactiveCard.selectionType ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
@@ -229,104 +400,110 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
           children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
         })
-      }), children && fullBleedContentPosition === 'none' && !fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-        tokens: tokens,
+      }), children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+        tokens: getCardContentTokens(tokens, {
+          backgroundImage
+        }),
         variant: variant,
         withFooter: hasFooter,
+        backgroundImage: backgroundImage,
         children: children
       }) : null]
-    }) : null, fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        marginTop: marginOffset,
-        marginBottom: marginOffset,
-        marginLeft: marginOffset,
-        marginRight: marginOffset
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
-        ref: ref,
-        tokens: getFullBleedInteractiveCardTokens,
-        dataSet: dataSet,
-        onPress: effectiveFullBleedOnPress,
-        href: effectiveFullBleedHref,
-        hrefAttrs: effectiveFullBleedHrefAttrs,
-        ...selectProps(restProps),
-        children: cardState => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
-          direction: contentStackDirection,
-          tokens: {
-            ...columnFlex,
-            alignItems: contentStackAlign
-          },
-          space: 0,
-          children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
-            WrapperComponent: DynamicWidthContainer,
-            wrapperProps: contentWrapperStyleProps,
-            condition: isImageWidthAdjustable,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-              tokens: {
-                ...tokensWithoutBg,
-                ...(backgroundImage ? {} : {
-                  backgroundColor: 'transparent'
-                }),
-                ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
-                  alignSelf: fullBleedContentChildrenAlign
-                })
-              },
-              variant: variant,
-              withFooter: hasFooter,
-              children: children
-            })
-          }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
-            WrapperComponent: DynamicWidthContainer,
-            wrapperProps: imageWrapperStyleProps,
-            condition: isImageWidthAdjustable,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
-              borderRadius: fullBleedBorderRadius,
-              ...fullBleedContentPropsClean,
-              position: fullBleedContentPosition,
-              cardState: cardState
-            })
+    }) : null, fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+      ref: ref,
+      tokens: getFullBleedInteractiveCardTokens,
+      dataSet: dataSet,
+      onPress: effectiveFullBleedOnPress,
+      href: effectiveFullBleedHref,
+      hrefAttrs: effectiveFullBleedHrefAttrs,
+      ...selectProps(restProps),
+      children: cardState => {
+        let overlayOpacity = 0;
+        if (cardState.pressed) {
+          overlayOpacity = 0.2;
+        } else if (cardState.hover) {
+          overlayOpacity = 0.1;
+        }
+        const focusTokens = getFocusBorderTokens(cardState);
+        const showFocusBorder = cardState.focus && focusTokens.borderWidth > 0;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(InteractiveCardWrapper, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+            direction: contentStackDirection,
+            tokens: getStackViewTokens(columnFlex, contentStackAlign),
+            space: 0,
+            children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+              WrapperComponent: DynamicWidthContainer,
+              wrapperProps: contentWrapperStyleProps,
+              condition: isImageWidthAdjustable,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+                tokens: {
+                  ...getCardContentTokens(tokensWithoutBg, {
+                    backgroundImage,
+                    fullBleedContentChildrenAlign,
+                    useTransparentBackground: true
+                  }),
+                  paddingTop: tokens.paddingTop !== undefined ? tokens.paddingTop : allThemeTokens.paddingTop,
+                  paddingBottom: tokens.paddingBottom !== undefined ? tokens.paddingBottom : allThemeTokens.paddingBottom,
+                  paddingLeft: tokens.paddingLeft !== undefined ? tokens.paddingLeft : allThemeTokens.paddingLeft,
+                  paddingRight: tokens.paddingRight !== undefined ? tokens.paddingRight : allThemeTokens.paddingRight
+                },
+                variant: variant,
+                withFooter: hasFooter,
+                backgroundImage: backgroundImage,
+                children: children
+              })
+            }) : null, fullBleedContentPosition !== POSITION.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+              WrapperComponent: DynamicWidthContainer,
+              wrapperProps: imageWrapperStyleProps,
+              condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+                borderRadius: fullBleedBorderRadius,
+                ...fullBleedContentPropsClean,
+                position: fullBleedContentPosition,
+                cardState: undefined
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveOverlay, {
+            overlayOpacity: overlayOpacity,
+            borderRadius: borderRadius
+          }), showFocusBorder && /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusBorder, {
+            borderWidth: `${focusTokens.borderWidth}px`,
+            borderColor: focusTokens.borderColor,
+            borderRadius: borderRadius
           })]
-        })
-      })
-    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === 'none' && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-      tokens: {
-        ...tokens,
-        ...(backgroundImage ? {
-          backgroundColor: 'transparent'
-        } : {}),
-        ...(fullBleedContentChildrenAlign && {
-          alignSelf: fullBleedContentChildrenAlign
-        })
-      },
+        });
+      }
+    }) : null, !fullBleedInteractive && !interactiveCard?.body && fullBleedContentPosition === POSITION.NONE && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+      tokens: getCardContentTokens(tokens, {
+        backgroundImage,
+        fullBleedContentChildrenAlign
+      }),
       variant: variant,
       withFooter: hasFooter,
+      backgroundImage: backgroundImage,
       children: children
-    }) : null, !fullBleedInteractive && fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    }) : null, !fullBleedInteractive && fullBleedContentPosition !== POSITION.NONE ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       direction: contentStackDirection,
-      tokens: {
-        ...columnFlex,
-        alignItems: contentStackAlign
-      },
+      tokens: getStackViewTokens(columnFlex, contentStackAlign),
       space: 0,
       children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: contentWrapperStyleProps,
         condition: isImageWidthAdjustable,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-          tokens: {
-            ...tokens,
-            ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
-              alignSelf: fullBleedContentChildrenAlign
-            })
-          },
+          tokens: getCardContentTokens(tokens, {
+            backgroundImage,
+            fullBleedContentChildrenAlign
+          }),
           variant: variant,
           withFooter: hasFooter,
+          backgroundImage: backgroundImage,
           children: children
         })
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: imageWrapperStyleProps,
-        condition: isImageWidthAdjustable,
+        condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
           borderRadius: fullBleedBorderRadius,
           ...fullBleedContentPropsClean,
@@ -342,7 +519,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     })]
   });
 });
-const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
+const positionValues = Object.values(POSITION);
 const alignValues = ['start', 'end', 'center', 'stretch'];
 const PositionedFullBleedContentPropType = _propTypes.default.shape({
   position: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(positionValues)).isRequired,

package/lib/cjs/Card/CardContent.js

@@ -63,6 +63,7 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     tokens,
     variant,
     withFooter = false,
+    backgroundImage,
     ...rest
   } = _ref2;
   const {
@@ -71,10 +72,32 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     }
   } = (0, _componentsBase.useTheme)();
   const allTokens = (0, _componentsBase.useAllViewportTokens)('Card', tokens, variant);
+
+  // Override backgroundColor if explicitly set in tokens to ensure it takes priority over theme tokens
+  // This is crucial for scenarios with backgroundImage where we need transparency
+  if (tokens.backgroundColor !== undefined) {
+    allTokens.current.backgroundColor = tokens.backgroundColor;
+    allTokens.xs.backgroundColor = tokens.backgroundColor;
+    allTokens.sm.backgroundColor = tokens.backgroundColor;
+    allTokens.md.backgroundColor = tokens.backgroundColor;
+    allTokens.lg.backgroundColor = tokens.backgroundColor;
+    allTokens.xl.backgroundColor = tokens.backgroundColor;
+  }
+
+  // When backgroundImage is present on the Card, ensure CardContent background is transparent
+  // so the background image from the parent CardBase can show through
+  if (backgroundImage) {
+    allTokens.current.backgroundColor = 'transparent';
+    allTokens.xs.backgroundColor = 'transparent';
+    allTokens.sm.backgroundColor = 'transparent';
+    allTokens.md.backgroundColor = 'transparent';
+    allTokens.lg.backgroundColor = 'transparent';
+    allTokens.xl.backgroundColor = 'transparent';
+  }
   let themeTokens;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const stylesByViewport = {
+    const paddingAdjustments = {
       xs: {
         paddingBottom: allTokens.xs.paddingBottom - allTokens.xs.borderWidth,
         paddingLeft: allTokens.xs.paddingLeft - allTokens.xs.borderWidth,
@@ -106,15 +129,16 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         paddingTop: allTokens.xl.paddingTop - allTokens.xl.borderWidth
       }
     };
-    const mediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(paddingAdjustments);
+    const baseStyle = {
+      ...allTokens.current,
+      ...mediaQueryStyles
+    };
     const {
       ids,
       styles
     } = _componentsBase.StyleSheet.create({
-      cardContent: {
-        ...allTokens.current,
-        ...mediaQueryStyles
-      }
+      cardContent: baseStyle
     });
     themeTokens = styles.cardContent;
     mediaIds = ids.cardContent;
@@ -152,6 +176,11 @@ CardContent.propTypes = {
   /**
    * Whether the card has a footer.
    */
-  withFooter: _propTypes.default.bool
+  withFooter: _propTypes.default.bool,
+  /**
+   * Background image object from parent Card component.
+   * When present, makes the CardContent background transparent.
+   */
+  backgroundImage: _propTypes.default.object
 };
 var _default = exports.default = CardContent;