@telus-uds/components-base 3.23.0 → 3.24.0

package/CHANGELOG.md

@@ -1,9 +1,20 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 19 Nov 2025 05:51:39 GMT and should not be manually modified.
+This log was last generated on Fri, 12 Dec 2025 05:37:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.24.0
+
+Fri, 12 Dec 2025 05:37:22 GMT
+
+### Minor changes
+
+- `Card`: interactive mode added for FullBleedContent (35577399+JoshHC@users.noreply.github.com)
+- `Shortcuts`: add component (guillermo.peitzner@telus.com)
+- `Listbox & NavigationBar`: add `secondLevel` variant (sergio.ramirez@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.17.0
+
 ## 3.23.0
 
 Wed, 19 Nov 2025 05:51:39 GMT

package/lib/cjs/Card/CardBase.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectStyles = exports.default = void 0;
+exports.selectStyles = exports.fullBleedContentPropTypes = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -15,9 +15,16 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _props = require("../utils/props");
 var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+var _FlexGrid = _interopRequireDefault(require("../FlexGrid/FlexGrid"));
+var _Row = _interopRequireDefault(require("../FlexGrid/Row"));
+var _Col = _interopRequireDefault(require("../FlexGrid/Col"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+const GRID_COLUMNS = 12;
+const isOverlayColor = color => {
+  return color && typeof color === 'string' && color.startsWith('rgba(');
+};
 const setBackgroundImage = _ref => {
   let {
     src,
@@ -31,12 +38,9 @@ const setBackgroundImage = _ref => {
   const borderRadius = cardStyle?.borderRadius || 0;
   const borderWidth = cardStyle?.borderWidth || 0;
   const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth);
-
-  // For contain mode with position and align, use CSS background properties for web
   if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
     const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
     if (_Platform.default.OS === 'web') {
-      // Create background position based on position and align
       let backgroundPosition;
       switch (positionKey) {
         case 'top-start':
@@ -80,7 +84,6 @@ const setBackgroundImage = _ref => {
         children: content
       });
     }
-    // For React Native, apply positioning styles with full dimensions
     const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.containContainer, {
@@ -99,8 +102,6 @@ const setBackgroundImage = _ref => {
       })]
     });
   }
-
-  // Use ImageBackground for all other resize modes and React Native
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
     source: src,
     imageStyle: {
@@ -126,6 +127,10 @@ const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     shadow,
     backgroundGradient,
@@ -133,9 +138,18 @@ const selectStyles = _ref2 => {
     maxHeight,
     overflowY
   } = _ref2;
+  const hasGradient = (gradient || backgroundGradient) && _Platform.default.OS === 'web';
+  let backgroundImageValue = null;
+  if (hasGradient) {
+    const gradientObj = gradient || backgroundGradient;
+    const gradientString = `linear-gradient(${gradientObj.angle}deg, ${gradientObj.stops[0].color}, ${gradientObj.stops[1].color})`;
+    const shouldApplyOverlay = (gradient || backgroundGradient && backgroundColor && backgroundColor !== 'transparent') && isOverlayColor(backgroundColor);
+    backgroundImageValue = shouldApplyOverlay ? `linear-gradient(${backgroundColor}, ${backgroundColor}), ${gradientString}` : gradientString;
+  }
+  const boxShadowColor = isOverlayColor(backgroundColor) ? backgroundColor : 'white';
   return {
     flex,
-    backgroundColor,
+    backgroundColor: hasGradient ? 'transparent' : backgroundColor,
     borderColor,
     borderRadius,
     borderWidth,
@@ -143,16 +157,20 @@ const selectStyles = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
     ...(gradient && _Platform.default.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+      backgroundImage: backgroundImageValue,
       backgroundOrigin: `border-box`,
-      boxShadow: `inset 0 1000px white`,
+      boxShadow: `inset 0 1000px ${boxShadowColor}`,
       border: `${borderWidth}px solid transparent`
     } : {}),
     ...(backgroundGradient && _Platform.default.OS === 'web' ? {
-      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+      backgroundImage: backgroundImageValue
     } : {}),
     ...(_Platform.default.OS === 'web' ? {
       maxHeight,
@@ -172,9 +190,11 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     tokens,
     dataSet,
     backgroundImage,
+    fullBleedContent,
+    cardState,
     ...rest
   } = _ref3;
-  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
+  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens);
   const props = selectProps(rest);
   let content = children;
   const {
@@ -188,9 +208,13 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
   const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
   const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  const {
+    content: fullBleedImageContent,
+    position: fullBleedContentPosition,
+    imgCol
+  } = fullBleedContent || {};
+  const fullBleedPosition = (0, _utils.useResponsiveProp)(fullBleedContentPosition, 'bottom');
   if (backgroundImage && src) {
-    // When there's a background image, separate the padding from the container style
-    // so the image can fill the entire container without padding interference
     const {
       paddingTop,
       paddingBottom,
@@ -198,8 +222,6 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       paddingRight,
       ...containerStyle
     } = cardStyle;
-
-    // Only create padding wrapper if there's actually padding defined
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
     const paddedContent = hasPadding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: {
@@ -227,6 +249,53 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       children: content
     });
   }
+  if (fullBleedContent && fullBleedImageContent) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = cardStyle;
+    const imageColumns = imgCol || {
+      xs: GRID_COLUMNS
+    };
+    const textColumns = {};
+    Object.keys(imageColumns).forEach(breakpoint => {
+      textColumns[breakpoint] = GRID_COLUMNS - (imageColumns[breakpoint] || GRID_COLUMNS);
+    });
+    const imageFirst = fullBleedPosition === 'top' || fullBleedPosition === 'left';
+    const imageColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+      ...imageColumns,
+      style: staticStyles.fullBleedImageCol,
+      children: fullBleedImageContent
+    });
+    const textColContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+      ...textColumns,
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: containerStyle,
+      dataSet: dataSet,
+      ref: ref,
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+          children: imageFirst ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [imageColContent, textColContent]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [textColContent, imageColContent]
+          })
+        })
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: cardStyle,
     dataSet: dataSet,
