docusaurus-config: v1.0.6

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 2025.4.1
+current_version = 2025.4.0
 tag = True
 commit = True
 parse = (?P<major>\d+)\.(?P<minor>\d+)\.(?P<patch>\d+)(?:-(?P<rc_t>[a-zA-Z-]+)(?P<rc_n>[1-9]\\d*))?

.github/workflows/ci-main.yml

@@ -200,7 +200,7 @@ jobs:
         uses: actions/cache@v4
         with:
           path: web/dist
-          key: ${{ runner.os }}-web-${{ hashFiles('web/package-lock.json', 'web/src/**', 'web/packages/sfe/src/**') }}-b
+          key: ${{ runner.os }}-web-${{ hashFiles('web/package-lock.json', 'web/src/**') }}
       - name: prepare web ui
         if: steps.cache-web.outputs.cache-hit != 'true'
         working-directory: web
@@ -208,7 +208,6 @@ jobs:
           npm ci
           make -C .. gen-client-ts
           npm run build
-          npm run build:sfe
       - name: run e2e
         run: |
           uv run coverage run manage.py test ${{ matrix.job.glob }}

.github/workflows/ci-outpost.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Generate API
         run: make gen-client-go
       - name: golangci-lint
-        uses: golangci/golangci-lint-action@v8
+        uses: golangci/golangci-lint-action@v7
         with:
           version: latest
           args: --timeout 5000s --verbose

Dockerfile

@@ -40,8 +40,7 @@ COPY ./web /work/web/
 COPY ./website /work/website/
 COPY ./gen-ts-api /work/web/node_modules/@goauthentik/api
 
-RUN npm run build && \
-    npm run build:sfe
+RUN npm run build
 
 # Stage 3: Build go proxy
 FROM --platform=${BUILDPLATFORM} docker.io/library/golang:1.24-bookworm AS go-builder
@@ -86,17 +85,18 @@ FROM --platform=${BUILDPLATFORM} ghcr.io/maxmind/geoipupdate:v7.1.0 AS geoip
 ENV GEOIPUPDATE_EDITION_IDS="GeoLite2-City GeoLite2-ASN"
 ENV GEOIPUPDATE_VERBOSE="1"
 ENV GEOIPUPDATE_ACCOUNT_ID_FILE="/run/secrets/GEOIPUPDATE_ACCOUNT_ID"
+ENV GEOIPUPDATE_LICENSE_KEY_FILE="/run/secrets/GEOIPUPDATE_LICENSE_KEY"
 
 USER root
 RUN --mount=type=secret,id=GEOIPUPDATE_ACCOUNT_ID \
     --mount=type=secret,id=GEOIPUPDATE_LICENSE_KEY \
     mkdir -p /usr/share/GeoIP && \
-    /bin/sh -c "GEOIPUPDATE_LICENSE_KEY_FILE=/run/secrets/GEOIPUPDATE_LICENSE_KEY /usr/bin/entry.sh || echo 'Failed to get GeoIP database, disabling'; exit 0"
+    /bin/sh -c "/usr/bin/entry.sh || echo 'Failed to get GeoIP database, disabling'; exit 0"
 
 # Stage 5: Download uv
-FROM ghcr.io/astral-sh/uv:0.7.4 AS uv
+FROM ghcr.io/astral-sh/uv:0.7.2 AS uv
 # Stage 6: Base python image
-FROM ghcr.io/goauthentik/fips-python:3.13.3-slim-bookworm-fips AS python-base
+FROM ghcr.io/goauthentik/fips-python:3.12.10-slim-bookworm-fips AS python-base
 
 ENV VENV_PATH="/ak-root/.venv" \
     PATH="/lifecycle:/ak-root/.venv/bin:$PATH" \

README.md

@@ -42,4 +42,4 @@ See [SECURITY.md](SECURITY.md)
 
 ## Adoption and Contributions
 
-Your organization uses authentik? We'd love to add your logo to the readme and our website! Email us @ hello@goauthentik.io or open a GitHub Issue/PR! For more information on how to contribute to authentik, please refer to our [contribution guide](https://docs.goauthentik.io/docs/developer-docs?utm_source=github).
+Your organization uses authentik? We'd love to add your logo to the readme and our website! Email us @ hello@goauthentik.io or open a GitHub Issue/PR! For more information on how to contribute to authentik, please refer to our [CONTRIBUTING.md file](./CONTRIBUTING.md).

authentik/__init__.py

@@ -2,7 +2,7 @@
 
 from os import environ
 
-__version__ = "2025.4.1"
+__version__ = "2025.4.0"
 ENV_GIT_HASH_KEY = "GIT_BUILD_HASH"
 
 

authentik/api/schema.py

