### Custom Adapt Strategies Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AdaptStrategy.Reflow

Provides an example of how to implement custom adapt strategies using AdaptStrategy.Reflow.

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AdaptStrategy
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldDefaults
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.ui.semantics.Role

rememberListDetailPaneScaffoldNavigator<T>(
        adaptStrategies =
            ListDetailPaneScaffoldDefaults.adaptStrategies(
                extraPaneAdaptStrategy =
                    AdaptStrategy.Reflow(reflowUnder = ListDetailPaneScaffoldRole.Detail)
            )
    )
```

--------------------------------

### Basic TextButton Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/TextButton.composable

A simple example demonstrating how to create a TextButton with text content. Ensure necessary imports are included.

```kotlin
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton

TextButton(onClick = {}, shapes = ButtonDefaults.shapes()) { Text("Text Button") }
```

--------------------------------

### Simple WideNavigationRail Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRail.composable

A basic example demonstrating how to use WideNavigationRail with WideNavigationRailItem. Ensure you have the necessary icon imports and state management for selected items.

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.WideNavigationRail
import androidx.compose.material3.WideNavigationRailItem
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember

var selectedItem by remember { mutableIntStateOf(0) }
val items = listOf("Home", "Search", "Settings")
val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
val unselectedIcons =
    listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.StarBorder)
WideNavigationRail {
    items.forEachIndexed { index, item ->
        WideNavigationRailItem(
            railExpanded = false,
            icon = {
                Icon(
                    if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
                    contentDescription = null,
                )
            },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
        )
    }
}
```

--------------------------------

### Basic ElevatedSuggestionChip Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ElevatedSuggestionChip.composable

An example demonstrating how to create a basic ElevatedSuggestionChip with a text label. This chip is clickable and will perform an action when tapped.

```kotlin
import androidx.compose.material3.ElevatedSuggestionChip
import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.Text

ElevatedSuggestionChip(onClick = { /* Do something! */ }, label = { Text("Suggestion Chip") })
```

--------------------------------

### ExpandedDockedSearchBar Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ExpandedDockedSearchBar.composable

Demonstrates the usage of ExpandedDockedSearchBar with a Scaffold, AppBarWithSearch, and LazyColumn for search results. This snippet includes setup for states, scroll behavior, and input field customization.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.AppBarWithSearch
import androidx.compose.material3.ExpandedDockedSearchBarWithGap
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSearchBarWithGapState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.unit.dp

val textFieldState = rememberTextFieldState()
val searchBarState = rememberSearchBarWithGapState()
val scope = rememberCoroutineScope()
val scrollBehavior = SearchBarDefaults.enterAlwaysSearchBarScrollBehavior()
val appBarWithSearchColors = SearchBarDefaults.appBarWithSearchColors()
val inputField = 
    @Composable {
        SearchBarDefaults.InputField(
            textFieldState = textFieldState,
            searchBarState = searchBarState,
            colors = appBarWithSearchColors.searchBarColors.inputFieldColors,
            onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
            placeholder = {
                Text(modifier = Modifier.clearAndSetSemantics {}, text = "Search")
            },
            leadingIcon = { SampleLeadingIcon(searchBarState, scope) },
            trailingIcon = { SampleTrailingIcon() },
        )
    }

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        AppBarWithSearch(
            scrollBehavior = scrollBehavior,
            state = searchBarState,
            colors = appBarWithSearchColors,
            inputField = inputField,
            navigationIcon = { SampleNavigationIcon(searchBarState) },
            actions = { SampleActions(searchBarState) },
        )
        ExpandedDockedSearchBarWithGap(state = searchBarState, inputField = inputField) {
            SampleSearchResults(
                onResultClick = { result ->
                    textFieldState.setTextAndPlaceCursorAtEnd(result)
                    scope.launch { searchBarState.animateToCollapsed() } 
                }
            )
        }
    },
) {
    LazyColumn(contentPadding = padding, verticalArrangement = Arrangement.spacedBy(8.dp)) {
        val list = List(100) { "Text $it" }
        items(count = list.size) {
            Text(
                text = list[it],
                modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
            )
        }
    }
}
```

--------------------------------

### Basic NavigationRail Usage Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationRail.composable

Demonstrates how to create a NavigationRail with multiple NavigationRailItems, including icons and labels. This example shows state management for the selected item.

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Star
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.StarBorder
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationRail
import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember

var selectedItem by remember { mutableIntStateOf(0) }
val items = listOf("Home", "Search", "Settings")
val selectedIcons = listOf(Icons.Filled.Home, Icons.Filled.Favorite, Icons.Filled.Star)
val unselectedIcons =
    listOf(Icons.Outlined.Home, Icons.Outlined.FavoriteBorder, Icons.Outlined.StarBorder)
NavigationRail {
    items.forEachIndexed { index, item ->
        NavigationRailItem(
            icon = {
                Icon(
                    if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
                    contentDescription = item,
                )
            },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
        )
    }
}
```

