@telus-uds/components-base 3.28.1 → 3.29.0

package/CHANGELOG.md

@@ -1,9 +1,33 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 20 Feb 2026 23:53:11 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
+
+### Patches
+
+- `Carousel`: inverse variant navigation arrows fixed by always using raised style even in the inverse state (josue.higueros@telus.com)
+- `Autocomplete`: add the ability to show all values and filter them (josue.higueroscalderon@telus.com)
+
 ## 3.28.1
 
 Fri, 20 Feb 2026 23:53:11 GMT

package/lib/cjs/Autocomplete/Autocomplete.js

@@ -51,22 +51,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)
-      (0, _jsxRuntime.jsx)(_Typography.default, {
-        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__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            bold: false
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: prefix
+        }, `pre-${matchIndex}`) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            bold: true
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: match
+        }, matchIndex), suffix ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            bold: false
+          },
+          tokens: {
+            color: resultsTextColor
+          },
+          children: suffix
+        }, `post-${matchIndex}`) : null];
+      }, []).filter(Boolean)
     })
   );
 };
@@ -100,12 +114,14 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     isLoading = false,
     items,
     maxSuggestions = _constants.DEFAULT_MAX_SUGGESTIONS,
+    maxDropdownHeight = _constants.DEFAULT_MAX_DROPDOWN_HEIGHT,
     minToSuggestion = _constants.DEFAULT_MIN_TO_SUGGESTION,
     noResults,
     onChange,
     onClear,
     onSelect,
     readOnly,
+    showOptionsOnFocus = false,
     validation,
     value,
     helpText = '',
@@ -154,7 +170,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     hint,
     label: inputLabel
   } = supportsProps;
-  const hintExpansionEnabled = isFocused && helpText && !currentValue;
+  const hintExpansionEnabled = isFocused && !!helpText && !currentValue;
   const {
     overlaidPosition,
     sourceRef: inputRef,
@@ -208,9 +224,10 @@ const Autocomplete = /*#__PURE__*/_react.default.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 {
@@ -222,25 +239,29 @@ const Autocomplete = /*#__PURE__*/_react.default.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();
   };
 
@@ -288,15 +309,33 @@ const Autocomplete = /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
@@ -333,9 +372,15 @@ const Autocomplete = /*#__PURE__*/_react.default.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,
@@ -367,12 +412,13 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && (itemsToShow.length > 0 || isExpanded || hintExpansionEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,
         minWidth: fullWidth ? inputWidth : _constants.MIN_LISTBOX_WIDTH,
         maxWidth: inputWidth,
+        maxHeight: maxDropdownHeight,
         onLayout: handleMeasure,
         tokens: restOfTokens,
         ref: openOverlayRef,
@@ -456,6 +502,10 @@ Autocomplete.propTypes = {
    * Maximum number of suggestions provided at the same time
    */
   maxSuggestions: _propTypes.default.number,
+  /**
+   * Maximum height (in pixels) of the dropdown before scrolling is enabled
+   */
+  maxDropdownHeight: _propTypes.default.number,
   /**
    * Text or JSX to render when no results are available
    */
@@ -476,6 +526,10 @@ Autocomplete.propTypes = {
    * Callback function to be called when an item is selected from the list
    */
   onSelect: _propTypes.default.func,
+  /**
+   * When true, displays all available options when the input receives focus (even without typing)
+   */
+  showOptionsOnFocus: _propTypes.default.bool,
   /**
    * Input value for controlled usage
    */

package/lib/cjs/Autocomplete/constants.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MIN_LISTBOX_WIDTH = exports.INPUT_LEFT_PADDING = exports.DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MAX_SUGGESTIONS = void 0;
+exports.MIN_LISTBOX_WIDTH = exports.INPUT_LEFT_PADDING = exports.DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MAX_SUGGESTIONS = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = void 0;
 const DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MIN_TO_SUGGESTION = 1;
 const DEFAULT_MAX_SUGGESTIONS = exports.DEFAULT_MAX_SUGGESTIONS = 5;
+const DEFAULT_MAX_DROPDOWN_HEIGHT = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = 336; // Approximately 7 items (48px each)
 const INPUT_LEFT_PADDING = exports.INPUT_LEFT_PADDING = 16;
 const MIN_LISTBOX_WIDTH = exports.MIN_LISTBOX_WIDTH = 288;

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

@@ -924,8 +924,7 @@ const Carousel = /*#__PURE__*/_react.default.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.default.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/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
     })
   }
 });