Add live demo links to READMEs, enable theme switching in Gallery app, and update deployment workflow for web support.

.github/workflows/deploy-gallery-pages.yml

@@ -31,11 +31,17 @@ jobs:
           channel: "stable"
 
       - name: Flutter version
+        working-directory: apps/gallery
         run: flutter --version
 
       - name: Enable web
+        working-directory: apps/gallery
         run: flutter config --enable-web
 
+      - name: Create web
+        working-directory: apps/gallery
+        run: flutter create . --platforms web --overwrite
+
       - name: Pub get
         working-directory: apps/gallery
         run: flutter pub get

README.md

@@ -4,8 +4,18 @@ This is a starter monorepo for **Material 3 Expressive (M3E)** Flutter packages.
 
 - `packages/m3e_design` – design language core (tokens, ThemeExtension, motion)
 - `packages/m3e_collection` – re-exports all component packages
-- `packages/icon_button_m3e` – example component (uses `m3e_design`)
+- `packages/icon_button_m3e` – example component
 - `packages/split_button_m3e` – example split button component
+- `packages/app_bar_m3e`
+- `packages/button_group_m3e`
+- `packages/button_m3e`
+- `packages/fab_m3e`
+- `packages/loading_indicator_m3e`
+- `packages/navigation_rail_m3e`
+- `packages/navigation_bar_m3e`
+- `packages/progress_indicator_m3e`
+- `packages/slider_m3e`
+- `packages/toolbar_m3e`
 - `apps/gallery` – showcase app that consumes `m3e_collection`
 
 ## Quick start
@@ -22,3 +32,21 @@ flutter run
 ## Structure
 
 See `melos.yaml`, `analysis_options.yaml`, and the package-level READMEs.
+
+
+---
+
+## Live demo (Gallery)
+
+A web demo of the M3E components is published via GitHub Pages using the provided workflow in `.github/workflows/deploy-gallery-pages.yml`.
+
+Open: https://emilymoonstone.github.io/material_3_expressive/
+
+To run locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

apps/gallery/README.md

