From 04286f1875b05519b6f56484178ba05e7f286ea5 Mon Sep 17 00:00:00 2001
From: Manuel Cillero <manuel@cillero.es>
Date: Sun, 19 Nov 2023 00:20:38 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20new=20helper=20trait=20for=20?=
 =?UTF-8?q?components'=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pagetop-bootsier/src/lib.rs                  | 128 +++++--------------
 pagetop-bulmix/src/lib.rs                    | 122 +++++-------------
 pagetop/src/base/component/block.rs          |  23 ++--
 pagetop/src/base/component/button.rs         |  26 ++--
 pagetop/src/base/component/flex/container.rs |  24 ++--
 pagetop/src/base/component/flex/item.rs      |  30 ++---
 pagetop/src/base/component/form/button.rs    |  25 ++--
 pagetop/src/base/component/form/date.rs      |  21 +--
 pagetop/src/base/component/form/form_main.rs |  21 +--
 pagetop/src/base/component/form/input.rs     |  25 ++--
 pagetop/src/base/component/heading.rs        |  23 ++--
 pagetop/src/base/component/icon.rs           |  27 ++--
 pagetop/src/base/component/image.rs          |  21 +--
 pagetop/src/base/component/paragraph.rs      |  24 ++--
 pagetop/src/base/component/wrapper.rs        |  21 +--
 pagetop/src/core/component.rs                |   3 +
 pagetop/src/core/component/classes.rs        |  60 +++++++++
 pagetop/src/html/opt_classes.rs              |  11 +-
 18 files changed, 294 insertions(+), 341 deletions(-)
 create mode 100644 pagetop/src/core/component/classes.rs

diff --git a/pagetop-bootsier/src/lib.rs b/pagetop-bootsier/src/lib.rs
index 4f165f11..7a45a904 100644
--- a/pagetop-bootsier/src/lib.rs
+++ b/pagetop-bootsier/src/lib.rs
@@ -84,162 +84,96 @@ impl ThemeTrait for Bootsier {
     fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
         match component.handle() {
             COMPONENT_BASE_ICON => {
-                if let Some(icon) = component_as_mut::<Icon>(component) {
-                    match icon.font_size() {
+                if let Some(i) = component_as_mut::<Icon>(component) {
+                    match i.font_size() {
                         FontSize::ExtraLarge => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "fs-1",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "fs-1");
                         }
                         FontSize::XxLarge => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "fs-2",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "fs-2");
                         }
                         FontSize::XLarge => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "fs-3",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "fs-3");
                         }
                         FontSize::Large => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "fs-4",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "fs-4");
                         }
                         FontSize::Medium => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "fs-5",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "fs-5");
                         }
                         _ => {}
                     };
                 }
             }
             COMPONENT_BASE_BUTTON => {
-                if let Some(button) = component_as_mut::<Button>(component) {
-                    match button.font_size() {
+                if let Some(b) = component_as_mut::<Button>(component) {
+                    match b.font_size() {
                         FontSize::ExtraLarge => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "fs-1",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "fs-1");
                         }
                         FontSize::XxLarge => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "fs-2",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "fs-2");
                         }
                         FontSize::XLarge => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "fs-3",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "fs-3");
                         }
                         FontSize::Large => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "fs-4",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "fs-4");
                         }
                         FontSize::Medium => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "fs-5",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "fs-5");
                         }
                         _ => {}
                     };
-                    match button.button_type() {
+                    match b.button_type() {
                         ButtonType::Link => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.button_type().to_string()),
-                                "btn btn-link",
-                            );
+                            b.replace_classes(b.button_type().to_string(), "btn btn-link");
                         }
                         ButtonType::Primary => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.button_type().to_string()),
