feat(applets): configurable applet overlap and padding increases

Cargo.toml

@@ -200,6 +200,7 @@ optional = true
 
 [dependencies.cosmic-panel-config]
 git = "https://github.com/pop-os/cosmic-panel"
+# path = "../cosmic-panel/cosmic-panel-config"
 optional = true
 
 [dependencies.ron]

src/applet/column.rs

@@ -0,0 +1,508 @@
+//! Distribute content vertically.
+use crate::iced;
+use iced::core::alignment::{self, Alignment};
+use iced::core::event::{self, Event};
+use iced::core::layout;
+use iced::core::mouse;
+use iced::core::overlay;
+use iced::core::renderer;
+use iced::core::widget::{Operation, Tree};
+use iced::core::{
+    Clipboard, Element, Layout, Length, Padding, Pixels, Rectangle, Shell, Size, Vector, Widget,
+    widget,
+};
+
+/// A container that distributes its contents vertically.
+///
+/// # Example
+/// ```no_run
+/// # mod iced { pub mod widget { pub use iced_widget::*; } }
+/// # pub type State = ();
+/// # pub type Element<'a, Message> = iced_widget::core::Element<'a, Message, iced_widget::Theme, iced_widget::Renderer>;
+/// use iced::widget::{button, column};
+///
+/// #[derive(Debug, Clone)]
+/// enum Message {
+///     // ...
+/// }
+///
+/// fn view(state: &State) -> Element<'_, Message> {
+///     column![
+///         "I am on top!",
+///         button("I am in the center!"),
+///         "I am below.",
+///     ].into()
+/// }
+/// ```
+#[allow(missing_debug_implementations)]
+#[must_use]
+pub struct Column<'a, Message, Theme = iced::Theme, Renderer = iced::Renderer> {
+    spacing: f32,
+    padding: Padding,
+    width: Length,
+    height: Length,
+    max_width: f32,
+    align: Alignment,
+    clip: bool,
+    children: Vec<Element<'a, Message, Theme, Renderer>>,
+}
+
+impl<'a, Message, Theme, Renderer> Column<'a, Message, Theme, Renderer>
+where
+    Renderer: iced::core::Renderer,
+{
+    /// Creates an empty [`Column`].
+    pub fn new() -> Self {
+        Self::from_vec(Vec::new())
+    }
+
+    /// Creates a [`Column`] with the given capacity.
+    pub fn with_capacity(capacity: usize) -> Self {
+        Self::from_vec(Vec::with_capacity(capacity))
+    }
+
+    /// Creates a [`Column`] with the given elements.
+    pub fn with_children(
+        children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
+    ) -> Self {
+        let iterator = children.into_iter();
+
+        Self::with_capacity(iterator.size_hint().0).extend(iterator)
+    }
+
+    /// Creates a [`Column`] from an already allocated [`Vec`].
+    ///
+    /// Keep in mind that the [`Column`] will not inspect the [`Vec`], which means
+    /// it won't automatically adapt to the sizing strategy of its contents.
+    ///
+    /// If any of the children have a [`Length::Fill`] strategy, you will need to
+    /// call [`Column::width`] or [`Column::height`] accordingly.
+    pub fn from_vec(children: Vec<Element<'a, Message, Theme, Renderer>>) -> Self {
+        Self {
+            spacing: 0.0,
+            padding: Padding::ZERO,
+            width: Length::Shrink,
+            height: Length::Shrink,
+            max_width: f32::INFINITY,
+            align: Alignment::Start,
+            clip: false,
+            children,
+        }
+    }
+
+    /// Sets the vertical spacing _between_ elements.
+    ///
+    /// Custom margins per element do not exist in iced. You should use this
+    /// method instead! While less flexible, it helps you keep spacing between
+    /// elements consistent.
+    pub fn spacing(mut self, amount: impl Into<Pixels>) -> Self {
+        self.spacing = amount.into().0;
+        self
+    }
+
+    /// Sets the [`Padding`] of the [`Column`].
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
+        self
+    }
+
+    /// Sets the width of the [`Column`].
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
+        self
+    }
+
+    /// Sets the height of the [`Column`].
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
+        self
+    }
+
+    /// Sets the maximum width of the [`Column`].
+    pub fn max_width(mut self, max_width: impl Into<Pixels>) -> Self {
+        self.max_width = max_width.into().0;
+        self
+    }
+
+    /// Sets the horizontal alignment of the contents of the [`Column`] .
+    pub fn align_x(mut self, align: impl Into<alignment::Horizontal>) -> Self {
+        self.align = Alignment::from(align.into());
+        self
+    }
+
+    /// Sets whether the contents of the [`Column`] should be clipped on
+    /// overflow.
+    pub fn clip(mut self, clip: bool) -> Self {
+        self.clip = clip;
+        self
+    }
+
+    /// Adds an element to the [`Column`].
+    pub fn push(mut self, child: impl Into<Element<'a, Message, Theme, Renderer>>) -> Self {
+        let child = child.into();
+        let child_size = child.as_widget().size_hint();
+
+        self.width = self.width.enclose(child_size.width);
+        self.height = self.height.enclose(child_size.height);
+
+        self.children.push(child);
+        self
+    }
+
+    /// Adds an element to the [`Column`], if `Some`.
+    #[must_use]
+    pub fn push_maybe(
+        self,
+        child: Option<impl Into<Element<'a, Message, Theme, Renderer>>>,
+    ) -> Self {
+        if let Some(child) = child {
+            self.push(child)
+        } else {
+            self
+        }
+    }
+
+    /// Extends the [`Column`] with the given children.
+    pub fn extend(
+        self,
+        children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
+    ) -> Self {
+        children.into_iter().fold(self, Self::push)
+    }
+}
+
+impl<Message, Renderer> Default for Column<'_, Message, Renderer>
+where
+    Renderer: iced::core::Renderer,
+{
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl<'a, Message, Theme, Renderer: iced::core::Renderer>
+    FromIterator<Element<'a, Message, Theme, Renderer>> for Column<'a, Message, Theme, Renderer>
+{
+    fn from_iter<T: IntoIterator<Item = Element<'a, Message, Theme, Renderer>>>(iter: T) -> Self {
+        Self::with_children(iter)
+    }
+}
+
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Column<'_, Message, Theme, Renderer>
+where
+    Renderer: iced::core::Renderer,
+{
+    fn children(&self) -> Vec<Tree> {
+        self.children.iter().map(Tree::new).collect()
+    }
+
+    fn state(&self) -> widget::tree::State {
+        widget::tree::State::new(State::default())
+    }
+
+    fn tag(&self) -> widget::tree::Tag {
+        widget::tree::Tag::of::<State>()
+    }
+
+    fn diff(&mut self, tree: &mut Tree) {
+        tree.diff_children(self.children.as_mut_slice());
+    }
+
+    fn size(&self) -> Size<Length> {
+        Size {
+            width: self.width,
+            height: self.height,
+        }
+    }
+
+    fn layout(
+        &self,
+        tree: &mut Tree,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits.max_width(self.max_width);
+
+        layout::flex::resolve(
+            layout::flex::Axis::Vertical,
+            renderer,
+            &limits,
+            self.width,
+            self.height,
+            self.padding,
+            self.spacing,
+            self.align,
+            &self.children,
+            &mut tree.children,
+        )
+    }
+
+    fn operate(
+        &self,
+        tree: &mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        operation: &mut dyn Operation,
+    ) {
+        operation.container(None, layout.bounds(), &mut |operation| {
+            self.children
+                .iter()
+                .zip(&mut tree.children)
+                .zip(layout.children())
+                .for_each(|((child, state), c_layout)| {
+                    child.as_widget().operate(
+                        state,
+                        c_layout.with_virtual_offset(layout.virtual_offset()),
+                        renderer,
+                        operation,
+                    );
+                });
+        });
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: Event,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+        viewport: &Rectangle,
+    ) -> event::Status {
+        let my_state = tree.state.downcast_mut::<State>();
+
+        if let Some(hovered) = my_state.hovered {
+            let child_layout = layout.children().nth(hovered);
+            if let Some(child_layout) = child_layout
+                && cursor.is_over(child_layout.bounds())
+            {
+                // if mouse event, we can skip checking other children
+                if let Event::Mouse(e) = &event {
+                    if !matches!(
+                        e,
+                        mouse::Event::CursorLeft | mouse::Event::ButtonReleased { .. }
+                    ) {
+                        return self.children[hovered].as_widget_mut().on_event(
+                            &mut tree.children[hovered],
+                            event,
+                            child_layout.with_virtual_offset(layout.virtual_offset()),
+                            cursor,
+                            renderer,
+                            clipboard,
+                            shell,
+                            viewport,
+                        );
+                    }
+                } else if let Event::Touch(t) = &event {
+                    if !matches!(
+                        t,
+                        iced::core::touch::Event::FingerLifted { .. }
+                            | iced::core::touch::Event::FingerLost { .. }
+                    ) {
+                        return self.children[hovered].as_widget_mut().on_event(
+                            &mut tree.children[hovered],
+                            event,
+                            child_layout.with_virtual_offset(layout.virtual_offset()),
+                            cursor,
+                            renderer,
+                            clipboard,
+                            shell,
+                            viewport,
+                        );
+                    }
+                }
+            } else {
+                my_state.hovered = None;
+            }
+        }
+
+        self.children
+            .iter_mut()
+            .enumerate()
+            .zip(&mut tree.children)
+            .zip(layout.children())
+            .map(|(((i, child), state), c_layout)| {
+                let mut cursor_virtual = cursor;
+                if matches!(
+                    event,
+                    Event::Mouse(mouse::Event::CursorMoved { .. } | mouse::Event::CursorEntered)
+                        | Event::Touch(
+                            iced_core::touch::Event::FingerMoved { .. }
+                                | iced_core::touch::Event::FingerPressed { .. }
+                        )
+                ) && cursor.is_over(c_layout.bounds())
+                {
+                    my_state.hovered = Some(i);
+                    return child.as_widget_mut().on_event(
+                        state,
+                        event.clone(),
+                        c_layout.with_virtual_offset(layout.virtual_offset()),
+                        cursor_virtual,
+                        renderer,
+                        clipboard,
+                        shell,
+                        viewport,
+                    );
+                } else if my_state.hovered.is_some_and(|h| i != h) {
+                    cursor_virtual = mouse::Cursor::Unavailable;
+                }
+
+                child.as_widget_mut().on_event(
+                    state,
+                    event.clone(),
+                    c_layout.with_virtual_offset(layout.virtual_offset()),
+                    cursor_virtual,
+                    renderer,
+                    clipboard,
+                    shell,
+                    viewport,
+                )
+            })
+            .fold(event::Status::Ignored, event::Status::merge)
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &Tree,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        viewport: &Rectangle,
+        renderer: &Renderer,
+    ) -> mouse::Interaction {
+        self.children
+            .iter()
+            .zip(&tree.children)
+            .zip(layout.children())
+            .map(|((child, state), c_layout)| {
+                child.as_widget().mouse_interaction(
+                    state,
+                    c_layout.with_virtual_offset(layout.virtual_offset()),
+                    cursor,
+                    viewport,
+                    renderer,
+                )
+            })
+            .max()
+            .unwrap_or_default()
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Theme,
+        style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        viewport: &Rectangle,
+    ) {
+        if let Some(clipped_viewport) = layout.bounds().intersection(viewport) {
+            let my_state = tree.state.downcast_ref::<State>();
+
+            let viewport = if self.clip {
+                &clipped_viewport
+            } else {
+                viewport
+            };
+
+            for (i, ((child, state), c_layout)) in self
+                .children
+                .iter()
+                .zip(&tree.children)
+                .zip(layout.children())
+                .filter(|(_, layout)| layout.bounds().intersects(viewport))
+                .enumerate()
+            {
+                child.as_widget().draw(
+                    state,
+                    renderer,
+                    theme,
+                    style,
+                    c_layout.with_virtual_offset(layout.virtual_offset()),
+                    if my_state.hovered.is_some_and(|h| i == h) {
+                        cursor
+                    } else {
+                        mouse::Cursor::Unavailable
+                    },
+                    viewport,
+                );
+            }
+        }
+    }
+
+    fn overlay<'b>(
+        &'b mut self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        translation: Vector,
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
+        overlay::from_children(&mut self.children, tree, layout, renderer, translation)
+    }
+
+    #[cfg(feature = "a11y")]
+    /// get the a11y nodes for the widget
+    fn a11y_nodes(
+        &self,
+        layout: Layout<'_>,
+        state: &Tree,
+        cursor: mouse::Cursor,
+    ) -> iced_accessibility::A11yTree {
+        use iced_accessibility::A11yTree;
+        A11yTree::join(
+            self.children
+                .iter()
+                .zip(layout.children())
+                .zip(state.children.iter())
+                .map(|((c, c_layout), state)| {
+                    c.as_widget().a11y_nodes(
+                        c_layout.with_virtual_offset(layout.virtual_offset()),
+                        state,
+                        cursor,
+                    )
+                }),
+        )
+    }
+
+    fn drag_destinations(
+        &self,
+        state: &Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        dnd_rectangles: &mut iced::core::clipboard::DndDestinationRectangles,
+    ) {
+        for ((e, c_layout), state) in self
+            .children
+            .iter()
+            .zip(layout.children())
+            .zip(state.children.iter())
+        {
+            e.as_widget().drag_destinations(
+                state,
+                c_layout.with_virtual_offset(layout.virtual_offset()),
+                renderer,
+                dnd_rectangles,
+            );
+        }
+    }
+}
+
+impl<'a, Message, Theme, Renderer> From<Column<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
+where
+    Message: 'a,
+    Theme: 'a,
+    Renderer: iced::core::Renderer + 'a,
+{
+    fn from(column: Column<'a, Message, Theme, Renderer>) -> Self {
+        Self::new(column)
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Default)]
+pub struct State {
+    hovered: Option<usize>,
+}

