@telus-uds/components-base 3.28.2 → 3.29.0

package/CHANGELOG.md

@@ -1,9 +1,24 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 03 Mar 2026 23:02:55 GMT and should not be manually modified.
+This log was last generated on Fri, 13 Mar 2026 20:33:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.29.0
+
+Fri, 13 Mar 2026 20:33:41 GMT
+
+### Minor changes
+
+- `ExpandCollapseMini`: add align prop (guillermo.peitzner@telus.com)
+- `ColourToggle`: add showTooltips prop (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `Card`: combinations of align and position fixed (josue.higueroscalderon@telus.com)
+- `TabBar`: missing accesible text for the component added (josue.higueroscalderon@telus.com)
+- `ChevronLink`: fix mobile icon vertical alignment (guillermo.peitzner@telus.com)
+
 ## 3.28.2
 
 Tue, 03 Mar 2026 23:02:55 GMT

package/lib/cjs/Card/CardBase.js

@@ -64,9 +64,21 @@ const setBackgroundImage = _ref => {
         case 'left-center':
           backgroundPosition = 'left center';
           break;
+        case 'left-start':
+          backgroundPosition = 'left top';
+          break;
+        case 'left-end':
+          backgroundPosition = 'left bottom';
+          break;
         case 'right-center':
           backgroundPosition = 'right center';
           break;
+        case 'right-start':
+          backgroundPosition = 'right top';
+          break;
+        case 'right-end':
+          backgroundPosition = 'right bottom';
+          break;
         default:
           backgroundPosition = 'center center';
       }

package/lib/cjs/ColourToggle/ColourBubble.js

@@ -12,6 +12,7 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 var _pressability = require("../utils/pressability");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectGeneralBubbleTokens = _ref => {
@@ -76,14 +77,15 @@ const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     colourHexCode,
     colourName,
     isSelected,
-    onPress
+    onPress,
+    showTooltip
   } = _ref4;
   const defaultTokens = tokens({
     selected: isSelected
   });
   const resolveColourBubbleTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, pressState, {});
   const themeTokens = _react.default.useMemo(() => tokens(), [tokens]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  const pressable = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
     accessible: true,
@@ -100,6 +102,14 @@ const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
       }]
     })
   });
+  if (showTooltip) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      content: colourName,
+      activateOnHover: true,
+      children: pressable
+    });
+  }
+  return pressable;
 });
 ColourBubble.displayName = 'ColourBubble';
 ColourBubble.propTypes = {
@@ -128,6 +138,10 @@ ColourBubble.propTypes = {
    * of the color is changed of all currently `items`.
    * Receives two parameters: item object selected and the event
    */
-  onPress: _propTypes.default.func
+  onPress: _propTypes.default.func,
+  /**
+   * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
+   */
+  showTooltip: _propTypes.default.bool
 };
 var _default = exports.default = ColourBubble;

package/lib/cjs/ColourToggle/ColourToggle.js

@@ -22,6 +22,7 @@ const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     defaultColourId,
     items,
     onChange,
+    showTooltips,
     ...rest
   } = _ref;
   const [currentColourId, setCurrentColourId] = _react.default.useState(defaultColourId);
@@ -61,7 +62,8 @@ const ColourToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           isSelected: id === currentColourId,
           colourHexCode: colourHexCode,
           colourName: colourName,
-          onPress: handleChangeColour
+          onPress: handleChangeColour,
+          showTooltip: showTooltips
         }, colourBubbleId);
       })
     })]
@@ -93,6 +95,10 @@ ColourToggle.propTypes = {
   /**
    * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
    */
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  /**
+   * When true, displays each colour's name as a tooltip on hover (web only).
+   */
+  showTooltips: _propTypes.default.bool
 };
 var _default = exports.default = ColourToggle;

package/lib/cjs/ExpandCollapse/Control.js

@@ -73,11 +73,15 @@ function selectIconContainerStyles(_ref2) {
 }
 function selectTextContainerStyles(_ref3) {
   let {
-    textLine
+    textLine,
+    controlAlign
   } = _ref3;
   return {
     textDecorationLine: textLine,
-    flex: 1
+    flex: 1,
+    ...(controlAlign && {
+      alignItems: controlAlign
+    })
   };
 }
 function selectIconTokens(tokens) {
@@ -92,6 +96,7 @@ const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref
     isExpanded,
     children,
     tokens,
+    controlAlign,
     accessibilityRole = 'button',
     variant,
     ...rest
@@ -142,7 +147,12 @@ const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref
             ...selectIconTokens(themeTokens)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
+          style: [selectTextContainerStyles({
+            ...themeTokens,
+            ...(controlAlign && {
+              controlAlign
+            })
+          }), staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(getControlState(pressableState)) : children
         })]
       });