@@ -236,6 +305,13 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   });
 });
 CardBase.displayName = 'CardBase';
+const fullBleedContentPropTypes = exports.fullBleedContentPropTypes = _propTypes.default.shape({
+  content: _propTypes.default.node.isRequired,
+  alt: _propTypes.default.string,
+  position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
+  align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch'])),
+  imgCol: _propTypes.default.object
+});
 const staticStyles = _StyleSheet.default.create({
   imageBackground: {
     width: '100%',
@@ -257,6 +333,9 @@ const staticStyles = _StyleSheet.default.create({
     position: 'absolute',
     width: '100%',
     height: '100%'
+  },
+  fullBleedImageCol: {
+    padding: 0
   }
 });
 CardBase.propTypes = {
@@ -274,6 +353,7 @@ CardBase.propTypes = {
     resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['bottom', 'left', 'right', 'top'])),
     align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 };
 var _default = exports.default = CardBase;

package/lib/cjs/Card/PressableCardBase.js

@@ -13,11 +13,13 @@ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 var _ViewportProvider = require("../ViewportProvider");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
-var _CardBase = _interopRequireDefault(require("./CardBase"));
+var _CardBase = _interopRequireWildcard(require("./CardBase"));
 var _jsxRuntime = require("react/jsx-runtime");
+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 }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
-const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
+const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'icon', 'iconBackgroundColor', 'iconColor', 'iconSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderRadius', 'inputBorderWidth', 'inputHeight', 'inputShadow', 'inputWidth'];
@@ -40,6 +42,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     hrefAttrs,
     dataSet,
     backgroundImage,
+    fullBleedContent,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -133,10 +136,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
           setFocused(false);
           setPressed(false);
         },
