@coinbase/cds-web 8.21.0 → 8.21.2

package/CHANGELOG.md

@@ -8,6 +8,20 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.21.2 (11/13/2025 PST)
+
+#### 🐞 Fixes
+
+- Uniform flex alignment for all Avatar variants. [[#162](https://github.com/coinbase/cds/pull/162)] [DX-4991]
+
+## 8.21.1 (11/13/2025 PST)
+
+#### 🐞 Fixes
+
+- Fixed select alpha dropdown zIndex. [[#161](https://github.com/coinbase/cds/pull/161)]
+- Corrected ListCell spacingVariant jsdoc. [[#161](https://github.com/coinbase/cds/pull/161)]
+- Updated docs of FullscreenMoal and FullscreenModalLayout to show a more precise 3-column layout example. [[#161](https://github.com/coinbase/cds/pull/161)]
+
 ## 8.21.0 (11/12/2025 PST)
 
 #### 🚀 Updates

package/dts/alpha/select/DefaultSelectDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMhE,KAAK,yBAAyB,GAAG,CAC/B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,mBAAmB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACtF,KAAK,CAAC,YAAY,CAAC;AA4TxB,eAAO,MAAM,qBAAqB,EAAqC,yBAAyB,CAAC"}
+{"version":3,"file":"DefaultSelectDropdown.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectDropdown.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMhE,KAAK,yBAAyB,GAAG,CAC/B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,mBAAmB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACtF,KAAK,CAAC,YAAY,CAAC;AA6TxB,eAAO,MAAM,qBAAqB,EAAqC,yBAAyB,CAAC"}

package/dts/cells/ListCell.d.ts

@@ -31,7 +31,7 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
      */
     action?: React.ReactNode;
     /**
-     * @deprecated Use `layoutDensity="compact"` instead. `compact` will be removed in a future major release.
+     * @deprecated Use `spacingVariant="compact"` instead. `compact` will be removed in a future major release.
      */
     compact?: boolean;
     /**

package/dts/media/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/media/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIhG,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM3E,eAAO,MAAM,gBAAgB,4iDAC8gD,CAAC;AAoF5iD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,iIAAiI;IACjI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,oGAAoG;IACpG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sHAAsH;IACtH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAExE,eAAO,MAAM,MAAM,0JAed,WAAW,6CAgHf,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/media/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAIhG,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM3E,eAAO,MAAM,gBAAgB,4iDAC8gD,CAAC;AA+F5iD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,iIAAiI;IACjI,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,oGAAoG;IACpG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sHAAsH;IACtH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAExE,eAAO,MAAM,MAAM,0JAed,WAAW,6CAqHf,CAAC"}

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -8,6 +8,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { AnimatePresence, m as motion } from 'framer-motion';
 import { Button } from '../../buttons';
 import { Checkbox } from '../../controls/Checkbox';
@@ -62,7 +63,8 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef
   const dropdownStyles = useMemo(() => {
     var _controlRef$current;
     return _objectSpread(_objectSpread({
-      width: containerWidth !== null ? containerWidth : (_controlRef$current = controlRef.current) === null || _controlRef$current === void 0 ? void 0 : _controlRef$current.getBoundingClientRect().width
+      width: containerWidth !== null ? containerWidth : (_controlRef$current = controlRef.current) === null || _controlRef$current === void 0 ? void 0 : _controlRef$current.getBoundingClientRect().width,
+      zIndex: zIndex.dropdown
     }, style), styles === null || styles === void 0 ? void 0 : styles.root);
   }, [styles === null || styles === void 0 ? void 0 : styles.root, containerWidth, controlRef, style]);
   const optionStyles = useMemo(() => ({

package/esm/media/Avatar.css

@@ -2,4 +2,5 @@
 .avatarCss-arpga7l{overflow:hidden;border:solid 1px var(--avatar-borderColor);}.avatarCss-arpga7l[data-bordered='true']{border-width:2px;}.avatarCss-arpga7l[data-selected='true']{box-shadow:0 0 0 2px currentColor;}.avatarCss-arpga7l[data-shape='hexagon']{border:none;box-shadow:none;-webkit-clip-path:url(#cds-hexagon-avatar-clipper);clip-path:url(#cds-hexagon-avatar-clipper);}
 .circle-cfv7qmm{border-radius:100%;}
 .square-s917yqm{border-radius:4px;}
-.hexagon-hsci9wn{border-radius:0;}}
+.hexagon-hsci9wn{border-radius:0;}
+.contentWrapperCss-ck6a13w{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}}

package/esm/media/Avatar.js

@@ -21,6 +21,7 @@ const borderRadiusCss = {
   square: "square-s917yqm",
   hexagon: "hexagon-hsci9wn"
 };
+const contentWrapperCss = "contentWrapperCss-ck6a13w";
 export const Avatar = /*#__PURE__*/memo(_ref => {
   var _ref2, _style$width;
   let {
@@ -75,6 +76,10 @@ export const Avatar = /*#__PURE__*/memo(_ref => {
     });
   }, [name, size, dangerouslySetSize]);
   const shouldShowBorder = Boolean((src || !name) && borderColor);
+  const dimensionProps = useMemo(() => ({
+    width: computedSize,
+    height: computedSize
+  }), [computedSize]);
   const avatarInlineStyles = useMemo(() => _objectSpread({
     width: computedSize,
     height: computedSize,
@@ -90,31 +95,30 @@ export const Avatar = /*#__PURE__*/memo(_ref => {
       testID: "".concat(testID, "-wrapper")
     }, props), {}, {
       children: [/*#__PURE__*/_jsx(Box, {
-        alignItems: "center",
         className: cx(avatarCss, borderRadiusCss[shape], className),
         "data-bordered": shouldShowBorder,
         "data-selected": selected,
         "data-shape": shape,
         flexGrow: 0,
         flexShrink: 0,
-        justifyContent: "center",
+        position: "relative",
         style: avatarInlineStyles,
         testID: testID,
-        children: !!src || !name ? /*#__PURE__*/_jsx(RemoteImage, {
-          alt: alt,
-          height: computedSize,
-          shape: shape,
-          source: src || fallbackImageSrc,
-          width: computedSize
-        }) : /*#__PURE__*/_jsx(Box, {
-          alignItems: "center",
-          background: "currentColor",
-          className: borderRadiusCss[shape],
-          flexGrow: 1,
-          height: "100%",
-          justifyContent: "center",
-          testID: "".concat(testID, "-fallback"),
-          children: avatarText
+        children: /*#__PURE__*/_jsx(Box, {
+          className: contentWrapperCss,
+          children: !!src || !name ? /*#__PURE__*/_jsx(RemoteImage, _objectSpread(_objectSpread({}, dimensionProps), {}, {
+            alt: alt,
+            shape: shape,
+            source: src || fallbackImageSrc
+          })) : /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, dimensionProps), {}, {
+            alignItems: "center",
+            background: "currentColor",
+            className: borderRadiusCss[shape],
+            justifyContent: "center",
+            position: "relative",
+            testID: "".concat(testID, "-fallback"),
+            children: avatarText
+          }))
         })
       }), shape === 'hexagon' && selected && /*#__PURE__*/_jsx(HexagonBorder, {
         offset: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.21.0",
+  "version": "8.21.2",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,9 +147,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.21.0",
-    "@coinbase/cds-icons": "^5.5.1",
-    "@coinbase/cds-illustrations": "^4.26.1",
+    "@coinbase/cds-common": "^8.21.2",
+    "@coinbase/cds-icons": "^5.6.0",
+    "@coinbase/cds-illustrations": "^4.27.0",
     "@coinbase/cds-lottie-files": "^3.3.3",
     "@coinbase/cds-utils": "^2.3.4",
     "@floating-ui/react-dom": "^2.1.1",