@telus-uds/components-base 1.95.0 → 1.96.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 25 Sep 2024 16:57:49 GMT and should not be manually modified.
+This log was last generated on Sat, 12 Oct 2024 00:31:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.96.0
+
+Sat, 12 Oct 2024 00:31:05 GMT
+
+### Minor changes
+
+- `TermsAndConditions`: export use-responsive-theme-tokens hook (guillermo.peitzner@telus.com)
+- `Progress`: add shadow tokens to Progress and ProgressBar (jacqui.koroll@telus.com)
+- `PriceLockup`: alignItemsText token added to the component to align right (flex-end), left (flex-start) or center the content (35577399+JoshHC@users.noreply.github.com)
+- `Modal`: updated the alignment of the cancel/secondary buttons (sam.obisesan@telus.com)
+- `Card`: new token backgroundGradient added to be able to use the gradient as background (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.65.0
+
+### Patches
+
+- `Modal`: Fix focus trap to ensure focus is contained within the modal and initial focus is set on modal upon open (Mauricio.BatresMontejo@telus.com)
+- `Typography`: fix sub and sup render on mobile devices (guillermo.peitzner@telus.com)
+- `Autocomplete`: fix suggestion list displacement (guillermo.peitzner@telus.com)
+- `List`: Enable `CircleBullet` icon to visualize order of nested lists. (jaime.tuyuc@telus.com)
+- `Notification`: use maxWidth to avoid overflow in media queries (kristina.kirpichnikova@telus.com)
+
 ## 1.95.0
 
-Wed, 25 Sep 2024 16:57:49 GMT
+Wed, 25 Sep 2024 17:07:47 GMT
 
 ### Minor changes
 

package/lib/Autocomplete/Autocomplete.js

@@ -144,6 +144,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 
   // When it's nested, selected value
   const [nestedSelectedValue, setNestedSelectedValue] = _react.default.useState(null);
+  const [isInputVisible, setIsInputVisible] = _react.default.useState(true);
   const {
     supportsProps,
     ...selectedProps
@@ -269,6 +270,27 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }));
     }
   }, [nestedSelectedValue, items]);
+  _react.default.useEffect(() => {
+    if (_Platform.default.OS === 'ios' || _Platform.default.OS === 'android') {
+      return undefined;
+    }
+    const observer = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      setIsInputVisible(entry.isIntersecting);
+      if (!entry.isIntersecting) {
+        setIsExpanded(false);
+      }
+    });
+    const currentInputRef = inputRef.current;
+    if (currentInputRef) {
+      observer.observe(currentInputRef);
+    }
+    return () => {
+      if (currentInputRef) {
+        observer.unobserve(currentInputRef);
+      }
+    };
+  }, [inputRef]);
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
@@ -325,7 +347,19 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           readOnly: readOnly,
           ref: inputRef,
           ...(_Platform.default.OS !== 'web' ? {
-            onLayout: event => setSourceLayout(event.nativeEvent.layout)
+            onLayout: event => {
+              setSourceLayout(event.nativeEvent.layout);
+              const {
+                y,
+                height
+              } = event.nativeEvent.layout;
+              if (y >= 0 && height > 0) {
+                setIsInputVisible(true);
+              } else {
+                setIsInputVisible(false);
+                setIsExpanded(false);
+              }
+            }
           } : {}),
           tokens: inputTokens,
           validation: validation,
@@ -338,7 +372,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Listbox.default.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,

package/lib/Card/CardBase.js

@@ -31,6 +31,7 @@ const selectStyles = _ref => {
     paddingTop,
     minWidth,
     shadow,
+    backgroundGradient,
     gradient
   } = _ref;
   return {
@@ -50,6 +51,9 @@ const selectStyles = _ref => {
       backgroundOrigin: `border-box`,
       boxShadow: `inset 0 1000px white`,
       border: `${borderWidth}px solid transparent`
+    } : {}),
+    ...(backgroundGradient && _Platform.default.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
     } : {})
   };
 };

package/lib/List/ListItemBase.js

@@ -135,7 +135,8 @@ const staticStyles = _StyleSheet.default.create({
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1
+    flexShrink: 1,
+    flexGrow: 1
   }
 });
 ListItemBase.propTypes = {

package/lib/Modal/Modal.js

@@ -104,6 +104,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals consecutively
  */
 const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  var _modalContentRef$curr2;
   let {
     children,
     isOpen,
@@ -132,6 +133,8 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     maxWidth
   });
   const modalRef = (0, _useScrollBlocking.default)(isOpen);
