@telus-uds/components-base 3.30.0 → 3.32.0

package/CHANGELOG.md

@@ -1,9 +1,39 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 16 Apr 2026 21:04:33 GMT and should not be manually modified.
+This log was last generated on Fri, 29 May 2026 18:55:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.32.0
+
+Fri, 29 May 2026 18:55:39 GMT
+
+### Minor changes
+
+- `ColourToggle`: Add crossedOut variant (david.melara1@telus.com)
+- `Card`: Add testID to CardBase and its subcomponents (david.melara1@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.22.0
+
+### Patches
+
+- `Validator`: Fix guard skipping code reset on empty string value prop (david.melara1@telus.com)
+- `ButtonGroup`: Fixed a bug where it wasn't displaying correctly for the `responsive` width variant on web-mobile, Android, and iOS (kevin.ruiz@telus.com)
+- `Card`: preserve `style` gradient border and custom `backgroundColor` tokens when `backgroundImage` is set (josue.higueroscalderon@telus.com)
+
+## 3.31.0
+
+Fri, 22 May 2026 05:09:10 GMT
+
+### Minor changes
+
+- `Autocomplete`: Add scroll to overlay in mobile (david.melara1@telus.com)
+
+### Patches
+
+- `MultiSelectFilter`: position issues fixed in MFE (josue.higueroscalderon@telus.com)
+- `TextInput`: Fix `onChangeText` returning `undefined` instead of an empty string when `isNumeric` is set and no text is provided (david.melara1@telus.com)
+- `Autocomplete`: inside modal story fixed to show the close button properly (josue.higueroscalderon@telus.com)
+
 ## 3.30.0
 
 Thu, 16 Apr 2026 21:04:33 GMT

package/lib/cjs/Autocomplete/Autocomplete.js

@@ -126,6 +126,7 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     value,
     helpText = '',
     loadingLabel,
+    dropdownPosition = 'bottom',
     tokens,
     ...rest
   } = _ref2;
@@ -181,6 +182,13 @@ const Autocomplete = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     isShown: isExpanded || hintExpansionEnabled,
     offsets: {
       vertical: _Platform.default.OS !== 'web' && (hint || inputLabel) ? 28 : 4
+    },
+    align: dropdownPosition === 'top' ? {
+      center: 'center',
+      bottom: 'top'
+    } : {
+      center: 'center',
+      top: 'bottom'
     }
   });
   const targetRef = _react.default.useRef(null);
@@ -533,6 +541,10 @@ Autocomplete.propTypes = {
   /**
    * Input value for controlled usage
    */
-  value: _propTypes.default.string
+  value: _propTypes.default.string,
+  /**
+   * Controls whether the dropdown renders above or below the input. Defaults to 'bottom'.
+   */
+  dropdownPosition: _propTypes.default.oneOf(['top', 'bottom'])
 };
 var _default = exports.default = Autocomplete;

package/lib/cjs/Autocomplete/constants.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.MIN_LISTBOX_WIDTH = exports.INPUT_LEFT_PADDING = exports.DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MAX_SUGGESTIONS = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = void 0;
 const DEFAULT_MIN_TO_SUGGESTION = exports.DEFAULT_MIN_TO_SUGGESTION = 1;
 const DEFAULT_MAX_SUGGESTIONS = exports.DEFAULT_MAX_SUGGESTIONS = 5;
-const DEFAULT_MAX_DROPDOWN_HEIGHT = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = 336; // Approximately 7 items (48px each)
+const DEFAULT_MAX_DROPDOWN_HEIGHT = exports.DEFAULT_MAX_DROPDOWN_HEIGHT = 500;
 const INPUT_LEFT_PADDING = exports.INPUT_LEFT_PADDING = 16;
 const MIN_LISTBOX_WIDTH = exports.MIN_LISTBOX_WIDTH = 288;

package/lib/cjs/Button/ButtonGroup.js

@@ -21,6 +21,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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 EQUAL_WIDTH = 'equal';
+const RESPONSIVE_WIDTH = 'responsive';
 const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant,