src/applet/mod.rs

@@ -1,13 +1,14 @@
 #[cfg(feature = "applet-token")]
 pub mod token;
 
+use crate::app::cosmic;
 use crate::{
     Application, Element, Renderer,
     app::iced_settings,
     cctk::sctk,
     iced::{
         self, Color, Length, Limits, Rectangle,
-        alignment::{Horizontal, Vertical},
+        alignment::{Alignment, Horizontal, Vertical},
         widget::Container,
         window,
     },
@@ -16,18 +17,24 @@ use crate::{
     widget::{
         self,
         autosize::{self, Autosize, autosize},
-        layer_container,
+        column::Column,
+        horizontal_space, layer_container,
+        row::Row,
+        vertical_space,
     },
 };
 pub use cosmic_panel_config;
 use cosmic_panel_config::{CosmicPanelBackground, PanelAnchor, PanelSize};
 use iced_core::{Padding, Shadow};
+use iced_widget::Text;
 use iced_widget::runtime::platform_specific::wayland::popup::{SctkPopupSettings, SctkPositioner};
 use sctk::reexports::protocols::xdg::shell::client::xdg_positioner::{Anchor, Gravity};
 use std::{borrow::Cow, num::NonZeroU32, rc::Rc, sync::LazyLock, time::Duration};
 use tracing::info;
 
-use crate::app::cosmic;
+pub mod column;
+pub mod row;
+
 static AUTOSIZE_ID: LazyLock<iced::id::Id> =
     LazyLock::new(|| iced::id::Id::new("cosmic-applet-autosize"));
 static AUTOSIZE_MAIN_ID: LazyLock<iced::id::Id> =
@@ -46,6 +53,8 @@ pub struct Context {
     /// Includes the configured size of the window.
     /// This can be used by apples to handle overflow themselves.
     pub suggested_bounds: Option<iced::Size>,
+    /// Ratio of overlap for applet padding.
+    pub padding_overlap: f32,
 }
 
 #[derive(Clone, Debug, PartialEq, Eq)]
@@ -104,6 +113,10 @@ impl Default for Context {
                 .unwrap_or(CosmicPanelBackground::ThemeDefault),
             output_name: std::env::var("COSMIC_PANEL_OUTPUT").unwrap_or_default(),
             panel_type: PanelType::from(std::env::var("COSMIC_PANEL_NAME").unwrap_or_default()),
+            padding_overlap: str::parse(
+                &std::env::var("COSMIC_PANEL_PADDING_OVERLAP").unwrap_or_default(),
+            )
+            .unwrap_or(0.0),
             suggested_bounds: None,
         }
     }
