@telus-uds/components-web 4.18.2 → 4.19.0

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 # Change Log - @telus-uds/components-web
 
-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 -->
 
+## 4.19.0
+
+Tue, 03 Mar 2026 23:02:55 GMT
+
+### Minor changes
+
+- `Card`: add padding feature (sergio.ramirez@telus.com)
+- Spinner: Added a new prop called `persistChildrenState`, to be used only when overlaying children, ensuring the children's state is kept after the Spinner is triggered. (kevin.ruiz@telus.com)
+- Bump @telus-uds/components-base to v3.28.2
+
+### Patches
+
+- `Autocomplete`: add the ability to show all values and filter them (josue.higueroscalderon@telus.com)
+
 ## 4.18.2
 
 Fri, 20 Feb 2026 23:53:11 GMT

package/lib/cjs/Card/Card.js

@@ -185,6 +185,52 @@ const FocusBorder = /*#__PURE__*/_styledComponents.default.div.withConfig({
     zIndex: 2
   };
 });
+const FullBleedPaddingWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__FullBleedPaddingWrapper",
+  componentId: "components-web__sc-1elbtwd-4"
+})(_ref4 => {
+  let {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  } = _ref4;
+  return {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    display: 'flex',
+    flexDirection: 'column'
+  };
+});
+
+/**
+ * Calculates the padding values for full bleed content.
+ * Inherits the card's theme padding (minus borderWidth to visually match card body padding)
+ * and allows custom overrides via the fullBleedPadding prop.
+ *
+ * @param {object} themeTokens - The card's resolved theme tokens (contains padding values and borderWidth)
+ * @param {object|boolean} fullBleedPadding - true to inherit card padding, or an object with overrides
+ * @param {object} paddingSides - Boolean flags for which sides to apply padding
+ * @returns {object} Padding values for each side in px
+ */
+const calculateFullBleedPadding = (themeTokens, fullBleedPadding, paddingSides) => {
+  const customTokens = typeof fullBleedPadding === 'object' ? fullBleedPadding : undefined;
+  const borderWidth = themeTokens.borderWidth || 0;
+  const applyPadding = side => {
+    const sideKey = `applyPadding${side}`;
+    if (!paddingSides[sideKey]) return 0;
+    const tokenKey = `padding${side}`;
+    return customTokens?.[tokenKey] ?? themeTokens[tokenKey] - borderWidth ?? 0;
+  };
+  return {
+    paddingTop: applyPadding('Top'),
+    paddingBottom: applyPadding('Bottom'),
+    paddingLeft: applyPadding('Left'),
+    paddingRight: applyPadding('Right')
+  };
+};
 const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   let {
     children,
@@ -192,6 +238,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     footerPadding,
     fullBleedImage,
     fullBleedContent = fullBleedImage,
+    fullBleedPadding,
     tokens = {},
     variant,
     interactiveCard,
@@ -218,7 +265,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     contentStackDirection,
     fullBleedContentPosition,
     fullBleedContentProps,
-    fullBleedContentChildrenAlign
+    fullBleedContentChildrenAlign,
+    fullBleedPaddingSides
   } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent);
   const {
     imgCol,
@@ -243,6 +291,12 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     borderRadius
   } = allThemeTokens;
 
+  // Get viewport-aware tokens for responsive full bleed padding
+  // useThemeTokens (above) doesn't pass viewport state, so it resolves to base/mobile tokens.
+  // useAllViewportTokens resolves tokens for ALL viewports + the current one (reactive to resize).
+  // This ensures fullBleedPadding matches CardContent's padding at every breakpoint.
+  const allViewportTokens = (0, _componentsBase.useAllViewportTokens)('Card', tokens, variant);
+
   // Interactive cards: merge variants for CardBase (outer container)
   // The outer variant takes priority over interactiveCard.variant for the style property
   // This ensures the gradient is only applied to CardBase, not PressableCardBase and avoid duplication
@@ -318,6 +372,13 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
 
+  // Calculate full bleed content padding values
+  // When fullBleedPadding is truthy, apply padding around full bleed content
+  // Uses viewport-aware tokens (allViewportTokens.current) so padding matches
+  // CardContent's responsive padding at every breakpoint
+  const hasFullBleedPadding = Boolean(fullBleedPadding);
+  const fullBleedPaddingValues = hasFullBleedPadding ? calculateFullBleedPadding(allViewportTokens.current, fullBleedPadding, fullBleedPaddingSides) : null;
+
   // takes imgCol from fullBleedContent if present, to dynamically set width of image
   // card content will adapt to the size of image to add up to 100% width of card width
   // pass as props to ConditionalWrapper
@@ -343,8 +404,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
-  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref4 => {
-    let [key] = _ref4;
+  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref5 => {
+    let [key] = _ref5;
     return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor', 'gradient', 'backgroundGradient'] : [])].includes(key);
   }));
   const cardBaseVariant = backgroundImage ? {
@@ -456,11 +517,16 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
               WrapperComponent: DynamicWidthContainer,
               wrapperProps: imageWrapperStyleProps,
               condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
-                borderRadius: fullBleedBorderRadius,
-                ...fullBleedContentPropsClean,
-                position: fullBleedContentPosition,
-                cardState: undefined
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+                WrapperComponent: FullBleedPaddingWrapper,
+                wrapperProps: fullBleedPaddingValues,
+                condition: hasFullBleedPadding,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+                  borderRadius: fullBleedBorderRadius,
+                  ...fullBleedContentPropsClean,
+                  position: fullBleedContentPosition,
+                  cardState: undefined
+                })
               })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveOverlay, {
@@ -504,11 +570,16 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: imageWrapperStyleProps,
         condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
-          borderRadius: fullBleedBorderRadius,
-          ...fullBleedContentPropsClean,
-          position: fullBleedContentPosition,
-          cardState: undefined
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+          WrapperComponent: FullBleedPaddingWrapper,
+          wrapperProps: fullBleedPaddingValues,
+          condition: hasFullBleedPadding,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+            borderRadius: fullBleedBorderRadius,
+            ...fullBleedContentPropsClean,
+            position: fullBleedContentPosition,
+            cardState: undefined
+          })
         })
       })]
     }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
@@ -563,6 +634,13 @@ Card.propTypes = {
    * Custom card footer padding.
    */
   footerPadding: _componentsBase.paddingProp.propType,
+  /**
+   * Custom full bleed content padding.
+   * When true, inherits the card's own padding (from variant/tokens).
+   * When an object, provides custom padding overrides: { paddingTop, paddingBottom, paddingLeft, paddingRight }.
+   * Padding is automatically adjusted based on the full bleed content's position.
+   */
+  fullBleedPadding: _propTypes.default.oneOfType([_propTypes.default.bool, _componentsBase.paddingProp.propType]),
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *

package/lib/cjs/Spinner/Spinner.js

@@ -44,8 +44,11 @@ const ContentOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
 })({
   position: 'absolute',
   width: '100%',
+  top: 0,
+  left: 0,
   height: '100%',
-  zIndex: _constants.BACKDROP_Z_INDEX
+  zIndex: _constants.BACKDROP_Z_INDEX,
+  pointerEvents: 'none'
 });
 const FullscreenOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Spinner__FullscreenOverlay",
@@ -67,8 +70,15 @@ const FullscreenOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig(
 const OpaqueContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Spinner__OpaqueContainer",
   componentId: "components-web__sc-116rqck-3"
-})({
-  opacity: _constants.BACKDROP_OPACITY
+})(_ref3 => {
+  let {
+    show = true
+  } = _ref3;
+  return {
+    ...(show && {
+      opacity: _constants.BACKDROP_OPACITY
+    })
+  };
 });
 const recursiveMap = (children, fn) => _react.default.Children.map(children, child => {
   if (! /*#__PURE__*/_react.default.isValidElement(child)) {
@@ -85,7 +95,7 @@ const recursiveMap = (children, fn) => _react.default.Children.map(children, chi
 /**
  * Loading indicator.
  */
-const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     fullScreen = false,
@@ -96,8 +106,9 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     isStatic = false,
     tokens,
     variant = {},
+    persistChildrenState = false,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const {
     fullScreenOverLayBackground,
     size,
@@ -107,6 +118,32 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     size: sizeVariant = 'large'
   } = variant;
   (0, _componentsBase.useScrollBlocking)([fullScreen, show]);
+
+  // Overlay spinner with persistChildrenState enabled
+  if (children && persistChildrenState) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpinnerContainer, {
+      inline: inline,
+      "aria-live": "assertive",
+      overlay: true,
+      ...selectProps(rest),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OpaqueContainer, {
+        show: show,
+        ...(show ? {
+          inert: 'true',
+          'aria-hidden': 'true'
+        } : {}),
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentOverlay, {}), show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+        label: label,
+        labelPosition: labelPosition,
+        overlay: true,
+        size: size,
+        thickness: thickness,
+        sizeVariant: sizeVariant,
+        isStatic: isStatic
+      })]
+    });
+  }
   if (!show) {
     return children ?? null;
   }
@@ -136,7 +173,7 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   }
 
   // Overlay spinner
-  if (children) {
+  if (children && !persistChildrenState) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpinnerContainer, {
       inline: inline,
       "aria-live": "assertive",
@@ -218,6 +255,12 @@ Spinner.propTypes = {
   /**
    * Determine where the label of the spinner should be placed, left, right, bottom or top.
    */
-  labelPosition: _propTypes.default.string
+  labelPosition: _propTypes.default.string,
+  /**
+   * When true, preserves the state of overlaid children when `show` toggles.
+   * Only applicable when the Spinner is used in overlay mode (with children).
+   * Use this when overlaying stateful components such as Micro Frontends (MFEs).
+   */
+  persistChildrenState: _propTypes.default.bool
 };
 var _default = exports.default = Spinner;

package/lib/cjs/shared/FullBleedContent/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "getFullBleedBorderRadius", {
     return _getFullBleedBorderRadius.default;
   }
 });
