elements: fix disabled visuals on button

src/ak-button/ak-button.component.ts

@@ -149,11 +149,11 @@ export class Button extends LitElement implements IButton {
 
     #internals = InternalsController.of(this, { role: "button" });
 
-    @property({ reflect: true, type: Boolean, attribute: "disabled" })
-    public _disabled = false;
+    @property({ reflect: true, type: Boolean })
+    disabled = false;
 
-    public get disabled() {
-        return this._disabled || this.#internals.formDisabled;
+    get #disabled() {
+        return this.matches(":disabled") || this.disabled;
     }
 
     private onClick = (event: MouseEvent) => {
@@ -196,7 +196,7 @@ export class Button extends LitElement implements IButton {
     public willUpdate(changed: PropertyValues<this>): void {
         super.willUpdate(changed);
         this.#internals.ariaLabel = this.label || null;
-        this.#internals.ariaDisabled = String(!!this._disabled);
+        this.#internals.ariaDisabled = String(!!this.#disabled);
         if (this.variant === "link" && this.href) {
             this.tabIndex = -1;
         } else {
@@ -205,8 +205,8 @@ export class Button extends LitElement implements IButton {
     }
 
     public override render() {
-        const { href, type, target, name, value, disabled, rel, download, onClick, onKeydown } =
-            this;
+        const { href, type, target, name, value, rel, download, onClick, onKeydown } = this;
+        const disabled = this.#disabled;
 
         return this.variant === "link" && typeof href === "string"
             ? linkTemplate({ href, target, disabled, rel, download, onClick, onKeydown })

src/ak-button/ak-button.css

@@ -834,16 +834,6 @@
     margin-inline-start: var(--button__icon--m-end--MarginLeft);
 }
 
-:host:disabled {
-    pointer-events: none;
-    color: var(--button--disabled--Color);
-    background-color: var(--button--disabled--BackgroundColor);
-}
-
-:host:disabled #main::after {
-    border-color: var(--button--disabled--after--BorderColor);
-}
-
 :host([variant="link"]:not[inline]):hover #main {
     --button--m-link--Color: var(--button--m-link--hover--Color);
     --button--m-link--BackgroundColor: var(--button--m-link--hover--BackgroundColor);
@@ -881,3 +871,17 @@
     --button--m-danger--Color: var(--button--m-link--m-danger--Color);
     --button--m-danger--BackgroundColor: var(--button--m-link--m-danger--BackgroundColor);
 }
+
+:is(:host:disabled, :host([disabled])) #main {
+    pointer-events: none;
+    color: var(--button--disabled--Color);
+    background-color: var(--button--disabled--BackgroundColor);
+}
+
+:is(:host:disabled, :host([disabled])) #main::after {
+    border-color: var(--button--disabled--after--BorderColor);
+}
+
+:is(:host:disabled, :host([disabled])) [part="anchor"] {
+    text-decoration: underline;
+}

src/ak-button/ak-button.stories.ts

@@ -255,6 +255,17 @@ export const Link: Story = {
     },
 };
 
+export const DisabledLink: Story = {
+    ...template,
+    args: {
+        variant: "link",
+        href: "https://goauthentik.io",
+        target: "_blank",
+        disabled: true,
+        content: "Gerudo!",
+    },
+};
+
 export const InlineLink: Story = {
     args: {
         variant: "link",

src/ak-button/ak-button.template.ts

@@ -21,7 +21,7 @@ export function linkTemplate(props: ButtonLinkProps) {
     const { href, target, disabled, download, rel, onClick, onKeydown } = props;
     return html`<a
         id="main"
-        href=${href}
+        href=${ifDefined(disabled ? null : href)}
         part="anchor"
         target="${ifDefined(target)}"
         ?disabled=${disabled}