@@ -124,13 +137,19 @@ impl Context {
     #[must_use]
     pub fn suggested_window_size(&self) -> (NonZeroU32, NonZeroU32) {
         let suggested = self.suggested_size(true);
-        let applet_padding = self.suggested_padding(true);
+        let (applet_padding_major_axis, applet_padding_minor_axis) = self.suggested_padding(true);
+        let (horizontal_padding, vertical_padding) = if self.is_horizontal() {
+            (applet_padding_major_axis, applet_padding_minor_axis)
+        } else {
+            (applet_padding_minor_axis, applet_padding_major_axis)
+        };
+
         let configured_width = self
             .suggested_bounds
             .as_ref()
             .and_then(|c| NonZeroU32::new(c.width as u32)) // TODO: should this be physical size instead of logical?
             .unwrap_or_else(|| {
-                NonZeroU32::new(suggested.0 as u32 + applet_padding as u32 * 2).unwrap()
+                NonZeroU32::new(suggested.0 as u32 + horizontal_padding as u32 * 2).unwrap()
             });
 
         let configured_height = self
@@ -138,17 +157,20 @@ impl Context {
             .as_ref()
             .and_then(|c| NonZeroU32::new(c.height as u32))
             .unwrap_or_else(|| {
-                NonZeroU32::new(suggested.1 as u32 + applet_padding as u32 * 2).unwrap()
+                NonZeroU32::new(suggested.1 as u32 + vertical_padding as u32 * 2).unwrap()
             });
         info!("{configured_height:?}");
         (configured_width, configured_height)
     }
 
     #[must_use]
-    pub fn suggested_padding(&self, is_symbolic: bool) -> u16 {
+    pub fn suggested_padding(&self, is_symbolic: bool) -> (u16, u16) {
         match &self.size {
-            Size::PanelSize(size) => size.get_applet_padding(is_symbolic),
+            Size::PanelSize(size) => (
-            Size::Hardcoded(_) => 8,
+                size.get_applet_shrinkable_padding(is_symbolic),
+                size.get_applet_padding(is_symbolic),
+            ),
+            Size::Hardcoded(_) => (12, 8),
         }
     }
 
@@ -160,9 +182,15 @@ impl Context {
     #[allow(clippy::cast_precision_loss)]
     pub fn window_settings(&self) -> crate::app::Settings {
         let (width, height) = self.suggested_size(true);
-        let applet_padding = self.suggested_padding(true);
+        let (applet_padding_major_axis, applet_padding_minor_axis) = self.suggested_padding(true);
-        let width = f32::from(width) + applet_padding as f32 * 2.;
+        let (horizontal_padding, vertical_padding) = if self.is_horizontal() {
-        let height = f32::from(height) + applet_padding as f32 * 2.;
+            (applet_padding_major_axis, applet_padding_minor_axis)
+        } else {
+            (applet_padding_minor_axis, applet_padding_major_axis)
+        };
+
+        let width = f32::from(width) + horizontal_padding as f32 * 2.;
+        let height = f32::from(height) + vertical_padding as f32 * 2.;
         let mut settings = crate::app::Settings::default()
             .size(iced_core::Size::new(width, height))
             .size_limits(Limits::NONE.min_height(height).min_width(width))
@@ -187,28 +215,70 @@ impl Context {
         icon: widget::icon::Handle,
     ) -> crate::widget::Button<'a, Message> {
         let suggested = self.suggested_size(icon.symbolic);
-        let applet_padding = self.suggested_padding(icon.symbolic);
+        let (applet_padding_major_axis, applet_padding_minor_axis) = self.suggested_padding(true);
-
+        let (horizontal_padding, vertical_padding) = if self.is_horizontal() {
+            (applet_padding_major_axis, applet_padding_minor_axis)
+        } else {
+            (applet_padding_minor_axis, applet_padding_major_axis)
+        };
         let symbolic = icon.symbolic;
+        let icon = widget::icon(icon)
+            .class(if symbolic {
+                theme::Svg::Custom(Rc::new(|theme| crate::iced_widget::svg::Style {
+                    color: Some(theme.cosmic().background.on.into()),
+                }))
+            } else {
+                theme::Svg::default()
+            })
+            .width(Length::Fixed(suggested.0 as f32))
+            .height(Length::Fixed(suggested.1 as f32));
+        self.button_from_element(icon, symbolic)
+    }
 
+    pub fn button_from_element<'a, Message: Clone + 'static>(
+        &self,
+        content: impl Into<Element<'a, Message>>,
+        use_symbolic_size: bool,
+    ) -> crate::widget::Button<'a, Message> {
+        let suggested = self.suggested_size(use_symbolic_size);
+        let (applet_padding_major_axis, applet_padding_minor_axis) = self.suggested_padding(true);
+        let (horizontal_padding, vertical_padding) = if self.is_horizontal() {
+            (applet_padding_major_axis, applet_padding_minor_axis)
+        } else {
+            (applet_padding_minor_axis, applet_padding_major_axis)
+        };
+
+        crate::widget::button::custom(layer_container(content).center(Length::Fill))
+            .width(Length::Fixed((suggested.0 + 2 * horizontal_padding) as f32))
+            .height(Length::Fixed((suggested.1 + 2 * vertical_padding) as f32))
+            .class(Button::AppletIcon)
+    }
+
+    pub fn text_button<'a, Message: Clone + 'static>(
+        &self,
+        text: impl Into<Text<'a, crate::Theme, crate::Renderer>>,
+        message: Message,
+    ) -> crate::widget::Button<'a, Message> {
+        let text = text.into();
+        let suggested = self.suggested_size(true);
+
+        let (applet_padding_major_axis, applet_padding_minor_axis) = self.suggested_padding(true);
+        let (horizontal_padding, vertical_padding) = if self.is_horizontal() {
+            (applet_padding_major_axis, applet_padding_minor_axis)
+        } else {
+            (applet_padding_minor_axis, applet_padding_major_axis)
+        };
         crate::widget::button::custom(
             layer_container(
-                widget::icon(icon)
+                Text::from(text)
-                    .class(if symbolic {
+                    .height(Length::Fill)
-                        theme::Svg::Custom(Rc::new(|theme| crate::iced_widget::svg::Style {
+                    .align_y(Alignment::Center),
-                            color: Some(theme.cosmic().background.on.into()),
-                        }))
-                    } else {
-                        theme::Svg::default()
-                    })
-                    .width(Length::Fixed(suggested.0 as f32))
-                    .height(Length::Fixed(suggested.1 as f32)),
             )
-            .center(Length::Fill),
+            .center_y(Length::Fixed(f32::from(suggested.1 + 2 * vertical_padding))),
         )
-        .width(Length::Fixed((suggested.0 + 2 * applet_padding) as f32))
+        .on_press_down(message)
-        .height(Length::Fixed((suggested.1 + 2 * applet_padding) as f32))
+        .padding([0, horizontal_padding])
-        .class(Button::AppletIcon)
+        .class(crate::theme::Button::AppletIcon)
     }
 
     pub fn icon_button<'a, Message: Clone + 'static>(
@@ -345,7 +415,12 @@ impl Context {
         height_padding: Option<i32>,
     ) -> SctkPopupSettings {
         let (width, height) = self.suggested_size(true);
-        let applet_padding = self.suggested_padding(true);
+        let (applet_padding_major_axis, applet_padding_minor_axis) = self.suggested_padding(true);
+        let (horizontal_padding, vertical_padding) = if self.is_horizontal() {
+            (applet_padding_major_axis, applet_padding_minor_axis)
+        } else {
+            (applet_padding_minor_axis, applet_padding_major_axis)
+        };
         let pixel_offset = 4;
         let (offset, anchor, gravity) = match self.anchor {
             PanelAnchor::Left => ((pixel_offset, 0), Anchor::Right, Gravity::Right),
@@ -364,8 +439,10 @@ impl Context {
                 anchor_rect: Rectangle {
                     x: 0,
                     y: 0,
-                    width: width_padding.unwrap_or(applet_padding as i32) * 2 + i32::from(width),
+                    width: width_padding.unwrap_or(horizontal_padding as i32) * 2
-                    height: height_padding.unwrap_or(applet_padding as i32) * 2 + i32::from(height),
+                        + i32::from(width),
+                    height: height_padding.unwrap_or(vertical_padding as i32) * 2
+                        + i32::from(height),
                 },
                 reactive: true,
                 constraint_adjustment: 15, // slide_y, slide_x, flip_x, flip_y

src/applet/row.rs

@@ -0,0 +1,498 @@
+//! Distribute content horizontally.
+use crate::iced;
+use iced::core::alignment::{self, Alignment};
+use iced::core::event::{self, Event};
+use iced::core::layout::{self, Layout};
+use iced::core::mouse;
+use iced::core::overlay;
+use iced::core::renderer;
+use iced::core::widget::{Operation, Tree};
+use iced::core::{
+    Clipboard, Element, Length, Padding, Pixels, Rectangle, Shell, Size, Vector, Widget, widget,
+};
+use iced::touch;
+
+/// A container that distributes its contents horizontally.
+///
+/// # Example
+/// ```no_run
+/// # mod iced { pub mod widget { pub use iced_widget::*; } }
+/// # pub type State = ();
+/// # pub type Element<'a, Message> = iced_widget::core::Element<'a, Message, iced_widget::Theme, iced_widget::Renderer>;
+/// use iced::widget::{button, row};
+///
+/// #[derive(Debug, Clone)]
+/// enum Message {
+///     // ...
+/// }
+///
+/// fn view(state: &State) -> Element<'_, Message> {
+///     row![
+///         "I am to the left!",
+///         button("I am in the middle!"),
+///         "I am to the right!",
+///     ].into()
+/// }
+/// ```
+#[allow(missing_debug_implementations)]
+#[must_use]
+pub struct Row<'a, Message, Theme = iced::Theme, Renderer = iced::Renderer> {
+    spacing: f32,
+    padding: Padding,
+    width: Length,
+    height: Length,
+    align: Alignment,
+    clip: bool,
+    children: Vec<Element<'a, Message, Theme, Renderer>>,
+}
+
+impl<'a, Message, Theme, Renderer> Row<'a, Message, Theme, Renderer>
+where
+    Renderer: iced::core::Renderer,
+{
+    /// Creates an empty [`Row`].
+    pub fn new() -> Self {
+        Self::from_vec(Vec::new())
+    }
+
+    /// Creates a [`Row`] with the given capacity.
+    pub fn with_capacity(capacity: usize) -> Self {
+        Self::from_vec(Vec::with_capacity(capacity))
+    }
+
+    /// Creates a [`Row`] with the given elements.
+    pub fn with_children(
+        children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
+    ) -> Self {
+        let iterator = children.into_iter();
+
+        Self::with_capacity(iterator.size_hint().0).extend(iterator)
+    }
+
+    /// Creates a [`Row`] from an already allocated [`Vec`].
+    ///
+    /// Keep in mind that the [`Row`] will not inspect the [`Vec`], which means
+    /// it won't automatically adapt to the sizing strategy of its contents.
+    ///
+    /// If any of the children have a [`Length::Fill`] strategy, you will need to
+    /// call [`Row::width`] or [`Row::height`] accordingly.
+    pub fn from_vec(children: Vec<Element<'a, Message, Theme, Renderer>>) -> Self {
+        Self {
+            spacing: 0.0,
+            padding: Padding::ZERO,
+            width: Length::Shrink,
+            height: Length::Shrink,
+            align: Alignment::Start,
+            clip: false,
+            children,
+        }
+    }
+
+    /// Sets the horizontal spacing _between_ elements.
+    ///
+    /// Custom margins per element do not exist in iced. You should use this
+    /// method instead! While less flexible, it helps you keep spacing between
+    /// elements consistent.
+    pub fn spacing(mut self, amount: impl Into<Pixels>) -> Self {
+        self.spacing = amount.into().0;
+        self
+    }
+
+    /// Sets the [`Padding`] of the [`Row`].
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
+        self
+    }
+
+    /// Sets the width of the [`Row`].
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
+        self
+    }
+
+    /// Sets the height of the [`Row`].
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
+        self
+    }
+
+    /// Sets the vertical alignment of the contents of the [`Row`] .
+    pub fn align_y(mut self, align: impl Into<alignment::Vertical>) -> Self {
+        self.align = Alignment::from(align.into());
+        self
+    }
+
+    /// Sets whether the contents of the [`Row`] should be clipped on
+    /// overflow.
+    pub fn clip(mut self, clip: bool) -> Self {
+        self.clip = clip;
+        self
+    }
+
+    /// Adds an [`Element`] to the [`Row`].
+    pub fn push(mut self, child: impl Into<Element<'a, Message, Theme, Renderer>>) -> Self {
+        let child = child.into();
+        let child_size = child.as_widget().size_hint();
+
+        self.width = self.width.enclose(child_size.width);
+        self.height = self.height.enclose(child_size.height);
+
+        self.children.push(child);
+        self
+    }
+
+    /// Adds an element to the [`Row`], if `Some`.
+    pub fn push_maybe(
+        self,
+        child: Option<impl Into<Element<'a, Message, Theme, Renderer>>>,
+    ) -> Self {
+        if let Some(child) = child {
+            self.push(child)
+        } else {
+            self
+        }
+    }
+
+    /// Extends the [`Row`] with the given children.
+    pub fn extend(
+        self,
+        children: impl IntoIterator<Item = Element<'a, Message, Theme, Renderer>>,
+    ) -> Self {
+        children.into_iter().fold(self, Self::push)
+    }
+}
+
+impl<'a, Message, Renderer> Default for Row<'a, Message, Renderer>
+where
+    Renderer: iced::core::Renderer,
+{
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl<'a, Message, Theme, Renderer: iced::core::Renderer>
+    FromIterator<Element<'a, Message, Theme, Renderer>> for Row<'a, Message, Theme, Renderer>
+{
+    fn from_iter<T: IntoIterator<Item = Element<'a, Message, Theme, Renderer>>>(iter: T) -> Self {
+        Self::with_children(iter)
+    }
+}
+
+impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer>
+    for Row<'_, Message, Theme, Renderer>
+where
+    Renderer: iced::core::Renderer,
+{
+    fn children(&self) -> Vec<Tree> {
+        self.children.iter().map(Tree::new).collect()
+    }
+
+    fn state(&self) -> widget::tree::State {
+        widget::tree::State::new(State::default())
+    }
+
+    fn tag(&self) -> widget::tree::Tag {
+        widget::tree::Tag::of::<State>()
+    }
+
+    fn diff(&mut self, tree: &mut Tree) {
+        tree.diff_children(&mut self.children);
+    }
+
+    fn size(&self) -> Size<Length> {
+        Size {
+            width: self.width,
+            height: self.height,
+        }
+    }
+
+    fn layout(
+        &self,
+        tree: &mut Tree,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        layout::flex::resolve(
+            layout::flex::Axis::Horizontal,
+            renderer,
+            limits,
+            self.width,
+            self.height,
+            self.padding,
+            self.spacing,
+            self.align,
+            &self.children,
+            &mut tree.children,
+        )
+    }
+
+    fn operate(
+        &self,
+        tree: &mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        operation: &mut dyn Operation,
+    ) {
+        operation.container(None, layout.bounds(), &mut |operation| {
+            self.children
+                .iter()
+                .zip(&mut tree.children)
+                .zip(layout.children())
+                .for_each(|((child, state), c_layout)| {
+                    child.as_widget().operate(
+                        state,
+                        c_layout.with_virtual_offset(layout.virtual_offset()),
+                        renderer,
+                        operation,
+                    );
+                });
+        });
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: Event,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+        viewport: &Rectangle,
+    ) -> event::Status {
+        let my_state = tree.state.downcast_mut::<State>();
+
+        if let Some(hovered) = my_state.hovered {
+            let child_layout = layout.children().nth(hovered);
+            if let Some(child_layout) = child_layout
+                && cursor.is_over(child_layout.bounds())
+            {
+                // if mouse event, we can skip checking other children
+                if let Event::Mouse(e) = &event {
+                    if !matches!(
+                        e,
+                        mouse::Event::CursorLeft | mouse::Event::ButtonReleased { .. }
+                    ) {
+                        return self.children[hovered].as_widget_mut().on_event(
+                            &mut tree.children[hovered],
+                            event,
+                            child_layout.with_virtual_offset(layout.virtual_offset()),
+                            cursor,
+                            renderer,
+                            clipboard,
+                            shell,
+                            viewport,
+                        );
+                    }
+                } else if let Event::Touch(t) = &event {
+                    if !matches!(
+                        t,
+                        iced::core::touch::Event::FingerLifted { .. }
+                            | iced::core::touch::Event::FingerLost { .. }
+                    ) {
+                        return self.children[hovered].as_widget_mut().on_event(
+                            &mut tree.children[hovered],
+                            event,
+                            child_layout.with_virtual_offset(layout.virtual_offset()),
+                            cursor,
+                            renderer,
+                            clipboard,
+                            shell,
+                            viewport,
+                        );
+                    }
+                }
+            } else {
+                my_state.hovered = None;
+            }
+        }
+
+        self.children
+            .iter_mut()
+            .enumerate()
+            .zip(&mut tree.children)
+            .zip(layout.children())
+            .map(|(((i, child), state), c_layout)| {
+                let mut cursor_virtual = cursor;
+
+                if matches!(
+                    event,
+                    Event::Mouse(mouse::Event::CursorMoved { .. } | mouse::Event::CursorEntered)
+                        | Event::Touch(
+                            iced_core::touch::Event::FingerMoved { .. }
+                                | iced_core::touch::Event::FingerPressed { .. }
+                        )
+                ) && cursor.is_over(c_layout.bounds())
+                {
+                    my_state.hovered = Some(i);
+                    return child.as_widget_mut().on_event(
+                        state,
+                        event.clone(),
+                        c_layout.with_virtual_offset(layout.virtual_offset()),
+                        cursor_virtual,
+                        renderer,
+                        clipboard,
+                        shell,
+                        viewport,
+                    );
+                } else if my_state.hovered.is_some_and(|h| i != h) {
+                    cursor_virtual = mouse::Cursor::Unavailable;
+                }
+
+                child.as_widget_mut().on_event(
+                    state,
+                    event.clone(),
+                    c_layout.with_virtual_offset(layout.virtual_offset()),
+                    cursor_virtual,
+                    renderer,
+                    clipboard,
+                    shell,
+                    viewport,
+                )
+            })
+            .fold(event::Status::Ignored, event::Status::merge)
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &Tree,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        viewport: &Rectangle,
+        renderer: &Renderer,
+    ) -> mouse::Interaction {
+        self.children
+            .iter()
+            .zip(&tree.children)
+            .zip(layout.children())
+            .map(|((child, state), c_layout)| {
+                child.as_widget().mouse_interaction(
+                    state,
+                    c_layout.with_virtual_offset(layout.virtual_offset()),
+                    cursor,
+                    viewport,
+                    renderer,
+                )
+            })
+            .max()
+            .unwrap_or_default()
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Theme,
+        style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor: mouse::Cursor,
+        viewport: &Rectangle,
+    ) {
+        if let Some(clipped_viewport) = layout.bounds().intersection(viewport) {
+            let my_state = tree.state.downcast_ref::<State>();
+
+            let viewport = if self.clip {
+                &clipped_viewport
+            } else {
+                viewport
+            };
+
+            for (i, ((child, state), c_layout)) in self
+                .children
+                .iter()
+                .zip(&tree.children)
+                .zip(layout.children())
+                .filter(|(_, layout)| layout.bounds().intersects(viewport))
+                .enumerate()
+            {
+                child.as_widget().draw(
+                    state,
+                    renderer,
+                    theme,
+                    style,
+                    c_layout.with_virtual_offset(layout.virtual_offset()),
+                    if my_state.hovered.is_some_and(|h| i == h) {
+                        cursor
+                    } else {
+                        mouse::Cursor::Unavailable
+                    },
+                    viewport,
+                );
+            }
+        }
+    }
+
+    fn overlay<'b>(
+        &'b mut self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        translation: Vector,
+    ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
+        overlay::from_children(&mut self.children, tree, layout, renderer, translation)
+    }
+
+    #[cfg(feature = "a11y")]
+    /// get the a11y nodes for the widget
+    fn a11y_nodes(
+        &self,
+        layout: Layout<'_>,
+        state: &Tree,
+        cursor: mouse::Cursor,
+    ) -> iced_accessibility::A11yTree {
+        use iced_accessibility::A11yTree;
+        A11yTree::join(
+            self.children
+                .iter()
+                .zip(layout.children())
+                .zip(state.children.iter())
+                .map(|((c, c_layout), state)| {
+                    c.as_widget().a11y_nodes(
+                        c_layout.with_virtual_offset(layout.virtual_offset()),
+                        state,
+                        cursor,
+                    )
+                }),
+        )
+    }
+
+    fn drag_destinations(
+        &self,
+        state: &Tree,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        dnd_rectangles: &mut iced::core::clipboard::DndDestinationRectangles,
+    ) {
+        for ((e, c_layout), state) in self
+            .children
+            .iter()
+            .zip(layout.children())
+            .zip(state.children.iter())
+        {
+            e.as_widget().drag_destinations(
+                state,
+                c_layout.with_virtual_offset(layout.virtual_offset()),
+                renderer,
+                dnd_rectangles,
+            );
+        }
+    }
+}
+
+impl<'a, Message, Theme, Renderer> From<Row<'a, Message, Theme, Renderer>>
+    for Element<'a, Message, Theme, Renderer>
+where
+    Message: 'a,
+    Theme: 'a,
+    Renderer: iced::core::Renderer + 'a,
+{
+    fn from(row: Row<'a, Message, Theme, Renderer>) -> Self {
+        Self::new(row)
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Default)]
+pub struct State {
+    hovered: Option<usize>,
+}

src/widget/color_picker/mod.rs

@@ -50,6 +50,24 @@ pub static HSV_RAINBOW: LazyLock<Vec<Color>> = LazyLock::new(|| {
         .collect()
 });
 
+fn hsv_rainbow(low_hue: f32, high_hue: f32) -> Vec<ColorStop> {
+    let mut colors = Vec::new();
+    let steps: u8 = 7;
+    let step_size = (high_hue - low_hue) / f32::from(steps);
+    for i in 0..=steps {
+        let hue = low_hue + step_size * f32::from(i);
+        colors.push(ColorStop {
+            color: Color::from(palette::Srgba::from_color(palette::Hsv::new_srgb_const(
+                RgbHue::new(hue),
+                1.0,
+                1.0,
+            ))),
+            offset: f32::from(i) / f32::from(steps),
+        });
+    }
+    colors
+}
+
 const MAX_RECENT: usize = 20;
 
 #[derive(Debug, Clone)]
@@ -290,37 +308,9 @@ where
         copied_to_clipboard_label: T,
     ) -> ColorPicker<'a, Message> {
         fn rail_backgrounds(hue: f32) -> (Background, Background) {
-            let pivot = hue * 7.0 / 360.;
+            let low_range = hsv_rainbow(0., hue);
+            let high_range = hsv_rainbow(hue, 360.);
 
-            let low_end = pivot.floor() as usize;
-            let high_start = pivot.ceil() as usize;
-            let pivot_color = palette::Hsv::new_srgb(RgbHue::new(hue), 1.0, 1.0);
-            let low_range = HSV_RAINBOW[0..=low_end]
-                .iter()
-                .enumerate()
-                .map(|(i, color)| ColorStop {
-                    color: *color,
-                    offset: i as f32 / pivot.max(0.0001),
-                })
-                .chain(iter::once(ColorStop {
-                    color: iced::Color::from(palette::Srgba::from_color(pivot_color)),
-                    offset: 1.,
-                }))
-                .collect::<Vec<_>>();
-            let high_range = iter::once(ColorStop {
-                color: iced::Color::from(palette::Srgba::from_color(pivot_color)),
-                offset: 0.,
-            })
-            .chain(
-                HSV_RAINBOW[high_start..]
-                    .iter()
-                    .enumerate()
-                    .map(|(i, color)| ColorStop {
-                        color: *color,
-                        offset: (i as f32 + (1. - pivot.fract())) / (7. - pivot).max(0.0001),
-                    }),
-            )
-            .collect::<Vec<_>>();
             (
                 Background::Gradient(iced::Gradient::Linear(
                     Linear::new(Radians(90.0)).add_stops(low_range),