+Object.defineProperty(exports, "getFullBleedPaddingSides", {
+  enumerable: true,
+  get: function () {
+    return _useFullBleedContentProps.getFullBleedPaddingSides;
+  }
+});
 Object.defineProperty(exports, "useFullBleedContentProps", {
   enumerable: true,
   get: function () {
@@ -18,6 +24,8 @@ Object.defineProperty(exports, "useFullBleedContentProps", {
 });
 var _FullBleedContent = _interopRequireDefault(require("./FullBleedContent"));
 var _getFullBleedBorderRadius = _interopRequireDefault(require("./getFullBleedBorderRadius"));
-var _useFullBleedContentProps = _interopRequireDefault(require("./useFullBleedContentProps"));
+var _useFullBleedContentProps = _interopRequireWildcard(require("./useFullBleedContentProps"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = _FullBleedContent.default;

package/lib/cjs/shared/FullBleedContent/useFullBleedContentProps.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getFullBleedPaddingSides = exports.default = void 0;
 var _componentsBase = require("@telus-uds/components-base");
 const getContentStackDirection = fullBleedContentPosition => {
   switch (fullBleedContentPosition) {
@@ -32,6 +32,21 @@ const getContentStackAlign = fullBleedContentAlign => {
   }
 };
 
+/**
+ * Calculates which padding sides should be applied to full bleed content
+ * based on its position relative to card content.
+ * The side adjacent to card body gets no padding since the body already provides spacing.
+ *
+ * @param {string} position - 'top' | 'bottom' | 'left' | 'right' | 'none'
+ * @returns {object} Boolean flags for which sides to apply padding
+ */
+const getFullBleedPaddingSides = position => ({
+  applyPaddingTop: position !== 'bottom',
+  applyPaddingBottom: position !== 'top',
+  applyPaddingLeft: position !== 'right',
+  applyPaddingRight: position !== 'left'
+});
+
 /**
  * Resolves a set of `FullBleedContent` props into the variables a container needs to
  * correctly position a `FullBleedContent` component for the current viewport.
@@ -39,6 +54,7 @@ const getContentStackAlign = fullBleedContentAlign => {
  * @param {object} [fullBleedContent] - a set of valid proptypes for FullBleedContent
  * @returns
  */
+exports.getFullBleedPaddingSides = getFullBleedPaddingSides;
 const useFullBleedContentProps = fullBleedContent => {
   const {
     align: fullBleedContentAlignProp,
@@ -53,12 +69,16 @@ const useFullBleedContentProps = fullBleedContent => {
   const fullBleedContentAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentAlignProp, 'stretch');
   const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
   const fullBleedContentChildrenAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentChildrenAlignProp, fullBleedContentAlign);
+
+  // Get padding sides based on position
+  const fullBleedPaddingSides = getFullBleedPaddingSides(fullBleedContentPosition);
   return {
     contentStackAlign,
     contentStackDirection,
     fullBleedContentPosition,
     fullBleedContentProps,
-    fullBleedContentChildrenAlign
+    fullBleedContentChildrenAlign,
+    fullBleedPaddingSides
   };
 };
 var _default = exports.default = useFullBleedContentProps;

package/lib/esm/Card/Card.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase, useResponsiveProp, hrefAttrsProp } from '@telus-uds/components-base';
+import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase, useResponsiveProp, hrefAttrsProp, useAllViewportTokens } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
@@ -177,6 +177,52 @@ const FocusBorder = /*#__PURE__*/styled.div.withConfig({
     zIndex: 2
   };
 });
+const FullBleedPaddingWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Card__FullBleedPaddingWrapper",
+  componentId: "components-web__sc-1elbtwd-4"
+})(_ref4 => {
+  let {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  } = _ref4;
+  return {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    display: 'flex',
+    flexDirection: 'column'
+  };
+});
+
+/**
+ * Calculates the padding values for full bleed content.
+ * Inherits the card's theme padding (minus borderWidth to visually match card body padding)
+ * and allows custom overrides via the fullBleedPadding prop.
+ *
+ * @param {object} themeTokens - The card's resolved theme tokens (contains padding values and borderWidth)
+ * @param {object|boolean} fullBleedPadding - true to inherit card padding, or an object with overrides
+ * @param {object} paddingSides - Boolean flags for which sides to apply padding
+ * @returns {object} Padding values for each side in px
+ */
+const calculateFullBleedPadding = (themeTokens, fullBleedPadding, paddingSides) => {
+  const customTokens = typeof fullBleedPadding === 'object' ? fullBleedPadding : undefined;
+  const borderWidth = themeTokens.borderWidth || 0;
+  const applyPadding = side => {
+    const sideKey = `applyPadding${side}`;
+    if (!paddingSides[sideKey]) return 0;
+    const tokenKey = `padding${side}`;
+    return customTokens?.[tokenKey] ?? themeTokens[tokenKey] - borderWidth ?? 0;
+  };
+  return {
+    paddingTop: applyPadding('Top'),
+    paddingBottom: applyPadding('Bottom'),
+    paddingLeft: applyPadding('Left'),
+    paddingRight: applyPadding('Right')
+  };
+};
 const Card = /*#__PURE__*/React.forwardRef(function () {
   let {
     children,
@@ -184,6 +230,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     footerPadding,
     fullBleedImage,
     fullBleedContent = fullBleedImage,
+    fullBleedPadding,
     tokens = {},
     variant,
     interactiveCard,
@@ -210,7 +257,8 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     contentStackDirection,
     fullBleedContentPosition,
     fullBleedContentProps,
-    fullBleedContentChildrenAlign
+    fullBleedContentChildrenAlign,
+    fullBleedPaddingSides
   } = useFullBleedContentProps(fullBleedContent);
   const {
     imgCol,
@@ -235,6 +283,12 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     borderRadius
   } = allThemeTokens;
 
+  // Get viewport-aware tokens for responsive full bleed padding
+  // useThemeTokens (above) doesn't pass viewport state, so it resolves to base/mobile tokens.
+  // useAllViewportTokens resolves tokens for ALL viewports + the current one (reactive to resize).
+  // This ensures fullBleedPadding matches CardContent's padding at every breakpoint.
+  const allViewportTokens = useAllViewportTokens('Card', tokens, variant);
+
   // Interactive cards: merge variants for CardBase (outer container)
   // The outer variant takes priority over interactiveCard.variant for the style property
   // This ensures the gradient is only applied to CardBase, not PressableCardBase and avoid duplication
@@ -310,6 +364,13 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   const hasFooter = Boolean(footer);
   const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
 
+  // Calculate full bleed content padding values
+  // When fullBleedPadding is truthy, apply padding around full bleed content
+  // Uses viewport-aware tokens (allViewportTokens.current) so padding matches
+  // CardContent's responsive padding at every breakpoint
+  const hasFullBleedPadding = Boolean(fullBleedPadding);
+  const fullBleedPaddingValues = hasFullBleedPadding ? calculateFullBleedPadding(allViewportTokens.current, fullBleedPadding, fullBleedPaddingSides) : null;
+
   // takes imgCol from fullBleedContent if present, to dynamically set width of image
   // card content will adapt to the size of image to add up to 100% width of card width
   // pass as props to ConditionalWrapper
@@ -335,8 +396,8 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     flexShrink: 1,
     justifyContent: 'space-between'
   };
-  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref4 => {
-    let [key] = _ref4;
+  const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref5 => {
+    let [key] = _ref5;
     return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor', 'gradient', 'backgroundGradient'] : [])].includes(key);
   }));
   const cardBaseVariant = backgroundImage ? {
@@ -448,11 +509,16 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
               WrapperComponent: DynamicWidthContainer,
               wrapperProps: imageWrapperStyleProps,
               condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
-              children: /*#__PURE__*/_jsx(FullBleedContent, {
-                borderRadius: fullBleedBorderRadius,
-                ...fullBleedContentPropsClean,
-                position: fullBleedContentPosition,
-                cardState: undefined
+              children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+                WrapperComponent: FullBleedPaddingWrapper,
+                wrapperProps: fullBleedPaddingValues,
+                condition: hasFullBleedPadding,
+                children: /*#__PURE__*/_jsx(FullBleedContent, {
+                  borderRadius: fullBleedBorderRadius,
+                  ...fullBleedContentPropsClean,
+                  position: fullBleedContentPosition,
+                  cardState: undefined
+                })
               })
             })]
           }), /*#__PURE__*/_jsx(InteractiveOverlay, {
@@ -496,11 +562,16 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
         WrapperComponent: DynamicWidthContainer,
         wrapperProps: imageWrapperStyleProps,
         condition: isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed,
-        children: /*#__PURE__*/_jsx(FullBleedContent, {
-          borderRadius: fullBleedBorderRadius,
-          ...fullBleedContentPropsClean,
-          position: fullBleedContentPosition,
-          cardState: undefined
+        children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+          WrapperComponent: FullBleedPaddingWrapper,
+          wrapperProps: fullBleedPaddingValues,
+          condition: hasFullBleedPadding,
+          children: /*#__PURE__*/_jsx(FullBleedContent, {
+            borderRadius: fullBleedBorderRadius,
+            ...fullBleedContentPropsClean,
+            position: fullBleedContentPosition,
+            cardState: undefined
+          })
         })
       })]
     }) : null, footer && /*#__PURE__*/_jsx(CardFooter, {
@@ -555,6 +626,13 @@ Card.propTypes = {
    * Custom card footer padding.
    */
   footerPadding: paddingProp.propType,
+  /**
+   * Custom full bleed content padding.
+   * When true, inherits the card's own padding (from variant/tokens).
+   * When an object, provides custom padding overrides: { paddingTop, paddingBottom, paddingLeft, paddingRight }.
+   * Padding is automatically adjusted based on the full bleed content's position.
+   */
+  fullBleedPadding: PropTypes.oneOfType([PropTypes.bool, paddingProp.propType]),
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *

package/lib/esm/Spinner/Spinner.js

@@ -37,8 +37,11 @@ const ContentOverlay = /*#__PURE__*/styled.div.withConfig({
 })({
   position: 'absolute',
   width: '100%',
+  top: 0,
+  left: 0,
   height: '100%',
-  zIndex: BACKDROP_Z_INDEX
+  zIndex: BACKDROP_Z_INDEX,
+  pointerEvents: 'none'
 });
 const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spinner__FullscreenOverlay",
@@ -60,8 +63,15 @@ const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
 const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spinner__OpaqueContainer",
   componentId: "components-web__sc-116rqck-3"
-})({
-  opacity: BACKDROP_OPACITY
+})(_ref3 => {
+  let {
+    show = true
+  } = _ref3;
+  return {
+    ...(show && {
+      opacity: BACKDROP_OPACITY
+    })
+  };
 });
 const recursiveMap = (children, fn) => React.Children.map(children, child => {
   if (! /*#__PURE__*/React.isValidElement(child)) {
@@ -78,7 +88,7 @@ const recursiveMap = (children, fn) => React.Children.map(children, child => {
 /**
  * Loading indicator.
  */
-const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const Spinner = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     fullScreen = false,
@@ -89,8 +99,9 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     isStatic = false,
     tokens,
     variant = {},
+    persistChildrenState = false,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const {
     fullScreenOverLayBackground,
     size,
@@ -100,6 +111,32 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     size: sizeVariant = 'large'
   } = variant;
   useScrollBlocking([fullScreen, show]);
+
+  // Overlay spinner with persistChildrenState enabled
+  if (children && persistChildrenState) {
+    return /*#__PURE__*/_jsxs(SpinnerContainer, {
+      inline: inline,
+      "aria-live": "assertive",
+      overlay: true,
+      ...selectProps(rest),
+      children: [/*#__PURE__*/_jsx(OpaqueContainer, {
+        show: show,
+        ...(show ? {
+          inert: 'true',
+          'aria-hidden': 'true'
+        } : {}),
+        children: children
+      }), /*#__PURE__*/_jsx(ContentOverlay, {}), show && /*#__PURE__*/_jsx(SpinnerContent, {
+        label: label,
+        labelPosition: labelPosition,
+        overlay: true,
+        size: size,
+        thickness: thickness,
+        sizeVariant: sizeVariant,
+        isStatic: isStatic
+      })]
+    });
+  }
   if (!show) {
     return children ?? null;
   }
@@ -129,7 +166,7 @@ const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }
 
   // Overlay spinner
-  if (children) {
+  if (children && !persistChildrenState) {
     return /*#__PURE__*/_jsxs(SpinnerContainer, {
       inline: inline,
       "aria-live": "assertive",
@@ -211,6 +248,12 @@ Spinner.propTypes = {
   /**
    * Determine where the label of the spinner should be placed, left, right, bottom or top.
    */
-  labelPosition: PropTypes.string
+  labelPosition: PropTypes.string,
+  /**
+   * When true, preserves the state of overlaid children when `show` toggles.
+   * Only applicable when the Spinner is used in overlay mode (with children).
+   * Use this when overlaying stateful components such as Micro Frontends (MFEs).
+   */
+  persistChildrenState: PropTypes.bool
 };
 export default Spinner;

package/lib/esm/shared/FullBleedContent/index.js

@@ -1,4 +1,4 @@
 import FullBleedContent from './FullBleedContent';
 export default FullBleedContent;
 export { default as getFullBleedBorderRadius } from './getFullBleedBorderRadius';
-export { default as useFullBleedContentProps } from './useFullBleedContentProps';
+export { default as useFullBleedContentProps, getFullBleedPaddingSides } from './useFullBleedContentProps';

package/lib/esm/shared/FullBleedContent/useFullBleedContentProps.js

@@ -26,6 +26,21 @@ const getContentStackAlign = fullBleedContentAlign => {
   }
 };
 
+/**
+ * Calculates which padding sides should be applied to full bleed content
+ * based on its position relative to card content.
+ * The side adjacent to card body gets no padding since the body already provides spacing.
+ *
+ * @param {string} position - 'top' | 'bottom' | 'left' | 'right' | 'none'
+ * @returns {object} Boolean flags for which sides to apply padding
+ */
+const getFullBleedPaddingSides = position => ({
+  applyPaddingTop: position !== 'bottom',
+  applyPaddingBottom: position !== 'top',
+  applyPaddingLeft: position !== 'right',
+  applyPaddingRight: position !== 'left'
+});
+
 /**
  * Resolves a set of `FullBleedContent` props into the variables a container needs to
  * correctly position a `FullBleedContent` component for the current viewport.
@@ -47,12 +62,17 @@ const useFullBleedContentProps = fullBleedContent => {
   const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch');
   const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
   const fullBleedContentChildrenAlign = useResponsiveProp(fullBleedContentChildrenAlignProp, fullBleedContentAlign);
+
+  // Get padding sides based on position
+  const fullBleedPaddingSides = getFullBleedPaddingSides(fullBleedContentPosition);
   return {
     contentStackAlign,
     contentStackDirection,
     fullBleedContentPosition,
     fullBleedContentProps,
-    fullBleedContentChildrenAlign
+    fullBleedContentChildrenAlign,
+    fullBleedPaddingSides
   };
 };
+export { getFullBleedPaddingSides };
 export default useFullBleedContentProps;

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.28.1",
+    "@telus-uds/components-base": "^3.28.2",
     "@telus-uds/system-constants": "^3.0.0",
     "@telus-uds/system-theme-tokens": "^4.20.0",
     "fscreen": "^1.2.0",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.18.2"
+  "version": "4.19.0"
 }

package/src/Card/Card.jsx

@@ -14,7 +14,8 @@ import {
   viewProps,
   PressableCardBase,
   useResponsiveProp,
-  hrefAttrsProp
+  hrefAttrsProp,
+  useAllViewportTokens
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import CardContent from './CardContent'
@@ -170,6 +171,46 @@ const FocusBorder = styled.div(({ borderWidth, borderColor, borderRadius }) => (
   zIndex: 2
 }))
 
+const FullBleedPaddingWrapper = styled.div(
+  ({ paddingTop, paddingBottom, paddingLeft, paddingRight }) => ({
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    display: 'flex',
+    flexDirection: 'column'
+  })
+)
+
+/**
+ * Calculates the padding values for full bleed content.
+ * Inherits the card's theme padding (minus borderWidth to visually match card body padding)
+ * and allows custom overrides via the fullBleedPadding prop.
+ *
+ * @param {object} themeTokens - The card's resolved theme tokens (contains padding values and borderWidth)
+ * @param {object|boolean} fullBleedPadding - true to inherit card padding, or an object with overrides
+ * @param {object} paddingSides - Boolean flags for which sides to apply padding
+ * @returns {object} Padding values for each side in px
+ */
+const calculateFullBleedPadding = (themeTokens, fullBleedPadding, paddingSides) => {
+  const customTokens = typeof fullBleedPadding === 'object' ? fullBleedPadding : undefined
+  const borderWidth = themeTokens.borderWidth || 0
+
+  const applyPadding = (side) => {
+    const sideKey = `applyPadding${side}`
+    if (!paddingSides[sideKey]) return 0
+    const tokenKey = `padding${side}`
+    return customTokens?.[tokenKey] ?? themeTokens[tokenKey] - borderWidth ?? 0
+  }
+
+  return {
+    paddingTop: applyPadding('Top'),
+    paddingBottom: applyPadding('Bottom'),
+    paddingLeft: applyPadding('Left'),
+    paddingRight: applyPadding('Right')
+  }
+}
+
 const Card = React.forwardRef(
   (
     {
@@ -178,6 +219,7 @@ const Card = React.forwardRef(
       footerPadding,
       fullBleedImage,
       fullBleedContent = fullBleedImage,
+      fullBleedPadding,
       tokens = {},
       variant,
       interactiveCard,
@@ -198,7 +240,8 @@ const Card = React.forwardRef(
       contentStackDirection,
       fullBleedContentPosition,
       fullBleedContentProps,
-      fullBleedContentChildrenAlign
+      fullBleedContentChildrenAlign,
+      fullBleedPaddingSides
     } = useFullBleedContentProps(fullBleedContent)
 
     const {
@@ -220,6 +263,12 @@ const Card = React.forwardRef(
     const allThemeTokens = useThemeTokens('Card', tokens, variantForTokens)
     const { borderRadius } = allThemeTokens
 
+    // Get viewport-aware tokens for responsive full bleed padding
+    // useThemeTokens (above) doesn't pass viewport state, so it resolves to base/mobile tokens.
+    // useAllViewportTokens resolves tokens for ALL viewports + the current one (reactive to resize).
+    // This ensures fullBleedPadding matches CardContent's padding at every breakpoint.
+    const allViewportTokens = useAllViewportTokens('Card', tokens, variant)
+
     // Interactive cards: merge variants for CardBase (outer container)
     // The outer variant takes priority over interactiveCard.variant for the style property
     // This ensures the gradient is only applied to CardBase, not PressableCardBase and avoid duplication
@@ -312,6 +361,19 @@ const Card = React.forwardRef(
       hasFooter
     )
 
+    // Calculate full bleed content padding values
+    // When fullBleedPadding is truthy, apply padding around full bleed content
+    // Uses viewport-aware tokens (allViewportTokens.current) so padding matches
+    // CardContent's responsive padding at every breakpoint
+    const hasFullBleedPadding = Boolean(fullBleedPadding)
+    const fullBleedPaddingValues = hasFullBleedPadding
+      ? calculateFullBleedPadding(
+          allViewportTokens.current,
+          fullBleedPadding,
+          fullBleedPaddingSides
+        )
+      : null
+
     // takes imgCol from fullBleedContent if present, to dynamically set width of image
     // card content will adapt to the size of image to add up to 100% width of card width
     // pass as props to ConditionalWrapper
@@ -503,12 +565,18 @@ const Card = React.forwardRef(
                           isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed
                         }
                       >
-                        <FullBleedContent
-                          borderRadius={fullBleedBorderRadius}
-                          {...fullBleedContentPropsClean}
-                          position={fullBleedContentPosition}
-                          cardState={undefined}
-                        />
+                        <ConditionalWrapper
+                          WrapperComponent={FullBleedPaddingWrapper}
+                          wrapperProps={fullBleedPaddingValues}
+                          condition={hasFullBleedPadding}
+                        >
+                          <FullBleedContent
+                            borderRadius={fullBleedBorderRadius}
+                            {...fullBleedContentPropsClean}
+                            position={fullBleedContentPosition}
+                            cardState={undefined}
+                          />
+                        </ConditionalWrapper>
                       </ConditionalWrapper>
                     )}
                   </StackView>
@@ -571,12 +639,18 @@ const Card = React.forwardRef(
               wrapperProps={imageWrapperStyleProps}
               condition={isImageWidthAdjustable || isHorizontalFullBleed || isVerticalFullBleed}
             >
-              <FullBleedContent
-                borderRadius={fullBleedBorderRadius}
-                {...fullBleedContentPropsClean}
-                position={fullBleedContentPosition}
-                cardState={undefined}
-              />
+              <ConditionalWrapper
+                WrapperComponent={FullBleedPaddingWrapper}
+                wrapperProps={fullBleedPaddingValues}
+                condition={hasFullBleedPadding}
+              >
+                <FullBleedContent
+                  borderRadius={fullBleedBorderRadius}
+                  {...fullBleedContentPropsClean}
+                  position={fullBleedContentPosition}
+                  cardState={undefined}
+                />
+              </ConditionalWrapper>
             </ConditionalWrapper>
           </StackView>
         ) : null}
@@ -636,6 +710,13 @@ Card.propTypes = {
    * Custom card footer padding.
    */
   footerPadding: paddingProp.propType,
+  /**
+   * Custom full bleed content padding.
+   * When true, inherits the card's own padding (from variant/tokens).
+   * When an object, provides custom padding overrides: { paddingTop, paddingBottom, paddingLeft, paddingRight }.
+   * Padding is automatically adjusted based on the full bleed content's position.
+   */
+  fullBleedPadding: PropTypes.oneOfType([PropTypes.bool, paddingProp.propType]),
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *

package/src/Spinner/Spinner.jsx

@@ -28,8 +28,11 @@ const SpinnerContainer = styled.div(({ inline, fullScreen, overlay }) => ({
 const ContentOverlay = styled.div({
   position: 'absolute',
   width: '100%',
+  top: 0,
+  left: 0,
   height: '100%',
-  zIndex: BACKDROP_Z_INDEX
+  zIndex: BACKDROP_Z_INDEX,
+  pointerEvents: 'none'
 })
 
 const FullscreenOverlay = styled.div(({ fullScreenOverLayBackground }) => ({
@@ -41,9 +44,12 @@ const FullscreenOverlay = styled.div(({ fullScreenOverLayBackground }) => ({
   zIndex: BACKDROP_Z_INDEX,
   backgroundColor: fullScreenOverLayBackground
 }))
-const OpaqueContainer = styled.div({
-  opacity: BACKDROP_OPACITY
-})
+
+const OpaqueContainer = styled.div(({ show = true }) => ({
+  ...(show && {
+    opacity: BACKDROP_OPACITY
+  })
+}))
 
 const recursiveMap = (children, fn) =>
   React.Children.map(children, (child) => {
@@ -76,6 +82,7 @@ const Spinner = React.forwardRef(
       isStatic = false,
       tokens,
       variant = {},
+      persistChildrenState = false,
       ...rest
     },
     ref
@@ -90,6 +97,30 @@ const Spinner = React.forwardRef(
 
     useScrollBlocking([fullScreen, show])
 
+    // Overlay spinner with persistChildrenState enabled
+    if (children && persistChildrenState) {
+      return (
+        <SpinnerContainer inline={inline} aria-live="assertive" overlay {...selectProps(rest)}>
+          {/* Children ALWAYS rendered in same position - OpaqueContainer styles toggle with show */}
+          <OpaqueContainer show={show} {...(show ? { inert: 'true', 'aria-hidden': 'true' } : {})}>
+            {children}
+          </OpaqueContainer>
+          <ContentOverlay />
+          {show && (
+            <SpinnerContent
+              label={label}
+              labelPosition={labelPosition}
+              overlay={true}
+              size={size}
+              thickness={thickness}
+              sizeVariant={sizeVariant}
+              isStatic={isStatic}
+            />
+          )}
+        </SpinnerContainer>
+      )
+    }
+
     if (!show) {
       return children ?? null
     }
@@ -121,7 +152,7 @@ const Spinner = React.forwardRef(
     }
 
     // Overlay spinner
-    if (children) {
+    if (children && !persistChildrenState) {
       return (
         <SpinnerContainer inline={inline} aria-live="assertive" overlay {...selectProps(rest)}>
           <SpinnerContent
@@ -204,7 +235,13 @@ Spinner.propTypes = {
   /**
    * Determine where the label of the spinner should be placed, left, right, bottom or top.
    */
-  labelPosition: PropTypes.string
+  labelPosition: PropTypes.string,
+  /**
+   * When true, preserves the state of overlaid children when `show` toggles.
+   * Only applicable when the Spinner is used in overlay mode (with children).
+   * Use this when overlaying stateful components such as Micro Frontends (MFEs).
+   */
+  persistChildrenState: PropTypes.bool
 }
 
 export default Spinner

package/src/shared/FullBleedContent/index.js

@@ -3,4 +3,7 @@ import FullBleedContent from './FullBleedContent'
 export default FullBleedContent
 
 export { default as getFullBleedBorderRadius } from './getFullBleedBorderRadius'
-export { default as useFullBleedContentProps } from './useFullBleedContentProps'
+export {
+  default as useFullBleedContentProps,
+  getFullBleedPaddingSides
+} from './useFullBleedContentProps'

package/src/shared/FullBleedContent/useFullBleedContentProps.js

@@ -31,6 +31,21 @@ const getContentStackAlign = (fullBleedContentAlign) => {
   }
 }
 
+/**
+ * Calculates which padding sides should be applied to full bleed content
+ * based on its position relative to card content.
+ * The side adjacent to card body gets no padding since the body already provides spacing.
+ *
+ * @param {string} position - 'top' | 'bottom' | 'left' | 'right' | 'none'
+ * @returns {object} Boolean flags for which sides to apply padding
+ */
+const getFullBleedPaddingSides = (position) => ({
+  applyPaddingTop: position !== 'bottom',
+  applyPaddingBottom: position !== 'top',
+  applyPaddingLeft: position !== 'right',
+  applyPaddingRight: position !== 'left'
+})
+
 /**
  * Resolves a set of `FullBleedContent` props into the variables a container needs to
  * correctly position a `FullBleedContent` component for the current viewport.
@@ -58,13 +73,18 @@ const useFullBleedContentProps = (fullBleedContent) => {
     fullBleedContentAlign
   )
 
+  // Get padding sides based on position
+  const fullBleedPaddingSides = getFullBleedPaddingSides(fullBleedContentPosition)
+
   return {
     contentStackAlign,
     contentStackDirection,
     fullBleedContentPosition,
     fullBleedContentProps,
-    fullBleedContentChildrenAlign
+    fullBleedContentChildrenAlign,
+    fullBleedPaddingSides
   }
 }
 
+export { getFullBleedPaddingSides }
 export default useFullBleedContentProps

package/types/Autocomplete.d.ts

@@ -22,6 +22,8 @@ export interface AutocompleteProps extends AutocompleteCommonProps {
   isLoading?: boolean
   items?: AutocompleteItem[]
   loadingLabel?: string
+  maxDropdownHeight?: number
+  showOptionsOnFocus?: boolean
   minToSuggestion?: number
   maxSuggestions?: number
   noResults?: ReactNode

package/types/Spinner.d.ts

@@ -9,6 +9,11 @@ export interface SpinnerProps extends HTMLAttrs {
   label: string
   show?: boolean
   isStatic?: boolean
+  /**
+   * When true, preserves the state of overlaid children when `show` toggles.
+   * Only applicable when the Spinner is used in overlay mode (with `children`).
+   */
+  persistChildrenState?: boolean
 }
 
 declare const Spinner: ComponentType<SpinnerProps>