@telus-uds/components-base 3.28.2 → 3.29.0

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.
    */

package/lib/esm/ExpandCollapse/Panel.js

@@ -97,6 +97,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     onPress,
     control,
     controlTokens,
+    controlAlign,
     children,
     tokens,
     variant,
@@ -166,6 +167,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         ...selectedProps,
         isExpanded: isExpanded,
         tokens: controlTokens,
+        controlAlign: controlAlign,
         variant: variant,
         onPress: handleControlPress,
         ref: controlRef,
@@ -265,6 +267,10 @@ ExpandCollapsePanel.propTypes = {
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -6,6 +6,11 @@ import { variantProp } from '../utils/props';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps]);
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
 const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -14,6 +19,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     nativeID,
     initialOpen = false,
     dataSet,
+    align,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel');
@@ -41,12 +47,14 @@ const ExpandCollapseMini = /*#__PURE__*/React.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__*/_jsx(ExpandCollapseMiniControl, {
         pressableState: pressableState,
+        align: align,
         ...rest
       }),
       controlRef: ref,
@@ -86,6 +94,10 @@ ExpandCollapseMini.propTypes = {
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 };
 export default ExpandCollapseMini;

package/lib/esm/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -6,6 +6,11 @@ import { useThemeTokens } from '../ThemeProvider';
 import { htmlAttrs, viewProps, selectSystemProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, 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.
@@ -24,6 +29,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconPosition = 'right',
     tokens,
     variant = {},
+    align,
     ...rest
   } = _ref;
   const {
@@ -92,7 +98,10 @@ const ExpandCollapseMiniControl = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...getTokens(linkState),
       iconSize,
       blockFontSize: fontSize,
-      blockLineHeight: lineHeight
+      blockLineHeight: lineHeight,
+      ...(align && {
+        alignSelf: alignSelfMap[align]
+      })
     }),
     ref: ref,
     ...presentationOnly,
@@ -123,6 +132,10 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: PropTypes.object
+  variant: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 };
 export default ExpandCollapseMiniControl;

package/lib/esm/Link/ChevronLink.js

@@ -42,6 +42,7 @@ const ChevronLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant);
   return /*#__PURE__*/_jsx(LinkBase, {
     ...otherlinkProps,
+    useMeasuredMobileIconLayout: true,
     iconPosition: direction,
     tokens: getTokens,
     dataSet: dataSet,

package/lib/esm/Link/LinkBase.js

@@ -7,6 +7,7 @@ import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, sel
 import { resolvePressableTokens } from '../utils/pressability';
 import { withLinkRouter } from '../utils';
 import InlinePressable from './InlinePressable';
+import MobileIconTextContent from './MobileIconTextContent';
 import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -137,6 +138,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     tokens = {},
     children,
     dataSet,
+    useMeasuredMobileIconLayout = false,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -180,8 +182,8 @@ const LinkBase = /*#__PURE__*/React.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.OS !== 'web' && useMeasuredMobileIconLayout;
+      return [outerBorderStyles, shouldUseMeasuredMobileContent ? staticStyles.measuredMobileOuterBorderCompensation : null, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -196,19 +198,32 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       } = themeTokens;
       const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
       const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
+      const shouldUseMeasuredMobileContent = Platform.OS !== 'web' && useMeasuredMobileIconLayout;
+      const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline;
+      const linkTextContent = /*#__PURE__*/_jsx(Text, {
+        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__*/_jsx(MobileIconTextContent, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: adjustedIconSpace,
+          iconProps: sharedIconProps,
+          children: linkTextContent
+        });
+      }
       return /*#__PURE__*/_jsx(IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: adjustedIconSpace,
-        iconProps: {
-          ...iconProps,
-          tokens: iconTokens,
-          style: staticStyles.bubblePointerEvents
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
-          children: typeof children === 'function' ? children(linkState) : children
-        })
+        iconProps: sharedIconProps,
+        children: linkTextContent
       });
     }
   });
@@ -266,11 +281,12 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(Platform.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
-      paddingTop: Platform.OS === 'android' ? 2 : 0
+      paddingVertical: Platform.OS === 'android' ? 2 : 0
     })
   }
 });

package/lib/esm/Link/MobileIconTextContent.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Icon, { iconComponentPropTypes } from '../Icon/Icon';
+import { spacingProps } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MobileIconTextContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    space = 0,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps = {},
+    children
+  } = _ref;
+  const [translateY, setTranslateY] = React.useState(0);
+  const latestTranslateYRef = React.useRef(0);
+  const layoutsRef = React.useRef({
+    container: null,
+    text: null,
+    icon: null
+  });
+  const applyAlignment = React.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.useCallback(_ref2 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref2;
+    layoutsRef.current.container = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleTextLayout = React.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref3;
+    layoutsRef.current.text = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleIconLayout = React.useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref4;
+    layoutsRef.current.icon = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const iconContent = IconComponent ? /*#__PURE__*/_jsx(Icon, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }) : null;
+  const iconWrapper = IconComponent ? /*#__PURE__*/_jsx(View, {
+    onLayout: handleIconLayout,
+    style: [staticStyles.iconContainer, {
+      transform: [{
+        translateY
+      }]
+    }],
+    children: iconContent
+  }) : null;
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/_jsxs(Text, {
+      onLayout: handleContainerLayout,
+      children: [/*#__PURE__*/_jsx(Text, {
+        onLayout: handleTextLayout,
+        children: children
+      }), ' ', /*#__PURE__*/_jsx(View, {
+        style: staticStyles.inlineIconContainer,
+        children: iconWrapper
+      })]
+    });
+  }
+  const iconSpaceStyle = iconPosition === 'left' ? {
+    marginRight: space
+  } : {
+    marginLeft: space
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    onLayout: handleContainerLayout,
+    style: staticStyles.rowContainer,
+    children: [iconPosition === 'left' && /*#__PURE__*/_jsx(View, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    }), /*#__PURE__*/_jsx(View, {
+      onLayout: handleTextLayout,
+      children: children
+    }), iconPosition === 'right' && /*#__PURE__*/_jsx(View, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    })]
+  });
+});
+MobileIconTextContent.displayName = 'MobileIconTextContent';
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: PropTypes.node
+};
+const staticStyles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+});
+export default MobileIconTextContent;