--------------------------------

### TooltipBox with PlainTooltip Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/TooltipBox.composable

Example of using TooltipBox to display a plain tooltip when an IconButton is long-pressed. Includes necessary imports and semantic properties for accessibility.

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics

TooltipBox(
    positionProvider =
        TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
    tooltip = {
        PlainTooltip(
            modifier =
                Modifier.semantics {
                    // TODO(b/496338253): Remove this modifier once bug where tooltip text is
                    //  not announced by a11y screen readers is resolved.
                    liveRegion = LiveRegionMode.Assertive
                    paneTitle = "Add to favorites"
                }
        ) {
            Text("Add to favorites")
        }
    },
    state = rememberTooltipState(),
) {
    IconButton(onClick = { /* Icon button's click event */ }) {
        Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Localized Description")
    }
}
```

--------------------------------

### Simple SecondaryTabRow Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/SecondaryTabRow.composable

A basic example demonstrating how to use SecondaryTabRow with text tabs. It shows how to manage the selected tab state and display corresponding content.

```kotlin
```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SecondaryTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow

var state by remember { mutableStateOf(0) }
val titles = listOf("Tab 1", "Tab 2", "Tab 3 with lots of text")
Column {
    SecondaryTabRow(selectedTabIndex = state) {
        titles.forEachIndexed { index, title ->
            Tab(
                selected = state == index,
                onClick = { state = index },
                text = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) },
            )
        }
    }
    Text(
        modifier = Modifier.align(Alignment.CenterHorizontally),
        text = "Secondary tab ${state + 1} selected",
        style = MaterialTheme.typography.bodyLarge,
    )
}
```
```

--------------------------------

### Cascading Dropdown Menu Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/DropdownMenuPopup.composable

Demonstrates how to create a cascading dropdown menu with nested submenus. This example shows the setup for a main dropdown with multiple groups, each leading to a submenu.

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowRight
import androidx.compose.material.icons.automirrored.filled.FormatAlignLeft
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.FormatBold
import androidx.compose.material.icons.filled.FormatLineSpacing
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.outlined.FormatBold
import androidx.compose.material.icons.outlined.MoreVert
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuGroup
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.DropdownMenuPopup
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MenuAnchorPosition
import androidx.compose.material3.MenuDefaults
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.util.fastForEachIndexed
import androidx.compose.ui.window.PopupProperties

val groupInteractionSource = remember { MutableInteractionSource() }
var expanded by remember { mutableStateOf(false) }
val groupItemLabels = listOf("Text", "Align", "Line spacing")
val mainGroupItemLeadingIcons =
    listOf(
        Icons.Filled.FormatBold,
        Icons.AutoMirrored.Filled.FormatAlignLeft,
        Icons.Filled.FormatLineSpacing,
    )
val submenus: List<@Composable (MutableInteractionSource) -> Unit> = 
    listOf(
        { interactionSource -> TextSubmenu(interactionSource) },
        { interactionSource -> AlignSubmenu(interactionSource) },
        { interactionSource -> LineSpacingSubmenu(interactionSource) },
    )

```

--------------------------------

### TooltipAnchorPosition Start

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/TooltipAnchorPosition

Places the tooltip at the start of the anchor. This is a predefined constant for TooltipAnchorPosition.

```kotlin
val
Start: TooltipAnchorPosition
```

--------------------------------

### Custom Fancy Tab Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/TabRow.composable

Shows how to create a custom tab appearance within a SecondaryTabRow. This example uses a hypothetical `FancyTab` composable to demonstrate customization.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SecondaryTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