@@ -65,31 +67,90 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const isMobileNonContained = _Platform.default.OS !== 'web' && (!variant || variant?.style !== 'contained');
   const themeButtonTokensCallback = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
   const gapValue = (0, _utils.useSpacingScale)(gap || space);
+  const isWeb = _Platform.default.OS === 'web';
+  const buttonWidthVariant = variant?.width;
   const getButtonTokens = (0, _react.useCallback)(state => {
     const themeButtonTokens = themeButtonTokensCallback(state);
     const shouldUseTransparentBackground = isMobileNonContained && !state.selected && !state.pressed && !state.hover && !state.focus;
+    let widthStyle;
+    switch (buttonWidthVariant) {
+      case EQUAL_WIDTH:
+        widthStyle = staticStyles.equalWidth;
+        break;
+      case RESPONSIVE_WIDTH:
+        widthStyle = staticStyles.responsiveWidth;
+        break;
+      // no default
+    }
     return {
       ...themeButtonTokens,
-      ...(variant?.width === 'equal' && staticStyles.equalWidth),
+      ...widthStyle,
       ...(shouldUseTransparentBackground && {
         backgroundColor: 'transparent'
       }),
       alignSelf: themeButtonTokens.width ? 'flex-start' : 'center'
     };
-  }, [themeButtonTokensCallback, isMobileNonContained, variant?.width]);
-  const fieldsetStyles = (0, _react.useMemo)(() => ({
-    ...staticStyles.fieldsetBase,
-    borderRadius,
-    backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
-    padding,
-    width: variant?.width === 'equal' ? '100%' : 'auto'
-  }), [borderRadius, backgroundColor, padding, variant?.width, isMobileNonContained]);
-  const viewStyles = (0, _react.useMemo)(() => ({
-    ...staticStyles.viewBase,
-    flexDirection: direction === 'column' ? 'column' : 'row',
-    gap: gapValue || 0,
-    justifyContent: variant?.width === 'equal' ? 'space-evenly' : 'flex-start'
-  }), [direction, gapValue, variant?.width]);
+  }, [themeButtonTokensCallback, isMobileNonContained, buttonWidthVariant]);
+  const fieldsetStyles = (0, _react.useMemo)(() => {
+    let fieldSetBase;
+    switch (buttonWidthVariant) {
+      case EQUAL_WIDTH:
+      case RESPONSIVE_WIDTH:
+        fieldSetBase = staticStyles.fieldSetResponsive;
+        break;
+      default:
+        fieldSetBase = staticStyles.fieldsetBase;
+        break;
+    }
+    return {
+      ...fieldSetBase,
+      borderRadius,
+      backgroundColor: isMobileNonContained ? 'transparent' : backgroundColor || 'transparent',
+      padding
+    };
+  }, [borderRadius, backgroundColor, padding, isMobileNonContained, buttonWidthVariant]);
+  const buttonsContainerStyles = (0, _react.useMemo)(() => {
+    let flexWrap;
+    if (isWeb) {
+      flexWrap = 'wrap';
+    } else {
+      switch (buttonWidthVariant) {
+        case EQUAL_WIDTH:
+        case RESPONSIVE_WIDTH:
+          flexWrap = 'nowrap';
+          break;
+        default:
+          flexWrap = 'wrap';
+          break;
+      }
+    }
+    let justifyContent;
+    switch (buttonWidthVariant) {
+      case EQUAL_WIDTH:
+        justifyContent = 'space-evenly';
+        break;
+      default:
+        justifyContent = 'flex-start';
+        break;
+    }
+    let viewBaseStyle;
+    switch (buttonWidthVariant) {
+      case EQUAL_WIDTH:
+      case RESPONSIVE_WIDTH:
+        viewBaseStyle = {};
+        break;
+      default:
+        viewBaseStyle = staticStyles.viewBase;
+        break;
+    }
+    return {
+      ...viewBaseStyle,
+      flexWrap,
+      flexDirection: direction === 'column' ? 'column' : 'row',
+      gap: gapValue || 0,
+      justifyContent
+    };
+  }, [direction, gapValue, buttonWidthVariant, isWeb]);
   const {
     currentValues,
     toggleOneValue
@@ -111,7 +172,7 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }
 
   // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
