@telus-uds/components-web 4.9.1 → 4.10.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 16 Jul 2025 15:16:33 GMT and should not be manually modified.
+This log was last generated on Fri, 15 Aug 2025 00:45:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.10.0
+
+Fri, 15 Aug 2025 00:45:23 GMT
+
+### Minor changes
+
+- `Card`: add content-align prop to full-bleed-content (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v3.13.0
+- Bump @telus-uds/system-theme-tokens to v4.12.0
+
+### Patches
+
+- `PriceLockup`: fix text and footnote position (sergio.ramirez@telus.com)
+- `PriceLockup`: fix text and footnote alignment (sergio.ramirez@telus.com)
+- `NavigationBar`: fix ui to match design intention (guillermo.peitzner@telus.com)
+
+## 4.9.2
+
+Fri, 25 Jul 2025 04:13:56 GMT
+
+### Patches
+
+- Bump @telus-uds/components-base to v3.12.2
+- Bump @telus-uds/system-theme-tokens to v4.11.0
+
 ## 4.9.1
 
-Wed, 16 Jul 2025 15:16:33 GMT
+Wed, 16 Jul 2025 15:18:32 GMT
 
 ### Patches
 

package/lib/cjs/Card/Card.js

@@ -89,7 +89,8 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     contentStackAlign,
     contentStackDirection,
     fullBleedContentPosition,
-    fullBleedContentProps
+    fullBleedContentProps,
+    fullBleedContentChildrenAlign
   } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent);
   const {
     imgCol
@@ -173,7 +174,12 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         wrapperProps: contentWrapperStyleProps,
         condition: isImageWidthAdjustable,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-          tokens: tokens,
+          tokens: {
+            ...tokens,
+            ...(fullBleedContentChildrenAlign && {
+              alignSelf: fullBleedContentChildrenAlign
+            })
+          },
           variant: variant,
           withFooter: hasFooter,
           children: children
@@ -201,6 +207,7 @@ const alignValues = ['start', 'end', 'center', 'stretch'];
 const PositionedFullBleedContentPropType = _propTypes.default.shape({
   position: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(positionValues)).isRequired,
   align: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(alignValues)),
+  contentAlign: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(alignValues)),
   // eslint-disable-next-line react/forbid-foreign-prop-types
   ..._FullBleedContent.default.propTypes
 });

package/lib/cjs/Card/CardContent.js

@@ -27,7 +27,8 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
     contentJustifyContent: justifyContent,
-    borderWidth
+    borderWidth,
+    alignSelf
   } = _ref;
   return {
     // We need to make sure to have sharp corners on the bottom
@@ -45,7 +46,8 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     alignItems,
     flexGrow,
     flexShrink,
-    justifyContent
+    justifyContent,
+    alignSelf
   };
 });
 
@@ -84,7 +86,10 @@ CardContent.propTypes = {
   /**
    * Card tokens.
    */
-  tokens: (0, _componentsBase.getTokensPropType)('Card'),
+  tokens: _propTypes.default.shape({
+    ...(0, _componentsBase.getTokensPropType)('Card'),
+    alignSelf: _propTypes.default.string
+  }),
   /**
    * Card variant.
    */

package/lib/cjs/NavigationBar/NavigationItem.js

@@ -18,15 +18,20 @@ const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-ql9x7c-0"
 })(_ref => {
   let {
-    targetWidth
+    targetWidth,
+    viewport
   } = _ref;
   return {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
-    maxWidth: `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px`,
+    maxWidth: viewport !== 'xs' ? `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px` : '100%',
     flexGrow: targetWidth ? 1 : 0,
-    flexShrink: 1
+    flexShrink: 1,
+    ...(viewport === 'xs' && {
+      width: '100%',
+      flex: 1
+    })
   };
 });
 
@@ -60,12 +65,25 @@ const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   const viewport = (0, _componentsBase.useViewport)();
   const getTokens = (0, _componentsBase.useThemeTokensCallback)('NavigationBar', tokens, variant);