+  const modalBodyRef = _react.default.useRef(ref);
+  const modalContentRef = _react.default.useRef(null);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -146,6 +149,25 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
   };
+  const manageFocus = _react.default.useCallback(event => {
+    if (event.key === 'Tab') {
+      var _modalBodyRef$current;
+      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 ? void 0 : (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `));
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }, [modalBodyRef]);
 
   // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
   // Hide the close button if `closeButton` is `null`.
@@ -156,22 +178,20 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   const closeButtonRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     if (_Platform.default.OS === 'web') {
-      const handleFocus = () => {
-        // If the focus is on the last item of the web modal container, move it to the close button
-        if (document.activeElement === focusTrapRef.current && closeButtonRef.current) {
-          closeButtonRef.current.focus();
-        }
-        return undefined;
-      };
-
-      // Add an event listener to manage focus in the web modal container
-      document.addEventListener('focusin', handleFocus);
+      // Add an event listener to manage keydown and focus in the web modal container
+      document.addEventListener('keydown', manageFocus);
 
       // Clean up the event listener
-      return () => document.removeEventListener('focusin', handleFocus);
+      return () => document.removeEventListener('keydown', manageFocus);
     }
     return undefined;
-  }, []);
+  }, [manageFocus]);
+  _react.default.useEffect(() => {
+    if (isOpen) {
+      var _modalContentRef$curr;
+      modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 ? void 0 : _modalContentRef$curr.focus();
+    }
+  }, [isOpen, modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
   if (!isOpen) {
     return null;
   }
@@ -184,7 +204,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
         pointerEvents: "box-none" // don't capture backdrop press events
         ,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-          ref: ref,
+          ref: modalBodyRef,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
           children: [showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -229,6 +249,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   if (_Platform.default.OS === 'web') {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_WebModal.default, {
       ...selectProps(rest),
+      ref: modalContentRef,
       children: [content, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         accessibilityRole: "button",
         ref: focusTrapRef

package/lib/Modal/ModalContent.js

@@ -162,7 +162,7 @@ const styles = _StyleSheet.default.create({
     minHeight: _Platform.default.OS === 'web' ? '100%' : 'auto'
   },
   cancelButton: {
-    flex: 1
+    display: 'flex'
   }
 });
 ModalContent.propTypes = {

package/lib/Modal/WebModal.js

@@ -31,6 +31,7 @@ const WebModal = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: staticStyles.container,
       ...selectProps(rest),
+      focusable: true,
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: staticStyles.content,

package/lib/Notification/Notification.js

@@ -105,19 +105,19 @@ const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible
       justifyContent: 'space-between',
       ...(0, _utils.createMediaQueryStyles)({
         xs: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
         },
         md: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
         },
         lg: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
         },
         sm: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
         },
         xl: {
-          width: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
+          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
         }
       })
     }

package/lib/PriceLockup/PriceLockup.js

@@ -92,7 +92,15 @@ const selectBottomTextTypographyTokens = _ref6 => {
     lineHeight: bottomTextLineHeight
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const selectContainertokens = _ref7 => {
+  let {
+    alignItemsText
+  } = _ref7;
+  return {
+    alignItems: alignItemsText
+  };
+};
+const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -109,7 +117,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref7;
+  } = _ref8;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     footnoteMarginTop,
@@ -134,7 +142,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
   const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-    style: [staticStyles.priceLockupContainer],
+    style: [staticStyles.priceLockupContainer, selectContainertokens(themeTokens)],
     ref: ref,
     ...selectProps(rest),
     children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/Progress/Progress.js

@@ -18,14 +18,16 @@ const selectProgressStyles = _ref => {
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderWidth,
     borderColor,
     borderRadius,
-    height
+    height,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
 
@@ -45,6 +47,7 @@ const selectProgressStyles = _ref => {
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
  *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
  *

package/lib/Progress/ProgressBar.js

@@ -20,13 +20,15 @@ const selectBarStyles = (_ref, percentage) => {
     backgroundColor,
     borderRadius,
     outlineWidth,
-    outlineColor
+    outlineColor,
+    shadow
   } = _ref;
   return {
     backgroundColor,
     borderRadius,
     outlineWidth,
     outlineColor,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
     width: `${percentage}%`
   };
 };
@@ -46,6 +48,7 @@ const selectBarStyles = (_ref, percentage) => {
  *   - `borderRadius` for the rounded corners,
  *   - `outlineColor` to control the color of the border (outline),
  *   - `outlineWidth` to change the outline width.
+ *   - `shadow` to apply a box shadow to the progress bar.
  *
  * ## Variants
  *

package/lib/Typography/Typography.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../ThemeProvider/utils");
 var _utils2 = require("../utils");
@@ -45,9 +46,22 @@ const selectTextStyles = (_ref, themeOptions) => {
     gradient
   });
 };
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const selectMobileSubSupStyles = (_ref2, type) => {
+  let {
+    fontSize
+  } = _ref2;
+  return {
+    fontSize: fontSize / HALF_FONT_SIZE,
+    lineHeight: fontSize,
+    position: 'relative',
+    top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+  };
+};
 
 // General-purpose flexible theme-neutral base component for text
-const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Typography = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -60,7 +74,7 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     dataSet,
     strikeThrough = false,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     themeOptions
@@ -107,8 +121,8 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref3) => {
-      let [vp, viewportTokens] = _ref3;
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
       acc[vp] = selectTextStyles({
         textAlign: align,
         textDecorationLine,
@@ -142,22 +156,31 @@ const Typography = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ...selectContainerProps(rest)
   };
   const resetTagStyling = child => {
-    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
-      var _child$props;
-      const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
-      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
-      const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(child, {
-        style: {
-          ...childStyles,
-          ...(supFontSize ? {
-            fontSize: supFontSize
-          } : {}),
-          lineHeight: 0
-        }
-      });
-      return sanitizedChild;
+    var _child$props;
+    if (typeof child !== 'object' || !((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
+      return child;
     }
-    return child;
+    const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+    const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
+    const isMobile = _Platform.default.OS === 'ios' || _Platform.default.OS === 'android';
+    const isSubSup = (child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup';
+    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child === null || child === void 0 ? void 0 : child.type) : {};
+    const defaultStyles = !isMobile && isSubSup ? {
+      fontSize: supFontSize,
+      lineHeight: 0
+    } : {};
+    const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(isMobile && isSubSup ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [childStyles, mobileStyles],
+        children: child.props.children
+      })
+    }) : child, {
+      style: {
+        ...childStyles,
+        ...defaultStyles
+      }
+    });
+    return sanitizedChild;
   };
   const sanitizeChildren = () => {
     if (Array.isArray(children)) {

package/lib/index.js

@@ -82,6 +82,7 @@ var _exportNames = {
   applyOuterBorder: true,
   applyTextStyles: true,
   applyShadowToken: true,
+  useResponsiveThemeTokens: true,
   Portal: true
 };
 Object.defineProperty(exports, "A11yInfoProvider", {
@@ -528,6 +529,12 @@ Object.defineProperty(exports, "useHydrationContext", {
     return _HydrationContext.useHydrationContext;
   }
 });
+Object.defineProperty(exports, "useResponsiveThemeTokens", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useResponsiveThemeTokens;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {

package/lib-module/Autocomplete/Autocomplete.js

@@ -139,6 +139,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 
   // When it's nested, selected value
   const [nestedSelectedValue, setNestedSelectedValue] = React.useState(null);
+  const [isInputVisible, setIsInputVisible] = React.useState(true);
   const {
     supportsProps,
     ...selectedProps
@@ -264,6 +265,27 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }));
     }
   }, [nestedSelectedValue, items]);
+  React.useEffect(() => {
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
+      return undefined;
+    }
+    const observer = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      setIsInputVisible(entry.isIntersecting);
+      if (!entry.isIntersecting) {
+        setIsExpanded(false);
+      }
+    });
+    const currentInputRef = inputRef.current;
+    if (currentInputRef) {
+      observer.observe(currentInputRef);
+    }
+    return () => {
+      if (currentInputRef) {
+        observer.unobserve(currentInputRef);
+      }
+    };
+  }, [inputRef]);
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
     if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
@@ -320,7 +342,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           readOnly: readOnly,
           ref: inputRef,
           ...(Platform.OS !== 'web' ? {
-            onLayout: event => setSourceLayout(event.nativeEvent.layout)
+            onLayout: event => {
+              setSourceLayout(event.nativeEvent.layout);
+              const {
+                y,
+                height
+              } = event.nativeEvent.layout;
+              if (y >= 0 && height > 0) {
+                setIsInputVisible(true);
+              } else {
+                setIsInputVisible(false);
+                setIsExpanded(false);
+              }
+            }
           } : {}),
           tokens: inputTokens,
           validation: validation,
@@ -333,7 +367,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           })
         });
       }
-    }), (isExpanded || hintExpansionEnabled) && /*#__PURE__*/_jsxs(_Fragment, {
+    }), (isExpanded || hintExpansionEnabled) && isInputVisible && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
         overlaidPosition: overlaidPosition,
         isReady: isReady,

package/lib-module/Card/CardBase.js

@@ -24,6 +24,7 @@ const selectStyles = _ref => {
     paddingTop,
     minWidth,
     shadow,
+    backgroundGradient,
     gradient
   } = _ref;
   return {
@@ -43,6 +44,9 @@ const selectStyles = _ref => {
       backgroundOrigin: `border-box`,
       boxShadow: `inset 0 1000px white`,
       border: `${borderWidth}px solid transparent`
+    } : {}),
+    ...(backgroundGradient && Platform.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
     } : {})
   };
 };

package/lib-module/List/ListItemBase.js

@@ -129,7 +129,8 @@ const staticStyles = StyleSheet.create({
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1
+    flexShrink: 1,
+    flexGrow: 1
   }
 });
 ListItemBase.propTypes = {

package/lib-module/Modal/Modal.js

@@ -99,6 +99,7 @@ const selectScrollViewStyles = () => ({
  * - Don’t use modals consecutively
  */
 const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  var _modalContentRef$curr2;
   let {
     children,
     isOpen,
@@ -127,6 +128,8 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     maxWidth
   });
   const modalRef = useScrollBlocking(isOpen);
+  const modalBodyRef = React.useRef(ref);
+  const modalContentRef = React.useRef(null);
   const {
     closeIcon: CloseIconComponent
   } = themeTokens;
@@ -141,6 +144,25 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const handleKeyUp = event => {
     if (event.key === 'Escape') onClose();
   };
+  const manageFocus = React.useCallback(event => {
+    if (event.key === 'Tab') {
+      var _modalBodyRef$current;
+      const focusableElements = Array.from(modalBodyRef === null || modalBodyRef === void 0 ? void 0 : (_modalBodyRef$current = modalBodyRef.current) === null || _modalBodyRef$current === void 0 ? void 0 : _modalBodyRef$current.querySelectorAll(`
+      a[href], button, textarea, input, select, 
+      [tabindex]:not([tabindex="-1"]),
+      [contenteditable="true"]
+    `));
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }, [modalBodyRef]);
 
   // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
   // Hide the close button if `closeButton` is `null`.
@@ -151,22 +173,20 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const closeButtonRef = React.useRef(null);
   React.useEffect(() => {
     if (Platform.OS === 'web') {
-      const handleFocus = () => {
-        // If the focus is on the last item of the web modal container, move it to the close button
-        if (document.activeElement === focusTrapRef.current && closeButtonRef.current) {
-          closeButtonRef.current.focus();
-        }
-        return undefined;
-      };
-
-      // Add an event listener to manage focus in the web modal container
-      document.addEventListener('focusin', handleFocus);
+      // Add an event listener to manage keydown and focus in the web modal container
+      document.addEventListener('keydown', manageFocus);
 
       // Clean up the event listener
-      return () => document.removeEventListener('focusin', handleFocus);
+      return () => document.removeEventListener('keydown', manageFocus);
     }
     return undefined;
-  }, []);
+  }, [manageFocus]);
+  React.useEffect(() => {
+    if (isOpen) {
+      var _modalContentRef$curr;
+      modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 ? void 0 : _modalContentRef$curr.focus();
+    }
+  }, [isOpen, modalContentRef === null || modalContentRef === void 0 ? void 0 : (_modalContentRef$curr2 = modalContentRef.current) === null || _modalContentRef$curr2 === void 0 ? void 0 : _modalContentRef$curr2.focus]);
   if (!isOpen) {
     return null;
   }
@@ -179,7 +199,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
         pointerEvents: "box-none" // don't capture backdrop press events
         ,
         children: /*#__PURE__*/_jsxs(View, {
-          ref: ref,
+          ref: modalBodyRef,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
           children: [showCloseButton && /*#__PURE__*/_jsx(View, {
@@ -224,6 +244,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   if (Platform.OS === 'web') {
     return /*#__PURE__*/_jsxs(WebModal, {
       ...selectProps(rest),
+      ref: modalContentRef,
       children: [content, /*#__PURE__*/_jsx(View, {
         accessibilityRole: "button",
         ref: focusTrapRef