feat(material_theme): implement `pick_list::Catalog`

11 files changed, 258 insertions, 147 deletions

diff --git a/Cargo.lock b/Cargo.lock
index a324ccd..0143fbd 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -650,16 +650,10 @@ dependencies = [
 ]
 
 [[package]]
-name = "camino"
-version = "1.1.9"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8b96ec4966b5813e2c0507c1f86115c8c5abaadc3980879c3424042a02fd1ad3"
-
-[[package]]
 name = "cc"
-version = "1.2.17"
+version = "1.2.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fcb57c740ae1daf453ae85f16e37396f672b039e00d9d866e07ddb24e328e3a"
+checksum = "8e3a13707ac958681c13b39b458c073d0d9bc8a22cb1b2f4c8e55eb72c13f362"
 dependencies = [
  "jobserver",
  "libc",
@@ -860,9 +854,9 @@ dependencies = [
 
 [[package]]
 name = "cosmic-text"
-version = "0.13.2"
+version = "0.14.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e418dd4f5128c3e93eab12246391c54a20c496811131f85754dc8152ee207892"
+checksum = "1db686e755000c93f73a3acc78be56a71e3efb83ed92886f45faea2b9485bad7"
 dependencies = [
  "bitflags 2.9.0",
  "fontdb 0.16.2",
@@ -948,7 +942,7 @@ checksum = "43da5946c66ffcc7745f48db692ffbb10a83bfe0afd96235c5c2a4fb23994929"
 [[package]]
 name = "cryoglyph"
 version = "0.1.0"
-source = "git+https://github.com/iced-rs/cryoglyph.git?rev=be2defe4a13fd7c97c6f4c81e8e085463eb578dc#be2defe4a13fd7c97c6f4c81e8e085463eb578dc"
+source = "git+https://github.com/iced-rs/cryoglyph.git?rev=a456d1c17bbcf33afcca41d9e5e299f9f1193819#a456d1c17bbcf33afcca41d9e5e299f9f1193819"
 dependencies = [
  "cosmic-text",
  "etagere",
@@ -1929,7 +1923,7 @@ dependencies = [
 [[package]]
 name = "iced"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "iced_core",
  "iced_debug",
@@ -1964,7 +1958,7 @@ dependencies = [
 [[package]]
 name = "iced_beacon"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "bincode",
  "futures",
@@ -2005,7 +1999,7 @@ dependencies = [
 [[package]]
 name = "iced_core"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "bitflags 2.9.0",
  "bytes",
@@ -2034,7 +2028,7 @@ dependencies = [
 [[package]]
 name = "iced_debug"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "iced_beacon",
  "iced_core",
@@ -2044,7 +2038,7 @@ dependencies = [
 [[package]]
 name = "iced_devtools"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "iced_debug",
  "iced_program",
@@ -2054,7 +2048,7 @@ dependencies = [
 [[package]]
 name = "iced_dialog"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced_dialog?branch=iced%2Fpersonal#6bd6c48b55201116791c59e73779613d617615c7"
+source = "git+https://github.com/pml68/iced_dialog?branch=iced%2Fpersonal#c0f931f38ac83e77cfb937d4166fa8d2a23988cf"
 dependencies = [
  "iced_core",
  "iced_widget",
@@ -2084,7 +2078,7 @@ dependencies = [
 [[package]]
 name = "iced_futures"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "futures",
  "iced_core",
@@ -2098,7 +2092,7 @@ dependencies = [
 [[package]]
 name = "iced_graphics"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "bitflags 2.9.0",
  "bytemuck",
@@ -2118,7 +2112,7 @@ dependencies = [
 [[package]]
 name = "iced_program"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "iced_graphics",
  "iced_runtime",
@@ -2127,7 +2121,7 @@ dependencies = [
 [[package]]
 name = "iced_renderer"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "iced_graphics",
  "iced_tiny_skia",
@@ -2139,7 +2133,7 @@ dependencies = [
 [[package]]
 name = "iced_runtime"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "bytes",
  "iced_core",
@@ -2152,10 +2146,11 @@ dependencies = [
 [[package]]
 name = "iced_tiny_skia"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "bytemuck",
  "cosmic-text",
+ "iced_debug",
  "iced_graphics",
  "kurbo 0.10.4",
  "log",
@@ -2168,7 +2163,7 @@ dependencies = [
 [[package]]
 name = "iced_wgpu"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "bitflags 2.9.0",
  "bytemuck",
@@ -2176,6 +2171,7 @@ dependencies = [
  "futures",
  "glam",
  "guillotiere",
+ "iced_debug",
  "iced_graphics",
  "log",
  "resvg",
@@ -2187,7 +2183,7 @@ dependencies = [
 [[package]]
 name = "iced_widget"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "iced_renderer",
  "iced_runtime",
@@ -2202,7 +2198,7 @@ dependencies = [
 [[package]]
 name = "iced_winit"
 version = "0.14.0-dev"
-source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#add48e518b3423bed980983ddc373cfb8f5e8980"
+source = "git+https://github.com/pml68/iced?branch=feat%2Frehighlight-on-redraw#4f933c3b8919a115fa82d9aee94ec5b1c81c4dfe"
 dependencies = [
  "iced_debug",
  "iced_program",
@@ -2625,9 +2621,9 @@ checksum = "2a385b1be4e5c3e362ad2ffa73c392e53f031eaa5b7d648e64cd87f27f6063d7"
 
 [[package]]
 name = "linux-raw-sys"
-version = "0.9.3"
+version = "0.9.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fe7db12097d22ec582439daf8618b8fdd1a7bef6270e9af3b1ebcd30893cf413"
+checksum = "cd945864f07fe9f5371a27ad7b52a172b4b499999f1d97574c9fa68373937e12"
 
 [[package]]
 name = "litemap"
@@ -4036,15 +4032,15 @@ dependencies = [
  "bitflags 2.9.0",
  "errno",
  "libc",
- "linux-raw-sys 0.9.3",
+ "linux-raw-sys 0.9.4",
  "windows-sys 0.59.0",
 ]
 
 [[package]]
 name = "rustls"
-version = "0.23.25"
+version = "0.23.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "822ee9188ac4ec04a2f0531e55d035fb2de73f18b41a63c70c2712503b6fb13c"
+checksum = "df51b5869f3a441595eac5e8ff14d486ff285f7b8c0df8770e49c3b56351f0f0"
 dependencies = [
  "once_cell",
  "rustls-pki-types",
@@ -4176,9 +4172,9 @@ dependencies = [
 
 [[package]]
 name = "self_cell"
-version = "1.1.0"
+version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c2fdfc24bc566f839a2da4c4295b82db7d25a24253867d5c64355abb5799bdbe"
+checksum = "0f7d95a54511e0c7be3f51e8867aa8cf35148d7b9445d44de2f943e2b206e749"
 
 [[package]]
 name = "semver"
@@ -4653,6 +4649,8 @@ name = "theme_test"
 version = "0.0.1"
 dependencies = [
  "iced",
+ "iced_anim",
+ "iced_dialog",
  "material_theme",
 ]
 
@@ -6156,9 +6154,9 @@ checksum = "b9cc00251562a284751c9973bace760d86c0276c471b4be569fe6b068ee97a56"
 
 [[package]]
 name = "xml-rs"
-version = "0.8.25"
+version = "0.8.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c5b940ebc25896e71dd073bad2dbaa2abfe97b0a391415e22ad1326d9c54e3c4"
+checksum = "a62ce76d9b56901b19a74f19431b0d8b3bc7ca4ad685a746dfd78ca8f4fc6bda"
 
 [[package]]
 name = "xmlwriter"
diff --git a/material_theme/Cargo.toml b/material_theme/Cargo.toml
index e88ce92..eef9605 100644
--- a/material_theme/Cargo.toml
+++ b/material_theme/Cargo.toml
@@ -30,6 +30,7 @@ features = ["derive"]
 optional = true
 
 [lints.rust]
+missing_debug_implementations = "deny"
 unsafe_code = "deny"
 unused_results = "deny"
 
diff --git a/material_theme/README.md b/material_theme/README.md
new file mode 100644
index 0000000..da5a1ec
--- /dev/null
+++ b/material_theme/README.md
@@ -0,0 +1,3 @@
+# material_theme
+
+## A [Material3](https://m3.material.io) inspired custom theme for [`iced`](https://iced.rs)
diff --git a/material_theme/assets/themes/dark.toml b/material_theme/assets/themes/dark.toml
index 4d23fc8..18a369f 100644
--- a/material_theme/assets/themes/dark.toml
+++ b/material_theme/assets/themes/dark.toml
@@ -1,6 +1,7 @@
 name = "Dark"
 
 shadow = "#000000"
+scrim = "#4d000000"
 
 [primary]
 color = "#9bd4a1"
diff --git a/material_theme/assets/themes/light.toml b/material_theme/assets/themes/light.toml
index 5288c84..a7115c4 100644
--- a/material_theme/assets/themes/light.toml
+++ b/material_theme/assets/themes/light.toml
@@ -1,6 +1,7 @@
 name = "Light"
 
 shadow = "#000000"
+scrim = "#4d000000"
 
 [primary]
 color = "#34693f"
diff --git a/material_theme/src/lib.rs b/material_theme/src/lib.rs
index ba9d478..521af2c 100644
--- a/material_theme/src/lib.rs
+++ b/material_theme/src/lib.rs
@@ -9,6 +9,7 @@ pub mod container;
 #[cfg(feature = "dialog")]
 pub mod dialog;
 pub mod menu;
+pub mod pick_list;
 pub mod scrollable;
 pub mod text;
 pub mod utils;
@@ -62,6 +63,12 @@ impl Default for Theme {
     }
 }
 
+impl std::fmt::Display for Theme {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "{}", self.name)
+    }
+}
+
 impl Base for Theme {
     fn base(&self) -> Style {
         Style {
@@ -121,6 +128,8 @@ pub struct ColorScheme {
     pub outline: Outline,
     #[serde(with = "color_serde")]
     pub shadow: Color,
+    #[serde(with = "color_serde")]
+    pub scrim: Color,
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Deserialize)]
@@ -222,49 +231,11 @@ pub struct Outline {
     pub variant: Color,
 }
 
-pub fn parse_argb(s: &str) -> Option<Color> {
-    let hex = s.strip_prefix('#').unwrap_or(s);
-
-    let parse_channel = |from: usize, to: usize| {
-        let num =
-            usize::from_str_radix(&hex[from..=to], 16).ok()? as f32 / 255.0;
-
-        // If we only got half a byte (one letter), expand it into a full byte (two letters)
-        Some(if from == to { num + num * 16.0 } else { num })
-    };
-
-    Some(match hex.len() {
-        3 => Color::from_rgb(
-            parse_channel(0, 0)?,
-            parse_channel(1, 1)?,
-            parse_channel(2, 2)?,
-        ),
-        4 => Color::from_rgba(
-            parse_channel(1, 1)?,
-            parse_channel(2, 2)?,
-            parse_channel(3, 3)?,
-            parse_channel(0, 0)?,
-        ),
-        6 => Color::from_rgb(
-            parse_channel(0, 1)?,
-            parse_channel(2, 3)?,
-            parse_channel(4, 5)?,
-        ),
-        8 => Color::from_rgba(
-            parse_channel(2, 3)?,
-            parse_channel(4, 5)?,
-            parse_channel(6, 7)?,
-            parse_channel(0, 1)?,
-        ),
-        _ => None?,
-    })
-}
-
 mod color_serde {
     use iced_widget::core::Color;
     use serde::{Deserialize, Deserializer};
 
-    use super::parse_argb;
+    use super::utils::parse_argb;
 
     pub fn deserialize<'de, D>(deserializer: D) -> Result<Color, D::Error>
     where
diff --git a/material_theme/src/menu.rs b/material_theme/src/menu.rs
index d1bebec..9f43c72 100644
--- a/material_theme/src/menu.rs
+++ b/material_theme/src/menu.rs
@@ -2,6 +2,7 @@ use iced_widget::core::{Background, border};
 use iced_widget::overlay::menu::{Catalog, Style, StyleFn};
 
 use super::Theme;
+use crate::utils::{HOVERED_LAYER_OPACITY, mix};
 
 impl Catalog for Theme {
     type Class<'a> = StyleFn<'a, Self>;
@@ -16,14 +17,17 @@ impl Catalog for Theme {
 }
 
 pub fn default(theme: &Theme) -> Style {
-    let surface = theme.colorscheme.surface;
-    let secondary = theme.colorscheme.secondary;
+    let colors = theme.colorscheme.surface;
 
     Style {
         border: border::rounded(4),
-        background: Background::Color(surface.surface_container.base),
-        text_color: surface.on_surface,
-        selected_background: Background::Color(secondary.secondary_container),
-        selected_text_color: secondary.on_secondary_container,
+        background: Background::Color(colors.surface_container.base),
+        text_color: colors.on_surface,
+        selected_background: Background::Color(mix(
+            colors.surface_container.base,
+            colors.on_surface,
+            HOVERED_LAYER_OPACITY,
+        )),
+        selected_text_color: colors.on_surface,
     }
 }
diff --git a/material_theme/src/pick_list.rs b/material_theme/src/pick_list.rs
new file mode 100644
index 0000000..c589100
--- /dev/null
+++ b/material_theme/src/pick_list.rs
@@ -0,0 +1,40 @@
+use iced_widget::core::{Background, border};
+use iced_widget::pick_list::{Catalog, Status, Style, StyleFn};
+
+use super::Theme;
+
+impl Catalog for Theme {
+    type Class<'a> = StyleFn<'a, Self>;
+
+    fn default<'a>() -> <Self as Catalog>::Class<'a> {
+        Box::new(default)
+    }
+
+    fn style(
+        &self,
+        class: &<Self as Catalog>::Class<'_>,
+        status: Status,
+    ) -> Style {
+        class(self, status)
+    }
+}
+
+pub fn default(theme: &Theme, status: Status) -> Style {
+    let surface = theme.colorscheme.surface;
+
+    let active = Style {
+        text_color: surface.on_surface,
+        placeholder_color: surface.on_surface_variant,
+        handle_color: surface.on_surface_variant,
+        background: Background::Color(surface.surface_container.highest),
+        border: border::rounded(4),
+    };
+
+    match status {
+        Status::Active => active,
+        Status::Hovered | Status::Opened { .. } => Style {
+            background: Background::Color(surface.surface_container.highest),
+            ..active
+        },
+    }
+}
diff --git a/material_theme/src/utils.rs b/material_theme/src/utils.rs
index 7efec9b..a05bc62 100644
--- a/material_theme/src/utils.rs
+++ b/material_theme/src/utils.rs
@@ -28,6 +28,44 @@ pub fn shadow_from_elevation(elevation: f32, color: Color) -> Shadow {
     }
 }
 
+pub fn parse_argb(s: &str) -> Option<Color> {
+    let hex = s.strip_prefix('#').unwrap_or(s);
+
+    let parse_channel = |from: usize, to: usize| {
+        let num =
+            usize::from_str_radix(&hex[from..=to], 16).ok()? as f32 / 255.0;
+
+        // If we only got half a byte (one letter), expand it into a full byte (two letters)
+        Some(if from == to { num + num * 16.0 } else { num })
+    };
+
+    Some(match hex.len() {
+        3 => Color::from_rgb(
+            parse_channel(0, 0)?,
+            parse_channel(1, 1)?,
+            parse_channel(2, 2)?,
+        ),
+        4 => Color::from_rgba(
+            parse_channel(1, 1)?,
+            parse_channel(2, 2)?,
+            parse_channel(3, 3)?,
+            parse_channel(0, 0)?,
+        ),
+        6 => Color::from_rgb(
+            parse_channel(0, 1)?,
+            parse_channel(2, 3)?,
+            parse_channel(4, 5)?,
+        ),
+        8 => Color::from_rgba(
+            parse_channel(2, 3)?,
+            parse_channel(4, 5)?,
+            parse_channel(6, 7)?,
+            parse_channel(0, 1)?,
+        ),
+        _ => None?,
+    })
+}
+
 pub fn mix(color1: Color, color2: Color, p2: f32) -> Color {
     if p2 <= 0.0 {
         return color1;
diff --git a/theme_test/Cargo.toml b/theme_test/Cargo.toml
index 34008eb..5ccbefa 100644
--- a/theme_test/Cargo.toml
+++ b/theme_test/Cargo.toml
@@ -5,4 +5,6 @@ edition = "2024"
 
 [dependencies]
 iced.workspace = true
-material_theme = { path = "../material_theme" }
+iced_anim.workspace = true
+iced_dialog.workspace = true
+material_theme = { path = "../material_theme", features = ["dialog", "animate"] }
diff --git a/theme_test/src/main.rs b/theme_test/src/main.rs
index 26358c8..9826fe9 100644
--- a/theme_test/src/main.rs
+++ b/theme_test/src/main.rs
@@ -1,9 +1,9 @@
 use iced::Element;
-use iced::widget::{button, column, container, row, text};
-use material_theme::Theme;
-use material_theme::button::{
-    elevated, filled_tonal, outlined, text as text_style,
-};
+use iced::Length::Fill;
+use iced::widget::{button, column, container, pick_list, row};
+use iced_anim::{Animated, Animation, Event};
+use iced_dialog::dialog;
+use material_theme::button::{elevated, filled_tonal, outlined, text};
 use material_theme::container::{
     error, error_container, inverse_surface, primary, primary_container,
     secondary, secondary_container, surface, surface_container,
@@ -11,78 +11,130 @@ use material_theme::container::{
     surface_container_lowest, tertiary, tertiary_container,
 };
 use material_theme::text::surface_variant;
+use material_theme::{DARK, LIGHT, Theme};
 
 fn main() -> iced::Result {
-    iced::application(|| {}, (), view)
-        .theme(|_| material_theme::LIGHT.clone())
+    iced::application(State::default, State::update, State::view)
+        .theme(|state| state.theme.value().clone())
         .run()
 }
 
+#[allow(dead_code)]
 #[derive(Debug, Clone)]
 enum Message {
     Noop,
+    OpenDialog,
+    CloseDialog,
+    SwitchTheme(Event<Theme>),
 }
 
-fn view(_: &()) -> Element<'_, Message, Theme> {
-    container(
-        row![
-            column![
-                button("Disabled"),
-                button("Filled").on_press(Message::Noop),
-                button("Filled Tonal")
-                    .on_press(Message::Noop)
-                    .style(filled_tonal),
-                button("Elevated").on_press(Message::Noop).style(elevated),
-                button("Outlined").on_press(Message::Noop).style(outlined),
-                button("Text").on_press(Message::Noop).style(text_style),
-                button("Text Disabled").style(text_style),
-            ]
-            .spacing(10),
-            column![
-                text("None"),
-                container("Primary").padding(8).style(primary),
-                container("Primary Container")
-                    .padding(8)
-                    .style(primary_container),
-                container("Secondary").padding(8).style(secondary),
-                container("Secondary Container")
-                    .padding(8)
-                    .style(secondary_container),
-                container("Tertiary").padding(8).style(tertiary),
-                container("Tertiary Container")
-                    .padding(8)
-                    .style(tertiary_container),
-                container("Error").padding(8).style(error),
-                container("Error Container")
-                    .padding(8)
-                    .style(error_container),
-                container("Surface").padding(8).style(surface),
-                container(text("Surface Variant").style(surface_variant))
+#[derive(Debug, Default)]
+pub struct State {
+    show_dialog: bool,
+    theme: Animated<Theme>,
+}
+
+impl State {
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::Noop => {}
+            Message::OpenDialog => {
+                self.show_dialog = true;
+            }
+            Message::CloseDialog => {
+                self.show_dialog = false;
+            }
+            Message::SwitchTheme(event) => {
+                self.theme.update(event);
+            }
+        }
+    }
+    fn view(&self) -> Element<'_, Message, Theme> {
+        let base = container(
+            row![
+                column![
+                    button("Disabled"),
+                    button("Filled").on_press(Message::Noop),
+                    button("Filled Tonal")
+                        .on_press(Message::Noop)
+                        .style(filled_tonal),
+                    button("Elevated").on_press(Message::Noop).style(elevated),
+                    button("Outlined").on_press(Message::Noop).style(outlined),
+                    button("Text").on_press(Message::Noop).style(text),
+                    button("Text Disabled").style(text),
+                ]
+                .spacing(10),
+                column![
+                    container("None").padding(8),
+                    container("Primary").padding(8).style(primary),
+                    container("Primary Container")
+                        .padding(8)
+                        .style(primary_container),
+                    container("Secondary").padding(8).style(secondary),
+                    container("Secondary Container")
+                        .padding(8)
+                        .style(secondary_container),
+                    container("Tertiary").padding(8).style(tertiary),
+                    container("Tertiary Container")
+                        .padding(8)
+                        .style(tertiary_container),
+                    container("Error").padding(8).style(error),
+                    container("Error Container")
+                        .padding(8)
+                        .style(error_container),
+                    container("Surface").padding(8).style(surface),
+                    container(
+                        iced::widget::text("Surface Variant")
+                            .style(surface_variant)
+                    )
                     .padding(8)
                     .style(surface),
-                container("Inverse Surface")
-                    .padding(8)
-                    .style(inverse_surface),
-                container("Surface Container Lowest")
-                    .padding(8)
-                    .style(surface_container_lowest),
-                container("Surface Container Low")
-                    .padding(8)
-                    .style(surface_container_low),
-                container("Surface Container")
-                    .padding(8)
-                    .style(surface_container),
-                container("Surface Container High")
-                    .padding(8)
-                    .style(surface_container_high),
-                container("Surface Container Highest")
-                    .padding(8)
-                    .style(surface_container_highest),
+                    container("Inverse Surface")
+                        .padding(8)
+                        .style(inverse_surface),
+                    container("Surface Container Lowest")
+                        .padding(8)
+                        .style(surface_container_lowest),
+                    container("Surface Container Low")
+                        .padding(8)
+                        .style(surface_container_low),
+                    container("Surface Container")
+                        .padding(8)
+                        .style(surface_container),
+                    container("Surface Container High")
+                        .padding(8)
+                        .style(surface_container_high),
+                    container("Surface Container Highest")
+                        .padding(8)
+                        .style(surface_container_highest),
+                ]
+                .spacing(10),
+                pick_list(
+                    [LIGHT.clone(), DARK.clone()],
+                    Some(self.theme.target()),
+                    |theme| Message::SwitchTheme(theme.into())
+                )
+                .placeholder("Select a theme..."),
+                button("Open Dialog").on_press(Message::OpenDialog)
             ]
-            .spacing(10)
-        ]
-        .spacing(20),
-    )
-    .padding(12)
-    .into()
+            .spacing(20),
+        )
+        .width(Fill)
+        .height(Fill)
+        .padding(12);
+
+        let dialog =
+            dialog(self.show_dialog, base, iced::widget::text("Say Hi!"))
+                .title("This is a Dialog.")
+                .push_button(
+                    iced_dialog::button("Hi!").on_press(Message::CloseDialog),
+                )
+                .backdrop(|theme| theme.colorscheme.scrim)
+                .width(280)
+                .height(187);
+
+        Animation::new(&self.theme, dialog)
+            .on_update(Message::SwitchTheme)
+            .into()
+    }
 }