-                                "btn btn-primary",
-                            );
+                            b.replace_classes(b.button_type().to_string(), "btn btn-primary");
                         }
                     };
                 }
             }
             COMPONENT_BASE_HEADING => {
-                if let Some(heading) = component_as_mut::<Heading>(component) {
-                    match heading.display() {
+                if let Some(h) = component_as_mut::<Heading>(component) {
+                    match h.display() {
                         HeadingDisplay::ExtraLarge => {
-                            heading.alter_classes(
-                                ClassesOp::Replace(heading.display().to_string()),
-                                "display-1",
-                            );
+                            h.replace_classes(h.display().to_string(), "display-1");
                         }
                         HeadingDisplay::XxLarge => {
-                            heading.alter_classes(
-                                ClassesOp::Replace(heading.display().to_string()),
-                                "display-2",
-                            );
+                            h.replace_classes(h.display().to_string(), "display-2");
                         }
                         HeadingDisplay::XLarge => {
-                            heading.alter_classes(
-                                ClassesOp::Replace(heading.display().to_string()),
-                                "display-3",
-                            );
+                            h.replace_classes(h.display().to_string(), "display-3");
                         }
                         HeadingDisplay::Large => {
-                            heading.alter_classes(
-                                ClassesOp::Replace(heading.display().to_string()),
-                                "display-4",
-                            );
+                            h.replace_classes(h.display().to_string(), "display-4");
                         }
                         HeadingDisplay::Medium => {
-                            heading.alter_classes(
-                                ClassesOp::Replace(heading.display().to_string()),
-                                "display-5",
-                            );
+                            h.replace_classes(h.display().to_string(), "display-5");
                         }
                         _ => {}
                     };
                 }
             }
             COMPONENT_BASE_PARAGRAPH => {
-                if let Some(paragraph) = component_as_mut::<Paragraph>(component) {
-                    match paragraph.font_size() {
+                if let Some(p) = component_as_mut::<Paragraph>(component) {
+                    match p.font_size() {
                         FontSize::ExtraLarge => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "fs-1",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "fs-1");
                         }
                         FontSize::XxLarge => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "fs-2",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "fs-2");
                         }
                         FontSize::XLarge => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "fs-3",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "fs-3");
                         }
                         FontSize::Large => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "fs-4",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "fs-4");
                         }
                         FontSize::Medium => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "fs-5",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "fs-5");
                         }
                         _ => {}
                     };
diff --git a/pagetop-bulmix/src/lib.rs b/pagetop-bulmix/src/lib.rs
index 369a9a97..6dfe5856 100644
--- a/pagetop-bulmix/src/lib.rs
+++ b/pagetop-bulmix/src/lib.rs
@@ -33,137 +33,85 @@ impl ThemeTrait for Bulmix {
     fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
         match component.handle() {
             COMPONENT_BASE_ICON => {
-                if let Some(icon) = component_as_mut::<Icon>(component) {
-                    match icon.font_size() {
+                if let Some(i) = component_as_mut::<Icon>(component) {
+                    match i.font_size() {
                         FontSize::ExtraLarge => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "is-size-1",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "is-size-1");
                         }
                         FontSize::XxLarge => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "is-size-2",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "is-size-2");
                         }
                         FontSize::XLarge => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "is-size-3",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "is-size-3");
                         }
                         FontSize::Large => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "is-size-4",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "is-size-4");
                         }
                         FontSize::Medium => {
-                            icon.alter_classes(
-                                ClassesOp::Replace(icon.font_size().to_string()),
-                                "is-size-5",
-                            );
+                            i.replace_classes(i.font_size().to_string(), "is-size-5");
                         }
                         _ => {}
                     };
                 }
             }
             COMPONENT_BASE_BUTTON => {
-                if let Some(button) = component_as_mut::<Button>(component) {
-                    match button.font_size() {
+                if let Some(b) = component_as_mut::<Button>(component) {
+                    match b.font_size() {
                         FontSize::ExtraLarge => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "is-size-1",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "is-size-1");
                         }
                         FontSize::XxLarge => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "is-size-2",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "is-size-2");
                         }
                         FontSize::XLarge => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "is-size-3",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "is-size-3");
                         }
                         FontSize::Large => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "is-size-4",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "is-size-4");
                         }
                         FontSize::Medium => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.font_size().to_string()),
-                                "is-size-5",
-                            );
+                            b.replace_classes(b.font_size().to_string(), "is-size-5");
                         }
                         _ => {}
                     };
