SchweizerischeBundesbahnen · rawi-coding · Aug 26, 2025 · Aug 21, 2025 · Aug 21, 2025 · Aug 22, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+# Unversioned
+
+### Features
+* **SBBContentBox:** added component which replaces SBBGroup
+
 # 0.1.8
 
 ### Bugfix

diff --git a/compose-mds/src/main/java/ch/sbb/compose_mds/beta/modal/SBBModalView.kt b/compose-mds/src/main/java/ch/sbb/compose_mds/beta/modal/SBBModalView.kt
@@ -1,6 +1,5 @@
 package ch.sbb.compose_mds.beta.modal
 
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -46,7 +45,7 @@ fun SBBModalView(
     ModalBottomSheet(
         onDismissRequest = onDismissRequest,
         sheetState = sheetState,
-        containerColor = if (isSystemInDarkTheme()) PrimitiveColors.midnight else PrimitiveColors.milk,
+        containerColor = if (SBBTheme.isDarkMode) PrimitiveColors.midnight else PrimitiveColors.milk,
         shape = RoundedCornerShape(16.dp),
         dragHandle = null,
     ) {

diff --git a/...les/segmentedButton/SBBSegmentedButton.kt → ...eta/segmentedButton/SBBSegmentedButton.kt b/...les/segmentedButton/SBBSegmentedButton.kt → ...eta/segmentedButton/SBBSegmentedButton.kt
@@ -1,8 +1,7 @@
-package ch.sbb.compose_mds.beta.button
+package ch.sbb.compose_mds.beta.segmentedButton
 
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -46,7 +45,7 @@ fun <T> SBBSegmentedButton(
             .wrapContentHeight()
             .fillMaxWidth()
             .clip(shape = RoundedCornerShape(22.dp))
-            .background(color = if (isSystemInDarkTheme()) PrimitiveColors.charcoal else PrimitiveColors.cloud),
+            .background(color = if (SBBTheme.isDarkMode) PrimitiveColors.charcoal else PrimitiveColors.cloud),
         horizontalArrangement = Arrangement.SpaceEvenly
     ) {
         val totalWeight = segments.size.toFloat()
@@ -76,14 +75,14 @@ private fun ButtonSegment(
         onClick = onClick,
         enabled = enabled,
         shape = RoundedCornerShape(22.dp),
-        border = if (isSystemInDarkTheme()) darkModeBorder(
+        border = if (SBBTheme.isDarkMode) darkModeBorder(
             active = active,
             enabled = enabled
         ) else lightModeBorder(
             active = active,
             enabled = enabled
         ),
-        colors = if (isSystemInDarkTheme()) darkModeColors(active) else lightModeColors(active),
+        colors = if (SBBTheme.isDarkMode) darkModeColors(active) else lightModeColors(active),
     ) {
         Text(
             text = label,

diff --git a/compose-mds/src/main/java/ch/sbb/compose_mds/beta/slider/SBBSlider.kt b/compose-mds/src/main/java/ch/sbb/compose_mds/beta/slider/SBBSlider.kt
@@ -5,7 +5,6 @@ import android.content.res.Configuration
 import androidx.compose.foundation.border
 import androidx.compose.foundation.indication
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
@@ -93,8 +92,8 @@ object SBBSliderDefaults {
     @Composable
     fun colors(): SliderColors {
         val trackColor = MaterialTheme.colorScheme.primary
-        val inactiveTrackColor = if (isSystemInDarkTheme()) PrimitiveColors.metal else PrimitiveColors.smoke
-        val thumbColor = if (isSystemInDarkTheme()) PrimitiveColors.iron else PrimitiveColors.white
+        val inactiveTrackColor = if (SBBTheme.isDarkMode) PrimitiveColors.metal else PrimitiveColors.smoke
+        val thumbColor = if (SBBTheme.isDarkMode) PrimitiveColors.iron else PrimitiveColors.white
         return SliderDefaults.colors(
             activeTrackColor = trackColor,
             disabledActiveTrackColor = trackColor,

diff --git a/compose-mds/src/main/java/ch/sbb/compose_mds/beta/text/SBBTextField.kt b/compose-mds/src/main/java/ch/sbb/compose_mds/beta/text/SBBTextField.kt
@@ -3,7 +3,6 @@
 package ch.sbb.compose_mds.beta.text
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -154,7 +153,7 @@ private fun colors(): TextFieldColors {
 
 @Composable
 private fun <T> themedValue(lightThemeValue: T, darkThemeValue: T): T {
-    if (isSystemInDarkTheme()) {
+    if (SBBTheme.isDarkMode) {
         return darkThemeValue
     }
     return lightThemeValue

diff --git a/compose-mds/src/main/java/ch/sbb/compose_mds/composables/checkbox/SBBCheckbox.kt b/compose-mds/src/main/java/ch/sbb/compose_mds/composables/checkbox/SBBCheckbox.kt
@@ -1,8 +1,8 @@
 package ch.sbb.compose_mds.composables.checkbox
 
+import SBBTheme
 import android.content.res.Configuration
 import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -55,7 +55,7 @@ fun SBBCheckbox(
     disabled: Boolean = false
 ) {
     val colors = when {
-        isSystemInDarkTheme() -> if (disabled) SBBCheckboxColors.DARK_DISABLED else SBBCheckboxColors.DARK_ENABLED
+        SBBTheme.isDarkMode -> if (disabled) SBBCheckboxColors.DARK_DISABLED else SBBCheckboxColors.DARK_ENABLED
         else -> if (disabled) SBBCheckboxColors.LIGHT_DISABLED else SBBCheckboxColors.LIGHT_ENABLED
     }
 

diff --git a/...bb/compose_mds/beta/container/SBBGroup.kt → ...ds/composables/container/SBBContentBox.kt b/...bb/compose_mds/beta/container/SBBGroup.kt → ...ds/composables/container/SBBContentBox.kt
@@ -1,57 +1,62 @@
-package ch.sbb.compose_mds.beta.container
+package ch.sbb.compose_mds.composables.container
 
 import SBBTheme
 import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import ch.sbb.compose_mds.beta.ExperimentalSBBComponent
+import ch.sbb.compose_mds.theme.SBBSpacing
 
 /***
- * Implementation of the SBB Container.
+ * Implementation of the SBB Container variant "Content-Box".
+ *
+ * Use [contentPadding] instead of [modifier] to change the padding of the content
  *
  * For a complete definition of the component, please visit [digital.sbb.ch](https://digital.sbb.ch/de/design-system/mobile/components/container/)
  */
-@ExperimentalSBBComponent
 @Composable
-fun SBBGroup(
+fun SBBContentBox(
     modifier: Modifier = Modifier,
+    contentPadding: PaddingValues = PaddingValues(all = SBBSpacing.Medium),
     content: @Composable ColumnScope.() -> Unit,
 ) {
     Column(
         modifier = modifier
-            .fillMaxWidth()
-            .background(
-                color = MaterialTheme.colorScheme.surfaceVariant,
-                shape = RoundedCornerShape(16.dp),
-            ),
+            .clip(shape = RoundedCornerShape(size = SBBSpacing.Medium))
+            .background(color = MaterialTheme.colorScheme.surfaceVariant)
+            .padding(contentPadding)
+            .clipToBounds(),
         content = content,
     )
 }
 
-@OptIn(ExperimentalSBBComponent::class)
 @Preview(showBackground = true)
 @Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-private fun Preview_SBBGroup() {
+private fun Preview_SBBContentBox() {
     SBBTheme {
         Surface {
             Box(modifier = Modifier.padding(16.dp)) {
-                SBBGroup(modifier = Modifier.height(100.dp)) {
-
+                SBBContentBox {
+                    Text(
+                        text = "Preview",
+                        style = SBBTheme.materialTypography.bodyMedium,
+                    )
                 }
             }
         }
     }
-}
+}
diff --git a/...se-mds/src/main/java/ch/sbb/compose_mds/composables/notificationBox/SBBNotificationBox.kt b/...se-mds/src/main/java/ch/sbb/compose_mds/composables/notificationBox/SBBNotificationBox.kt
@@ -1,4 +1,4 @@
-package ch.sbb.compose_mds.beta.notificationBox
+package ch.sbb.compose_mds.composables.notificationBox
 
 import SBBTheme
 import android.content.res.Configuration

diff --git a/...s/src/main/java/ch/sbb/compose_mds/composables/notificationBox/SBBNotificationBoxStyle.kt b/...s/src/main/java/ch/sbb/compose_mds/composables/notificationBox/SBBNotificationBoxStyle.kt
@@ -1,6 +1,5 @@
-package ch.sbb.compose_mds.beta.notificationBox
+package ch.sbb.compose_mds.composables.notificationBox
 
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
@@ -45,7 +44,7 @@ internal fun configSBBNotificationBoxTokens(): SBBNotificationBoxTokens =
         override val warning: SBBNotificationBoxStyle
             @Composable get() = SBBNotificationBoxStyle(
                 icon = SBBIcons.Small.CircleExclamationPointSmall,
-                iconColor = if (isSystemInDarkTheme()) PrimitiveColors.peach else PrimitiveColors.black,
+                iconColor = if (SBBTheme.isDarkMode) PrimitiveColors.peach else PrimitiveColors.black,
                 backgroundColor = PrimitiveColors.peach,
             )
         override val success: SBBNotificationBoxStyle
@@ -57,7 +56,7 @@ internal fun configSBBNotificationBoxTokens(): SBBNotificationBoxTokens =
         override val information: SBBNotificationBoxStyle
             @Composable get() = SBBNotificationBoxStyle(
                 icon = SBBIcons.Small.CircleInformationSmall,
-                iconColor = if (isSystemInDarkTheme()) PrimitiveColors.white else PrimitiveColors.black,
+                iconColor = if (SBBTheme.isDarkMode) PrimitiveColors.white else PrimitiveColors.black,
                 backgroundColor = PrimitiveColors.smoke,
             )
     }
diff --git a/compose-mds/src/main/java/ch/sbb/compose_mds/theme/SBBTheme.kt b/compose-mds/src/main/java/ch/sbb/compose_mds/theme/SBBTheme.kt
@@ -9,9 +9,9 @@ import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.text.font.FontFamily
-import ch.sbb.compose_mds.beta.notificationBox.LocalSBBNotificationBoxTheme
-import ch.sbb.compose_mds.beta.notificationBox.SBBNotificationBoxTokens
-import ch.sbb.compose_mds.beta.notificationBox.configSBBNotificationBoxTokens
+import ch.sbb.compose_mds.composables.notificationBox.LocalSBBNotificationBoxTheme
+import ch.sbb.compose_mds.composables.notificationBox.SBBNotificationBoxTokens
+import ch.sbb.compose_mds.composables.notificationBox.configSBBNotificationBoxTokens
 import ch.sbb.compose_mds.theme.LocalSBBTypography
 import ch.sbb.compose_mds.theme.SBBTypography
 import ch.sbb.compose_mds.theme.context.LocalThemeContext

diff --git a/example/build.gradle.kts b/example/build.gradle.kts
@@ -63,8 +63,8 @@ android {
 roborazzi {
     generateComposePreviewRobolectricTests {
         enable = true
-        packages = listOf("ch.sbb.compose_mds.example.pages",)
-        includePrivatePreviews = true
+        packages = listOf("ch.sbb.compose_mds.example.pages")
+        includePrivatePreviews = false
     }
     outputDir.set(file("../goldenfiles"))
 }
@@ -79,8 +79,8 @@ dependencies {
     implementation(libs.material3)
     implementation(project(":compose-mds"))
     implementation(libs.androidx.navigation.compose)
-    testImplementation(libs.junit)
 
+    testImplementation(libs.junit)
     testImplementation(libs.robolectric)
     testImplementation(libs.androidx.ui.test.android)
     testImplementation(libs.androidx.ui.test.junit4.android)

diff --git a/example/src/main/java/ch/sbb/compose_mds/example/MainActivity.kt b/example/src/main/java/ch/sbb/compose_mds/example/MainActivity.kt
@@ -5,21 +5,32 @@ import android.content.res.Configuration
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
+import ch.sbb.compose_mds.beta.ExperimentalSBBComponent
 import ch.sbb.compose_mds.composables.header.SBBHeader
 import ch.sbb.compose_mds.composables.header.Small
+import ch.sbb.compose_mds.beta.segmentedButton.SBBButtonSegment
+import ch.sbb.compose_mds.beta.segmentedButton.SBBSegmentedButton
 import ch.sbb.compose_mds.example.pages.ButtonPage
 import ch.sbb.compose_mds.example.pages.CheckboxPage
 import ch.sbb.compose_mds.example.pages.ColorPage
+import ch.sbb.compose_mds.example.pages.ContainerPage
 import ch.sbb.compose_mds.example.pages.HeaderPage
 import ch.sbb.compose_mds.example.pages.IconPage
 import ch.sbb.compose_mds.example.pages.LoadingIndicatorPage
@@ -33,19 +44,29 @@ import ch.sbb.compose_mds.example.pages.SwitchPage
 import ch.sbb.compose_mds.example.pages.TabBarPage
 import ch.sbb.compose_mds.example.pages.TextFieldPage
 import ch.sbb.compose_mds.example.pages.TypographyPage
+import ch.sbb.compose_mds.theme.SBBSpacing
 
 class MainActivity : ComponentActivity() {
+    @OptIn(ExperimentalSBBComponent::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            SBBTheme() {
+            val isSystemInDarkTheme = isSystemInDarkTheme()
+            var isDarkTheme by remember { mutableStateOf(isSystemInDarkTheme) }
+            SBBTheme(darkTheme = isDarkTheme) {
                 val navController = rememberNavController()
                 Scaffold(
                     topBar = {
-                        SBBHeader.Small(
-                            title = "SBB DSM Android",
-                            navController = navController,
-                        )
+                        Column(verticalArrangement = Arrangement.spacedBy(SBBSpacing.XSmall)) {
+                            SBBHeader.Small(
+                                title = "SBB DSM Android",
+                                navController = navController
+                            )
+                            DarkLightThemeSelection(
+                                onSelectionChanged = { selected -> isDarkTheme = selected },
+                                selection = isDarkTheme,
+                            )
+                        }
                     },
                 ) {
                     Box(modifier = Modifier.padding(it)) {
@@ -69,6 +90,7 @@ class MainActivity : ComponentActivity() {
                             composable("slider") { SliderPage() }
                             composable("notification-box") { NotificationBoxPage() }
                             composable("tab-bar") { TabBarPage() }
+                            composable("container") { ContainerPage() }
                         }
                     }
                 }
@@ -77,6 +99,29 @@ class MainActivity : ComponentActivity() {
     }
 }
 
+@OptIn(ExperimentalSBBComponent::class)
+@Composable
+private fun DarkLightThemeSelection(
+    selection: Boolean,
+    onSelectionChanged: (Boolean) -> Unit
+) {
+    SBBSegmentedButton(
+        modifier = Modifier.padding(horizontal = SBBSpacing.XSmall),
+        onSelectionChanged = onSelectionChanged,
+        selection = selection,
+        segments = listOf(
+            SBBButtonSegment(
+                label = "Light Theme",
+                value = false
+            ),
+            SBBButtonSegment(
+                label = "Dark Theme",
+                value = true
+            ),
+        ),
+    )
+}
+
 @Preview(showBackground = true)
 @Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable