From 3d2e75057757e595cc5ff29092579e3dce763f4f Mon Sep 17 00:00:00 2001
From: Manuel Cillero <manuel@cillero.es>
Date: Mon, 13 Nov 2023 17:23:58 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20General=20components=20review?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pagetop-admin/src/lib.rs                      |    4 +-
 pagetop-bootsier/src/lib.rs                   |    6 +-
 pagetop-bootsier/static/css/styles.css        |    8 +-
 pagetop-bulmix/src/lib.rs                     |   48 +-
 pagetop-bulmix/static/css/styles.css          |   11 +
 pagetop-homedemo/src/lib.rs                   |   10 +-
 pagetop-homedemo/static/css/styles.css        |    4 +-
 pagetop-node/src/lib.rs                       |    2 +-
 pagetop/src/base/component.rs                 |    9 +-
 pagetop/src/base/component/block.rs           |   33 +-
 pagetop/src/base/component/branding.rs        |   20 +-
 .../base/component/{anchor.rs => button.rs}   |  129 +-
 pagetop/src/base/component/flex/container.rs  |   56 +-
 pagetop/src/base/component/flex/item.rs       |   64 +-
 pagetop/src/base/component/form/button.rs     |   26 +-
 pagetop/src/base/component/heading.rs         |   27 +-
 pagetop/src/base/component/icon.rs            |   47 +-
 pagetop/src/base/component/image.rs           |   14 +-
 pagetop/src/base/component/paragraph.rs       |   38 +-
 pagetop/src/base/component/wrapper.rs         |   25 +-
 pagetop/src/core/component/definition.rs      |    6 +
 pagetop/static/base/css/buttons.css           | 1211 +++++++++++++++++
 pagetop/static/base/css/inception.css         |   15 +-
 pagetop/static/base/css/looks.css             |    2 +-
 pagetop/static/base/css/root.css              |   46 +-
 25 files changed, 1557 insertions(+), 304 deletions(-)
 create mode 100644 pagetop-bulmix/static/css/styles.css
 rename pagetop/src/base/component/{anchor.rs => button.rs} (61%)
 create mode 100644 pagetop/static/base/css/buttons.css

diff --git a/pagetop-admin/src/lib.rs b/pagetop-admin/src/lib.rs
index bf7f5ca0..db70f468 100644
--- a/pagetop-admin/src/lib.rs
+++ b/pagetop-admin/src/lib.rs
@@ -19,8 +19,8 @@ impl ModuleTrait for Admin {
 
     fn actions(&self) -> Vec<Action> {
         actions![
-            action::page::BeforePrepareBody::with(before_prepare_body),
-            action::component::BeforePrepareComponent::<Menu>::with(before_prepare_menu)
+            action::page::BeforePrepareBody::new(before_prepare_body),
+            action::component::BeforePrepareComponent::<Menu>::new(before_prepare_menu)
                 .filter_by_referer_id("admin-menu-test"),
         ]
     }
diff --git a/pagetop-bootsier/src/lib.rs b/pagetop-bootsier/src/lib.rs
index 40e837ad..543bca46 100644
--- a/pagetop-bootsier/src/lib.rs
+++ b/pagetop-bootsier/src/lib.rs
@@ -124,16 +124,16 @@ impl ThemeTrait for Bootsier {
                     }
                     _ => {}
                 };
-                match a.anchor_type() {
+                match a.button_type() {
                     ButtonType::Link => {
                         a.alter_classes(
-                            ClassesOp::Replace(a.anchor_type().to_string()),
+                            ClassesOp::Replace(a.button_type().to_string()),
                             "btn btn-link",
                         );
                     }
                     ButtonType::Primary => {
                         a.alter_classes(
-                            ClassesOp::Replace(a.anchor_type().to_string()),
+                            ClassesOp::Replace(a.button_type().to_string()),
                             "btn btn-primary",
                         );
                     }
diff --git a/pagetop-bootsier/static/css/styles.css b/pagetop-bootsier/static/css/styles.css
index a26bdd57..9f458863 100644
--- a/pagetop-bootsier/static/css/styles.css
+++ b/pagetop-bootsier/static/css/styles.css
@@ -3,5 +3,11 @@
 /* Heading component */
 
 .pt-heading__subtitle {
-	margin-top: calc(-1 * var(--pt-gap-0-5));
+	margin-top: calc(-1 * var(--pt-gap-0-35));
+}
+
+/* Button component */
+
+.btn-link {
+	text-decoration: none;
 }
diff --git a/pagetop-bulmix/src/lib.rs b/pagetop-bulmix/src/lib.rs
index 272f83b2..ba50dd68 100644
--- a/pagetop-bulmix/src/lib.rs
+++ b/pagetop-bulmix/src/lib.rs
@@ -24,7 +24,10 @@ impl ThemeTrait for Bulmix {
                     .with_version("0.9.4")
                     .with_weight(-99),
             ))
-            .alter_context(ContextOp::AddBaseAssets);
+            .alter_context(ContextOp::AddBaseAssets)
+            .alter_context(ContextOp::AddStyleSheet(
+                StyleSheet::at("/bulmix/css/styles.css").with_version("0.0.1"),
+            ));
     }
 
     fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
@@ -50,8 +53,8 @@ impl ThemeTrait for Bulmix {
                     _ => {}
                 };
             }
-            COMPONENT_BASE_ANCHOR => {
-                let a = component_as_mut::<Anchor>(component);
+            COMPONENT_BASE_BUTTON => {
+                let a = component_as_mut::<Button>(component);
                 match a.font_size() {
                     FontSize::ExtraLarge => {
                         a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-1");
@@ -70,12 +73,20 @@ impl ThemeTrait for Bulmix {
                     }
                     _ => {}
                 };
-                if let AnchorType::Button = a.anchor_type() {
-                    a.alter_classes(
-                        ClassesOp::Replace(a.anchor_type().to_string()),
-                        "button is-primary",
-                    );
-                };
+                match a.button_type() {
+                    ButtonType::Link => {
+                        a.alter_classes(
+                            ClassesOp::Replace(a.button_type().to_string()),
+                            "button is-text",
+                        );
+                    }
+                    ButtonType::Primary => {
+                        a.alter_classes(
+                            ClassesOp::Replace(a.button_type().to_string()),
+                            "button is-primary",
+                        );
+                    }
+                }
             }
             COMPONENT_BASE_HEADING => {
                 let h = component_as_mut::<Heading>(component);
@@ -112,19 +123,18 @@ impl ThemeTrait for Bulmix {
         }
     }
 
-    fn render_component(&self, component: &dyn ComponentTrait, cx: &mut Context) -> Option<Markup> {
+    fn render_component(
+        &self,
+        component: &dyn ComponentTrait,
+        _cx: &mut Context,
+    ) -> Option<Markup> {
         match component.handle() {
             COMPONENT_BASE_ICON => {
                 let icon = component_as_ref::<Icon>(component);
-                if icon.icon_name().is_empty() {
-                    return None;
-                };
-                cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
-                Some(html! {
-                    span class="icon" {
-                        i class=[icon.classes().get()] {}
-                    }
-                })
+                match icon.icon_name().get() {
+                    None => None,
+                    _ => Some(html! { span class="icon" { i class=[icon.classes().get()] {} } }),
+                }
             }
             _ => None,
         }
diff --git a/pagetop-bulmix/static/css/styles.css b/pagetop-bulmix/static/css/styles.css
new file mode 100644
index 00000000..cdd6b4e9
--- /dev/null
+++ b/pagetop-bulmix/static/css/styles.css
@@ -0,0 +1,11 @@
+html {
+    scroll-behavior: smooth;
+}
+
+/* OVERRIDE COMPONENT STYLES */
+
+/* Button component */
+
+.is-link {
+	text-decoration: none;
+}
diff --git a/pagetop-homedemo/src/lib.rs b/pagetop-homedemo/src/lib.rs
index 0ee1ae3b..58b46f2f 100644
--- a/pagetop-homedemo/src/lib.rs
+++ b/pagetop-homedemo/src/lib.rs
@@ -70,20 +70,20 @@ fn hello_world() -> Wrapper {
                         ),
                     ))
                     .add_component(
-                        Anchor::button(
+                        Button::primary(
                             "https://github.com/manuelcillero/pagetop",
                             L10n::t("hello_code", &LOCALES_HOMEDEMO),
                         )
-                        .with_target(AnchorTarget::Blank)
+                        .with_target(ButtonTarget::Blank)
                         .with_left_icon(Icon::with("git"))
                         .with_classes(ClassesOp::Add, "code-link")
-                        .with_font_size(FontSize::Large),
+                        .with_font_size(FontSize::Medium),
                     )
                     .add_component(
-                        Anchor::link("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
+                        Button::link("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
                             .with_left_icon(Icon::with("arrow-down-circle-fill"))
                             .with_classes(ClassesOp::Add, "welcome-link")
-                            .with_font_size(FontSize::Large),
+                            .with_font_size(FontSize::Medium),
                     ),
             )
             .add_item(
diff --git a/pagetop-homedemo/static/css/styles.css b/pagetop-homedemo/static/css/styles.css
index 5034d72e..c06673be 100644
--- a/pagetop-homedemo/static/css/styles.css
+++ b/pagetop-homedemo/static/css/styles.css
@@ -18,7 +18,7 @@ body.default-homepage [class$="-col-text"] {
 body.default-homepage [class$="-col-image"] {
 	padding: 1rem 5%;
 }
-
+/*
 #hello-world a {
 	margin: .25rem;
 }
@@ -36,7 +36,7 @@ body.default-homepage [class$="-col-image"] {
 #hello-world .hello-col-image {
 	padding-top: 3em;
 }
-
+*/
 #welcome > div.container {
 	padding: 2rem 1rem;
 	border-radius: 28px;
diff --git a/pagetop-node/src/lib.rs b/pagetop-node/src/lib.rs
index 1494aaa0..1a58b9f8 100644
--- a/pagetop-node/src/lib.rs
+++ b/pagetop-node/src/lib.rs
@@ -23,7 +23,7 @@ impl ModuleTrait for Node {
     }
 
     fn actions(&self) -> Vec<Action> {
-        actions![action::page::BeforePrepareBody::with(before_prepare_body).with_weight(-1)]
+        actions![action::page::BeforePrepareBody::new(before_prepare_body).with_weight(-1)]
     }
 
     fn migrations(&self) -> Vec<MigrationItem> {
diff --git a/pagetop/src/base/component.rs b/pagetop/src/base/component.rs
index b108402d..ca3f5594 100644
--- a/pagetop/src/base/component.rs
+++ b/pagetop/src/base/component.rs
@@ -46,6 +46,11 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
         StyleSheet::at("/base/css/looks.css")
             .with_version("0.0.1")
             .with_weight(weight),
+    ))
+    .alter(ContextOp::AddStyleSheet(
+        StyleSheet::at("/base/css/buttons.css")
+            .with_version("0.0.1")
+            .with_weight(weight),
     ));
 }
 
@@ -135,8 +140,8 @@ mod heading;
 pub use heading::{Heading, HeadingDisplay, HeadingType, COMPONENT_BASE_HEADING};
 mod paragraph;
 pub use paragraph::{Paragraph, COMPONENT_BASE_PARAGRAPH};
-mod anchor;
-pub use anchor::{Anchor, AnchorTarget, AnchorType, COMPONENT_BASE_ANCHOR};
+mod button;
+pub use button::{Button, ButtonTarget, ButtonType, COMPONENT_BASE_BUTTON};
 mod image;
 pub use image::{Image, ImageSize, COMPONENT_BASE_IMAGE};
 mod block;
diff --git a/pagetop/src/base/component/block.rs b/pagetop/src/base/component/block.rs
index c85e2562..b7925e40 100644
--- a/pagetop/src/base/component/block.rs
+++ b/pagetop/src/base/component/block.rs
@@ -3,20 +3,19 @@ use crate::prelude::*;
 #[rustfmt::skip]
 #[derive(Default)]
 pub struct Block {
+    id        : OptionId,
     weight    : Weight,
     renderable: Renderable,
-    id        : OptionId,
     classes   : OptionClasses,
     title     : OptionTranslated,
-    stuff     : ArcComponents,
-    template  : String,
+    stuff     : AnyComponents,
 }
 
 impl_handle!(COMPONENT_BASE_BLOCK for Block);
 
 impl ComponentTrait for Block {
     fn new() -> Self {
-        Block::default().with_classes(ClassesOp::Add, "block")
+        Block::default()
     }
 
     fn id(&self) -> Option<String> {
@@ -31,7 +30,14 @@ impl ComponentTrait for Block {
         (self.renderable.check)(cx)
     }
 
+    fn setup_before_prepare(&mut self, _cx: &mut Context) {
+        self.classes.alter_value(ClassesOp::AddFirst, "block");
+    }
+
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
+        if self.components().is_empty() {
+            return PrepareMarkup::None;
+        }
         let id = cx.required_id::<Block>(self.id());
         PrepareMarkup::With(html! {
             div id=(id) class=[self.classes().get()] {
@@ -79,20 +85,15 @@ impl Block {
         self
     }
 
+    #[rustfmt::skip]
     pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
-        self.stuff.alter(ArcOp::Add(ArcComponent::with(component)));
+        self.stuff.alter_value(ArcAnyOp::Add(ArcAnyComponent::new(component)));
         self
     }
 
     #[fn_builder]
-    pub fn alter_components(&mut self, op: ArcOp) -> &mut Self {
-        self.stuff.alter(op);
-        self
-    }
-
-    #[fn_builder]
-    pub fn alter_template(&mut self, template: &str) -> &mut Self {
-        self.template = template.to_owned();
+    pub fn alter_components(&mut self, op: ArcAnyOp) -> &mut Self {
+        self.stuff.alter_value(op);
         self
     }
 
@@ -106,11 +107,7 @@ impl Block {
         &self.title
     }
 
-    pub fn components(&self) -> &ArcComponents {
+    pub fn components(&self) -> &AnyComponents {
         &self.stuff
     }
-
-    pub fn template(&self) -> &str {
-        self.template.as_str()
-    }
 }
diff --git a/pagetop/src/base/component/branding.rs b/pagetop/src/base/component/branding.rs
index c0d59fb0..d5149d25 100644
--- a/pagetop/src/base/component/branding.rs
+++ b/pagetop/src/base/component/branding.rs
@@ -1,14 +1,13 @@
 use crate::prelude::*;
 
-type SiteLogo = TypedComponent<Image>;
-
 #[rustfmt::skip]
 pub struct Branding {
+    id        : OptionId,
     weight    : Weight,
     renderable: Renderable,
     app_name  : String,
     slogan    : OptionTranslated,
-    logo      : SiteLogo,
+    logo      : ArcTypedComponent<Image>,
     frontpage : FnContextualPath,
 }
 
@@ -16,11 +15,12 @@ pub struct Branding {
 impl Default for Branding {
     fn default() -> Self {
         Branding {
+            id        : OptionId::default(),
             weight    : Weight::default(),
             renderable: Renderable::default(),
             app_name  : config::SETTINGS.app.name.to_owned(),
             slogan    : OptionTranslated::default(),
-            logo      : SiteLogo::default(),
+            logo      : ArcTypedComponent::<Image>::default(),
             frontpage : |_| "/",
         }
     }
@@ -34,7 +34,7 @@ impl ComponentTrait for Branding {
     }
 
     fn id(&self) -> Option<String> {
-        Some("pt-branding".to_owned())
+        self.id.get()
     }
 
     fn weight(&self) -> Weight {
@@ -48,7 +48,7 @@ impl ComponentTrait for Branding {
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         let title = L10n::l("site_home").using(cx.langid());
         PrepareMarkup::With(html! {
-            div id=[self.id()] {
+            div id=[self.id()] class="pt-branding" {
                 div class="pt-branding__wrapper" {
                     div class="pt-branding__logo" {
                         (self.logo().render(cx))
@@ -74,6 +74,12 @@ impl ComponentTrait for Branding {
 impl Branding {
     // Branding BUILDER.
 
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.id.alter_value(id);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
         self.weight = value;
@@ -120,7 +126,7 @@ impl Branding {
         &self.slogan
     }
 
-    pub fn logo(&self) -> &SiteLogo {
+    pub fn logo(&self) -> &ArcTypedComponent<Image> {
         &self.logo
     }
 
diff --git a/pagetop/src/base/component/anchor.rs b/pagetop/src/base/component/button.rs
similarity index 61%
rename from pagetop/src/base/component/anchor.rs
rename to pagetop/src/base/component/button.rs
index 6aad1b92..88e5917d 100644
--- a/pagetop/src/base/component/anchor.rs
+++ b/pagetop/src/base/component/button.rs
@@ -1,27 +1,24 @@
 use crate::prelude::*;
 
-new_handle!(COMPONENT_BASE_ANCHOR);
-
 #[derive(Default)]
-pub enum AnchorType {
+pub enum ButtonType {
     #[default]
     Link,
-    Button,
-    Location,
+    Primary,
 }
 
 #[rustfmt::skip]
-impl ToString for AnchorType {
+impl ToString for ButtonType {
     fn to_string(&self) -> String {
-        match self {
-            AnchorType::Button => "btn btn-primary".to_string(),
-            _ => "".to_string(),
-        }
+        String::from(match self {
+            ButtonType::Link    => "pt-button__link",
+            ButtonType::Primary => "pt-button__primary",
+        })
     }
 }
 
 #[derive(Default)]
-pub enum AnchorTarget {
+pub enum ButtonTarget {
     #[default]
     Default,
     Blank,
@@ -30,31 +27,29 @@ pub enum AnchorTarget {
     Context(String),
 }
 
-type AnchorIcon = TypedComponent<Icon>;
+type ButtonIcon = ArcTypedComponent<Icon>;
 
 #[rustfmt::skip]
 #[derive(Default)]
-pub struct Anchor {
+pub struct Button {
+    id         : OptionId,
     weight     : Weight,
     renderable : Renderable,
-    id         : OptionId,
     classes    : OptionClasses,
+    button_type: ButtonType,
     font_size  : FontSize,
-    anchor_type: AnchorType,
     href       : OptionString,
     html       : OptionTranslated,
-    left_icon  : AnchorIcon,
-    right_icon : AnchorIcon,
-    target     : AnchorTarget,
+    left_icon  : ButtonIcon,
+    right_icon : ButtonIcon,
+    target     : ButtonTarget,
 }
 
-impl ComponentTrait for Anchor {
-    fn new() -> Self {
-        Anchor::default()
-    }
+impl_handle!(COMPONENT_BASE_BUTTON for Button);
 
-    fn handle(&self) -> Handle {
-        COMPONENT_BASE_ANCHOR
+impl ComponentTrait for Button {
+    fn new() -> Self {
+        Button::default()
     }
 
     fn id(&self) -> Option<String> {
@@ -69,13 +64,20 @@ impl ComponentTrait for Anchor {
         (self.renderable.check)(cx)
     }
 
+    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(" "),
+        );
+    }
+
     #[rustfmt::skip]
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         let target = match &self.target() {
-            AnchorTarget::Blank         => Some("_blank"),
-            AnchorTarget::Parent        => Some("_parent"),
-            AnchorTarget::Top           => Some("_top"),
-            AnchorTarget::Context(name) => Some(name.as_str()),
+            ButtonTarget::Blank  => Some("_blank"),
+            ButtonTarget::Parent => Some("_parent"),
+            ButtonTarget::Top    => Some("_top"),
+            ButtonTarget::Context(name) => Some(name.as_str()),
             _ => None,
         };
         PrepareMarkup::With(html! {
@@ -85,31 +87,36 @@ impl ComponentTrait for Anchor {
                 href=[self.href().get()]
                 target=[target]
             {
-                (self.left_icon().prepare(cx))
-                " " span { (self.html().escaped(cx.langid())) } " "
-                (self.right_icon().prepare(cx))
+                (self.left_icon().render(cx))
+                " " span { (self.html().escaped(cx.langid()).unwrap_or_default()) } " "
+                (self.right_icon().render(cx))
             }
         })
     }
 }
 
-impl Anchor {
+impl Button {
     pub fn link(href: impl Into<String>, html: L10n) -> Self {
-        Anchor::new().with_href(href).with_html(html)
-    }
-
-    pub fn button(href: impl Into<String>, html: L10n) -> Self {
-        Anchor::new()
-            .with_type(AnchorType::Button)
+        Button::default()
+            .with_type(ButtonType::Link)
             .with_href(href)
             .with_html(html)
     }
 
-    pub fn location(id: impl Into<String>) -> Self {
-        Anchor::new().with_type(AnchorType::Location).with_id(id)
+    pub fn primary(href: impl Into<String>, html: L10n) -> Self {
+        Button::default()
+            .with_type(ButtonType::Primary)
+            .with_href(href)
+            .with_html(html)
     }
 
-    // Anchor BUILDER.
+    // Button BUILDER.
+
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.id.alter_value(id);
+        self
+    }
 
     #[fn_builder]
     pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
@@ -123,12 +130,6 @@ impl Anchor {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
-        self.id.alter_value(id);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
         self.classes.alter_value(op, classes);
@@ -136,22 +137,14 @@ impl Anchor {
     }
 
     #[fn_builder]
-    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.font_size.to_string()),
-            font_size.to_string(),
-        );
-        self.font_size = font_size;
+    pub fn alter_type(&mut self, button_type: ButtonType) -> &mut Self {
+        self.button_type = button_type;
         self
     }
 
     #[fn_builder]
-    pub fn alter_type(&mut self, anchor_type: AnchorType) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.anchor_type.to_string()),
-            anchor_type.to_string(),
-        );
-        self.anchor_type = anchor_type;
+    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
+        self.font_size = font_size;
         self
     }
 
@@ -180,23 +173,23 @@ impl Anchor {
     }
 
     #[fn_builder]
-    pub fn alter_target(&mut self, target: AnchorTarget) -> &mut Self {
+    pub fn alter_target(&mut self, target: ButtonTarget) -> &mut Self {
         self.target = target;
         self
     }
 
-    // Anchor GETTERS.
+    // Button GETTERS.
 
     pub fn classes(&self) -> &OptionClasses {
         &self.classes
     }
 
-    pub fn font_size(&self) -> &FontSize {
-        &self.font_size
+    pub fn button_type(&self) -> &ButtonType {
+        &self.button_type
     }
 
-    pub fn anchor_type(&self) -> &AnchorType {
-        &self.anchor_type
+    pub fn font_size(&self) -> &FontSize {
+        &self.font_size
     }
 
     pub fn href(&self) -> &OptionString {
@@ -207,15 +200,15 @@ impl Anchor {
         &self.html
     }
 
-    pub fn left_icon(&self) -> &AnchorIcon {
+    pub fn left_icon(&self) -> &ButtonIcon {
         &self.left_icon
     }
 
-    pub fn right_icon(&self) -> &AnchorIcon {
+    pub fn right_icon(&self) -> &ButtonIcon {
         &self.right_icon
     }
 
-    pub fn target(&self) -> &AnchorTarget {
+    pub fn target(&self) -> &ButtonTarget {
         &self.target
     }
 }
diff --git a/pagetop/src/base/component/flex/container.rs b/pagetop/src/base/component/flex/container.rs
index f879101f..83912eec 100644
--- a/pagetop/src/base/component/flex/container.rs
+++ b/pagetop/src/base/component/flex/container.rs
@@ -3,9 +3,9 @@ use crate::prelude::*;
 #[rustfmt::skip]
 #[derive(Default)]
 pub struct Container {
+    id             : OptionId,
     weight         : Weight,
     renderable     : Renderable,
-    id             : OptionId,
     classes        : OptionClasses,
     items          : TypedComponents<flex::Item>,
     direction      : flex::Direction,
@@ -19,7 +19,7 @@ impl_handle!(COMPONENT_BASE_FLEX_CONTAINER for Container);
 
 impl ComponentTrait for Container {
     fn new() -> Self {
-        Container::default().with_classes(ClassesOp::Add, flex::Direction::Default.to_string())
+        Container::default()
     }
 
     fn id(&self) -> Option<String> {
@@ -34,9 +34,22 @@ impl ComponentTrait for Container {
         (self.renderable.check)(cx)
     }
 
-    fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
-        cx.set_param::<bool>(PARAM_BASE_INCLUDE_FLEX_ASSETS, true);
+    fn setup_before_prepare(&mut self, cx: &mut Context) {
+        self.classes.alter_value(
+            ClassesOp::AddFirst,
+            [
+                self.direction.to_string(),
+                self.wrap_align.to_string(),
+                self.content_justify.to_string(),
+                self.items_align.to_string(),
+            ]
+            .join(" "),
+        );
 
+        cx.set_param::<bool>(PARAM_BASE_INCLUDE_FLEX_ASSETS, true);
+    }
+
+    fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         let gap = match self.gap() {
             flex::Gap::Default => None,
             _ => Some(self.gap().to_string()),
@@ -53,6 +66,12 @@ impl ComponentTrait for Container {
 impl Container {
     // Container BUILDER.
 
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.id.alter_value(id);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
         self.weight = value;
@@ -65,65 +84,44 @@ impl Container {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
-        self.id.alter_value(id);
-        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(TypedOp::Add(TypedComponent::with(item)));
+        self.items.alter_value(ArcTypedOp::Add(ArcTypedComponent::new(item)));
         self
     }
 
     #[fn_builder]
-    pub fn alter_items(&mut self, op: TypedOp<flex::Item>) -> &mut Self {
-        self.items.alter(op);
+    pub fn alter_items(&mut self, op: ArcTypedOp<flex::Item>) -> &mut Self {
+        self.items.alter_value(op);
         self
     }
 
     #[fn_builder]
     pub fn alter_direction(&mut self, direction: flex::Direction) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.direction.to_string()),
-            direction.to_string(),
-        );
         self.direction = direction;
         self
     }
 
     #[fn_builder]
     pub fn alter_wrap_align(&mut self, wrap: flex::WrapAlign) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.wrap_align.to_string()),
-            wrap.to_string(),
-        );
         self.wrap_align = wrap;
         self
     }
 
     #[fn_builder]
     pub fn alter_content_justify(&mut self, justify: flex::ContentJustify) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.content_justify.to_string()),
-            justify.to_string(),
-        );
         self.content_justify = justify;
         self
     }
 
     #[fn_builder]
     pub fn alter_items_align(&mut self, align: flex::ItemAlign) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.items_align.to_string()),
-            align.to_string(),
-        );
         self.items_align = align;
         self
     }
diff --git a/pagetop/src/base/component/flex/item.rs b/pagetop/src/base/component/flex/item.rs
index 375f528f..1abe91a1 100644
--- a/pagetop/src/base/component/flex/item.rs
+++ b/pagetop/src/base/component/flex/item.rs
@@ -3,9 +3,9 @@ use crate::prelude::*;
 #[rustfmt::skip]
 #[derive(Default)]
 pub struct Item {
+    id           : OptionId,
     weight       : Weight,
     renderable   : Renderable,
-    id           : OptionId,
     item_classes : OptionClasses,
     inner_classes: OptionClasses,
     item_grow    : flex::ItemGrow,
@@ -13,7 +13,7 @@ pub struct Item {
     item_size    : flex::ItemSize,
     item_offset  : flex::ItemOffset,
     item_align   : flex::ItemAlign,
-    stuff        : ArcComponents,
+    stuff        : AnyComponents,
 }
 
 impl_handle!(COMPONENT_BASE_FLEX_ITEM for Item);
@@ -21,8 +21,6 @@ impl_handle!(COMPONENT_BASE_FLEX_ITEM for Item);
 impl ComponentTrait for Item {
     fn new() -> Self {
         Item::default()
-            .with_item_classes(ClassesOp::Add, "pt-flex__item")
-            .with_inner_classes(ClassesOp::Add, "pt-flex__item-inner")
     }
 
     fn id(&self) -> Option<String> {
@@ -37,6 +35,23 @@ impl ComponentTrait for Item {
         (self.renderable.check)(cx)
     }
 
+    fn setup_before_prepare(&mut self, _cx: &mut Context) {
+        self.item_classes.alter_value(
+            ClassesOp::AddFirst,
+            [
+                "pt-flex__item".to_owned(),
+                self.item_grow.to_string(),
+                self.item_shrink.to_string(),
+                self.item_size.to_string(),
+                self.item_offset.to_string(),
+                self.item_align.to_string(),
+            ]
+            .join(" "),
+        );
+        self.inner_classes
+            .alter_value(ClassesOp::AddFirst, "pt-flex__item-inner");
+    }
+
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         let order = match self.weight() {
             0 => None,
@@ -55,6 +70,12 @@ impl ComponentTrait for Item {
 impl Item {
     // Item BUILDER.
 
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.id.alter_value(id);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
         self.weight = value;
@@ -67,12 +88,6 @@ impl Item {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
-        self.id.alter_value(id);
-        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);
@@ -87,62 +102,43 @@ impl Item {
 
     #[fn_builder]
     pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self {
-        self.item_classes.alter_value(
-            ClassesOp::Replace(self.item_grow.to_string()),
-            grow.to_string(),
-        );
         self.item_grow = grow;
         self
     }
 
     #[fn_builder]
     pub fn alter_shrink(&mut self, shrink: flex::ItemShrink) -> &mut Self {
-        self.item_classes.alter_value(
-            ClassesOp::Replace(self.item_shrink.to_string()),
-            shrink.to_string(),
-        );
         self.item_shrink = shrink;
         self
     }
 
     #[fn_builder]
     pub fn alter_size(&mut self, size: flex::ItemSize) -> &mut Self {
-        self.item_classes.alter_value(
-            ClassesOp::Replace(self.item_size.to_string()),
-            size.to_string(),
-        );
         self.item_size = size;
         self
     }
 
     #[fn_builder]
     pub fn alter_offset(&mut self, offset: flex::ItemOffset) -> &mut Self {
-        self.item_classes.alter_value(
-            ClassesOp::Replace(self.item_offset.to_string()),
-            offset.to_string(),
-        );
         self.item_offset = offset;
         self
     }
 
     #[fn_builder]
     pub fn alter_align(&mut self, align: flex::ItemAlign) -> &mut Self {
-        self.item_classes.alter_value(
-            ClassesOp::Replace(self.item_align.to_string()),
-            align.to_string(),
-        );
         self.item_align = align;
         self
     }
 
+    #[rustfmt::skip]
     pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
-        self.stuff.alter(ArcOp::Add(ArcComponent::with(component)));
+        self.stuff.alter_value(ArcAnyOp::Add(ArcAnyComponent::new(component)));
         self
     }
 
     #[fn_builder]
-    pub fn alter_components(&mut self, op: ArcOp) -> &mut Self {
-        self.stuff.alter(op);
+    pub fn alter_components(&mut self, op: ArcAnyOp) -> &mut Self {
+        self.stuff.alter_value(op);
         self
     }
 
@@ -176,7 +172,7 @@ impl Item {
         &self.item_align
     }
 
-    pub fn components(&self) -> &ArcComponents {
+    pub fn components(&self) -> &AnyComponents {
         &self.stuff
     }
 }
diff --git a/pagetop/src/base/component/form/button.rs b/pagetop/src/base/component/form/button.rs
index 86462c7a..e64c3fc1 100644
--- a/pagetop/src/base/component/form/button.rs
+++ b/pagetop/src/base/component/form/button.rs
@@ -37,7 +37,7 @@ impl_handle!(COMPONENT_BASE_BUTTON for Button);
 
 impl ComponentTrait for Button {
     fn new() -> Self {
-        Button::default().with_classes(ClassesOp::Add, "btn btn-primary form-button")
+        Button::default()
     }
 
     fn weight(&self) -> Weight {
@@ -48,16 +48,18 @@ impl ComponentTrait for Button {
         (self.renderable.check)(cx)
     }
 
+    fn setup_before_prepare(&mut self, _cx: &mut Context) {
+        self.classes.alter_value(
+            ClassesOp::AddFirst,
+            concat_string!("btn btn-primary form-", self.button_type.to_string()),
+        );
+    }
+
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
-        let button_type = match self.button_type() {
-            ButtonType::Button => "button",
-            ButtonType::Submit => "submit",
-            ButtonType::Reset => "reset",
-        };
         let id = self.name().get().map(|name| concat_string!("edit-", name));
         PrepareMarkup::With(html! {
             button
-                type=(button_type)
+                type=(self.button_type().to_string())
                 id=[id]
                 class=[self.classes().get()]
                 name=[self.name().get()]
@@ -65,7 +67,7 @@ impl ComponentTrait for Button {
                 autofocus=[self.autofocus().get()]
                 disabled=[self.disabled().get()]
             {
-                (self.value().escaped(cx.langid()))
+                (self.value().escaped(cx.langid()).unwrap_or_default())
             }
         })
     }
@@ -77,17 +79,13 @@ impl Button {
     }
 
     pub fn submit(value: L10n) -> Self {
-        let mut button = Button::default()
-            .with_classes(ClassesOp::Replace("form-button".to_owned()), "form-submit")
-            .with_value(value);
+        let mut button = Button::default().with_value(value);
         button.button_type = ButtonType::Submit;
         button
     }
 
     pub fn reset(value: L10n) -> Self {
-        let mut button = Button::default()
-            .with_classes(ClassesOp::Replace("form-button".to_owned()), "form-reset")
-            .with_value(value);
+        let mut button = Button::default().with_value(value);
         button.button_type = ButtonType::Reset;
         button
     }
diff --git a/pagetop/src/base/component/heading.rs b/pagetop/src/base/component/heading.rs
index 282b0f28..b2233a8f 100644
--- a/pagetop/src/base/component/heading.rs
+++ b/pagetop/src/base/component/heading.rs
@@ -41,9 +41,9 @@ impl ToString for HeadingDisplay {
 #[rustfmt::skip]
 #[derive(Default)]
 pub struct Heading {
+    id          : OptionId,
     weight      : Weight,
     renderable  : Renderable,
-    id          : OptionId,
     classes     : OptionClasses,
     heading_type: HeadingType,
     text        : OptionTranslated,
@@ -72,13 +72,14 @@ impl ComponentTrait for Heading {
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         let id = self.id();
         let classes = self.classes().get();
+        let text = self.text().escaped(cx.langid()).unwrap_or_default();
         PrepareMarkup::With(html! { @match &self.heading_type() {
-            HeadingType::H1 => h1 id=[id] class=[classes] { (self.text().escaped(cx.langid())) },
-            HeadingType::H2 => h2 id=[id] class=[classes] { (self.text().escaped(cx.langid())) },
-            HeadingType::H3 => h3 id=[id] class=[classes] { (self.text().escaped(cx.langid())) },
-            HeadingType::H4 => h4 id=[id] class=[classes] { (self.text().escaped(cx.langid())) },
-            HeadingType::H5 => h5 id=[id] class=[classes] { (self.text().escaped(cx.langid())) },
-            HeadingType::H6 => h6 id=[id] class=[classes] { (self.text().escaped(cx.langid())) },
+            HeadingType::H1 => h1 id=[id] class=[classes] { (text) },
+            HeadingType::H2 => h2 id=[id] class=[classes] { (text) },
+            HeadingType::H3 => h3 id=[id] class=[classes] { (text) },
+            HeadingType::H4 => h4 id=[id] class=[classes] { (text) },
+            HeadingType::H5 => h5 id=[id] class=[classes] { (text) },
+            HeadingType::H6 => h6 id=[id] class=[classes] { (text) },
         }})
     }
 }
@@ -122,6 +123,12 @@ impl Heading {
 
     // Heading BUILDER.
 
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.id.alter_value(id);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
         self.weight = value;
@@ -134,12 +141,6 @@ impl Heading {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
-        self.id.alter_value(id);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
         self.classes.alter_value(op, classes);
diff --git a/pagetop/src/base/component/icon.rs b/pagetop/src/base/component/icon.rs
index 4b3fd6f9..8257fdfe 100644
--- a/pagetop/src/base/component/icon.rs
+++ b/pagetop/src/base/component/icon.rs
@@ -6,8 +6,8 @@ pub struct Icon {
     weight    : Weight,
     renderable: Renderable,
     classes   : OptionClasses,
+    icon_name : OptionString,
     font_size : FontSize,
-    icon_name : String,
 }
 
 impl_handle!(COMPONENT_BASE_ICON for Icon);
@@ -25,17 +25,26 @@ impl ComponentTrait for Icon {
         (self.renderable.check)(cx)
     }
 
-    fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
-        if self.icon_name().is_empty() {
-            return PrepareMarkup::None;
+    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()),
+            );
+            cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
+        }
+    }
+
+    fn prepare_component(&self, _cx: &mut Context) -> PrepareMarkup {
+        match self.icon_name().get() {
+            None => PrepareMarkup::None,
+            _ => PrepareMarkup::With(html! { i class=[self.classes().get()] {} }),
         }
-        cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
-        PrepareMarkup::With(html! { i class=[self.classes().get()] {} })
     }
 }
 
 impl Icon {
-    pub fn with(icon_name: &str) -> Self {
+    pub fn with(icon_name: impl Into<String>) -> Self {
         Icon::default().with_icon_name(icon_name)
     }
 
@@ -60,22 +69,14 @@ impl Icon {
     }
 
     #[fn_builder]
-    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.font_size.to_string()),
-            font_size.to_string(),
-        );
-        self.font_size = font_size;
+    pub fn alter_icon_name(&mut self, name: impl Into<String>) -> &mut Self {
+        self.icon_name.alter_value(name);
         self
     }
 
     #[fn_builder]
-    pub fn alter_icon_name(&mut self, name: &str) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(concat_string!("bi-", self.icon_name)),
-            concat_string!("bi-", name),
-        );
-        self.icon_name = name.to_owned();
+    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
+        self.font_size = font_size;
         self
     }
 
@@ -85,11 +86,11 @@ impl Icon {
         &self.classes
     }
 
+    pub fn icon_name(&self) -> &OptionString {
+        &self.icon_name
+    }
+
     pub fn font_size(&self) -> &FontSize {
         &self.font_size
     }
-
-    pub fn icon_name(&self) -> &str {
-        self.icon_name.as_str()
-    }
 }
diff --git a/pagetop/src/base/component/image.rs b/pagetop/src/base/component/image.rs
index ac096323..0c404944 100644
--- a/pagetop/src/base/component/image.rs
+++ b/pagetop/src/base/component/image.rs
@@ -16,9 +16,9 @@ pub enum ImageSize {
 #[rustfmt::skip]
 #[derive(Default)]
 pub struct Image {
+    id        : OptionId,
     weight    : Weight,
     renderable: Renderable,
-    id        : OptionId,
     classes   : OptionClasses,
     source    : OptionString,
     size      : ImageSize,
@@ -84,6 +84,12 @@ impl Image {
 
     // Image BUILDER.
 
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.id.alter_value(id);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
         self.weight = value;
@@ -96,12 +102,6 @@ impl Image {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
-        self.id.alter_value(id);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
         self.classes.alter_value(op, classes);
diff --git a/pagetop/src/base/component/paragraph.rs b/pagetop/src/base/component/paragraph.rs
index c939cf0c..7177a082 100644
--- a/pagetop/src/base/component/paragraph.rs
+++ b/pagetop/src/base/component/paragraph.rs
@@ -3,12 +3,12 @@ use crate::prelude::*;
 #[rustfmt::skip]
 #[derive(Default)]
 pub struct Paragraph {
+    id        : OptionId,
     weight    : Weight,
     renderable: Renderable,
-    id        : OptionId,
     classes   : OptionClasses,
     font_size : FontSize,
-    stuff     : ArcComponents,
+    stuff     : AnyComponents,
 }
 
 impl_handle!(COMPONENT_BASE_PARAGRAPH for Paragraph);
@@ -30,6 +30,11 @@ impl ComponentTrait for Paragraph {
         (self.renderable.check)(cx)
     }
 
+    fn setup_before_prepare(&mut self, _cx: &mut Context) {
+        self.classes
+            .alter_value(ClassesOp::AddFirst, self.font_size.to_string());
+    }
+
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         PrepareMarkup::With(html! {
             p
@@ -53,6 +58,12 @@ impl Paragraph {
 
     // Paragraph BUILDER.
 
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.id.alter_value(id);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
         self.weight = value;
@@ -65,12 +76,6 @@ impl Paragraph {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
-        self.id.alter_value(id);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
         self.classes.alter_value(op, classes);
@@ -79,28 +84,25 @@ impl Paragraph {
 
     #[fn_builder]
     pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.font_size.to_string()),
-            font_size.to_string(),
-        );
         self.font_size = font_size;
         self
     }
 
+    #[rustfmt::skip]
     pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
-        self.stuff.alter(ArcOp::Add(ArcComponent::with(component)));
+        self.stuff.alter_value(ArcAnyOp::Add(ArcAnyComponent::new(component)));
         self
     }
 
+    #[rustfmt::skip]
     pub fn add_translated(mut self, l10n: L10n) -> Self {
-        self.stuff
-            .alter(ArcOp::Add(ArcComponent::with(Translate::with(l10n))));
+        self.stuff.alter_value(ArcAnyOp::Add(ArcAnyComponent::new(Translate::with(l10n))));
         self
     }
 
     #[fn_builder]
-    pub fn alter_components(&mut self, op: ArcOp) -> &mut Self {
-        self.stuff.alter(op);
+    pub fn alter_components(&mut self, op: ArcAnyOp) -> &mut Self {
+        self.stuff.alter_value(op);
         self
     }
 
@@ -114,7 +116,7 @@ impl Paragraph {
         &self.font_size
     }
 
-    pub fn components(&self) -> &ArcComponents {
+    pub fn components(&self) -> &AnyComponents {
         &self.stuff
     }
 }
diff --git a/pagetop/src/base/component/wrapper.rs b/pagetop/src/base/component/wrapper.rs
index 121af8ed..4102fb44 100644
--- a/pagetop/src/base/component/wrapper.rs
+++ b/pagetop/src/base/component/wrapper.rs
@@ -13,13 +13,13 @@ pub enum WrapperType {
 #[rustfmt::skip]
 #[derive(Default)]
 pub struct Wrapper {
+    id           : OptionId,
     weight       : Weight,
     renderable   : Renderable,
-    id           : OptionId,
     classes      : OptionClasses,
     inner_classes: OptionClasses,
     wrapper_type : WrapperType,
-    stuff        : ArcComponents,
+    stuff        : AnyComponents,
     template     : String,
 }
 
@@ -118,6 +118,12 @@ impl Wrapper {
 
     // Wrapper BUILDER.
 
+    #[fn_builder]
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
+        self.id.alter_value(id);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
         self.weight = value;
@@ -130,12 +136,6 @@ impl Wrapper {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
-        self.id.alter_value(id);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
         self.classes.alter_value(op, classes);
@@ -148,14 +148,15 @@ impl Wrapper {
         self
     }
 
+    #[rustfmt::skip]
     pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
-        self.stuff.alter(ArcOp::Add(ArcComponent::with(component)));
+        self.stuff.alter_value(ArcAnyOp::Add(ArcAnyComponent::new(component)));
         self
     }
 
     #[fn_builder]
-    pub fn alter_components(&mut self, op: ArcOp) -> &mut Self {
-        self.stuff.alter(op);
+    pub fn alter_components(&mut self, op: ArcAnyOp) -> &mut Self {
+        self.stuff.alter_value(op);
         self
     }
 
@@ -179,7 +180,7 @@ impl Wrapper {
         &self.wrapper_type
     }
 
-    pub fn components(&self) -> &ArcComponents {
+    pub fn components(&self) -> &AnyComponents {
         &self.stuff
     }
 
diff --git a/pagetop/src/core/component/definition.rs b/pagetop/src/core/component/definition.rs
index 16ad5279..e89942cc 100644
--- a/pagetop/src/core/component/definition.rs
+++ b/pagetop/src/core/component/definition.rs
@@ -39,6 +39,9 @@ pub trait ComponentTrait: ComponentBase + HasHandle + Send + Sync {
         true
     }
 
+    #[allow(unused_variables)]
+    fn setup_before_prepare(&mut self, cx: &mut Context) {}
+
     #[allow(unused_variables)]
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         PrepareMarkup::None
@@ -48,6 +51,9 @@ pub trait ComponentTrait: ComponentBase + HasHandle + Send + Sync {
 impl<C: ComponentTrait> ComponentBase for C {
     fn render(&mut self, cx: &mut Context) -> Markup {
         if self.is_renderable(cx) {
+            // Comprueba el componente antes de prepararlo.
+            self.setup_before_prepare(cx);
+
             // Acciones del tema antes de preparar el componente.
             cx.theme().before_prepare_component(self, cx);
 
diff --git a/pagetop/static/base/css/buttons.css b/pagetop/static/base/css/buttons.css
new file mode 100644
index 00000000..b1b2dea4
--- /dev/null
+++ b/pagetop/static/base/css/buttons.css
@@ -0,0 +1,1211 @@
+[class^="pt-button"] {
+	cursor: pointer;
+	text-align: center;
+	display: inline-block;
+    color: var(--pt-color--white);
+	background-color: transparent;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: var(--pt-border-radius);
+	padding: var(--pt-gap-0-35) var(--pt-gap-0-75);
+	transition: background-color .15s ease-in-out;
+	white-space: nowrap;
+	user-select: none;
+}
+[class^="pt-button"] > span {
+	margin: 0 var(--pt-gap-0-15);
+}
+
+.pt-button__link {
+	color: var(--pt-color--primary);
+}
+
+.pt-button__primary {
+    background-color: var(--pt-color--primary);
+}
+.pt-button__primary:hover {
+	color: var(--pt-color--white);
+    background-color: var(--pt-color--primary-dark);
+}
+.pt-button__primary:active {
+	color: var(--pt-color--white);
+    background-color: var(--pt-color--primary-light);
+}
+
+
+
+/*
+.button strong {
+    color: inherit
+}
+
+.button .icon,.button .icon.is-large,.button .icon.is-medium,.button .icon.is-small {
+    height: 1.5em;
+    width: 1.5em
+}
+
+.button .icon:first-child:not(:last-child) {
+    margin-left: calc(-.5em - 1px);
+    margin-right: .25em
+}
+
+.button .icon:last-child:not(:first-child) {
+    margin-left: .25em;
+    margin-right: calc(-.5em - 1px)
+}
+
+.button .icon:first-child:last-child {
+    margin-left: calc(-.5em - 1px);
+    margin-right: calc(-.5em - 1px)
+}
+
+.button.is-hovered,.button:hover {
+    border-color: #b5b5b5;
+    color: #363636
+}
+
+.button.is-focused,.button:focus {
+    border-color: #485fc7;
+    color: #363636
+}
+
+.button.is-focused:not(:active),.button:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(72,95,199,.25)
+}
+
+.button.is-active,.button:active {
+    border-color: #4a4a4a;
+    color: #363636
+}
+
+.button.is-text {
+    background-color: transparent;
+    border-color: transparent;
+    color: #4a4a4a;
+    text-decoration: underline
+}
+
+.button.is-text.is-focused,.button.is-text.is-hovered,.button.is-text:focus,.button.is-text:hover {
+    background-color: #f5f5f5;
+    color: #363636
+}
+
+.button.is-text.is-active,.button.is-text:active {
+    background-color: #e8e8e8;
+    color: #363636
+}
+
+.button.is-text[disabled],fieldset[disabled] .button.is-text {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none
+}
+
+.button.is-ghost {
+    background: 0 0;
+    border-color: transparent;
+    color: #485fc7;
+    text-decoration: none
+}
+
+.button.is-ghost.is-hovered,.button.is-ghost:hover {
+    color: #485fc7;
+    text-decoration: underline
+}
+
+.button.is-white {
+    background-color: #fff;
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.button.is-white.is-hovered,.button.is-white:hover {
+    background-color: #f9f9f9;
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.button.is-white.is-focused,.button.is-white:focus {
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.button.is-white.is-focused:not(:active),.button.is-white:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(255,255,255,.25)
+}
+
+.button.is-white.is-active,.button.is-white:active {
+    background-color: #f2f2f2;
+    border-color: transparent;
+    color: #0a0a0a
+}
+
+.button.is-white[disabled],fieldset[disabled] .button.is-white {
+    background-color: #fff;
+    border-color: #fff;
+    box-shadow: none
+}
+
+.button.is-white.is-inverted {
+    background-color: #0a0a0a;
+    color: #fff
+}
+
+.button.is-white.is-inverted.is-hovered,.button.is-white.is-inverted:hover {
+    background-color: #000
+}
+
+.button.is-white.is-inverted[disabled],fieldset[disabled] .button.is-white.is-inverted {
+    background-color: #0a0a0a;
+    border-color: transparent;
+    box-shadow: none;
+    color: #fff
+}
+
+.button.is-white.is-loading::after {
+    border-color: transparent transparent #0a0a0a #0a0a0a!important
+}
+
+.button.is-white.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-white.is-outlined.is-focused,.button.is-white.is-outlined.is-hovered,.button.is-white.is-outlined:focus,.button.is-white.is-outlined:hover {
+    background-color: #fff;
+    border-color: #fff;
+    color: #0a0a0a
+}
+
+.button.is-white.is-outlined.is-loading::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-white.is-outlined.is-loading.is-focused::after,.button.is-white.is-outlined.is-loading.is-hovered::after,.button.is-white.is-outlined.is-loading:focus::after,.button.is-white.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #0a0a0a #0a0a0a!important
+}
+
+.button.is-white.is-outlined[disabled],fieldset[disabled] .button.is-white.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+
+.button.is-white.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #0a0a0a;
+    color: #0a0a0a
+}
+
+.button.is-white.is-inverted.is-outlined.is-focused,.button.is-white.is-inverted.is-outlined.is-hovered,.button.is-white.is-inverted.is-outlined:focus,.button.is-white.is-inverted.is-outlined:hover {
+    background-color: #0a0a0a;
+    color: #fff
+}
+
+.button.is-white.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-white.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-white.is-inverted.is-outlined.is-loading:focus::after,.button.is-white.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-white.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-white.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #0a0a0a;
+    box-shadow: none;
+    color: #0a0a0a
+}
+
+.button.is-black {
+    background-color: #0a0a0a;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-black.is-hovered,.button.is-black:hover {
+    background-color: #040404;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-black.is-focused,.button.is-black:focus {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-black.is-focused:not(:active),.button.is-black:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(10,10,10,.25)
+}
+
+.button.is-black.is-active,.button.is-black:active {
+    background-color: #000;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-black[disabled],fieldset[disabled] .button.is-black {
+    background-color: #0a0a0a;
+    border-color: #0a0a0a;
+    box-shadow: none
+}
+
+.button.is-black.is-inverted {
+    background-color: #fff;
+    color: #0a0a0a
+}
+
+.button.is-black.is-inverted.is-hovered,.button.is-black.is-inverted:hover {
+    background-color: #f2f2f2
+}
+
+.button.is-black.is-inverted[disabled],fieldset[disabled] .button.is-black.is-inverted {
+    background-color: #fff;
+    border-color: transparent;
+    box-shadow: none;
+    color: #0a0a0a
+}
+
+.button.is-black.is-loading::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-black.is-outlined {
+    background-color: transparent;
+    border-color: #0a0a0a;
+    color: #0a0a0a
+}
+
+.button.is-black.is-outlined.is-focused,.button.is-black.is-outlined.is-hovered,.button.is-black.is-outlined:focus,.button.is-black.is-outlined:hover {
+    background-color: #0a0a0a;
+    border-color: #0a0a0a;
+    color: #fff
+}
+
+.button.is-black.is-outlined.is-loading::after {
+    border-color: transparent transparent #0a0a0a #0a0a0a!important
+}
+
+.button.is-black.is-outlined.is-loading.is-focused::after,.button.is-black.is-outlined.is-loading.is-hovered::after,.button.is-black.is-outlined.is-loading:focus::after,.button.is-black.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-black.is-outlined[disabled],fieldset[disabled] .button.is-black.is-outlined {
+    background-color: transparent;
+    border-color: #0a0a0a;
+    box-shadow: none;
+    color: #0a0a0a
+}
+
+.button.is-black.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-black.is-inverted.is-outlined.is-focused,.button.is-black.is-inverted.is-outlined.is-hovered,.button.is-black.is-inverted.is-outlined:focus,.button.is-black.is-inverted.is-outlined:hover {
+    background-color: #fff;
+    color: #0a0a0a
+}
+
+.button.is-black.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-black.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-black.is-inverted.is-outlined.is-loading:focus::after,.button.is-black.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #0a0a0a #0a0a0a!important
+}
+
+.button.is-black.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-black.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+
+.button.is-light {
+    background-color: #f5f5f5;
+    border-color: transparent;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-light.is-hovered,.button.is-light:hover {
+    background-color: #eee;
+    border-color: transparent;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-light.is-focused,.button.is-light:focus {
+    border-color: transparent;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-light.is-focused:not(:active),.button.is-light:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(245,245,245,.25)
+}
+
+.button.is-light.is-active,.button.is-light:active {
+    background-color: #e8e8e8;
+    border-color: transparent;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-light[disabled],fieldset[disabled] .button.is-light {
+    background-color: #f5f5f5;
+    border-color: #f5f5f5;
+    box-shadow: none
+}
+
+.button.is-light.is-inverted {
+    background-color: rgba(0,0,0,.7);
+    color: #f5f5f5
+}
+
+.button.is-light.is-inverted.is-hovered,.button.is-light.is-inverted:hover {
+    background-color: rgba(0,0,0,.7)
+}
+
+.button.is-light.is-inverted[disabled],fieldset[disabled] .button.is-light.is-inverted {
+    background-color: rgba(0,0,0,.7);
+    border-color: transparent;
+    box-shadow: none;
+    color: #f5f5f5
+}
+
+.button.is-light.is-loading::after {
+    border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
+}
+
+.button.is-light.is-outlined {
+    background-color: transparent;
+    border-color: #f5f5f5;
+    color: #f5f5f5
+}
+
+.button.is-light.is-outlined.is-focused,.button.is-light.is-outlined.is-hovered,.button.is-light.is-outlined:focus,.button.is-light.is-outlined:hover {
+    background-color: #f5f5f5;
+    border-color: #f5f5f5;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-light.is-outlined.is-loading::after {
+    border-color: transparent transparent #f5f5f5 #f5f5f5!important
+}
+
+.button.is-light.is-outlined.is-loading.is-focused::after,.button.is-light.is-outlined.is-loading.is-hovered::after,.button.is-light.is-outlined.is-loading:focus::after,.button.is-light.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
+}
+
+.button.is-light.is-outlined[disabled],fieldset[disabled] .button.is-light.is-outlined {
+    background-color: transparent;
+    border-color: #f5f5f5;
+    box-shadow: none;
+    color: #f5f5f5
+}
+
+.button.is-light.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: rgba(0,0,0,.7);
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-light.is-inverted.is-outlined.is-focused,.button.is-light.is-inverted.is-outlined.is-hovered,.button.is-light.is-inverted.is-outlined:focus,.button.is-light.is-inverted.is-outlined:hover {
+    background-color: rgba(0,0,0,.7);
+    color: #f5f5f5
+}
+
+.button.is-light.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-light.is-inverted.is-outlined.is-loading:focus::after,.button.is-light.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #f5f5f5 #f5f5f5!important
+}
+
+.button.is-light.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-light.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: rgba(0,0,0,.7);
+    box-shadow: none;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-dark {
+    background-color: #363636;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-dark.is-hovered,.button.is-dark:hover {
+    background-color: #2f2f2f;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-dark.is-focused,.button.is-dark:focus {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-dark.is-focused:not(:active),.button.is-dark:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(54,54,54,.25)
+}
+
+.button.is-dark.is-active,.button.is-dark:active {
+    background-color: #292929;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-dark[disabled],fieldset[disabled] .button.is-dark {
+    background-color: #363636;
+    border-color: #363636;
+    box-shadow: none
+}
+
+.button.is-dark.is-inverted {
+    background-color: #fff;
+    color: #363636
+}
+
+.button.is-dark.is-inverted.is-hovered,.button.is-dark.is-inverted:hover {
+    background-color: #f2f2f2
+}
+
+.button.is-dark.is-inverted[disabled],fieldset[disabled] .button.is-dark.is-inverted {
+    background-color: #fff;
+    border-color: transparent;
+    box-shadow: none;
+    color: #363636
+}
+
+.button.is-dark.is-loading::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-dark.is-outlined {
+    background-color: transparent;
+    border-color: #363636;
+    color: #363636
+}
+
+.button.is-dark.is-outlined.is-focused,.button.is-dark.is-outlined.is-hovered,.button.is-dark.is-outlined:focus,.button.is-dark.is-outlined:hover {
+    background-color: #363636;
+    border-color: #363636;
+    color: #fff
+}
+
+.button.is-dark.is-outlined.is-loading::after {
+    border-color: transparent transparent #363636 #363636!important
+}
+
+.button.is-dark.is-outlined.is-loading.is-focused::after,.button.is-dark.is-outlined.is-loading.is-hovered::after,.button.is-dark.is-outlined.is-loading:focus::after,.button.is-dark.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-dark.is-outlined[disabled],fieldset[disabled] .button.is-dark.is-outlined {
+    background-color: transparent;
+    border-color: #363636;
+    box-shadow: none;
+    color: #363636
+}
+
+.button.is-dark.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-dark.is-inverted.is-outlined.is-focused,.button.is-dark.is-inverted.is-outlined.is-hovered,.button.is-dark.is-inverted.is-outlined:focus,.button.is-dark.is-inverted.is-outlined:hover {
+    background-color: #fff;
+    color: #363636
+}
+
+.button.is-dark.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-dark.is-inverted.is-outlined.is-loading:focus::after,.button.is-dark.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #363636 #363636!important
+}
+
+.button.is-dark.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-dark.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+*/
+/*
+.pt-button__primary[disabled],fieldset[disabled] .pt-button__primary {
+    background-color: #00d1b2;
+    border-color: #00d1b2;
+    box-shadow: none
+}
+
+.pt-button__primary.is-inverted {
+    background-color: #fff;
+    color: #00d1b2
+}
+
+.pt-button__primary.is-inverted.is-hovered,.pt-button__primary.is-inverted:hover {
+    background-color: #f2f2f2
+}
+
+.pt-button__primary.is-inverted[disabled],fieldset[disabled] .pt-button__primary.is-inverted {
+    background-color: #fff;
+    border-color: transparent;
+    box-shadow: none;
+    color: #00d1b2
+}
+
+.pt-button__primary.is-loading::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.pt-button__primary.is-outlined {
+    background-color: transparent;
+    border-color: #00d1b2;
+    color: #00d1b2
+}
+
+.pt-button__primary.is-outlined.is-focused,.pt-button__primary.is-outlined.is-hovered,.pt-button__primary.is-outlined:focus,.pt-button__primary.is-outlined:hover {
+    background-color: #00d1b2;
+    border-color: #00d1b2;
+    color: #fff
+}
+
+.pt-button__primary.is-outlined.is-loading::after {
+    border-color: transparent transparent #00d1b2 #00d1b2!important
+}
+
+.pt-button__primary.is-outlined.is-loading.is-focused::after,.pt-button__primary.is-outlined.is-loading.is-hovered::after,.pt-button__primary.is-outlined.is-loading:focus::after,.pt-button__primary.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.pt-button__primary.is-outlined[disabled],fieldset[disabled] .pt-button__primary.is-outlined {
+    background-color: transparent;
+    border-color: #00d1b2;
+    box-shadow: none;
+    color: #00d1b2
+}
+
+.pt-button__primary.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.pt-button__primary.is-inverted.is-outlined.is-focused,.pt-button__primary.is-inverted.is-outlined.is-hovered,.pt-button__primary.is-inverted.is-outlined:focus,.pt-button__primary.is-inverted.is-outlined:hover {
+    background-color: #fff;
+    color: #00d1b2
+}
+
+.pt-button__primary.is-inverted.is-outlined.is-loading.is-focused::after,.pt-button__primary.is-inverted.is-outlined.is-loading.is-hovered::after,.pt-button__primary.is-inverted.is-outlined.is-loading:focus::after,.pt-button__primary.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #00d1b2 #00d1b2!important
+}
+
+.pt-button__primary.is-inverted.is-outlined[disabled],fieldset[disabled] .pt-button__primary.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+
+.pt-button__primary.is-light {
+    background-color: #ebfffc;
+    color: #00947e
+}
+
+.pt-button__primary.is-light.is-hovered,.pt-button__primary.is-light:hover {
+    background-color: #defffa;
+    border-color: transparent;
+    color: #00947e
+}
+
+.pt-button__primary.is-light.is-active,.pt-button__primary.is-light:active {
+    background-color: #d1fff8;
+    border-color: transparent;
+    color: #00947e
+}
+
+.button.is-link {
+    background-color: #485fc7;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-link.is-hovered,.button.is-link:hover {
+    background-color: #3e56c4;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-link.is-focused,.button.is-link:focus {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-link.is-focused:not(:active),.button.is-link:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(72,95,199,.25)
+}
+
+.button.is-link.is-active,.button.is-link:active {
+    background-color: #3a51bb;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-link[disabled],fieldset[disabled] .button.is-link {
+    background-color: #485fc7;
+    border-color: #485fc7;
+    box-shadow: none
+}
+
+.button.is-link.is-inverted {
+    background-color: #fff;
+    color: #485fc7
+}
+
+.button.is-link.is-inverted.is-hovered,.button.is-link.is-inverted:hover {
+    background-color: #f2f2f2
+}
+
+.button.is-link.is-inverted[disabled],fieldset[disabled] .button.is-link.is-inverted {
+    background-color: #fff;
+    border-color: transparent;
+    box-shadow: none;
+    color: #485fc7
+}
+
+.button.is-link.is-loading::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-link.is-outlined {
+    background-color: transparent;
+    border-color: #485fc7;
+    color: #485fc7
+}
+
+.button.is-link.is-outlined.is-focused,.button.is-link.is-outlined.is-hovered,.button.is-link.is-outlined:focus,.button.is-link.is-outlined:hover {
+    background-color: #485fc7;
+    border-color: #485fc7;
+    color: #fff
+}
+
+.button.is-link.is-outlined.is-loading::after {
+    border-color: transparent transparent #485fc7 #485fc7!important
+}
+
+.button.is-link.is-outlined.is-loading.is-focused::after,.button.is-link.is-outlined.is-loading.is-hovered::after,.button.is-link.is-outlined.is-loading:focus::after,.button.is-link.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-link.is-outlined[disabled],fieldset[disabled] .button.is-link.is-outlined {
+    background-color: transparent;
+    border-color: #485fc7;
+    box-shadow: none;
+    color: #485fc7
+}
+
+.button.is-link.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-link.is-inverted.is-outlined.is-focused,.button.is-link.is-inverted.is-outlined.is-hovered,.button.is-link.is-inverted.is-outlined:focus,.button.is-link.is-inverted.is-outlined:hover {
+    background-color: #fff;
+    color: #485fc7
+}
+
+.button.is-link.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-link.is-inverted.is-outlined.is-loading:focus::after,.button.is-link.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #485fc7 #485fc7!important
+}
+
+.button.is-link.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-link.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+
+.button.is-link.is-light {
+    background-color: #eff1fa;
+    color: #3850b7
+}
+
+.button.is-link.is-light.is-hovered,.button.is-link.is-light:hover {
+    background-color: #e6e9f7;
+    border-color: transparent;
+    color: #3850b7
+}
+
+.button.is-link.is-light.is-active,.button.is-link.is-light:active {
+    background-color: #dce0f4;
+    border-color: transparent;
+    color: #3850b7
+}
+
+.button.is-info {
+    background-color: #3e8ed0;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-info.is-hovered,.button.is-info:hover {
+    background-color: #3488ce;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-info.is-focused,.button.is-info:focus {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-info.is-focused:not(:active),.button.is-info:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(62,142,208,.25)
+}
+
+.button.is-info.is-active,.button.is-info:active {
+    background-color: #3082c5;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-info[disabled],fieldset[disabled] .button.is-info {
+    background-color: #3e8ed0;
+    border-color: #3e8ed0;
+    box-shadow: none
+}
+
+.button.is-info.is-inverted {
+    background-color: #fff;
+    color: #3e8ed0
+}
+
+.button.is-info.is-inverted.is-hovered,.button.is-info.is-inverted:hover {
+    background-color: #f2f2f2
+}
+
+.button.is-info.is-inverted[disabled],fieldset[disabled] .button.is-info.is-inverted {
+    background-color: #fff;
+    border-color: transparent;
+    box-shadow: none;
+    color: #3e8ed0
+}
+
+.button.is-info.is-loading::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-info.is-outlined {
+    background-color: transparent;
+    border-color: #3e8ed0;
+    color: #3e8ed0
+}
+
+.button.is-info.is-outlined.is-focused,.button.is-info.is-outlined.is-hovered,.button.is-info.is-outlined:focus,.button.is-info.is-outlined:hover {
+    background-color: #3e8ed0;
+    border-color: #3e8ed0;
+    color: #fff
+}
+
+.button.is-info.is-outlined.is-loading::after {
+    border-color: transparent transparent #3e8ed0 #3e8ed0!important
+}
+
+.button.is-info.is-outlined.is-loading.is-focused::after,.button.is-info.is-outlined.is-loading.is-hovered::after,.button.is-info.is-outlined.is-loading:focus::after,.button.is-info.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-info.is-outlined[disabled],fieldset[disabled] .button.is-info.is-outlined {
+    background-color: transparent;
+    border-color: #3e8ed0;
+    box-shadow: none;
+    color: #3e8ed0
+}
+
+.button.is-info.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-info.is-inverted.is-outlined.is-focused,.button.is-info.is-inverted.is-outlined.is-hovered,.button.is-info.is-inverted.is-outlined:focus,.button.is-info.is-inverted.is-outlined:hover {
+    background-color: #fff;
+    color: #3e8ed0
+}
+
+.button.is-info.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-info.is-inverted.is-outlined.is-loading:focus::after,.button.is-info.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #3e8ed0 #3e8ed0!important
+}
+
+.button.is-info.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-info.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+
+.button.is-info.is-light {
+    background-color: #eff5fb;
+    color: #296fa8
+}
+
+.button.is-info.is-light.is-hovered,.button.is-info.is-light:hover {
+    background-color: #e4eff9;
+    border-color: transparent;
+    color: #296fa8
+}
+
+.button.is-info.is-light.is-active,.button.is-info.is-light:active {
+    background-color: #dae9f6;
+    border-color: transparent;
+    color: #296fa8
+}
+
+.button.is-success {
+    background-color: #48c78e;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-success.is-hovered,.button.is-success:hover {
+    background-color: #3ec487;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-success.is-focused,.button.is-success:focus {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-success.is-focused:not(:active),.button.is-success:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(72,199,142,.25)
+}
+
+.button.is-success.is-active,.button.is-success:active {
+    background-color: #3abb81;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-success[disabled],fieldset[disabled] .button.is-success {
+    background-color: #48c78e;
+    border-color: #48c78e;
+    box-shadow: none
+}
+
+.button.is-success.is-inverted {
+    background-color: #fff;
+    color: #48c78e
+}
+
+.button.is-success.is-inverted.is-hovered,.button.is-success.is-inverted:hover {
+    background-color: #f2f2f2
+}
+
+.button.is-success.is-inverted[disabled],fieldset[disabled] .button.is-success.is-inverted {
+    background-color: #fff;
+    border-color: transparent;
+    box-shadow: none;
+    color: #48c78e
+}
+
+.button.is-success.is-loading::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-success.is-outlined {
+    background-color: transparent;
+    border-color: #48c78e;
+    color: #48c78e
+}
+
+.button.is-success.is-outlined.is-focused,.button.is-success.is-outlined.is-hovered,.button.is-success.is-outlined:focus,.button.is-success.is-outlined:hover {
+    background-color: #48c78e;
+    border-color: #48c78e;
+    color: #fff
+}
+
+.button.is-success.is-outlined.is-loading::after {
+    border-color: transparent transparent #48c78e #48c78e!important
+}
+
+.button.is-success.is-outlined.is-loading.is-focused::after,.button.is-success.is-outlined.is-loading.is-hovered::after,.button.is-success.is-outlined.is-loading:focus::after,.button.is-success.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-success.is-outlined[disabled],fieldset[disabled] .button.is-success.is-outlined {
+    background-color: transparent;
+    border-color: #48c78e;
+    box-shadow: none;
+    color: #48c78e
+}
+
+.button.is-success.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-success.is-inverted.is-outlined.is-focused,.button.is-success.is-inverted.is-outlined.is-hovered,.button.is-success.is-inverted.is-outlined:focus,.button.is-success.is-inverted.is-outlined:hover {
+    background-color: #fff;
+    color: #48c78e
+}
+
+.button.is-success.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-success.is-inverted.is-outlined.is-loading:focus::after,.button.is-success.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #48c78e #48c78e!important
+}
+
+.button.is-success.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-success.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+
+.button.is-success.is-light {
+    background-color: #effaf5;
+    color: #257953
+}
+
+.button.is-success.is-light.is-hovered,.button.is-success.is-light:hover {
+    background-color: #e6f7ef;
+    border-color: transparent;
+    color: #257953
+}
+
+.button.is-success.is-light.is-active,.button.is-success.is-light:active {
+    background-color: #dcf4e9;
+    border-color: transparent;
+    color: #257953
+}
+
+.button.is-warning {
+    background-color: #ffe08a;
+    border-color: transparent;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-warning.is-hovered,.button.is-warning:hover {
+    background-color: #ffdc7d;
+    border-color: transparent;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-warning.is-focused,.button.is-warning:focus {
+    border-color: transparent;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-warning.is-focused:not(:active),.button.is-warning:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(255,224,138,.25)
+}
+
+.button.is-warning.is-active,.button.is-warning:active {
+    background-color: #ffd970;
+    border-color: transparent;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-warning[disabled],fieldset[disabled] .button.is-warning {
+    background-color: #ffe08a;
+    border-color: #ffe08a;
+    box-shadow: none
+}
+
+.button.is-warning.is-inverted {
+    background-color: rgba(0,0,0,.7);
+    color: #ffe08a
+}
+
+.button.is-warning.is-inverted.is-hovered,.button.is-warning.is-inverted:hover {
+    background-color: rgba(0,0,0,.7)
+}
+
+.button.is-warning.is-inverted[disabled],fieldset[disabled] .button.is-warning.is-inverted {
+    background-color: rgba(0,0,0,.7);
+    border-color: transparent;
+    box-shadow: none;
+    color: #ffe08a
+}
+
+.button.is-warning.is-loading::after {
+    border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
+}
+
+.button.is-warning.is-outlined {
+    background-color: transparent;
+    border-color: #ffe08a;
+    color: #ffe08a
+}
+
+.button.is-warning.is-outlined.is-focused,.button.is-warning.is-outlined.is-hovered,.button.is-warning.is-outlined:focus,.button.is-warning.is-outlined:hover {
+    background-color: #ffe08a;
+    border-color: #ffe08a;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-warning.is-outlined.is-loading::after {
+    border-color: transparent transparent #ffe08a #ffe08a!important
+}
+
+.button.is-warning.is-outlined.is-loading.is-focused::after,.button.is-warning.is-outlined.is-loading.is-hovered::after,.button.is-warning.is-outlined.is-loading:focus::after,.button.is-warning.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important
+}
+
+.button.is-warning.is-outlined[disabled],fieldset[disabled] .button.is-warning.is-outlined {
+    background-color: transparent;
+    border-color: #ffe08a;
+    box-shadow: none;
+    color: #ffe08a
+}
+
+.button.is-warning.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: rgba(0,0,0,.7);
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-warning.is-inverted.is-outlined.is-focused,.button.is-warning.is-inverted.is-outlined.is-hovered,.button.is-warning.is-inverted.is-outlined:focus,.button.is-warning.is-inverted.is-outlined:hover {
+    background-color: rgba(0,0,0,.7);
+    color: #ffe08a
+}
+
+.button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-warning.is-inverted.is-outlined.is-loading:focus::after,.button.is-warning.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #ffe08a #ffe08a!important
+}
+
+.button.is-warning.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-warning.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: rgba(0,0,0,.7);
+    box-shadow: none;
+    color: rgba(0,0,0,.7)
+}
+
+.button.is-warning.is-light {
+    background-color: #fffaeb;
+    color: #946c00
+}
+
+.button.is-warning.is-light.is-hovered,.button.is-warning.is-light:hover {
+    background-color: #fff6de;
+    border-color: transparent;
+    color: #946c00
+}
+
+.button.is-warning.is-light.is-active,.button.is-warning.is-light:active {
+    background-color: #fff3d1;
+    border-color: transparent;
+    color: #946c00
+}
+
+.button.is-danger {
+    background-color: #f14668;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-danger.is-hovered,.button.is-danger:hover {
+    background-color: #f03a5f;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-danger.is-focused,.button.is-danger:focus {
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-danger.is-focused:not(:active),.button.is-danger:focus:not(:active) {
+    box-shadow: 0 0 0 .125em rgba(241,70,104,.25)
+}
+
+.button.is-danger.is-active,.button.is-danger:active {
+    background-color: #ef2e55;
+    border-color: transparent;
+    color: #fff
+}
+
+.button.is-danger[disabled],fieldset[disabled] .button.is-danger {
+    background-color: #f14668;
+    border-color: #f14668;
+    box-shadow: none
+}
+
+.button.is-danger.is-inverted {
+    background-color: #fff;
+    color: #f14668
+}
+
+.button.is-danger.is-inverted.is-hovered,.button.is-danger.is-inverted:hover {
+    background-color: #f2f2f2
+}
+
+.button.is-danger.is-inverted[disabled],fieldset[disabled] .button.is-danger.is-inverted {
+    background-color: #fff;
+    border-color: transparent;
+    box-shadow: none;
+    color: #f14668
+}
+
+.button.is-danger.is-loading::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-danger.is-outlined {
+    background-color: transparent;
+    border-color: #f14668;
+    color: #f14668
+}
+
+.button.is-danger.is-outlined.is-focused,.button.is-danger.is-outlined.is-hovered,.button.is-danger.is-outlined:focus,.button.is-danger.is-outlined:hover {
+    background-color: #f14668;
+    border-color: #f14668;
+    color: #fff
+}
+
+.button.is-danger.is-outlined.is-loading::after {
+    border-color: transparent transparent #f14668 #f14668!important
+}
+
+.button.is-danger.is-outlined.is-loading.is-focused::after,.button.is-danger.is-outlined.is-loading.is-hovered::after,.button.is-danger.is-outlined.is-loading:focus::after,.button.is-danger.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #fff #fff!important
+}
+
+.button.is-danger.is-outlined[disabled],fieldset[disabled] .button.is-danger.is-outlined {
+    background-color: transparent;
+    border-color: #f14668;
+    box-shadow: none;
+    color: #f14668
+}
+
+.button.is-danger.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    color: #fff
+}
+
+.button.is-danger.is-inverted.is-outlined.is-focused,.button.is-danger.is-inverted.is-outlined.is-hovered,.button.is-danger.is-inverted.is-outlined:focus,.button.is-danger.is-inverted.is-outlined:hover {
+    background-color: #fff;
+    color: #f14668
+}
+
+.button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-danger.is-inverted.is-outlined.is-loading:focus::after,.button.is-danger.is-inverted.is-outlined.is-loading:hover::after {
+    border-color: transparent transparent #f14668 #f14668!important
+}
+
+.button.is-danger.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
+    background-color: transparent;
+    border-color: #fff;
+    box-shadow: none;
+    color: #fff
+}
+
+.button.is-danger.is-light {
+    background-color: #feecf0;
+    color: #cc0f35
+}
+
+.button.is-danger.is-light.is-hovered,.button.is-danger.is-light:hover {
+    background-color: #fde0e6;
+    border-color: transparent;
+    color: #cc0f35
+}
+
+.button.is-danger.is-light.is-active,.button.is-danger.is-light:active {
+    background-color: #fcd4dc;
+    border-color: transparent;
+    color: #cc0f35
+}
+*/
\ No newline at end of file
diff --git a/pagetop/static/base/css/inception.css b/pagetop/static/base/css/inception.css
index 29fb2c3a..8c474b84 100644
--- a/pagetop/static/base/css/inception.css
+++ b/pagetop/static/base/css/inception.css
@@ -18,7 +18,7 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
 	margin-top: 0;
-	margin-bottom: var(--pt-gap-0-9);
+	margin-bottom: var(--pt-gap-0-35);
 	font-weight: var(--pt-fw--bold);
 	line-height: var(--pt-lh--header);
 }
@@ -58,7 +58,18 @@ h6 {
 
 p {
 	margin-top: 0;
-	margin-bottom: var(--pt-gap-0-9);
+	margin-bottom: var(--pt-gap-0-75);
+}
+
+a {
+	color: var(--pt-color--primary);
+	transition: color .15s ease-in-out;
+}
+a:hover {
+	color: var(--pt-color--primary-dark);
+}
+a:active {
+	color: var(--pt-color--primary-light);
 }
 
 /* LAYOUT */
diff --git a/pagetop/static/base/css/looks.css b/pagetop/static/base/css/looks.css
index 24a3534c..c2f6c00d 100644
--- a/pagetop/static/base/css/looks.css
+++ b/pagetop/static/base/css/looks.css
@@ -96,7 +96,7 @@
 	font-size: calc(var(--pt-fs--x3l) * 1.2);
 }
 .pt-heading__subtitle {
-	margin-top: calc(-1 * var(--pt-gap-0-75));
+	margin-top: calc(-1 * var(--pt-gap-0-5));
 }
 /* LG - Applies <= 992px */
 @media screen and (max-width: 62em) {
diff --git a/pagetop/static/base/css/root.css b/pagetop/static/base/css/root.css
index c9c403df..03c9efe2 100644
--- a/pagetop/static/base/css/root.css
+++ b/pagetop/static/base/css/root.css
@@ -15,10 +15,12 @@
 	--pt-fs--xs: 0.75rem;
 	--pt-fs--x2s: 0.5625rem;
 	--pt-fs--x3s: 0.375rem;
+
 	/* Font weight */
 	--pt-fw--light: 300;
 	--pt-fw--base: 400;
 	--pt-fw--bold: 500;
+
 	/* Line height */
 	--pt-lh--base: 1.5;
 	--pt-lh--header: 1.2;
@@ -33,7 +35,7 @@
 	--line-height-s: 1.125rem;
 	--max-bg-color: 98.125rem;
 */
-	--pt-gap: 1.125rem;
+	--pt-gap: 1.125em;
 /*
 	--content-left: 5.625rem;
 	--site-header-height-wide: var(--pt-gap10);
@@ -82,10 +84,11 @@
 }
 */
 :root {
+	--pt-gap-0-15: calc(0.15 * var(--pt-gap));
 	--pt-gap-0-25: calc(0.25 * var(--pt-gap));
+	--pt-gap-0-35: calc(0.35 * var(--pt-gap));
 	--pt-gap-0-5: calc(0.5 * var(--pt-gap));
 	--pt-gap-0-75: calc(0.75 * var(--pt-gap));
-	--pt-gap-0-9: calc(0.9 * var(--pt-gap));
 	--pt-gap-1-5: calc(1.5 * var(--pt-gap));
 	--pt-gap-2: calc(2 * var(--pt-gap));
 	--pt-gap-2-5: calc(2.5 * var(--pt-gap));
@@ -100,27 +103,24 @@
 	--pt-gap-11: calc(11 * var(--pt-gap));
 	--pt-gap-12: calc(12 * var(--pt-gap));
 
-	--pt-color--primary-hue: 202;
-	--pt-color--primary-saturation: 79%;
-	--pt-color--primary-lightness: 50;
-	--pt-color--primary-30: hsl(var(--pt-color--primary-hue),var(--pt-color--primary-saturation),calc(1% * (var(--pt-color--primary-lightness) - (0.36 * var(--pt-color--primary-lightness)))));
-	--pt-color--primary-40: hsl(var(--pt-color--primary-hue),var(--pt-color--primary-saturation),calc(1% * (var(--pt-color--primary-lightness) - (0.24 * var(--pt-color--primary-lightness)))));
-	--pt-color--primary-50: hsl(var(--pt-color--primary-hue),var(--pt-color--primary-saturation),calc(1% * var(--pt-color--primary-lightness)));
-	--pt-color--primary-60: hsl(var(--pt-color--primary-hue),var(--pt-color--primary-saturation),calc(1% * (var(--pt-color--primary-lightness) + (0.24 * (100 - var(--pt-color--primary-lightness))))));
-	--pt-color--primary-80: hsl(var(--pt-color--primary-hue),var(--pt-color--primary-saturation),calc(1% * (var(--pt-color--primary-lightness) + (0.85 * (100 - var(--pt-color--primary-lightness))))));
+	--pt-color--primary-hue: 216;
+	--pt-color--primary-sat: 98%;
+	--pt-color--primary-light: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 60%);
+	--pt-color--primary-dark: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 40%);
+	--pt-color--primary: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 50%);
 
 	--pt-color--gray-hue: 201;
-	--pt-color--gray-saturation: 15%;
-	--pt-color--gray-5: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),5%);
-	--pt-color--gray-10: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),11%);
-	--pt-color--gray-20: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),20%);
-	--pt-color--gray-45: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),44%);
-	--pt-color--gray-60: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),57%);
-	--pt-color--gray-65: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),63%);
-	--pt-color--gray-70: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),72%);
-	--pt-color--gray-90: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),88%);
-	--pt-color--gray-95: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),93%);
-	--pt-color--gray-100: hsl(var(--pt-color--gray-hue),var(--pt-color--gray-saturation),97%);
+	--pt-color--gray-sat: 15%;
+	--pt-color--gray-5: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 5%);
+	--pt-color--gray-10: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat) ,11%);
+	--pt-color--gray-20: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat),20%);
+	--pt-color--gray-45: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 44%);
+	--pt-color--gray-60: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 57%);
+	--pt-color--gray-65: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 63%);
+	--pt-color--gray-70: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 72%);
+	--pt-color--gray-90: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 88%);
+	--pt-color--gray-95: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 93%);
+	--pt-color--gray-100: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 97%);
 
 	--pt-color--white: #fff;
 	--pt-color--bg: #fafafa;
@@ -143,9 +143,9 @@
 	--header-height-wide-when-fixed: calc(6 * var(--pt-gap));
 	--mobile-nav-width: 31.25rem;
 */
-	--pt-border-radius: 0.1875rem;
-
+	--pt-border-radius: 0.375rem;
 
+	/* Menu component */
 	--pt-menu--color-bg: var(--pt-color--gray-100);
 	--pt-menu--color-highlight: #e91e63;
 	--pt-menu--color-border: rgba(0, 0, 0, 0.1);