✨ (base): Añade componente Badge

Incluye soporte específico en Bootsier (`BadgeBootsier`) para fijar el
color de fondo con contraste de texto garantizado.

extensions/pagetop-bootsier/src/theme/bs.rs

@@ -1,5 +1,9 @@
 //! Componentes proporcionados por el tema.
 
+// Badge.
+pub(crate) mod badge;
+pub use badge::{Badge, BadgeBootsier};
+
 // Button.
 mod button;
 pub use button::{Button, ButtonAction};

extensions/pagetop-bootsier/src/theme/bs/badge.rs

@@ -0,0 +1,47 @@
+use pagetop::prelude::*;
+
+use crate::theme::*;
+
+pub use pagetop::base::component::Badge;
+
+const EXTRA_TEXT_BG: &str = "bootsier.badge.text_bg";
+
+/// Extensión de Bootsier para [`Badge`].
+///
+/// Proporciona el método [`with_text_bg()`](Self::with_text_bg) para fijar el color de fondo del
+/// badge usando un color de texto con contraste suficiente garantizado.
+///
+/// ```rust,no_run
+/// use pagetop::prelude::*;
+/// use pagetop_bootsier::theme::*;
+///
+/// let admin = bs::Badge::new()
+///     .with_label(L10n::n("Admin"))
+///     .with_text_bg(ThemeColor::Danger);
+/// ```
+pub trait BadgeBootsier {
+    #[builder_fn]
+    fn with_text_bg(self, color: ThemeColor) -> Self;
+}
+
+impl BadgeBootsier for Badge {
+    /// Establece el color de fondo usando un color de texto con contraste garantizado.
+    ///
+    /// Igual a `with_prop(PropsOp::add_classes(class::TextColor::Bg(color)))`, pero sin el riesgo
+    /// de acumular más de una clase `text-bg-{color}` si se llama varias veces.
+    #[builder_fn]
+    fn with_text_bg(mut self, color: ThemeColor) -> Self {
+        self.alter_prop(PropsOp::set_extra(EXTRA_TEXT_BG, color));
+        self
+    }
+}
+
+// **< Badge SETUP >********************************************************************************
+
+pub(crate) fn setup(badge: &mut Badge) {
+    let color = badge.props().extra_or(EXTRA_TEXT_BG, ThemeColor::Secondary);
+    badge.alter_prop(PropsOp::replace_classes(
+        "badge",
+        util::join!("badge ", class::TextColor::Bg(color).to_class()),
+    ));
+}

src/base/component.rs

@@ -2,6 +2,9 @@
 
 pub mod layout;
 
+mod badge;
+pub use badge::Badge;
+
 mod block;
 pub use block::Block;
 

src/base/component/badge.rs

@@ -0,0 +1,66 @@
+use crate::prelude::*;
+
+/// Componente para mostrar una **etiqueta corta informativa** (*badge*).
+///
+/// # Ejemplo
+///
+/// ```rust,no_run
+/// use pagetop::prelude::*;
+///
+/// let badge = Badge::new().with_label(L10n::n("Admin"));
+/// ```
+#[derive(AutoDefault, Clone, Debug, Getters)]
+pub struct Badge {
+    /// Devuelve identificador, clases CSS, atributos HTML y valores extra del componente.
+    props: Props,
+    /// Devuelve la etiqueta del badge.
+    label: L10n,
+}
+
+#[async_trait]
+impl Component for Badge {
+    fn new() -> Self {
+        Self::default()
+    }
+
+    fn id(&self) -> Option<String> {
+        self.props.get_id()
+    }
+
+    fn setup(&mut self, _cx: &Context) {
+        self.alter_prop(PropsOp::prepend_classes("badge"));
+    }
+
+    async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
+        Ok(html! {
+            span (self.props()) {
+                (self.label().using(cx))
+            }
+        })
+    }
+}
+
+impl Badge {
+    // **< Badge BUILDER >**************************************************************************
+
+    /// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
+    #[builder_fn]
+    pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
+        self.props.alter_id(id);
+        self
+    }
+
+    /// Modifica identificador, clases CSS o atributos HTML del componente.
+    #[builder_fn]
+    pub fn with_prop(mut self, op: PropsOp) -> Self {
+        self.props.alter_prop(op);
+        self
+    }
+
+    /// Establece la etiqueta del badge.
+    #[builder_fn]
+    pub fn with_label(mut self, label: L10n) -> Self {
+        self.label = label;
+        self
+    }
+}