@@ -168,6 +178,10 @@ ExpandCollapseControl.propTypes = {
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
   isExpanded: _propTypes.default.bool,
+  /**
+   * Optional alignment for control content. Overrides token-driven alignment.
+   */
+  controlAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * Function called when the ExpandCollapse is pressed.
    */

package/lib/cjs/ExpandCollapse/Panel.js

@@ -104,6 +104,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     onPress,
     control,
     controlTokens,
+    controlAlign,
     children,
     tokens,
     variant,
@@ -173,6 +174,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
         ...selectedProps,
         isExpanded: isExpanded,
         tokens: controlTokens,
+        controlAlign: controlAlign,
         variant: variant,
         onPress: handleControlPress,
         ref: controlRef,
@@ -272,6 +274,10 @@ ExpandCollapsePanel.propTypes = {
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -13,6 +13,11 @@ var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollaps
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.contentfulProps]);
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
 const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
@@ -21,6 +26,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     nativeID,
     initialOpen = false,
     dataSet,
+    align,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = (0, _utils.useUniqueId)('ExpandCollapseMiniPanel');
@@ -48,12 +54,14 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
         borderColor: 'transparent',
         textLine: tokens.textLine ?? 'none',
         backgroundColor: 'transparent'
-      }
+      },
+      controlAlign: align && alignMap[align]
       // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
       control: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapseMiniControl.default, {
         pressableState: pressableState,
+        align: align,
         ...rest
       }),
       controlRef: ref,
@@ -93,6 +101,10 @@ ExpandCollapseMini.propTypes = {
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: _propTypes.default.object
+  dataSet: _propTypes.default.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: _propTypes.default.oneOf(['start', 'middle', 'end'])
 };
 var _default = exports.default = ExpandCollapseMini;

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -13,6 +13,11 @@ var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const alignSelfMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
 
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
@@ -31,6 +36,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
     iconPosition = 'right',
     tokens,
     variant = {},
+    align,
     ...rest
   } = _ref;
   const {
@@ -99,7 +105,10 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
       ...getTokens(linkState),
       iconSize,
       blockFontSize: fontSize,
-      blockLineHeight: lineHeight
+      blockLineHeight: lineHeight,
+      ...(align && {
+        alignSelf: alignSelfMap[align]
+      })
     }),
     ref: ref,
     ...presentationOnly,
@@ -130,6 +139,10 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: _propTypes.default.object
+  variant: _propTypes.default.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: _propTypes.default.oneOf(['start', 'middle', 'end'])
 };
 var _default = exports.default = ExpandCollapseMiniControl;

package/lib/cjs/Link/ChevronLink.js

@@ -47,6 +47,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', applyChevronTokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
     ...otherlinkProps,
+    useMeasuredMobileIconLayout: true,
     iconPosition: direction,
     tokens: getTokens,
     dataSet: dataSet,

package/lib/cjs/Link/LinkBase.js

@@ -13,6 +13,7 @@ var _props = require("../utils/props");
 var _pressability = require("../utils/pressability");
 var _utils = require("../utils");
 var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
+var _MobileIconTextContent = _interopRequireDefault(require("./MobileIconTextContent"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Icon = require("../Icon");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -144,6 +145,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     tokens = {},
     children,
     dataSet,
+    useMeasuredMobileIconLayout = false,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -187,8 +189,8 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      const mobileCompensation = null;
-      return [outerBorderStyles, mobileCompensation, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      const shouldUseMeasuredMobileContent = _Platform.default.OS !== 'web' && useMeasuredMobileIconLayout;
+      return [outerBorderStyles, shouldUseMeasuredMobileContent ? staticStyles.measuredMobileOuterBorderCompensation : null, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -203,19 +205,32 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       } = themeTokens;
       const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
       const adjustedIconSpace = _Platform.default.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
+      const shouldUseMeasuredMobileContent = _Platform.default.OS !== 'web' && useMeasuredMobileIconLayout;
+      const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline;
+      const linkTextContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [textStyles, blockTextStyles, textBaselineStyle, staticStyles.bubblePointerEvents],
+        children: typeof children === 'function' ? children(linkState) : children
+      });
+      const sharedIconProps = {
+        ...iconProps,
+        tokens: iconTokens,
+        style: staticStyles.bubblePointerEvents
+      };
+      if (shouldUseMeasuredMobileContent) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileIconTextContent.default, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: adjustedIconSpace,
+          iconProps: sharedIconProps,
+          children: linkTextContent
+        });
+      }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: adjustedIconSpace,
-        iconProps: {
-          ...iconProps,
-          tokens: iconTokens,
-          style: staticStyles.bubblePointerEvents
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
-          children: typeof children === 'function' ? children(linkState) : children
-        })
+        iconProps: sharedIconProps,
+        children: linkTextContent
       });
     }
   });
@@ -273,11 +288,12 @@ const staticStyles = _StyleSheet.default.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(_Platform.default.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: _Platform.default.OS === 'android' ? 2 : 0,
-      paddingTop: _Platform.default.OS === 'android' ? 2 : 0
+      paddingVertical: _Platform.default.OS === 'android' ? 2 : 0
     })
   }
 });

