web/admin: Pagination arrow buttons in ak-dual-select show inverted enabled/disabled colors in dark theme

[nicedevil007]

Describe the bug

In the ak-dual-select pagination control, the enabled/disabled visual state of the previous/next arrow buttons is inverted in the dark theme. On the first page of a multi-page list, the previous arrow (which is correctly disabled) is rendered in a bright, highlighted color, while the next arrow (which is correctly enabled and clickable) is rendered in a muted, low-contrast color. The behavior is mirrored on the last page.

The arrows still work correctly — only their visual state is swapped. Clicking the muted next arrow does navigate to the next page.

How to reproduce

1. Switch the authentik web UI to the dark theme.
2. Open any configuration page that uses the ak-dual-select component with a list large enough to be paginated. For example: Applications > Providers > edit any SAML provider > Advanced protocol settings > Property mappings.
3. Observe the Available User Property Mappings pane on the first page (for example 1 - 20 of 26).
4. Note that the left arrow appears highlighted (although disabled) and the right arrow appears muted (although enabled and clickable).

Expected behavior

• The previous button should be muted / low-contrast while it is disabled on the first page.
• The next button should be highlighted / full-contrast while it is enabled and clickable.

The light theme already behaves this way; the dark theme should match.

Screenshots

On the first page of a paginated list, the disabled previous arrow appears highlighted while the enabled next arrow appears muted.

Additional context

The bug is in the dark-theme overrides in web/src/elements/ak-dual-select/components/ak-pagination.ts. The color and the --pf-c-button--disabled--Color variable are swapped:

:host([theme="dark"]) {
    .pf-c-pagination__nav-control .pf-c-button {
        color: var(--pf-c-button--m-plain--disabled--Color);
        --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--Color);
    }

    .pf-c-pagination__nav-control .pf-c-button:disabled {
        color: var(--pf-c-button--disabled--Color);
    }
    ...
}

The active button receives the disabled color, and the disabled button receives the active color via the overridden custom property.

I am happy to open a PR to fix this.

Deployment Method

Docker

Version

2026.5.0