@telus-uds/components-base 4.0.0-alpha.0 → 4.0.0-alpha.1

package/CHANGELOG.md

@@ -1,24 +1,53 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 20 Mar 2026 02:26:39 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Apr 2026 17:20:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 4.0.0-alpha.0
+## 4.0.0-alpha.1
 
-Fri, 20 Mar 2026 02:26:39 GMT
+Fri, 10 Apr 2026 17:20:02 GMT
 
 ### Major changes
 
-- Upgrade to React 19 and other major changes, please refer to the changelog for more details (shahzaibkhalidmalik@outlook.com)
-- Bump @telus-uds/system-constants to v4.0.0-alpha.0
-- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.0
+- `Notification`: remove system prop (guillermo.peitzner@telus.com)
+- `Card`: remove background variant and set style as default (sergio.ramirez@telus.com)
+- `Link`: deprecate alternative and inverse variants (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.1
+
+### Minor changes
+
+- `Carousel`: Add `isVideo` prop to thumbnail navigation to display a play icon overlay on video thumbnails (josue.higueros@telus.com)
 
 ### Patches
 
 - `Modal`: Fix onPress error when backgroundDismissible is false (david.melara1@telus.com)
+- `QuickLinks`: Add `listitem` role to item wrappers on web in button mode for proper ARIA semantics. (sergio.ramirez@telus.com)
+- `TextInput`: Include hint and feedback in the describedBy prop (david.melara1@telus.com)
+- `ActionCard`: fix mobile spacing (guillermo.peitzner@telus.com)
 - `ExpandCollapse`: columnwrap example fixed in mobile (josue.higueroscalderon@telus.com)
 
+## 3.29.1
+
+Mon, 06 Apr 2026 21:25:55 GMT
+
+### Patches
+
+- `ExpandCollapse`: columnwrap example fixed in mobile (josue.higueroscalderon@telus.com)
+- `Modal`: Fix onPress error when backgroundDismissible is false (david.melara1@telus.com)
+- `QuickLinks`: Add `listitem` role to item wrappers on web in button mode for proper ARIA semantics. (sergio.ramirez@telus.com)
+- `TextInput`: Include hint and feedback in the describedBy prop (david.melara1@telus.com)
+
+## 4.0.0-alpha.0
+
+Fri, 20 Mar 2026 00:57:30 GMT
+
+### Major changes
+
+- Upgrade to React 19 and other major changes, please refer to the changelog for more details (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-constants to v4.0.0-alpha.0
+- Bump @telus-uds/system-theme-tokens to v5.0.0-alpha.0
+
 ## 3.29.0
 
 Fri, 13 Mar 2026 20:33:41 GMT

package/jest.config.cjs

@@ -34,6 +34,7 @@ module.exports = {
     '^@telus-uds/system-theme-tokens$': '<rootDir>/../system-theme-tokens/src'
   },
   testMatch: [`<rootDir>/__tests__/**/*.test.js?(x)`],
+  testPathIgnorePatterns: ['\\.web\\.test\\.'],
   transformIgnorePatterns: [
     'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
   ],

package/lib/cjs/ActionCard/ActionCard.js

@@ -8,7 +8,6 @@ var _react = _interopRequireDefault(require("react"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _a11yProps = require("../utils/props/a11yProps");
 var _tokens = require("../utils/props/tokens");
@@ -260,9 +259,10 @@ const ActionCard = exports.ActionCard = /*#__PURE__*/_react.default.forwardRef((
               style: staticStyles.header,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
                 style: [selectTitleStyles(themeTokens), staticStyles.title],
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+                  style: staticStyles.titleRow,
                   children: [(0, _children.wrapStringsInText)(title, {
-                    style: selectTitleTextStyles(themeTokens)
+                    style: [selectTitleTextStyles(themeTokens), staticStyles.titleText]
                   }), themeTokens.statusIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
                     style: staticStyles.statusIcon,
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
@@ -351,6 +351,13 @@ const staticStyles = _StyleSheet.default.create({
   title: {
     flexShrink: 1
   },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  titleText: {
+    flexShrink: 1
+  },
   statusIcon: {
     marginLeft: 4
   }

package/lib/cjs/Card/Card.js

@@ -87,10 +87,10 @@ const getInputProps = _ref3 => {
  *
  * ## Component API
  *
- * ### Background
+ * ### Style
  *
- * In order to control the background of a card, the following tokens are currently
- * supported:
+ * In order to control the style of a card, use the `style` variant.
+ * The following tokens are supported:
  *
  * - `backgroundColor`
  *

package/lib/cjs/Carousel/Carousel.js

@@ -1187,9 +1187,14 @@ Carousel.propTypes = {
    * An array of objects containing information on the thumbnails to be rendered as navigation panel
    */
   thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: _propTypes.default.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: _propTypes.default.string,
-    src: _propTypes.default.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: _propTypes.default.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
   })),
   /**
    * Minimal part of slide width must be swiped for changing index.

package/lib/cjs/Carousel/CarouselThumbnail.js

@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.CarouselThumbnail = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _CarouselContext = require("./CarouselContext");
 var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _useViewport = require("../ViewportProvider/useViewport");
+var _Icon = require("../Icon/Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectPressableTokens = _ref => {
@@ -30,17 +33,64 @@ const selectPressableTokens = _ref => {
   };
 };
 
+// Play icon overlay appearance is consistent across all brands and is not theme-configurable.
+// The circle occupies 55% of the thumbnail size, and the icon occupies 55% of the circle diameter.
+const PLAY_ICON_RATIO = 0.55;
+const PLAY_ICON_BORDER_RADIUS_DIVISOR = 2;
+const selectImageStyles = size => ({
+  width: size,
+  height: size
+});
+const selectSelectedStyles = _ref2 => {
+  let {
+    selectedBorderColor,
+    selectedBorderWidth,
+    padding,
+    margin
+  } = _ref2;
+  return {
+    borderColor: selectedBorderColor,
+    borderWidth: selectedBorderWidth,
+    padding: padding - selectedBorderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectNonSelectedStyles = _ref3 => {
+  let {
+    borderWidth,
+    padding,
+    margin,
+    selectedBorderWidth
+  } = _ref3;
+  return {
+    padding: padding - borderWidth,
+    marginBottom: margin + selectedBorderWidth
+  };
+};
+const selectPlayIconCircleStyles = thumbnailSize => {
+  const diameter = thumbnailSize * PLAY_ICON_RATIO;
+  return {
+    width: diameter,
+    height: diameter,
+    borderRadius: diameter / PLAY_ICON_BORDER_RADIUS_DIVISOR
+  };
+};
+const selectPlayIconTokens = thumbnailSize => ({
+  size: thumbnailSize * PLAY_ICON_RATIO * PLAY_ICON_RATIO
+});
+
 /**
- * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
+ * `CarouselThumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = exports.CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const CarouselThumbnail = exports.CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     accessibilityLabel,
     alt,
     index,
+    isVideo,
     src
-  } = _ref2;
+  } = _ref4;
   const {
     activeIndex,
     itemLabel,
@@ -62,58 +112,100 @@ const CarouselThumbnail = exports.CarouselThumbnail = /*#__PURE__*/_react.defaul
     selectedBorderColor,
     selectedBorderWidth,
     size,
-    margin
+    margin,
+    playIcon
   } = getThumbnailTokens({
     viewport
   });
-  const styles = {
-    image: {
-      height: size,
-      width: size
-    },
-    selected: {
-      borderColor: selectedBorderColor,
-      borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth,
-      marginBottom: margin + selectedBorderWidth
-    },
-    nonSelected: {
-      padding: padding - borderWidth,
-      marginBottom: margin + selectedBorderWidth
-    }
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     onKeyDown: handleKeyDown,
     onPress: handlePress,
-    style: _ref3 => {
+    style: _ref5 => {
       let {
         hovered,
         pressed,
         focused
-      } = _ref3;
+      } = _ref5;
       const pressableStyles = selectPressableTokens(getThumbnailTokens({
         hover: hovered,
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex ? [styles.selected, {
-        outline: 'none'
-      }] : styles.nonSelected];
+      return [pressableStyles, index === activeIndex ? [selectSelectedStyles({
+        selectedBorderColor,
+        selectedBorderWidth,
+        padding,
+        margin
+      }), staticStyles.selectedPressableOutline] : selectNonSelectedStyles({
+        borderWidth,
+        padding,
+        margin,
+        selectedBorderWidth
+      })];
     },
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-      accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel ?? alt,
-      source: src,
-      style: styles.image,
-      title: thumbnailTitle
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.imageContainer, selectImageStyles(size)],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        accessibilityIgnoresInvertColors: true,
+        accessibilityLabel: accessibilityLabel ?? alt,
+        source: src,
+        style: selectImageStyles(size),
+        title: thumbnailTitle
+      }), isVideo && playIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.playIconOverlayContainer,
+        testID: `play-icon-overlay-${index}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [selectPlayIconCircleStyles(size), staticStyles.playIconCircleBackground],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            icon: playIcon,
+            tokens: {
+              ...selectPlayIconTokens(size),
+              color: staticStyles.playIconSymbol.color
+            }
+          })
+        })
+      })]
     })
   }, src);
 });
 CarouselThumbnail.displayName = 'CarouselThumbnail';
 CarouselThumbnail.propTypes = {
+  /** Accessibility label for screen readers, overrides the alt text */
   accessibilityLabel: _propTypes.default.string,
+  /** Alt text for the thumbnail image */
   alt: _propTypes.default.string,
+  /** Zero-based index of this thumbnail within the carousel */
   index: _propTypes.default.number,
-  src: _propTypes.default.string
-};
+  /**
+   * When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video.
+   */
+  isVideo: _propTypes.default.bool,
+  /** Image source URI (web) or local asset require() (native) */
+  src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+const staticStyles = _StyleSheet.default.create({
+  imageContainer: {
+    position: 'relative'
+  },
+  playIconOverlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  selectedPressableOutline: {
+    outlineStyle: 'none'
+  },
+  playIconCircleBackground: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  playIconSymbol: {
+    color: 'rgb(255, 255, 255)'
+  }
+});

package/lib/cjs/Carousel/CarouselThumbnailNavigation.js

@@ -52,12 +52,14 @@ const CarouselThumbnailNavigation = exports.CarouselThumbnailNavigation = /*#__P
         let {
           accessibilityLabel,
           alt,
+          isVideo,
           src
         } = _ref2;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.CarouselThumbnail, {
           accessibilityLabel: accessibilityLabel,
           alt: alt,
           index: index,
+          isVideo: isVideo,
           src: src
         }, src);
       })
@@ -70,8 +72,13 @@ CarouselThumbnailNavigation.propTypes = {
    * An array of objects containing information on the thumbnail images.
    */
   thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /** Accessibility label for the thumbnail image, used by assistive technologies. */
     accessibilityLabel: _propTypes.default.string,
+    /** Alternative text for the thumbnail image, displayed when the image cannot be rendered. */
     alt: _propTypes.default.string,
-    src: _propTypes.default.string
+    /** When true, renders a play icon overlay on the thumbnail to indicate that the slide contains a video. */
+    isVideo: _propTypes.default.bool,
+    /** URL or path of the thumbnail image. When used with `isVideo`, this should be the video's poster/preview image. */
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
   })).isRequired
 };

package/lib/cjs/InputSupports/InputSupports.js

@@ -73,8 +73,7 @@ const InputSupports = exports.InputSupports = /*#__PURE__*/_react.default.forwar
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation,
-      accessibilityDescribedBy: feedbackId
+      validation: feedbackValidation
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.Feedback, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,

package/lib/cjs/InputSupports/useInputSupports.js

@@ -31,9 +31,7 @@ const useInputSupports = _ref => {
     accessibilityLabel: label,
     accessibilityHint: joinDefined([!hasValidationError && feedback, hint, maxCharacterAllowed ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed) : undefined]),
     // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId,
-    // feedback receives a11yRole=alert on error, so there's no need to include it here
-    hint && hintId, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
+    accessibilityDescribedBy: joinDefined([hint && hintId, feedback && feedbackId || undefined, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
     accessibilityInvalid: hasValidationError
   };
   return {

package/lib/cjs/Link/ChevronLink.js

@@ -63,8 +63,7 @@ ChevronLink.propTypes = {
   children: _propTypes.default.node,
   variant: _propTypes.default.exact({
     size: _propTypes.default.oneOf(['large', 'small', 'micro']),
-    alternative: _propTypes.default.bool,
-    inverse: _propTypes.default.bool
+    style: _propTypes.default.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse'])
   }),
   ..._linkProps.linkProps.types,
   tokens: (0, _tokens.getTokensPropType)('ChevronLink', 'Link'),

package/lib/cjs/Notification/Notification.js

@@ -255,11 +255,10 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * ### Variants
  * - Use `variant.style` to set the visual style of the notification
  * - Use `dismissible` prop to enable dismissible functionality
- * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
  *
- * ### When to use the system prop?
- * - Use `system` to show system-based messages coming from the application
- * - Don’t use `system` when the message is in response to user action
+ * ### When to use the system style variant?
+ * - Use `variant.style ‘system’` to show system-based messages coming from the application
+ * - Don’t use the `system` style variant when the message is in response to user action
  *
  * ## Variants
  *
@@ -292,7 +291,6 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
 const Notification = exports.Notification = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     children,
-    system,
     dismissible,
     copy = 'en',
     tokens,
@@ -307,9 +305,7 @@ const Notification = exports.Notification = /*#__PURE__*/_react.default.forwardR
     dictionary: _dictionary.dictionary,
     copy
   });
-
-  // TODO: Remove this once the system style variant is deprecated
-  const isSystemEnabled = system || variant?.style?.includes('system');
+  const isSystemEnabled = variant?.style?.includes('system');
   const {
     themeOptions
   } = (0, _useTheme.useTheme)();
@@ -425,10 +421,6 @@ Notification.propTypes = {
    * Content of the `Notification`.
    */
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
-  /**
-   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
-   */
-  system: _propTypes.default.bool,
   /**
    * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
    */

package/lib/cjs/Progress/ProgressBar.js

@@ -69,9 +69,9 @@ const selectBarStyles = _ref => {
  *
  * ## Variants
  *
- * - Use the following variants to render specific types of progress bars:
- *   - `negative`: set to `true` if you wish to use the negative theming for progress bar filling,
- *   - `inactive`: set to `true` if you wish to style the progress bar as inactive.
+ * - Use `variant={{ style: 'value' }}` to render specific types of progress bars:
+ *   - `style: 'negative'` for negative theming for progress bar filling,
+ *   - `style: 'inactive'` to style the progress bar as inactive.
  *
  * ## Usability and A11y guidelines
  *

package/lib/cjs/Progress/ProgressBarBackground.js

@@ -18,10 +18,9 @@ const ProgressBarBackground = exports.ProgressBarBackground = /*#__PURE__*/_reac
     variant
   } = _ref;
   let source = null;
-  // TODO: Remove the `variant?.inactive` & `variant?.negative` to complete the deprecation
-  if (variant?.inactive || variant?.style === _constants.INACTIVE_VARIANT) {
+  if (variant?.style === _constants.INACTIVE_VARIANT) {
     source = inactiveBackground;
-  } else if (variant?.negative || variant?.style === _constants.NEGATIVE_VARIANT) {
+  } else if (variant?.style === _constants.NEGATIVE_VARIANT) {
     source = negativeBackground;
   } else {
     return null;

package/lib/cjs/QuickLinks/QuickLinks.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.QuickLinks = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
 var _useViewport = require("../ViewportProvider/useViewport");
 var _tokens = require("../utils/props/tokens");
 var _variantProp = require("../utils/props/variantProp");
+var _semantics = require("../utils/a11y/semantics");
 var _List = require("../List/List");
 var _StackWrap = require("../StackView/StackWrap");
 var _QuickLinksCard = require("./QuickLinksCard");
@@ -42,6 +44,10 @@ const QuickLinks = exports.QuickLinks = /*#__PURE__*/_react.default.forwardRef((
   } = (0, _useThemeTokens.useThemeTokens)('QuickLinks', tokens, variant, {
     viewport
   });
+  const itemAccessibilityRole = _Platform.default.select({
+    web: ['ul', 'ol'].includes(tag) ? _semantics.tagsToRoles.li : undefined,
+    default: undefined
+  });
   const content = list && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.List, {
     ref: ref,
     tokens: listTokens,
@@ -56,6 +62,7 @@ const QuickLinks = exports.QuickLinks = /*#__PURE__*/_react.default.forwardRef((
       justifyContent: stackJustify
     },
     tag: tag,
+    itemAccessibilityRole: itemAccessibilityRole,
     ...rest,
     children: children
   });

package/lib/cjs/StackView/StackWrapBox.js

@@ -58,6 +58,7 @@ const StackWrapBox = exports.StackWrapBox = /*#__PURE__*/_react.default.forwardR
     variant,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _useViewport.useViewport)();
@@ -84,7 +85,8 @@ const StackWrapBox = exports.StackWrapBox = /*#__PURE__*/_react.default.forwardR
   const content = (0, _getStackedContent.getStackedContent)(children, {
     direction,
     space: 0,
-    box: boxProps
+    box: boxProps,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -120,6 +122,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: _propTypes.default.oneOf(_semantics.layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: _propTypes.default.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/cjs/StackView/StackWrapGap.js

@@ -40,6 +40,7 @@ const StackWrapGap = exports.StackWrapGap = /*#__PURE__*/_react.default.forwardR
     children,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _useViewport.useViewport)();
@@ -59,7 +60,8 @@ const StackWrapGap = exports.StackWrapGap = /*#__PURE__*/_react.default.forwardR
   };
   const content = (0, _getStackedContent.getStackedContent)(children, {
     direction,
-    space: 0
+    space: 0,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,

package/lib/cjs/StackView/getStackedContent.js

@@ -42,7 +42,8 @@ const getStackedContent = (children, _ref) => {
     space,
     direction = 'column',
     box,
-    preserveFragments = false
+    preserveFragments = false,
+    itemAccessibilityRole
   } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
@@ -54,15 +55,24 @@ const getStackedContent = (children, _ref) => {
   const validChildren = _react.default.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    (0, _react.createElement)(_Box.Box, {
-      ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
+    let item;
+    if (box) {
+      // If wrapped in Box, that Box needs a key.
+      // If possible, use an existing content key; use an index-based key only if necessary.
+      item = /*#__PURE__*/(0, _react.createElement)(_Box.Box, {
+        ...boxProps,
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID,
+        testID: boxID
+      }, child);
+    } else if (itemAccessibilityRole) {
+      item = /*#__PURE__*/_react.default.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      });
+    } else {
+      item = child;
+    }
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {

package/lib/esm/ActionCard/ActionCard.js

@@ -2,7 +2,6 @@ import React from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
 import PropTypes from 'prop-types';
 import { a11yProps } from '../utils/props/a11yProps';
 import { getTokensPropType } from '../utils/props/tokens';
@@ -253,9 +252,10 @@ export const ActionCard = /*#__PURE__*/React.forwardRef((_ref1, ref) => {
               style: staticStyles.header,
               children: [/*#__PURE__*/_jsx(View, {
                 style: [selectTitleStyles(themeTokens), staticStyles.title],
-                children: /*#__PURE__*/_jsxs(Text, {
+                children: /*#__PURE__*/_jsxs(View, {
+                  style: staticStyles.titleRow,
                   children: [wrapStringsInText(title, {
-                    style: selectTitleTextStyles(themeTokens)
+                    style: [selectTitleTextStyles(themeTokens), staticStyles.titleText]
                   }), themeTokens.statusIcon && /*#__PURE__*/_jsx(View, {
                     style: staticStyles.statusIcon,
                     children: /*#__PURE__*/_jsx(Icon, {
@@ -344,6 +344,13 @@ const staticStyles = StyleSheet.create({
   title: {
     flexShrink: 1
   },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  titleText: {
+    flexShrink: 1
+  },
   statusIcon: {
     marginLeft: 4
   }

package/lib/esm/Card/Card.js

@@ -80,10 +80,10 @@ const getInputProps = _ref3 => {
  *
  * ## Component API
  *
- * ### Background
+ * ### Style
  *
- * In order to control the background of a card, the following tokens are currently
- * supported:
+ * In order to control the style of a card, use the `style` variant.
+ * The following tokens are supported:
  *
  * - `backgroundColor`
  *