feat: MultiSelect support for segmented buttons

examples/cosmic/src/window.rs

@@ -13,7 +13,7 @@ use cosmic::{
     theme::{self, Theme},
     widget::{
         header_bar, icon, list, nav_bar, nav_button, scrollable,
-        segmented_button::{self, cosmic::vertical_view_switcher},
+        segmented_button::{self, cosmic::vertical_view_switcher, Selectable, SingleSelect},
         settings,
     },
     Element, ElementExt,
@@ -136,7 +136,7 @@ pub struct Window {
     debug: bool,
     demo: demo::State,
     desktop: desktop::State,
-    nav_bar_pages: segmented_button::State<Page>,
+    nav_bar_pages: segmented_button::State<SingleSelect, Page>,
     nav_bar_toggled_condensed: bool,
     nav_bar_toggled: bool,
     page: Page,

examples/cosmic/src/window/demo.rs

@@ -3,7 +3,9 @@ use cosmic::{
     iced::{Alignment, Length},
     theme::{Button as ButtonTheme, Theme},
     widget::{
-        button, settings,
+        button,
+        segmented_button::{MultiSelect, Selectable, SingleSelect},
+        settings,
         spin_button::{SpinButtonModel, SpinMessage},
         toggler,
     },
@@ -25,12 +27,21 @@ pub enum DemoView {
     TabC,
 }
 
+pub enum MultiOption {
+    OptionA,
+    OptionB,
+    OptionC,
+    OptionD,
+    OptionE,
+}
+
 #[derive(Clone, Copy, Debug)]
 pub enum Message {
     ButtonPressed,
     CheckboxToggled(bool),
     Debug(bool),
     IconTheme(segmented_button::Key),
+    MultiSelection(segmented_button::Key),
     PickListSelected(&'static str),
     RowSelected(usize),
     Selection(segmented_button::Key),
@@ -48,13 +59,14 @@ pub enum Output {
 
 pub struct State {
     pub checkbox_value: bool,
-    pub icon_theme: segmented_button::State<&'static str>,
+    pub icon_theme: segmented_button::State<SingleSelect, &'static str>,
+    pub multi_selection: segmented_button::State<MultiSelect, MultiOption>,
     pub pick_list_selected: Option<&'static str>,
-    pub selection: segmented_button::State<()>,
+    pub selection: segmented_button::State<SingleSelect, ()>,
     pub slider_value: f32,
     pub spin_button: SpinButtonModel<i32>,
     pub toggler_value: bool,
-    pub view_switcher: segmented_button::State<DemoView>,
+    pub view_switcher: segmented_button::State<SingleSelect, DemoView>,
 }
 
 impl Default for State {
@@ -74,6 +86,13 @@ impl Default for State {
                 .insert("Choice B", ())
                 .insert("Choice C", ())
                 .build(),
+            multi_selection: segmented_button::State::builder()
+                .insert("Option A", MultiOption::OptionA)
+                .insert("Option B", MultiOption::OptionB)
+                .insert("Option C", MultiOption::OptionC)
+                .insert("Option D", MultiOption::OptionD)
+                .insert("Option E", MultiOption::OptionE)
+                .build(),
             view_switcher: segmented_button::State::builder()
                 .insert_active("Controls", DemoView::TabA)
                 .insert("Segmented Button", DemoView::TabB)
@@ -91,6 +110,7 @@ impl State {
             Message::Debug(value) => return Some(Output::Debug(value)),
             Message::PickListSelected(value) => self.pick_list_selected = Some(value),
             Message::RowSelected(row) => println!("Selected row {row}"),
+            Message::MultiSelection(key) => self.multi_selection.activate(key),
             Message::Selection(key) => self.selection.activate(key),
             Message::SliderChanged(value) => self.slider_value = value,
             Message::SpinButton(msg) => self.spin_button.update(msg),
@@ -226,9 +246,9 @@ impl State {
                         .spacing(8)
                         .on_activate(Message::Selection)
                         .into(),
-                    cosmic::iced::widget::text("Vertical").into(),
+                    cosmic::iced::widget::text("Vertical (Multi-Select)").into(),
-                    vertical_segmented_selection(&self.selection)
+                    vertical_segmented_selection(&self.multi_selection)
-                        .on_activate(Message::Selection)
+                        .on_activate(Message::MultiSelection)
                         .into(),
                     cosmic::iced::widget::text("Vertical With Spacing").into(),
                     cosmic::iced::widget::row(vec![

src/widget/nav_bar.rs

@@ -10,11 +10,11 @@ use iced_core::Color;
 
 use crate::{theme, Theme};
 
-use super::segmented_button::{self, cosmic::vertical_view_switcher};
+use super::segmented_button::{self, cosmic::vertical_view_switcher, SingleSelect};
 
 /// A container holding a vertical view switcher with the n style
 pub fn nav_bar<Data, Message>(
-    state: &segmented_button::State<Data>,
+    state: &segmented_button::State<SingleSelect, Data>,
     on_activate: impl Fn(segmented_button::Key) -> Message + 'static,
 ) -> iced::widget::Container<Message, crate::Renderer>
 where
@@ -26,7 +26,7 @@ where
         .button_padding([16, 10, 16, 10])
         .button_spacing(8)
         .icon_size(16)
-        .spacing(14)
+        .spacing(8)
         .apply(scrollable)
         .apply(container)
         .height(Length::Fill)

src/widget/segmented_button/cosmic.rs

@@ -1,15 +1,20 @@
 // Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
 
-use super::{HorizontalSegmentedButton, SegmentedButton, State, VerticalSegmentedButton};
+use super::{
+    state::Selectable, HorizontalSegmentedButton, SegmentedButton, State, VerticalSegmentedButton,
+};
 
 /// Appears as a collection of tabs for developing a tabbed interface.
 ///
 /// The data for the widget comes from a [`State`] that is maintained the application.
 #[must_use]
-pub fn horizontal_view_switcher<Message, Data>(
+pub fn horizontal_view_switcher<Selection, Message, Data>(
-    state: &State<Data>,
+    state: &State<Selection, Data>,
-) -> HorizontalSegmentedButton<Message, crate::Renderer> {
+) -> HorizontalSegmentedButton<Selection, Message, crate::Renderer>
+where
+    Selection: Selectable,
+{
     SegmentedButton::new(&state.inner)
         .button_padding([16, 0, 16, 0])
         .button_height(48)
@@ -21,9 +26,12 @@ pub fn horizontal_view_switcher<Message, Data>(
 ///
 /// The data for the widget comes from a [`State`] that is maintained the application.
 #[must_use]
-pub fn horizontal_segmented_selection<Message, Data>(
+pub fn horizontal_segmented_selection<Selection, Message, Data>(
-    state: &State<Data>,
+    state: &State<Selection, Data>,
-) -> HorizontalSegmentedButton<Message, crate::Renderer> {
+) -> HorizontalSegmentedButton<Selection, Message, crate::Renderer>
+where
+    Selection: Selectable,
+{
     SegmentedButton::new(&state.inner)
         .button_padding([16, 0, 16, 0])
         .button_height(32)
@@ -35,9 +43,12 @@ pub fn horizontal_segmented_selection<Message, Data>(
 ///
 /// The data for the widget comes from a [`State`] that is maintained the application.
 #[must_use]
-pub fn vertical_segmented_selection<Message, Data>(
+pub fn vertical_segmented_selection<Selection, Message, Data>(
-    state: &State<Data>,
+    state: &State<Selection, Data>,
-) -> VerticalSegmentedButton<Message, crate::Renderer> {
+) -> VerticalSegmentedButton<Selection, Message, crate::Renderer>
+where
+    Selection: Selectable,
+{
     SegmentedButton::new(&state.inner)
         .button_padding([16, 0, 16, 0])
         .button_height(32)
@@ -49,9 +60,12 @@ pub fn vertical_segmented_selection<Message, Data>(
 ///
 /// The data for the widget comes from a [`State`] that is maintained the application.
 #[must_use]
-pub fn vertical_view_switcher<Message, Data>(
+pub fn vertical_view_switcher<Selection, Message, Data>(
-    state: &State<Data>,
+    state: &State<Selection, Data>,
-) -> VerticalSegmentedButton<Message, crate::Renderer> {
+) -> VerticalSegmentedButton<Selection, Message, crate::Renderer>
+where
+    Selection: Selectable,
+{
     SegmentedButton::new(&state.inner)
         .button_padding([16, 0, 16, 0])
         .button_height(48)

src/widget/segmented_button/horizontal.rs

@@ -1,7 +1,7 @@
 // Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
 
-use super::state::State;
+use super::state::{Selectable, State};
 use super::style::StyleSheet;
 use super::widget::{SegmentedButton, SegmentedVariant};
 
@@ -12,31 +12,34 @@ use iced_native::layout;
 pub struct Horizontal;
 
 /// Horizontal [`SegmentedButton`].
-pub type HorizontalSegmentedButton<'a, Message, Renderer> =
+pub type HorizontalSegmentedButton<'a, Selection, Message, Renderer> =
-    SegmentedButton<'a, Horizontal, Message, Renderer>;
+    SegmentedButton<'a, Horizontal, Selection, Message, Renderer>;
 
 /// Horizontal implementation of the [`SegmentedButton`].
 #[must_use]
-pub fn horizontal_segmented_button<Message, Renderer, Data>(
+pub fn horizontal_segmented_button<Selection, Message, Renderer, Data>(
-    state: &State<Data>,
+    state: &State<Selection, Data>,
-) -> SegmentedButton<Horizontal, Message, Renderer>
+) -> SegmentedButton<Horizontal, Selection, Message, Renderer>
 where
     Renderer: iced_native::Renderer
         + iced_native::text::Renderer
         + iced_native::image::Renderer
         + iced_native::svg::Renderer,
     Renderer::Theme: StyleSheet,
+    Selection: Selectable,
 {
     SegmentedButton::new(&state.inner)
 }
 
-impl<'a, Message, Renderer> SegmentedVariant for SegmentedButton<'a, Horizontal, Message, Renderer>
+impl<'a, Selection, Message, Renderer> SegmentedVariant
+    for SegmentedButton<'a, Horizontal, Selection, Message, Renderer>
 where
     Renderer: iced_native::Renderer
         + iced_native::text::Renderer
         + iced_native::image::Renderer
         + iced_native::svg::Renderer,
     Renderer::Theme: StyleSheet,
+    Selection: Selectable,
 {
     type Renderer = Renderer;
 

src/widget/segmented_button/mod.rs

@@ -45,13 +45,16 @@
 pub mod cosmic;
 
 mod horizontal;
+
 mod state;
 mod style;
 mod vertical;
 mod widget;
 
 pub use self::horizontal::{horizontal_segmented_button, Horizontal, HorizontalSegmentedButton};
-pub use self::state::{Content, Key, SecondaryState, SharedWidgetState, State};
+pub use self::state::{
+    Content, Key, MultiSelect, SecondaryState, Selectable, SharedWidgetState, SingleSelect, State,
+};
 pub use self::style::{Appearance, ButtonAppearance, ButtonStatusAppearance, StyleSheet};
 pub use self::vertical::{vertical_segmented_button, Vertical, VerticalSegmentedButton};
 pub use self::widget::{SegmentedButton, SegmentedVariant};

src/widget/segmented_button/state.rs

@@ -3,7 +3,7 @@
 
 use derive_setters::Setters;
 use slotmap::{SecondaryMap, SlotMap};
-use std::borrow::Cow;
+use std::{borrow::Cow, collections::HashSet};
 
 use crate::widget::IconSource;
 
@@ -13,15 +13,15 @@ slotmap::new_key_type! {
 }
 
 /// Contains all state for interacting with a segmented button.
-pub struct State<Data> {
+pub struct State<Selection, Data> {
     /// State that is shared with widget drawing.
-    pub inner: SharedWidgetState,
+    pub inner: SharedWidgetState<Selection>,
 
     /// State unique to the application.
     pub data: SecondaryState<Data>,
 }
 
-impl<Data> Default for State<Data> {
+impl<Selection: Default, Data> Default for State<Selection, Data> {
     fn default() -> Self {
         Self {
             inner: SharedWidgetState::default(),
@@ -32,43 +32,97 @@ impl<Data> Default for State<Data> {
 
 /// State which is most useful to the widget.
 #[derive(Default)]
-pub struct SharedWidgetState {
+pub struct SharedWidgetState<Variant> {
     /// The content used for drawing segmented buttons.
     pub buttons: SlotMap<Key, Content>,
 
-    /// The actively-selected segmented button.
+    /// Manages selections
-    pub active: Key,
+    pub selection: Variant,
 }
 
-/// State which is most useful to the application.
+impl<Data> State<SingleSelect, Data> {
-pub type SecondaryState<Data> = SecondaryMap<Key, Data>;
+    pub fn activate(&mut self, key: Key) {
-
+        self.inner.selection.activate(key);
-impl<Data> State<Data> {
-    #[must_use]
-    pub fn builder() -> Builder<Data> {
-        Builder(Self::default())
     }
 
-    /// Activates this button.
+    pub fn deactivate(&mut self, key: Key) {
-    pub fn activate(&mut self, key: Key) {
+        self.inner.selection.deactivate(key);
-        self.inner.active = key;
+    }
+
+    #[must_use]
+    pub fn is_active(&self, key: Key) -> bool {
+        self.inner.selection.is_active(key)
     }
 
     /// The ID of the active button.
     #[must_use]
     pub fn active(&self) -> Key {
-        self.inner.active
+        self.inner.selection.active
     }
 
     /// Get the application data for the active button.
     #[must_use]
     pub fn active_data(&self) -> Option<&Data> {
-        self.data(self.active())
+        self.data.get(self.inner.selection.active)
+    }
+
+    /// Mutable application data for the active button.
+    #[must_use]
+    pub fn active_data_mut(&mut self) -> Option<&mut Data> {
+        self.data.get_mut(self.inner.selection.active)
+    }
+}
+
+impl<Data> State<MultiSelect, Data> {
+    pub fn activate(&mut self, key: Key) {
+        if self.inner.selection.is_active(key) {
+            self.inner.selection.deactivate(key);
+        } else {
+            self.inner.selection.activate(key);
+        }
+    }
+
+    pub fn deactivate(&mut self, key: Key) {
+        self.inner.selection.deactivate(key);
+    }
+
+    #[must_use]
+    pub fn is_active(&self, key: Key) -> bool {
+        self.inner.selection.is_active(key)
+    }
+
+    /// The IDs of the active buttons.
+    pub fn active(&self) -> impl Iterator<Item = Key> + '_ {
+        self.inner.selection.active.iter().copied()
+    }
+
+    /// Get the application data for the active buttons.
+    pub fn active_data(&self) -> impl Iterator<Item = (Key, &Data)> {
+        self.inner.buttons.keys().filter_map(|key| {
+            if self.inner.selection.is_active(key) {
+                self.data.get(key).map(|data| (key, data))
+            } else {
+                None
+            }
+        })
+    }
+}
+
+/// State which is most useful to the application.
+pub type SecondaryState<Data> = SecondaryMap<Key, Data>;
+
+impl<Selection, Data> State<Selection, Data>
+where
+    Selection: Selectable,
+{
+    #[must_use]
+    pub fn builder() -> Builder<Selection, Data> {
+        Builder(Self::default())
     }
 
     /// Convenience method for batching multiple operations
     #[must_use]
-    pub fn batch(&mut self) -> Batch<Data> {
+    pub fn batch(&mut self) -> Batch<Selection, Data> {
         Batch(self)
     }
 
@@ -106,17 +160,104 @@ impl<Data> State<Data> {
     /// Inserts and activates a button.
     pub fn insert_active(&mut self, content: impl Into<Content>, data: Data) -> Key {
         let key = self.insert(content, data);
-        self.activate(key);
+        self.inner.selection.activate(key);
         key
     }
 
     /// Removes a button.
     pub fn remove(&mut self, key: Key) -> Option<Data> {
         self.inner.buttons.remove(key);
+        self.inner.selection.deactivate(key);
         self.data.remove(key)
     }
 }
 
+pub trait Selectable: Default {
+    fn activate(&mut self, key: Key);
+
+    fn deactivate(&mut self, key: Key);
+
+    fn is_active(&self, key: Key) -> bool;
+}
+
+#[derive(Default)]
+pub struct SingleSelect {
+    pub active: Key,
+}
+
+impl Selectable for SingleSelect {
+    fn activate(&mut self, key: Key) {
+        self.active = key;
+    }
+
+    fn deactivate(&mut self, _key: Key) {
+        self.active = Key::default();
+    }
+
+    fn is_active(&self, key: Key) -> bool {
+        self.active == key
+    }
+}
+
+#[derive(Default)]
+pub struct MultiSelect {
+    pub active: HashSet<Key>,
+}
+
+impl Selectable for MultiSelect {
+    fn activate(&mut self, key: Key) {
+        self.active.insert(key);
+    }
+
+    fn deactivate(&mut self, key: Key) {
+        self.active.remove(&key);
+    }
+
+    fn is_active(&self, key: Key) -> bool {
+        self.active.contains(&key)
+    }
+}
+
+pub struct Builder<Selection, Data>(State<Selection, Data>);
+
+impl<Selection: Selectable, Data> Builder<Selection, Data> {
+    pub fn insert(mut self, content: impl Into<Content>, data: Data) -> Self {
+        self.0.insert(content, data);
+        self
+    }
+
+    pub fn insert_active(mut self, content: impl Into<Content>, data: Data) -> Self {
+        self.0.insert_active(content, data);
+        self
+    }
+
+    pub fn build(self) -> State<Selection, Data> {
+        self.0
+    }
+}
+
+/// Convenience type for batching multiple operations
+pub struct Batch<'a, Selection, Data>(&'a mut State<Selection, Data>);
+
+impl<'a, Selection: Selectable, Data> Batch<'a, Selection, Data> {
+    /// Insert a new button.
+    pub fn insert(self, content: impl Into<Content>, data: Data) -> Self {
+        self.0.insert(content, data);
+        self
+    }
+
+    /// Inserts and activates a button.
+    pub fn insert_active(self, content: impl Into<Content>, data: Data) -> Self {
+        self.0.insert_active(content, data);
+        self
+    }
+
+    /// Removes a button.
+    pub fn remove(&mut self, key: Key) {
+        self.0.remove(key);
+    }
+}
+
 /// Data to be drawn in a segmented button.
 #[derive(Default, Setters)]
 pub struct Content {
@@ -149,43 +290,3 @@ impl From<Cow<'static, str>> for Content {
         Content::default().text(text)
     }
 }
-
-pub struct Builder<Data>(State<Data>);
-
-impl<Data> Builder<Data> {
-    pub fn insert(mut self, content: impl Into<Content>, data: Data) -> Self {
-        self.0.insert(content, data);
-        self
-    }
-
-    pub fn insert_active(mut self, content: impl Into<Content>, data: Data) -> Self {
-        self.0.insert_active(content, data);
-        self
-    }
-
-    pub fn build(self) -> State<Data> {
-        self.0
-    }
-}
-
-/// Convenience type for batching multiple operations
-pub struct Batch<'a, Data>(&'a mut State<Data>);
-
-impl<'a, Data> Batch<'a, Data> {
-    /// Insert a new button.
-    pub fn insert(self, content: impl Into<Content>, data: Data) -> Self {
-        self.0.insert(content, data);
-        self
-    }
-
-    /// Inserts and activates a button.
-    pub fn insert_active(self, content: impl Into<Content>, data: Data) -> Self {
-        self.0.insert_active(content, data);
-        self
-    }
-
-    /// Removes a button.
-    pub fn remove(&mut self, key: Key) {
-        self.0.remove(key);
-    }
-}

src/widget/segmented_button/vertical.rs

@@ -1,7 +1,7 @@
 // Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
 
-use super::state::State;
+use super::state::{Selectable, State};
 use super::style::StyleSheet;
 use super::widget::{SegmentedButton, SegmentedVariant};
 
@@ -12,31 +12,34 @@ use iced_native::layout;
 pub struct Vertical;
 
 /// Vertical [`SegmentedButton`].
-pub type VerticalSegmentedButton<'a, Message, Renderer> =
+pub type VerticalSegmentedButton<'a, Selection, Message, Renderer> =
-    SegmentedButton<'a, Vertical, Message, Renderer>;
+    SegmentedButton<'a, Vertical, Selection, Message, Renderer>;
 
 /// Vertical implementation of the [`SegmentedButton`].
 #[must_use]
-pub fn vertical_segmented_button<Message, Renderer, Data>(
+pub fn vertical_segmented_button<Selection, Message, Renderer, Data>(
-    state: &State<Data>,
+    state: &State<Selection, Data>,
-) -> SegmentedButton<Vertical, Message, Renderer>
+) -> SegmentedButton<Vertical, Selection, Message, Renderer>
 where
     Renderer: iced_native::Renderer
         + iced_native::text::Renderer
         + iced_native::image::Renderer
         + iced_native::svg::Renderer,
     Renderer::Theme: StyleSheet,
+    Selection: Selectable,
 {
     SegmentedButton::new(&state.inner)
 }
 
-impl<'a, Message, Renderer> SegmentedVariant for SegmentedButton<'a, Vertical, Message, Renderer>
+impl<'a, Selection, Message, Renderer> SegmentedVariant
+    for SegmentedButton<'a, Vertical, Selection, Message, Renderer>
 where
     Renderer: iced_native::Renderer
         + iced_native::text::Renderer
         + iced_native::image::Renderer
         + iced_native::svg::Renderer,
     Renderer::Theme: StyleSheet,
+    Selection: Selectable,
 {
     type Renderer = Renderer;
 

src/widget/segmented_button/widget.rs

@@ -3,7 +3,7 @@
 
 use std::marker::PhantomData;
 
-use super::state::{Key, SharedWidgetState};
+use super::state::{Key, Selectable, SharedWidgetState};
 use super::style::StyleSheet;
 
 use derive_setters::Setters;
@@ -35,17 +35,18 @@ pub trait SegmentedVariant {
 }
 
 #[derive(Setters)]
-pub struct SegmentedButton<'a, Variant, Message, Renderer>
+pub struct SegmentedButton<'a, Variant, Selection, Message, Renderer>
 where
     Renderer: iced_native::Renderer
         + iced_native::text::Renderer
         + iced_native::image::Renderer
         + iced_native::svg::Renderer,
     Renderer::Theme: StyleSheet,
+    Selection: Selectable,
 {
     /// Contains application state also used for drawing.
     #[setters(skip)]
-    pub(super) state: &'a SharedWidgetState,
+    pub(super) state: &'a SharedWidgetState<Selection>,
     /// Padding around a button.
     pub(super) button_padding: [u16; 4],
     /// Desired height of a button.
@@ -77,7 +78,8 @@ where
     variant: PhantomData<Variant>,
 }
 
-impl<'a, Variant, Message, Renderer> SegmentedButton<'a, Variant, Message, Renderer>
+impl<'a, Variant, Selection, Message, Renderer>
+    SegmentedButton<'a, Variant, Selection, Message, Renderer>
 where
     Renderer: iced_native::Renderer
         + iced_native::text::Renderer
@@ -85,9 +87,10 @@ where
         + iced_native::svg::Renderer,
     Renderer::Theme: StyleSheet,
     Self: SegmentedVariant<Renderer = Renderer>,
+    Selection: Selectable,
 {
     #[must_use]
-    pub fn new(state: &'a SharedWidgetState) -> Self {
+    pub fn new(state: &'a SharedWidgetState<Selection>) -> Self {
         Self {
             state,
             button_padding: [4, 4, 4, 4],
@@ -153,8 +156,8 @@ where
     }
 }
 
-impl<'a, Variant, Message, Renderer> Widget<Message, Renderer>
+impl<'a, Variant, Selection, Message, Renderer> Widget<Message, Renderer>
-    for SegmentedButton<'a, Variant, Message, Renderer>
+    for SegmentedButton<'a, Variant, Selection, Message, Renderer>
 where
     Renderer: iced_native::Renderer
         + iced_native::text::Renderer
@@ -162,6 +165,7 @@ where
         + iced_native::svg::Renderer,
     Renderer::Theme: StyleSheet,
     Self: SegmentedVariant<Renderer = Renderer>,
+    Selection: Selectable,
     Message: 'static + Clone,
 {
     fn tag(&self) -> tree::Tag {
@@ -273,7 +277,7 @@ where
         for (nth, (key, content)) in self.state.buttons.iter().enumerate() {
             let mut bounds = self.variant_button_bounds(bounds, nth);
 
-            let (status_appearance, font) = if self.state.active == key {
+            let (status_appearance, font) = if self.state.selection.is_active(key) {
                 (appearance.active, &self.font_active)
             } else if state.hovered == key {
                 (appearance.hover, &self.font_hovered)
@@ -392,7 +396,8 @@ where
     }
 }
 
-impl<'a, Variant, Message, Renderer> From<SegmentedButton<'a, Variant, Message, Renderer>>
+impl<'a, Variant, Selection, Message, Renderer>
+    From<SegmentedButton<'a, Variant, Selection, Message, Renderer>>
     for Element<'a, Message, Renderer>
 where
     Renderer: iced_native::Renderer
@@ -401,11 +406,13 @@ where
         + iced_native::svg::Renderer
         + 'a,
     Renderer::Theme: StyleSheet,
-    SegmentedButton<'a, Variant, Message, Renderer>: SegmentedVariant<Renderer = Renderer>,
+    SegmentedButton<'a, Variant, Selection, Message, Renderer>:
+        SegmentedVariant<Renderer = Renderer>,
     Variant: 'static,
+    Selection: Selectable,
     Message: 'static + Clone,
 {
-    fn from(mut widget: SegmentedButton<'a, Variant, Message, Renderer>) -> Self {
+    fn from(mut widget: SegmentedButton<'a, Variant, Selection, Message, Renderer>) -> Self {
         if widget.state.buttons.is_empty() {
             widget.spacing = 0;
         }