-                    match button.button_type() {
+                    match b.button_type() {
                         ButtonType::Link => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.button_type().to_string()),
-                                "button is-text",
-                            );
+                            b.replace_classes(b.button_type().to_string(), "button is-text");
                         }
                         ButtonType::Primary => {
-                            button.alter_classes(
-                                ClassesOp::Replace(button.button_type().to_string()),
-                                "button is-primary",
-                            );
+                            b.replace_classes(b.button_type().to_string(), "button is-primary");
                         }
                     };
                 }
             }
             COMPONENT_BASE_HEADING => {
-                if let Some(heading) = component_as_mut::<Heading>(component) {
-                    match heading.display() {
-                        HeadingDisplay::Subtitle => heading.alter_classes(
-                            ClassesOp::Replace(heading.display().to_string()),
-                            "subtitle",
-                        ),
-                        _ => heading.alter_classes(ClassesOp::Add, "title"),
+                if let Some(h) = component_as_mut::<Heading>(component) {
+                    match h.display() {
+                        HeadingDisplay::Subtitle => {
+                            h.replace_classes(h.display().to_string(), "subtitle")
+                        }
+                        _ => h.add_classes("title"),
                     };
                 }
             }
             COMPONENT_BASE_PARAGRAPH => {
-                if let Some(paragraph) = component_as_mut::<Paragraph>(component) {
-                    paragraph.alter_classes(ClassesOp::Add, "block");
-                    match paragraph.font_size() {
+                if let Some(p) = component_as_mut::<Paragraph>(component) {
+                    p.add_classes("block");
+                    match p.font_size() {
                         FontSize::ExtraLarge => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "is-size-1",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "is-size-1");
                         }
                         FontSize::XxLarge => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "is-size-2",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "is-size-2");
                         }
                         FontSize::XLarge => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "is-size-3",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "is-size-3");
                         }
                         FontSize::Large => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "is-size-4",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "is-size-4");
                         }
                         FontSize::Medium => {
-                            paragraph.alter_classes(
-                                ClassesOp::Replace(paragraph.font_size().to_string()),
-                                "is-size-5",
-                            );
+                            p.replace_classes(p.font_size().to_string(), "is-size-5");
                         }
                         _ => {}
                     };