-        style: {
-          ...staticStyles.linkContainer,
-          textDecoration: 'none'
-        },
+        style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         role: accessibilityRole,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
@@ -146,6 +146,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
             hovered
           }),
           backgroundImage: backgroundImage,
+          fullBleedContent: fullBleedContent,
           children: typeof children === 'function' ? children(getCardState({
             pressed,
             focused,
@@ -170,6 +171,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       tokens: getCardTokens(pressableState),
       backgroundImage: backgroundImage,
+      fullBleedContent: fullBleedContent,
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
@@ -183,7 +185,8 @@ const staticStyles = _StyleSheet.default.create({
     flex: 1,
     display: 'flex',
     alignItems: 'stretch',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
+    textDecorationLine: 'none'
   }
 });
 PressableCardBase.displayName = 'PressableCardBase';
@@ -203,6 +206,7 @@ PressableCardBase.propTypes = {
     resizeMode: _propTypes.default.oneOfType([_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']), _propTypes.default.object]),
     position: _propTypes.default.oneOfType([_propTypes.default.oneOf(['bottom', 'left', 'right', 'top']), _propTypes.default.object]),
     align: _propTypes.default.oneOfType([_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']), _propTypes.default.object])
-  })
+  }),
+  fullBleedContent: _CardBase.fullBleedContentPropTypes
 };
 var _default = exports.default = (0, _utils.withLinkRouter)(PressableCardBase);

package/lib/cjs/HorizontalScroll/HorizontalScroll.js

@@ -35,6 +35,7 @@ const HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ScrollButton,
     tokens,
     itemPositions,
+    variant,
     children,
     ...rest
   } = _ref;
@@ -78,8 +79,9 @@ const HorizontalScroll = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     setScrollOffset(x);
   };
   const scrollMax = Math.max(0, contentWidth - containerWidth);
-  const showNextButton = scrollOffset < scrollMax;
-  const showPreviousButton = scrollOffset > 0;
+  const hideNavigationButtons = variant?.hideNavigationButtons || false;
+  const showNextButton = scrollOffset < scrollMax && !hideNavigationButtons;
+  const showPreviousButton = scrollOffset > 0 && !hideNavigationButtons;
   const scrollRef = _react.default.useRef(null);
   const scrollTo = targetX => {
     if (typeof scrollRef.current?.scrollTo === 'function') {
@@ -170,6 +172,7 @@ HorizontalScroll.propTypes = {
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
     allowFunction: true
   }),
+  variant: _utils.variantProp.propType,
   children: _propTypes.default.node
 };
 var _default = exports.default = HorizontalScroll;

package/lib/cjs/Icon/Icon.js

@@ -21,6 +21,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     scalesWithText = false,
     style = {},
+    testID,
     dataSet
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
@@ -44,6 +45,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   };
   const getIconContentForMobile = () => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      testID: testID,
       style: {
         backgroundColor: themeTokens.backgroundColor,
         borderRadius: themeTokens.borderRadius,
@@ -53,6 +55,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     });
   };
   return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    testID: testID,
     ref: ref
     // eslint-disable-next-line react-native/no-inline-styles
     ,

package/lib/cjs/Listbox/GroupControl.js

@@ -13,6 +13,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 var _ListboxContext = require("./ListboxContext");
+var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const styles = _StyleSheet.default.create({
@@ -60,19 +61,23 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     hover,
     focus,
     label,
-    id
+    id,
+    variant = {}
   } = _ref;
   const {
     selectedId,
     setSelectedId
   } = (0, _ListboxContext.useListboxContext)();
-  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {}, {
+  const isSecondLevel = variant?.secondLevel === true;
+  const tokens = (0, _ThemeProvider.useThemeTokens)('Listbox', variant, {}, {
     expanded,
     pressed,
     hover,
     current: selectedId === id && id !== undefined,
-    focus
+    focus,
+    secondLevel: isSecondLevel
   });
+  const displayIcon = isSecondLevel ? tokens.secondLevelParentIcon : tokens.groupIcon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     onPress: () => setSelectedId(id),
     style: [styles.container, selectContainerStyles(tokens)],
@@ -83,8 +88,8 @@ const GroupControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       space: 1,
       direction: "row"
-    }), tokens.groupIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      icon: tokens.groupIcon,
+    }), displayIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: displayIcon,
       tokens: {
         color: tokens.groupColor
       },