-  const getStateTokens = state => getTokens({
-    ...state,
-    viewport
-  });
+  const getStateTokens = state => {
+    if (viewport !== 'xs') {
+      return getTokens({
+        ...state,
+        viewport
+      });
+    }
+    const {
+      width,
+      ...tokensWithoutWidth
+    } = getTokens({
+      ...state,
+      viewport
+    });
+    return tokensWithoutWidth;
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContainer, {
     targetWidth: targetWidth,
+    viewport: viewport,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Button, {
       accessibilityRole: accessibilityRole,
       accessibilityState: accessibilityState,
@@ -73,7 +91,10 @@ const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       ref: ref,
       tokens: getStateTokens,
       variant: {
-        selected
+        selected,
+        ...(viewport === 'xs' && {
+          width: 'full'
+        })
       },
       href: href,
       LinkRouter: LinkRouter,

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -128,6 +128,10 @@ const TypographyContainer = /*#__PURE__*/_styledComponents.default.div.withConfi
   } = _ref13;
   return `${paddingTop || 0}px`;
 });
+const InlineTextWithFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__InlineTextWithFootnote",
+  componentId: "components-web__sc-1x6duay-11"
+})(["display:inline;position:relative;> *:first-child{display:inline;}> *:last-child{display:inline-block;position:relative;top:-0.5em;font-size:0.75em;margin-left:2px;line-height:0;vertical-align:bottom;}"]);
 const selectFootnoteLinkStyles = _ref14 => {
   let {
     footnoteLinkColor,
@@ -168,6 +172,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
     onClickFootnote,
     strikeThrough,
     a11yText,
+    linkPosition = 'default',
     tokens: priceLockupTokens,
     variant = {},
     copy = 'en',
@@ -271,16 +276,31 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
       })]
     }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