var state by remember { mutableStateOf(0) }
val titles = listOf("Tab 1", "Tab 2", "Tab 3")
Column {
    SecondaryTabRow(selectedTabIndex = state) {
        titles.forEachIndexed { index, title ->
            FancyTab(title = title, onClick = { state = index }, selected = (index == state))
        }
    }
    Text(
        modifier = Modifier.align(Alignment.CenterHorizontally),
        text = "Fancy tab ${state + 1} selected",
        style = MaterialTheme.typography.bodyLarge,
    )
}
```

--------------------------------

### Example Usage of DropdownMenuPopup

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/DropdownMenuPopup.composable

This example demonstrates how to use the DropdownMenuPopup composable to create a custom dropdown menu. It includes various Material 3 components like IconButton, DropdownMenu, DropdownMenuItem, and TooltipBox, showcasing a rich menu implementation.

```kotlin
```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.outlined.Edit
import androidx.compose.material.icons.outlined.Home
import androidx.compose.material.icons.outlined.Info
import androidx.compose.material.icons.outlined.MoreVert
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material3.ButtonGroup
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuGroup
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.DropdownMenuPopup
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MenuDefaults
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.util.fastForEachIndexed

@Composable
fun MyDropdownMenu() {
    val expanded = remember { mutableStateOf(false) }

    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        IconButton(
            onClick = { expanded.value = true },
            modifier = Modifier.align(Alignment.Center)
        ) {
            Icon(Icons.Filled.MoreVert, contentDescription = "More")
        }

        DropdownMenu(
            expanded = expanded.value,
            onDismissRequest = { expanded.value = false },
            // Use DropdownMenuPopup for custom positioning or behavior
            properties = PopupProperties(focusable = true),
            // Example of custom popup position provider
            popupPositionProvider = remember {
                object : DropdownMenuPopupPositionProvider {
                    override fun calculatePosition(
                        anchorBounds: Rect,
                        windowSize: Size,
                        layoutDirection: LayoutDirection,
                        popupContentSize: IntSize
                    ): WindowOffset {
                        // Custom positioning logic here
                        return WindowOffset(x = anchorBounds.left.roundToInt(), y = anchorBounds.bottom.roundToInt())
                    }
                }
            }
        ) {
            DropdownMenuItem(
                text = { Text("Edit") },
                onClick = { /* Handle edit */ },
                leadingIcon = { Icon(Icons.Outlined.Edit, contentDescription = "Edit") }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                onClick = { /* Handle settings */ },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = "Settings") }
            )
            HorizontalDivider()
            DropdownMenuGroup(
                text = {
                    Text("Group")
                }
            ) {
                DropdownMenuItem(
                    text = {
                        Text("Item 1")
                    },
                    onClick = { /* Handle item 1 */ },
                    leadingIcon = {
                        Icon(
                            imageVector = Icons.Filled.Home,
                            contentDescription = "Home"
                        )
                    }
                )
                DropdownMenuItem(
                    text = {
                        Text("Item 2")
                    },
                    onClick = { /* Handle item 2 */ },
                    leadingIcon = {
                        Icon(
                            imageVector = Icons.Outlined.Home,
                            contentDescription = "Home"
                        )
                    }
                )
            }
        }
    }
}

@Composable
fun MyCustomMenu() {
    val expanded = remember { mutableStateOf(false) }

    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        IconButton(
            onClick = { expanded.value = true },
            modifier = Modifier.align(Alignment.Center)
        ) {
            Icon(Icons.Filled.MoreVert, contentDescription = "More")
        }

        DropdownMenuPopup(
            expanded = expanded.value,
            onDismissRequest = { expanded.value = false },
            modifier = Modifier.wrapContentSize(Alignment.TopStart),
            offset = DpOffset(x = 0.dp, y = 4.dp) // Example offset
        ) {
            // Custom content for the menu
            ColumnScope {
                Text("Custom Menu Item 1", modifier = Modifier.padding(16.dp))
                HorizontalDivider()
                Text("Custom Menu Item 2", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

```
```

--------------------------------

### Editable Exposed Dropdown Menu Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ExposedDropdownMenuBox.composable

An example demonstrating how to implement an editable exposed dropdown menu using ExposedDropdownMenuBox, TextField, and ExposedDropdownMenu.

```APIDOC
## Editable Exposed Dropdown Menu Example

