diff --git a/src/ak-button/ak-button.component.ts b/src/ak-button/ak-button.component.ts index 5cc2508..2cd4bdc 100644 --- a/src/ak-button/ak-button.component.ts +++ b/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): 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 }) diff --git a/src/ak-button/ak-button.css b/src/ak-button/ak-button.css index b3bbad8..55d5b56 100644 --- a/src/ak-button/ak-button.css +++ b/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; +} diff --git a/src/ak-button/ak-button.stories.ts b/src/ak-button/ak-button.stories.ts index f171342..c46b123 100644 --- a/src/ak-button/ak-button.stories.ts +++ b/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", diff --git a/src/ak-button/ak-button.template.ts b/src/ak-button/ak-button.template.ts index 2955035..a210014 100644 --- a/src/ak-button/ak-button.template.ts +++ b/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`