@telus-uds/components-base 3.28.1 → 3.29.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/Listbox/ListboxOverlay.js

@@ -35,6 +35,7 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     isReady = false,
     overlaidPosition,
     maxWidth,
+    maxHeight,
     minWidth,
     onLayout,
     tokens,
@@ -50,12 +51,16 @@ const DropdownOverlay = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       maxWidth,
       minWidth
     }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    onMouseDown: e => {
+      e.preventDefault();
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
       tokens: {
         shadow: systemTokens.shadow,
         borderRadius: systemTokens.borderRadius,
         ...(_Platform.default.OS === 'web' && {
-          overflowY: 'hidden'
+          maxHeight,
+          overflowY: 'auto'
         }),
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
@@ -85,6 +90,7 @@ DropdownOverlay.propTypes = {
     width: _propTypes.default.number
   }),
   maxWidth: _propTypes.default.number,
+  maxHeight: _propTypes.default.number,
   minWidth: _propTypes.default.number,
   onLayout: _propTypes.default.func,
   tokens: _propTypes.default.object,

package/lib/cjs/Listbox/PressableItem.js

@@ -129,9 +129,9 @@ const PressableItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       onPress(event);
     },
     children: pressableState => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
         style: selectTextStyles(resolveButtonTokens(pressableState)),
-        children: [children, " "]
+        children: children
       });
     }
   });

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/cjs/TextInput/TextInputBase.js

@@ -278,8 +278,8 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     }
   }, [element, pattern]);
   const handleChangeText = event => {
-    const text = event.nativeEvent?.text || event.target?.value;
-    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') : text;
+    const text = event.nativeEvent?.text ?? event.target?.value;
+    let filteredText = isNumeric ? text?.replace(/[^\d]/g, '') || undefined : text;
     if (type === 'card' && filteredText) {
       const formattedValue = filteredText.replace(/[^a-zA-Z0-9]/g, '');
       const regex = new RegExp(`([a-zA-Z0-9]{4})(?=[a-zA-Z0-9])`, 'g');

package/lib/esm/Autocomplete/Autocomplete.js

@@ -14,7 +14,7 @@ import { TextInput } from '../TextInput';
 import InputSupports from '../InputSupports';
 import Loading from './Loading';
 import Suggestions from './Suggestions';
-import { DEFAULT_MAX_SUGGESTIONS, DEFAULT_MIN_TO_SUGGESTION, INPUT_LEFT_PADDING, MIN_LISTBOX_WIDTH } from './constants';
+import { DEFAULT_MAX_SUGGESTIONS, DEFAULT_MIN_TO_SUGGESTION, DEFAULT_MAX_DROPDOWN_HEIGHT, INPUT_LEFT_PADDING, MIN_LISTBOX_WIDTH } from './constants';
 import dictionary from './dictionary';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const staticStyles = StyleSheet.create({
@@ -44,22 +44,36 @@ const highlightAllMatches = function (str) {
       tokens: {
         color: resultsTextColor
       },
-      children: matchIndexes.reduce((acc, matchIndex, index) => [...acc,
-      // Add a piece of the string up to the first occurrence of the substring
-      index === 0 && (str.slice(0, matchIndex) ?? ''),
-      /*#__PURE__*/
-      // Unbold the occurrence of the substring (while keeping the original casing)
-      _jsx(Typography, {
-        variant: {
-          bold: true
-        },
-        tokens: {
-          color: resultsTextColor
-        },
-        children: str.slice(matchIndex, matchIndex + substring.length)
-      }, matchIndex),
-      // Add the rest of the string until the next occurrence or the end of it
-      str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
+      children: matchIndexes.reduce((acc, matchIndex, index) => {
+        const prefix = index === 0 ? str.slice(0, matchIndex) : null;
+        const match = str.slice(matchIndex, matchIndex + substring.length);
+        const suffix = str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length);
+        return [...acc, prefix ? /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            bold: false
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: prefix
+        }, `pre-${matchIndex}`) : null, /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            bold: true
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: match
+        }, matchIndex), suffix ? /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            bold: false
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: suffix
+        }, `post-${matchIndex}`) : null];
+      }, []).filter(Boolean)
     })
   );
 };