-  const innerRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
+  const buttonsWrapperRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
     ...systemProps,
     ref: ref,
@@ -129,8 +190,8 @@ const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style: fieldsetStyles,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      accessibilityRole: innerRole,
-      style: viewStyles,
+      accessibilityRole: buttonsWrapperRole,
+      style: buttonsContainerStyles,
       children: items.map((_ref2, index) => {
         let {
           label,
@@ -298,17 +359,24 @@ ButtonGroup.propTypes = {
   copy: _propTypes.default.oneOf(['en', 'fr'])
 };
 const staticStyles = _StyleSheet.default.create({
+  equalWidth: {
+    width: '100%',
+    flex: 1
+  },
+  responsiveWidth: {
+    width: 'auto'
+  },
   fieldsetBase: {
     alignSelf: 'flex-start',
-    display: 'inline'
+    display: 'inline',
+    width: 'auto'
+  },
+  fieldSetResponsive: {
+    width: '100%'
   },
   viewBase: {
     flexWrap: 'wrap',
     alignItems: 'center'
-  },
-  equalWidth: {
-    width: '100%',
-    flex: 1
   }
 });
 var _default = exports.default = ButtonGroup;

package/lib/cjs/Card/CardBase.js

@@ -22,9 +22,7 @@ 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 isOverlayColor = color => color && typeof color === 'string' && color.startsWith('rgba(');
 const setBackgroundImage = _ref => {
   let {
     src,
@@ -33,7 +31,8 @@ const setBackgroundImage = _ref => {
     backgroundImagePosition,
     backgroundImageAlign,
     content,
-    cardStyle
+    cardStyle,
+    testID
   } = _ref;
   const borderRadius = cardStyle?.borderRadius || 0;
   const borderWidth = cardStyle?.borderWidth || 0;
@@ -93,6 +92,7 @@ const setBackgroundImage = _ref => {
         style: [staticStyles.imageBackground, backgroundImageStyle],
         role: "img",
         "aria-label": alt,
+        testID: testID,
         children: content
       });
     }
@@ -107,7 +107,8 @@ const setBackgroundImage = _ref => {
         style: [staticStyles.containImage, positionStyles],
         accessible: true,
         accessibilityLabel: alt,
-        accessibilityIgnoresInvertColors: true
+        accessibilityIgnoresInvertColors: true,
+        testID: testID
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: staticStyles.contentOverlay,
         children: content
@@ -123,6 +124,7 @@ const setBackgroundImage = _ref => {
     style: staticStyles.imageBackground,
     accessible: true,
     accessibilityLabel: alt,
+    testID: testID,
     children: content
   });
 };
@@ -131,22 +133,13 @@ const selectPaddedContentStyles = _ref2 => {
     paddingTop,
     paddingBottom,
     paddingLeft,
-    paddingRight,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    hasInteractiveBorder
+    paddingRight
   } = _ref2;
   return {
     paddingTop,
     paddingBottom,
     paddingLeft,
-    paddingRight,
-    ...(hasInteractiveBorder ? {
-      borderWidth,
-      borderColor,
-      borderRadius
-    } : {})
+    paddingRight
   };
 };
 const selectInteractiveOverlayStyles = _ref3 => {
@@ -165,12 +158,31 @@ const selectInteractiveOverlayStyles = _ref3 => {
     backgroundColor,
     borderRadius: adjustedBorderRadius,
     pointerEvents: 'none',
-    zIndex: 1
+    zIndex: 3
+  };
+};
+const selectOuterContainerStyles = _ref4 => {
+  let {
+    containerStyle,
+    backgroundColor,
+    borderRadius,
+    borderColor,
+    borderWidth,
+    hasGradientToken
+  } = _ref4;
+  return {
+    ...containerStyle,
+    backgroundColor,
+    borderRadius,
+    ...(hasGradientToken ? {} : {
+      borderColor,
+      borderWidth
+    })
   };
 };
 
 // Ensure explicit selection of tokens
-const selectStyles = _ref4 => {
+const selectStyles = function (_ref5) {
   let {
     flex,
     backgroundColor,
@@ -191,7 +203,10 @@ const selectStyles = _ref4 => {
     gradient,
     maxHeight,
     overflowY
-  } = _ref4;
+  } = _ref5;
+  let {
+    hasBgImage = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const hasGradient = (gradient || backgroundGradient) && _Platform.default.OS === 'web';
   let backgroundImageValue = null;
   if (hasGradient) {
@@ -220,7 +235,11 @@ const selectStyles = _ref4 => {
     ...(gradient && _Platform.default.OS === 'web' ? {
       backgroundImage: backgroundImageValue,
       backgroundOrigin: `border-box`,
-      boxShadow: `inset 0 1000px ${boxShadowColor}`,
+      // bgImage child fills the content-box and replaces what the inset shadow
+      // used to cover, so we omit it to avoid hiding the image.
+      ...(hasBgImage ? {} : {
+        boxShadow: `inset 0 1000px ${boxShadowColor}`
+      }),
       border: `${borderWidth}px solid transparent`
     } : {}),
     ...(backgroundGradient && _Platform.default.OS === 'web' ? {
@@ -238,7 +257,7 @@ const selectStyles = _ref4 => {
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 exports.selectStyles = selectStyles;
-const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
@@ -246,15 +265,14 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     backgroundImage,
     fullBleedContent,
     cardState,
+    testID,
     ...rest
-  } = _ref5;
+  } = _ref6;
   const resolvedTokens = typeof tokens === 'function' ? tokens(cardState) : tokens;
-  const tokensToUse = backgroundImage && backgroundImage.src ? {
-    ...resolvedTokens,
-    gradient: undefined,
-    backgroundGradient: undefined
-  } : resolvedTokens;
-  const cardStyle = selectStyles(tokensToUse);
+  const hasBgImage = Boolean(backgroundImage && backgroundImage.src);
+  const cardStyle = selectStyles(resolvedTokens, {
+    hasBgImage
+  });
   const props = selectProps(rest);
   let content = children;
   const {
@@ -287,31 +305,29 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       ...containerStyle
     } = cardStyle;
     const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
-    const hasInteractiveBorder = borderWidth && borderWidth > 0;
     const hasInteractiveOverlay = isOverlayColor(backgroundColor);
-    const paddedContent = hasPadding || hasInteractiveBorder ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    const outerBackgroundColor = hasInteractiveOverlay ? undefined : backgroundColor;
+    const hasGradientToken = Boolean(resolvedTokens.gradient) && _Platform.default.OS === 'web';
+    const paddedContent = hasPadding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectPaddedContentStyles({
         paddingTop,
         paddingBottom,
         paddingLeft,
-        paddingRight,
-        borderWidth,
-        borderColor,
-        borderRadius,
-        hasInteractiveBorder
+        paddingRight
       }),
       children: children
     }) : children;
     const contentWithOverlay = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [hasInteractiveOverlay && _Platform.default.OS === 'web' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.contentOverlay,
+        children: paddedContent
+      }), hasInteractiveOverlay && _Platform.default.OS === 'web' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectInteractiveOverlayStyles({
           backgroundColor,
           borderRadius,
           borderWidth
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: staticStyles.contentOverlay,
-        children: paddedContent
+        }),
+        testID: testID && `${testID}-card-base-bg-overlay`
       })]
     });
     content = setBackgroundImage({
@@ -322,17 +338,23 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       backgroundImageAlign,
       content: contentWithOverlay,
       cardStyle: {
-        ...containerStyle,
-        borderRadius
-      }
+        borderRadius,
+        borderWidth
+      },
+      testID: testID && `${testID}-card-base-bg-image`
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: {
-        ...containerStyle,
-        borderRadius
-      },
+      style: selectOuterContainerStyles({
+        containerStyle,
+        backgroundColor: outerBackgroundColor,
+        borderRadius,
+        borderColor,
+        borderWidth,
+        hasGradientToken
+      }),
       dataSet: dataSet,
       ref: ref,
+      testID: testID,
       ...props,
       children: content
     });
