feat(ui): floating header

apps/design_system_gallery/lib/app/gallery_app.directories.g.dart

@@ -120,6 +120,8 @@ import 'package:design_system_gallery/components/toolbar/stream_app_bar.dart'
     as _design_system_gallery_components_toolbar_stream_app_bar;
 import 'package:design_system_gallery/components/toolbar/stream_bottom_app_bar.dart'
     as _design_system_gallery_components_toolbar_stream_bottom_app_bar;
+import 'package:design_system_gallery/components/toolbar/stream_bottom_nav_bar.dart'
+    as _design_system_gallery_components_toolbar_stream_bottom_nav_bar;
 import 'package:design_system_gallery/components/toolbar/stream_sheet_header.dart'
     as _design_system_gallery_components_toolbar_stream_sheet_header;
 import 'package:design_system_gallery/primitives/colors.dart'
@@ -1232,6 +1234,23 @@ final directories = <_widgetbook.WidgetbookNode>[
               ),
             ],
           ),
+          _widgetbook.WidgetbookComponent(
+            name: 'StreamBottomNavBar',
+            useCases: [
+              _widgetbook.WidgetbookUseCase(
+                name: 'Playground',
+                builder:
+                    _design_system_gallery_components_toolbar_stream_bottom_nav_bar
+                        .buildStreamBottomNavBarPlayground,
+              ),
+              _widgetbook.WidgetbookUseCase(
+                name: 'Showcase',
+                builder:
+                    _design_system_gallery_components_toolbar_stream_bottom_nav_bar
+                        .buildStreamBottomNavBarShowcase,
+              ),
+            ],
+          ),
           _widgetbook.WidgetbookComponent(
             name: 'StreamSheetHeader',
             useCases: [

apps/design_system_gallery/lib/components/avatar/stream_avatar.dart

@@ -35,6 +35,11 @@ Widget buildStreamAvatarPlayground(BuildContext context) {
     description: 'Whether to show a border around the avatar.',
   );
 
+  final isFloating = context.knobs.boolean(
+    label: 'Is Floating',
+    description: 'Whether to show a drop shadow around the avatar.',
+  );
+
   final initials = context.knobs.string(
     label: 'Initials',
     initialValue: 'JD',
@@ -46,6 +51,7 @@ Widget buildStreamAvatarPlayground(BuildContext context) {
       imageUrl: (imageUrl?.isNotEmpty ?? false) ? imageUrl : null,
       size: size,
       showBorder: showBorder,
+      isFloating: isFloating,
       placeholder: (context) => Text(
         initials.substring(0, initials.length.clamp(0, 2)).toUpperCase(),
       ),

apps/design_system_gallery/lib/components/avatar/stream_avatar_group.dart

@@ -43,11 +43,17 @@ Widget buildStreamAvatarGroupPlayground(BuildContext context) {
     description: 'Use images or show initials placeholder.',
   );
 
+  final isFloating = context.knobs.boolean(
+    label: 'Is Floating',
+    description: 'Whether to show a drop shadow around each individual avatar.',
+  );
+
   final palette = context.streamColorScheme.avatarPalette;
 
   return Center(
     child: StreamAvatarGroup(
       size: size,
+      isFloating: isFloating,
       children: List.generate(
         avatarCount,
         (index) => StreamAvatar(

apps/design_system_gallery/lib/components/avatar/stream_avatar_stack.dart

@@ -58,6 +58,11 @@ Widget buildStreamAvatarStackPlayground(BuildContext context) {
     description: 'Use images or show initials placeholder.',
   );
 
+  final isFloating = context.knobs.boolean(
+    label: 'Is Floating',
+    description: 'Whether to show a drop shadow around each individual avatar.',
+  );
+
   final colorScheme = context.streamColorScheme;
   final palette = colorScheme.avatarPalette;
 
@@ -66,6 +71,7 @@ Widget buildStreamAvatarStackPlayground(BuildContext context) {
       size: size,
       overlap: overlap,
       max: maxAvatars,
+      isFloating: isFloating,
       children: [
         for (var i = 0; i < avatarCount; i++)
           StreamAvatar(

apps/design_system_gallery/lib/components/toolbar/stream_app_bar.dart

@@ -53,31 +53,62 @@ Widget buildStreamAppBarPlayground(BuildContext context) {
     description: 'Horizontal gap between leading, heading, and trailing.',
   );
 
-  return Align(
-    alignment: Alignment.topCenter,
-    child: StreamAppBar(
-      style: StreamAppBarStyle(
-        padding: EdgeInsets.all(padding),
-        spacing: spacing,
-      ),
-      leading: showLeading
-          ? StreamButton.icon(
-              icon: Icon(context.streamIcons.chevronLeft),
-              style: StreamButtonStyle.secondary,
-              type: StreamButtonType.ghost,
-              onPressed: () {},
-            )
-          : null,
-      title: (title != null && title.isNotEmpty) ? Text(title) : null,
-      subtitle: (subtitle != null && subtitle.isNotEmpty) ? Text(subtitle) : null,
-      trailing: showTrailing
-          ? StreamButton.icon(
-              icon: Icon(context.streamIcons.plus),
-              onPressed: () {},
-            )
-          : null,
+  final floating = context.knobs.boolean(
+    label: 'Floating',
+    description:
+        'When true, the app bar floats above content with a gradient fade '
+        'instead of a solid background and a bottom border.',
+  );
+
+  final colorScheme = context.streamColorScheme;
+
+  final Widget bar = StreamAppBar(
+    primary: false,
+    style: StreamAppBarStyle(
+      behavior: floating ? StreamAppBarBehavior.floating : StreamAppBarBehavior.regular,
+      padding: EdgeInsets.all(padding),
+      spacing: spacing,
     ),
+    leading: showLeading
+        ? StreamButton.icon(
+            icon: Icon(context.streamIcons.chevronLeft),
+            style: StreamButtonStyle.secondary,
+            type: floating ? StreamButtonType.outline : StreamButtonType.ghost,
+            isFloating: floating,
+            onPressed: () {},
+          )
+        : null,
+    title: (title != null && title.isNotEmpty) ? Text(title) : null,
+    subtitle: (subtitle != null && subtitle.isNotEmpty) ? Text(subtitle) : null,
+    trailing: showTrailing
+        ? StreamButton.icon(
+            icon: Icon(context.streamIcons.plus),
+            isFloating: floating,
+            onPressed: () {},
+          )
+        : null,
   );
+
+  if (floating) {
+    return Stack(
+      children: [
+        Positioned.fill(
+          child: ColoredBox(
+            color: colorScheme.backgroundApp,
+            child: Container(
+              margin: const EdgeInsets.symmetric(horizontal: 32),
+              decoration: BoxDecoration(
+                color: colorScheme.accentPrimary,
+              ),
+            ),
+          ),
+        ),
+        Align(alignment: Alignment.topCenter, child: bar),
+      ],
+    );
+  }
+
+  return Align(alignment: Alignment.topCenter, child: bar);
 }
 
 // =============================================================================
@@ -227,6 +258,31 @@ Widget buildStreamAppBarShowcase(BuildContext context) {
             ),
           ),
           SizedBox(height: spacing.md),
+          _AppBarExample(
+            label: 'Floating — gradient fade over content',
+            bar: _FloatingAppBarPreview(
+              bar: StreamAppBar(
+                automaticallyImplyLeading: false,
+                primary: false,
+                style: const StreamAppBarStyle(behavior: StreamAppBarBehavior.floating),
+                leading: StreamButton.icon(
+                  icon: Icon(context.streamIcons.chevronLeft),
+                  style: StreamButtonStyle.secondary,
+                  type: StreamButtonType.outline,
+                  isFloating: true,
+                  onPressed: () {},
+                ),
+                title: const Text('Group chat'),
+                subtitle: const Text('5 members, 3 online'),
+                trailing: StreamButton.icon(
+                  icon: Icon(context.streamIcons.plus),
+                  isFloating: true,
+                  onPressed: () {},
+                ),
+              ),
+            ),
+          ),
+          SizedBox(height: spacing.md),
           const _AutoImplyLeadingDemo(),
         ],
       ),
@@ -303,6 +359,41 @@ class _AutoImplyLeadingDemo extends StatelessWidget {
   }
 }
 
+/// Renders a floating [StreamAppBar] over a simulated gradient background so
+/// the fade effect is clearly visible in the Showcase.
+class _FloatingAppBarPreview extends StatelessWidget {
+  const _FloatingAppBarPreview({required this.bar});
+
+  final Widget bar;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = context.streamColorScheme;
+    return SizedBox(
+      height: kStreamToolbarHeight * 2,
+      child: Stack(
+        children: [
+          Positioned.fill(
+            child: Container(
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [
+                    colorScheme.accentPrimary.withAlpha(0x40),
+                    colorScheme.backgroundApp,
+                  ],
+                ),
+              ),
+            ),
+          ),
+          Positioned(top: 0, left: 0, right: 0, child: bar),
+        ],
+      ),
+    );
+  }
+}
+
 class _AppBarExample extends StatelessWidget {
   const _AppBarExample({required this.label, required this.bar});