@telus-uds/components-base 3.28.1 → 3.28.2

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # 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 Tue, 03 Mar 2026 23:02:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 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/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/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/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/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/Listbox/ListboxOverlay.js

@@ -28,6 +28,7 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     isReady = false,
     overlaidPosition,
     maxWidth,
+    maxHeight,
     minWidth,
     onLayout,
     tokens,
@@ -43,12 +44,16 @@ const DropdownOverlay = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       maxWidth,
       minWidth
     }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    onMouseDown: e => {
+      e.preventDefault();
+    },
     children: /*#__PURE__*/_jsx(Card, {
       tokens: {
         shadow: systemTokens.shadow,
         borderRadius: systemTokens.borderRadius,
         ...(Platform.OS === 'web' && {
-          overflowY: 'hidden'
+          maxHeight,
+          overflowY: 'auto'
         }),
         paddingBottom: paddingVertical,
         paddingTop: paddingVertical,
@@ -78,6 +83,7 @@ DropdownOverlay.propTypes = {
     width: PropTypes.number
   }),
   maxWidth: PropTypes.number,
+  maxHeight: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
   tokens: PropTypes.object,

package/lib/esm/Listbox/PressableItem.js

@@ -4,7 +4,7 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import Text from "react-native-web/dist/exports/Text";
 import { selectSystemProps, resolvePressableTokens, htmlAttrs } from '../utils';
 import { useListboxContext } from './ListboxContext';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const getItemStyles = _ref => {
   let {
@@ -122,9 +122,9 @@ const PressableItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       onPress(event);
     },
     children: pressableState => {
-      return /*#__PURE__*/_jsxs(Text, {
+      return /*#__PURE__*/_jsx(Text, {
         style: selectTextStyles(resolveButtonTokens(pressableState)),
-        children: [children, " "]
+        children: children
       });
     }
   });

package/lib/esm/TextInput/TextInputBase.js

@@ -271,8 +271,8 @@ const TextInputBase = /*#__PURE__*/React.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/package.json

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

package/package.json

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

package/src/Autocomplete/Autocomplete.jsx

@@ -24,6 +24,7 @@ import Suggestions from './Suggestions'
 import {
   DEFAULT_MAX_SUGGESTIONS,
   DEFAULT_MIN_TO_SUGGESTION,
+  DEFAULT_MAX_DROPDOWN_HEIGHT,
   INPUT_LEFT_PADDING,
   MIN_LISTBOX_WIDTH
 } from './constants'
@@ -51,20 +52,44 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 const highlightAllMatches = (str, substring = '', matchIndexes = [], resultsTextColor) => (
   // Wrapping all in bold
   <Typography variant={{ bold: false }} tokens={{ color: resultsTextColor }}>
-    {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) ?? ''),
-        // Unbold the occurrence of the substring (while keeping the original casing)
-        <Typography key={matchIndex} variant={{ bold: true }} tokens={{ color: resultsTextColor }}>
-          {str.slice(matchIndex, matchIndex + substring.length)}
-        </Typography>,
-        // 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)
-      ],
-      []
-    )}
+    {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 ? (
+            <Typography
+              key={`pre-${matchIndex}`}
+              variant={{ bold: false }}
+              tokens={{ color: resultsTextColor }}
+            >
+              {prefix}
+            </Typography>
+          ) : null,
+          <Typography
+            key={matchIndex}
+            variant={{ bold: true }}
+            tokens={{ color: resultsTextColor }}
+          >
+            {match}
+          </Typography>,
+          suffix ? (
+            <Typography
+              key={`post-${matchIndex}`}
+              variant={{ bold: false }}
+              tokens={{ color: resultsTextColor }}
+            >
+              {suffix}
+            </Typography>
+          ) : null
+        ]
+      }, [])
+      .filter(Boolean)}
   </Typography>
 )
 const highlight = (items = [], text = '', color) =>
