JetpackComposeのNavigationBarでindicatorが消えないんだが？

追記

https://x.com/NabeCott/status/1715200444614705404?s=20 にて修正が入ったことを教えて頂きました。
https://developer.android.com/jetpack/androidx/releases/compose-material3#1.2.0-alpha10 以降のバージョンを使えば特に問題は発生しなさそうです。

追記の検証結果

colors = NavigationBarItemDefaults.colors(
    indicatorColor = Color.Transparent,
    selectedIconColor = Color.Red,
    unselectedIconColor = Color.Gray,
)

indicatorColor = Color.Transparentとするだけで消せました！

はじめに

こちらの画像の電話アイコンの後ろにある楕円を消していきたいと思います。

indicatorColorを透明にしてみるよ

NavigationBarItemにcolorsが存在するのでここで透明を指定すれば良さそうに感じました。

NavigationBarItem(
    colors = NavigationBarItemDefaults.colors(
        indicatorColor = Color.Transparent
    )
)

結果は

黒くなったけど消えないの？？？

対策

安心してください消せますよ！

なんで色が消えないのか理由はelevationが色を変えてくれることが原因でした。
そこで書き直します。

colors = NavigationBarItemDefaults.colors(
    indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
        elevation = LocalAbsoluteTonalElevation.current
    )
)

LocalAbsoluteTonalElevation.currentを使ってelevationを取得し、
MaterialTheme.colorScheme.surfaceColorAtElevationを使って色を取得して設定しています。

補足

このままだとインジケータは消せましたが、何を選択しているか分かりにくくなりました。
selectedIconColor、unselectedIconColorに指定することで見やすくします。

colors = NavigationBarItemDefaults.colors(
    indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
        elevation = LocalAbsoluteTonalElevation.current
    ),
    selectedIconColor = Color.White,
    unselectedIconColor = Color.Gray,
)

サンプルコード

こちらのPRに今回のサンプルを用意しました。
https://github.com/sobaya-0141/Sample202307/pull/4