-  const renderFootnoteContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FootnoteContainer, {
+  const renderFootnoteContent = () => {
+    const containerProps = {
       footnoteMarginTop: `${footnoteMarginTop}px`,
-      footnoteGap: `${footnoteGap}px`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BottomTextContainer, {
-        bottomTextMarginTop: `${bottomTextMarginTop}px`,
-        children: renderTypography(bottomText, typographyTokens.bottomText)
-      }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
-    }), footnoteLinks.length > 3 && renderFootnoteLinks()]
-  });
+      footnoteGap: `${footnoteGap}px`
+    };
+    const shouldUseInline = linkPosition === 'inline';
+    const bottomTextContent = shouldUseInline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(InlineTextWithFootnote, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        tokens: typographyTokens.bottomText,
+        as: "span",
+        children: bottomText
+      }), renderFootnoteLinks()]
+    }) : renderTypography(bottomText, typographyTokens.bottomText);
+    const showFootnotesInContainer = !shouldUseInline && footnoteLinks.length <= 3;
+    const showFootnotesOutside = !shouldUseInline && footnoteLinks.length > 3;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FootnoteContainer, {
+        ...containerProps,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BottomTextContainer, {
+          bottomTextMarginTop: `${bottomTextMarginTop}px`,
+          children: bottomTextContent
+        }), showFootnotesInContainer && renderFootnoteLinks()]
+      }), showFootnotesOutside && renderFootnoteLinks()]
+    });
+  };
   if (strikeThrough && !a11yText) {
     (0, _utils.warn)('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
@@ -404,6 +424,13 @@ PriceLockup.propTypes = {
    * Select English or French copy for the accessible label.
    */
   copy: _propTypes.default.oneOf(['en', 'fr']),
+  /**
+   * Controls footnote link positioning when bottomText is present
+   *
+   * - 'default': Footnote appears next to the text container (current behavior)
+   * - 'inline': Footnote appears inline at the end of the text
+   */
+  linkPosition: _propTypes.default.oneOf(['default', 'inline']),
   /* Custom dictionary containing the labels
    */
   dictionary: _propTypes.default.shape({

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

@@ -43,6 +43,7 @@ const useFullBleedContentProps = fullBleedContent => {
   const {
     align: fullBleedContentAlignProp,
     position: fullBleedContentPositionProp,
+    contentAlign: fullBleedContentChildrenAlignProp,
     ...fullBleedContentProps
   } = fullBleedContent ?? {
     position: 'none'
@@ -51,11 +52,13 @@ 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');
   return {
     contentStackAlign,
     contentStackDirection,
     fullBleedContentPosition,
-    fullBleedContentProps
+    fullBleedContentProps,
+    fullBleedContentChildrenAlign
   };
 };
 var _default = exports.default = useFullBleedContentProps;

package/lib/esm/Card/Card.js

@@ -81,7 +81,8 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     contentStackAlign,
     contentStackDirection,
     fullBleedContentPosition,
-    fullBleedContentProps
+    fullBleedContentProps,
+    fullBleedContentChildrenAlign
   } = useFullBleedContentProps(fullBleedContent);
   const {
     imgCol
@@ -165,7 +166,12 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
         wrapperProps: contentWrapperStyleProps,
         condition: isImageWidthAdjustable,
         children: /*#__PURE__*/_jsx(CardContent, {
-          tokens: tokens,
+          tokens: {
+            ...tokens,
+            ...(fullBleedContentChildrenAlign && {
+              alignSelf: fullBleedContentChildrenAlign
+            })
+          },
           variant: variant,
           withFooter: hasFooter,
           children: children
@@ -193,6 +199,7 @@ const alignValues = ['start', 'end', 'center', 'stretch'];
 const PositionedFullBleedContentPropType = PropTypes.shape({
   position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(positionValues)).isRequired,
   align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
+  contentAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
   // eslint-disable-next-line react/forbid-foreign-prop-types
   ...FullBleedContent.propTypes
 });

package/lib/esm/Card/CardContent.js

@@ -20,7 +20,8 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
     contentJustifyContent: justifyContent,
-    borderWidth
+    borderWidth,
+    alignSelf
   } = _ref;
   return {
     // We need to make sure to have sharp corners on the bottom
@@ -38,7 +39,8 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
     alignItems,
     flexGrow,
     flexShrink,
-    justifyContent
+    justifyContent,
+    alignSelf
   };
 });
 
@@ -77,7 +79,10 @@ CardContent.propTypes = {
   /**
    * Card tokens.
    */
-  tokens: getTokensPropType('Card'),
+  tokens: PropTypes.shape({
+    ...getTokensPropType('Card'),
+    alignSelf: PropTypes.string
+  }),
   /**
    * Card variant.
    */

package/lib/esm/NavigationBar/NavigationItem.js

@@ -11,15 +11,20 @@ const ItemContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-ql9x7c-0"
 })(_ref => {
   let {
-    targetWidth
+    targetWidth,
+    viewport
   } = _ref;
   return {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
-    maxWidth: `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px`,
+    maxWidth: viewport !== 'xs' ? `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px` : '100%',
     flexGrow: targetWidth ? 1 : 0,
-    flexShrink: 1
+    flexShrink: 1,
+    ...(viewport === 'xs' && {
+      width: '100%',
+      flex: 1
+    })
   };
 });
 
@@ -53,12 +58,25 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
   const viewport = useViewport();
   const getTokens = useThemeTokensCallback('NavigationBar', tokens, variant);
-  const getStateTokens = state => getTokens({
-    ...state,
-    viewport
-  });
+  const getStateTokens = state => {
+    if (viewport !== 'xs') {
+      return getTokens({
+        ...state,
+        viewport
+      });
+    }
+    const {
+      width,
+      ...tokensWithoutWidth
+    } = getTokens({
+      ...state,
+      viewport
+    });
+    return tokensWithoutWidth;
+  };
   return /*#__PURE__*/_jsx(ItemContainer, {
     targetWidth: targetWidth,
+    viewport: viewport,
     children: /*#__PURE__*/_jsx(Button, {
       accessibilityRole: accessibilityRole,
       accessibilityState: accessibilityState,
@@ -66,7 +84,10 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       ref: ref,
       tokens: getStateTokens,
       variant: {
-        selected
+        selected,
+        ...(viewport === 'xs' && {
+          width: 'full'
+        })
       },
       href: href,
       LinkRouter: LinkRouter,

package/lib/esm/PriceLockup/PriceLockup.js

@@ -121,6 +121,10 @@ const TypographyContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref13;
   return `${paddingTop || 0}px`;
 });
+const InlineTextWithFootnote = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__InlineTextWithFootnote",
+  componentId: "components-web__sc-1x6duay-11"
+})(["display:inline;position:relative;> *:first-child{display:inline;}> *:last-child{display:inline-block;position:relative;top:-0.5em;font-size:0.75em;margin-left:2px;line-height:0;vertical-align:bottom;}"]);
 const selectFootnoteLinkStyles = _ref14 => {
   let {
     footnoteLinkColor,
@@ -161,6 +165,7 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     onClickFootnote,
     strikeThrough,
     a11yText,
+    linkPosition = 'default',
     tokens: priceLockupTokens,
     variant = {},
     copy = 'en',
@@ -264,16 +269,31 @@ const PriceLockup = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
       })]
     }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
-  const renderFootnoteContent = () => /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(FootnoteContainer, {
+  const renderFootnoteContent = () => {
+    const containerProps = {
       footnoteMarginTop: `${footnoteMarginTop}px`,
-      footnoteGap: `${footnoteGap}px`,
-      children: [/*#__PURE__*/_jsx(BottomTextContainer, {
-        bottomTextMarginTop: `${bottomTextMarginTop}px`,
-        children: renderTypography(bottomText, typographyTokens.bottomText)
-      }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
-    }), footnoteLinks.length > 3 && renderFootnoteLinks()]
-  });
+      footnoteGap: `${footnoteGap}px`
+    };
+    const shouldUseInline = linkPosition === 'inline';
+    const bottomTextContent = shouldUseInline ? /*#__PURE__*/_jsxs(InlineTextWithFootnote, {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        tokens: typographyTokens.bottomText,
+        as: "span",
+        children: bottomText
+      }), renderFootnoteLinks()]
+    }) : renderTypography(bottomText, typographyTokens.bottomText);
+    const showFootnotesInContainer = !shouldUseInline && footnoteLinks.length <= 3;
+    const showFootnotesOutside = !shouldUseInline && footnoteLinks.length > 3;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(FootnoteContainer, {
+        ...containerProps,
+        children: [/*#__PURE__*/_jsx(BottomTextContainer, {
+          bottomTextMarginTop: `${bottomTextMarginTop}px`,
+          children: bottomTextContent
+        }), showFootnotesInContainer && renderFootnoteLinks()]
+      }), showFootnotesOutside && renderFootnoteLinks()]
+    });
+  };
   if (strikeThrough && !a11yText) {
     warn('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
@@ -397,6 +417,13 @@ PriceLockup.propTypes = {
    * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Controls footnote link positioning when bottomText is present
+   *
+   * - 'default': Footnote appears next to the text container (current behavior)
+   * - 'inline': Footnote appears inline at the end of the text
+   */
+  linkPosition: PropTypes.oneOf(['default', 'inline']),
   /* Custom dictionary containing the labels
    */
   dictionary: PropTypes.shape({

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

@@ -37,6 +37,7 @@ const useFullBleedContentProps = fullBleedContent => {
   const {
     align: fullBleedContentAlignProp,
     position: fullBleedContentPositionProp,
+    contentAlign: fullBleedContentChildrenAlignProp,
     ...fullBleedContentProps
   } = fullBleedContent ?? {
     position: 'none'
@@ -45,11 +46,13 @@ const useFullBleedContentProps = fullBleedContent => {
   const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
   const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch');
   const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
+  const fullBleedContentChildrenAlign = useResponsiveProp(fullBleedContentChildrenAlignProp, 'stretch');
   return {
     contentStackAlign,
     contentStackDirection,
     fullBleedContentPosition,
-    fullBleedContentProps
+    fullBleedContentProps,
+    fullBleedContentChildrenAlign
   };
 };
 export default useFullBleedContentProps;

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.12.1",
+    "@telus-uds/components-base": "^3.13.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.10.0",
+    "@telus-uds/system-theme-tokens": "^4.12.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.9.1"
+  "version": "4.10.0"
 }

package/src/Card/Card.jsx

@@ -88,7 +88,8 @@ const Card = React.forwardRef(
       contentStackAlign,
       contentStackDirection,
       fullBleedContentPosition,
-      fullBleedContentProps
+      fullBleedContentProps,
+      fullBleedContentChildrenAlign
     } = useFullBleedContentProps(fullBleedContent)
 
     const { imgCol } = fullBleedContentProps
@@ -179,7 +180,16 @@ const Card = React.forwardRef(
                 wrapperProps={contentWrapperStyleProps}
                 condition={isImageWidthAdjustable}
               >
-                <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
+                <CardContent
+                  tokens={{
+                    ...tokens,
+                    ...(fullBleedContentChildrenAlign && {
+                      alignSelf: fullBleedContentChildrenAlign
+                    })
+                  }}
+                  variant={variant}
+                  withFooter={hasFooter}
+                >
                   {children}
                 </CardContent>
               </ConditionalWrapper>
@@ -214,6 +224,7 @@ const alignValues = ['start', 'end', 'center', 'stretch']
 const PositionedFullBleedContentPropType = PropTypes.shape({
   position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(positionValues)).isRequired,
   align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
+  contentAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(alignValues)),
   // eslint-disable-next-line react/forbid-foreign-prop-types
   ...FullBleedContent.propTypes
 })

package/src/Card/CardContent.jsx

@@ -24,7 +24,8 @@ const CardContentContainer = styled.div(
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
     contentJustifyContent: justifyContent,
-    borderWidth
+    borderWidth,
+    alignSelf
   }) => ({
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
@@ -41,7 +42,8 @@ const CardContentContainer = styled.div(
     alignItems,
     flexGrow,
     flexShrink,
-    justifyContent
+    justifyContent,
+    alignSelf
   })
 )
 
@@ -78,7 +80,11 @@ CardContent.propTypes = {
   /**
    * Card tokens.
    */
-  tokens: getTokensPropType('Card'),
+  tokens: PropTypes.shape({
+    ...getTokensPropType('Card'),
+    alignSelf: PropTypes.string
+  }),
+
   /**
    * Card variant.
    */

package/src/NavigationBar/NavigationItem.jsx

@@ -15,13 +15,17 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const defaultMaxWidth = 192
 
-const ItemContainer = styled.div(({ targetWidth }) => ({
+const ItemContainer = styled.div(({ targetWidth, viewport }) => ({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
-  maxWidth: `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px`,
+  maxWidth: viewport !== 'xs' ? `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px` : '100%',
   flexGrow: targetWidth ? 1 : 0,
-  flexShrink: 1
+  flexShrink: 1,
+  ...(viewport === 'xs' && {
+    width: '100%',
+    flex: 1
+  })
 }))
 
 /**
@@ -51,17 +55,25 @@ const NavigationItem = React.forwardRef(
     const targetWidth = useResponsiveProp({ xs: 288, lg: null })
     const viewport = useViewport()
     const getTokens = useThemeTokensCallback('NavigationBar', tokens, variant)
-    const getStateTokens = (state) => getTokens({ ...state, viewport })
+    const getStateTokens = (state) => {
+      if (viewport !== 'xs') {
+        return getTokens({ ...state, viewport })
+      }
+
+      const { width, ...tokensWithoutWidth } = getTokens({ ...state, viewport })
+
+      return tokensWithoutWidth
+    }
 
     return (
-      <ItemContainer targetWidth={targetWidth}>
+      <ItemContainer targetWidth={targetWidth} viewport={viewport}>
         <Button
           accessibilityRole={accessibilityRole}
           accessibilityState={accessibilityState}
           onPress={handleClick}
           ref={ref}
           tokens={getStateTokens}
-          variant={{ selected }}
+          variant={{ selected, ...(viewport === 'xs' && { width: 'full' }) }}
           href={href}
           LinkRouter={LinkRouter}
           linkRouterProps={linkRouterProps}

package/src/PriceLockup/PriceLockup.jsx

@@ -81,6 +81,24 @@ const TypographyContainer = styled.div`
   display: flex;
   padding-top: ${({ paddingTop }) => `${paddingTop || 0}px`};
 `
+const InlineTextWithFootnote = styled.div`
+  display: inline;
+  position: relative;
+
+  > *:first-child {
+    display: inline;
+  }
+
+  > *:last-child {
+    display: inline-block;
+    position: relative;
+    top: -0.5em;
+    font-size: 0.75em;
+    margin-left: 2px;
+    line-height: 0;
+    vertical-align: bottom;
+  }
+`
 
 const selectFootnoteLinkStyles = ({
   footnoteLinkColor,
@@ -121,6 +139,7 @@ const PriceLockup = React.forwardRef(
       onClickFootnote,
       strikeThrough,
       a11yText,
+      linkPosition = 'default',
       tokens: priceLockupTokens,
       variant = {},
       copy = 'en',
@@ -232,20 +251,40 @@ const PriceLockup = React.forwardRef(
       </>
     )
 
-    const renderFootnoteContent = () => (
-      <>
-        <FootnoteContainer
-          footnoteMarginTop={`${footnoteMarginTop}px`}
-          footnoteGap={`${footnoteGap}px`}
-        >
-          <BottomTextContainer bottomTextMarginTop={`${bottomTextMarginTop}px`}>
-            {renderTypography(bottomText, typographyTokens.bottomText)}
-          </BottomTextContainer>
-          {footnoteLinks.length <= 3 && renderFootnoteLinks()}
-        </FootnoteContainer>
-        {footnoteLinks.length > 3 && renderFootnoteLinks()}
-      </>
-    )
+    const renderFootnoteContent = () => {
+      const containerProps = {
+        footnoteMarginTop: `${footnoteMarginTop}px`,
+        footnoteGap: `${footnoteGap}px`
+      }
+
+      const shouldUseInline = linkPosition === 'inline'
+
+      const bottomTextContent = shouldUseInline ? (
+        <InlineTextWithFootnote>
+          <Typography tokens={typographyTokens.bottomText} as="span">
+            {bottomText}
+          </Typography>
+          {renderFootnoteLinks()}
+        </InlineTextWithFootnote>
+      ) : (
+        renderTypography(bottomText, typographyTokens.bottomText)
+      )
+
+      const showFootnotesInContainer = !shouldUseInline && footnoteLinks.length <= 3
+      const showFootnotesOutside = !shouldUseInline && footnoteLinks.length > 3
+
+      return (
+        <>
+          <FootnoteContainer {...containerProps}>
+            <BottomTextContainer bottomTextMarginTop={`${bottomTextMarginTop}px`}>
+              {bottomTextContent}
+            </BottomTextContainer>
+            {showFootnotesInContainer && renderFootnoteLinks()}
+          </FootnoteContainer>
+          {showFootnotesOutside && renderFootnoteLinks()}
+        </>
+      )
+    }
 
     if (strikeThrough && !a11yText) {
       warn('PriceLockup', 'a11yText must be provided with strikethrough pricing')
@@ -390,6 +429,13 @@ PriceLockup.propTypes = {
    * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Controls footnote link positioning when bottomText is present
+   *
+   * - 'default': Footnote appears next to the text container (current behavior)
+   * - 'inline': Footnote appears inline at the end of the text
+   */
+  linkPosition: PropTypes.oneOf(['default', 'inline']),
   /* Custom dictionary containing the labels
    */
   dictionary: PropTypes.shape({

package/src/shared/FullBleedContent/useFullBleedContentProps.js

@@ -42,6 +42,7 @@ const useFullBleedContentProps = (fullBleedContent) => {
   const {
     align: fullBleedContentAlignProp,
     position: fullBleedContentPositionProp,
+    contentAlign: fullBleedContentChildrenAlignProp,
     ...fullBleedContentProps
   } = fullBleedContent ?? {
     position: 'none'
@@ -52,11 +53,17 @@ const useFullBleedContentProps = (fullBleedContent) => {
   const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch')
   const contentStackAlign = getContentStackAlign(fullBleedContentAlign)
 
+  const fullBleedContentChildrenAlign = useResponsiveProp(
+    fullBleedContentChildrenAlignProp,
+    'stretch'
+  )
+
   return {
     contentStackAlign,
     contentStackDirection,
     fullBleedContentPosition,
-    fullBleedContentProps
+    fullBleedContentProps,
+    fullBleedContentChildrenAlign
   }
 }