@telus-uds/components-base 3.26.0 → 3.28.0

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 = {
   /**

package/lib/cjs/SideNav/SideNav.js

@@ -15,13 +15,28 @@ 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; }
-function selectBorderStyles(tokens) {
+const selectContainerTokens = _ref => {
+  let {
+    borderWidth,
+    borderStyle,
+    borderColor
+  } = _ref;
   return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
+    borderTopWidth: borderWidth,
+    borderStyle,
+    borderColor
   };
-}
+};
+const selectItemTokens = function () {
+  let tokens = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let isLastItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return {
+    ...tokens,
+    ...(isLastItem ? {
+      borderWidth: 0
+    } : {})
+  };
+};
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
 /**
@@ -29,7 +44,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  - Use in conjunction with a large amount of educational / informational content
  - Allow the user to navigate between options frequently and efficiently
  */
-const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     variant = {},
@@ -38,7 +53,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     itemTokens,
     groupTokens,
     ...rest
-  } = _ref;
+  } = _ref2;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
   const [active, setActive] = _react.default.useState({
     groupId: undefined,
@@ -56,14 +71,15 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
     ref: ref,
     maxOpen: accordion ? 1 : null,
-    style: selectBorderStyles(themeTokens),
+    tokens: selectContainerTokens(themeTokens),
     ...selectProps(rest),
-    children: _ref2 => {
+    children: _ref3 => {
       let {
         openIds,
         onToggle
-      } = _ref2;
-      const renderItem = (item, index, groupId) => {
+      } = _ref3;
+      const renderItem = function (item, index, groupId) {
+        let isLastItem = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
         const {
           itemId = `item-${index}`,
           onPress
@@ -81,7 +97,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             ...variant,
             type: 'child'
           } : variant,
-          tokens: itemTokens,
+          tokens: selectItemTokens(itemTokens, isLastItem),
           isActive: isItemActive(itemId, groupId),
           onPress: handlePress
         });
@@ -105,7 +121,7 @@ const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             openGroups: openIds,
             isActive: isGroupActive,
             onToggle: handleToggle
-          }, _react.default.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
+          }, _react.default.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId, itemIndex === child.props.children.length - 1)));
         }
         return null;
       });

package/lib/esm/Card/Card.js

