@coinbase/cds-web 8.55.1 → 8.56.1

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "blendStyles", "align", "bordered", "borderWidth", "focusedBorderWidth", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessibilityLabel", "ariaHaspopup", "tabIndex", "styles", "classNames"];
+const _excluded = ["role", "type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "blendStyles", "align", "bordered", "borderWidth", "focusedBorderWidth", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessibilityLabel", "ariaHaspopup", "tabIndex", "styles", "classNames"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -38,6 +38,7 @@ const variantColor = {
 };
 const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
+      role = 'button',
       type,
       options,
       value,
@@ -72,7 +73,6 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
   const isMultiSelect = type === 'multi';
   const shouldShowCompactLabel = compact && label && !isMultiSelect;
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
-
   // Map of options to their values
   // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
   const optionsMap = useMemo(() => {
@@ -226,14 +226,13 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       children: singleValueContent
     }) : singleValueContent;
   }, [hasValue, isMultiSelect, singleValueContent, align, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, optionsMap, removeSelectedOptionAccessibilityLabel, handleUnselectValue]);
-  const inputNode = useMemo(() =>
-  /*#__PURE__*/
-  // We don't offer control over setting the role since this must always be a button
-  _jsxs(Pressable, {
+  const inputNode = useMemo(() => /*#__PURE__*/_jsxs(Pressable, {
     ref: controlPressableRef,
     noScaleOnPress: true,
     accessibilityLabel: computedControlAccessibilityLabel,
+    "aria-expanded": open,
     "aria-haspopup": ariaHaspopup,
+    as: role === 'combobox' ? 'div' : 'button',
     background: "transparent",
     blendStyles: interactableBlendStyles,
     borderWidth: 0,
@@ -246,6 +245,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     minWidth: 0,
     onClick: () => setOpen(s => !s),
     paddingStart: 1,
+    role: role,
     style: styles === null || styles === void 0 ? void 0 : styles.controlInputNode,
     tabIndex: tabIndex,
     children: [!!startNode && /*#__PURE__*/_jsx(HStack, {
@@ -286,7 +286,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         children: [valueNode, contentNode]
       })
     })]
-  }), [computedControlAccessibilityLabel, ariaHaspopup, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, labelVariant, compact, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, startNode, shouldShowCompactLabel, labelNode, align, isMultiSelect, valueNode, contentNode, setOpen]);
+  }), [computedControlAccessibilityLabel, ariaHaspopup, open, role, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, labelVariant, compact, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, startNode, shouldShowCompactLabel, labelNode, align, isMultiSelect, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     "aria-hidden": true,
     flexShrink: 0,

package/esm/cards/AnnouncementCard.js

@@ -10,7 +10,10 @@ import React, { memo } from 'react';
 import { Card } from './Card';
 import { CardBody } from './CardBody';
 import { jsx as _jsx } from "react/jsx-runtime";
-/** @deprecated Use MessagingCard instead. AnnouncementCard will be removed in a future major release. */
+/**
+ * @deprecated Use MessagingCard instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
+ */
 export const AnnouncementCard = /*#__PURE__*/memo(function AnnouncementCard(_ref) {
   let {
       width,

package/esm/cards/ContainedAssetCard.js

@@ -23,7 +23,8 @@ const pressCss = "pressCss-p1uriugu";
 const focusRingCss = "focusRingCss-f6cdk3o";
 
 /**
- * @deprecated Use `MediaCard` instead. ContainedAssetCard will be removed in a future major release.
+ * @deprecated Use `MediaCard` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  *
  * Migration guide:
  * ```tsx

package/esm/cards/FeatureEntryCard.js

@@ -10,9 +10,15 @@ import React, { memo } from 'react';
 import { Card } from './Card';
 import { CardBody } from './CardBody';
 
-/** @deprecated Use MessagingCard instead. FeatureEntryCard will be removed in a future major release. */
+/**
+ * @deprecated Use MessagingCard instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
-/** @deprecated Use MessagingCard instead. FeatureEntryCard will be removed in a future major release. */
+/**
+ * @deprecated Use MessagingCard instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
+ */
 export const FeatureEntryCard = /*#__PURE__*/memo(function FeatureEntryCard(_ref) {
   let {
       onClick,

package/esm/cards/FeedCard.js

@@ -16,9 +16,15 @@ import { CardFooter } from './CardFooter';
 import { CardHeader } from './CardHeader';
 import { LikeButton } from './LikeButton';
 
-/** @deprecated Use the ContentCard component instead. */
+/**
+ * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** @deprecated Use the ContentCard component instead. */
+/**
+ * @deprecated Use the ContentCard component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
+ */
 export const FeedCard = /*#__PURE__*/memo(function FeedCard(_ref) {
   let {
       testID = 'feed-card',

package/esm/cards/FloatingAssetCard.js

@@ -19,7 +19,8 @@ const pressCss = "pressCss-plkgnmc";
 const focusRingCss = "focusRingCss-fqgx809";
 
 /**
- * @deprecated Use `MediaCard` instead. FloatingAssetCard will be removed in a future major release.
+ * @deprecated Use `MediaCard` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  *
  * Migration guide:
  * ```tsx

package/esm/cards/NudgeCard.js

@@ -45,7 +45,8 @@ const getCardBodyPaddingProps = _ref => {
   };
 };
 /**
- * @deprecated Use `MessagingCard` with `type="nudge"` instead. NudgeCard will be removed in a future major release.
+ * @deprecated Use `MessagingCard` with `type="nudge"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  *
  * Migration guide:
  * ```tsx

package/esm/cards/UpsellCard.js

@@ -6,7 +6,8 @@ import { Pressable } from '../system';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * @deprecated Use `MessagingCard` with `type="upsell"` instead. UpsellCard will be removed in a future major release.
+ * @deprecated Use `MessagingCard` with `type="upsell"` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  *
  * Migration guide:
  * ```tsx

package/esm/cells/CellMedia.js

@@ -5,7 +5,8 @@ import { Box } from '../layout/Box';
 import { RemoteImage } from '../media/RemoteImage';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @deprecated This component will be removed in a future release. Pass media directly via the `media` prop.
+ * @deprecated Pass media directly via the `media` prop. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  * For example: `<Avatar src={...} />`, `<Icon name={...} />`, `<RemoteImage source={...} />`, or a Pictogram.
  */
 export const CellMedia = /*#__PURE__*/memo(function CellMedia(props) {

package/esm/cells/ContentCell.js

@@ -23,11 +23,13 @@ const truncationCss = "truncationCss-t1vpzve9";
 export const contentCellDefaultElement = 'div';
 
 /**
- * @deprecated this component will be removed in a future version. Use ListCell instead.
+ * @deprecated Use ListCell instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 
 /**
- * @deprecated this component will be removed in a future version. Use ListCell instead.
+ * @deprecated Use ListCell instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const ContentCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   var _props$borderRadius;

package/esm/chips/SelectChip.js

@@ -16,12 +16,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const SELECT_CHIP_DEFAULT_TEST_ID = 'select-chip';
 
 /**
- * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  * @see {@link @coinbase/cds-web/alpha/select-chip/SelectChip}
  */
 
 /**
- * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead.
+ * @deprecated This component is deprecated. Please use the new SelectChip alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  * @see {@link @coinbase/cds-web/alpha/select-chip/SelectChip}
  */
 export const SelectChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SelectChip(_ref, ref) {

package/esm/chips/TabbedChips.js

@@ -140,7 +140,8 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
 TabbedChipsComponent.displayName = 'TabbedChips';
 
 /**
- * @deprecated Use `TabbedChips(Alpha)` instead.
+ * @deprecated Use `TabbedChips(Alpha)` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const TabbedChips = TabbedChipsComponent;
 import "./TabbedChips.css";

package/esm/controls/CheckboxGroup.js

@@ -16,7 +16,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const checkboxCss = "checkboxCss-cmjsxse";
 
 /**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  *
  * @example
  * // Instead of:
@@ -35,7 +36,8 @@ const checkboxCss = "checkboxCss-cmjsxse";
  */
 
 /**
- * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  */
 
 // Follows behavior describe in https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-2/checkbox-2.html

package/esm/controls/RadioGroup.js

@@ -15,7 +15,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export { Radio, useHandleRadioSelect };
 
 /**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
  *
  * @example
  * // Instead of:
@@ -33,7 +34,8 @@ export { Radio, useHandleRadioSelect };
  */
 
 /**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  */
 
 const RadioGroupWithRef = /*#__PURE__*/forwardRef(function RadioGroup(_ref, ref) {
@@ -80,6 +82,7 @@ const RadioGroupWithRef = /*#__PURE__*/forwardRef(function RadioGroup(_ref, ref)
 });
 
 /**
- * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
  */
 export const RadioGroup = /*#__PURE__*/memo(RadioGroupWithRef);

package/esm/controls/SegmentedControl.js

@@ -106,7 +106,8 @@ function SegmentedControlInternal(props, ref) {
 }
 
 /**
- * @deprecated SegmentedControl is deprecated and will be removed in a future version. Please use Tabs or SegmentedTabs instead.
+ * @deprecated SegmentedControl is deprecated and will be removed in a future version. Please use Tabs or SegmentedTabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const SegmentedControl = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(SegmentedControlInternal));
 SegmentedControl.displayName = 'SegmentedControl';

package/esm/controls/Select.js

@@ -18,7 +18,8 @@ import { SelectTrigger } from './SelectTrigger';
 import { useRefocusTrigger } from './useRefocusTrigger';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * @deprecated Please use the new Select alpha component instead.
+ * @deprecated Please use the new Select alpha component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const Select = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Select(_ref, ref) {
   let {

package/esm/hooks/useCheckboxGroupState.js

@@ -4,7 +4,8 @@ import { useGroupToggler } from '@coinbase/cds-common/hooks/useGroupToggler';
  *
  * @param values - An array of all possible options. Make sure the array doesn't change if it's the same values so that the handlers will also stay the same.
  * @param initialState - Initial checked option values.
- * @deprecated Do not use this.
+ * @deprecated Do not use this. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  * @returns [
  *  state,
     {

package/esm/layout/Group.js

@@ -32,7 +32,8 @@ const fallbackRenderItem = _ref2 => {
 };
 
 /**
- * @deprecated Use `Box`, `HStack` or `VStack` instead.
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  * @danger Make sure to add a `key` prop to each item.
  */
 export const Group = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {

package/esm/loaders/MaterialSpinner.js

@@ -9,7 +9,8 @@ import { useMotionProps } from '../motion/useMotionProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const circleCss = "circleCss-c1agunln";
 /**
- * @deprecated Use Spinner component instead
+ * @deprecated Use Spinner component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v7
  */
 export const MaterialSpinner = /*#__PURE__*/memo(_ref => {
   let {

package/esm/media/Hexagon.js

@@ -36,7 +36,8 @@ export const HexagonAvatarClipPath = () => {
 HexagonAvatarClipPath.displayName = 'HexagonAvatarClipPath';
 
 /**
- * @deprecated will be removed in a future version
+ * @deprecated This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
  */
 export const hexagonSvgTransformStyles = {
   standard: {

package/esm/overlays/useModal.js

@@ -1,6 +1,7 @@
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 
 /**
- * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started
+ * @deprecated Use the visible and onRequestClose props as outlined in the docs here https://cds.coinbase.com/components/modal#get-started. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v7
  */
 export { useModal };

package/esm/system/ButtonOrLink.js

@@ -19,7 +19,10 @@ import { getTabIndex, handleButtonFocusOnSafariOrFirefoxOnMac, isNativeClick, is
 import { jsx as _jsx } from "react/jsx-runtime";
 const accessibilityCss = "accessibilityCss-akx0ly6";
 
-/** @deprecated This component will be removed in a future version. Use Pressable instead. */
+/**
+ * @deprecated Use Pressable instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
+ */
 export const ButtonOrLink = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       children,

package/esm/system/PressableOpacity.js

@@ -11,11 +11,20 @@ import { Pressable } from './Pressable';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const pressableOpacityDefaultElement = 'button';
 
-/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+/**
+ * @deprecated Use `<Pressable background="transparent">` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
+ */
 
-/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+/**
+ * @deprecated Use `<Pressable background="transparent">` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
+ */
 
-/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+/**
+ * @deprecated Use `<Pressable background="transparent">` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
+ */
 export const PressableOpacity = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       children,

package/esm/tabs/TabNavigation.js

@@ -37,7 +37,8 @@ const fallbackLayout = {
 /**
  * TabNavigation renders a horizontal, tab-based navigation bar.
  * This component has a opinionated default style, but allows for customization through custom Component props.
- * @deprecated Use Tabs instead.
+ * @deprecated Use Tabs instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v8
  */
 const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;

package/esm/themes/coinbaseDenseTheme.js

@@ -6,7 +6,10 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import { coinbaseTheme } from './coinbaseTheme';
 export const coinbaseDenseThemeId = 'coinbase-dense';
 
-/** @deprecated This theme was created to test backwards compatibility, it is not officially supported by CDS. Please copy it into your own repo and modify it as needed. Do not import it directly from CDS. */
+/**
+ * @deprecated This theme was created to test backwards compatibility, it is not officially supported by CDS. Please copy it into your own repo and modify it as needed. Do not import it directly from CDS. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v9
+ */
 export const coinbaseDenseTheme = _objectSpread(_objectSpread({}, coinbaseTheme), {}, {
   id: coinbaseDenseThemeId,
   space: {

package/esm/visualizations/Counter.js

@@ -5,7 +5,8 @@ const containerCss = "containerCss-cw9uypc";
 const hiddenCss = "hiddenCss-hy2p56v";
 const visibleCss = "visibleCss-vt3gpqt";
 /**
- * @deprecated This component will be removed from CDS in a future version. It has been moved to cds-web-sparkline.
+ * @deprecated Moved to cds-web-sparkline. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v6
  */
 export const Counter = _ref => {
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.55.1",
+  "version": "8.56.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.55.1",
+    "@coinbase/cds-common": "^8.56.1",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.35.0",
     "@coinbase/cds-lottie-files": "^3.3.4",