@telus-uds/components-base 3.9.0 → 3.11.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 10 Jun 2025 20:18:03 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Jun 2025 23:47:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.11.0
+
+Thu, 26 Jun 2025 23:47:29 GMT
+
+### Minor changes
+
+- `Carousel`: add dots style variant to progressBarVariant (guillermo.peitzner@telus.com)
+- `ButtonGroup`: equalWidth variant added (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v4.9.0
+
 ## 3.9.0
 
-Tue, 10 Jun 2025 20:18:03 GMT
+Tue, 10 Jun 2025 20:25:05 GMT
 
 ### Minor changes
 

package/lib/cjs/Autocomplete/Autocomplete.js

@@ -408,7 +408,10 @@ const dictionaryContentShape = _propTypes.default.shape({
 Autocomplete.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * Can be used to provide a function that renders a custom input:
+   * Can be used to provide a function that renders a custom input.
+   *
+   * @example
+   * ```jsx
    * <Autocomplete items={items} value={currentValue}>
    *   {({ inputId, inputRef, onChange, onKeyPress, readOnly, tokens, value }) => (
    *     <Search
@@ -422,6 +425,7 @@ Autocomplete.propTypes = {
    *     />
    *   )}
    * </Autocomplete>
+   * ```
    */
   children: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Autocomplete'),

package/lib/cjs/Button/ButtonBase.js

@@ -24,7 +24,23 @@ const getOuterBorderOffset = _ref => {
   } = _ref;
   return outerBorderGap + outerBorderWidth;
 };
-const selectOuterContainerStyles = _ref2 => {
+const selectFlexAndWidthStyles = _ref2 => {
+  let {
+    width,
+    flex
+  } = _ref2;
+  const styles = {};
+  if (width !== undefined && width !== null) {
+    styles.width = width;
+  }
+  if (width === '100%') {
+    styles.flex = 1;
+  } else if (flex !== undefined && flex !== null) {
+    styles.flex = flex;
+  }
+  return styles;
+};
+const selectOuterContainerStyles = _ref3 => {
   let {
     opacity,
     outerBorderColor,
@@ -32,7 +48,7 @@ const selectOuterContainerStyles = _ref2 => {
     outerBorderGap,
     borderRadius,
     outerBackgroundColor
-  } = _ref2;
+  } = _ref3;
   return {
     ..._Platform.default.select({
       native: {
@@ -49,13 +65,13 @@ const selectOuterContainerStyles = _ref2 => {
     })
   };
 };
-const selectOuterSizeStyles = _ref3 => {
+const selectOuterSizeStyles = _ref4 => {
   let {
     outerBorderGap,
     outerBorderWidth,
     width,
     height
-  } = _ref3;
+  } = _ref4;
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({
@@ -100,7 +116,7 @@ const selectOuterSizeStyles = _ref3 => {
   sizeStyles.height = height;
   return sizeStyles;
 };
-const selectInnerContainerStyles = _ref4 => {
+const selectInnerContainerStyles = _ref5 => {
   let {
     backgroundColor,
     paddingLeft,
@@ -114,14 +130,14 @@ const selectInnerContainerStyles = _ref4 => {
     borderTopWidth,
     borderBottomWidth,
     minWidth
-  } = _ref4;
+  } = _ref5;
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = _ref5 => {
+  const offsetBorder = _ref6 => {
     let {
       value,
       borderSize = borderWidth
-    } = _ref5;
+    } = _ref6;
     return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
   };
   return {
@@ -146,7 +162,7 @@ const selectInnerContainerStyles = _ref4 => {
     ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
-const selectBorderStyles = _ref6 => {
+const selectBorderStyles = _ref7 => {
   let {
     borderColor,
     borderWidth,
@@ -155,7 +171,7 @@ const selectBorderStyles = _ref6 => {
     borderRightWidth,
     borderTopWidth,
     borderBottomWidth
-  } = _ref6;
+  } = _ref7;
   return {
     borderColor,
     borderWidth,
@@ -166,7 +182,7 @@ const selectBorderStyles = _ref6 => {
     borderBottomWidth
   };
 };
-const selectTextStyles = (_ref7, themeOptions) => {
+const selectTextStyles = (_ref8, themeOptions) => {
   let {
     fontSize,
     color,
@@ -176,7 +192,7 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textAlign,
     textLine,
     textLineStyle
-  } = _ref7;
+  } = _ref8;
   return (0, _ThemeProvider.applyTextStyles)({
     fontSize,
     color,
@@ -189,10 +205,10 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textDecorationStyle: textLineStyle
   });
 };
-const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
+const selectWebOnlyStyles = (inactive, themeTokens, _ref9) => {
   let {
     accessibilityRole
-  } = _ref8;
+  } = _ref9;
   return _Platform.default.select({
     web: {
       // if it would overflow the container, wraps instead
@@ -205,27 +221,27 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     default: {}
   });
 };
-const selectButtonStyles = _ref9 => {
+const selectButtonStyles = _ref10 => {
   let {
     textAlign
-  } = _ref9;
+  } = _ref10;
   return {
     flexDirection: 'row',
     justifyContent: textAlign
   };
 };
-const selectItemIconTokens = _ref10 => {
+const selectItemIconTokens = _ref11 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref10;
+  } = _ref11;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
+const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref12, ref) => {
   let {
     id,
     href,
@@ -240,7 +256,7 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref11;
+  } = _ref12;
   const {
     onPress,
     ...rest
@@ -254,7 +270,9 @@ const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
   const systemProps = selectProps(rest);
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
+    // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
+    const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
   const {
     themeOptions

package/lib/cjs/Button/ButtonGroup.js

@@ -19,6 +19,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+const getStackWrapTokens = variant => {
+  return _Platform.default.select({
+    web: {
+      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
+      width: variant?.width === 'equal' ? '100%' : 'auto'
+    },
+    default: {}
+  });
+};
 const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -51,7 +60,12 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const themeStackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const variantStackTokens = getStackWrapTokens(variant);
+  const stackTokens = {
+    ...themeStackTokens,
+    ...variantStackTokens
+  };
   const {
     direction,
     space,
@@ -61,7 +75,15 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     padding,
     gap
   } = themeTokens;
-  const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
+  const themeButtonTokensCallback = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
+  const getButtonTokens = state => {
+    const themeButtonTokens = themeButtonTokensCallback(state);
+    return {
+      ...themeButtonTokens,
+      width: variant?.width === 'equal' ? '100%' : 'auto',
+      flex: variant?.width === 'equal' ? 1 : undefined
+    };
+  };
   const {
     currentValues,
     toggleOneValue
@@ -104,7 +126,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       padding,
       ...(_Platform.default.OS === 'web' ? {
         gap,
-        width: 'fit-content'
+        width: variant?.width === 'equal' ? '100%' : 'fit-content'
       } : {
         alignSelf: 'flex-start'
       })

package/lib/cjs/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -44,7 +44,8 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
   };
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
-  if (enableDisplayMultipleItemsPerSlide) {
+  const showProgressBar = enableDisplayMultipleItemsPerSlide && progressBarVariant?.style !== 'dots';
+  if (showProgressBar) {
     if (totalItems === 1) {
       return null;
     }
@@ -71,6 +72,9 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
       })]
     });
   }
+  if (enableDisplayMultipleItemsPerSlide && totalItems === 1) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
     direction: "row",
     tokens: stackViewTokens,
@@ -80,7 +84,7 @@ const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =
       steps: steps,
       copy: {
         stepLabel: getCopyWithPlaceholders('stepLabel'),
-        stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+        stepTrackerLabel: enableDisplayMultipleItemsPerSlide ? '' : getCopyWithPlaceholders('stepTrackerLabel')
       },
       tokens: stepTrackerTokens,
       variant: stepTrackerVariant

package/lib/esm/Autocomplete/Autocomplete.js

@@ -401,7 +401,10 @@ const dictionaryContentShape = PropTypes.shape({
 Autocomplete.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * Can be used to provide a function that renders a custom input:
+   * Can be used to provide a function that renders a custom input.
+   *
+   * @example
+   * ```jsx
    * <Autocomplete items={items} value={currentValue}>
    *   {({ inputId, inputRef, onChange, onKeyPress, readOnly, tokens, value }) => (
    *     <Search
@@ -415,6 +418,7 @@ Autocomplete.propTypes = {
    *     />
    *   )}
    * </Autocomplete>
+   * ```
    */
   children: PropTypes.func,
   tokens: getTokensPropType('Autocomplete'),

package/lib/esm/Button/ButtonBase.js

@@ -17,7 +17,23 @@ const getOuterBorderOffset = _ref => {
   } = _ref;
   return outerBorderGap + outerBorderWidth;
 };
-const selectOuterContainerStyles = _ref2 => {
+const selectFlexAndWidthStyles = _ref2 => {
+  let {
+    width,
+    flex
+  } = _ref2;
+  const styles = {};
+  if (width !== undefined && width !== null) {
+    styles.width = width;
+  }
+  if (width === '100%') {
+    styles.flex = 1;
+  } else if (flex !== undefined && flex !== null) {
+    styles.flex = flex;
+  }
+  return styles;
+};
+const selectOuterContainerStyles = _ref3 => {
   let {
     opacity,
     outerBorderColor,
@@ -25,7 +41,7 @@ const selectOuterContainerStyles = _ref2 => {
     outerBorderGap,
     borderRadius,
     outerBackgroundColor
-  } = _ref2;
+  } = _ref3;
   return {
     ...Platform.select({
       native: {
@@ -42,13 +58,13 @@ const selectOuterContainerStyles = _ref2 => {
     })
   };
 };
-const selectOuterSizeStyles = _ref3 => {
+const selectOuterSizeStyles = _ref4 => {
   let {
     outerBorderGap,
     outerBorderWidth,
     width,
     height
-  } = _ref3;
+  } = _ref4;
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({
@@ -93,7 +109,7 @@ const selectOuterSizeStyles = _ref3 => {
   sizeStyles.height = height;
   return sizeStyles;
 };
-const selectInnerContainerStyles = _ref4 => {
+const selectInnerContainerStyles = _ref5 => {
   let {
     backgroundColor,
     paddingLeft,
@@ -107,14 +123,14 @@ const selectInnerContainerStyles = _ref4 => {
     borderTopWidth,
     borderBottomWidth,
     minWidth
-  } = _ref4;
+  } = _ref5;
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = _ref5 => {
+  const offsetBorder = _ref6 => {
     let {
       value,
       borderSize = borderWidth
-    } = _ref5;
+    } = _ref6;
     return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
   };
   return {
@@ -139,7 +155,7 @@ const selectInnerContainerStyles = _ref4 => {
     ...applyShadowToken(shadow)
   };
 };
-const selectBorderStyles = _ref6 => {
+const selectBorderStyles = _ref7 => {
   let {
     borderColor,
     borderWidth,
@@ -148,7 +164,7 @@ const selectBorderStyles = _ref6 => {
     borderRightWidth,
     borderTopWidth,
     borderBottomWidth
-  } = _ref6;
+  } = _ref7;
   return {
     borderColor,
     borderWidth,
@@ -159,7 +175,7 @@ const selectBorderStyles = _ref6 => {
     borderBottomWidth
   };
 };
-const selectTextStyles = (_ref7, themeOptions) => {
+const selectTextStyles = (_ref8, themeOptions) => {
   let {
     fontSize,
     color,
@@ -169,7 +185,7 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textAlign,
     textLine,
     textLineStyle
-  } = _ref7;
+  } = _ref8;
   return applyTextStyles({
     fontSize,
     color,
@@ -182,10 +198,10 @@ const selectTextStyles = (_ref7, themeOptions) => {
     textDecorationStyle: textLineStyle
   });
 };
-const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
+const selectWebOnlyStyles = (inactive, themeTokens, _ref9) => {
   let {
     accessibilityRole
-  } = _ref8;
+  } = _ref9;
   return Platform.select({
     web: {
       // if it would overflow the container, wraps instead
@@ -198,27 +214,27 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     default: {}
   });
 };
-const selectButtonStyles = _ref9 => {
+const selectButtonStyles = _ref10 => {
   let {
     textAlign
-  } = _ref9;
+  } = _ref10;
   return {
     flexDirection: 'row',
     justifyContent: textAlign
   };
 };
-const selectItemIconTokens = _ref10 => {
+const selectItemIconTokens = _ref11 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref10;
+  } = _ref11;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+const ButtonBase = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     id,
     href,
@@ -233,7 +249,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref11;
+  } = _ref12;
   const {
     onPress,
     ...rest
@@ -247,7 +263,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   const systemProps = selectProps(rest);
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
+    // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
+    const flexAndWidthStyles = themeTokens.width === '100%' && themeTokens.flex === 1 ? selectFlexAndWidthStyles(themeTokens) : {};
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []), selectOuterSizeStyles(themeTokens)];
   };
   const {
     themeOptions

package/lib/esm/Button/ButtonGroup.js

@@ -12,6 +12,15 @@ import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
+const getStackWrapTokens = variant => {
+  return Platform.select({
+    web: {
+      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
+      width: variant?.width === 'equal' ? '100%' : 'auto'
+    },
+    default: {}
+  });
+};
 const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -44,7 +53,12 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, {
     viewport
   });
-  const stackTokens = selectTokens('StackView', themeTokens);
+  const themeStackTokens = selectTokens('StackView', themeTokens);
+  const variantStackTokens = getStackWrapTokens(variant);
+  const stackTokens = {
+    ...themeStackTokens,
+    ...variantStackTokens
+  };
   const {
     direction,
     space,
@@ -54,7 +68,15 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     padding,
     gap
   } = themeTokens;
-  const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant);
+  const themeButtonTokensCallback = useThemeTokensCallback('ButtonGroupItem', tokens, variant);
+  const getButtonTokens = state => {
+    const themeButtonTokens = themeButtonTokensCallback(state);
+    return {
+      ...themeButtonTokens,
+      width: variant?.width === 'equal' ? '100%' : 'auto',
+      flex: variant?.width === 'equal' ? 1 : undefined
+    };
+  };
   const {
     currentValues,
     toggleOneValue
@@ -97,7 +119,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       padding,
       ...(Platform.OS === 'web' ? {
         gap,
-        width: 'fit-content'
+        width: variant?.width === 'equal' ? '100%' : 'fit-content'
       } : {
         alignSelf: 'flex-start'
       })

package/lib/esm/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -37,7 +37,8 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
   };
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
-  if (enableDisplayMultipleItemsPerSlide) {
+  const showProgressBar = enableDisplayMultipleItemsPerSlide && progressBarVariant?.style !== 'dots';
+  if (showProgressBar) {
     if (totalItems === 1) {
       return null;
     }
@@ -64,6 +65,9 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       })]
     });
   }
+  if (enableDisplayMultipleItemsPerSlide && totalItems === 1) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(StackView, {
     direction: "row",
     tokens: stackViewTokens,
@@ -73,7 +77,7 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       steps: steps,
       copy: {
         stepLabel: getCopyWithPlaceholders('stepLabel'),
-        stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+        stepTrackerLabel: enableDisplayMultipleItemsPerSlide ? '' : getCopyWithPlaceholders('stepTrackerLabel')
       },
       tokens: stepTrackerTokens,
       variant: stepTrackerVariant

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.7.0",
+    "@telus-uds/system-theme-tokens": "^4.9.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.9.0",
+  "version": "3.11.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.7.0",
+    "@telus-uds/system-theme-tokens": "^4.9.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.9.0",
+  "version": "3.11.0",
   "types": "types/index.d.ts"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -423,7 +423,10 @@ const dictionaryContentShape = PropTypes.shape({
 Autocomplete.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * Can be used to provide a function that renders a custom input:
+   * Can be used to provide a function that renders a custom input.
+   *
+   * @example
+   * ```jsx
    * <Autocomplete items={items} value={currentValue}>
    *   {({ inputId, inputRef, onChange, onKeyPress, readOnly, tokens, value }) => (
    *     <Search
@@ -437,6 +440,7 @@ Autocomplete.propTypes = {
    *     />
    *   )}
    * </Autocomplete>
+   * ```
    */
   children: PropTypes.func,
   tokens: getTokensPropType('Autocomplete'),

package/src/Button/ButtonBase.jsx

@@ -31,6 +31,22 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
+const selectFlexAndWidthStyles = ({ width, flex }) => {
+  const styles = {}
+
+  if (width !== undefined && width !== null) {
+    styles.width = width
+  }
+
+  if (width === '100%') {
+    styles.flex = 1
+  } else if (flex !== undefined && flex !== null) {
+    styles.flex = flex
+  }
+
+  return styles
+}
+
 const selectOuterContainerStyles = ({
   opacity,
   outerBorderColor,
@@ -214,10 +230,17 @@ const ButtonBase = React.forwardRef(
 
     const getPressableStyle = (pressableState) => {
       const themeTokens = resolveButtonTokens(pressableState)
+      // Only apply flex and width styles when they are explicitly set (e.g., from ButtonGroup with width: 'equal') to not to affect other use cases
+      const flexAndWidthStyles =
+        themeTokens.width === '100%' && themeTokens.flex === 1
+          ? selectFlexAndWidthStyles(themeTokens)
+          : {}
+
       return [
         staticStyles.row,
         selectWebOnlyStyles(inactive, themeTokens, systemProps),
         selectOuterContainerStyles(themeTokens),
+        ...(Object.keys(flexAndWidthStyles).length > 0 ? [flexAndWidthStyles] : []),
         selectOuterSizeStyles(themeTokens)
       ]
     }

package/src/Button/ButtonGroup.jsx

@@ -30,6 +30,16 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
+const getStackWrapTokens = (variant) => {
+  return Platform.select({
+    web: {
+      justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start',
+      width: variant?.width === 'equal' ? '100%' : 'auto'
+    },
+    default: {}
+  })
+}
+
 const ButtonGroup = React.forwardRef(
   (
     {
@@ -62,11 +72,25 @@ const ButtonGroup = React.forwardRef(
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
-    const stackTokens = selectTokens('StackView', themeTokens)
+    const themeStackTokens = selectTokens('StackView', themeTokens)
+    const variantStackTokens = getStackWrapTokens(variant)
+    const stackTokens = {
+      ...themeStackTokens,
+      ...variantStackTokens
+    }
     const { direction, space, fieldSpace, borderRadius, backgroundColor, padding, gap } =
       themeTokens
 
-    const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
+    const themeButtonTokensCallback = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
+
+    const getButtonTokens = (state) => {
+      const themeButtonTokens = themeButtonTokensCallback(state)
+      return {
+        ...themeButtonTokens,
+        width: variant?.width === 'equal' ? '100%' : 'auto',
+        flex: variant?.width === 'equal' ? 1 : undefined
+      }
+    }
 
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       initialValues,
@@ -110,7 +134,9 @@ const ButtonGroup = React.forwardRef(
           borderRadius,
           backgroundColor,
           padding,
-          ...(Platform.OS === 'web' ? { gap, width: 'fit-content' } : { alignSelf: 'flex-start' })
+          ...(Platform.OS === 'web'
+            ? { gap, width: variant?.width === 'equal' ? '100%' : 'fit-content' }
+            : { alignSelf: 'flex-start' })
         }}
         {...selectProps(rest)}
       >

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -32,7 +32,10 @@ const CarouselStepTracker = React.forwardRef(
 
     const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
 
-    if (enableDisplayMultipleItemsPerSlide) {
+    const showProgressBar =
+      enableDisplayMultipleItemsPerSlide && progressBarVariant?.style !== 'dots'
+
+    if (showProgressBar) {
       if (totalItems === 1) {
         return null
       }
@@ -56,6 +59,9 @@ const CarouselStepTracker = React.forwardRef(
         </>
       )
     }
+    if (enableDisplayMultipleItemsPerSlide && totalItems === 1) {
+      return null
+    }
     return (
       <StackView direction="row" tokens={stackViewTokens} ref={ref}>
         <StepTracker
@@ -63,7 +69,9 @@ const CarouselStepTracker = React.forwardRef(
           steps={steps}
           copy={{
             stepLabel: getCopyWithPlaceholders('stepLabel'),
-            stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+            stepTrackerLabel: enableDisplayMultipleItemsPerSlide
+              ? ''
+              : getCopyWithPlaceholders('stepTrackerLabel')
           }}
           tokens={stepTrackerTokens}
           variant={stepTrackerVariant}