@@ -16,18 +16,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,
@@ -37,7 +45,7 @@ const getInputProps = _ref2 => {
     isChecked,
     isInactive,
     handleChange
-  } = _ref2;
+  } = _ref3;
   return {
     inputId: id,
     tokens: {
@@ -100,7 +108,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.forwardRef((_ref3, ref) => {
+const Card = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     tokens,
@@ -110,8 +118,9 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     id,
     interactiveCard,
     backgroundImage,
+    testID,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const viewport = useViewport();
   const {
     themeOptions
@@ -182,8 +191,8 @@ const Card = /*#__PURE__*/React.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 ? selectStyles({
         ...viewportTokens,
         paddingTop: 0,
@@ -210,13 +219,18 @@ const Card = /*#__PURE__*/React.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__*/_jsx(View, {
-          style: selectInputStyle(getThemeTokens()),
+          style: containerStyle,
+          testID: inputTestID,
           children: /*#__PURE__*/_jsx(CheckboxButton, {
             ...props,
             tokens: {
@@ -227,7 +241,8 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         });
       case SelectionType.Radio:
         return /*#__PURE__*/_jsx(View, {
-          style: selectInputStyle(getThemeTokens()),
+          style: containerStyle,
+          testID: inputTestID,
           children: /*#__PURE__*/_jsx(RadioButton, {
             ...props,
             tokens: {
@@ -248,6 +263,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       dataSet: mediaIds && {
         media: mediaIds
       },
+      testID: testID,
       ...selectProps(rest),
       children: [interactiveCard?.body && /*#__PURE__*/_jsx(PressableCardBase, {
         ref: ref,
@@ -326,7 +342,8 @@ Card.propTypes = {
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType,
     href: PropTypes.string,
-    hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
+    hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+    inputPosition: PropTypes.oneOf(['left', 'right'])
   }),
   /**
    * Apply background image to the card.
@@ -343,6 +360,10 @@ Card.propTypes = {
   /**
    * Data set for the card.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Test ID used for e2e testing.
+   */
+  testID: PropTypes.string
 };
 export default Card;

package/lib/esm/Card/CardBase.js

@@ -107,9 +107,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
-export const selectStyles = _ref2 => {
+export const selectStyles = _ref4 => {
   let {
     flex,
     backgroundColor,
@@ -130,7 +172,7 @@ export const selectStyles = _ref2 => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref2;
+  } = _ref4;
   const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web';
   let backgroundImageValue = null;
   if (hasGradient) {
@@ -176,7 +218,7 @@ export const selectStyles = _ref2 => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const CardBase = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     children,
     tokens,
@@ -185,8 +227,14 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     fullBleedContent,
     cardState,
     ...rest
-  } = _ref3;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
+  } = _ref5;
+  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 {
@@ -212,29 +260,57 @@ const CardBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       paddingBottom,
       paddingLeft,
       paddingRight,
+      borderWidth,
+      borderColor,
+      borderRadius,
+      backgroundColor,
       ...containerStyle
     } = cardStyle;
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
-    const paddedContent = hasPadding ? /*#__PURE__*/_jsx(View, {
-      style: {
+    const hasInteractiveBorder = borderWidth && borderWidth > 0;
+    const hasInteractiveOverlay = isOverlayColor(backgroundColor);
+    const paddedContent = hasPadding || hasInteractiveBorder ? /*#__PURE__*/_jsx(View, {
+      style: selectPaddedContentStyles({
         paddingTop,
         paddingBottom,
         paddingLeft,
-        paddingRight
-      },
+        paddingRight,
+        borderWidth,
+        borderColor,
+        borderRadius,
+        hasInteractiveBorder
+      }),
       children: children
     }) : children;
+    const contentWithOverlay = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [hasInteractiveOverlay && Platform.OS === 'web' && /*#__PURE__*/_jsx(View, {
+        style: selectInteractiveOverlayStyles({
+          backgroundColor,
+          borderRadius,
+          borderWidth
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: staticStyles.contentOverlay,
+        children: paddedContent
+      })]
+    });
     content = setBackgroundImage({
       src: imageSourceViewport,
       alt,
       backgroundImageResizeMode,
       backgroundImagePosition,
       backgroundImageAlign,
-      content: paddedContent,
-      cardStyle: containerStyle
+      content: contentWithOverlay,
+      cardStyle: {
+        ...containerStyle,
+        borderRadius
+      }
     });
     return /*#__PURE__*/_jsx(View, {
-      style: containerStyle,
+      style: {
+        ...containerStyle,
+        borderRadius
+      },
       dataSet: dataSet,
       ref: ref,
       ...props,
@@ -312,8 +388,8 @@ const staticStyles = StyleSheet.create({
   contentOverlay: {
     position: 'relative',
     width: '100%',
-    height: '100%',
-    zIndex: 1
+    minHeight: '100%',
+    zIndex: 2
   },
   containContainer: {
     width: '100%',

package/lib/esm/Card/PressableCardBase.js

@@ -8,8 +8,74 @@ import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
 import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
 import CardBase, { fullBleedContentPropTypes } from './CardBase';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, 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__*/_jsxs(View, {
+    style: [staticStyles.focusOverlayContainer, selectFocusOverlayContainerStyles(tokens), Platform.OS === 'web' && staticStyles.webOutlineNone],
+    children: [children, showFocusBorder && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.focusBorder, selectFocusBorderStyles(tokens)],
+      accessible: false,
+      importantForAccessibility: "no"
+    })]
+  });
+};
+FocusBorderOverlay.propTypes = {
+  tokens: PropTypes.shape({
+    flex: PropTypes.number,
+    minWidth: PropTypes.number,
+    marginTop: PropTypes.number,
+    marginBottom: PropTypes.number,
+    marginLeft: PropTypes.number,
+    marginRight: PropTypes.number,
+    borderColor: PropTypes.string,
+    borderWidth: PropTypes.number,
+    borderRadius: PropTypes.number
+  }).isRequired,
+  pressableState: PropTypes.shape({
+    focused: PropTypes.bool
+  }).isRequired,
+  children: PropTypes.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
@@ -21,7 +87,7 @@ export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -35,7 +101,7 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fullBleedContent,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
-  } = _ref;
+  } = _ref2;
   const {
     onPress,
     ...rest
@@ -52,11 +118,62 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     partial: true,
     allowFunction: true
   }), 'PressableCard');
-  const getCardTokens = pressableState => selectTokens('Card', getTokens(pressableState));
+  const getCardTokens = pressableState => {
+    const allTokens = getTokens(pressableState);
+    const cardTokens = 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,
@@ -65,6 +182,10 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     return {
       flex,
       minWidth: minWidth + outerBorderGap + outerBorderWidth,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
       ...applyOuterBorder({
         outerBorderColor,
         outerBorderGap,
@@ -158,11 +279,15 @@ const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...rest,
       accessibilityRole
     }),
-    children: pressableState => /*#__PURE__*/_jsx(CardBase, {
-      tokens: getCardTokens(pressableState),
-      backgroundImage: backgroundImage,
-      fullBleedContent: fullBleedContent,
-      children: typeof children === 'function' ? children(getCardState(pressableState)) : children
+    children: pressableState => /*#__PURE__*/_jsx(FocusBorderOverlay, {
+      tokens: getTokens(pressableState),
+      pressableState: pressableState,
+      children: /*#__PURE__*/_jsx(CardBase, {
+        tokens: getCardTokens(pressableState),
+        backgroundImage: backgroundImage,
+        fullBleedContent: fullBleedContent,
+        children: typeof children === 'function' ? children(getCardState(pressableState)) : children
+      })
     })
   });
 });
@@ -177,6 +302,20 @@ const staticStyles = StyleSheet.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';