@@ -372,6 +394,7 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
       style: containerStyle,
       dataSet: dataSet,
       ref: ref,
+      testID: testID,
       ...props,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid.default, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
@@ -388,6 +411,7 @@ const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     style: cardStyle,
     dataSet: dataSet,
     ref: ref,
+    testID: testID,
     ...props,
     children: content
   });
@@ -430,6 +454,10 @@ CardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.node,
   tokens: (0, _utils.getTokensPropType)('Card'),
+  /**
+   * Identifier for testing purposes.
+   */
+  testID: _propTypes.default.string,
   /**
    * Apply background image to the card.
    */

package/lib/cjs/ColourToggle/ColourBubble.js

@@ -9,10 +9,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _pressability = require("../utils/pressability");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectGeneralBubbleTokens = _ref => {
@@ -70,37 +72,70 @@ const selectBorderBubbleTokens = _ref3 => {
     borderRadius: bubbleBorderRadius
   };
 };
-const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const selectOverlayStyles = _ref4 => {
   let {
-    tokens = {},
+    overlayColor,
+    innerBubbleBorderRadius
+  } = _ref4;
+  return {
+    borderRadius: innerBubbleBorderRadius,
+    backgroundColor: overlayColor
+  };
+};
+const selectSlashStyles = (_ref5, unavailable) => {
+  let {
+    slashLightColor,
+    slashDarkColor,
+    slashWidth,
+    slashOffset
+  } = _ref5;
+  return {
+    width: slashWidth,
+    backgroundColor: unavailable === _constants.UNAVAILABLE_VARIANT.DARK ? slashDarkColor : slashLightColor,
+    marginLeft: slashOffset
+  };
+};
+const ColourBubble = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    tokens = () => ({}),
     id,
     colourHexCode,
     colourName,
     isSelected,
     onPress,
