💄 (button): Aplica estilo deshabilitado a enlaces

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

@@ -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);
 }
 

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> {

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""#));
+}