@@ -93,12 +107,14 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     isLoading = false,
     items,
     maxSuggestions = DEFAULT_MAX_SUGGESTIONS,
+    maxDropdownHeight = DEFAULT_MAX_DROPDOWN_HEIGHT,
     minToSuggestion = DEFAULT_MIN_TO_SUGGESTION,
     noResults,
     onChange,
     onClear,
     onSelect,
     readOnly,
+    showOptionsOnFocus = false,
     validation,
     value,
     helpText = '',
@@ -147,7 +163,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     hint,
     label: inputLabel
   } = supportsProps;
-  const hintExpansionEnabled = isFocused && helpText && !currentValue;
+  const hintExpansionEnabled = isFocused && !!helpText && !currentValue;
   const {
     overlaidPosition,
     sourceRef: inputRef,
@@ -201,9 +217,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }
   };
   const handleChange = newValue => {
-    onChange?.(newValue || '');
+    onChange?.(newValue);
     setCurrentValue(newValue);
-    setIsExpanded(newValue?.length >= minToSuggestion);
+    const shouldExpand = newValue?.length >= minToSuggestion || showOptionsOnFocus && isFocused && newValue?.length === 0;
+    setIsExpanded(shouldExpand);
     if (!isControlled && initialItems !== undefined) {
       setCurrentItems(initialItems.filter(_ref3 => {
         let {
@@ -215,25 +232,29 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   };
   const handleSelect = selectedId => {
     onSelect?.(selectedId);
-    const {
-      label: newValue,
-      nested,
-      title
-    } = (isControlled ? items : currentItems)?.find(_ref4 => {
+    const selectedItem = (isControlled ? items : currentItems)?.find(_ref4 => {
       let {
         id
       } = _ref4;
       return id === selectedId;
     });
+    const {
+      label,
+      nested,
+      title
+    } = selectedItem;
     if (title) return;
     if (!nested) {
       setNestedSelectedValue(null);
-      onChange?.(newValue);
+      onChange?.(label);
       setIsExpanded(false);
+      setCurrentValue(label);
+    }
+    if (!isControlled && inputRef?.current) inputRef.current.value = label;
+    if (nested) {
+      setNestedSelectedValue(label);
+      setCurrentValue(label);
     }
-    setCurrentValue(newValue);
-    if (!isControlled && inputRef?.current) inputRef.current.value = newValue;
-    if (nested) setNestedSelectedValue(newValue);
     inputRef.current.focus();
   };
 
@@ -281,15 +302,33 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     };
   }, [inputRef]);
   const handleClose = event => {
-    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !openOverlayRef?.current?.contains(event.target) || event.type === 'touchstart' && openOverlayRef?.current && event.touches[0].target && !openOverlayRef?.current?.contains(event.touches[0].target)) {
+    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27')) {
       setIsExpanded(false);
       setNestedSelectedValue(null);
-    } else if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef?.current) {
+      return;
+    }
+    if (event.type === 'keydown' && (event.key === 'ArrowDown' || event.key === 'Tab') && isExpanded && !isLoading && targetRef?.current) {
       event.preventDefault();
       targetRef.current.focus();
+      return;
+    }
+    if (event.type === 'click' || event.type === 'touchstart') {
+      const clickTarget = event.type === 'click' ? event.target : event.touches[0]?.target;
+      const isOutsideOverlay = openOverlayRef?.current && !openOverlayRef.current.contains(clickTarget);
+      const isOutsideInput = inputRef?.current && !inputRef.current.contains(clickTarget);
+      if (isOutsideOverlay && isOutsideInput) {
+        setIsExpanded(false);
+        setNestedSelectedValue(null);
+      }
     }
   };
-  const itemsToShow = currentValue ? itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)) : [];
+  // Calculate items to show based on current state
+  let itemsToShow = [];
+  if (currentValue?.length > 0) {
+    itemsToShow = itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor));
+  } else if (showOptionsOnFocus && isFocused) {
+    itemsToShow = itemsToSuggest(isControlled ? items : currentItems || initialItems);
+  }
   const helpTextToShow = isFocused && !currentValue ? helpText : noResults ?? getCopy('noResults');
   return /*#__PURE__*/_jsxs(View, {
     style: staticStyles.container,
@@ -326,9 +365,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           onChange: handleChange,
           onFocus: () => {
             setisFocused(true);
+            if (showOptionsOnFocus && (!currentValue || currentValue.length === 0)) {
+              setIsExpanded(true);
+            }
           },
           onBlur: () => {
             setisFocused(false);
+            if (showOptionsOnFocus && (!currentValue || currentValue.length === 0)) {
+              setIsExpanded(false);
+            }
           },
           onClear: onClear,
           onKeyPress: handleClose,
@@ -360,12 +405,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/_jsxs(_Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && (itemsToShow.length > 0 || isExpanded || hintExpansionEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,
         minWidth: fullWidth ? inputWidth : MIN_LISTBOX_WIDTH,
         maxWidth: inputWidth,
+        maxHeight: maxDropdownHeight,
         onLayout: handleMeasure,
         tokens: restOfTokens,
         ref: openOverlayRef,
@@ -449,6 +495,10 @@ Autocomplete.propTypes = {
    * Maximum number of suggestions provided at the same time
    */
   maxSuggestions: PropTypes.number,
+  /**
+   * Maximum height (in pixels) of the dropdown before scrolling is enabled
+   */
+  maxDropdownHeight: PropTypes.number,
   /**
    * Text or JSX to render when no results are available
    */
@@ -469,6 +519,10 @@ Autocomplete.propTypes = {
    * Callback function to be called when an item is selected from the list
    */
   onSelect: PropTypes.func,
+  /**
+   * When true, displays all available options when the input receives focus (even without typing)
+   */
+  showOptionsOnFocus: PropTypes.bool,
   /**
    * Input value for controlled usage
    */

package/lib/esm/Autocomplete/constants.js

@@ -1,4 +1,5 @@
 export const DEFAULT_MIN_TO_SUGGESTION = 1;
 export const DEFAULT_MAX_SUGGESTIONS = 5;
+export const DEFAULT_MAX_DROPDOWN_HEIGHT = 336; // Approximately 7 items (48px each)
 export const INPUT_LEFT_PADDING = 16;
 export const MIN_LISTBOX_WIDTH = 288;

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/Carousel/Carousel.js

@@ -917,8 +917,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   // Related discussion - https://github.com/telus/universal-design-system/issues/1549
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
-    raised: !variant?.inverse && true,
-    inverse: variant?.inverse
+    raised: true
   };
   const getCopyWithPlaceholders = React.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, totalItems);

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;

package/lib/esm/ColourToggle/ColourToggle.js

@@ -15,6 +15,7 @@ const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     defaultColourId,
     items,
     onChange,
+    showTooltips,
     ...rest
   } = _ref;
   const [currentColourId, setCurrentColourId] = React.useState(defaultColourId);
@@ -54,7 +55,8 @@ const ColourToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           isSelected: id === currentColourId,
           colourHexCode: colourHexCode,
           colourName: colourName,
-          onPress: handleChangeColour
+          onPress: handleChangeColour,
+          showTooltip: showTooltips
         }, colourBubbleId);
       })
     })]
@@ -86,6 +88,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.func
+  onChange: PropTypes.func,
+  /**
+   * When true, displays each colour's name as a tooltip on hover (web only).
+   */
+  showTooltips: PropTypes.bool
 };
 export default ColourToggle;

package/lib/esm/ExpandCollapse/Control.js

@@ -66,11 +66,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) {
@@ -85,6 +89,7 @@ const ExpandCollapseControl = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     isExpanded,
     children,
     tokens,
+    controlAlign,
     accessibilityRole = 'button',
     variant,
     ...rest
@@ -135,7 +140,12 @@ const ExpandCollapseControl = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
             ...selectIconTokens(themeTokens)
           })
         }), /*#__PURE__*/_jsx(View, {
-          style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
+          style: [selectTextContainerStyles({
+            ...themeTokens,
+            ...(controlAlign && {
+              controlAlign
+            })
+          }), staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(getControlState(pressableState)) : children
         })]
       });
@@ -161,6 +171,10 @@ ExpandCollapseControl.propTypes = {
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
   isExpanded: PropTypes.bool,
+  /**
+   * Optional alignment for control content. Overrides token-driven alignment.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * Function called when the ExpandCollapse is pressed.
    */