@telus-uds/components-web 4.15.0 → 4.17.0

package/CHANGELOG.md

@@ -1,9 +1,37 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 12 Dec 2025 05:37:21 GMT and should not be manually modified.
+This log was last generated on Mon, 19 Jan 2026 20:39:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.17.0
+
+Mon, 19 Jan 2026 20:39:51 GMT
+
+### Minor changes
+
+- `PriceLockup`: Add inverse variant (david.melara1@telus.com)
+- Bump @telus-uds/components-base to v3.26.0
+
+### Patches
+
+- `NavigationBar`: Fix flickering from overlay overflow  (david.melara1@telus.com)
+
+## 4.16.0
+
+Mon, 12 Jan 2026 14:55:22 GMT
+
+### Minor changes
+
+- `IconButton`: Update the UI to match the design intention, add an inactive prop and selected variant (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v3.25.0
+- Bump @telus-uds/system-theme-tokens to v4.18.0
+
+### Patches
+
+- `NavigationBar`: fix sub-menus navigation on mobile (guillermo.peitzner@telus.com)
+- `Card`: fix prop imgCol prevents contentAlign to work (sergio.ramirez@telus.com)
+
 ## 4.15.0
 
 Fri, 12 Dec 2025 05:37:21 GMT

package/lib/cjs/Card/Card.js

@@ -62,7 +62,8 @@ const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withCon
     marginTop,
     marginBottom,
     marginLeft,
-    marginRight
+    marginRight,
+    alignSelf
   } = _ref;
   return {
     width,
@@ -72,7 +73,8 @@ const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withCon
     marginTop,
     marginBottom,
     marginLeft,
-    marginRight
+    marginRight,
+    alignSelf
   };
 });
 const Card = /*#__PURE__*/_react.default.forwardRef(function () {
@@ -172,6 +174,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     width: adaptiveContentWidth,
     ...(imgColCurrentViewport >= maxCol && {
       display: 'none'
+    }),
+    ...(fullBleedContentChildrenAlign && {
+      alignSelf: fullBleedContentChildrenAlign
     })
   };
   const columnFlex = {
@@ -262,7 +267,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
                 ...(backgroundImage ? {} : {
                   backgroundColor: 'transparent'
                 }),
-                ...(fullBleedContentChildrenAlign && {
+                ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
                   alignSelf: fullBleedContentChildrenAlign
                 })
               },
@@ -310,7 +315,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
           tokens: {
             ...tokens,
-            ...(fullBleedContentChildrenAlign && {
+            ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
               alignSelf: fullBleedContentChildrenAlign
             })
           },

package/lib/cjs/NavigationBar/NavigationSubMenu.js

@@ -12,11 +12,52 @@ var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidP
 var _resolveItemSelection = _interopRequireDefault(require("./resolveItemSelection"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MIN_WIDTH = 192;
+const MAX_WIDTH = 289;
+const DEFAULT_OFFSETS = {
+  offsets: {
+    vertical: 4
+  }
+};
+const XS_ALIGN = {
+  top: 'bottom',
+  left: 'left'
+};
+const SM_ALIGN = {
+  top: 'bottom',
+  right: 'right'
+};
+const LG_ALIGN = {
+  top: 'bottom',
+  center: 'center'
+};
+const getResponsiveBreakpoints = sourceWidth => ({
+  xs: {
+    ...DEFAULT_OFFSETS,
+    align: XS_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  sm: {
+    ...DEFAULT_OFFSETS,
+    align: SM_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  lg: {
+    ...DEFAULT_OFFSETS,
+    align: LG_ALIGN,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH
+  }
+});
+
 /**
  * A NavigationItem that opens or closes a Listbox of other NavigationItems.
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
- */const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     id,
@@ -33,42 +74,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     itemsContainerRef
   } = _ref;
   const focusTrapRef = _react.default.useRef();
-  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
-  const defaultOffsets = {
-    offsets: {
-      vertical: 4
-    }
-  };
+  const [sourceWidth, setSourceWidth] = _react.default.useState(0);
   const {
     align,
     offsets,
-    minWidth
-  } = (0, _componentsBase.useResponsiveProp)({
-    xs: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        left: 'left'
-      },
-      minWidth: maxWidth
-    },
-    sm: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        right: 'right'
-      },
-      minWidth: maxWidth
-    },
-    lg: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        center: 'center'
-      },
-      minWidth: 192
-    }
-  });
+    minWidth,
+    maxWidth
+  } = (0, _componentsBase.useResponsiveProp)(getResponsiveBreakpoints(sourceWidth));
   const {
     overlaidPosition,
     sourceRef,
@@ -95,6 +107,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   } = (0, _componentsBase.useThemeTokens)('NavigationBar', tokens, {}, {
     expanded: isOpen
   });