-    showTooltip
-  } = _ref4;
+    showTooltip,
+    unavailable,
+    isDisabled
+  } = _ref6;
   const defaultTokens = tokens({
     selected: isSelected
   });
-  const resolveColourBubbleTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, pressState, {});
-  const themeTokens = _react.default.useMemo(() => tokens(), [tokens]);
-  const pressable = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  const resolveColourBubbleTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, isDisabled ? {} : pressState, {});
+  const themeTokens = tokens();
+  const pressable = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Pressable.default, {
     style: state => [selectGeneralBubbleTokens(resolveColourBubbleTokens(state)), isSelected && selectBorderBubbleTokens(defaultTokens)],
     onPress: onPress,
+    disabled: isDisabled,
+    focusable: !isDisabled,
     accessible: true,
     accessibilityRole: "radio",
     accessibilityLabel: colourName,
     accessibilityState: {
-      checked: isSelected
+      checked: isSelected,
+      disabled: isDisabled
     },
     ref: ref,
     testID: id,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [selectInnerBubbleTokens(themeTokens), {
         backgroundColor: colourHexCode
-      }]
-    })
+      }],
+      children: unavailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [_StyleSheet.default.absoluteFillObject, selectOverlayStyles(themeTokens)]
+      })
+    }), unavailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [staticStyles.indicator, selectSlashStyles(themeTokens, unavailable)]
+    })]
   });
   if (showTooltip) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
@@ -142,6 +177,24 @@ ColourBubble.propTypes = {
   /**
    * When true, wraps the bubble in a Tooltip that displays the colourName on hover (web only).
    */
-  showTooltip: _propTypes.default.bool
+  showTooltip: _propTypes.default.bool,
+  /**
+   * When set, renders a diagonal indicator over the bubble. Accepts either 'dark' or 'light' to determine the colour of the indicator.
+   */
+  unavailable: _propTypes.default.oneOf(Object.values(_constants.UNAVAILABLE_VARIANT)),
+  /**
+   * When true, disables interaction on the bubble.
+   */
+  isDisabled: _propTypes.default.bool
 };
+const staticStyles = _StyleSheet.default.create({
+  indicator: {
+    position: 'absolute',
+    top: '50%',
+    height: 2,
+    transform: [{
+      rotate: '-45deg'
+    }]
+  }
+});
 var _default = exports.default = ColourBubble;