### Description
This example shows an editable dropdown menu where the user can type to filter options or select from the list.

### Code
```kotlin
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExposedDropdownMenuAnchorType
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MenuDefaults
import androidx.compose.material3.Text
```
```

--------------------------------

### Basic Button Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/Button.composable

Demonstrates a standard Button with an icon and label, suitable for primary actions.

```APIDOC
## Button

### Description

A button component that provides a filled background and is suitable for high-emphasis actions.

### Parameters

- **onClick** (`() -> Unit`) - Required - Called when this button is clicked.
- **modifier** (`Modifier`) - Optional - The `Modifier` to be applied to this button. Defaults to `Modifier`.
- **enabled** (`Boolean`) - Optional - Controls the enabled state of this button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. Defaults to `true`.
- **shape** (`Shape`) - Optional - Defines the shape of this button's container, border (when `border` is not null), and shadow (when using `elevation`). Defaults to `ButtonDefaults.shape`.
- **colors** (`ButtonColors`) - Optional - `ButtonColors` that will be used to resolve the colors for this button in different states. See `ButtonDefaults.buttonColors`. Defaults to `ButtonDefaults.buttonColors()`.
- **elevation** (`ButtonElevation?`) - Optional - `ButtonElevation` used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. See `ButtonElevation.shadowElevation`. Defaults to `ButtonDefaults.buttonElevation()`.
- **border** (`BorderStroke?`) - Optional - The border to draw around the container of this button. Defaults to `null`.
- **contentPadding** (`PaddingValues`) - Optional - The spacing values to apply internally between the container and the content. Defaults to `ButtonDefaults.ContentPadding`.
- **interactionSource** (`MutableInteractionSource?`) - Optional - An optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. Defaults to `null`.
- **content** (`@Composable RowScope.() -> Unit`) - Required - The content displayed on the button, expected to be text, icon or image.

### Example

```kotlin
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

val size = ButtonDefaults.LargeContainerHeight
Button(
    onClick = { /* Do something! */ },
    modifier = Modifier.heightIn(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
    Icon(
        Icons.Filled.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label", style = ButtonDefaults.textStyleFor(size))
}
```
```

--------------------------------

### HorizontalFloatingToolbar Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/HorizontalFloatingToolbar.composable

This snippet shows a complete example of a HorizontalFloatingToolbar integrated within a Scaffold. It includes leading and trailing content, a central content area with a tooltip, and utilizes an exit-always scroll behavior.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.FloatingToolbarDefaults
import androidx.compose.material3.FloatingToolbarDefaults.ScreenOffset
import androidx.compose.material3.FloatingToolbarExitDirection.Companion.Bottom
import androidx.compose.material3.HorizontalFloatingToolbar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex

val exitAlwaysScrollBehavior = 
    FloatingToolbarDefaults.exitAlwaysScrollBehavior(exitDirection = Bottom)
Scaffold(
    modifier = Modifier.nestedScroll(exitAlwaysScrollBehavior),
    content = { innerPadding ->
        Box(Modifier.padding(innerPadding)) {
            // The toolbar should receive focus before the screen content, so place it first.
            // Make sure to set its zIndex so it's above the screen content visually.
            HorizontalFloatingToolbar(
                modifier = 
                    Modifier.align(Alignment.BottomCenter).offset(y = -ScreenOffset).zIndex(1f),
                expanded = true,
                leadingContent = { LeadingContent() },
                trailingContent = { TrailingContent() },
                content = {
                    TooltipBox(
                        positionProvider = 
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier = 
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug
                                        //  where tooltip text is not announced by a11y screen
                                        //  readers is resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = "Localized description"
                                    }
                            ) { 
                                Text("Localized description") 
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        FilledIconButton(
                            modifier = Modifier.width(64.dp),
                            onClick = { /* doSomething() */ },
                        ) {
                            Icon(Icons.Filled.Add, contentDescription = "Localized description")
                        }
                    }
                },
                scrollBehavior = exitAlwaysScrollBehavior,
            )
            LazyColumn(
                state = rememberLazyListState(),
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                val list = (0..75).map { it.toString() }
                items(count = list.size) { 
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
                    )
                }
            }
        }
    },
)

```