@@ -54,7 +54,7 @@ def create_component(generator: SchemaGenerator, name, schema, type_=ResolvedCom
     return component
 
 
-def postprocess_schema_responses(result, generator: SchemaGenerator, **kwargs):
+def postprocess_schema_responses(result, generator: SchemaGenerator, **kwargs):  # noqa: W0613
     """Workaround to set a default response for endpoints.
     Workaround suggested at
     <https://github.com/tfranzel/drf-spectacular/issues/119#issuecomment-656970357>

authentik/blueprints/v1/common.py

@@ -164,7 +164,9 @@ class BlueprintEntry:
         """Get the blueprint model, with yaml tags resolved if present"""
         return str(self.tag_resolver(self.model, blueprint))
 
-    def get_permissions(self, blueprint: "Blueprint") -> Generator[BlueprintEntryPermission]:
+    def get_permissions(
+        self, blueprint: "Blueprint"
+    ) -> Generator[BlueprintEntryPermission, None, None]:
         """Get permissions of this entry, with all yaml tags resolved"""
         for perm in self.permissions:
             yield BlueprintEntryPermission(

authentik/brands/utils.py

@@ -5,10 +5,10 @@ from typing import Any
 from django.db.models import F, Q
 from django.db.models import Value as V
 from django.http.request import HttpRequest
+from sentry_sdk import get_current_span
 
 from authentik import get_full_version
 from authentik.brands.models import Brand
-from authentik.lib.sentry import get_http_meta
 from authentik.tenants.models import Tenant
 
 _q_default = Q(default=True)
@@ -32,9 +32,13 @@ def context_processor(request: HttpRequest) -> dict[str, Any]:
     """Context Processor that injects brand object into every template"""
     brand = getattr(request, "brand", DEFAULT_BRAND)
     tenant = getattr(request, "tenant", Tenant())
+    trace = ""
+    span = get_current_span()
+    if span:
+        trace = span.to_traceparent()
     return {
         "brand": brand,
         "footer_links": tenant.footer_links,
-        "html_meta": {**get_http_meta()},
+        "sentry_trace": trace,
         "version": get_full_version(),
     }

authentik/core/api/groups.py

@@ -99,17 +99,18 @@ class GroupSerializer(ModelSerializer):
             if superuser
             else "authentik_core.disable_group_superuser"
         )
-        if self.instance or superuser:
-            has_perm = user.has_perm(perm) or user.has_perm(perm, self.instance)
-            if not has_perm:
-                raise ValidationError(
-                    _(
-                        (
-                            "User does not have permission to set "
-                            "superuser status to {superuser_status}."
-                        ).format_map({"superuser_status": superuser})
-                    )
+        has_perm = user.has_perm(perm)
+        if self.instance and not has_perm:
+            has_perm = user.has_perm(perm, self.instance)
+        if not has_perm:
+            raise ValidationError(
+                _(
+                    (
+                        "User does not have permission to set "
+                        "superuser status to {superuser_status}."
+                    ).format_map({"superuser_status": superuser})
                 )
+            )
         return superuser
 
     class Meta:

authentik/core/management/commands/repair_permissions.py

@@ -2,7 +2,6 @@
 
 from django.apps import apps
 from django.contrib.auth.management import create_permissions
-from django.core.management import call_command
 from django.core.management.base import BaseCommand, no_translations
 from guardian.management import create_anonymous_user
 
@@ -17,10 +16,6 @@ class Command(BaseCommand):
         """Check permissions for all apps"""
         for tenant in Tenant.objects.filter(ready=True):
             with tenant:
-                # See https://code.djangoproject.com/ticket/28417
-                # Remove potential lingering old permissions
-                call_command("remove_stale_contenttypes", "--no-input")
-
                 for app in apps.get_app_configs():
                     self.stdout.write(f"Checking app {app.name} ({app.label})\n")
                     create_permissions(app, verbosity=0)

authentik/core/migrations/0046_session_and_more.py

@@ -1,9 +1,123 @@
 # Generated by Django 5.0.11 on 2025-01-27 12:58
 
 import uuid
+import pickle  # nosec
+from django.core import signing
+from django.contrib.auth import BACKEND_SESSION_KEY, HASH_SESSION_KEY, SESSION_KEY
 from django.db import migrations, models
 import django.db.models.deletion
 from django.conf import settings
+from django.contrib.sessions.backends.cache import KEY_PREFIX
+from django.utils.timezone import now, timedelta
+from authentik.lib.migrations import progress_bar
+from authentik.root.middleware import ClientIPMiddleware
+
+
+SESSION_CACHE_ALIAS = "default"
+
+
+class PickleSerializer:
+    """
+    Simple wrapper around pickle to be used in signing.dumps()/loads() and
+    cache backends.
+    """
+
+    def __init__(self, protocol=None):
+        self.protocol = pickle.HIGHEST_PROTOCOL if protocol is None else protocol
+
+    def dumps(self, obj):
+        """Pickle data to be stored in redis"""
+        return pickle.dumps(obj, self.protocol)
+
+    def loads(self, data):
+        """Unpickle data to be loaded from redis"""
+        return pickle.loads(data)  # nosec
+
+
+def _migrate_session(
+    apps,
+    db_alias,
+    session_key,
+    session_data,
+    expires,
+):
+    Session = apps.get_model("authentik_core", "Session")
+    OldAuthenticatedSession = apps.get_model("authentik_core", "OldAuthenticatedSession")
+    AuthenticatedSession = apps.get_model("authentik_core", "AuthenticatedSession")
+
+    old_auth_session = (
+        OldAuthenticatedSession.objects.using(db_alias).filter(session_key=session_key).first()
+    )
+
+    args = {
+        "session_key": session_key,
+        "expires": expires,
+        "last_ip": ClientIPMiddleware.default_ip,
+        "last_user_agent": "",
+        "session_data": {},
+    }
+    for k, v in session_data.items():
+        if k == "authentik/stages/user_login/last_ip":
+            args["last_ip"] = v
+        elif k in ["last_user_agent", "last_used"]:
+            args[k] = v
+        elif args in [SESSION_KEY, BACKEND_SESSION_KEY, HASH_SESSION_KEY]:
+            pass
+        else:
+            args["session_data"][k] = v
+    if old_auth_session:
+        args["last_user_agent"] = old_auth_session.last_user_agent
+        args["last_used"] = old_auth_session.last_used
+
+    args["session_data"] = pickle.dumps(args["session_data"])
+    session = Session.objects.using(db_alias).create(**args)
+
+    if old_auth_session:
+        AuthenticatedSession.objects.using(db_alias).create(
+            session=session,
+            user=old_auth_session.user,
+        )
+
+
+def migrate_redis_sessions(apps, schema_editor):
+    from django.core.cache import caches
+
+    db_alias = schema_editor.connection.alias
+    cache = caches[SESSION_CACHE_ALIAS]
+
+    # Not a redis cache, skipping
+    if not hasattr(cache, "keys"):
+        return
+
+    print("\nMigrating Redis sessions to database, this might take a couple of minutes...")
+    for key, session_data in progress_bar(cache.get_many(cache.keys(f"{KEY_PREFIX}*")).items()):
+        _migrate_session(
+            apps=apps,
+            db_alias=db_alias,
+            session_key=key.removeprefix(KEY_PREFIX),
+            session_data=session_data,
+            expires=now() + timedelta(seconds=cache.ttl(key)),
+        )
+
+
+def migrate_database_sessions(apps, schema_editor):
+    DjangoSession = apps.get_model("sessions", "Session")
+    db_alias = schema_editor.connection.alias
+
+    print("\nMigration database sessions, this might take a couple of minutes...")
+    for django_session in progress_bar(DjangoSession.objects.using(db_alias).all()):
+        session_data = signing.loads(
+            django_session.session_data,
+            salt="django.contrib.sessions.SessionStore",
+            serializer=PickleSerializer,
+        )
+        _migrate_session(
+            apps=apps,
+            db_alias=db_alias,
+            session_key=django_session.session_key,
+            session_data=session_data,
+            expires=django_session.expire_date,
+        )
 
 
 class Migration(migrations.Migration):
@@ -113,4 +227,12 @@ class Migration(migrations.Migration):
                 "verbose_name_plural": "Authenticated Sessions",
             },
         ),
+        migrations.RunPython(
+            code=migrate_redis_sessions,
+            reverse_code=migrations.RunPython.noop,
+        ),
+        migrations.RunPython(
+            code=migrate_database_sessions,
+            reverse_code=migrations.RunPython.noop,
+        ),
     ]

authentik/core/migrations/0048_delete_oldauthenticatedsession_content_type.py

@@ -1,27 +0,0 @@
-# Generated by Django 5.1.9 on 2025-05-14 11:15
-
-from django.apps.registry import Apps
-from django.db import migrations
-from django.db.backends.base.schema import BaseDatabaseSchemaEditor
-
-
-def remove_old_authenticated_session_content_type(
-    apps: Apps, schema_editor: BaseDatabaseSchemaEditor
-):
-    db_alias = schema_editor.connection.alias
-    ContentType = apps.get_model("contenttypes", "ContentType")
-
-    ContentType.objects.using(db_alias).filter(model="oldauthenticatedsession").delete()
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("authentik_core", "0047_delete_oldauthenticatedsession"),
-    ]
-
-    operations = [
-        migrations.RunPython(
-            code=remove_old_authenticated_session_content_type,
-        ),
-    ]

authentik/core/templates/base/skeleton.html

@@ -21,9 +21,7 @@
         <script src="{% versioned_script 'dist/standalone/loading/index-%v.js' %}" type="module"></script>
         {% block head %}
         {% endblock %}
-        {% for key, value in html_meta.items %}
-        <meta name="{{key}}" content="{{ value }}" />
-        {% endfor %}
+        <meta name="sentry-trace" content="{{ sentry_trace }}" />
     </head>
     <body>
         {% block body %}

authentik/core/tests/test_groups_api.py

@@ -124,16 +124,6 @@ class TestGroupsAPI(APITestCase):
             {"is_superuser": ["User does not have permission to set superuser status to True."]},
         )
 
-    def test_superuser_no_perm_no_superuser(self):
-        """Test creating a group without permission and without superuser flag"""
-        assign_perm("authentik_core.add_group", self.login_user)
-        self.client.force_login(self.login_user)
-        res = self.client.post(
-            reverse("authentik_api:group-list"),
-            data={"name": generate_id(), "is_superuser": False},
-        )
-        self.assertEqual(res.status_code, 201)
-
     def test_superuser_update_no_perm(self):
         """Test updating a superuser group without permission"""
         group = Group.objects.create(name=generate_id(), is_superuser=True)

authentik/enterprise/license.py

@@ -132,14 +132,13 @@ class LicenseKey:
         """Get a summarized version of all (not expired) licenses"""
         total = LicenseKey(get_license_aud(), 0, "Summarized license", 0, 0)
         for lic in License.objects.all():
-            if lic.is_valid:
-                total.internal_users += lic.internal_users
-                total.external_users += lic.external_users
-                total.license_flags.extend(lic.status.license_flags)
+            total.internal_users += lic.internal_users
+            total.external_users += lic.external_users
             exp_ts = int(mktime(lic.expiry.timetuple()))
             if total.exp == 0:
                 total.exp = exp_ts
             total.exp = max(total.exp, exp_ts)
+            total.license_flags.extend(lic.status.license_flags)
         return total
 
     @staticmethod

authentik/enterprise/models.py

@@ -39,10 +39,6 @@ class License(SerializerModel):
     internal_users = models.BigIntegerField()
     external_users = models.BigIntegerField()
 
-    @property
-    def is_valid(self) -> bool:
-        return self.expiry >= now()
-
     @property
     def serializer(self) -> type[BaseSerializer]:
         from authentik.enterprise.api import LicenseSerializer

authentik/enterprise/tests/test_license.py

@@ -8,7 +8,6 @@ from django.test import TestCase
 from django.utils.timezone import now
 from rest_framework.exceptions import ValidationError
 
-from authentik.core.models import User
 from authentik.enterprise.license import LicenseKey
 from authentik.enterprise.models import (
     THRESHOLD_READ_ONLY_WEEKS,
@@ -72,9 +71,9 @@ class TestEnterpriseLicense(TestCase):
     )
     def test_valid_multiple(self):
         """Check license verification"""
-        lic = License.objects.create(key=generate_id(), expiry=expiry_valid)
+        lic = License.objects.create(key=generate_id())
         self.assertTrue(lic.status.status().is_valid)
-        lic2 = License.objects.create(key=generate_id(), expiry=expiry_valid)
+        lic2 = License.objects.create(key=generate_id())
         self.assertTrue(lic2.status.status().is_valid)
         total = LicenseKey.get_total()
         self.assertEqual(total.internal_users, 200)
@@ -233,9 +232,7 @@ class TestEnterpriseLicense(TestCase):
     )
     def test_expiry_expired(self):
         """Check license verification"""
-        User.objects.all().delete()
-        License.objects.all().delete()
-        License.objects.create(key=generate_id(), expiry=expiry_expired)
+        License.objects.create(key=generate_id())
         self.assertEqual(LicenseKey.get_total().summary().status, LicenseUsageStatus.EXPIRED)
 
     @patch(

authentik/events/logs.py

@@ -57,7 +57,7 @@ class LogEventSerializer(PassiveSerializer):
 
 
 @contextmanager
-def capture_logs(log_default_output=True) -> Generator[list[LogEvent]]:
+def capture_logs(log_default_output=True) -> Generator[list[LogEvent], None, None]:
     """Capture log entries created"""
     logs = []
     cap = LogCapture()

authentik/flows/templates/if/flow-sfe.html

@@ -15,7 +15,6 @@
         {% endblock %}
         <link rel="stylesheet" type="text/css" href="{% static 'dist/sfe/bootstrap.min.css' %}">
         <meta name="sentry-trace" content="{{ sentry_trace }}" />
-        <link rel="prefetch" href="{{ flow_background_url }}" />
         {% include "base/header_js.html" %}
         <style>
           html,
@@ -23,7 +22,7 @@
             height: 100%;
           }
           body {
-            background-image: url("{{ flow_background_url }}");
+            background-image: url("{{ flow.background_url }}");
             background-repeat: no-repeat;
             background-size: cover;
           }

authentik/flows/templates/if/flow.html

@@ -5,9 +5,9 @@
 
 {% block head_before %}
 {{ block.super }}
-<link rel="prefetch" href="{{ flow_background_url }}" />
+<link rel="prefetch" href="{{ flow.background_url }}" />
 {% if flow.compatibility_mode and not inspector %}
-<script>ShadyDOM = { force: true };</script>
+<script>ShadyDOM = { force: !navigator.webdriver };</script>
 {% endif %}
 {% include "base/header_js.html" %}
 <script>
@@ -21,7 +21,7 @@ window.authentik.flow = {
 <script src="{% versioned_script 'dist/flow/FlowInterface-%v.js' %}" type="module"></script>
 <style>
 :root {
-    --ak-flow-background: url("{{ flow_background_url }}");
+    --ak-flow-background: url("{{ flow.background_url }}");
 }
 </style>
 {% endblock %}

authentik/flows/views/interface.py

@@ -13,9 +13,7 @@ class FlowInterfaceView(InterfaceView):
     """Flow interface"""
 
     def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
-        flow = get_object_or_404(Flow, slug=self.kwargs.get("flow_slug"))
-        kwargs["flow"] = flow
-        kwargs["flow_background_url"] = flow.background_url(self.request)
+        kwargs["flow"] = get_object_or_404(Flow, slug=self.kwargs.get("flow_slug"))
         kwargs["inspector"] = "inspector" in self.request.GET
         return super().get_context_data(**kwargs)
 

authentik/lib/config.py

@@ -363,9 +363,6 @@ def django_db_config(config: ConfigLoader | None = None) -> dict:
         pool_options = config.get_dict_from_b64_json("postgresql.pool_options", True)
         if not pool_options:
             pool_options = True
-    # FIXME: Temporarily force pool to be deactivated.
-    # See https://github.com/goauthentik/authentik/issues/14320
-    pool_options = False
 
     db = {
         "default": {

authentik/lib/sentry.py

@@ -17,7 +17,7 @@ from ldap3.core.exceptions import LDAPException
 from redis.exceptions import ConnectionError as RedisConnectionError
 from redis.exceptions import RedisError, ResponseError
 from rest_framework.exceptions import APIException
-from sentry_sdk import HttpTransport, get_current_scope
+from sentry_sdk import HttpTransport
 from sentry_sdk import init as sentry_sdk_init
 from sentry_sdk.api import set_tag
 from sentry_sdk.integrations.argv import ArgvIntegration
@@ -27,7 +27,6 @@ from sentry_sdk.integrations.redis import RedisIntegration
 from sentry_sdk.integrations.socket import SocketIntegration
 from sentry_sdk.integrations.stdlib import StdlibIntegration
 from sentry_sdk.integrations.threading import ThreadingIntegration
-from sentry_sdk.tracing import BAGGAGE_HEADER_NAME, SENTRY_TRACE_HEADER_NAME
 from structlog.stdlib import get_logger
 from websockets.exceptions import WebSocketException
 
@@ -96,8 +95,6 @@ def traces_sampler(sampling_context: dict) -> float:
         return 0
     if _type == "websocket":
         return 0
-    if CONFIG.get_bool("debug"):
-        return 1
     return float(CONFIG.get("error_reporting.sample_rate", 0.1))
 
 
@@ -170,14 +167,3 @@ def before_send(event: dict, hint: dict) -> dict | None:
     if settings.DEBUG:
         return None
     return event
-
-
-def get_http_meta():
-    """Get sentry-related meta key-values"""
-    scope = get_current_scope()
-    meta = {
-        SENTRY_TRACE_HEADER_NAME: scope.get_traceparent() or "",
-    }
-    if bag := scope.get_baggage():
-        meta[BAGGAGE_HEADER_NAME] = bag.serialize()
-    return meta

authentik/lib/sync/mapper.py

@@ -59,7 +59,7 @@ class PropertyMappingManager:
         request: HttpRequest | None,
         return_mapping: bool = False,
         **kwargs,
-    ) -> Generator[tuple[dict, PropertyMapping]]:
+    ) -> Generator[tuple[dict, PropertyMapping], None]:
         """Iterate over all mappings that were pre-compiled and
         execute all of them with the given context"""
         if not self.__has_compiled:

authentik/lib/tests/test_config.py

@@ -494,88 +494,86 @@ class TestConfig(TestCase):
             },
         )
 
-    # FIXME: Temporarily force pool to be deactivated.
-    # See https://github.com/goauthentik/authentik/issues/14320
-    # def test_db_pool(self):
-    #     """Test DB Config with pool"""
-    #     config = ConfigLoader()
-    #     config.set("postgresql.host", "foo")
-    #     config.set("postgresql.name", "foo")
-    #     config.set("postgresql.user", "foo")
-    #     config.set("postgresql.password", "foo")
-    #     config.set("postgresql.port", "foo")
-    #     config.set("postgresql.test.name", "foo")
-    #     config.set("postgresql.use_pool", True)
-    #     conf = django_db_config(config)
-    #     self.assertEqual(
-    #         conf,
-    #         {
-    #             "default": {
-    #                 "ENGINE": "authentik.root.db",
-    #                 "HOST": "foo",
-    #                 "NAME": "foo",
-    #                 "OPTIONS": {
-    #                     "pool": True,
-    #                     "sslcert": None,
-    #                     "sslkey": None,
-    #                     "sslmode": None,
-    #                     "sslrootcert": None,
-    #                 },
-    #                 "PASSWORD": "foo",
-    #                 "PORT": "foo",
-    #                 "TEST": {"NAME": "foo"},
-    #                 "USER": "foo",
-    #                 "CONN_MAX_AGE": 0,
-    #                 "CONN_HEALTH_CHECKS": False,
-    #                 "DISABLE_SERVER_SIDE_CURSORS": False,
-    #             }
-    #         },
-    #     )
+    def test_db_pool(self):
+        """Test DB Config with pool"""
+        config = ConfigLoader()
+        config.set("postgresql.host", "foo")
+        config.set("postgresql.name", "foo")
+        config.set("postgresql.user", "foo")
+        config.set("postgresql.password", "foo")
+        config.set("postgresql.port", "foo")
+        config.set("postgresql.test.name", "foo")
+        config.set("postgresql.use_pool", True)
+        conf = django_db_config(config)
+        self.assertEqual(
+            conf,
+            {
+                "default": {
+                    "ENGINE": "authentik.root.db",
+                    "HOST": "foo",
+                    "NAME": "foo",
+                    "OPTIONS": {
+                        "pool": True,
+                        "sslcert": None,
+                        "sslkey": None,
+                        "sslmode": None,
+                        "sslrootcert": None,
+                    },
+                    "PASSWORD": "foo",
+                    "PORT": "foo",
+                    "TEST": {"NAME": "foo"},
+                    "USER": "foo",
+                    "CONN_MAX_AGE": 0,
+                    "CONN_HEALTH_CHECKS": False,
+                    "DISABLE_SERVER_SIDE_CURSORS": False,
+                }
+            },
+        )
 
-    # def test_db_pool_options(self):
-    #     """Test DB Config with pool"""
-    #     config = ConfigLoader()
-    #     config.set("postgresql.host", "foo")
-    #     config.set("postgresql.name", "foo")
-    #     config.set("postgresql.user", "foo")
-    #     config.set("postgresql.password", "foo")
-    #     config.set("postgresql.port", "foo")
-    #     config.set("postgresql.test.name", "foo")
-    #     config.set("postgresql.use_pool", True)
-    #     config.set(
-    #         "postgresql.pool_options",
-    #         base64.b64encode(
-    #             dumps(
-    #                 {
-    #                     "max_size": 15,
-    #                 }
-    #             ).encode()
-    #         ).decode(),
-    #     )
-    #     conf = django_db_config(config)
-    #     self.assertEqual(
-    #         conf,
-    #         {
-    #             "default": {
-    #                 "ENGINE": "authentik.root.db",
-    #                 "HOST": "foo",
-    #                 "NAME": "foo",
-    #                 "OPTIONS": {
-    #                     "pool": {
-    #                         "max_size": 15,
-    #                     },
-    #                     "sslcert": None,
-    #                     "sslkey": None,
-    #                     "sslmode": None,
-    #                     "sslrootcert": None,
-    #                 },
-    #                 "PASSWORD": "foo",
-    #                 "PORT": "foo",
-    #                 "TEST": {"NAME": "foo"},
-    #                 "USER": "foo",
-    #                 "CONN_MAX_AGE": 0,
-    #                 "CONN_HEALTH_CHECKS": False,
-    #                 "DISABLE_SERVER_SIDE_CURSORS": False,
-    #             }
-    #         },
-    #     )
+    def test_db_pool_options(self):
+        """Test DB Config with pool"""
+        config = ConfigLoader()
+        config.set("postgresql.host", "foo")
+        config.set("postgresql.name", "foo")
+        config.set("postgresql.user", "foo")
+        config.set("postgresql.password", "foo")
+        config.set("postgresql.port", "foo")
+        config.set("postgresql.test.name", "foo")
+        config.set("postgresql.use_pool", True)
+        config.set(
+            "postgresql.pool_options",
+            base64.b64encode(
+                dumps(
+                    {
+                        "max_size": 15,
+                    }
+                ).encode()
+            ).decode(),
+        )
+        conf = django_db_config(config)
+        self.assertEqual(
+            conf,
+            {
+                "default": {
+                    "ENGINE": "authentik.root.db",
+                    "HOST": "foo",
+                    "NAME": "foo",
+                    "OPTIONS": {
+                        "pool": {
+                            "max_size": 15,
+                        },
+                        "sslcert": None,
+                        "sslkey": None,
+                        "sslmode": None,
+                        "sslrootcert": None,
+                    },
+                    "PASSWORD": "foo",
+                    "PORT": "foo",
+                    "TEST": {"NAME": "foo"},
+                    "USER": "foo",
+                    "CONN_MAX_AGE": 0,
+                    "CONN_HEALTH_CHECKS": False,
+                    "DISABLE_SERVER_SIDE_CURSORS": False,
+                }
+            },
+        )

authentik/providers/scim/clients/groups.py

@@ -199,7 +199,7 @@ class SCIMGroupClient(SCIMClient[Group, SCIMProviderGroup, SCIMGroupSchema]):
             chunk_size = len(ops)
         if len(ops) < 1:
             return
-        for chunk in batched(ops, chunk_size, strict=False):
+        for chunk in batched(ops, chunk_size):
             req = PatchRequest(Operations=list(chunk))
             self._request(
                 "PATCH",

authentik/sources/kerberos/models.py

@@ -317,7 +317,7 @@ class KerberosSource(Source):
                 usage="accept", name=name, store=self.get_gssapi_store()
             )
         except gssapi.exceptions.GSSError as exc:
-            LOGGER.warning("GSSAPI credentials failure", exc=exc)
+            LOGGER.warn("GSSAPI credentials failure", exc=exc)
             return None
 
 

blueprints/schema.json

@@ -2,7 +2,7 @@
     "$schema": "http://json-schema.org/draft-07/schema",
     "$id": "https://goauthentik.io/blueprints/schema.json",
     "type": "object",
-    "title": "authentik 2025.4.1 Blueprint schema",
+    "title": "authentik 2025.4.0 Blueprint schema",
     "required": [
         "version",
         "entries"

docker-compose.yml

@@ -31,7 +31,7 @@ services:
     volumes:
       - redis:/data
   server:
-    image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2025.4.1}
+    image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2025.4.0}
     restart: unless-stopped
     command: server
     environment:
@@ -55,7 +55,7 @@ services:
       redis:
         condition: service_healthy
   worker:
-    image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2025.4.1}
+    image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2025.4.0}
     restart: unless-stopped
     command: worker
     environment:

go.mod

@@ -5,7 +5,7 @@ go 1.24.0
 require (
 	beryju.io/ldap v0.1.0
 	github.com/coreos/go-oidc/v3 v3.14.1
-	github.com/getsentry/sentry-go v0.33.0
+	github.com/getsentry/sentry-go v0.32.0
 	github.com/go-http-utils/etag v0.0.0-20161124023236-513ea8f21eb1
 	github.com/go-ldap/ldap/v3 v3.4.11
 	github.com/go-openapi/runtime v0.28.0
@@ -19,7 +19,7 @@ require (
 	github.com/jellydator/ttlcache/v3 v3.3.0
 	github.com/mitchellh/mapstructure v1.5.0
 	github.com/nmcclain/asn1-ber v0.0.0-20170104154839-2661553a0484
-	github.com/pires/go-proxyproto v0.8.1
+	github.com/pires/go-proxyproto v0.8.0
 	github.com/prometheus/client_golang v1.22.0
 	github.com/redis/go-redis/v9 v9.8.0
 	github.com/sethvargo/go-envconfig v1.3.0
@@ -27,10 +27,10 @@ require (
 	github.com/spf13/cobra v1.9.1
 	github.com/stretchr/testify v1.10.0
 	github.com/wwt/guac v1.3.2
-	goauthentik.io/api/v3 v3.2025041.1
+	goauthentik.io/api/v3 v3.2025040.1
 	golang.org/x/exp v0.0.0-20230210204819-062eb4c674ab
-	golang.org/x/oauth2 v0.30.0
-	golang.org/x/sync v0.14.0
+	golang.org/x/oauth2 v0.29.0
+	golang.org/x/sync v0.13.0
 	gopkg.in/yaml.v2 v2.4.0
 	layeh.com/radius v0.0.0-20210819152912-ad72663a72ab
 )
@@ -75,7 +75,7 @@ require (
 	go.opentelemetry.io/otel/trace v1.24.0 // indirect
 	golang.org/x/crypto v0.36.0 // indirect
 	golang.org/x/sys v0.31.0 // indirect
-	golang.org/x/text v0.24.0 // indirect
+	golang.org/x/text v0.23.0 // indirect
 	google.golang.org/protobuf v1.36.5 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

go.sum

@@ -69,8 +69,8 @@ github.com/envoyproxy/go-control-plane v0.9.4/go.mod h1:6rpuAdCZL397s3pYoYcLgu1m
 github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
 github.com/felixge/httpsnoop v1.0.3 h1:s/nj+GCswXYzN5v2DpNMuMQYe+0DDwt5WVCU6CWBdXk=
 github.com/felixge/httpsnoop v1.0.3/go.mod h1:m8KPJKqk1gH5J9DgRY2ASl2lWCfGKXixSwevea8zH2U=
-github.com/getsentry/sentry-go v0.33.0 h1:YWyDii0KGVov3xOaamOnF0mjOrqSjBqwv48UEzn7QFg=
-github.com/getsentry/sentry-go v0.33.0/go.mod h1:C55omcY9ChRQIUcVcGcs+Zdy4ZpQGvNJ7JYHIoSWOtE=
+github.com/getsentry/sentry-go v0.32.0 h1:YKs+//QmwE3DcYtfKRH8/KyOOF/I6Qnx7qYGNHCGmCY=
+github.com/getsentry/sentry-go v0.32.0/go.mod h1:CYNcMMz73YigoHljQRG+qPF+eMq8gG72XcGN/p71BAY=
 github.com/go-asn1-ber/asn1-ber v1.5.8-0.20250403174932-29230038a667 h1:BP4M0CvQ4S3TGls2FvczZtj5Re/2ZzkV9VwqPHH/3Bo=
 github.com/go-asn1-ber/asn1-ber v1.5.8-0.20250403174932-29230038a667/go.mod h1:hEBeB/ic+5LoWskz+yKT7vGhhPYkProFKoKdwZRWMe0=
 github.com/go-errors/errors v1.4.2 h1:J6MZopCL4uSllY1OfXM374weqZFFItUbrImctkmUxIA=
@@ -230,8 +230,8 @@ github.com/opentracing/opentracing-go v1.2.0 h1:uEJPy/1a5RIPAJ0Ov+OIO8OxWu77jEv+
 github.com/opentracing/opentracing-go v1.2.0/go.mod h1:GxEUsuufX4nBwe+T+Wl9TAgYrxe9dPLANfrWvHYVTgc=
 github.com/pingcap/errors v0.11.4 h1:lFuQV/oaUMGcD2tqt+01ROSmJs75VG1ToEOkZIZ4nE4=
 github.com/pingcap/errors v0.11.4/go.mod h1:Oi8TUi2kEtXXLMJk9l1cGmz20kV3TaQ0usTwv5KuLY8=
-github.com/pires/go-proxyproto v0.8.1 h1:9KEixbdJfhrbtjpz/ZwCdWDD2Xem0NZ38qMYaASJgp0=
-github.com/pires/go-proxyproto v0.8.1/go.mod h1:ZKAAyp3cgy5Y5Mo4n9AlScrkCZwUy0g3Jf+slqQVcuU=
+github.com/pires/go-proxyproto v0.8.0 h1:5unRmEAPbHXHuLjDg01CxJWf91cw3lKHc/0xzKpXEe0=
+github.com/pires/go-proxyproto v0.8.0/go.mod h1:iknsfgnH8EkjrMeMyvfKByp9TiBZCKZM0jx2xmKqnVY=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
@@ -290,8 +290,8 @@ go.opentelemetry.io/otel/trace v1.24.0 h1:CsKnnL4dUAr/0llH9FKuc698G04IrpWV0MQA/Y
 go.opentelemetry.io/otel/trace v1.24.0/go.mod h1:HPc3Xr/cOApsBI154IU0OI0HJexz+aw5uPdbs3UCjNU=
 go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
 go.uber.org/goleak v1.3.0/go.mod h1:CoHD4mav9JJNrW/WLlf7HGZPjdw8EucARQHekz1X6bE=
-goauthentik.io/api/v3 v3.2025041.1 h1:GAN6AoTmfnCGgx1SyM07jP4/LR/T3rkTEyShSBd3Co8=
-goauthentik.io/api/v3 v3.2025041.1/go.mod h1:zz+mEZg8rY/7eEjkMGWJ2DnGqk+zqxuybGCGrR2O4Kw=
+goauthentik.io/api/v3 v3.2025040.1 h1:rQEcMNpz84/LPX8LVFteOJuserrd4PnU4k1Iu/wWqhs=
+goauthentik.io/api/v3 v3.2025040.1/go.mod h1:zz+mEZg8rY/7eEjkMGWJ2DnGqk+zqxuybGCGrR2O4Kw=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20190605123033-f99c8df09eb5/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
@@ -358,16 +358,16 @@ golang.org/x/net v0.0.0-20200520182314-0ba52f642ac2/go.mod h1:qpuaurCH72eLCgpAm/
 golang.org/x/net v0.0.0-20200625001655-4c5254603344/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
 golang.org/x/net v0.0.0-20200707034311-ab3426394381/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
 golang.org/x/net v0.0.0-20200822124328-c89045814202/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
-golang.org/x/net v0.39.0 h1:ZCu7HMWDxpXpaiKdhzIfaltL9Lp31x/3fCP11bc6/fY=
-golang.org/x/net v0.39.0/go.mod h1:X7NRbYVEA+ewNkCNyJ513WmMdQ3BineSwVtN2zD/d+E=
+golang.org/x/net v0.38.0 h1:vRMAPTMaeGqVhG5QyLJHqNDwecKTomGeqbnfZyKlBI8=
+golang.org/x/net v0.38.0/go.mod h1:ivrbrMbzFq5J41QOQh0siUuly180yBYtLp+CKbEaFx8=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20191202225959-858c2ad4c8b6/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20200107190931-bf48bf16ab8d/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20210218202405-ba52d332ba99/go.mod h1:KelEdhl1UZF7XfJ4dDtk6s++YSgaE7mD/BuKKDLBl4A=
-golang.org/x/oauth2 v0.30.0 h1:dnDm7JmhM45NNpd8FDDeLhK6FwqbOf4MLCM9zb1BOHI=
-golang.org/x/oauth2 v0.30.0/go.mod h1:B++QgG3ZKulg6sRPGD/mqlHQs5rB3Ml9erfeDY7xKlU=
+golang.org/x/oauth2 v0.29.0 h1:WdYw2tdTK1S8olAzWHdgeqfy+Mtm9XNhv/xJsY65d98=
+golang.org/x/oauth2 v0.29.0/go.mod h1:onh5ek6nERTohokkhCD/y2cV4Do3fxFHFuAejCkRWT8=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -376,8 +376,8 @@ golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20200317015054-43a5402ce75a/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20200625203802-6e8e738ad208/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.14.0 h1:woo0S4Yywslg6hp4eUFjTVOyKt0RookbpAHG4c1HmhQ=
-golang.org/x/sync v0.14.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sync v0.13.0 h1:AauUjRAJ9OSnvULf/ARrrVywoJDy0YS2AwQ98I37610=
+golang.org/x/sync v0.13.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190312061237-fead79001313/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -412,8 +412,8 @@ golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.24.0 h1:dd5Bzh4yt5KYA8f9CJHCP4FB4D51c2c6JvN37xJJkJ0=
-golang.org/x/text v0.24.0/go.mod h1:L8rBsPeo2pSS+xqN0d5u2ikmjtmoJbDBT1b7nHvFCdU=
+golang.org/x/text v0.23.0 h1:D71I7dUrlY+VX0gQShAThNGHFxZ13dGLBHQLVl1mJlY=
+golang.org/x/text v0.23.0/go.mod h1:/BLNzu4aZCJ1+kcD0DNRotWKage4q2rGVAg4o22unh4=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20191024005414-555d28b269f0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=

internal/constants/constants.go

@@ -29,4 +29,4 @@ func UserAgent() string {
 	return fmt.Sprintf("authentik@%s", FullVersion())
 }
 
-const VERSION = "2025.4.1"
+const VERSION = "2025.4.0"

ldap.Dockerfile

@@ -56,7 +56,6 @@ EXPOSE 3389 6636 9300
 
 USER 1000
 
-ENV TMPDIR=/dev/shm/ \
-    GOFIPS=1
+ENV GOFIPS=1
 
 ENTRYPOINT ["/ldap"]

lifecycle/ak

@@ -97,7 +97,6 @@ elif [[ "$1" == "test-all" ]]; then
 elif [[ "$1" == "healthcheck" ]]; then
     run_authentik healthcheck $(cat $MODE_FILE)
 elif [[ "$1" == "dump_config" ]]; then
-    shift
     exec python -m authentik.lib.config $@
 elif [[ "$1" == "debug" ]]; then
     exec sleep infinity

lifecycle/aws/package-lock.json

@@ -9,7 +9,7 @@
             "version": "0.0.0",
             "license": "MIT",
             "devDependencies": {
-                "aws-cdk": "^2.1015.0",
+                "aws-cdk": "^2.1013.0",
                 "cross-env": "^7.0.3"
             },
             "engines": {
@@ -17,9 +17,9 @@
             }
         },
         "node_modules/aws-cdk": {
-            "version": "2.1015.0",
-            "resolved": "https://registry.npmjs.org/aws-cdk/-/aws-cdk-2.1015.0.tgz",
-            "integrity": "sha512-txd+yMVVybtLfiwT409+fahbP0SkiwhmQvQf6PVVYnWzDPSknxYlUNJHisHV4tJEcbHWn1QPsLmqqMT0bw8hBg==",
+            "version": "2.1013.0",
+            "resolved": "https://registry.npmjs.org/aws-cdk/-/aws-cdk-2.1013.0.tgz",
+            "integrity": "sha512-cbq4cOoEIZueMWenGgfI4RujS+AQ9GaMCTlW/3CnvEIhMD8j/tgZx7PTtgMuvwYrRoEeb/wTxgLPgUd5FhsoHA==",
             "dev": true,
             "license": "Apache-2.0",
             "bin": {

lifecycle/aws/package.json

@@ -10,7 +10,7 @@
         "node": ">=20"
     },
     "devDependencies": {
-        "aws-cdk": "^2.1015.0",
+        "aws-cdk": "^2.1013.0",
         "cross-env": "^7.0.3"
     }
 }

lifecycle/aws/template.yaml

@@ -26,7 +26,7 @@ Parameters:
     Description: authentik Docker image
   AuthentikVersion:
     Type: String
-    Default: 2025.4.1
+    Default: 2025.4.0
     Description: authentik Docker image tag
   AuthentikServerCPU:
     Type: Number

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@goauthentik/authentik",
-    "version": "2025.4.1",
+    "version": "2025.4.0",
     "private": true,
     "type": "module",
     "devDependencies": {

proxy.Dockerfile

@@ -76,7 +76,6 @@ EXPOSE 9000 9300 9443
 
 USER 1000
 
-ENV TMPDIR=/dev/shm/ \
-    GOFIPS=1
+ENV GOFIPS=1
 
 ENTRYPOINT ["/proxy"]

pyproject.toml

@@ -1,116 +1,104 @@
 [project]
 name = "authentik"
-version = "2025.4.1"
+version = "2025.4.0"
 description = ""
 authors = [{ name = "authentik Team", email = "hello@goauthentik.io" }]
-requires-python = "==3.13.*"
+requires-python = "==3.12.*"
 dependencies = [
-    "argon2-cffi==23.1.0",
-    "celery==5.5.2",
-    "channels==4.2.2",
-    "channels-redis==4.2.1",
-    "cryptography==44.0.3",
-    "dacite==1.9.2",
-    "deepmerge==2.0",
-    "defusedxml==0.7.1",
-    "django==5.1.9",
-    "django-countries==7.6.1",
-    "django-cte==1.3.3",
-    "django-filter==25.1",
-    "django-guardian<3.0.0",
-    "django-model-utils==5.0.0",
-    "django-pglock==1.7.2",
-    "django-prometheus==2.3.1",
-    "django-redis==5.4.0",
-    "django-storages[s3]==1.14.6",
-    "django-tenants==3.7.0",
-    "djangorestframework==3.16.0",
-    "djangorestframework-guardian==0.3.0",
-    "docker==7.1.0",
-    "drf-orjson-renderer==1.7.3",
-    "drf-spectacular==0.28.0",
-    "dumb-init==1.2.5.post1",
-    "duo-client==5.5.0",
-    "fido2==1.2.0",
-    "flower==2.0.1",
-    "geoip2==5.1.0",
-    "geopy==2.4.1",
-    "google-api-python-client==2.169.0",
-    "gssapi==1.9.0",
-    "gunicorn==23.0.0",
-    "jsonpatch==1.33",
-    "jwcrypto==1.5.6",
-    "kubernetes==32.0.1",
-    "ldap3==2.9.1",
-    "lxml==5.4.0",
-    "msgraph-sdk==1.30.0",
-    "opencontainers==0.0.14",
-    "packaging==25.0",
-    "paramiko==3.5.1",
-    "psycopg[c,pool]==3.2.9",
-    "pydantic==2.11.4",
-    "pydantic-scim==0.0.8",
-    "pyjwt==2.10.1",
-    "pyrad==2.4",
-    "python-kadmin-rs==0.6.0",
-    "pyyaml==6.0.2",
-    "requests-oauthlib==2.0.0",
-    "scim2-filter-parser==0.7.0",
-    "sentry-sdk==2.28.0",
-    "service-identity==24.2.0",
-    "setproctitle==1.3.6",
-    "structlog==25.3.0",
-    "swagger-spec-validator==3.0.4",
-    "tenant-schemas-celery==4.0.1",
-    "twilio==9.6.1",
-    "ua-parser==1.0.1",
-    "unidecode==1.4.0",
-    "urllib3<3",
-    "uvicorn[standard]==0.34.2",
-    "watchdog==6.0.0",
-    "webauthn==2.5.2",
-    "wsproto==1.2.0",
-    "xmlsec==1.3.15",
-    "zxcvbn==4.5.0",
+    "argon2-cffi",
+    "celery",
+    "channels",
+    "channels-redis",
+    "cryptography",
+    "dacite",
+    "deepmerge",
+    "defusedxml",
+    "django",
+    "django-countries",
+    "django-cte",
+    "django-filter",
+    "django-guardian",
+    "django-model-utils",
+    "django-pglock",
+    "django-prometheus",
+    "django-redis",
+    "django-storages[s3]",
+    "django-tenants",
+    "djangorestframework",
+    "djangorestframework-guardian",
+    "docker",
+    "drf-orjson-renderer",
+    "drf-spectacular",
+    "dumb-init",
+    "duo-client",
+    "fido2",
+    "flower",
+    "geoip2",
+    "geopy",
+    "google-api-python-client",
+    "gssapi",
+    "gunicorn",
+    "jsonpatch",
+    "jwcrypto",
+    "kubernetes",
+    "ldap3",
+    "lxml",
+    "msgraph-sdk",
+    "opencontainers",
+    "packaging",
+    "paramiko",
+    "psycopg[c, pool]",
+    "pydantic",
+    "pydantic-scim",
+    "pyjwt",
+    "pyrad",
+    "python-kadmin-rs ==0.6.0",
+    "pyyaml",
+    "requests-oauthlib",
+    "scim2-filter-parser",
+    "sentry-sdk",
+    "service_identity",
+    "setproctitle",
+    "structlog",
+    "swagger-spec-validator",
+    "tenant-schemas-celery",
+    "twilio",
+    "ua-parser",
+    "unidecode",
+    "urllib3 <3",
+    "uvicorn[standard]",
+    "watchdog",
+    "webauthn",
+    "wsproto",
+    "xmlsec <= 1.3.14",
+    "zxcvbn",
 ]
 
 [dependency-groups]
 dev = [
-    "aws-cdk-lib==2.188.0",
-    "bandit==1.8.3",
-    "black==25.1.0",
-    "bump2version==1.0.1",
-    "channels[daphne]==4.2.2",
-    "codespell==2.4.1",
-    "colorama==0.4.6",
-    "constructs==10.4.2",
-    "coverage[toml]==7.8.0",
-    "debugpy==1.8.14",
-    "drf-jsonschema-serializer==3.0.0",
-    "freezegun==1.5.1",
-    "importlib-metadata==8.6.1",
-    "k5test==0.10.4",
-    "pdoc==15.0.3",
-    "pytest==8.3.5",
-    "pytest-django==4.11.1",
-    "pytest-github-actions-annotate-failures==0.3.0",
-    "pytest-randomly==3.16.0",
-    "pytest-timeout==2.4.0",
-    "requests-mock==1.12.1",
-    "ruff==0.11.9",
-    "selenium==4.32.0",
-]
-
-[tool.uv]
-no-binary-package = [
-    # This differs from the no-binary packages in the Dockerfile. This is due to the fact
-    # that these packages are built from source for different reasons than cryptography and kadmin.
-    # These packages are built from source to link against the libxml2 on the system which is
-    # required for functionality and to stay up-to-date on both libraries.
-    # The other packages specified in the dockerfile are compiled from source to link against the
-    # correct FIPS OpenSSL libraries
-    "lxml",
-    "xmlsec",
+    "aws-cdk-lib",
+    "bandit",
+    "black",
+    "bump2version",
+    "channels[daphne]",
+    "codespell",
+    "colorama",
+    "constructs",
+    "coverage[toml]",
+    "debugpy",
+    "drf-jsonschema-serializer",
+    "freezegun",
+    "importlib-metadata",
+    "k5test",
+    "pdoc",
+    "pytest",
+    "pytest-django",
+    "pytest-github-actions-annotate-failures",
+    "pytest-randomly",
+    "pytest-timeout",
+    "requests-mock",
+    "ruff",
+    "selenium",
 ]
 
 [tool.uv.sources]
@@ -155,12 +143,12 @@ ignore-words = ".github/codespell-words.txt"
 
 [tool.black]
 line-length = 100
-target-version = ['py313']
+target-version = ['py312']
 exclude = 'node_modules'
 
 [tool.ruff]
 line-length = 100
-target-version = "py313"
+target-version = "py312"
 exclude = ["**/migrations/**", "**/node_modules/**"]
 
 [tool.ruff.lint]

rac.Dockerfile

@@ -56,7 +56,6 @@ HEALTHCHECK --interval=5s --retries=20 --start-period=3s CMD [ "/rac", "healthch
 
 USER 1000
 
-ENV TMPDIR=/dev/shm/ \
-    GOFIPS=1
+ENV GOFIPS=1
 
 ENTRYPOINT ["/rac"]

radius.Dockerfile

@@ -56,7 +56,6 @@ EXPOSE 1812/udp 9300
 
 USER 1000
 
-ENV TMPDIR=/dev/shm/ \
-    GOFIPS=1
+ENV GOFIPS=1
 
 ENTRYPOINT ["/radius"]

schema.yml

@@ -1,7 +1,7 @@
 openapi: 3.0.3
 info:
   title: authentik
-  version: 2025.4.1
+  version: 2025.4.0
   description: Making authentication simple.
   contact:
     email: hello@goauthentik.io

tests/e2e/docker-compose.yml

@@ -1,12 +1,12 @@
 services:
   chrome:
-    image: docker.io/selenium/standalone-chrome:136.0
+    image: docker.io/selenium/standalone-chrome:122.0
     volumes:
       - /dev/shm:/dev/shm
     network_mode: host
     restart: always
   mailpit:
-    image: docker.io/axllent/mailpit:v1.24.2
+    image: docker.io/axllent/mailpit:v1.6.5
     ports:
       - 1025:1025
       - 8025:8025

tests/e2e/test_flows_login.py

@@ -1,19 +1,12 @@
 """test default login flow"""
 
 from authentik.blueprints.tests import apply_blueprint
-from authentik.flows.models import Flow
 from tests.e2e.utils import SeleniumTestCase, retry
 
 
 class TestFlowsLogin(SeleniumTestCase):
     """test default login flow"""
 
-    def tearDown(self):
-        # Reset authentication flow's compatibility mode; we need to do this as its
-        # not specified in the blueprint
-        Flow.objects.filter(slug="default-authentication-flow").update(compatibility_mode=False)
-        return super().tearDown()
-
     @retry()
     @apply_blueprint(
         "default/flow-default-authentication-flow.yaml",
@@ -30,21 +23,3 @@ class TestFlowsLogin(SeleniumTestCase):
         self.login()
         self.wait_for_url(self.if_user_url("/library"))
         self.assert_user(self.user)
-
-    @retry()
-    @apply_blueprint(
-        "default/flow-default-authentication-flow.yaml",
-        "default/flow-default-invalidation-flow.yaml",
-    )
-    def test_login_compatibility_mode(self):
-        """test default login flow with compatibility mode enabled"""
-        Flow.objects.filter(slug="default-authentication-flow").update(compatibility_mode=True)
-        self.driver.get(
-            self.url(
-                "authentik_core:if-flow",
-                flow_slug="default-authentication-flow",
-            )
-        )
-        self.login(shadow_dom=False)
-        self.wait_for_url(self.if_user_url("/library"))
-        self.assert_user(self.user)

tests/e2e/test_flows_login_sfe.py

@@ -1,51 +0,0 @@
-"""test default login (using SFE interface) flow"""
-
-from time import sleep
-
-from selenium.webdriver.common.by import By
-from selenium.webdriver.common.keys import Keys
-
-from authentik.blueprints.tests import apply_blueprint
-from tests.e2e.utils import SeleniumTestCase, retry
-
-
-class TestFlowsLoginSFE(SeleniumTestCase):
-    """test default login flow"""
-
-    def login(self):
-        """Do entire login flow adjusted for SFE"""
-        flow_executor = self.driver.find_element(By.ID, "flow-sfe-container")
-        identification_stage = flow_executor.find_element(By.ID, "ident-form")
-
-        identification_stage.find_element(By.CSS_SELECTOR, "input[name=uid_field]").click()
-        identification_stage.find_element(By.CSS_SELECTOR, "input[name=uid_field]").send_keys(
-            self.user.username
-        )
-        identification_stage.find_element(By.CSS_SELECTOR, "input[name=uid_field]").send_keys(
-            Keys.ENTER
-        )
-
-        password_stage = flow_executor.find_element(By.ID, "password-form")
-        password_stage.find_element(By.CSS_SELECTOR, "input[name=password]").send_keys(
-            self.user.username
-        )
-        password_stage.find_element(By.CSS_SELECTOR, "input[name=password]").send_keys(Keys.ENTER)
-        sleep(1)
-
-    @retry()
-    @apply_blueprint(
-        "default/flow-default-authentication-flow.yaml",
-        "default/flow-default-invalidation-flow.yaml",
-    )
-    def test_login(self):
-        """test default login flow"""
-        self.driver.get(
-            self.url(
-                "authentik_core:if-flow",
-                flow_slug="default-authentication-flow",
-                query={"sfe": True},
-            )
-        )
-        self.login()
-        self.wait_for_url(self.if_user_url("/library"))
-        self.assert_user(self.user)

tests/e2e/utils.py

@@ -26,10 +26,8 @@ from selenium import webdriver
 from selenium.common.exceptions import NoSuchElementException, TimeoutException, WebDriverException
 from selenium.webdriver.common.by import By
 from selenium.webdriver.common.keys import Keys
-from selenium.webdriver.remote.command import Command
 from selenium.webdriver.remote.webdriver import WebDriver
 from selenium.webdriver.remote.webelement import WebElement
-from selenium.webdriver.support import expected_conditions as ec
 from selenium.webdriver.support.wait import WebDriverWait
 from structlog.stdlib import get_logger
 
@@ -38,8 +36,8 @@ from authentik.core.models import User
 from authentik.core.tests.utils import create_test_admin_user
 from authentik.lib.generators import generate_id
 
+RETRIES = int(environ.get("RETRIES", "3"))
 IS_CI = "CI" in environ
-RETRIES = int(environ.get("RETRIES", "3")) if IS_CI else 1
 
 
 def get_docker_tag() -> str:
@@ -199,12 +197,7 @@ class SeleniumTestCase(DockerTestCase, StaticLiveServerTestCase):
         super().tearDown()
         if IS_CI:
             print("::group::Browser logs")
-        # Very verbose way to get browser logs
-        # https://github.com/SeleniumHQ/selenium/pull/15641
-        # for some reason this removes the `get_log` API from Remote Webdriver
-        # and only keeps it on the local Chrome web driver, even when using
-        # a remote chrome driver...? (nvm the fact this was released as a minor version)
-        for line in self.driver.execute(Command.GET_LOG, {"type": "browser"})["value"]:
+        for line in self.driver.get_log("browser"):
             print(line["message"])
         if IS_CI:
             print("::endgroup::")
@@ -241,30 +234,10 @@ class SeleniumTestCase(DockerTestCase, StaticLiveServerTestCase):
         element = self.driver.execute_script("return arguments[0].shadowRoot", shadow_root)
         return element
 
-    def shady_dom(self) -> WebElement:
-        class wrapper:
-            def __init__(self, container: WebDriver):
-                self.container = container
-
-            def find_element(self, by: str, selector: str) -> WebElement:
-                return self.container.execute_script(
-                    "return document.__shady_native_querySelector(arguments[0])", selector
-                )
-
-        return wrapper(self.driver)
-
-    def login(self, shadow_dom=True):
-        """Do entire login flow"""
-
-        if shadow_dom:
-            flow_executor = self.get_shadow_root("ak-flow-executor")
-            identification_stage = self.get_shadow_root("ak-stage-identification", flow_executor)
-        else:
-            flow_executor = self.shady_dom()
-            identification_stage = self.shady_dom()
-
-        wait = WebDriverWait(identification_stage, self.wait_timeout)
-        wait.until(ec.presence_of_element_located((By.CSS_SELECTOR, "input[name=uidField]")))
+    def login(self):
+        """Do entire login flow and check user afterwards"""
+        flow_executor = self.get_shadow_root("ak-flow-executor")
+        identification_stage = self.get_shadow_root("ak-stage-identification", flow_executor)
 
         identification_stage.find_element(By.CSS_SELECTOR, "input[name=uidField]").click()
         identification_stage.find_element(By.CSS_SELECTOR, "input[name=uidField]").send_keys(
@@ -274,16 +247,8 @@ class SeleniumTestCase(DockerTestCase, StaticLiveServerTestCase):
             Keys.ENTER
         )
 
-        if shadow_dom:
-            flow_executor = self.get_shadow_root("ak-flow-executor")
-            password_stage = self.get_shadow_root("ak-stage-password", flow_executor)
-        else:
-            flow_executor = self.shady_dom()
-            password_stage = self.shady_dom()
-
-        wait = WebDriverWait(password_stage, self.wait_timeout)
-        wait.until(ec.presence_of_element_located((By.CSS_SELECTOR, "input[name=password]")))
-
+        flow_executor = self.get_shadow_root("ak-flow-executor")
+        password_stage = self.get_shadow_root("ak-stage-password", flow_executor)
         password_stage.find_element(By.CSS_SELECTOR, "input[name=password]").send_keys(
             self.user.username
         )

web/.storybook/authentikTheme.ts

@@ -0,0 +1,11 @@
+import { create } from "@storybook/theming/create";
+
+const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+export default create({
+    base: isDarkMode ? "dark" : "light",
+    brandTitle: "authentik Storybook",
+    brandUrl: "https://goauthentik.io",
+    brandImage: "https://goauthentik.io/img/icon_left_brand_colour.svg",
+    brandTarget: "_self",
+});

web/.storybook/main.js

@@ -1,69 +0,0 @@
-/**
- * @file Storybook configuration.
- * @import { StorybookConfig } from "@storybook/web-components-vite";
- * @import { InlineConfig, Plugin } from "vite";
- */
-import { cwd } from "process";
-import postcssLit from "rollup-plugin-postcss-lit";
-import tsconfigPaths from "vite-tsconfig-paths";
-
-const NODE_ENV = process.env.NODE_ENV || "development";
-
-const CSSImportPattern = /import [\w\$]+ from .+\.(css)/g;
-const JavaScriptFilePattern = /\.m?(js|ts|tsx)$/;
-
-/**
- * @satisfies {Plugin<never>}
- */
-const inlineCSSPlugin = {
-    name: "inline-css-plugin",
-    transform: (source, id) => {
-        if (!JavaScriptFilePattern.test(id)) return;
-
-        const code = source.replace(CSSImportPattern, (match) => {
-            return `${match}?inline`;
-        });
-
-        return {
-            code,
-        };
-    },
-};
-
-/**
- * @satisfies {StorybookConfig}
- */
-const config = {
-    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-    addons: [
-        "@storybook/addon-controls",
-        "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        "storybook-addon-mock",
-    ],
-    framework: {
-        name: "@storybook/web-components-vite",
-        options: {},
-    },
-    docs: {
-        autodocs: "tag",
-    },
-    viteFinal({ plugins = [], ...config }) {
-        /**
-         * @satisfies {InlineConfig}
-         */
-        const mergedConfig = {
-            ...config,
-            define: {
-                "process.env.NODE_ENV": JSON.stringify(NODE_ENV),
-                "process.env.CWD": JSON.stringify(cwd()),
-                "process.env.AK_API_BASE_PATH": JSON.stringify(process.env.AK_API_BASE_PATH || ""),
-            },
-            plugins: [inlineCSSPlugin, ...plugins, postcssLit(), tsconfigPaths()],
-        };
-
-        return mergedConfig;
-    },
-};
-
-export default config;

web/.storybook/main.ts

@@ -0,0 +1,81 @@
+import replace from "@rollup/plugin-replace";
+import type { StorybookConfig } from "@storybook/web-components-vite";
+import { cwd } from "process";
+import modify from "rollup-plugin-modify";
+import postcssLit from "rollup-plugin-postcss-lit";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export const isProdBuild = process.env.NODE_ENV === "production";
+export const apiBasePath = process.env.AK_API_BASE_PATH || "";
+
+const importInlinePatterns = [
+    'import AKGlobal from "(\\.\\./)*common/styles/authentik\\.css',
+    'import AKGlobal from "@goauthentik/common/styles/authentik\\.css',
+    'import PF.+ from "@patternfly/patternfly/\\S+\\.css',
+    'import ThemeDark from "@goauthentik/common/styles/theme-dark\\.css',
+    'import OneDark from "@goauthentik/common/styles/one-dark\\.css',
+    'import styles from "\\./LibraryPageImpl\\.css',
+];
+
+const importInlineRegexp = new RegExp(importInlinePatterns.map((a) => `(${a})`).join("|"));
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+    addons: [
+        "@storybook/addon-controls",
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "storybook-addon-mock",
+    ],
+    staticDirs: [
+        {
+            from: "../node_modules/@patternfly/patternfly/patternfly-base.css",
+            to: "@patternfly/patternfly/patternfly-base.css",
+        },
+        {
+            from: "../src/common/styles/authentik.css",
+            to: "@goauthentik/common/styles/authentik.css",
+        },
+        {
+            from: "../src/common/styles/theme-dark.css",
+            to: "@goauthentik/common/styles/theme-dark.css",
+        },
+        {
+            from: "../src/common/styles/one-dark.css",
+            to: "@goauthentik/common/styles/one-dark.css",
+        },
+    ],
+    framework: {
+        name: "@storybook/web-components-vite",
+        options: {},
+    },
+    docs: {
+        autodocs: "tag",
+    },
+    async viteFinal(config) {
+        return {
+            ...config,
+            plugins: [
+                modify({
+                    find: importInlineRegexp,
+                    replace: (match: RegExpMatchArray) => {
+                        return `${match}?inline`;
+                    },
+                }),
+                replace({
+                    "process.env.NODE_ENV": JSON.stringify(
+                        isProdBuild ? "production" : "development",
+                    ),
+                    "process.env.CWD": JSON.stringify(cwd()),
+                    "process.env.AK_API_BASE_PATH": JSON.stringify(apiBasePath),
+                    "preventAssignment": true,
+                }),
+                ...config.plugins,
+                postcssLit(),
+                tsconfigPaths(),
+            ],
+        };
+    },
+};
+
+export default config;

web/.storybook/manager.js

@@ -1,38 +0,0 @@
-/**
- * @file Storybook manager configuration.
- *
- * @import { ThemeVarsPartial } from "storybook/internal/theming";
- */
-import { createUIThemeEffect, resolveUITheme } from "@goauthentik/web/common/theme.ts";
-import { addons } from "@storybook/manager-api";
-import { create } from "@storybook/theming/create";
-
-/**
- * @satisfies {Partial<ThemeVarsPartial>}
- */
-const baseTheme = {
-    brandTitle: "authentik Storybook",
-    brandUrl: "https://goauthentik.io",
-    brandImage: "https://goauthentik.io/img/icon_left_brand_colour.svg",
-    brandTarget: "_self",
-};
-
-const uiTheme = resolveUITheme();
-
-addons.setConfig({
-    theme: create({
-        ...baseTheme,
-        base: uiTheme,
-    }),
-    enableShortcuts: false,
-});
-
-createUIThemeEffect((nextUITheme) => {
-    addons.setConfig({
-        theme: create({
-            ...baseTheme,
-            base: nextUITheme,
-        }),
-        enableShortcuts: false,
-    });
-});

web/.storybook/manager.ts

@@ -0,0 +1,9 @@
+// .storybook/manager.js
+import { addons } from "@storybook/manager-api";
+
+import authentikTheme from "./authentikTheme";
+
+addons.setConfig({
+    theme: authentikTheme,
+    enableShortcuts: false,
+});

web/.storybook/preview-head.html

@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="@patternfly/patternfly/patternfly-base.css" />
+<link rel="stylesheet" href="@goauthentik/common/styles/authentik.css" />
 <style>
     body {
         overflow-y: scroll;

web/.storybook/preview.js

@@ -1,32 +0,0 @@
-/// <reference types="../types/css.js" />
-/**
- * @file Storybook manager configuration.
- *
- * @import { Preview } from "@storybook/web-components";
- */
-import { applyDocumentTheme } from "@goauthentik/web/common/theme.ts";
-
-applyDocumentTheme();
-
-/**
- * @satisfies {Preview}
- */
-const preview = {
-    parameters: {
-        options: {
-            storySort: {
-                method: "alphabetical",
-            },
-        },
-        actions: { argTypesRegex: "^on[A-Z].*" },
-
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/,
-            },
-        },
-    },
-};
-
-export default preview;

web/.storybook/preview.ts

@@ -0,0 +1,30 @@
+import type { Preview } from "@storybook/web-components";
+
+import "@goauthentik/common/styles/authentik.css";
+// import "@goauthentik/common/styles/theme-dark.css";
+import "@patternfly/patternfly/components/Brand/brand.css";
+import "@patternfly/patternfly/components/Page/page.css";
+// .storybook/preview.js
+import "@patternfly/patternfly/patternfly-base.css";
+
+const preview: Preview = {
+    parameters: {
+        options: {
+            storySort: {
+                method: "alphabetical",
+            },
+        },
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        cssUserPrefs: {
+            "prefers-color-scheme": "light",
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+};
+
+export default preview;

web/package.json

@@ -19,6 +19,7 @@
         "lint:precommit": "wireit",
         "lint:types": "wireit",
         "lit-analyse": "wireit",
+        "postinstall": "bash scripts/patch-spotlight.sh",
         "precommit": "wireit",
         "prettier": "wireit",
         "prettier-check": "wireit",
@@ -36,14 +37,7 @@
     "exports": {
         "./package.json": "./package.json",
         "./paths": "./paths.js",
-        "./scripts/*": "./scripts/*.mjs",
-        "./elements/*": "./src/elements/*",
-        "./common/*": "./src/common/*",
-        "./components/*": "./src/components/*",
-        "./flow/*": "./src/flow/*",
-        "./locales/*": "./src/locales/*",
-        "./user/*": "./src/user/*",
-        "./admin/*": "./src/admin/*"
+        "./scripts/*": "./scripts/*.mjs"
     },
     "dependencies": {
         "@codemirror/lang-css": "^6.3.1",
@@ -56,7 +50,7 @@
         "@floating-ui/dom": "^1.6.11",
         "@formatjs/intl-listformat": "^7.5.7",
         "@fortawesome/fontawesome-free": "^6.6.0",
-        "@goauthentik/api": "^2025.4.1-1747332783",
+        "@goauthentik/api": "^2025.4.0-1746018955",
         "@lit/context": "^1.1.2",
         "@lit/localize": "^0.12.2",
         "@lit/reactive-element": "^2.0.4",
@@ -112,14 +106,14 @@
         "@hcaptcha/types": "^1.0.4",
         "@lit/localize-tools": "^0.8.0",
         "@rollup/plugin-replace": "^6.0.1",
-        "@storybook/addon-essentials": "^8.6.12",
-        "@storybook/addon-links": "^8.6.12",
-        "@storybook/blocks": "^8.6.12",
-        "@storybook/experimental-addon-test": "^8.6.12",
-        "@storybook/manager-api": "^8.6.12",
-        "@storybook/test": "^8.6.12",
-        "@storybook/web-components": "^8.6.12",
-        "@storybook/web-components-vite": "^8.6.12",
+        "@storybook/addon-essentials": "^8.3.4",
+        "@storybook/addon-links": "^8.3.4",
+        "@storybook/api": "^7.6.17",
+        "@storybook/blocks": "^8.3.4",
+        "@storybook/builder-vite": "^8.3.4",
+        "@storybook/manager-api": "^8.3.4",
+        "@storybook/web-components": "^8.3.4",
+        "@storybook/web-components-vite": "^8.3.4",
         "@trivago/prettier-plugin-sort-imports": "^5.2.2",
         "@types/chart.js": "^2.9.41",
         "@types/codemirror": "^5.60.15",
@@ -151,8 +145,9 @@
         "npm-run-all": "^4.1.5",
         "prettier": "^3.3.3",
         "pseudolocale": "^2.1.0",
+        "rollup-plugin-modify": "^3.0.0",
         "rollup-plugin-postcss-lit": "^2.1.0",
-        "storybook": "^8.6.12",
+        "storybook": "^8.3.4",
         "storybook-addon-mock": "^5.0.0",
         "turnstile-types": "^1.2.3",
         "typescript": "^5.6.2",

web/packages/esbuild-plugin-live-reload/client/ESBuildObserver.js

@@ -6,7 +6,7 @@
  * @import { Message as ESBuildMessage } from "esbuild";
  */
 
-const logPrefix = "authentik/dev/web: ";
+const logPrefix = "👷 [ESBuild]";
 const log = console.debug.bind(console, logPrefix);
 
 /**
@@ -76,7 +76,7 @@ export class ESBuildObserver extends EventSource {
      */
     #startListener = () => {
         this.#trackActivity();
-        log("⏰ Build started...");
+        log("⏰  Build started...");
     };
 
     #internalErrorListener = () => {
@@ -86,7 +86,7 @@ export class ESBuildObserver extends EventSource {
             clearTimeout(this.#keepAliveInterval);
 
             this.close();
-            log("⛔️ Closing connection");
+            log("⛔️  Closing connection");
         }
     };
 
@@ -126,13 +126,13 @@ export class ESBuildObserver extends EventSource {
         this.#trackActivity();
 
         if (!this.online) {
-            log("🚫 Build finished while offline.");
+            log("🚫  Build finished while offline.");
             this.deferredReload = true;
 
             return;
         }
 
-        log("🛎️ Build completed! Reloading...");
+        log("🛎️  Build completed! Reloading...");
 
         // We use an animation frame to keep the reload from happening before the
         // event loop has a chance to process the message.
@@ -189,13 +189,13 @@ export class ESBuildObserver extends EventSource {
 
             if (!this.deferredReload) return;
 
-            log("🛎️ Reloading after offline build...");
+            log("🛎️  Reloading after offline build...");
             this.deferredReload = false;
 
             window.location.reload();
         });
 
-        log("🛎️ Listening for build changes...");
+        log("🛎️  Listening for build changes...");
 
         this.#keepAliveInterval = setInterval(() => {
             const now = Date.now();
@@ -203,7 +203,7 @@ export class ESBuildObserver extends EventSource {
             if (now - this.lastUpdatedAt < 10_000) return;
 
             this.alive = false;
-            log("👋 Waiting for build to start...");
+            log("👋  Waiting for build to start...");
         }, 15_000);
     }
 

web/packages/sfe/src/index.ts

@@ -47,16 +47,7 @@ class SimpleFlowExecutor {
         return `${ak().api.base}api/v3/flows/executor/${this.flowSlug}/?query=${encodeURIComponent(window.location.search.substring(1))}`;
     }
 
-    loading() {
-        this.container.innerHTML = `<div class="d-flex justify-content-center">
-            <div class="spinner-border spinner-border-md" role="status">
-                <span class="sr-only">Loading...</span>
-            </div>
-        </div>`;
-    }
-
     start() {
-        this.loading();
         $.ajax({
             type: "GET",
             url: this.apiURL,
@@ -210,9 +201,6 @@ class PasswordStage extends Stage<PasswordChallenge> {
             <form id="password-form">
                 <img class="mb-4 brand-icon" src="${ak().brand.branding_logo}" alt="">
                 <h1 class="h3 mb-3 fw-normal text-center">${this.challenge?.flowInfo?.title}</h1>
-                <div class="form-label-group my-3">
-                    <input type="text" readonly class="form-control-plaintext" value="Welcome, ${this.challenge?.pendingUser}.">
-                </div>
                 <div class="form-label-group my-3 has-validation">
                     <input type="password" autofocus class="form-control ${this.error("password").length > 0 ? IS_INVALID : ""}" name="password" placeholder="Password">
                     ${this.renderInputError("password")}

web/scripts/patch-spotlight.sh

@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+
+TARGET="./node_modules/@spotlightjs/overlay/dist/index-"[0-9a-f]*.js
+
+if [[ $(grep -L "QX2" "$TARGET" > /dev/null 2> /dev/null) ]]; then
+    patch --forward -V none --no-backup-if-mismatch -p0 $TARGET <<EOF
+
+TARGET=$(find "./node_modules/@spotlightjs/overlay/dist/" -name "index-[0-9a-f]*.js");
+
+if ! grep -GL 'QX2 = ' "$TARGET" > /dev/null ; then
+patch --forward --no-backup-if-mismatch -p0 "$TARGET" <<EOF
+>>>>>>> main
+--- a/index-5682ce90.js	2024-06-13 16:19:28
++++ b/index-5682ce90.js	2024-06-13 16:20:23
+@@ -4958,11 +4958,10 @@
+     }
+   );
+ }
+-const q2 = w.lazy(() => import("./main-3257b7fc.js").then((n) => n.m));
++const q2 = w.lazy(() => import("./main-3257b7fc.js").then((n) => n.m)), QX2 = () => {};
+ function Gp({
+   data: n,
+-  onUpdateData: a = () => {
+-  },
++  onUpdateData: a = QX2,
+   editingEnabled: s = !1,
+   clipboardEnabled: o = !1,
+   displayDataTypes: c = !1,
+EOF
+
+else
+    echo "spotlight overlay.js patch already applied"
+fi

web/src/admin/AdminInterface/index.entrypoint.ts

@@ -4,13 +4,13 @@ import { ROUTES } from "@goauthentik/admin/Routes";
 import {
     EVENT_API_DRAWER_TOGGLE,
     EVENT_NOTIFICATION_DRAWER_TOGGLE,
+    EVENT_SIDEBAR_TOGGLE,
 } from "@goauthentik/common/constants";
 import { configureSentry } from "@goauthentik/common/sentry";
 import { me } from "@goauthentik/common/users";
 import { WebsocketClient } from "@goauthentik/common/ws";
 import { AuthenticatedInterface } from "@goauthentik/elements/Interface";
 import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider.js";
-import { SidebarToggleEventDetail } from "@goauthentik/elements/PageHeader";
 import "@goauthentik/elements/ak-locale-context";
 import "@goauthentik/elements/banner/EnterpriseStatusBanner";
 import "@goauthentik/elements/banner/EnterpriseStatusBanner";
@@ -26,7 +26,7 @@ import "@goauthentik/elements/sidebar/Sidebar";
 import "@goauthentik/elements/sidebar/SidebarItem";
 
 import { CSSResult, TemplateResult, css, html, nothing } from "lit";
-import { customElement, eventOptions, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -52,33 +52,28 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
     //#region Properties
 
     @property({ type: Boolean })
-    public notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
+    notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
 
     @property({ type: Boolean })
-    public apiDrawerOpen = getURLParam("apiDrawerOpen", false);
+    apiDrawerOpen = getURLParam("apiDrawerOpen", false);
 
-    protected readonly ws: WebsocketClient;
+    ws: WebsocketClient;
 
-    @property({
-        type: Object,
-        attribute: false,
-        reflect: false,
-    })
-    public user?: SessionUser;
+    @state()
+    user?: SessionUser;
 
     @query("ak-about-modal")
-    public aboutModal?: AboutModal;
+    aboutModal?: AboutModal;
 
     @property({ type: Boolean, reflect: true })
     public sidebarOpen: boolean;
 
-    @eventOptions({ passive: true })
-    protected sidebarListener(event: CustomEvent<SidebarToggleEventDetail>) {
-        this.sidebarOpen = !!event.detail.open;
-    }
+    #toggleSidebar = () => {
+        this.sidebarOpen = !this.sidebarOpen;
+    };
 
     #sidebarMatcher: MediaQueryList;
-    #sidebarMediaQueryListener = (event: MediaQueryListEvent) => {
+    #sidebarListener = (event: MediaQueryListEvent) => {
         this.sidebarOpen = event.matches;
     };
 
@@ -86,57 +81,59 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
 
     //#region Styles
 
-    static styles: CSSResult[] = [
-        PFBase,
-        PFPage,
-        PFButton,
-        PFDrawer,
-        PFNav,
-        css`
-            .pf-c-page__main,
-            .pf-c-drawer__content,
-            .pf-c-page__drawer {
-                z-index: auto !important;
-                background-color: transparent;
-            }
-
-            .display-none {
-                display: none;
-            }
-
-            .pf-c-page {
-                background-color: var(--pf-c-page--BackgroundColor) !important;
-            }
-
-            :host([theme="dark"]) {
-                /* Global page background colour */
-                .pf-c-page {
-                    --pf-c-page--BackgroundColor: var(--ak-dark-background);
+    static get styles(): CSSResult[] {
+        return [
+            PFBase,
+            PFPage,
+            PFButton,
+            PFDrawer,
+            PFNav,
+            css`
+                .pf-c-page__main,
+                .pf-c-drawer__content,
+                .pf-c-page__drawer {
+                    z-index: auto !important;
+                    background-color: transparent;
                 }
-            }
 
-            ak-page-navbar {
-                grid-area: header;
-            }
+                .display-none {
+                    display: none;
+                }
 
-            .ak-sidebar {
-                grid-area: nav;
-            }
+                .pf-c-page {
+                    background-color: var(--pf-c-page--BackgroundColor) !important;
+                }
 
-            .pf-c-drawer__panel {
-                z-index: var(--pf-global--ZIndex--xl);
-            }
-        `,
-    ];
+                :host([theme="dark"]) {
+                    /* Global page background colour */
+                    .pf-c-page {
+                        --pf-c-page--BackgroundColor: var(--ak-dark-background);
+                    }
+                }
+
+                ak-page-navbar {
+                    grid-area: header;
+                }
+
+                .ak-sidebar {
+                    grid-area: nav;
+                }
+
+                .pf-c-drawer__panel {
+                    z-index: var(--pf-global--ZIndex--xl);
+                }
+            `,
+        ];
+    }
 
     //#endregion
 
     //#region Lifecycle
 
     constructor() {
-        configureSentry(true);
         super();
         this.ws = new WebsocketClient();
+
         this.#sidebarMatcher = window.matchMedia("(min-width: 1200px)");
         this.sidebarOpen = this.#sidebarMatcher.matches;
     }
@@ -144,6 +141,8 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
     public connectedCallback() {
         super.connectedCallback();
 
+        window.addEventListener(EVENT_SIDEBAR_TOGGLE, this.#toggleSidebar);
+
         window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
             this.notificationDrawerOpen = !this.notificationDrawerOpen;
             updateURLParams({
@@ -158,17 +157,17 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
             });
         });
 
-        this.#sidebarMatcher.addEventListener("change", this.#sidebarMediaQueryListener, {
-            passive: true,
-        });
+        this.#sidebarMatcher.addEventListener("change", this.#sidebarListener);
     }
 
     public disconnectedCallback(): void {
         super.disconnectedCallback();
-        this.#sidebarMatcher.removeEventListener("change", this.#sidebarMediaQueryListener);
+        window.removeEventListener(EVENT_SIDEBAR_TOGGLE, this.#toggleSidebar);
+        this.#sidebarMatcher.removeEventListener("change", this.#sidebarListener);
     }
 
     async firstUpdated(): Promise<void> {
+        configureSentry(true);
         this.user = await me();
 
         const canAccessAdmin =
@@ -198,7 +197,7 @@ export class AdminInterface extends WithLicenseSummary(AuthenticatedInterface) {
 
         return html` <ak-locale-context>
             <div class="pf-c-page">
-                <ak-page-navbar ?open=${this.sidebarOpen} @sidebar-toggle=${this.sidebarListener}>
+                <ak-page-navbar>
                     <ak-version-banner></ak-version-banner>
                     <ak-enterprise-status interface="admin"></ak-enterprise-status>
                 </ak-page-navbar>

web/src/admin/applications/ApplicationViewPage.ts

@@ -113,7 +113,8 @@ export class ApplicationViewPage extends AKElement {
 
     renderApp(): TemplateResult {
         if (!this.application) {
-            return html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`;
+            return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
+            </ak-empty-state>`;
         }
         return html`<ak-tabs>
             ${this.missingOutpost

web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts

@@ -21,7 +21,7 @@ import { type LocalTypeCreate } from "./ProviderChoices.js";
 
 @customElement("ak-application-wizard-provider-choice-step")
 export class ApplicationWizardProviderChoiceStep extends WithLicenseSummary(ApplicationWizardStep) {
-    label = msg("Choose a Provider");
+    label = msg("Choose A Provider");
 
     @state()
     failureMessage = "";

web/src/admin/outposts/OutpostForm.ts

@@ -45,9 +45,9 @@ const providerListArgs = (page: number, search = "") => ({
 });
 
 const dualSelectPairMaker = (item: ProviderBase): DualSelectPair => {
-    const label =
-        item.assignedBackchannelApplicationName || item.assignedApplicationName || item.name;
-
+    const label = item.assignedBackchannelApplicationName
+        ? item.assignedBackchannelApplicationName
+        : item.assignedApplicationName;
     return [
         `${item.pk}`,
         html`<div class="selection-main">${label}</div>

web/src/admin/policies/geoip/GeoIPPolicyForm.ts

@@ -15,7 +15,7 @@ import { DetailedCountry, GeoIPPolicy, PoliciesApi } from "@goauthentik/api";
 import { countryCache } from "./CountryCache";
 
 function countryToPair(country: DetailedCountry): DualSelectPair {
-    return [country.code, country.name, country.name];
+    return [country.code, country.name];
 }
 
 @customElement("ak-policy-geoip-form")
@@ -210,16 +210,17 @@ export class GeoIPPolicyForm extends BasePolicyForm<GeoIPPolicy> {
                                     .getCountries()
                                     .then((results) => {
                                         if (!search) return results;
-
                                         return results.filter((result) =>
                                             result.name
                                                 .toLowerCase()
                                                 .includes(search.toLowerCase()),
                                         );
                                     })
-                                    .then((results) => ({
-                                        options: results.map(countryToPair),
-                                    }));
+                                    .then((results) => {
+                                        return {
+                                            options: results.map(countryToPair),
+                                        };
+                                    });
                             }}
                             .selected=${(this.instance?.countriesObj ?? []).map(countryToPair)}
                             available-label="${msg("Available Countries")}"

web/src/admin/providers/ProviderViewPage.ts

@@ -42,7 +42,7 @@ export class ProviderViewPage extends AKElement {
 
     renderProvider(): TemplateResult {
         if (!this.provider) {
-            return html`<ak-empty-state loading ?fullHeight=${true}></ak-empty-state>`;
+            return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
         }
         switch (this.provider?.component) {
             case "ak-provider-saml-form":

web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts

@@ -432,7 +432,7 @@ export class OAuth2ProviderViewPage extends AKElement {
                 <div class="pf-c-card__body">
                     ${this.preview
                         ? html`<pre>${JSON.stringify(this.preview?.preview, null, 4)}</pre>`
-                        : html` <ak-empty-state loading></ak-empty-state> `}
+                        : html` <ak-empty-state ?loading=${true}></ak-empty-state> `}
                 </div>
             </div>
         </div>`;

web/src/admin/providers/saml/SAMLProviderViewPage.ts

@@ -502,7 +502,7 @@ export class SAMLProviderViewPage extends AKElement {
 
     renderTabPreview(): TemplateResult {
         if (!this.preview) {
-            return html`<ak-empty-state loading></ak-empty-state>`;
+            return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
         }
         return html` <div
             class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"

web/src/admin/sources/SourceViewPage.ts

@@ -34,7 +34,7 @@ export class SourceViewPage extends AKElement {
 
     renderSource(): TemplateResult {
         if (!this.source) {
-            return html`<ak-empty-state loading ?fullHeight=${true}></ak-empty-state>`;
+            return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
         }
         switch (this.source?.component) {
             case "ak-source-kerberos-form":

web/src/common/api/config.ts

@@ -1,14 +1,18 @@
 import {
+    CSRFHeaderName,
     CSRFMiddleware,
     EventMiddleware,
     LoggingMiddleware,
-} from "@goauthentik/common/api/middleware.js";
-import { EVENT_LOCALE_REQUEST, VERSION } from "@goauthentik/common/constants.js";
-import { globalAK } from "@goauthentik/common/global.js";
-import { SentryMiddleware } from "@goauthentik/common/sentry";
+} from "@goauthentik/common/api/middleware";
+import { EVENT_LOCALE_REQUEST, VERSION } from "@goauthentik/common/constants";
+import { globalAK } from "@goauthentik/common/global";
 
 import { Config, Configuration, CoreApi, CurrentBrand, RootApi } from "@goauthentik/api";
 
+// HACK: Workaround for ESBuild not being able to hoist import statement across entrypoints.
+// This can be removed after ESBuild uses a single build context for all entrypoints.
+export { CSRFHeaderName };
+
 let globalConfigPromise: Promise<Config> | undefined = Promise.resolve(globalAK().config);
 export function config(): Promise<Config> {
     if (!globalConfigPromise) {
@@ -62,13 +66,21 @@ export function brand(): Promise<CurrentBrand> {
     return globalBrandPromise;
 }
 
+export function getMetaContent(key: string): string {
+    const metaEl = document.querySelector<HTMLMetaElement>(`meta[name=${key}]`);
+    if (!metaEl) return "";
+    return metaEl.content;
+}
+
 export const DEFAULT_CONFIG = new Configuration({
     basePath: `${globalAK().api.base}api/v3`,
+    headers: {
+        "sentry-trace": getMetaContent("sentry-trace"),
+    },
     middleware: [
         new CSRFMiddleware(),
         new EventMiddleware(),
         new LoggingMiddleware(globalAK().brand),
-        new SentryMiddleware(),
     ],
 });
 

web/src/common/api/middleware.ts

@@ -1,5 +1,5 @@
-import { EVENT_REQUEST_POST } from "@goauthentik/common/constants.js";
-import { getCookie } from "@goauthentik/common/utils.js";
+import { EVENT_REQUEST_POST } from "@goauthentik/common/constants";
+import { getCookie } from "@goauthentik/common/utils";
 
 import {
     CurrentBrand,

web/src/common/constants.ts

@@ -3,7 +3,7 @@ export const SUCCESS_CLASS = "pf-m-success";
 export const ERROR_CLASS = "pf-m-danger";
 export const PROGRESS_CLASS = "pf-m-in-progress";
 export const CURRENT_CLASS = "pf-m-current";
-export const VERSION = "2025.4.1";
+export const VERSION = "2025.4.0";
 export const TITLE_DEFAULT = "authentik";
 export const ROUTE_SEPARATOR = ";";
 
@@ -11,6 +11,7 @@ export const EVENT_REFRESH = "ak-refresh";
 export const EVENT_NOTIFICATION_DRAWER_TOGGLE = "ak-notification-toggle";
 export const EVENT_API_DRAWER_TOGGLE = "ak-api-drawer-toggle";
 export const EVENT_FLOW_INSPECTOR_TOGGLE = "ak-flow-inspector-toggle";
+export const EVENT_SIDEBAR_TOGGLE = "ak-sidebar-toggle";
 export const EVENT_WS_MESSAGE = "ak-ws-message";
 export const EVENT_FLOW_ADVANCE = "ak-flow-advance";
 export const EVENT_LOCALE_CHANGE = "ak-locale-change";

web/src/common/sentry.ts

@@ -1,5 +1,5 @@
+import { config } from "@goauthentik/common/api/config";
 import { VERSION } from "@goauthentik/common/constants";
-import { globalAK } from "@goauthentik/common/global";
 import { me } from "@goauthentik/common/users";
 import { readInterfaceRouteParam } from "@goauthentik/elements/router/utils";
 import {
@@ -10,16 +10,8 @@ import {
     setTag,
     setUser,
 } from "@sentry/browser";
-import { getTraceData } from "@sentry/core";
-import * as Spotlight from "@spotlightjs/spotlight";
 
-import {
-    CapabilitiesEnum,
-    FetchParams,
-    Middleware,
-    RequestContext,
-    ResponseError,
-} from "@goauthentik/api";
+import { CapabilitiesEnum, Config, ResponseError } from "@goauthentik/api";
 
 /**
  * A generic error that can be thrown without triggering Sentry's reporting.
@@ -29,94 +21,69 @@ export class SentryIgnoredError extends Error {}
 export const TAG_SENTRY_COMPONENT = "authentik.component";
 export const TAG_SENTRY_CAPABILITIES = "authentik.capabilities";
 
-let _sentryConfigured = false;
+export async function configureSentry(canDoPpi = false): Promise<Config> {
+    const cfg = await config();
 
-export function configureSentry(canDoPpi = false) {
-    const cfg = globalAK().config;
-    const debug = cfg.capabilities.includes(CapabilitiesEnum.CanDebug);
-    if (!cfg.errorReporting.enabled && !debug) {
-        return cfg;
-    }
-    init({
-        dsn: cfg.errorReporting.sentryDsn,
-        ignoreErrors: [
-            /network/gi,
-            /fetch/gi,
-            /module/gi,
-            // Error on edge on ios,
-            // https://stackoverflow.com/questions/69261499/what-is-instantsearchsdkjsbridgeclearhighlight
-            /instantSearchSDKJSBridgeClearHighlight/gi,
-            // Seems to be an issue in Safari and Firefox
-            /MutationObserver.observe/gi,
-            /NS_ERROR_FAILURE/gi,
-        ],
-        release: `authentik@${VERSION}`,
-        integrations: [
-            browserTracingIntegration({
-                // https://docs.sentry.io/platforms/javascript/tracing/instrumentation/automatic-instrumentation/#custom-routing
-                instrumentNavigation: false,
-                instrumentPageLoad: false,
-                traceFetch: false,
-            }),
-        ],
-        tracePropagationTargets: [window.location.origin],
-        tracesSampleRate: debug ? 1.0 : cfg.errorReporting.tracesSampleRate,
-        environment: cfg.errorReporting.environment,
-        beforeSend: (
-            event: ErrorEvent,
-            hint: EventHint,
-        ): ErrorEvent | PromiseLike<ErrorEvent | null> | null => {
-            if (!hint) {
-                return event;
-            }
-            if (hint.originalException instanceof SentryIgnoredError) {
-                return null;
-            }
-            if (
-                hint.originalException instanceof ResponseError ||
-                hint.originalException instanceof DOMException
-            ) {
-                return null;
-            }
-            return event;
-        },
-    });
-    setTag(TAG_SENTRY_CAPABILITIES, cfg.capabilities.join(","));
-    if (window.location.pathname.includes("if/")) {
-        setTag(TAG_SENTRY_COMPONENT, `web/${readInterfaceRouteParam()}`);
-    }
-    if (debug) {
-        Spotlight.init({
-            injectImmediately: true,
+    if (cfg.errorReporting.enabled) {
+        init({
+            dsn: cfg.errorReporting.sentryDsn,
+            ignoreErrors: [
+                /network/gi,
+                /fetch/gi,
+                /module/gi,
+                // Error on edge on ios,
+                // https://stackoverflow.com/questions/69261499/what-is-instantsearchsdkjsbridgeclearhighlight
+                /instantSearchSDKJSBridgeClearHighlight/gi,
+                // Seems to be an issue in Safari and Firefox
+                /MutationObserver.observe/gi,
+                /NS_ERROR_FAILURE/gi,
+            ],
+            release: `authentik@${VERSION}`,
             integrations: [
-                Spotlight.sentry({
-                    injectIntoSDK: true,
+                browserTracingIntegration({
+                    shouldCreateSpanForRequest: (url: string) => {
+                        return url.startsWith(window.location.host);
+                    },
                 }),
             ],
+            tracesSampleRate: cfg.errorReporting.tracesSampleRate,
+            environment: cfg.errorReporting.environment,
+            beforeSend: (
+                event: ErrorEvent,
+                hint: EventHint,
+            ): ErrorEvent | PromiseLike<ErrorEvent | null> | null => {
+                if (!hint) {
+                    return event;
+                }
+                if (hint.originalException instanceof SentryIgnoredError) {
+                    return null;
+                }
+                if (
+                    hint.originalException instanceof ResponseError ||
+                    hint.originalException instanceof DOMException
+                ) {
+                    return null;
+                }
+                return event;
+            },
         });
-        console.debug("authentik/config: Enabled Sentry Spotlight");
-    }
-    if (cfg.errorReporting.sendPii && canDoPpi) {
-        me().then((user) => {
-            setUser({ email: user.user.email });
-            console.debug("authentik/config: Sentry with PII enabled.");
-        });
-    } else {
-        console.debug("authentik/config: Sentry enabled.");
-    }
-    _sentryConfigured = true;
-}
-
-export class SentryMiddleware implements Middleware {
-    pre?(context: RequestContext): Promise<FetchParams | void> {
-        if (!_sentryConfigured) {
-            return Promise.resolve(context);
+        setTag(TAG_SENTRY_CAPABILITIES, cfg.capabilities.join(","));
+        if (window.location.pathname.includes("if/")) {
+            setTag(TAG_SENTRY_COMPONENT, `web/${readInterfaceRouteParam()}`);
+        }
+        if (cfg.capabilities.includes(CapabilitiesEnum.CanDebug)) {
+            const Spotlight = await import("@spotlightjs/spotlight");
+
+            Spotlight.init({ injectImmediately: true });
+        }
+        if (cfg.errorReporting.sendPii && canDoPpi) {
+            me().then((user) => {
+                setUser({ email: user.user.email });
+                console.debug("authentik/config: Sentry with PII enabled.");
+            });
+        } else {
+            console.debug("authentik/config: Sentry enabled.");
         }
-        const traceData = getTraceData();
-        // @ts-ignore
-        context.init.headers["baggage"] = traceData["baggage"];
-        // @ts-ignore
-        context.init.headers["sentry-trace"] = traceData["sentry-trace"];
-        return Promise.resolve(context);
     }
+    return cfg;
 }

web/src/common/styles/authentik.css

@@ -1,12 +1,3 @@
-/**
- * @file authentik base UI theme.
- */
-
-/* Defined to better identify the base theme when debugging constructed stylesheets. */
-.__AK_UI_BASE__ {
-    --__AK_UI_BASE__: 1;
-}
-
 /* #region Global */
 
 :root {

web/src/common/styles/one-dark.css

@@ -1,48 +1,42 @@
-/**
- * @file Atom One Dark syntax highlighting theme.
- *
- * @see https://github.com/atom/one-dark-syntax
- */
+/*
 
-/* Defined to better identify the One Dark theme when debugging constructed stylesheets. */
-.__HIGHLIGHT_THEME_ONE_DARK__ {
-    --__HIGHLIGHT_THEME_ONE_DARK__: 1;
-}
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
 
-:root {
-    --one-dark-base: #282c34;
-    --one-dark-mono-1: #abb2bf;
-    --one-dark-mono-2: #818896;
-    --one-dark-mono-3: #5c6370;
-    --one-dark-hue-1: #56b6c2;
-    --one-dark-hue-2: #61aeee;
-    --one-dark-hue-3: #c678dd;
-    --one-dark-hue-4: #98c379;
-    --one-dark-hue-5: #e06c75;
-    --one-dark-hue-5-2: #be5046;
-    --one-dark-hue-6: #d19a66;
-    --one-dark-hue-6-2: #e6c07b;
-}
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
 
 .hljs {
-    color: var(--one-dark-mono-1);
-    background: var(--one-dark-base);
+    color: #abb2bf;
+    background: #282c34;
 }
 
 pre:has(.hljs) {
-    background: var(--one-dark-base);
+    background: #282c34;
 }
 
 .hljs-comment,
 .hljs-quote {
-    color: var(--one-dark-mono-3);
+    color: #5c6370;
     font-style: italic;
 }
 
 .hljs-doctag,
 .hljs-keyword,
 .hljs-formula {
-    color: var(--one-dark-hue-3);
+    color: #c678dd;
 }
 
 .hljs-section,
@@ -50,11 +44,11 @@ pre:has(.hljs) {
 .hljs-selector-tag,
 .hljs-deletion,
 .hljs-subst {
-    color: var(--one-dark-hue-5);
+    color: #e06c75;
 }
 
 .hljs-literal {
-    color: var(--one-dark-hue-1);
+    color: #56b6c2;
 }
 
 .hljs-string,
@@ -62,7 +56,7 @@ pre:has(.hljs) {
 .hljs-addition,
 .hljs-attribute,
 .hljs-meta .hljs-string {
-    color: var(--one-dark-hue-4);
+    color: #98c379;
 }
 
 .hljs-attr,
@@ -73,7 +67,7 @@ pre:has(.hljs) {
 .hljs-selector-attr,
 .hljs-selector-pseudo,
 .hljs-number {
-    color: var(--one-dark-hue-6);
+    color: #d19a66;
 }
 
 .hljs-symbol,
@@ -82,13 +76,13 @@ pre:has(.hljs) {
 .hljs-meta,
 .hljs-selector-id,
 .hljs-title {
-    color: var(--one-dark-hue-2);
+    color: #61aeee;
 }
 
 .hljs-built_in,
 .hljs-title.class_,
 .hljs-class .hljs-title {
-    color: var(--one-dark-hue-6-2);
+    color: #e6c07b;
 }
 
 .hljs-emphasis {

web/src/common/styles/theme-dark.css

@@ -1,12 +1,3 @@
-/**
- * @file authentik dark UI theme.
- */
-
-/* Defined to better identify the dark theme when debugging constructed stylesheets. */
-.__AK_UI_DARK__ {
-    --__AK_UI_DARK__: 1;
-}
-
 /* #region Global */
 
 :root {
@@ -14,6 +5,9 @@
     --ak-global--Color--100: var(--ak-dark-foreground) !important;
     --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
     --pf-global--BorderColor--100: var(--ak-dark-background-lighter) !important;
+    --ak-mermaid-message-text: var(--ak-dark-foreground) !important;
+    --ak-mermaid-box-background-color: var(--ak-dark-background-lighter) !important;
+    --ak-table-stripe-background: var(--pf-global--BackgroundColor--dark-200);
 }
 
 body {
@@ -262,13 +256,8 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     color: var(--ak-dark-background-lighter);
 }
 
-.pf-c-button.pf-m-plain {
-    --pf-c-button--m-plain--focus--Color: var(--pf-global--Color--200);
-    --pf-c-button--m-plain--hover--Color: var(--ak-dark-foreground);
-
-    &:focus:hover {
-        color: var(--pf-c-button--m-plain--hover--Color);
-    }
+.pf-c-button.pf-m-plain:hover {
+    color: var(--ak-dark-foreground);
 }
 
 .pf-c-button.pf-m-control {

web/src/common/stylesheets.ts

@@ -1,27 +1,17 @@
 /**
  * @file Stylesheet utilities.
  */
-import { CSSResultOrNative, ReactiveElement, adoptStyles as adoptStyleSheetsShim, css } from "lit";
+import { CSSResult, CSSResultOrNative, ReactiveElement, css } from "lit";
 
 /**
- * Element-like objects containing adoptable stylesheets.
- *
- * Note that while these all possess the `adoptedStyleSheets` property,
- * browser differences and polyfills may make them not actually adoptable.
- *
- * This type exists to normalize the different ways of accessing the property.
+ * Elements containing adoptable stylesheets.
  */
-export type StyleRoot =
-    | Document
-    | ShadowRoot
-    | DocumentFragment
-    | HTMLElement
-    | DocumentOrShadowRoot;
+export type StyleSheetParent = Pick<DocumentOrShadowRoot, "adoptedStyleSheets">;
 
 /**
  * Type-predicate to determine if a given object has adoptable stylesheets.
  */
-export function isStyleRoot(input: StyleRoot): input is ShadowRoot {
+export function isAdoptableStyleSheetParent(input: unknown): input is StyleSheetParent {
     // Sanity check - Does the input have the right shape?
 
     if (!input || typeof input !== "object") return false;
@@ -35,12 +25,39 @@ export function isStyleRoot(input: StyleRoot): input is ShadowRoot {
     // All we care about is that it's shaped like an array.
     if (!("length" in input.adoptedStyleSheets)) return false;
 
-    return typeof input.adoptedStyleSheets.length === "number";
+    if (typeof input.adoptedStyleSheets.length !== "number") return false;
+
+    // Finally is the array mutable?
+    return "push" in input.adoptedStyleSheets;
 }
 
 /**
- * Create a lazy-loaded `CSSResult` compatible with Lit's
- * element lifecycle.
+ * Assert that the given input can adopt stylesheets.
+ */
+export function assertAdoptableStyleSheetParent<T>(
+    input: T,
+): asserts input is T & StyleSheetParent {
+    if (isAdoptableStyleSheetParent(input)) return;
+
+    console.debug("Given input missing `adoptedStyleSheets`", input);
+
+    throw new TypeError("Assertion failed: `adoptedStyleSheets` missing in given input");
+}
+
+export function resolveStyleSheetParent<T extends HTMLElement | DocumentFragment | Document>(
+    renderRoot: T,
+) {
+    const styleRoot = "ShadyDOM" in window ? document : renderRoot;
+
+    assertAdoptableStyleSheetParent(styleRoot);
+
+    return styleRoot;
+}
+
+export type StyleSheetInit = string | CSSResult | CSSStyleSheet;
+
+/**
+ * Given a source of CSS, create a `CSSStyleSheet`.
  *
  * @throw {@linkcode TypeError} if the input cannot be converted to a `CSSStyleSheet`
  *
@@ -51,12 +68,8 @@ export function isStyleRoot(input: StyleRoot): input is ShadowRoot {
  *
  * It works well when Storybook is running in `dev`, but in `build` it fails.
  * Storied components will have to map their textual CSS imports.
- *
- * @see {@linkcode createStyleSheetUnsafe} to create a `CSSStyleSheet` from the given input.
  */
-export function createCSSResult(input: string | CSSModule | CSSResultOrNative): CSSResultOrNative {
-    if (typeof input !== "string") return input;
-
+export function createStyleSheet(input: string): CSSResult {
     const inputTemplate = [input] as unknown as TemplateStringsArray;
 
     const result = css(inputTemplate, []);
@@ -65,91 +78,74 @@ export function createCSSResult(input: string | CSSModule | CSSResultOrNative):
 }
 
 /**
- * Create a `CSSStyleSheet` from the given input, if it is not already a `CSSStyleSheet`.
+ * Given a source of CSS, create a `CSSStyleSheet`.
  *
- * @throw {@linkcode TypeError} if the input cannot be converted to a `CSSStyleSheet`
- *
- * @see {@linkcode createCSSResult} for the lazy-loaded `CSSResult` normalization.
+ * @see {@linkcode createStyleSheet}
  */
-export function createStyleSheetUnsafe(
-    input: string | CSSModule | CSSResultOrNative,
-): CSSStyleSheet {
-    const result = typeof input === "string" ? createCSSResult(input) : input;
+export function normalizeCSSSource(css: string): CSSStyleSheet;
+export function normalizeCSSSource(styleSheet: CSSStyleSheet): CSSStyleSheet;
+export function normalizeCSSSource(cssResult: CSSResult): CSSResult;
+export function normalizeCSSSource(input: StyleSheetInit): CSSResultOrNative;
+export function normalizeCSSSource(input: StyleSheetInit): CSSResultOrNative {
+    if (typeof input === "string") return createStyleSheet(input);
 
-    if (result instanceof CSSStyleSheet) return result;
-
-    if (result.styleSheet) return result.styleSheet;
-
-    const styleSheet = new CSSStyleSheet();
-
-    styleSheet.replaceSync(result.cssText);
-
-    return styleSheet;
+    return input;
 }
 
-export type StyleSheetsAction =
-    | Iterable<CSSStyleSheet>
-    | ((currentStyleSheets: CSSStyleSheet[]) => Iterable<CSSStyleSheet>);
-
 /**
- * Set the adopted stylesheets of a given style parent.
- *
- * ```ts
- * setAdoptedStyleSheets(document.body, (currentStyleSheets) => [
- *     ...currentStyleSheets,
- *     myStyleSheet,
- * ]);
- * ```
- *
- * @remarks
- * Replacing `adoptedStyleSheets` more than once in the same frame may result in
- * the `currentStyleSheets` parameter being out of sync with the actual sheets.
- *
- * A style root's `adoptedStyleSheets` is a proxy object that only updates when
- * DOM is repainted. We can't easily cache the previous entries since the style root
- * may polyfilled via ShadyDOM.
- *
- * Short of using {@linkcode requestAnimationFrame} to sequence the adoption,
- * and a visibility toggle to avoid a flash of styles between renders,
- * we can't reliably cache the previous entries.
- *
- * In the meantime, we should try to apply all the sheets in a single frame.
+ * Create a `CSSStyleSheet` from the given input.
  */
-export function setAdoptedStyleSheets(styleRoot: StyleRoot, styleSheets: StyleSheetsAction): void {
-    let changed = false;
+export function createStyleSheetUnsafe(input: StyleSheetInit): CSSStyleSheet {
+    const result = normalizeCSSSource(input);
+    if (result instanceof CSSStyleSheet) return result;
 
-    const currentAdoptedStyleSheets = isStyleRoot(styleRoot)
-        ? [...styleRoot.adoptedStyleSheets]
-        : [];
+    if (!result.styleSheet) {
+        console.debug(
+            "authentik/common/stylesheets: CSSResult missing styleSheet, returning empty",
+            { result, input },
+        );
 
-    const result =
-        typeof styleSheets === "function" ? styleSheets(currentAdoptedStyleSheets) : styleSheets;
-
-    const nextAdoptedStyleSheets: CSSStyleSheet[] = [];
-
-    for (const [idx, styleSheet] of Array.from(result).entries()) {
-        const previousStyleSheet = currentAdoptedStyleSheets[idx];
-
-        changed ||= previousStyleSheet !== styleSheet;
-
-        if (nextAdoptedStyleSheets.includes(styleSheet)) continue;
-
-        nextAdoptedStyleSheets.push(styleSheet);
+        throw new TypeError("Expected a CSSStyleSheet");
     }
 
-    changed ||= nextAdoptedStyleSheets.length !== currentAdoptedStyleSheets.length;
-
-    if (!changed) return;
-
-    if (styleRoot === document) {
-        document.adoptedStyleSheets = nextAdoptedStyleSheets;
-        return;
-    }
-
-    adoptStyleSheetsShim(styleRoot as unknown as ShadowRoot, nextAdoptedStyleSheets);
+    return result.styleSheet;
 }
 
-//#region Debugging
+/**
+ * Append stylesheet(s) to the given roots.
+ *
+ * @see {@linkcode removeStyleSheet} to remove a stylesheet from a given roots.
+ */
+export function appendStyleSheet(
+    styleParent: StyleSheetParent,
+    ...insertions: CSSStyleSheet[]
+): void {
+    insertions = Array.isArray(insertions) ? insertions : [insertions];
+
+    for (const styleSheetInsertion of insertions) {
+        if (styleParent.adoptedStyleSheets.includes(styleSheetInsertion)) return;
+
+        styleParent.adoptedStyleSheets = [...styleParent.adoptedStyleSheets, styleSheetInsertion];
+    }
+}
+
+/**
+ * Remove a stylesheet from the given roots, matching by referential equality.
+ *
+ * @see {@linkcode appendStyleSheet} to append a stylesheet to a given roots.
+ */
+export function removeStyleSheet(
+    styleParent: StyleSheetParent,
+    ...removals: CSSStyleSheet[]
+): void {
+    const nextAdoptedStyleSheets = styleParent.adoptedStyleSheets.filter(
+        (styleSheet) => !removals.includes(styleSheet),
+    );
+
+    if (nextAdoptedStyleSheets.length === styleParent.adoptedStyleSheets.length) return;
+
+    styleParent.adoptedStyleSheets = nextAdoptedStyleSheets;
+}
 
 /**
  * Serialize a stylesheet to a string.
@@ -163,8 +159,8 @@ export function serializeStyleSheet(stylesheet: CSSStyleSheet): string {
 /**
  * Inspect the adopted stylesheets of a given style parent, serializing them to strings.
  */
-export function inspectStyleSheets(styleRoot: ShadowRoot): string[] {
-    return styleRoot.adoptedStyleSheets.map((styleSheet) => serializeStyleSheet(styleSheet));
+export function inspectStyleSheets(styleParent: StyleSheetParent): string[] {
+    return styleParent.adoptedStyleSheets.map((styleSheet) => serializeStyleSheet(styleSheet));
 }
 
 interface InspectedStyleSheetEntry {
@@ -178,11 +174,8 @@ interface InspectedStyleSheetEntry {
  * Recursively inspect the adopted stylesheets of a given style parent, serializing them to strings.
  */
 export function inspectStyleSheetTree(element: ReactiveElement): InspectedStyleSheetEntry {
-    if (!isStyleRoot(element.renderRoot)) {
-        throw new TypeError("Cannot inspect a render root that doesn't have adoptable stylesheets");
-    }
-
-    const styles = inspectStyleSheets(element.renderRoot);
+    const styleParent = resolveStyleSheetParent(element.renderRoot);
+    const styles = inspectStyleSheets(styleParent);
     const tagName = element.tagName.toLowerCase();
 
     const treewalker = document.createTreeWalker(element.renderRoot, NodeFilter.SHOW_ELEMENT, {
@@ -193,14 +186,12 @@ export function inspectStyleSheetTree(element: ReactiveElement): InspectedStyleS
             return NodeFilter.FILTER_SKIP;
         },
     });
-
     const children: InspectedStyleSheetEntry[] = [];
     let currentNode: Node | null = treewalker.nextNode();
-
     while (currentNode) {
         const childElement = currentNode as ReactiveElement;
 
-        if (!isStyleRoot(childElement.renderRoot)) {
+        if (!isAdoptableStyleSheetParent(childElement.renderRoot)) {
             currentNode = treewalker.nextNode();
             continue;
         }
@@ -230,5 +221,3 @@ if (process.env.NODE_ENV === "development") {
         inspectStyleSheets,
     });
 }
-
-//#endregion

web/src/common/theme.ts

@@ -1,47 +1,10 @@
 /**
  * @file Theme utilities.
  */
-import {
-    type StyleRoot,
-    createStyleSheetUnsafe,
-    setAdoptedStyleSheets,
-} from "@goauthentik/common/stylesheets.js";
-import { UIConfig } from "@goauthentik/common/ui/config.js";
-
-import AKBase from "@goauthentik/common/styles/authentik.css";
-import AKBaseDark from "@goauthentik/common/styles/theme-dark.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import { UIConfig } from "@goauthentik/common/ui/config";
 
 import { Config, CurrentBrand, UiThemeEnum } from "@goauthentik/api";
 
-//#region Stylesheet Exports
-
-/**
- * A global style sheet for the Patternfly base styles.
- *
- * @remarks
- *
- * While a component *may* import its own instance of the PFBase style sheet,
- * this instance ensures referential identity.
- */
-export const $PFBase = createStyleSheetUnsafe(PFBase);
-
-/**
- * A global style sheet for the authentik base styles.
- *
- * @see {@linkcode $PFBase} for details.
- */
-export const $AKBase = createStyleSheetUnsafe(AKBase);
-
-/**
- * A global style sheet for the authentik dark theme.
- *
- * @see {@linkcode $PFBase} for details.
- */
-export const $AKBaseDark = createStyleSheetUnsafe(AKBaseDark);
-
-//#endregion
-
 //#region Scheme Types
 
 /**
@@ -171,21 +134,15 @@ export function resolveUITheme(
  * Effect listener invoked when the color scheme changes.
  */
 export type UIThemeListener = (currentUITheme: ResolvedUITheme) => void;
-
 /**
- * Effect destructor invoked when cleanup is required.
- */
-export type UIThemeDestructor = () => void;
-
-/**
- * Create an effect that runs UI theme changes.
+ * Create an effect that runs
  *
  * @returns A cleanup function that removes the effect.
  */
 export function createUIThemeEffect(
     effect: UIThemeListener,
     listenerOptions?: AddEventListenerOptions,
-): UIThemeDestructor {
+): () => void {
     const colorSchemeTarget = resolveUITheme();
     const invertedColorSchemeTarget = UIThemeInversion[colorSchemeTarget];
 
@@ -217,8 +174,6 @@ export function createUIThemeEffect(
         mediaQueryList.removeEventListener("change", changeListener);
     };
 
-    listenerOptions?.signal?.addEventListener("abort", cleanup);
-
     return cleanup;
 }
 
@@ -226,96 +181,16 @@ export function createUIThemeEffect(
 
 //#region Theme Element
 
-/**
- * Applies the current UI theme to the given style root.
- *
- * @param styleRoot The style root to apply the theme to.
- * @param currentUITheme The current UI theme to apply.
- * @param additionalStyleSheets Additional style sheets to apply, in addition to the theme's base sheets.
- * @category CSS
- *
- * @see {@linkcode setAdoptedStyleSheets} for caveats.
- */
-export function applyUITheme(
-    styleRoot: StyleRoot,
-    currentUITheme: ResolvedUITheme = resolveUITheme(),
-    ...additionalStyleSheets: Array<CSSStyleSheet | undefined | null>
-): void {
-    setAdoptedStyleSheets(styleRoot, (currentStyleSheets) => {
-        const appendedSheets = additionalStyleSheets.filter(Boolean) as CSSStyleSheet[];
-
-        if (currentUITheme === UiThemeEnum.Dark) {
-            return [...currentStyleSheets, $AKBaseDark, ...appendedSheets];
-        }
-
-        return [
-            ...currentStyleSheets.filter((styleSheet) => styleSheet !== $AKBaseDark),
-            ...appendedSheets,
-        ];
-    });
-}
-
-/**
- * Applies the given theme to the document, i.e. the `<html>` element.
- *
- * @param hint The color scheme hint to use.
- */
-export function applyDocumentTheme(hint: CSSColorSchemeValue | UIThemeHint = "auto"): void {
-    const preferredColorScheme = formatColorScheme(hint);
-
-    const applyStyleSheets: UIThemeListener = (currentUITheme) => {
-        console.debug(`authentik/theme (document): switching to ${currentUITheme} theme`);
-
-        setAdoptedStyleSheets(document, (currentStyleSheets) => {
-            if (currentUITheme === "dark") {
-                return [...currentStyleSheets, $PFBase, $AKBase, $AKBaseDark];
-            }
-
-            return [
-                ...currentStyleSheets.filter((styleSheet) => styleSheet !== $AKBaseDark),
-                $PFBase,
-                $AKBase,
-            ];
-        });
-
-        document.documentElement.dataset.theme = currentUITheme;
-    };
-
-    if (preferredColorScheme === "auto") {
-        createUIThemeEffect(applyStyleSheets);
-        return;
-    }
-
-    applyStyleSheets(preferredColorScheme);
-}
-
 /**
  * An element that can be themed.
  */
 export interface ThemedElement extends HTMLElement {
-    /**
-     * The brand information for the current theme.
-     */
-    readonly brand?: CurrentBrand;
-    /**
-     * The UI configuration for the current theme,
-     * typically injected through a Lit Mixin.
-     *
-     * @see {@linkcode UIConfig} for details.
-     */
-    readonly uiConfig?: UIConfig;
-    /**
-     * An authentik configuration initially provided by the server.
-     */
-    readonly config?: Config;
+    brand?: CurrentBrand;
+    uiConfig?: UIConfig;
+    config?: Config;
     activeTheme: ResolvedUITheme;
 }
 
-/**
- * Returns the root interface element of the page.
- *
- * @todo Can this be handled with a Lit Mixin?
- */
 export function rootInterface<T extends ThemedElement = ThemedElement>(): T | null {
     const element = document.body.querySelector<T>("[data-ak-interface-root]");
 

web/src/common/ui/config.ts

@@ -1,5 +1,5 @@
-import { me } from "@goauthentik/common/users.js";
-import { isUserRoute } from "@goauthentik/elements/router/utils.js";
+import { me } from "@goauthentik/common/users";
+import { isUserRoute } from "@goauthentik/elements/router/utils";
 
 import { UiThemeEnum, UserSelf } from "@goauthentik/api";
 import { CurrentBrand } from "@goauthentik/api";

web/src/common/users.ts

@@ -1,6 +1,6 @@
-import { DEFAULT_CONFIG } from "@goauthentik/common/api/config.js";
-import { EVENT_LOCALE_REQUEST } from "@goauthentik/common/constants.js";
-import { isResponseErrorLike } from "@goauthentik/common/errors/network.js";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { EVENT_LOCALE_REQUEST } from "@goauthentik/common/constants";
+import { isResponseErrorLike } from "@goauthentik/common/errors/network";
 
 import { CoreApi, SessionUser } from "@goauthentik/api";
 

web/src/components/ak-hint/ak-hint.stories.ts

@@ -31,20 +31,19 @@ const container = (testItem: TemplateResult) =>
             li {
                 display: block;
             }
-
-            ak-hint {
-                --ak-hint--Color: var(--pf-global--Color--dark-100);
-            }
-
-            @media (prefers-color-scheme: dark) {
-                ak-hint {
-                    --ak-hint--Color: var(--pf-global--Color--light-100);
-                }
-            }
-
             p {
+                color: black;
                 margin-top: 1em;
             }
+
+            * {
+                --ak-hint--Color: black !important;
+            }
+            ak-hint-title::part(ak-hint-title),
+            ak-hint-footer::part(ak-hint-footer),
+            slotted::(*) {
+                color: black;
+            }
         </style>
 
         ${testItem}

web/src/elements/Alert.ts

@@ -2,7 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
 import { type SlottedTemplateResult, type Spread } from "@goauthentik/elements/types";
 import { spread } from "@open-wc/lit-helpers";
 
-import { css, html, nothing } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
@@ -64,15 +64,7 @@ export class Alert extends AKElement implements IAlert {
     icon = "fa-exclamation-circle";
 
     static get styles() {
-        return [
-            PFBase,
-            PFAlert,
-            css`
-                p {
-                    margin: 0;
-                }
-            `,
-        ];
+        return [PFBase, PFAlert];
     }
 
     get classmap() {

web/src/elements/Base.ts

@@ -1,24 +1,30 @@
-import { globalAK } from "@goauthentik/common/global.js";
+import { globalAK } from "@goauthentik/common/global";
 import {
-    StyleRoot,
-    createCSSResult,
+    StyleSheetInit,
+    StyleSheetParent,
+    appendStyleSheet,
     createStyleSheetUnsafe,
-} from "@goauthentik/common/stylesheets.js";
+    removeStyleSheet,
+    resolveStyleSheetParent,
+} from "@goauthentik/common/stylesheets";
 import {
-    $AKBase,
     CSSColorSchemeValue,
     ResolvedUITheme,
-    ThemedElement,
-    applyUITheme,
+    UIThemeListener,
     createUIThemeEffect,
     formatColorScheme,
     resolveUITheme,
-} from "@goauthentik/common/theme.js";
+} from "@goauthentik/common/theme";
+import { type ThemedElement } from "@goauthentik/common/theme";
 
 import { localized } from "@lit/localize";
-import { CSSResult, CSSResultGroup, CSSResultOrNative, LitElement } from "lit";
+import { CSSResultGroup, CSSResultOrNative, LitElement } from "lit";
 import { property } from "lit/decorators.js";
 
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import OneDark from "@goauthentik/common/styles/one-dark.css";
+import ThemeDark from "@goauthentik/common/styles/theme-dark.css";
+
 import { UiThemeEnum } from "@goauthentik/api";
 
 // Re-export the theme helpers
@@ -26,58 +32,6 @@ export { rootInterface } from "@goauthentik/common/theme";
 
 @localized()
 export class AKElement extends LitElement implements ThemedElement {
-    //#region Static Properties
-
-    public static styles?: Array<CSSResult | CSSModule>;
-
-    protected static override finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {
-        if (!styles) return [$AKBase];
-
-        if (!Array.isArray(styles)) return [createCSSResult(styles), $AKBase];
-
-        return [
-            // ---
-            ...(styles.flat() as CSSResultOrNative[]).map(createCSSResult),
-            $AKBase,
-        ];
-    }
-
-    //#endregion
-
-    //#region Lifecycle
-
-    constructor() {
-        super();
-
-        const { brand } = globalAK();
-
-        this.preferredColorScheme = formatColorScheme(brand.uiTheme);
-        this.activeTheme = resolveUITheme(brand?.uiTheme);
-
-        this.#customCSSStyleSheet = brand?.brandingCustomCss
-            ? createStyleSheetUnsafe(brand.brandingCustomCss)
-            : null;
-    }
-
-    public override disconnectedCallback(): void {
-        this.#themeAbortController?.abort();
-        super.disconnectedCallback();
-    }
-
-    /**
-     * Returns the node into which the element should render.
-     *
-     * @see {LitElement.createRenderRoot} for more information.
-     */
-    protected override createRenderRoot(): HTMLElement | DocumentFragment {
-        const renderRoot = super.createRenderRoot();
-        this.styleRoot ??= renderRoot;
-
-        return renderRoot;
-    }
-
-    //#endregion
-
     //#region Properties
 
     /**
@@ -99,54 +53,87 @@ export class AKElement extends LitElement implements ThemedElement {
 
     //#region Private Properties
 
-    /**
-     * The preferred color scheme used to look up the UI theme.
-     */
-    protected readonly preferredColorScheme: CSSColorSchemeValue;
+    readonly #preferredColorScheme: CSSColorSchemeValue;
 
-    /**
-     * A custom CSS style sheet to apply to the element.
-     */
-    readonly #customCSSStyleSheet: CSSStyleSheet | null;
-
-    /**
-     * A controller to abort theme updates, such as when the element is disconnected.
-     */
+    #customCSSStyleSheet: CSSStyleSheet | null;
+    #darkThemeStyleSheet: CSSStyleSheet | null = null;
     #themeAbortController: AbortController | null = null;
-    /**
-     * The style root to which the theme is applied.
-     */
-    #styleRoot?: StyleRoot;
 
-    protected set styleRoot(nextStyleRoot: StyleRoot | undefined) {
+    //#endregion
+
+    //#region Lifecycle
+
+    protected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {
+        // Ensure all style sheets being passed are really style sheets.
+        const baseStyles: StyleSheetInit[] = [AKGlobal, OneDark];
+
+        if (!styles) return baseStyles.map(createStyleSheetUnsafe);
+
+        if (Array.isArray(styles)) {
+            return [
+                //---
+                ...(styles as unknown as CSSResultOrNative[]),
+                ...baseStyles,
+            ].flatMap(createStyleSheetUnsafe);
+        }
+        return [styles, ...baseStyles].map(createStyleSheetUnsafe);
+    }
+
+    constructor() {
+        super();
+
+        const { brand } = globalAK();
+
+        this.#preferredColorScheme = formatColorScheme(brand.uiTheme);
+        this.activeTheme = resolveUITheme(brand?.uiTheme);
+
+        this.#customCSSStyleSheet = brand?.brandingCustomCss
+            ? createStyleSheetUnsafe(brand.brandingCustomCss)
+            : null;
+    }
+
+    public disconnectedCallback(): void {
+        super.disconnectedCallback();
         this.#themeAbortController?.abort();
+    }
 
-        this.#styleRoot = nextStyleRoot;
+    #styleRoot?: StyleSheetParent;
 
-        if (!nextStyleRoot) return;
+    #dispatchTheme: UIThemeListener = (nextUITheme) => {
+        if (!this.#styleRoot) return;
+
+        if (nextUITheme === UiThemeEnum.Dark) {
+            this.#darkThemeStyleSheet ||= createStyleSheetUnsafe(ThemeDark);
+            appendStyleSheet(this.#styleRoot, this.#darkThemeStyleSheet);
+            this.activeTheme = UiThemeEnum.Dark;
+        } else if (this.#darkThemeStyleSheet) {
+            removeStyleSheet(this.#styleRoot, this.#darkThemeStyleSheet);
+            this.#darkThemeStyleSheet = null;
+            this.activeTheme = UiThemeEnum.Light;
+        }
+    };
+
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        const renderRoot = super.createRenderRoot();
+        this.#styleRoot = resolveStyleSheetParent(renderRoot);
+
+        if (this.#customCSSStyleSheet) {
+            console.debug(`authentik/element[${this.tagName.toLowerCase()}]: Adding custom CSS`);
+
+            appendStyleSheet(this.#styleRoot, this.#customCSSStyleSheet);
+        }
 
         this.#themeAbortController = new AbortController();
 
-        if (this.preferredColorScheme === "dark") {
-            applyUITheme(nextStyleRoot, UiThemeEnum.Dark, this.#customCSSStyleSheet);
-
-            this.activeTheme = UiThemeEnum.Dark;
-        } else if (this.preferredColorScheme === "auto") {
-            createUIThemeEffect(
-                (nextUITheme) => {
-                    applyUITheme(nextStyleRoot, nextUITheme, this.#customCSSStyleSheet);
-
-                    this.activeTheme = nextUITheme;
-                },
-                {
-                    signal: this.#themeAbortController.signal,
-                },
-            );
+        if (this.#preferredColorScheme === "dark") {
+            this.#dispatchTheme(UiThemeEnum.Dark);
+        } else if (this.#preferredColorScheme === "auto") {
+            createUIThemeEffect(this.#dispatchTheme, {
+                signal: this.#themeAbortController.signal,
+            });
         }
-    }
 
-    protected get styleRoot(): StyleRoot | undefined {
-        return this.#styleRoot;
+        return renderRoot;
     }
 
     //#endregion

web/src/elements/Diagram.ts

@@ -83,7 +83,7 @@ export class Diagram extends AKElement {
             }
         });
         if (!this.diagram) {
-            return html`<ak-empty-state loading></ak-empty-state>`;
+            return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
         }
         return html`${until(
             mermaid.render("graph", this.diagram).then((r) => {

web/src/elements/Interface/Interface.ts

@@ -1,45 +1,34 @@
-import { globalAK } from "@goauthentik/common/global.js";
-import { ThemedElement, applyDocumentTheme } from "@goauthentik/common/theme.js";
-import { UIConfig } from "@goauthentik/common/ui/config.js";
-import { AKElement } from "@goauthentik/elements/Base.js";
-import { VersionContextController } from "@goauthentik/elements/Interface/VersionContextController.js";
+import {
+    appendStyleSheet,
+    createStyleSheetUnsafe,
+    resolveStyleSheetParent,
+} from "@goauthentik/common/stylesheets";
+import { ThemedElement } from "@goauthentik/common/theme";
+import { UIConfig } from "@goauthentik/common/ui/config";
+import { AKElement } from "@goauthentik/elements/Base";
+import { VersionContextController } from "@goauthentik/elements/Interface/VersionContextController";
 import { ModalOrchestrationController } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
 
 import { state } from "lit/decorators.js";
 
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import {
-    type Config,
-    type CurrentBrand,
-    type LicenseSummary,
-    type Version,
-} from "@goauthentik/api";
+import type { Config, CurrentBrand, LicenseSummary, Version } from "@goauthentik/api";
 
-import { BrandContextController } from "./BrandContextController.js";
-import { ConfigContextController } from "./ConfigContextController.js";
-import { EnterpriseContextController } from "./EnterpriseContextController.js";
+import { BrandContextController } from "./BrandContextController";
+import { ConfigContextController } from "./ConfigContextController";
+import { EnterpriseContextController } from "./EnterpriseContextController";
 
 const configContext = Symbol("configContext");
 const modalController = Symbol("modalController");
 const versionContext = Symbol("versionContext");
 
-export abstract class LightInterface extends AKElement implements ThemedElement {
-    constructor() {
-        super();
-        this.dataset.akInterfaceRoot = this.tagName.toLowerCase();
+export abstract class Interface extends AKElement implements ThemedElement {
+    protected static readonly PFBaseStyleSheet = createStyleSheetUnsafe(PFBase);
 
-        if (!document.documentElement.dataset.theme) {
-            applyDocumentTheme(globalAK().brand.uiTheme);
-        }
-    }
-}
+    [configContext]: ConfigContextController;
 
-export abstract class Interface extends LightInterface implements ThemedElement {
-    static styles = [PFBase];
-    protected [configContext]: ConfigContextController;
-
-    protected [modalController]: ModalOrchestrationController;
+    [modalController]: ModalOrchestrationController;
 
     @state()
     public config?: Config;
@@ -49,6 +38,11 @@ export abstract class Interface extends LightInterface implements ThemedElement
 
     constructor() {
         super();
+        const styleParent = resolveStyleSheetParent(document);
+
+        this.dataset.akInterfaceRoot = this.tagName.toLowerCase();
+
+        appendStyleSheet(styleParent, Interface.PFBaseStyleSheet);
 
         this.addController(new BrandContextController(this));
         this[configContext] = new ConfigContextController(this);

web/src/elements/Interface/index.ts

@@ -1,4 +1,4 @@
-import { AuthenticatedInterface, Interface, LightInterface } from "./Interface";
+import { AuthenticatedInterface, Interface } from "./Interface";
 
-export { Interface, AuthenticatedInterface, LightInterface };
+export { Interface, AuthenticatedInterface };
 export default Interface;

web/src/elements/PageHeader.ts

@@ -1,4 +1,8 @@
-import { EVENT_WS_MESSAGE, TITLE_DEFAULT } from "@goauthentik/common/constants";
+import {
+    EVENT_SIDEBAR_TOGGLE,
+    EVENT_WS_MESSAGE,
+    TITLE_DEFAULT,
+} from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
 import { UIConfig, UserDisplay, getConfigForUser } from "@goauthentik/common/ui/config";
 import { DefaultBrand } from "@goauthentik/common/ui/config";
@@ -25,14 +29,6 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { SessionUser } from "@goauthentik/api";
 
-//#region Events
-
-export interface SidebarToggleEventDetail {
-    open?: boolean;
-}
-
-//#endregion
-
 //#region Page Navbar
 
 export interface PageNavbarDetails {
@@ -49,10 +45,7 @@ export interface PageNavbarDetails {
  * dispatched by the `ak-page-header` component.
  */
 @customElement("ak-page-navbar")
-export class AKPageNavbar
-    extends WithBrandConfig(AKElement)
-    implements PageNavbarDetails, SidebarToggleEventDetail
-{
+export class AKPageNavbar extends WithBrandConfig(AKElement) implements PageNavbarDetails {
     //#region Static Properties
 
     private static elementRef: AKPageNavbar | null = null;
@@ -267,31 +260,29 @@ export class AKPageNavbar
 
     //#region Properties
 
-    @state()
+    @property({ type: String })
     icon?: string;
 
-    @state()
+    @property({ type: Boolean })
     iconImage = false;
 
-    @state()
+    @property({ type: String })
     header?: string;
 
-    @state()
+    @property({ type: String })
     description?: string;
 
-    @state()
+    @property({ type: Boolean })
     hasIcon = true;
 
-    @property({
-        type: Boolean,
-    })
-    public open?: boolean;
+    @property({ type: Boolean })
+    open = true;
 
     @state()
-    protected session?: SessionUser;
+    session?: SessionUser;
 
     @state()
-    protected uiConfig!: UIConfig;
+    uiConfig!: UIConfig;
 
     //#endregion
 
@@ -314,10 +305,9 @@ export class AKPageNavbar
         this.open = !this.open;
 
         this.dispatchEvent(
-            new CustomEvent<SidebarToggleEventDetail>("sidebar-toggle", {
+            new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
                 bubbles: true,
                 composed: true,
-                detail: { open: this.open },
             }),
         );
     }

web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts

@@ -12,6 +12,7 @@ import type { DualSelectPair } from "./types.js";
  * A top-level component for multi-select elements have dynamically generated "selected"
  * lists.
  */
+
 @customElement("ak-dual-select-dynamic-selected")
 export class AkDualSelectDynamic extends AkDualSelectProvider {
     /**
@@ -22,24 +23,20 @@ export class AkDualSelectDynamic extends AkDualSelectProvider {
      * @attr
      */
     @property({ attribute: false })
-    selector: (_: DualSelectPair[]) => Promise<DualSelectPair[]> = () => Promise.resolve([]);
+    selector: (_: DualSelectPair[]) => Promise<DualSelectPair[]> = async (_) => Promise.resolve([]);
 
-    #didFirstUpdate = false;
+    private firstUpdateHasRun = false;
 
     willUpdate(changed: PropertyValues<this>) {
         super.willUpdate(changed);
-
         // On the first update *only*, even before rendering, when the options are handed up, update
         // the selected list with the contents derived from the selector.
-
-        if (this.#didFirstUpdate) return;
-        if (this.options.length === 0) return;
-
-        this.#didFirstUpdate = true;
-
-        this.selector(this.options).then((selected) => {
-            this.selected = selected;
-        });
+        if (!this.firstUpdateHasRun && this.options.length > 0) {
+            this.firstUpdateHasRun = true;
+            this.selector(this.options).then((selected) => {
+                this.selected = selected;
+            });
+        }
     }
 
     render() {

web/src/elements/ak-dual-select/ak-dual-select-provider.ts

@@ -1,16 +1,18 @@
 import { AkControlElement } from "@goauthentik/elements/AkControlElement.js";
-import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter.js";
+import { debounce } from "@goauthentik/elements/utils/debounce";
+import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter";
 
 import { msg } from "@lit/localize";
 import { PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import type { Ref } from "lit/directives/ref.js";
 
 import type { Pagination } from "@goauthentik/api";
 
-import "./ak-dual-select.js";
-import { AkDualSelect } from "./ak-dual-select.js";
-import { type DataProvider, DualSelectEventType, type DualSelectPair } from "./types.js";
+import "./ak-dual-select";
+import { AkDualSelect } from "./ak-dual-select";
+import type { DataProvider, DualSelectPair } from "./types";
 
 /**
  * @element ak-dual-select-provider
@@ -20,19 +22,18 @@ import { type DataProvider, DualSelectEventType, type DualSelectPair } from "./t
  * between authentik and the generic ak-dual-select component; aside from knowing that
  * the Pagination object "looks like Django," the interior components don't know anything
  * about authentik at all and could be dropped into Gravity unchanged.)
+ *
  */
+
 @customElement("ak-dual-select-provider")
 export class AkDualSelectProvider extends CustomListenerElement(AkControlElement) {
-    //#region Properties
-
-    /**
-     * A function that takes a page and returns the {@linkcode DualSelectPair DualSelectPair[]}
-     * collection with which to update the "Available" pane.
+    /** A function that takes a page and returns the DualSelectPair[] collection with which to update
+     * the "Available" pane.
      *
      * @attr
      */
     @property({ type: Object })
-    public provider!: DataProvider;
+    provider!: DataProvider;
 
     /**
      * The list of selected items. This is the *complete* list, not paginated, as presented by a
@@ -41,7 +42,7 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
      * @attr
      */
     @property({ type: Array })
-    public selected: DualSelectPair[] = [];
+    selected: DualSelectPair[] = [];
 
     /**
      * The label for the left ("available") pane
@@ -49,7 +50,7 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
      * @attr
      */
     @property({ attribute: "available-label" })
-    public availableLabel = msg("Available options");
+    availableLabel = msg("Available options");
 
     /**
      * The label for the right ("selected") pane
@@ -57,7 +58,7 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
      * @attr
      */
     @property({ attribute: "selected-label" })
-    public selectedLabel = msg("Selected options");
+    selectedLabel = msg("Selected options");
 
     /**
      * The debounce for the search as the user is typing in a request
@@ -65,125 +66,103 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement
      * @attr
      */
     @property({ attribute: "search-delay", type: Number })
-    public searchDelay = 250;
-
-    public get value() {
-        return this.dualSelector.value!.selected.map(([k, _]) => k);
-    }
-
-    public json() {
-        return this.value;
-    }
-
-    //#endregion
-
-    //#region State
+    searchDelay = 250;
 
     @state()
-    protected options: DualSelectPair[] = [];
+    options: DualSelectPair[] = [];
 
-    #loading = false;
+    protected dualSelector: Ref<AkDualSelect> = createRef();
 
-    #didFirstUpdate = false;
-    #selected: DualSelectPair[] = [];
+    protected isLoading = false;
 
-    #previousSearchValue = "";
+    private doneFirstUpdate = false;
+    private internalSelected: DualSelectPair[] = [];
 
     protected pagination?: Pagination;
 
-    //#endregion
-
-    //#region Refs
-
-    protected dualSelector = createRef<AkDualSelect>();
-
-    //#endregion
-
-    //#region Lifecycle
-
-    public connectedCallback(): void {
-        super.connectedCallback();
-        this.addCustomListener(DualSelectEventType.NavigateTo, this.#navigationListener);
-        this.addCustomListener(DualSelectEventType.Change, this.#changeListener);
-        this.addCustomListener(DualSelectEventType.Search, this.#searchListener);
-
-        this.#fetch(1);
+    constructor() {
+        super();
+        setTimeout(() => this.fetch(1), 0);
+        this.onNav = this.onNav.bind(this);
+        this.onChange = this.onChange.bind(this);
+        this.onSearch = this.onSearch.bind(this);
+        this.addCustomListener("ak-pagination-nav-to", this.onNav);
+        this.addCustomListener("ak-dual-select-change", this.onChange);
+        this.addCustomListener("ak-dual-select-search", this.onSearch);
     }
 
     willUpdate(changedProperties: PropertyValues<this>) {
-        if (changedProperties.has("selected") && !this.#didFirstUpdate) {
-            this.#didFirstUpdate = true;
-            this.#selected = this.selected;
+        if (changedProperties.has("selected") && !this.doneFirstUpdate) {
+            this.doneFirstUpdate = true;
+            this.internalSelected = this.selected;
+        }
+
+        if (changedProperties.has("searchDelay")) {
+            this.doSearch = debounce(
+                AkDualSelectProvider.prototype.doSearch.bind(this),
+                this.searchDelay,
+            );
         }
 
         if (changedProperties.has("provider")) {
             this.pagination = undefined;
-            this.#previousSearchValue = "";
-            this.#fetch();
+            this.fetch();
         }
     }
 
-    //#endregion
+    async fetch(page?: number, search = "") {
+        if (this.isLoading) {
+            return;
+        }
+        this.isLoading = true;
+        const goto = page ?? this.pagination?.current ?? 1;
+        const data = await this.provider(goto, search);
+        this.pagination = data.pagination;
+        this.options = data.options;
+        this.isLoading = false;
+    }
 
-    //#region Private Methods
+    onNav(event: Event) {
+        if (!(event instanceof CustomEvent)) {
+            throw new Error(`Expecting a CustomEvent for navigation, received ${event} instead`);
+        }
+        this.fetch(event.detail);
+    }
 
-    #fetch = async (page?: number, search = this.#previousSearchValue): Promise<void> => {
-        if (this.#loading) return;
+    onChange(event: Event) {
+        if (!(event instanceof CustomEvent)) {
+            throw new Error(`Expecting a CustomEvent for change, received ${event} instead`);
+        }
+        this.internalSelected = event.detail.value;
+        this.selected = this.internalSelected;
+    }
 
-        this.#previousSearchValue = search;
-        this.#loading = true;
+    onSearch(event: Event) {
+        if (!(event instanceof CustomEvent)) {
+            throw new Error(`Expecting a CustomEvent for change, received ${event} instead`);
+        }
+        this.doSearch(event.detail);
+    }
 
-        page ??= this.pagination?.current ?? 1;
+    doSearch(search: string) {
+        this.pagination = undefined;
+        this.fetch(undefined, search);
+    }
 
-        return this.provider(page, search)
-            .then((data) => {
-                this.pagination = data.pagination;
-                this.options = data.options;
-            })
-            .catch((error) => {
-                console.error(error);
-            })
-            .finally(() => {
-                this.#loading = false;
-            });
-    };
+    get value() {
+        return this.dualSelector.value!.selected.map(([k, _]) => k);
+    }
 
-    //#endregion
-
-    //#region Event Listeners
-
-    #navigationListener = (event: CustomEvent<number>) => {
-        this.#fetch(event.detail, this.#previousSearchValue);
-    };
-
-    #changeListener = (event: CustomEvent<{ value: DualSelectPair[] }>) => {
-        this.#selected = event.detail.value;
-        this.selected = this.#selected;
-    };
-
-    #searchListener = (event: CustomEvent<string>) => {
-        this.#doSearch(event.detail);
-    };
-
-    #searchTimeoutID?: ReturnType<typeof setTimeout>;
-
-    #doSearch = (search: string) => {
-        clearTimeout(this.#searchTimeoutID);
-
-        setTimeout(() => {
-            this.pagination = undefined;
-            this.#fetch(undefined, search);
-        }, this.searchDelay);
-    };
-
-    //#endregion
+    json() {
+        return this.value;
+    }
 
     render() {
         return html`<ak-dual-select
             ${ref(this.dualSelector)}
             .options=${this.options}
             .pages=${this.pagination}
-            .selected=${this.#selected}
+            .selected=${this.internalSelected}
             available-label=${this.availableLabel}
             selected-label=${this.selectedLabel}
         ></ak-dual-select>`;

web/src/elements/ak-dual-select/ak-dual-select.ts

@@ -3,7 +3,6 @@ import {
     CustomEmitterElement,
     CustomListenerElement,
 } from "@goauthentik/elements/utils/eventEmitter";
-import { match } from "ts-pattern";
 
 import { msg, str } from "@lit/localize";
 import { PropertyValues, html, nothing } from "lit";
@@ -16,41 +15,34 @@ import { globalVariables, mainStyles } from "./components/styles.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import "./components/ak-dual-select-available-pane.js";
-import { AkDualSelectAvailablePane } from "./components/ak-dual-select-available-pane.js";
-import "./components/ak-dual-select-controls.js";
-import "./components/ak-dual-select-selected-pane.js";
-import { AkDualSelectSelectedPane } from "./components/ak-dual-select-selected-pane.js";
-import "./components/ak-pagination.js";
-import "./components/ak-search-bar.js";
+import "./components/ak-dual-select-available-pane";
+import { AkDualSelectAvailablePane } from "./components/ak-dual-select-available-pane";
+import "./components/ak-dual-select-controls";
+import "./components/ak-dual-select-selected-pane";
+import { AkDualSelectSelectedPane } from "./components/ak-dual-select-selected-pane";
+import "./components/ak-pagination";
+import "./components/ak-search-bar";
 import {
-    BasePagination,
-    DualSelectEventType,
-    DualSelectPair,
-    SearchbarEventDetail,
-    SearchbarEventSource,
-} from "./types.js";
+    EVENT_ADD_ALL,
+    EVENT_ADD_ONE,
+    EVENT_ADD_SELECTED,
+    EVENT_DELETE_ALL,
+    EVENT_REMOVE_ALL,
+    EVENT_REMOVE_ONE,
+    EVENT_REMOVE_SELECTED,
+} from "./constants";
+import type { BasePagination, DualSelectPair, SearchbarEvent } from "./types";
 
-function localeComparator(a: DualSelectPair, b: DualSelectPair) {
-    const aSortBy = a[2];
-    const bSortBy = b[2];
-
-    return aSortBy.localeCompare(bSortBy);
+function alphaSort([_k1, v1, s1]: DualSelectPair, [_k2, v2, s2]: DualSelectPair) {
+    const [l, r] = [s1 !== undefined ? s1 : v1, s2 !== undefined ? s2 : v2];
+    return l < r ? -1 : l > r ? 1 : 0;
 }
 
-function keyfinder(key: string) {
-    return ([k]: DualSelectPair) => k === key;
+function mapDualPairs(pairs: DualSelectPair[]) {
+    return new Map(pairs.map(([k, v, _]) => [k, v]));
 }
 
-const DelegatedEvents = [
-    DualSelectEventType.AddSelected,
-    DualSelectEventType.RemoveSelected,
-    DualSelectEventType.AddAll,
-    DualSelectEventType.RemoveAll,
-    DualSelectEventType.DeleteAll,
-    DualSelectEventType.AddOne,
-    DualSelectEventType.RemoveOne,
-] as const satisfies DualSelectEventType[];
+const styles = [PFBase, PFButton, globalVariables, mainStyles];
 
 /**
  * @element ak-dual-select
@@ -61,25 +53,24 @@ const DelegatedEvents = [
  *
  * @fires ak-dual-select-change - A custom change event with the current `selected` list.
  */
+
+const keyfinder =
+    (key: string) =>
+    ([k]: DualSelectPair) =>
+        k === key;
+
 @customElement("ak-dual-select")
 export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKElement)) {
-    static styles = [PFBase, PFButton, globalVariables, mainStyles];
+    static get styles() {
+        return styles;
+    }
 
-    //#region Properties
-
-    /**
-     * The list of options to *currently* show.
-     *
-     * Note that this is not *all* the options,
-     * only the currently shown list of options from a pagination collection.
-     */
+    /* The list of options to *currently* show. Note that this is not *all* the options, only the
+     * currently shown list of options from a pagination collection. */
     @property({ type: Array })
     options: DualSelectPair[] = [];
 
-    /**
-     * The list of options selected.
-     * This is the *entire* list and will not be paginated.
-     */
+    /* The list of options selected. This is the *entire* list and will not be paginated. */
     @property({ type: Array })
     selected: DualSelectPair[] = [];
 
@@ -92,133 +83,138 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
     @property({ attribute: "selected-label" })
     selectedLabel = msg("Selected options");
 
-    //#endregion
-
-    //#region State
-
     @state()
-    protected selectedFilter: string = "";
-
-    #selectedKeys: Set<string> = new Set();
-
-    //#endregion
-
-    //#region Refs
+    selectedFilter: string = "";
 
     availablePane: Ref<AkDualSelectAvailablePane> = createRef();
 
     selectedPane: Ref<AkDualSelectSelectedPane> = createRef();
 
-    //#endregion
-
-    //#region Lifecycle
+    selectedKeys: Set<string> = new Set();
 
     constructor() {
         super();
-
-        for (const eventName of DelegatedEvents) {
-            this.addCustomListener(eventName, this.#moveListener);
-        }
-
+        this.handleMove = this.handleMove.bind(this);
+        this.handleSearch = this.handleSearch.bind(this);
+        [
+            EVENT_ADD_ALL,
+            EVENT_ADD_SELECTED,
+            EVENT_DELETE_ALL,
+            EVENT_REMOVE_ALL,
+            EVENT_REMOVE_SELECTED,
+            EVENT_ADD_ONE,
+            EVENT_REMOVE_ONE,
+        ].forEach((eventName: string) => {
+            this.addCustomListener(eventName, (event: Event) => this.handleMove(eventName, event));
+        });
         this.addCustomListener("ak-dual-select-move", () => {
             this.requestUpdate();
         });
-
-        this.addCustomListener("ak-search", this.#searchListener);
+        this.addCustomListener("ak-search", this.handleSearch);
     }
 
     willUpdate(changedProperties: PropertyValues<this>) {
         if (changedProperties.has("selected")) {
-            this.#selectedKeys = new Set(this.selected.map(([key]) => key));
+            this.selectedKeys = new Set(this.selected.map(([key, _]) => key));
         }
-
         // Pagination invalidates available moveables.
         if (changedProperties.has("options") && this.availablePane.value) {
             this.availablePane.value.clearMove();
         }
     }
 
-    //#endregion
+    handleMove(eventName: string, event: Event) {
+        if (!(event instanceof CustomEvent)) {
+            throw new Error(`Expected move event here, got ${eventName}`);
+        }
 
-    //#region Event Listeners
-
-    #moveListener = (event: CustomEvent<string>) => {
-        match(event.type)
-            .with(DualSelectEventType.AddSelected, () => this.addSelected())
-            .with(DualSelectEventType.RemoveSelected, () => this.removeSelected())
-            .with(DualSelectEventType.AddAll, () => this.addAllVisible())
-            .with(DualSelectEventType.RemoveAll, () => this.removeAllVisible())
-            .with(DualSelectEventType.DeleteAll, () => this.removeAll())
-            .with(DualSelectEventType.AddOne, () => this.addOne(event.detail))
-            .with(DualSelectEventType.RemoveOne, () => this.removeOne(event.detail))
-            .otherwise(() => {
-                throw new Error(`Expected move event here, got ${event.type}`);
-            });
-
-        this.dispatchCustomEvent(DualSelectEventType.Change, { value: this.value });
+        switch (eventName) {
+            case EVENT_ADD_SELECTED: {
+                this.addSelected();
+                break;
+            }
+            case EVENT_REMOVE_SELECTED: {
+                this.removeSelected();
+                break;
+            }
+            case EVENT_ADD_ALL: {
+                this.addAllVisible();
+                break;
+            }
+            case EVENT_REMOVE_ALL: {
+                this.removeAllVisible();
+                break;
+            }
+            case EVENT_DELETE_ALL: {
+                this.removeAll();
+                break;
+            }
+            case EVENT_ADD_ONE: {
+                this.addOne(event.detail);
+                break;
+            }
+            case EVENT_REMOVE_ONE: {
+                this.removeOne(event.detail);
+                break;
+            }
 
+            default:
+                throw new Error(
+                    `AkDualSelect.handleMove received unknown event type: ${eventName}`,
+                );
+        }
+        this.dispatchCustomEvent("ak-dual-select-change", { value: this.value });
         event.stopPropagation();
-    };
-
-    protected addSelected() {
-        if (this.availablePane.value!.moveable.length === 0) return;
+    }
 
+    addSelected() {
+        if (this.availablePane.value!.moveable.length === 0) {
+            return;
+        }
         this.selected = this.availablePane.value!.moveable.reduce(
             (acc, key) => {
                 const value = this.options.find(keyfinder(key));
-
                 return value && !acc.find(keyfinder(value[0])) ? [...acc, value] : acc;
             },
             [...this.selected],
         );
-
         // This is where the information gets... lossy.  Dammit.
         this.availablePane.value!.clearMove();
     }
 
-    protected addOne(key: string) {
+    addOne(key: string) {
         const requested = this.options.find(keyfinder(key));
-
-        if (!requested) return;
-        if (this.selected.find(keyfinder(requested[0]))) return;
-
-        this.selected = [...this.selected, requested];
+        if (requested && !this.selected.find(keyfinder(requested[0]))) {
+            this.selected = [...this.selected, requested];
+        }
     }
 
     // These are the *currently visible* options; the parent node is responsible for paginating and
     // updating the list of currently visible options;
-    protected addAllVisible() {
+    addAllVisible() {
         // Create a new array of all current options and selected, and de-dupe.
-        const selected = new Map<string, DualSelectPair>([
-            ...this.options.map((pair) => [pair[0], pair] as const),
-            ...this.selected.map((pair) => [pair[0], pair] as const),
-        ]);
-
-        this.selected = Array.from(selected.values());
-
+        const selected = mapDualPairs([...this.options, ...this.selected]);
+        this.selected = Array.from(selected.entries());
         this.availablePane.value!.clearMove();
     }
 
-    protected removeSelected() {
-        if (this.selectedPane.value!.moveable.length === 0) return;
-
+    removeSelected() {
+        if (this.selectedPane.value!.moveable.length === 0) {
+            return;
+        }
         const deselected = new Set(this.selectedPane.value!.moveable);
-
         this.selected = this.selected.filter(([key]) => !deselected.has(key));
-
         this.selectedPane.value!.clearMove();
     }
 
-    protected removeOne(key: string) {
+    removeOne(key: string) {
         this.selected = this.selected.filter(([k]) => k !== key);
     }
 
-    protected removeAllVisible() {
+    removeAllVisible() {
         // Remove all the items from selected that are in the *currently visible* options list
-        const options = new Set(this.options.map(([k]) => k));
-
+        const options = new Set(this.options.map(([k, _]) => k));
         this.selected = this.selected.filter(([k]) => !options.has(k));
-
         this.selectedPane.value!.clearMove();
     }
 
@@ -227,25 +223,24 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
         this.selectedPane.value!.clearMove();
     }
 
-    #searchListener = (event: CustomEvent<SearchbarEventDetail>) => {
-        const { source, value } = event.detail;
-
-        match(source)
-            .with(SearchbarEventSource.Available, () => {
-                this.dispatchCustomEvent(DualSelectEventType.Search, value);
-            })
-            .with(SearchbarEventSource.Selected, () => {
-                this.selectedFilter = value;
-                this.selectedPane.value!.clearMove();
-            })
-            .exhaustive();
-
+    handleSearch(event: SearchbarEvent) {
+        switch (event.detail.source) {
+            case "ak-dual-list-available-search":
+                return this.handleAvailableSearch(event.detail.value);
+            case "ak-dual-list-selected-search":
+                return this.handleSelectedSearch(event.detail.value);
+        }
         event.stopPropagation();
-    };
+    }
 
-    //#endregion
+    handleAvailableSearch(value: string) {
+        this.dispatchCustomEvent("ak-dual-select-search", value);
+    }
 
-    //#region Public Getters
+    handleSelectedSearch(value: string) {
+        this.selectedFilter = value;
+        this.selectedPane.value!.clearMove();
+    }
 
     get value() {
         return this.selected;
@@ -256,7 +251,7 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
         // added.
         const allMoved =
             this.options.length ===
-            this.options.filter(([key, _]) => this.#selectedKeys.has(key)).length;
+            this.options.filter(([key, _]) => this.selectedKeys.has(key)).length;
 
         return this.options.length > 0 && !allMoved;
     }
@@ -264,8 +259,7 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
     get canRemoveAll() {
         // False if no visible option can be found in the selected list
         return (
-            this.options.length > 0 &&
-            !!this.options.find(([key, _]) => this.#selectedKeys.has(key))
+            this.options.length > 0 && !!this.options.find(([key, _]) => this.selectedKeys.has(key))
         );
     }
 
@@ -273,10 +267,6 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
         return (this.pages?.next ?? 0) > 0 || (this.pages?.previous ?? 0) > 0;
     }
 
-    //#endregion
-
-    //#region Render
-
     render() {
         const selected =
             this.selectedFilter === ""
@@ -292,15 +282,11 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
         const availableCount = this.availablePane.value?.toMove.size ?? 0;
         const selectedCount = this.selectedPane.value?.toMove.size ?? 0;
         const selectedTotal = selected.length;
-
         const availableStatus =
             availableCount > 0 ? msg(str`${availableCount} item(s) marked to add.`) : "&nbsp;";
-
         const selectedTotalStatus = msg(str`${selectedTotal} item(s) selected.`);
-
         const selectedCountStatus =
             selectedCount > 0 ? "  " + msg(str`${selectedCount} item(s) marked to remove.`) : "";
-
         const selectedStatus = `${selectedTotalStatus} ${selectedCountStatus}`;
 
         return html`
@@ -324,7 +310,7 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
                     <ak-dual-select-available-pane
                         ${ref(this.availablePane)}
                         .options=${this.options}
-                        .selected=${this.#selectedKeys}
+                        .selected=${this.selectedKeys}
                     ></ak-dual-select-available-pane>
                     ${this.needPagination
                         ? html`<ak-pagination .pages=${this.pages}></ak-pagination>`
@@ -358,14 +344,12 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
 
                     <ak-dual-select-selected-pane
                         ${ref(this.selectedPane)}
-                        .selected=${selected.toSorted(localeComparator)}
+                        .selected=${selected.toSorted(alphaSort)}
                     ></ak-dual-select-selected-pane>
                 </div>
             </div>
         `;
     }
-
-    //#endregion
 }
 
 declare global {

web/src/elements/ak-dual-select/components/ak-dual-select-available-pane.ts

@@ -1,24 +1,26 @@
 import { AKElement } from "@goauthentik/elements/Base";
 import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
 
-import { PropertyValues, html, nothing } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { map } from "lit/directives/map.js";
-import { createRef, ref } from "lit/directives/ref.js";
 
 import { availablePaneStyles, listStyles } from "./styles.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { DualSelectEventType, DualSelectPair } from "../types.js";
+import { EVENT_ADD_ONE } from "../constants";
+import type { DualSelectPair } from "../types";
+
+const styles = [PFBase, PFButton, PFDualListSelector, listStyles, availablePaneStyles];
 
 const hostAttributes = [
     ["aria-labelledby", "dual-list-selector-available-pane-status"],
     ["aria-multiselectable", "true"],
     ["role", "listbox"],
-] as const satisfies Array<[string, string]>;
+];
 
 /**
  * @element ak-dual-select-available-panel
@@ -35,108 +37,80 @@ const hostAttributes = [
  *
  * It is not expected that the `ak-dual-select-available-move-changed` event will be used; instead,
  * the attribute will be read by the parent when a control is clicked.
+ *
  */
 @customElement("ak-dual-select-available-pane")
-export class AkDualSelectAvailablePane extends CustomEmitterElement<DualSelectEventType>(
-    AKElement,
-) {
-    static styles = [PFBase, PFButton, PFDualListSelector, listStyles, availablePaneStyles];
-
-    //#region Properties
+export class AkDualSelectAvailablePane extends CustomEmitterElement(AKElement) {
+    static get styles() {
+        return styles;
+    }
 
     /* The array of key/value pairs this pane is currently showing */
     @property({ type: Array })
     readonly options: DualSelectPair[] = [];
 
-    /**
-     * A set (set being easy for lookups) of keys with all the pairs selected,
-     * so that the ones currently being shown that have already been selected
-     * can be marked and their clicks ignored.
+    /* A set (set being easy for lookups) of keys with all the pairs selected, so that the ones
+     * currently being shown that have already been selected can be marked and their clicks ignored.
+     *
      */
     @property({ type: Object })
     readonly selected: Set<string> = new Set();
 
-    //#endregion
-
-    //#region State
-
-    /**
-     * This is the only mutator for this object.
-     * It collects the list of objects the user has clicked on *in this pane*.
-     *
-     * It is explicitly marked as "public" to emphasize that the parent orchestrator
-     * for the dual-select widget can and will access it to get the list of keys to be
+    /* This is the only mutator for this object. It collects the list of objects the user has
+     * clicked on *in this pane*. It is explicitly marked as "public" to emphasize that the parent
+     * orchestrator for the dual-select widget can and will access it to get the list of keys to be
      * moved (removed) if the user so requests.
+     *
      */
     @state()
     public toMove: Set<string> = new Set();
 
-    //#endregion
-
-    //#region Refs
-
-    protected listRef = createRef<HTMLDivElement>();
-
-    //#region Lifecycle
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+        this.onMove = this.onMove.bind(this);
+    }
 
     connectedCallback() {
         super.connectedCallback();
-
-        for (const [attr, value] of hostAttributes) {
+        hostAttributes.forEach(([attr, value]) => {
             if (!this.hasAttribute(attr)) {
                 this.setAttribute(attr, value);
             }
-        }
+        });
     }
 
-    protected updated(changed: PropertyValues<this>) {
-        if (changed.has("options")) {
-            this.listRef.value?.scrollTo(0, 0);
-        }
-    }
-
-    //#region Public API
-
-    public clearMove() {
+    clearMove() {
         this.toMove = new Set();
     }
 
-    get moveable() {
-        return Array.from(this.toMove.values());
-    }
-
-    //#endregion
-
-    //#region Event Listeners
-
-    #clickListener(key: string): void {
-        if (this.selected.has(key)) return;
-
+    onClick(key: string) {
+        if (this.selected.has(key)) {
+            return;
+        }
         if (this.toMove.has(key)) {
             this.toMove.delete(key);
         } else {
             this.toMove.add(key);
         }
-
         this.dispatchCustomEvent(
-            DualSelectEventType.MoveChanged,
+            "ak-dual-select-available-move-changed",
             Array.from(this.toMove.values()).sort(),
         );
-
-        this.dispatchCustomEvent(DualSelectEventType.Move);
-
+        this.dispatchCustomEvent("ak-dual-select-move");
         // Necessary because updating a map won't trigger a state change
         this.requestUpdate();
     }
 
-    #moveListener(key: string): void {
+    onMove(key: string) {
         this.toMove.delete(key);
-
-        this.dispatchCustomEvent(DualSelectEventType.AddOne, key);
+        this.dispatchCustomEvent(EVENT_ADD_ONE, key);
         this.requestUpdate();
     }
 
-    //#region Render
+    get moveable() {
+        return Array.from(this.toMove.values());
+    }
 
     // DO NOT use `Array.map()` instead of Lit's `map()` function. Lit's `map()` is object-aware and
     // will not re-arrange or reconstruct the list automatically if the actual sources do not
@@ -145,18 +119,17 @@ export class AkDualSelectAvailablePane extends CustomEmitterElement<DualSelectEv
 
     render() {
         return html`
-            <div ${ref(this.listRef)} class="pf-c-dual-list-selector__menu">
+            <div class="pf-c-dual-list-selector__menu">
                 <ul class="pf-c-dual-list-selector__list">
                     ${map(this.options, ([key, label]) => {
                         const selected = classMap({
                             "pf-m-selected": this.toMove.has(key),
                         });
-
                         return html` <li
                             class="pf-c-dual-list-selector__list-item"
                             aria-selected="false"
-                            @click=${() => this.#clickListener(key)}
-                            @dblclick=${() => this.#moveListener(key)}
+                            @click=${() => this.onClick(key)}
+                            @dblclick=${() => this.onMove(key)}
                             role="option"
                             data-ak-key=${key}
                             tabindex="-1"
@@ -181,8 +154,6 @@ export class AkDualSelectAvailablePane extends CustomEmitterElement<DualSelectEv
             </div>
         `;
     }
-
-    //#endregion
 }
 
 export default AkDualSelectAvailablePane;

web/src/elements/ak-dual-select/components/ak-dual-select-controls.ts

@@ -8,7 +8,34 @@ import { customElement, property } from "lit/decorators.js";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { DualSelectEventType } from "../types.js";
+import {
+    EVENT_ADD_ALL,
+    EVENT_ADD_SELECTED,
+    EVENT_DELETE_ALL,
+    EVENT_REMOVE_ALL,
+    EVENT_REMOVE_SELECTED,
+} from "../constants";
+
+const styles = [
+    PFBase,
+    PFButton,
+    css`
+        :host {
+            align-self: center;
+            padding-right: var(--pf-c-dual-list-selector__controls--PaddingRight);
+            padding-left: var(--pf-c-dual-list-selector__controls--PaddingLeft);
+        }
+        .pf-c-dual-list-selector {
+            max-width: 4rem;
+        }
+        .ak-dual-list-selector__controls {
+            display: grid;
+            justify-content: center;
+            align-content: center;
+            height: 100%;
+        }
+    `,
+];
 
 /**
  * @element ak-dual-select-controls
@@ -16,84 +43,64 @@ import { DualSelectEventType } from "../types.js";
  * The "control box" for a dual-list multi-select. It's controlled by the parent orchestrator as to
  * whether or not any of its controls are enabled. It sends a variety of messages to the parent
  * orchestrator which will then reconcile the "available" and "selected" panes at need.
+ *
  */
-@customElement("ak-dual-select-controls")
-export class AkDualSelectControls extends CustomEmitterElement<DualSelectEventType>(AKElement) {
-    static styles = [
-        PFBase,
-        PFButton,
-        css`
-            :host {
-                align-self: center;
-                padding-right: var(--pf-c-dual-list-selector__controls--PaddingRight);
-                padding-left: var(--pf-c-dual-list-selector__controls--PaddingLeft);
-            }
-            .pf-c-dual-list-selector {
-                max-width: calc(var(--pf-global--spacer-md, 1rem) * 4);
-            }
-            .ak-dual-list-selector__controls {
-                display: grid;
-                justify-content: center;
-                align-content: center;
-                height: 100%;
-            }
-        `,
-    ];
 
-    /**
-     * Set to true if any *visible* elements can be added to the selected list.
+@customElement("ak-dual-select-controls")
+export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
+    static get styles() {
+        return styles;
+    }
+
+    /* Set to true if any *visible* elements can be added to the selected list
      */
     @property({ attribute: "add-active", type: Boolean })
     addActive = false;
 
-    /**
-     * Set to true if any elements can be removed from the selected list (essentially,
+    /* Set to true if any elements can be removed from the selected list (essentially,
      * if the selected list is not empty)
      */
     @property({ attribute: "remove-active", type: Boolean })
     removeActive = false;
 
-    /**
-     * Set to true if *all* the currently visible elements can be moved
+    /* Set to true if *all* the currently visible elements can be moved
      * into the selected list (essentially, if any visible elements are
-     * not currently selected).
+     * not currently selected)
      */
     @property({ attribute: "add-all-active", type: Boolean })
     addAllActive = false;
 
-    /**
-     * Set to true if *any* of the elements currently visible in the available
+    /* Set to true if *any* of the elements currently visible in the available
      * pane are available to be moved to the selected list, enabling that
-     * all of those specific elements be moved out of the selected list.
+     * all of those specific elements be moved out of the selected list
      */
     @property({ attribute: "remove-all-active", type: Boolean })
     removeAllActive = false;
 
-    /**
-     * if deleteAll is enabled, set to true to show that there are elements in the
+    /* if deleteAll is enabled, set to true to show that there are elements in the
      * selected list that can be deleted.
      */
     @property({ attribute: "delete-all-active", type: Boolean })
     enableDeleteAll = false;
 
-    /**
-     * Set to true if you want the `...AllActive` buttons made available.
-     */
+    /* Set to true if you want the `...AllActive` buttons made available. */
     @property({ attribute: "enable-select-all", type: Boolean })
     selectAll = false;
 
-    /**
-     * Set to true if you want the `ClearAllSelected` button made available
-     */
+    /* Set to true if you want the `ClearAllSelected` button made available */
     @property({ attribute: "enable-delete-all", type: Boolean })
     deleteAll = false;
 
-    renderButton(
-        label: string,
-        eventType: DualSelectEventType,
-        active: boolean,
-        direction: string,
-    ) {
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick(eventName: string) {
+        this.dispatchCustomEvent(eventName);
+    }
+
+    renderButton(label: string, event: string, active: boolean, direction: string) {
         return html`
             <div class="pf-c-dual-list-selector__controls-item">
                 <button
@@ -102,7 +109,7 @@ export class AkDualSelectControls extends CustomEmitterElement<DualSelectEventTy
                     aria-label=${label}
                     class="pf-c-button pf-m-plain"
                     type="button"
-                    @click=${() => this.dispatchCustomEvent(eventType)}
+                    @click=${() => this.onClick(event)}
                     data-ouia-component-type="AK/Button"
                 >
                     <i class="fa ${direction}"></i>
@@ -116,7 +123,7 @@ export class AkDualSelectControls extends CustomEmitterElement<DualSelectEventTy
             <div class="ak-dual-list-selector__controls">
                 ${this.renderButton(
                     msg("Add"),
-                    DualSelectEventType.AddSelected,
+                    EVENT_ADD_SELECTED,
                     this.addActive,
                     "fa-angle-right",
                 )}
@@ -124,13 +131,13 @@ export class AkDualSelectControls extends CustomEmitterElement<DualSelectEventTy
                     ? html`
                           ${this.renderButton(
                               msg("Add All Available"),
-                              DualSelectEventType.AddAll,
+                              EVENT_ADD_ALL,
                               this.addAllActive,
                               "fa-angle-double-right",
                           )}
                           ${this.renderButton(
                               msg("Remove All Available"),
-                              DualSelectEventType.RemoveAll,
+                              EVENT_REMOVE_ALL,
                               this.removeAllActive,
                               "fa-angle-double-left",
                           )}
@@ -138,14 +145,14 @@ export class AkDualSelectControls extends CustomEmitterElement<DualSelectEventTy
                     : nothing}
                 ${this.renderButton(
                     msg("Remove"),
-                    DualSelectEventType.RemoveSelected,
+                    EVENT_REMOVE_SELECTED,
                     this.removeActive,
                     "fa-angle-left",
                 )}
                 ${this.deleteAll
                     ? html`${this.renderButton(
                           msg("Remove All"),
-                          DualSelectEventType.DeleteAll,
+                          EVENT_DELETE_ALL,
                           this.enableDeleteAll,
                           "fa-times",
                       )}`

web/src/elements/ak-dual-select/components/ak-dual-select-selected-pane.ts

@@ -11,13 +11,16 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { DualSelectEventType, DualSelectPair } from "../types";
+import { EVENT_REMOVE_ONE } from "../constants";
+import type { DualSelectPair } from "../types";
+
+const styles = [PFBase, PFButton, PFDualListSelector, listStyles, selectedPaneStyles];
 
 const hostAttributes = [
     ["aria-labelledby", "dual-list-selector-selected-pane-status"],
     ["aria-multiselectable", "true"],
     ["role", "listbox"],
-] as const satisfies Array<[string, string]>;
+];
 
 /**
  * @element ak-dual-select-available-panel
@@ -35,86 +38,68 @@ const hostAttributes = [
  *
  */
 @customElement("ak-dual-select-selected-pane")
-export class AkDualSelectSelectedPane extends CustomEmitterElement<DualSelectEventType>(AKElement) {
-    static styles = [PFBase, PFButton, PFDualListSelector, listStyles, selectedPaneStyles];
+export class AkDualSelectSelectedPane extends CustomEmitterElement(AKElement) {
+    static get styles() {
+        return styles;
+    }
 
-    //#region Properties
-
-    /* The array of key/value pairs that are in the selected list. ALL of them. */
+    /* The array of key/value pairs that are in the selected list.  ALL of them. */
     @property({ type: Array })
     readonly selected: DualSelectPair[] = [];
 
-    //#endregion
-
-    //#region State
-
-    /**
-     * This is the only mutator for this object.
-     * It collects the list of objects the user has clicked on *in this pane*.
-     *
-     * It is explicitly marked as "public" to emphasize that the parent orchestrator
-     * for the dual-select widget can and will access it to get the list of keys to be
+    /*
+     * This is the only mutator for this object. It collects the list of objects the user has
+     * clicked on *in this pane*. It is explicitly marked as "public" to emphasize that the parent
+     * orchestrator for the dual-select widget can and will access it to get the list of keys to be
      * moved (removed) if the user so requests.
+     *
      */
     @state()
     public toMove: Set<string> = new Set();
 
-    //#endregion
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+        this.onMove = this.onMove.bind(this);
+    }
 
-    //#region Lifecycle
-    public connectedCallback() {
+    connectedCallback() {
         super.connectedCallback();
-
-        for (const [attr, value] of hostAttributes) {
+        hostAttributes.forEach(([attr, value]) => {
             if (!this.hasAttribute(attr)) {
                 this.setAttribute(attr, value);
             }
-        }
+        });
     }
 
-    //#endregion
-
-    //#region Public API
-
-    public clearMove() {
+    clearMove() {
         this.toMove = new Set();
     }
 
-    public get moveable() {
-        return Array.from(this.toMove.values());
-    }
-
-    //#endregion
-
-    //#region Event Listeners
-
-    #clickListener = (key: string): void => {
+    onClick(key: string) {
         if (this.toMove.has(key)) {
             this.toMove.delete(key);
         } else {
             this.toMove.add(key);
         }
-
         this.dispatchCustomEvent(
-            DualSelectEventType.MoveChanged,
+            "ak-dual-select-selected-move-changed",
             Array.from(this.toMove.values()).sort(),
         );
-
         this.dispatchCustomEvent("ak-dual-select-move");
         // Necessary because updating a map won't trigger a state change
         this.requestUpdate();
-    };
+    }
 
-    #moveListener = (key: string): void => {
+    onMove(key: string) {
         this.toMove.delete(key);
-
-        this.dispatchCustomEvent(DualSelectEventType.RemoveOne, key);
+        this.dispatchCustomEvent(EVENT_REMOVE_ONE, key);
         this.requestUpdate();
-    };
+    }
 
-    //#endregion
-
-    //#region Render
+    get moveable() {
+        return Array.from(this.toMove.values());
+    }
 
     render() {
         return html`
@@ -128,8 +113,8 @@ export class AkDualSelectSelectedPane extends CustomEmitterElement<DualSelectEve
                             class="pf-c-dual-list-selector__list-item"
                             aria-selected="false"
                             id="dual-list-selector-basic-selected-pane-list-option-0"
-                            @click=${() => this.#clickListener(key)}
-                            @dblclick=${() => this.#moveListener(key)}
+                            @click=${() => this.onClick(key)}
+                            @dblclick=${() => this.onMove(key)}
                             role="option"
                             data-ak-key=${key}
                             tabindex="-1"
@@ -149,8 +134,6 @@ export class AkDualSelectSelectedPane extends CustomEmitterElement<DualSelectEve
             </div>
         `;
     }
-
-    //#endregion
 }
 
 export default AkDualSelectSelectedPane;