@@ -94,12 +119,14 @@ const Autocomplete = React.forwardRef(
       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 = '',
@@ -144,7 +171,7 @@ const Autocomplete = React.forwardRef(
 
     const { supportsProps, ...selectedProps } = selectProps(rest)
     const { hint, label: inputLabel } = supportsProps
-    const hintExpansionEnabled = isFocused && helpText && !currentValue
+    const hintExpansionEnabled = isFocused && !!helpText && !currentValue
     const {
       overlaidPosition,
       sourceRef: inputRef,
@@ -198,9 +225,12 @@ const Autocomplete = React.forwardRef(
     }
 
     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(({ label }) =>
@@ -211,21 +241,24 @@ const Autocomplete = React.forwardRef(
     }
     const handleSelect = (selectedId) => {
       onSelect?.(selectedId)
-      const {
-        label: newValue,
-        nested,
-        title
-      } = (isControlled ? items : currentItems)?.find(({ id }) => id === selectedId)
+      const selectedItem = (isControlled ? items : currentItems)?.find(
+        ({ id }) => id === selectedId
+      )
+      const { label, nested, title } = selectedItem
+
       if (title) return
       if (!nested) {
         setNestedSelectedValue(null)
-        onChange?.(newValue)
+        onChange?.(label)
         setIsExpanded(false)
+        setCurrentValue(label)
       }
-      setCurrentValue(newValue)
-      if (!isControlled && inputRef?.current) inputRef.current.value = newValue
+      if (!isControlled && inputRef?.current) inputRef.current.value = label
 
-      if (nested) setNestedSelectedValue(newValue)
+      if (nested) {
+        setNestedSelectedValue(label)
+        setCurrentValue(label)
+      }
 
       inputRef.current.focus()
     }
@@ -278,17 +311,13 @@ const Autocomplete = React.forwardRef(
     }, [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 (
+        return
+      }
+
+      if (
         event.type === 'keydown' &&
         (event.key === 'ArrowDown' || event.key === 'Tab') &&
         isExpanded &&
@@ -297,13 +326,30 @@ const Autocomplete = React.forwardRef(
       ) {
         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 (
@@ -337,9 +383,15 @@ const Autocomplete = React.forwardRef(
                 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}
@@ -368,45 +420,50 @@ const Autocomplete = React.forwardRef(
             )
           }}
         </InputSupports>
-        {(isExpanded || hintExpansionEnabled) && isInputVisible && (
-          <>
-            <Listbox.Overlay
-              overlaidPosition={overlaidPosition}
-              isReady={isReady}
-              minWidth={fullWidth ? inputWidth : MIN_LISTBOX_WIDTH}
-              maxWidth={inputWidth}
-              onLayout={handleMeasure}
-              tokens={restOfTokens}
-              ref={openOverlayRef}
-            >
-              {isLoading ? (
-                <Loading label={loadingLabel ?? getCopy('loading')} />
-              ) : (
-                <Suggestions
-                  hasResults={getCopy('hasResults')}
-                  id="autocomplete"
-                  items={
-                    nestedSelectedValue
-                      ? itemsToSuggest(highlight(otherItems, nestedSelectedValue, resultsTextColor))
-                      : itemsToShow
-                  }
-                  noResults={helpTextToShow}
-                  onClose={handleClose}
-                  onSelect={handleSelect}
-                  parentRef={inputRef}
-                  ref={targetRef}
+        {(isExpanded || hintExpansionEnabled) &&
+          isInputVisible &&
+          (itemsToShow.length > 0 || isExpanded || hintExpansionEnabled) && (
+            <>
+              <Listbox.Overlay
+                overlaidPosition={overlaidPosition}
+                isReady={isReady}
+                minWidth={fullWidth ? inputWidth : MIN_LISTBOX_WIDTH}
+                maxWidth={inputWidth}
+                maxHeight={maxDropdownHeight}
+                onLayout={handleMeasure}
+                tokens={restOfTokens}
+                ref={openOverlayRef}
+              >
+                {isLoading ? (
+                  <Loading label={loadingLabel ?? getCopy('loading')} />
+                ) : (
+                  <Suggestions
+                    hasResults={getCopy('hasResults')}
+                    id="autocomplete"
+                    items={
+                      nestedSelectedValue
+                        ? itemsToSuggest(
+                            highlight(otherItems, nestedSelectedValue, resultsTextColor)
+                          )
+                        : itemsToShow
+                    }
+                    noResults={helpTextToShow}
+                    onClose={handleClose}
+                    onSelect={handleSelect}
+                    parentRef={inputRef}
+                    ref={targetRef}
+                  />
+                )}
+              </Listbox.Overlay>
+              {targetRef?.current && (
+                <View
+                  // This catches and shifts focus to other interactive elements.
+                  onFocus={() => targetRef?.current?.focus()}
+                  tabIndex={0}
                 />
               )}
-            </Listbox.Overlay>
-            {targetRef?.current && (
-              <View
-                // This catches and shifts focus to other interactive elements.
-                onFocus={() => targetRef?.current?.focus()}
-                tabIndex={0}
-              />
-            )}
-          </>
-        )}
+            </>
+          )}
       </View>
     )
   }
@@ -468,6 +525,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
    */
@@ -488,6 +549,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/src/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/src/Carousel/Carousel.jsx

@@ -1056,8 +1056,7 @@ const Carousel = React.forwardRef(
     // 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(

package/src/Listbox/ListboxOverlay.jsx

@@ -28,6 +28,7 @@ const DropdownOverlay = React.forwardRef(
       isReady = false,
       overlaidPosition,
       maxWidth,
+      maxHeight,
       minWidth,
       onLayout,
       tokens,
@@ -50,12 +51,18 @@ const DropdownOverlay = React.forwardRef(
           staticStyles.positioner,
           !isReady && staticStyles.hidden
         ]}
+        onMouseDown={(e) => {
+          e.preventDefault()
+        }}
       >
         <Card
           tokens={{
             shadow: systemTokens.shadow,
             borderRadius: systemTokens.borderRadius,
-            ...(Platform.OS === 'web' && { overflowY: 'hidden' }),
+            ...(Platform.OS === 'web' && {
+              maxHeight,
+              overflowY: 'auto'
+            }),
             paddingBottom: paddingVertical,
             paddingTop: paddingVertical,
             paddingLeft: paddingHorizontal,
@@ -89,6 +96,7 @@ DropdownOverlay.propTypes = {
     width: PropTypes.number
   }),
   maxWidth: PropTypes.number,
+  maxHeight: PropTypes.number,
   minWidth: PropTypes.number,
   onLayout: PropTypes.func,
   tokens: PropTypes.object,

package/src/Listbox/PressableItem.jsx

@@ -120,7 +120,7 @@ const PressableItem = React.forwardRef(
       >
         {(pressableState) => {
           return (
-            <Text style={selectTextStyles(resolveButtonTokens(pressableState))}>{children} </Text>
+            <Text style={selectTextStyles(resolveButtonTokens(pressableState))}>{children}</Text>
           )
         }}
       </Pressable>

package/src/TextInput/TextInputBase.jsx

@@ -255,8 +255,8 @@ const TextInputBase = React.forwardRef(
     }, [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')