--------------------------------

### Get Selected Start Date from DateRangePickerState

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/DateRangePickerState

Retrieves the selected start date as a LocalDate object. Returns null if no start date is selected.

```kotlin
fun DateRangePickerState.getSelectedStartDate(): LocalDate?
```

--------------------------------

### Basic AssistChip Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/AssistChip.composable

Demonstrates how to create a simple AssistChip with a text label and a leading icon. Ensure necessary imports are included.

```kotlin
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.AssistChip
import androidx.compose.material3.AssistChipDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

AssistChip(
    onClick = { /* Do something! */ },
    label = { Text("Assist Chip") },
    leadingIcon = {
        Icon(
            Icons.Filled.Settings,
            contentDescription = "Localized description",
            Modifier.size(AssistChipDefaults.IconSize),
        )
    },
)
```

--------------------------------

### Get Selected Start Date from DateRangePickerState

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary

Retrieves the selected start date from a DateRangePickerState as a LocalDate object. Returns null if no start date is selected. Requires API level 26.

```kotlin
@RequiresApi(value = 26)  
fun DateRangePickerState.getSelectedStartDate(): LocalDate?
```

--------------------------------

### Implementing SearchBar with Expanded Search

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/SearchBar.composable

A complete example demonstrating how to implement a SearchBar with an ExpandedFullScreenSearchBar. It includes state management, input field configuration, and handling search result clicks.

```kotlin
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExpandedFullScreenSearchBar
import androidx.compose.material3.Icon
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.SearchBarState
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSearchBarState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.clearAndSetSemantics

val searchBarState = rememberSearchBarState()
val textFieldState = rememberTextFieldState()
val scope = rememberCoroutineScope()
val inputField = 
    @Composable {
        SearchBarDefaults.InputField(
            textFieldState = textFieldState,
            searchBarState = searchBarState,
            onSearch = { scope.launch { searchBarState.animateToCollapsed() } },
            placeholder = {
                Text(modifier = Modifier.clearAndSetSemantics {}, text = "Search")
            },
            leadingIcon = { SampleLeadingIcon(searchBarState, scope) },
            trailingIcon = { SampleTrailingIcon() },
        )
    }

SearchBar(state = searchBarState, inputField = inputField)
ExpandedFullScreenSearchBar(state = searchBarState, inputField = inputField) {
    SampleSearchResults(
        onResultClick = { result ->
            textFieldState.setTextAndPlaceCursorAtEnd(result)
            scope.launch { searchBarState.animateToCollapsed() }
        }
    )
}
```

--------------------------------

### Get Chip Leading Icon Color

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors

Retrieves the color of the chip's start icon when it is in an enabled state. This property is available starting from version 1.2.0.

```kotlin
val leadingIconContentColor: Color
```

--------------------------------

### Get Disabled Chip Leading Icon Color

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors

Retrieves the color of the chip's start icon when it is in a disabled state. This property is available starting from version 1.2.0.

```kotlin
val disabledLeadingIconContentColor: Color
```

--------------------------------

### Example: Basic Usage

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/minimumInteractiveComponentSize.modifier

Demonstrates how to apply `minimumInteractiveComponentSize` to a clickable Box, ensuring it meets the minimum interactive size.

```APIDOC
## Example: Basic Usage

### Description
This example shows how to use `minimumInteractiveComponentSize` on a `Box` that has a `clickable` modifier. The `minimumInteractiveComponentSize` ensures that even if the initial size is smaller than 48.dp, the layout reserves enough space for a proper touch target. It also shows that size modifiers should come after `minimumInteractiveComponentSize`.

### Code
```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.size
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun Widget(color: Color, modifier: Modifier = Modifier) {
    // Default size is 24.dp, which is smaller than the recommended touch target
    Box(modifier.size(24.dp).background(color))
}