@@ -101,6 +106,7 @@ GroupControl.propTypes = {
   pressed: _propTypes.default.bool,
   hover: _propTypes.default.bool,
   focus: _propTypes.default.bool,
-  label: _propTypes.default.string
+  label: _propTypes.default.string,
+  variant: _utils.variantProp.propType
 };
 var _default = exports.default = GroupControl;

package/lib/cjs/Listbox/Listbox.js

@@ -16,6 +16,7 @@ var _ListboxGroup = _interopRequireDefault(require("./ListboxGroup"));
 var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
 var _ListboxContext = require("./ListboxContext");
 var _ListboxOverlay = _interopRequireDefault(require("./ListboxOverlay"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -23,7 +24,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const styles = _StyleSheet.default.create({
   container: {
     padding: 0,
-    margin: 0
+    margin: 0,
+    position: 'relative',
+    overflow: 'visible'
   }
 });
 const selectContainerStyles = tokens => ({
@@ -43,12 +46,15 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     LinkRouter,
     itemRouterProps,
     onClose,
+    copy = 'en',
+    dictionary = _dictionary.default,
     variant,
     tokens,
     testID
   } = _ref;
   const initialOpen = getInitialOpen(items, defaultSelectedId);
   const [selectedId, setSelectedId] = _react.default.useState(defaultSelectedId);
+  const [activeSecondLevelGroup, setActiveSecondLevelGroup] = _react.default.useState(null);
   const listboxTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', tokens, variant);
 
   // We need to keep track of each item's ref in order to be able to
@@ -98,11 +104,14 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return () => {};
   }, [onClose, handleKeydown]);
+  const contextValue = {
+    selectedId,
+    setSelectedId,
+    activeSecondLevelGroup,
+    setActiveSecondLevelGroup
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxContext.ListboxContext.Provider, {
-    value: {
-      selectedId,
-      setSelectedId
-    },
+    value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
       initialOpen: initialOpen,
       maxOpen: 1,
@@ -124,6 +133,9 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             itemRefs.current[index] = currentItemRef;
             return currentItemRef;
           };
+          if (!nestedItems && activeSecondLevelGroup) {
+            return null;
+          }
           return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, {
             ...item,
             expandProps: expandProps,
@@ -132,7 +144,12 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             prevItemRef: itemRefs.current[index - 1] ?? null,
             nextItemRef: itemRefs.current[index + 1] ?? null,
             ref: index === 0 ? firstItemRef : itemRef,
-            key: itemId
+            key: itemId,
+            copy: copy,
+            dictionary: dictionary,
+            variant: variant,
+            tokens: tokens,
+            onClose: onClose
           }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.default, {
             ...item,
             key: itemId,
@@ -141,7 +158,9 @@ const Listbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             itemRouterProps: itemRouterProps,
             prevItemRef: itemRefs.current[index - 1] ?? null,
             nextItemRef: itemRefs.current[index + 1] ?? null,
-            ref: index === 0 ? firstItemRef : itemRef
+            ref: index === 0 ? firstItemRef : itemRef,
+            variant: variant,
+            tokens: tokens
           });
         })
       })
@@ -177,6 +196,21 @@ Listbox.propTypes = {
    * Test ID for testing
    */
   testID: _propTypes.default.string,
+  /**
+   * Select English or French copy
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: _propTypes.default.shape({
+      closeMenu: _propTypes.default.string.isRequired
+    }),
+    fr: _propTypes.default.shape({
+      closeMenu: _propTypes.default.string.isRequired
+    })
+  }),
   /**
    * Listbox variant
    */