From 56a2471090f3549c461c43ece92e7d45f11c82d1 Mon Sep 17 00:00:00 2001
From: Manuel Cillero <manuel@cillero.es>
Date: Fri, 2 Oct 2026 23:33:22 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20(button):=20Aplica=20estilo=20de?=
 =?UTF-8?q?shabilitado=20a=20enlaces?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Un `<a>` deshabilitado no tiene un equivalente a `:disabled` sobre el
que aplicar estilos. Button añade ahora la clase `disabled`.
---
 assets/css/basic.css                   |  7 +++++--
 src/base/component/button/component.rs |  6 ++++++
 tests/component_button.rs              | 19 +++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/assets/css/basic.css b/assets/css/basic.css
index 92e1b943..3a4b71c8 100644
--- a/assets/css/basic.css
+++ b/assets/css/basic.css
@@ -162,9 +162,11 @@ body {
     background-color: color-mix(in srgb, var(--val-color--primary) 85%, black);
     border-color: color-mix(in srgb, var(--val-color--primary) 85%, black);
 }
-.button:disabled {
+.button:disabled,
+.button.disabled {
     opacity: 0.65;
     cursor: default;
+    pointer-events: none;
 }
 .button::-moz-focus-inner {
     border: 0;
@@ -237,7 +239,8 @@ body {
     background-color: transparent;
     border-color: transparent;
 }
-.button-link:disabled {
+.button-link:disabled,
+.button-link.disabled {
     color: var(--val-color--text--muted);
 }
 
diff --git a/src/base/component/button/component.rs b/src/base/component/button/component.rs
index e65b4527..038e9fef 100644
--- a/src/base/component/button/component.rs
+++ b/src/base/component/button/component.rs
@@ -92,6 +92,12 @@ impl Component for Button {
             Style::Outline(intent) => util::join!("button button-outline-", intent.color(cx)),
             Style::Link => "button button-link".to_string(),
         }));
+
+        // Un `<button disabled>` es deshabilitado por el navegador (`:disabled`), pero un `<a>` sin
+        // `href` (ver `prepare()`) no tiene un estado nativo similar. Por eso la clase `disabled`.
+        if *self.disabled() {
+            self.alter_prop(PropsOp::add_classes("disabled"));
+        }
     }
 
     async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
diff --git a/tests/component_button.rs b/tests/component_button.rs
index 5fcfc334..79f56a2e 100644
--- a/tests/component_button.rs
+++ b/tests/component_button.rs
@@ -142,3 +142,22 @@ async fn disabled_anchor_omits_href_and_sets_aria_disabled() {
     assert!(html.contains(r#"aria-disabled="true""#));
     assert!(html.contains(r#"tabindex="-1""#));
 }
+
+// A disabled `<a>` has no native equivalent to `:disabled` that CSS can hook into, unlike a
+// `<button disabled>`; the `disabled` class is what both Basic (`.button.disabled`) and Bootsier
+// (Bootstrap's own `.btn.disabled`) actually style.
+#[pagetop::test]
+async fn disabled_anchor_gets_the_disabled_class() {
+    let mut button = Button::anchor(Lc::n("Edit"), "/items/1/edit").with_disabled(true);
+    let html = button.render(&mut Context::default()).await.into_string();
+
+    assert!(html.contains(r#"class="button disabled""#));
+}
+
+#[pagetop::test]
+async fn disabled_button_also_gets_the_disabled_class() {
+    let mut button = Button::submit(Lc::n("Save")).with_disabled(true);
+    let html = button.render(&mut Context::default()).await.into_string();
+
+    assert!(html.contains(r#"class="button disabled""#));
+}