Column(Modifier.border(1.dp, Color.Black)) {
    // Not interactable, no need for touch target enforcement
    Widget(Color.Red)

    Widget(
        color = Color.Green,
        modifier = 
            Modifier.clickable { /* do something */ } 
                // Component is now interactable, so it should enforce a sufficient touch target
                .minimumInteractiveComponentSize()
    )

    Widget(
        color = Color.Blue,
        modifier = 
            Modifier.clickable { /* do something */ } 
                // Component is now interactable, so it should enforce a sufficient touch target
                .minimumInteractiveComponentSize()
                // Any size modifiers should come after `minimumInteractiveComponentSize`
                // so as not to interfere with layout expansion
                .size(36.dp)
    )
}
```
```

--------------------------------

### Range Slider with Custom Thumbs and Track

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSlider.composable

Example of providing custom composables for the start thumb, end thumb, and track.

```APIDOC
## Range Slider with Custom Thumbs and Track

### Description

This example demonstrates how to customize the appearance of the `RangeSlider` by providing custom composable functions for the start thumb, end thumb, and the track.

### Usage

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.rememberRangeSliderState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val rangeSliderState = rememberRangeSliderState(
    initialActiveRangeStart = 20f,
    initialActiveRangeEnd = 80f,
    valueRange = 0f..100f
)

Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    RangeSlider(
        state = rangeSliderState,
        startThumb = {
            SliderDefaults.Thumb(
                interactionSource = remember { MutableInteractionSource() },
                colors = SliderDefaults.colors(thumbColor = Color.Blue),
                enabled = true,
                content = {
                    Label {
                        Text("Start")
                    }
                }
            )
        },
        endThumb = {
            SliderDefaults.Thumb(
                interactionSource = remember { MutableInteractionSource() },
                colors = SliderDefaults.colors(thumbColor = Color.Red),
                enabled = true,
                content = {
                    PlainTooltip {
                        Text("End")
                    }
                }
            )
        },
        track = {
            SliderDefaults.Track(
                colors = SliderDefaults.colors(activeTrackColor = Color.Green, inactiveTrackColor = Color.Gray),
                enabled = true,
                rangeSliderState = it
            )
        }
    )
}
```
```

--------------------------------

### Basic InputChip Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/InputChip.composable

Demonstrates a simple InputChip with a label. Use this for basic selection or input representation.

```kotlin
import androidx.compose.material3.InputChip
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var selected by remember { mutableStateOf(false) }
InputChip(
    selected = selected,
    onClick = { selected = !selected },
    label = { Text("Input Chip") },
)
```

--------------------------------

### Get Chip Label Color

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors

Retrieves the label color of the chip when it is in an enabled state. This property is available starting from version 1.2.0.

```kotlin
val labelColor: Color
```

--------------------------------

### Basic ElevatedButton Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ElevatedButton.composable

Demonstrates how to use the ElevatedButton with a simple text label. Ensure necessary imports are included.

```kotlin
```kotlin
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.Text

ElevatedButton(onClick = {}, shapes = ButtonDefaults.shapes()) { Text("Elevated Button") }
```
```

--------------------------------

### RangeSlider with Custom Thumbs and Track

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSlider.composable

This example demonstrates how to implement a RangeSlider with custom start and end thumbs, each with unique colors and tooltips displaying their values. It also shows how to customize the track color and provides an example of state management using rememberRangeSliderState.

```kotlin
rememberRangeSliderState(
        0f,
        100f,
        valueRange = 0f..100f,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
            // viewModel.updateSelectedSliderValue(sliderPosition)
        },
    )
val startInteractionSource = remember { MutableInteractionSource() }
val endInteractionSource = remember { MutableInteractionSource() }
val startThumbAndTrackColors =
    SliderDefaults.colors(thumbColor = Color.Blue, activeTrackColor = Color.Red)