package/lib/esm/TabBar/TabBar.js

@@ -51,6 +51,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
@@ -62,6 +63,7 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     onChange,
     variant,
     tokens,
+    accessibilityLabel,
     ...rest
   } = _ref3;
   const [isSelected, setIsSelected] = React.useState(initiallySelectedItem);
@@ -76,6 +78,8 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      accessibilityRole: "tablist",
+      accessibilityLabel: accessibilityLabel,
       children: items.map((item, index) => /*#__PURE__*/_jsx(TabBarItem, {
         label: item.label,
         href: item.href,
@@ -84,7 +88,6 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist",
         tokens: item.tokens
       }, item.id))
     })
@@ -109,7 +112,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
+  tokens: getTokensPropType('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: PropTypes.string
 };
 const styles = StyleSheet.create({
   tabBar: {

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.28.2",
+  "version": "3.29.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.28.2",
+  "version": "3.29.0",
   "types": "types/index.d.ts"
 }

package/src/Card/CardBase.jsx

@@ -59,9 +59,21 @@ const setBackgroundImage = ({
         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/src/ColourToggle/ColourBubble.jsx

@@ -5,6 +5,7 @@ import { View, Pressable, Platform } from 'react-native'
 import { resolvePressableTokens } from '../utils/pressability'
 import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType } from '../utils'
+import Tooltip from '../Tooltip'
 
 const selectGeneralBubbleTokens = ({
   outerBubbleHeight,
@@ -52,14 +53,14 @@ const selectBorderBubbleTokens = ({
 })
 
 const ColourBubble = React.forwardRef(
-  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress }, ref) => {
+  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress, showTooltip }, ref) => {
     const defaultTokens = tokens({ selected: isSelected })
 
     const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
 
     const themeTokens = React.useMemo(() => tokens(), [tokens])
 
-    return (
+    const pressable = (
       <Pressable
         style={(state) => [
           selectGeneralBubbleTokens(resolveColourBubbleTokens(state)),
@@ -76,6 +77,16 @@ const ColourBubble = React.forwardRef(
         <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]} />
       </Pressable>
     )
+
+    if (showTooltip) {
+      return (
+        <Tooltip content={colourName} activateOnHover>
+          {pressable}
+        </Tooltip>
+      )
+    }
+
+    return pressable
   }
 )
 ColourBubble.displayName = 'ColourBubble'
@@ -106,7 +117,11 @@ 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/src/ColourToggle/ColourToggle.jsx

@@ -11,7 +11,7 @@ import ColourBubble from './ColourBubble'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const ColourToggle = React.forwardRef(
-  ({ tokens, variant, defaultColourId, items, onChange, ...rest }, ref) => {
+  ({ tokens, variant, defaultColourId, items, onChange, showTooltips, ...rest }, ref) => {
     const [currentColourId, setCurrentColourId] = React.useState(defaultColourId)
     const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant)
 
@@ -40,6 +40,7 @@ const ColourToggle = React.forwardRef(
                 colourHexCode={colourHexCode}
                 colourName={colourName}
                 onPress={handleChangeColour}
+                showTooltip={showTooltips}
               />
             )
           })}
@@ -77,7 +78,11 @@ 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/src/ExpandCollapse/Control.jsx

@@ -54,10 +54,11 @@ function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   }
 }
 
-function selectTextContainerStyles({ textLine }) {
+function selectTextContainerStyles({ textLine, controlAlign }) {
   return {
     textDecorationLine: textLine,
-    flex: 1
+    flex: 1,
+    ...(controlAlign && { alignItems: controlAlign })
   }
 }
 
@@ -70,7 +71,16 @@ function selectIconTokens(tokens) {
 
 const ExpandCollapseControl = React.forwardRef(
   (
-    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
+    {
+      onPress,
+      isExpanded,
+      children,
+      tokens,
+      controlAlign,
+      accessibilityRole = 'button',
+      variant,
+      ...rest
+    },
     ref
   ) => {
     const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
@@ -110,7 +120,13 @@ const ExpandCollapseControl = React.forwardRef(
                 </View>
               )}
               <View
-                style={[selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents]}
+                style={[
+                  selectTextContainerStyles({
+                    ...themeTokens,
+                    ...(controlAlign && { controlAlign })
+                  }),
+                  staticStyles.bubblePointerEvents
+                ]}
               >
                 {typeof children === 'function'
                   ? children(getControlState(pressableState))
@@ -144,6 +160,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.
    */