@@ -180,12 +128,10 @@ impl ThemeTrait for Bulmix {
     ) -> Option<Markup> {
         match component.handle() {
             COMPONENT_BASE_ICON => {
-                if let Some(icon) = component_as_ref::<Icon>(component) {
-                    return match icon.icon_name().get() {
+                if let Some(i) = component_as_ref::<Icon>(component) {
+                    return match i.icon_name().get() {
                         None => None,
-                        _ => {
-                            Some(html! { span class="icon" { i class=[icon.classes().get()] {} } })
-                        }
+                        _ => Some(html! { span class="icon" { i class=[i.classes().get()] {} } }),
                     };
                 }
                 None
diff --git a/pagetop/src/base/component/block.rs b/pagetop/src/base/component/block.rs
index 976d3c96..f4468854 100644
--- a/pagetop/src/base/component/block.rs
+++ b/pagetop/src/base/component/block.rs
@@ -31,7 +31,7 @@ impl ComponentTrait for Block {
     }
 
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.classes.alter_value(ClassesOp::AddFirst, "pt-block");
+        self.prepend_classes("pt-block");
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@@ -51,6 +51,17 @@ impl ComponentTrait for Block {
     }
 }
 
+impl ComponentClasses for Block {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Block {
     // Block BUILDER.
 
@@ -72,12 +83,6 @@ impl Block {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_title(&mut self, title: L10n) -> &mut Self {
         self.title.alter_value(title);
@@ -98,10 +103,6 @@ impl Block {
 
     // Block GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn title(&self) -> &OptionTranslated {
         &self.title
     }
diff --git a/pagetop/src/base/component/button.rs b/pagetop/src/base/component/button.rs
index 57d5f6dc..82486b17 100644
--- a/pagetop/src/base/component/button.rs
+++ b/pagetop/src/base/component/button.rs
@@ -63,9 +63,8 @@ impl ComponentTrait for Button {
     }
 
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.classes.alter_value(
-            ClassesOp::AddFirst,
-            [self.button_type.to_string(), self.font_size.to_string()].join(" "),
+        self.prepend_classes(
+            [self.button_type().to_string(), self.font_size().to_string()].join(" "),
         );
     }
 
@@ -93,6 +92,17 @@ impl ComponentTrait for Button {
     }
 }
 
+impl ComponentClasses for Button {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Button {
     pub fn link(href: impl Into<String>, html: L10n) -> Self {
         Button::default()
@@ -128,12 +138,6 @@ impl Button {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_type(&mut self, button_type: ButtonType) -> &mut Self {
         self.button_type = button_type;
@@ -178,10 +182,6 @@ impl Button {
 
     // Button GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn button_type(&self) -> &ButtonType {
         &self.button_type
     }
diff --git a/pagetop/src/base/component/flex/container.rs b/pagetop/src/base/component/flex/container.rs
index e4c04de8..f578dfcf 100644
--- a/pagetop/src/base/component/flex/container.rs
+++ b/pagetop/src/base/component/flex/container.rs
@@ -35,8 +35,7 @@ impl ComponentTrait for Container {
     }
 
     fn setup_before_prepare(&mut self, cx: &mut Context) {
-        self.classes.alter_value(
-            ClassesOp::AddFirst,
+        self.prepend_classes(
             [
                 self.direction.to_string(),
                 self.wrap_align.to_string(),
@@ -63,6 +62,17 @@ impl ComponentTrait for Container {
     }
 }
 
+impl ComponentClasses for Container {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Container {
     // Container BUILDER.
 
@@ -84,12 +94,6 @@ impl Container {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[rustfmt::skip]
     pub fn add_item(mut self, item: flex::Item) -> Self {
         self.items.alter_value(ArcTypedOp::Add(ArcTypedComponent::new(item)));
@@ -134,10 +138,6 @@ impl Container {
 
     // Container GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn items(&self) -> &TypedComponents<flex::Item> {
         &self.items
     }
diff --git a/pagetop/src/base/component/flex/item.rs b/pagetop/src/base/component/flex/item.rs
index b0131090..6df8e0d6 100644
--- a/pagetop/src/base/component/flex/item.rs
+++ b/pagetop/src/base/component/flex/item.rs
@@ -35,10 +35,8 @@ impl ComponentTrait for Item {
         (self.renderable.check)(cx)
     }
 
-    #[rustfmt::skip]
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.item_classes.alter_value(
-            ClassesOp::AddFirst,
+        self.prepend_classes(
             [
                 "pt-flex__item".to_owned(),
                 self.item_grow.to_string(),
@@ -49,7 +47,8 @@ impl ComponentTrait for Item {
             ]
             .join(" "),
         );
-        self.inner_classes.alter_value(ClassesOp::AddFirst, "pt-flex__item-inner");
+        self.inner_classes
+            .alter_value(ClassesOp::Prepend, "pt-flex__item-inner");
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@@ -58,7 +57,7 @@ impl ComponentTrait for Item {
             _ => Some(concat_string!("order: ", self.weight().to_string(), ";")),
         };
         PrepareMarkup::With(html! {
-            div id=[self.id()] class=[self.item_classes().get()] style=[order] {
+            div id=[self.id()] class=[self.classes().get()] style=[order] {
                 div class=[self.inner_classes().get()] {
                     (self.components().render(cx))
                 }
@@ -67,6 +66,17 @@ impl ComponentTrait for Item {
     }
 }
 
+impl ComponentClasses for Item {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.item_classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.item_classes
+    }
+}
+
 impl Item {
     // Item BUILDER.
 
@@ -88,12 +98,6 @@ impl Item {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_item_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.item_classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_inner_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
         self.inner_classes.alter_value(op, classes);
@@ -144,10 +148,6 @@ impl Item {
 
     // Item GETTERS.
 
-    pub fn item_classes(&self) -> &OptionClasses {
-        &self.item_classes
-    }
-
     pub fn inner_classes(&self) -> &OptionClasses {
         &self.inner_classes
     }
diff --git a/pagetop/src/base/component/form/button.rs b/pagetop/src/base/component/form/button.rs
index a24f290f..b4db4788 100644
--- a/pagetop/src/base/component/form/button.rs
+++ b/pagetop/src/base/component/form/button.rs
@@ -48,9 +48,9 @@ impl ComponentTrait for Button {
         (self.renderable.check)(cx)
     }
 
+    #[rustfmt::skip]
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.classes.alter_value(
-            ClassesOp::AddFirst,
+        self.prepend_classes(
             concat_string!("btn btn-primary form-", self.button_type.to_string()),
         );
     }
@@ -73,6 +73,17 @@ impl ComponentTrait for Button {
     }
 }
 
+impl ComponentClasses for Button {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Button {
     pub fn with(value: L10n) -> Self {
         Button::default().with_value(value)
@@ -104,12 +115,6 @@ impl Button {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_name(&mut self, name: &str) -> &mut Self {
         self.name.alter_value(name);
@@ -148,10 +153,6 @@ impl Button {
 
     // Button GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn button_type(&self) -> &ButtonType {
         &self.button_type
     }
diff --git a/pagetop/src/base/component/form/date.rs b/pagetop/src/base/component/form/date.rs
index 7893c5a6..07e99b96 100644
--- a/pagetop/src/base/component/form/date.rs
+++ b/pagetop/src/base/component/form/date.rs
@@ -68,6 +68,17 @@ impl ComponentTrait for Date {
     }
 }
 
+impl ComponentClasses for Date {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Date {
     // Date BUILDER.
 
@@ -83,12 +94,6 @@ impl Date {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_name(&mut self, name: &str) -> &mut Self {
         self.name.alter_value(name);
@@ -172,10 +177,6 @@ impl Date {
 
     // Date GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn name(&self) -> &OptionString {
         &self.name
     }
diff --git a/pagetop/src/base/component/form/form_main.rs b/pagetop/src/base/component/form/form_main.rs
index 6565d22e..0abdd438 100644
--- a/pagetop/src/base/component/form/form_main.rs
+++ b/pagetop/src/base/component/form/form_main.rs
@@ -61,6 +61,17 @@ impl ComponentTrait for Form {
     }
 }
 
+impl ComponentClasses for Form {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Form {
     // Form BUILDER.
 
@@ -82,12 +93,6 @@ impl Form {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_action(&mut self, action: &str) -> &mut Self {
         self.action.alter_value(action);
@@ -126,10 +131,6 @@ impl Form {
 
     // Form GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn action(&self) -> &OptionString {
         &self.action
     }
diff --git a/pagetop/src/base/component/form/input.rs b/pagetop/src/base/component/form/input.rs
index b5d906d7..80b8eb2f 100644
--- a/pagetop/src/base/component/form/input.rs
+++ b/pagetop/src/base/component/form/input.rs
@@ -98,6 +98,17 @@ impl ComponentTrait for Input {
     }
 }
 
+impl ComponentClasses for Input {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Input {
     pub fn textfield() -> Self {
         Input::default()
@@ -162,18 +173,12 @@ impl Input {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_name(&mut self, name: &str) -> &mut Self {
         if let Some(previous) = self.name.get() {
-            self.alter_classes(ClassesOp::Remove, concat_string!("form-item-", previous));
+            self.remove_classes(concat_string!("form-item-", previous));
         }
-        self.alter_classes(ClassesOp::Add, concat_string!("form-item-", name));
+        self.add_classes(concat_string!("form-item-", name));
         self.name.alter_value(name);
         self
     }
@@ -273,10 +278,6 @@ impl Input {
 
     // Input GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn input_type(&self) -> &InputType {
         &self.input_type
     }
diff --git a/pagetop/src/base/component/heading.rs b/pagetop/src/base/component/heading.rs
index 181e9b6a..1883f084 100644
--- a/pagetop/src/base/component/heading.rs
+++ b/pagetop/src/base/component/heading.rs
@@ -71,7 +71,7 @@ impl ComponentTrait for Heading {
 
     #[rustfmt::skip]
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.classes.alter_value(ClassesOp::Add, self.display().to_string());
+        self.add_classes(self.display().to_string());
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@@ -89,6 +89,17 @@ impl ComponentTrait for Heading {
     }
 }
 
+impl ComponentClasses for Heading {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Heading {
     pub fn h1(text: L10n) -> Self {
         Heading::default()
@@ -146,12 +157,6 @@ impl Heading {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_heading_type(&mut self, heading_type: HeadingType) -> &mut Self {
         self.heading_type = heading_type;
@@ -172,10 +177,6 @@ impl Heading {
 
     // Paragraph GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn heading_type(&self) -> &HeadingType {
         &self.heading_type
     }
diff --git a/pagetop/src/base/component/icon.rs b/pagetop/src/base/component/icon.rs
index ffb028e7..4aabe923 100644
--- a/pagetop/src/base/component/icon.rs
+++ b/pagetop/src/base/component/icon.rs
@@ -25,11 +25,11 @@ impl ComponentTrait for Icon {
         (self.renderable.check)(cx)
     }
 
+    #[rustfmt::skip]
     fn setup_before_prepare(&mut self, cx: &mut Context) {
         if let Some(icon_name) = self.icon_name.get() {
-            self.classes.alter_value(
-                ClassesOp::AddFirst,
-                concat_string!("bi-", icon_name, " ", self.font_size.to_string()),
+            self.prepend_classes(
+                concat_string!("bi-", icon_name, " ", self.font_size().to_string()),
             );
             cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
         }
@@ -43,6 +43,17 @@ impl ComponentTrait for Icon {
     }
 }
 
+impl ComponentClasses for Icon {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Icon {
     pub fn with(icon_name: impl Into<String>) -> Self {
         Icon::default().with_icon_name(icon_name)
@@ -62,12 +73,6 @@ impl Icon {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_icon_name(&mut self, name: impl Into<String>) -> &mut Self {
         self.icon_name.alter_value(name);
@@ -82,10 +87,6 @@ impl Icon {
 
     // Icon GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn icon_name(&self) -> &OptionString {
         &self.icon_name
     }
diff --git a/pagetop/src/base/component/image.rs b/pagetop/src/base/component/image.rs
index 360c01e8..f4841b8f 100644
--- a/pagetop/src/base/component/image.rs
+++ b/pagetop/src/base/component/image.rs
@@ -62,6 +62,17 @@ impl ComponentTrait for Image {
     }
 }
 
+impl ComponentClasses for Image {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Image {
     pub fn with(source: &str) -> Self {
         Image::default()
@@ -102,12 +113,6 @@ impl Image {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_source(&mut self, source: &str) -> &mut Self {
         self.source.alter_value(source);
@@ -122,10 +127,6 @@ impl Image {
 
     // Image GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn source(&self) -> &OptionString {
         &self.source
     }
diff --git a/pagetop/src/base/component/paragraph.rs b/pagetop/src/base/component/paragraph.rs
index 2ff74fd7..dfa7a253 100644
--- a/pagetop/src/base/component/paragraph.rs
+++ b/pagetop/src/base/component/paragraph.rs
@@ -30,9 +30,8 @@ impl ComponentTrait for Paragraph {
         (self.renderable.check)(cx)
     }
 
-    #[rustfmt::skip]
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
-        self.classes.alter_value(ClassesOp::AddFirst, self.font_size.to_string());
+        self.prepend_classes(self.font_size().to_string());
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@@ -47,6 +46,17 @@ impl ComponentTrait for Paragraph {
     }
 }
 
+impl ComponentClasses for Paragraph {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Paragraph {
     pub fn with(component: impl ComponentTrait) -> Self {
         Paragraph::default().add_component(component)
@@ -76,12 +86,6 @@ impl Paragraph {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
         self.font_size = font_size;
@@ -108,10 +112,6 @@ impl Paragraph {
 
     // Paragraph GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn font_size(&self) -> &FontSize {
         &self.font_size
     }
diff --git a/pagetop/src/base/component/wrapper.rs b/pagetop/src/base/component/wrapper.rs
index 25fa7eff..2cfa7fdc 100644
--- a/pagetop/src/base/component/wrapper.rs
+++ b/pagetop/src/base/component/wrapper.rs
@@ -83,6 +83,17 @@ impl ComponentTrait for Wrapper {
     }
 }
 
+impl ComponentClasses for Wrapper {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+}
+
 impl Wrapper {
     pub fn header() -> Self {
         let mut c = Wrapper::default()
@@ -136,12 +147,6 @@ impl Wrapper {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_inner_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
         self.inner_classes.alter_value(op, classes);
@@ -168,10 +173,6 @@ impl Wrapper {
 
     // Wrapper GETTERS.
 
-    pub fn classes(&self) -> &OptionClasses {
-        &self.classes
-    }
-
     pub fn inner_classes(&self) -> &OptionClasses {
         &self.inner_classes
     }
diff --git a/pagetop/src/core/component.rs b/pagetop/src/core/component.rs
index 9d57d87d..57be6b3d 100644
--- a/pagetop/src/core/component.rs
+++ b/pagetop/src/core/component.rs
@@ -8,6 +8,9 @@ pub use renderable::{FnIsRenderable, Renderable};
 mod definition;
 pub use definition::{component_as_mut, component_as_ref, ComponentBase, ComponentTrait};
 
+mod classes;
+pub use classes::{ComponentClasses, ComponentClassesOp};
+
 mod arc_any;
 pub use arc_any::AnyComponents;
 pub use arc_any::{ArcAnyComponent, ArcAnyOp};
diff --git a/pagetop/src/core/component/classes.rs b/pagetop/src/core/component/classes.rs
new file mode 100644
index 00000000..c58e9974
--- /dev/null
+++ b/pagetop/src/core/component/classes.rs
@@ -0,0 +1,60 @@
+use crate::html::{ClassesOp, OptionClasses};
+
+pub trait ComponentClassesOp {
+    fn with_classes(self, op: ClassesOp, classes: impl Into<String>) -> Self;
+
+    fn add_classes(&mut self, classes: impl Into<String>) -> &mut Self;
+
+    fn prepend_classes(&mut self, classes: impl Into<String>) -> &mut Self;
+
+    fn remove_classes(&mut self, classes: impl Into<String>) -> &mut Self;
+
+    fn replace_classes(&mut self, rep: impl Into<String>, classes: impl Into<String>) -> &mut Self;
+
+    fn toggle_classes(&mut self, classes: impl Into<String>) -> &mut Self;
+
+    fn set_classes(&mut self, classes: impl Into<String>) -> &mut Self;
+}
+
+pub trait ComponentClasses: ComponentClassesOp {
+    fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self;
+
+    fn classes(&self) -> &OptionClasses;
+}
+
+impl<C: ComponentClasses> ComponentClassesOp for C {
+    fn with_classes(mut self, op: ClassesOp, classes: impl Into<String>) -> Self {
+        self.alter_classes(op, classes);
+        self
+    }
+
+    fn add_classes(&mut self, classes: impl Into<String>) -> &mut Self {
+        self.alter_classes(ClassesOp::Add, classes);
+        self
+    }
+
+    fn prepend_classes(&mut self, classes: impl Into<String>) -> &mut Self {
+        self.alter_classes(ClassesOp::Prepend, classes);
+        self
+    }
+
+    fn remove_classes(&mut self, classes: impl Into<String>) -> &mut Self {
+        self.alter_classes(ClassesOp::Remove, classes);
+        self
+    }
+
+    fn replace_classes(&mut self, rep: impl Into<String>, classes: impl Into<String>) -> &mut Self {
+        self.alter_classes(ClassesOp::Replace(rep.into()), classes);
+        self
+    }
+
+    fn toggle_classes(&mut self, classes: impl Into<String>) -> &mut Self {
+        self.alter_classes(ClassesOp::Toggle, classes);
+        self
+    }
+
+    fn set_classes(&mut self, classes: impl Into<String>) -> &mut Self {
+        self.alter_classes(ClassesOp::Set, classes);
+        self
+    }
+}
diff --git a/pagetop/src/html/opt_classes.rs b/pagetop/src/html/opt_classes.rs
index acddcf50..aba25eaa 100644
--- a/pagetop/src/html/opt_classes.rs
+++ b/pagetop/src/html/opt_classes.rs
@@ -13,11 +13,11 @@ use crate::{fn_builder, SmartDefault};
 
 pub enum ClassesOp {
     Add,
-    AddFirst,
+    Prepend,
     Remove,
     Replace(String),
     Toggle,
-    Clear,
+    Set,
 }
 
 #[derive(SmartDefault)]
@@ -25,7 +25,7 @@ pub struct OptionClasses(Vec<String>);
 
 impl OptionClasses {
     pub fn new(classes: impl Into<String>) -> Self {
-        OptionClasses::default().with_value(ClassesOp::AddFirst, classes)
+        OptionClasses::default().with_value(ClassesOp::Prepend, classes)
     }
 
     // OptionClasses BUILDER.
@@ -39,7 +39,7 @@ impl OptionClasses {
             ClassesOp::Add => {
                 self.add(&classes, self.0.len());
             }
-            ClassesOp::AddFirst => {
+            ClassesOp::Prepend => {
                 self.add(&classes, 0);
             }
             ClassesOp::Remove => {
@@ -71,8 +71,9 @@ impl OptionClasses {
                     }
                 }
             }
-            ClassesOp::Clear => {
+            ClassesOp::Set => {
                 self.0.clear();
+                self.add(&classes, 0);
             }
         }
         self