val endThumbColors = SliderDefaults.colors(thumbColor = Color.Green)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
    RangeSlider(
        state = rangeSliderState,
        startInteractionSource = startInteractionSource,
        endInteractionSource = endInteractionSource,
        startThumb = {
            Label(
                label = {
                    PlainTooltip(modifier = Modifier.sizeIn(45.dp, 25.dp).wrapContentWidth()) {
                        Text("%.2f".format(rangeSliderState.activeRangeStart))
                    }
                },
                interactionSource = startInteractionSource,
            ) {
                SliderDefaults.Thumb(
                    interactionSource = startInteractionSource,
                    colors = startThumbAndTrackColors,
                )
            }
        },
        endThumb = {
            Label(
                label = {
                    PlainTooltip(
                        modifier = Modifier.requiredSize(45.dp, 25.dp).wrapContentWidth()
                    ) {
                        Text("%.2f".format(rangeSliderState.activeRangeEnd))
                    }
                },
                interactionSource = endInteractionSource,
            ) {
                SliderDefaults.Thumb(
                    interactionSource = endInteractionSource,
                    colors = endThumbColors,
                )
            }
        },
        track = { rangeSliderState ->
            SliderDefaults.Track(
                colors = startThumbAndTrackColors,
                rangeSliderState = rangeSliderState,
            )
        },
    )
}
```

--------------------------------

### Get Disabled Chip Label Color

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors

Retrieves the label color of the chip when it is in a disabled state. This property is available starting from version 1.2.0.

```kotlin
val disabledLabelColor: Color
```

--------------------------------

### Basic SuggestionChip Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/SuggestionChip.composable

A simple implementation of a SuggestionChip with a text label. This is useful for presenting dynamic suggestions to the user.

```kotlin
import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.Text

SuggestionChip(onClick = { /* Do something! */ }, label = { Text("Suggestion Chip") })
```

--------------------------------

### Get Chip Trailing Icon Color

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors

Retrieves the color of the chip's end icon when it is in an enabled state. This property is available starting from version 1.2.0.

```kotlin
val trailingIconContentColor: Color
```

--------------------------------

### DropdownMenuPopup State and Configuration

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/DropdownMenuPopup.composable

Demonstrates the setup of state variables, lists of labels, icons, and checked states for configuring a DropdownMenuPopup.

```kotlin
val groupInteractionSource = remember { MutableInteractionSource() }
var expanded by remember { mutableStateOf(false) }
val groupLabels = listOf("Modification", "Navigation")
val groupItemLabels = listOf(listOf("Edit", "Settings"), listOf("Home", "More Options"))
val groupItemLeadingIcons =
    listOf(
        listOf(Icons.Outlined.Edit, Icons.Outlined.Settings),
        listOf(null, Icons.Outlined.Info),
    )
val groupItemCheckedLeadingIcons =
    listOf(
        listOf(Icons.Filled.Edit, Icons.Filled.Settings),
        listOf(Icons.Filled.Check, Icons.Filled.Info),
    )
val groupItemTrailingIcons: List<List<ImageVector?>> =
    listOf(listOf(null, null), listOf(Icons.Outlined.Home, Icons.Outlined.MoreVert))
val groupItemCheckedTrailingIcons: List<List<ImageVector?>> =
    listOf(listOf(null, null), listOf(Icons.Filled.Home, Icons.Filled.MoreVert))
val groupItemSupportingText: List<List<String?>> =
    listOf(listOf("Edit mode", null), listOf(null, "Opens menu"))
val checked = remember {
    listOf(mutableStateListOf(false, false), mutableStateListOf(false, false))
}
```

--------------------------------

### Get Disabled Chip Trailing Icon Color

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/ChipColors

Retrieves the color of the chip's end icon when it is in a disabled state. This property is available starting from version 1.2.0.

```kotlin
val disabledTrailingIconContentColor: Color
```

--------------------------------

### Basic AlertDialog Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/AlertDialog.composable

Demonstrates the basic usage of AlertDialog with confirm and dismiss buttons. Use this for standard prompts requiring user confirmation or dismissal.

```kotlin
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

val openDialog = remember { mutableStateOf(true) }

Button(onClick = { openDialog.value = true }) { Text("Open dialog") }

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            // Dismiss the dialog when the user clicks outside the dialog or on the back
            // button. If you want to disable that functionality, simply use an empty
            // onDismissRequest.
            openDialog.value = false
        },
        title = { Text(text = "Title") },
        text = { Text(text = "Turned on by default") },
        confirmButton = {
            TextButton(onClick = { openDialog.value = false }) { Text("Confirm") }
        },
        dismissButton = {
            TextButton(onClick = { openDialog.value = false }) { Text("Dismiss") }
        },
    )
}
```

--------------------------------

### Range Slider with Custom Thumbs and Track Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSlider.composable

Shows how to provide custom composable functions for the start thumb, end thumb, and track of the RangeSlider for advanced visual customization.

```APIDOC
```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Label
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Text

// Example usage with custom thumbs and track would go here, 
// referencing the RangeSlider composable with custom parameters.
// For brevity, the full custom composable definitions are omitted, 
// but they would be passed to the startThumb, endThumb, and track parameters.
```
```

--------------------------------

### Selectable Surface Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/Surface.composable

Demonstrates how to create a Surface that changes its appearance and text when clicked. It uses `mutableStateOf` and `remember` to manage the selected state.

```kotlin
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.text.style.TextAlign