+  _react.default.useEffect(() => {
+    sourceRef.current?.measureInWindow((_, __, width) => {
+      setSourceWidth(width);
+    });
+  }, [isOpen, sourceRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.default, {
       ref: sourceRef,
@@ -135,7 +152,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
           LinkRouter: LinkRouter,
           linkRouterProps: linkRouterProps,
           variant: variant,
-          onClose: onClick,
           ref: itemsContainerRef || ref
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -52,7 +52,7 @@ const useFullBleedContentProps = fullBleedContent => {
   const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
   const fullBleedContentAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentAlignProp, 'stretch');
   const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
-  const fullBleedContentChildrenAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentChildrenAlignProp, 'stretch');
+  const fullBleedContentChildrenAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentChildrenAlignProp, fullBleedContentAlign);
   return {
     contentStackAlign,
     contentStackDirection,

package/lib/cjs/utils/useOverlaidPosition.js

@@ -111,6 +111,13 @@ function getOverlaidPosition(_ref2) {
       positioning[side] = adjusted.offset;
     }
   }
+  if (positioning.left) {
+    const overflowAmount = positioning.left + targetDimensions.width - windowDimensions.width;
+    if (overflowAmount > 0) {
+      const spaceToRightEdge = windowDimensions.width - (sourceLayout.x + sourceLayout.width);
+      positioning.left = positioning.left - overflowAmount - spaceToRightEdge;
+    }
+  }
   return positioning;
 }
 
@@ -210,7 +217,10 @@ const useOverlaidPosition = _ref3 => {
     windowDimensions,
     offsets,
     align
-  }) : {};
+  }) : {
+    top: 0,
+    left: 0
+  };
   return {
     overlaidPosition,
     sourceRef,

package/lib/esm/Card/Card.js

@@ -54,7 +54,8 @@ const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
     marginTop,
     marginBottom,
     marginLeft,
-    marginRight
+    marginRight,
+    alignSelf
   } = _ref;
   return {
     width,
@@ -64,7 +65,8 @@ const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
     marginTop,
     marginBottom,
     marginLeft,
-    marginRight
+    marginRight,
+    alignSelf
   };
 });
 const Card = /*#__PURE__*/React.forwardRef(function () {
@@ -164,6 +166,9 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     width: adaptiveContentWidth,
     ...(imgColCurrentViewport >= maxCol && {
       display: 'none'
+    }),
+    ...(fullBleedContentChildrenAlign && {
+      alignSelf: fullBleedContentChildrenAlign
     })
   };
   const columnFlex = {
@@ -254,7 +259,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
                 ...(backgroundImage ? {} : {
                   backgroundColor: 'transparent'
                 }),
-                ...(fullBleedContentChildrenAlign && {
+                ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
                   alignSelf: fullBleedContentChildrenAlign
                 })
               },
@@ -302,7 +307,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
         children: /*#__PURE__*/_jsx(CardContent, {
           tokens: {
             ...tokens,
-            ...(fullBleedContentChildrenAlign && {
+            ...(!isImageWidthAdjustable && fullBleedContentChildrenAlign && {
               alignSelf: fullBleedContentChildrenAlign
             })
           },

package/lib/esm/NavigationBar/NavigationSubMenu.js

@@ -4,13 +4,52 @@ import { Icon, useResponsiveProp, useThemeTokens, Listbox, getTokensPropType } f
 import NavigationItem from './NavigationItem';
 import useOverlaidPosition from '../utils/useOverlaidPosition';
 import resolveItemSelection from './resolveItemSelection';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const MIN_WIDTH = 192;
+const MAX_WIDTH = 289;
+const DEFAULT_OFFSETS = {
+  offsets: {
+    vertical: 4
+  }
+};
+const XS_ALIGN = {
+  top: 'bottom',
+  left: 'left'
+};
+const SM_ALIGN = {
+  top: 'bottom',
+  right: 'right'
+};
+const LG_ALIGN = {
+  top: 'bottom',
+  center: 'center'
+};
+const getResponsiveBreakpoints = sourceWidth => ({
+  xs: {
+    ...DEFAULT_OFFSETS,
+    align: XS_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  sm: {
+    ...DEFAULT_OFFSETS,
+    align: SM_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  lg: {
+    ...DEFAULT_OFFSETS,
+    align: LG_ALIGN,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH
+  }
+});
 
 /**
  * A NavigationItem that opens or closes a Listbox of other NavigationItems.
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -28,42 +67,13 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     itemsContainerRef
   } = _ref;
   const focusTrapRef = React.useRef();
-  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
-  const defaultOffsets = {
-    offsets: {
-      vertical: 4
-    }
-  };
+  const [sourceWidth, setSourceWidth] = React.useState(0);
   const {
     align,
     offsets,
-    minWidth
-  } = useResponsiveProp({
-    xs: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        left: 'left'
-      },
-      minWidth: maxWidth
-    },
-    sm: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        right: 'right'
-      },
-      minWidth: maxWidth
-    },
-    lg: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        center: 'center'
-      },
-      minWidth: 192
-    }
-  });
+    minWidth,
+    maxWidth
+  } = useResponsiveProp(getResponsiveBreakpoints(sourceWidth));
   const {
     overlaidPosition,
     sourceRef,
@@ -90,6 +100,11 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = useThemeTokens('NavigationBar', tokens, {}, {
     expanded: isOpen
   });
+  React.useEffect(() => {
+    sourceRef.current?.measureInWindow((_, __, width) => {
+      setSourceWidth(width);
+    });
+  }, [isOpen, sourceRef]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(NavigationItem, {
       ref: sourceRef,
@@ -130,7 +145,6 @@ const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           LinkRouter: LinkRouter,
           linkRouterProps: linkRouterProps,
           variant: variant,
-          onClose: onClick,
           ref: itemsContainerRef || ref
         })
       }), /*#__PURE__*/_jsx("div", {

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

@@ -46,7 +46,7 @@ const useFullBleedContentProps = fullBleedContent => {
   const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
   const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch');
   const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
-  const fullBleedContentChildrenAlign = useResponsiveProp(fullBleedContentChildrenAlignProp, 'stretch');
+  const fullBleedContentChildrenAlign = useResponsiveProp(fullBleedContentChildrenAlignProp, fullBleedContentAlign);
   return {
     contentStackAlign,
     contentStackDirection,

package/lib/esm/utils/useOverlaidPosition.js

@@ -103,6 +103,13 @@ function getOverlaidPosition(_ref2) {
       positioning[side] = adjusted.offset;
     }
   }
+  if (positioning.left) {
+    const overflowAmount = positioning.left + targetDimensions.width - windowDimensions.width;
+    if (overflowAmount > 0) {
+      const spaceToRightEdge = windowDimensions.width - (sourceLayout.x + sourceLayout.width);
+      positioning.left = positioning.left - overflowAmount - spaceToRightEdge;
+    }
+  }
   return positioning;
 }
 
@@ -202,7 +209,10 @@ const useOverlaidPosition = _ref3 => {
     windowDimensions,
     offsets,
     align
-  }) : {};
+  }) : {
+    top: 0,
+    left: 0
+  };
   return {
     overlaidPosition,
     sourceRef,

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.24.0",
+    "@telus-uds/components-base": "^3.26.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.17.0",
+    "@telus-uds/system-theme-tokens": "^4.18.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.15.0"
+  "version": "4.17.0"
 }

package/src/Card/Card.jsx

@@ -73,7 +73,8 @@ const DynamicWidthContainer = styled.div.withConfig({
     marginTop,
     marginBottom,
     marginLeft,
-    marginRight
+    marginRight,
+    alignSelf
   }) => ({
     width,
     display,
@@ -82,7 +83,8 @@ const DynamicWidthContainer = styled.div.withConfig({
     marginTop,
     marginBottom,
     marginLeft,
-    marginRight
+    marginRight,
+    alignSelf
   })
 )
 
@@ -185,7 +187,10 @@ const Card = React.forwardRef(
 
     const contentWrapperStyleProps = {
       width: adaptiveContentWidth,
-      ...(imgColCurrentViewport >= maxCol && { display: 'none' })
+      ...(imgColCurrentViewport >= maxCol && { display: 'none' }),
+      ...(fullBleedContentChildrenAlign && {
+        alignSelf: fullBleedContentChildrenAlign
+      })
     }
 
     const columnFlex = {
@@ -288,9 +293,10 @@ const Card = React.forwardRef(
                         tokens={{
                           ...tokensWithoutBg,
                           ...(backgroundImage ? {} : { backgroundColor: 'transparent' }),
-                          ...(fullBleedContentChildrenAlign && {
-                            alignSelf: fullBleedContentChildrenAlign
-                          })
+                          ...(!isImageWidthAdjustable &&
+                            fullBleedContentChildrenAlign && {
+                              alignSelf: fullBleedContentChildrenAlign
+                            })
                         }}
                         variant={variant}
                         withFooter={hasFooter}
@@ -351,9 +357,10 @@ const Card = React.forwardRef(
                 <CardContent
                   tokens={{
                     ...tokens,
-                    ...(fullBleedContentChildrenAlign && {
-                      alignSelf: fullBleedContentChildrenAlign
-                    })
+                    ...(!isImageWidthAdjustable &&
+                      fullBleedContentChildrenAlign && {
+                        alignSelf: fullBleedContentChildrenAlign
+                      })
                   }}
                   variant={variant}
                   withFooter={hasFooter}

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -11,6 +11,34 @@ import NavigationItem from './NavigationItem'
 import useOverlaidPosition from '../utils/useOverlaidPosition'
 import resolveItemSelection from './resolveItemSelection'
 
+const MIN_WIDTH = 192
+const MAX_WIDTH = 289
+const DEFAULT_OFFSETS = { offsets: { vertical: 4 } }
+const XS_ALIGN = { top: 'bottom', left: 'left' }
+const SM_ALIGN = { top: 'bottom', right: 'right' }
+const LG_ALIGN = { top: 'bottom', center: 'center' }
+
+const getResponsiveBreakpoints = (sourceWidth) => ({
+  xs: {
+    ...DEFAULT_OFFSETS,
+    align: XS_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  sm: {
+    ...DEFAULT_OFFSETS,
+    align: SM_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  lg: {
+    ...DEFAULT_OFFSETS,
+    align: LG_ALIGN,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH
+  }
+})
+
 /**
  * A NavigationItem that opens or closes a Listbox of other NavigationItems.
  *
@@ -36,18 +64,11 @@ const NavigationSubMenu = React.forwardRef(
     ref
   ) => {
     const focusTrapRef = React.useRef()
+    const [sourceWidth, setSourceWidth] = React.useState(0)
 
-    const maxWidth = 289 // Slightly over 288 of nav item to account for subpixel rounding
-    const defaultOffsets = { offsets: { vertical: 4 } }
-    const { align, offsets, minWidth } = useResponsiveProp({
-      xs: { ...defaultOffsets, align: { top: 'bottom', left: 'left' }, minWidth: maxWidth },
-      sm: { ...defaultOffsets, align: { top: 'bottom', right: 'right' }, minWidth: maxWidth },
-      lg: {
-        ...defaultOffsets,
-        align: { top: 'bottom', center: 'center' },
-        minWidth: 192
-      }
-    })
+    const { align, offsets, minWidth, maxWidth } = useResponsiveProp(
+      getResponsiveBreakpoints(sourceWidth)
+    )
 
     const { overlaidPosition, sourceRef, targetRef, onTargetLayout, isReady } = useOverlaidPosition(
       {
@@ -64,6 +85,12 @@ const NavigationSubMenu = React.forwardRef(
 
     const { icoMenu } = useThemeTokens('NavigationBar', tokens, {}, { expanded: isOpen })
 
+    React.useEffect(() => {
+      sourceRef.current?.measureInWindow((_, __, width) => {
+        setSourceWidth(width)
+      })
+    }, [isOpen, sourceRef])
+
     return (
       <>
         <NavigationItem
@@ -104,7 +131,6 @@ const NavigationSubMenu = React.forwardRef(
                 LinkRouter={LinkRouter}
                 linkRouterProps={linkRouterProps}
                 variant={variant}
-                onClose={onClick}
                 ref={itemsContainerRef || ref}
               />
             </Listbox.Overlay>

package/src/shared/FullBleedContent/useFullBleedContentProps.js

@@ -55,7 +55,7 @@ const useFullBleedContentProps = (fullBleedContent) => {
 
   const fullBleedContentChildrenAlign = useResponsiveProp(
     fullBleedContentChildrenAlignProp,
-    'stretch'
+    fullBleedContentAlign
   )
 
   return {

package/src/utils/useOverlaidPosition.js

@@ -118,6 +118,14 @@ function getOverlaidPosition({
     }
   }
 
+  if (positioning.left) {
+    const overflowAmount = positioning.left + targetDimensions.width - windowDimensions.width
+    if (overflowAmount > 0) {
+      const spaceToRightEdge = windowDimensions.width - (sourceLayout.x + sourceLayout.width)
+      positioning.left = positioning.left - overflowAmount - spaceToRightEdge
+    }
+  }
+
   return positioning
 }
 
@@ -212,7 +220,7 @@ const useOverlaidPosition = ({
         offsets,
         align
       })
-    : {}
+    : { top: 0, left: 0 }
 
   return {
     overlaidPosition,