@@ -14,3 +14,20 @@ A few resources to get you started if this is your first Flutter project:
 For help getting started with Flutter development, view the
 [online documentation](https://docs.flutter.dev/), which offers tutorials,
 samples, guidance on mobile development, and a full API reference.
+
+
+---
+
+## Live demo
+
+This Gallery app is deployed to GitHub Pages using the workflow in `.github/workflows/deploy-gallery-pages.yml`.
+
+Open: https://emilymoonstone.github.io/material_3_expressive/
+
+To run locally:
+
+```sh
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

apps/gallery/lib/main.dart

@@ -13,23 +13,53 @@ import 'package:m3e_gallery/sections/toolbar_section.dart';
 
 void main() => runApp(const GalleryApp());
 
-class GalleryApp extends StatelessWidget {
+class GalleryApp extends StatefulWidget {
   const GalleryApp({super.key});
 
+  @override
+  State<GalleryApp> createState() => _GalleryAppState();
+}
+
+class _GalleryAppState extends State<GalleryApp> {
+  ThemeMode _mode = ThemeMode.light;
+
+  void _toggleMode() {
+    setState(() {
+      _mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
-    final base = ThemeData(useMaterial3: true, colorSchemeSeed: Colors.purple);
+    final baseLight = ThemeData(
+      useMaterial3: true,
+      colorSchemeSeed: Colors.purple,
+      brightness: Brightness.light,
+    );
+    final baseDark = ThemeData(
+      useMaterial3: true,
+      colorSchemeSeed: Colors.purple,
+      brightness: Brightness.dark,
+    );
     return MaterialApp(
       title: 'M3E Gallery',
-      theme: withM3ETheme(base),
+      theme: withM3ETheme(baseLight),
-      home: const GalleryHome(),
+      darkTheme: withM3ETheme(baseDark),
+      themeMode: _mode,
+      home: GalleryHome(
+        isDark: _mode == ThemeMode.dark,
+        onToggleBrightness: _toggleMode,
+      ),
       debugShowCheckedModeBanner: false,
     );
   }
 }
 
 class GalleryHome extends StatefulWidget {
-  const GalleryHome({super.key});
+  const GalleryHome({super.key, required this.isDark, required this.onToggleBrightness});
+
+  final bool isDark;
+  final VoidCallback onToggleBrightness;
 
   @override
   State<GalleryHome> createState() => _GalleryHomeState();
@@ -45,10 +75,16 @@ class _GalleryHomeState extends State<GalleryHome> {
     return Scaffold(
       appBar: AppBarM3E(
         titleText: 'M3E Gallery',
-        actions: const [
+        actions: [
-          Icon(Icons.search),
+          IconButton(
-          SizedBox(width: 8),
+            tooltip: widget.isDark ? 'Switch to light mode' : 'Switch to dark mode',
-          Icon(Icons.more_vert),
+            onPressed: widget.onToggleBrightness,
+            icon: Icon(widget.isDark ? Icons.dark_mode : Icons.light_mode),
+          ),
+          const SizedBox(width: 8),
+          const Icon(Icons.search),
+          const SizedBox(width: 8),
+          const Icon(Icons.more_vert),
         ],
       ),
       body: const SectionedGallery(),

packages/app_bar_m3e/README.md

@@ -88,3 +88,21 @@ Override by supplying `backgroundColor`, `foregroundColor`, `toolbarHeight`, etc
 ## License
 
 MIT
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/button_group_m3e/README.md

@@ -98,3 +98,21 @@ ButtonGroupM3E(
   ],
 )
 ```
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/button_m3e/README.md

@@ -5,3 +5,21 @@ Material 3 **Expressive Buttons** for Flutter — sizes XS→XL, round/square sh
 toggle selection, and 5 styles (filled/tonal/elevated/outlined/text).
 
 See `lib/src/button_tokens_adapter.dart` for measurements & color mapping.
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/fab_m3e/README.md

@@ -91,3 +91,21 @@ FabMenuM3E(
 ## License
 
 MIT
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/icon_button_m3e/README.md

@@ -90,3 +90,21 @@ flutter run
 ## License
 
 MIT
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/icon_button_m3e/example/README.md

@@ -14,3 +14,21 @@ A few resources to get you started if this is your first Flutter project:
 For help getting started with Flutter development, view the
 [online documentation](https://docs.flutter.dev/), which offers tutorials,
 samples, guidance on mobile development, and a full API reference.
+
+
+---
+
+## Live demo (Gallery)
+
+Try this component in the main Gallery app (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally from repo root:
+
+```sh
+cd ../../../../apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/loading_indicator_m3e/README.md

@@ -54,3 +54,21 @@ Pass `semanticLabel` and `semanticValue` to announce loading status if needed.
 ## License
 - Android/Compose implementation © Google, Apache-2.0
 - This package MIT
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/m3e_collection/README.md

@@ -3,3 +3,20 @@
 Single import that re-exports all M3E component packages plus `m3e_design`.
 
 The packages `material_new_shapes` by [ulims](https://github.com/ulims) and `expressive_refresh` by [alvaronp](https://github.com/alvaronp) are reexported to complete the collection.
+
+---
+
+## Live demo (Gallery)
+
+Explore the components in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/m3e_design/README.md

@@ -2,3 +2,21 @@
 
 Design language core for Material 3 Expressive (Flutter).
 Provides ThemeExtension and token accessors for color, typography, shapes, spacing, motion.
+
+
+---
+
+## Live demo (Gallery)
+
+Explore the components using this design system in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/navigation_bar_m3e/README.md

@@ -75,3 +75,21 @@ Use `badgeCount` for numeric badges or `badgeDot: true` for a small dot. Colors
 ## License
 
 MIT
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/navigation_rail_m3e/README.md

@@ -49,3 +49,20 @@ NavigationRailM3E(
 ```
 
 See the `/example` app for a runnable demo.
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/progress_indicator_m3e/README.md

@@ -12,3 +12,21 @@
 - `flatS`  — track 8, gap 4, dot Ø4, dotOffset 2, trailing 8
 - `wavyM`  — track 4, wave amp 3, period 40, gap 4, dot Ø4, dotOffset 2, trailing 10
 - `wavyL`  — track 8, wave amp 3, period 40, gap 4, dot Ø4, dotOffset 2, trailing 14
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/slider_m3e/README.md

@@ -67,3 +67,21 @@ RangeSliderM3E(
 ## License
 
 MIT
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/split_button_m3e/README.md

@@ -131,3 +131,21 @@ SplitButtonM3E<int>(
 ## License
 
 MIT
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/split_button_m3e/example/README.md

@@ -14,3 +14,21 @@ A few resources to get you started if this is your first Flutter project:
 For help getting started with Flutter development, view the
 [online documentation](https://docs.flutter.dev/), which offers tutorials,
 samples, guidance on mobile development, and a full API reference.
+
+
+---
+
+## Live demo (Gallery)
+
+Try this component in the main Gallery app (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally from repo root:
+
+```sh
+cd ../../../../apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_

packages/toolbar_m3e/README.md

@@ -76,3 +76,21 @@ Set `maxInlineActions` to the number of actions that should stay inline. Any add
 ## License
 
 MIT
+
+
+---
+
+## Live demo (Gallery)
+
+Explore this component in the M3E Gallery (GitHub Pages):
+
+https://<your-github-username>.github.io/material_3_expressive/
+
+To run the Gallery locally:
+
+```sh
+cd apps/gallery
+flutter run -d chrome
+```
+
+_Last updated: 2025-10-23_