var selected by remember { mutableStateOf(false) }
Surface(selected = selected, onClick = { selected = !selected }) {
    Text(text = if (selected) "Selected" else "Not Selected", textAlign = TextAlign.Center)
}
```

--------------------------------

### RangeSliderState Properties

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/RangeSliderState

Exposes properties to get and set the current active range start and end, the number of steps, a callback for when value changes are finished, and the overall value range of the slider.

```kotlin
var activeRangeEnd: Float
```

```kotlin
var activeRangeStart: Float
```

```kotlin
val onValueChangeFinished: (() -> Unit)?
```

```kotlin
val steps: Int
```

```kotlin
val valueRange: ClosedFloatingPointRange<Float>
```

--------------------------------

### WideNavigationRail Example

Source: https://developer.android.com/reference/kotlin/androidx/compose/material3/WideNavigationRail.composable

Demonstrates the implementation of a WideNavigationRail with a header icon button and navigation items. It includes logic for expanding and collapsing the rail and managing item selection.

```kotlin
Row(Modifier.fillMaxWidth()) {
    WideNavigationRail(
        state = state,
        header = {
            // Header icon button should have a tooltip.
            TooltipBox(
                positionProvider =
                    TooltipDefaults.rememberTooltipPositionProvider(
                        TooltipAnchorPosition.Above
                    ),
                tooltip = {
                    PlainTooltip(
                        Modifier.semantics {
                            // TODO(b/496338253): Remove this modifier once bug where tooltip
                            //  text is not announced by a11y screen readers is resolved.
                            liveRegion = LiveRegionMode.Assertive
                            paneTitle = headerDescription
                        }
                    ) { Text(headerDescription) }
                },
                state = rememberTooltipState(),
            ) {
                IconButton(
                    modifier =
                        Modifier.padding(start = 24.dp).semantics {
                            // The button must announce the expanded or collapsed state of the
                            // rail for accessibility.
                            stateDescription =
                                if (state.currentValue == WideNavigationRailValue.Expanded) {
                                    "Expanded"
                                } else {
                                    "Collapsed"
                                }
                        },
                    onClick = {
                        scope.launch {
                            if (state.targetValue == WideNavigationRailValue.Expanded)
                                state.collapse()
                            else state.expand()
                        }
                    },
                ) {
                    if (state.targetValue == WideNavigationRailValue.Expanded) {
                        Icon(Icons.AutoMirrored.Filled.MenuOpen, headerDescription)
                    } else {
                        Icon(Icons.Filled.Menu, headerDescription)
                    }
                }
            }
        },
    ) {
        items.forEachIndexed { index, item ->
            WideNavigationRailItem(
                railExpanded = state.targetValue == WideNavigationRailValue.Expanded,
                icon = {
                    val imageVector =
                        if (selectedItem == index) {
                            selectedIcons[index]
                        } else {
                            unselectedIcons[index]
                        }
                    Icon(imageVector = imageVector, contentDescription = null)
                },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index },
            )
        }
    }

    val textString =
        if (state.currentValue == WideNavigationRailValue.Expanded) {
            "Expanded"
        } else {
            "Collapsed"
        }
    Column {
        Text(modifier = Modifier.padding(16.dp), text = "Is animating: " + state.isAnimating)
        Text(modifier = Modifier.padding(16.dp), text = "The rail is $textString.")
        Text(
            modifier = Modifier.padding(16.dp),
            text =
                "Note: This demo is best shown in portrait mode, as landscape mode"
                    + " may result in a compact height in certain devices. For any"
                    + " compact screen dimensions, use a Navigation Bar instead.",
        )
    }
}
```