package/lib/cjs/Link/MobileIconTextContent.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Icon = _interopRequireWildcard(require("../Icon/Icon"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MobileIconTextContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    space = 0,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps = {},
+    children
+  } = _ref;
+  const [translateY, setTranslateY] = _react.default.useState(0);
+  const latestTranslateYRef = _react.default.useRef(0);
+  const layoutsRef = _react.default.useRef({
+    container: null,
+    text: null,
+    icon: null
+  });
+  const applyAlignment = _react.default.useCallback(() => {
+    const {
+      container,
+      text,
+      icon
+    } = layoutsRef.current;
+    if (!container || !icon || !icon.height) return;
+    const targetY = text ? text.y + text.height / 2 : container.height / 2;
+    const iconY = icon.y + icon.height / 2;
+    const nextTranslateY = Math.round((targetY - iconY) * 100) / 100;
+    if (!Number.isFinite(nextTranslateY)) return;
+    if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return;
+    latestTranslateYRef.current = nextTranslateY;
+    setTranslateY(nextTranslateY);
+  }, []);
+  const handleContainerLayout = _react.default.useCallback(_ref2 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref2;
+    layoutsRef.current.container = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleTextLayout = _react.default.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref3;
+    layoutsRef.current.text = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleIconLayout = _react.default.useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref4;
+    layoutsRef.current.icon = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }) : null;
+  const iconWrapper = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    onLayout: handleIconLayout,
+    style: [staticStyles.iconContainer, {
+      transform: [{
+        translateY
+      }]
+    }],
+    children: iconContent
+  }) : null;
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      onLayout: handleContainerLayout,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        onLayout: handleTextLayout,
+        children: children
+      }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.inlineIconContainer,
+        children: iconWrapper
+      })]
+    });
+  }
+  const iconSpaceStyle = iconPosition === 'left' ? {
+    marginRight: space
+  } : {
+    marginLeft: space
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    onLayout: handleContainerLayout,
+    style: staticStyles.rowContainer,
+    children: [iconPosition === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      onLayout: handleTextLayout,
+      children: children
+    }), iconPosition === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    })]
+  });
+});
+MobileIconTextContent.displayName = 'MobileIconTextContent';
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: _utils.spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: _propTypes.default.node
+};
+const staticStyles = _StyleSheet.default.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+});
+var _default = exports.default = MobileIconTextContent;

package/lib/cjs/TabBar/TabBar.js

@@ -58,6 +58,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
@@ -69,6 +70,7 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     onChange,
     variant,
     tokens,
+    accessibilityLabel,
     ...rest
   } = _ref3;
   const [isSelected, setIsSelected] = _react.default.useState(initiallySelectedItem);
@@ -83,6 +85,8 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      accessibilityRole: "tablist",
+      accessibilityLabel: accessibilityLabel,
       children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarItem.default, {
         label: item.label,
         href: item.href,
@@ -91,7 +95,6 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist",
         tokens: item.tokens
       }, item.id))
     })
@@ -116,7 +119,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: _utils.variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: (0, _utils.getTokensPropType)('TabBar')
+  tokens: (0, _utils.getTokensPropType)('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: _propTypes.default.string
 };
 const styles = _StyleSheet.default.create({
   tabBar: {

package/lib/esm/Card/CardBase.js

@@ -57,9 +57,21 @@ const setBackgroundImage = _ref => {
         case 'left-center':
           backgroundPosition = 'left center';
           break;
+        case 'left-start':
+          backgroundPosition = 'left top';
+          break;
+        case 'left-end':
+          backgroundPosition = 'left bottom';
+          break;
         case 'right-center':
           backgroundPosition = 'right center';
           break;
+        case 'right-start':
+          backgroundPosition = 'right top';
+          break;
+        case 'right-end':
+          backgroundPosition = 'right bottom';
+          break;
         default:
           backgroundPosition = 'center center';
       }

package/lib/esm/ColourToggle/ColourBubble.js

@@ -6,6 +6,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import { resolvePressableTokens } from '../utils/pressability';
 import { applyShadowToken } from '../ThemeProvider';
 import { getTokensPropType } from '../utils';
+import Tooltip from '../Tooltip';
 import { jsx as _jsx } from "react/jsx-runtime";
 const selectGeneralBubbleTokens = _ref => {
   let {
@@ -69,14 +70,15 @@ const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     colourHexCode,
     colourName,
     isSelected,
-    onPress
+    onPress,
+    showTooltip
   } = _ref4;
   const defaultTokens = tokens({
     selected: isSelected
   });
   const resolveColourBubbleTokens = pressState => resolvePressableTokens(tokens, pressState, {});
   const themeTokens = React.useMemo(() => tokens(), [tokens]);
-  return /*#__PURE__*/_jsx(Pressable, {
+  const pressable = /*#__PURE__*/_jsx(Pressable, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
     accessible: true,
@@ -93,6 +95,14 @@ const ColourBubble = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       }]
     })
   });
+  if (showTooltip) {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      content: colourName,
+      activateOnHover: true,
+      children: pressable
+    });
+  }
+  return pressable;
 });
 ColourBubble.displayName = 'ColourBubble';
 ColourBubble.propTypes = {
@@ -121,6 +131,10 @@ ColourBubble.propTypes = {
    * of the color is changed of all currently `items`.
    * Receives two parameters: item object selected and the event
    */
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  /**
+   * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
+   */
+  showTooltip: PropTypes.bool
 };
 export default ColourBubble;