web: Update WebDriver types. Fix issues surrounding async tests.

WIP;

WIP 2

web: Flesh out fixtures, test IDs.

web: Flesh out provider tests.

web: Flesh out LDAP test.

web: Fix typo.

web: Allow base URL to be updated.

web: Clean up.

web: Tidy types.

web: Update ARIA attributes for better test targeting.

web: Clean up message labeling.

web: Clean up ARIA labels.

web: Flesh out table ARIA labels.

web: Flesh out series.

web: Fix linter.

web: Clean up test reporting, timing issues. Add RADIUS test.

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 2025.6.1
+current_version = 2025.6.2
 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

@@ -202,7 +202,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', 'package-lock.json', 'web/src/**', 'web/packages/sfe/src/**') }}-b
       - name: prepare web ui
         if: steps.cache-web.outputs.cache-hit != 'true'
         working-directory: web

Dockerfile

@@ -77,7 +77,7 @@ RUN --mount=type=secret,id=GEOIPUPDATE_ACCOUNT_ID \
 # Stage 4: Download uv
 FROM ghcr.io/astral-sh/uv:0.7.13 AS uv
 # Stage 5: Base python image
-FROM ghcr.io/goauthentik/fips-python:3.13.4-slim-bookworm-fips AS python-base
+FROM ghcr.io/goauthentik/fips-python:3.13.5-slim-bookworm-fips AS python-base
 
 ENV VENV_PATH="/ak-root/.venv" \
     PATH="/lifecycle:/ak-root/.venv/bin:$PATH" \

authentik/__init__.py

@@ -2,7 +2,7 @@
 
 from os import environ
 
-__version__ = "2025.6.1"
+__version__ = "2025.6.2"
 ENV_GIT_HASH_KEY = "GIT_BUILD_HASH"
 
 

authentik/providers/oauth2/tests/test_authorize.py

@@ -387,8 +387,7 @@ class TestAuthorize(OAuthTestCase):
             self.assertEqual(
                 response.url,
                 (
-                    f"http://localhost#access_token={token.token}"
-                    f"&id_token={provider.encode(token.id_token.to_dict())}"
+                    f"http://localhost#id_token={provider.encode(token.id_token.to_dict())}"
                     f"&token_type={TOKEN_TYPE}"
                     f"&expires_in={int(expires)}&state={state}"
                 ),
@@ -563,7 +562,6 @@ class TestAuthorize(OAuthTestCase):
                 "url": "http://localhost",
                 "title": f"Redirecting to {app.name}...",
                 "attrs": {
-                    "access_token": token.token,
                     "id_token": provider.encode(token.id_token.to_dict()),
                     "token_type": TOKEN_TYPE,
                     "expires_in": "3600",

authentik/providers/oauth2/views/authorize.py

@@ -150,12 +150,12 @@ class OAuthAuthorizationParams:
         self.check_redirect_uri()
         self.check_grant()
         self.check_scope(github_compat)
-        self.check_nonce()
-        self.check_code_challenge()
         if self.request:
             raise AuthorizeError(
                 self.redirect_uri, "request_not_supported", self.grant_type, self.state
             )
+        self.check_nonce()
+        self.check_code_challenge()
 
     def check_grant(self):
         """Check grant"""
@@ -630,7 +630,6 @@ class OAuthFulfillmentStage(StageView):
         if self.params.response_type in [
             ResponseTypes.ID_TOKEN_TOKEN,
             ResponseTypes.CODE_ID_TOKEN_TOKEN,
-            ResponseTypes.ID_TOKEN,
             ResponseTypes.CODE_TOKEN,
         ]:
             query_fragment["access_token"] = token.token

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.6.1 Blueprint schema",
+    "title": "authentik 2025.6.2 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.6.1}
+    image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2025.6.2}
     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.6.1}
+    image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2025.6.2}
     restart: unless-stopped
     command: worker
     environment:

go.mod

@@ -29,7 +29,7 @@ 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.2025061.2
+	goauthentik.io/api/v3 v3.2025062.1
 	golang.org/x/exp v0.0.0-20230210204819-062eb4c674ab
 	golang.org/x/oauth2 v0.30.0
 	golang.org/x/sync v0.15.0

go.sum

@@ -298,8 +298,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.2025061.2 h1:bKmrl82Gz6J8lz3f+QIH9g+MEkl3MvkMXF34GktesA0=
-goauthentik.io/api/v3 v3.2025061.2/go.mod h1:zz+mEZg8rY/7eEjkMGWJ2DnGqk+zqxuybGCGrR2O4Kw=
+goauthentik.io/api/v3 v3.2025062.1 h1:spvILDpDDWJNO3pM6QGqmryx6NvSchr1E8H60J/XUCA=
+goauthentik.io/api/v3 v3.2025062.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=

internal/constants/constants.go

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

lifecycle/aws/template.yaml

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

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@goauthentik/authentik",
-    "version": "2025.6.1",
+    "version": "2025.6.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@goauthentik/authentik",
-            "version": "2025.6.1",
+            "version": "2025.6.2",
             "devDependencies": {
                 "@trivago/prettier-plugin-sort-imports": "^5.2.2",
                 "prettier": "^3.3.3",

package.json

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

packages/eslint-config/package-lock.json

@@ -216,9 +216,9 @@
             }
         },
         "node_modules/@eslint/config-array": {
-            "version": "0.20.0",
-            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
-            "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+            "version": "0.20.1",
+            "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.1.tgz",
+            "integrity": "sha512-OL0RJzC/CBzli0DrrR31qzj6d6i6Mm3HByuhflhl4LOBiWxN+3i6/t/ZQQNii4tjksXi8r2CRW1wMpWA2ULUEw==",
             "license": "Apache-2.0",
             "dependencies": {
                 "@eslint/object-schema": "^2.1.6",
@@ -274,9 +274,9 @@
             }
         },
         "node_modules/@eslint/js": {
-            "version": "9.28.0",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.28.0.tgz",
-            "integrity": "sha512-fnqSjGWd/CoIp4EXIxWVK/sHA6DOHN4+8Ix2cX5ycOY7LG0UY8nHCU5pIp2eaE1Mc7Qd8kHspYNzYXT2ojPLzg==",
+            "version": "9.29.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.29.0.tgz",
+            "integrity": "sha512-3PIF4cBw/y+1u2EazflInpV+lYsSG0aByVIQzAgb1m1MhHFSbqTyNqtBKHgWf/9Ykud+DhILS9EGkmekVhbKoQ==",
             "license": "MIT",
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -576,17 +576,17 @@
             "license": "MIT"
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.34.0.tgz",
-            "integrity": "sha512-QXwAlHlbcAwNlEEMKQS2RCgJsgXrTJdjXT08xEgbPFa2yYQgVjBymxP5DrfrE7X7iodSzd9qBUHUycdyVJTW1w==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.34.1.tgz",
+            "integrity": "sha512-STXcN6ebF6li4PxwNeFnqF8/2BNDvBupf2OPx2yWNzr6mKNGF7q49VM00Pz5FaomJyqvbXpY6PhO+T9w139YEQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.10.0",
-                "@typescript-eslint/scope-manager": "8.34.0",
-                "@typescript-eslint/type-utils": "8.34.0",
-                "@typescript-eslint/utils": "8.34.0",
-                "@typescript-eslint/visitor-keys": "8.34.0",
+                "@typescript-eslint/scope-manager": "8.34.1",
+                "@typescript-eslint/type-utils": "8.34.1",
+                "@typescript-eslint/utils": "8.34.1",
+                "@typescript-eslint/visitor-keys": "8.34.1",
                 "graphemer": "^1.4.0",
                 "ignore": "^7.0.0",
                 "natural-compare": "^1.4.0",
@@ -600,7 +600,7 @@
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "@typescript-eslint/parser": "^8.34.0",
+                "@typescript-eslint/parser": "^8.34.1",
                 "eslint": "^8.57.0 || ^9.0.0",
                 "typescript": ">=4.8.4 <5.9.0"
             }
@@ -616,16 +616,16 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.34.0.tgz",
-            "integrity": "sha512-vxXJV1hVFx3IXz/oy2sICsJukaBrtDEQSBiV48/YIV5KWjX1dO+bcIr/kCPrW6weKXvsaGKFNlwH0v2eYdRRbA==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.34.1.tgz",
+            "integrity": "sha512-4O3idHxhyzjClSMJ0a29AcoK0+YwnEqzI6oz3vlRf3xw0zbzt15MzXwItOlnr5nIth6zlY2RENLsOPvhyrKAQA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/scope-manager": "8.34.0",
-                "@typescript-eslint/types": "8.34.0",
-                "@typescript-eslint/typescript-estree": "8.34.0",
-                "@typescript-eslint/visitor-keys": "8.34.0",
+                "@typescript-eslint/scope-manager": "8.34.1",
+                "@typescript-eslint/types": "8.34.1",
+                "@typescript-eslint/typescript-estree": "8.34.1",
+                "@typescript-eslint/visitor-keys": "8.34.1",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -641,14 +641,14 @@
             }
         },
         "node_modules/@typescript-eslint/project-service": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.34.0.tgz",
-            "integrity": "sha512-iEgDALRf970/B2YExmtPMPF54NenZUf4xpL3wsCRx/lgjz6ul/l13R81ozP/ZNuXfnLCS+oPmG7JIxfdNYKELw==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.34.1.tgz",
+            "integrity": "sha512-nuHlOmFZfuRwLJKDGQOVc0xnQrAmuq1Mj/ISou5044y1ajGNp2BNliIqp7F2LPQ5sForz8lempMFCovfeS1XoA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/tsconfig-utils": "^8.34.0",
-                "@typescript-eslint/types": "^8.34.0",
+                "@typescript-eslint/tsconfig-utils": "^8.34.1",
+                "@typescript-eslint/types": "^8.34.1",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -663,14 +663,14 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.34.0.tgz",
-            "integrity": "sha512-9Ac0X8WiLykl0aj1oYQNcLZjHgBojT6cW68yAgZ19letYu+Hxd0rE0veI1XznSSst1X5lwnxhPbVdwjDRIomRw==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.34.1.tgz",
+            "integrity": "sha512-beu6o6QY4hJAgL1E8RaXNC071G4Kso2MGmJskCFQhRhg8VOH/FDbC8soP8NHN7e/Hdphwp8G8cE6OBzC8o41ZA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.34.0",
-                "@typescript-eslint/visitor-keys": "8.34.0"
+                "@typescript-eslint/types": "8.34.1",
+                "@typescript-eslint/visitor-keys": "8.34.1"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -681,9 +681,9 @@
             }
         },
         "node_modules/@typescript-eslint/tsconfig-utils": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.34.0.tgz",
-            "integrity": "sha512-+W9VYHKFIzA5cBeooqQxqNriAP0QeQ7xTiDuIOr71hzgffm3EL2hxwWBIIj4GuofIbKxGNarpKqIq6Q6YrShOA==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.34.1.tgz",
+            "integrity": "sha512-K4Sjdo4/xF9NEeA2khOb7Y5nY6NSXBnod87uniVYW9kHP+hNlDV8trUSFeynA2uxWam4gIWgWoygPrv9VMWrYg==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -698,14 +698,14 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.34.0.tgz",
-            "integrity": "sha512-n7zSmOcUVhcRYC75W2pnPpbO1iwhJY3NLoHEtbJwJSNlVAZuwqu05zY3f3s2SDWWDSo9FdN5szqc73DCtDObAg==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.34.1.tgz",
+            "integrity": "sha512-Tv7tCCr6e5m8hP4+xFugcrwTOucB8lshffJ6zf1mF1TbU67R+ntCc6DzLNKM+s/uzDyv8gLq7tufaAhIBYeV8g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/typescript-estree": "8.34.0",
-                "@typescript-eslint/utils": "8.34.0",
+                "@typescript-eslint/typescript-estree": "8.34.1",
+                "@typescript-eslint/utils": "8.34.1",
                 "debug": "^4.3.4",
                 "ts-api-utils": "^2.1.0"
             },
@@ -722,9 +722,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.34.0.tgz",
-            "integrity": "sha512-9V24k/paICYPniajHfJ4cuAWETnt7Ssy+R0Rbcqo5sSFr3QEZ/8TSoUi9XeXVBGXCaLtwTOKSLGcInCAvyZeMA==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.34.1.tgz",
+            "integrity": "sha512-rjLVbmE7HR18kDsjNIZQHxmv9RZwlgzavryL5Lnj2ujIRTeXlKtILHgRNmQ3j4daw7zd+mQgy+uyt6Zo6I0IGA==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -736,16 +736,16 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.34.0.tgz",
-            "integrity": "sha512-rOi4KZxI7E0+BMqG7emPSK1bB4RICCpF7QD3KCLXn9ZvWoESsOMlHyZPAHyG04ujVplPaHbmEvs34m+wjgtVtg==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.34.1.tgz",
+            "integrity": "sha512-rjCNqqYPuMUF5ODD+hWBNmOitjBWghkGKJg6hiCHzUvXRy6rK22Jd3rwbP2Xi+R7oYVvIKhokHVhH41BxPV5mA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/project-service": "8.34.0",
-                "@typescript-eslint/tsconfig-utils": "8.34.0",
-                "@typescript-eslint/types": "8.34.0",
-                "@typescript-eslint/visitor-keys": "8.34.0",
+                "@typescript-eslint/project-service": "8.34.1",
+                "@typescript-eslint/tsconfig-utils": "8.34.1",
+                "@typescript-eslint/types": "8.34.1",
+                "@typescript-eslint/visitor-keys": "8.34.1",
                 "debug": "^4.3.4",
                 "fast-glob": "^3.3.2",
                 "is-glob": "^4.0.3",
@@ -765,9 +765,9 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+            "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -804,16 +804,16 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.34.0.tgz",
-            "integrity": "sha512-8L4tWatGchV9A1cKbjaavS6mwYwp39jql8xUmIIKJdm+qiaeHy5KMKlBrf30akXAWBzn2SqKsNOtSENWUwg7XQ==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.34.1.tgz",
+            "integrity": "sha512-mqOwUdZ3KjtGk7xJJnLbHxTuWVn3GO2WZZuM+Slhkun4+qthLdXx32C8xIXbO1kfCECb3jIs3eoxK3eryk7aoQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.7.0",
-                "@typescript-eslint/scope-manager": "8.34.0",
-                "@typescript-eslint/types": "8.34.0",
-                "@typescript-eslint/typescript-estree": "8.34.0"
+                "@typescript-eslint/scope-manager": "8.34.1",
+                "@typescript-eslint/types": "8.34.1",
+                "@typescript-eslint/typescript-estree": "8.34.1"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -828,14 +828,14 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.34.0.tgz",
-            "integrity": "sha512-qHV7pW7E85A0x6qyrFn+O+q1k1p3tQCsqIZ1KZ5ESLXY57aTvUd3/a4rdPTeXisvhXn2VQG0VSKUqs8KHF2zcA==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.34.1.tgz",
+            "integrity": "sha512-xoh5rJ+tgsRKoXnkBPFRLZ7rjKM0AfVbC68UZ/ECXoDbfggb9RbEySN359acY1vS3qZ0jVTVWzbtfapwm5ztxw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.34.0",
-                "eslint-visitor-keys": "^4.2.0"
+                "@typescript-eslint/types": "8.34.1",
+                "eslint-visitor-keys": "^4.2.1"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -846,9 +846,9 @@
             }
         },
         "node_modules/acorn": {
-            "version": "8.14.1",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-            "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+            "version": "8.15.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+            "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "license": "MIT",
             "bin": {
                 "acorn": "bin/acorn"
@@ -1554,18 +1554,18 @@
             }
         },
         "node_modules/eslint": {
-            "version": "9.28.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.28.0.tgz",
-            "integrity": "sha512-ocgh41VhRlf9+fVpe7QKzwLj9c92fDiqOj8Y3Sd4/ZmVA4Btx4PlUYPq4pp9JDyupkf1upbEXecxL2mwNV7jPQ==",
+            "version": "9.29.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.29.0.tgz",
+            "integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==",
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.12.1",
-                "@eslint/config-array": "^0.20.0",
+                "@eslint/config-array": "^0.20.1",
                 "@eslint/config-helpers": "^0.2.1",
                 "@eslint/core": "^0.14.0",
                 "@eslint/eslintrc": "^3.3.1",
-                "@eslint/js": "9.28.0",
+                "@eslint/js": "9.29.0",
                 "@eslint/plugin-kit": "^0.3.1",
                 "@humanfs/node": "^0.16.6",
                 "@humanwhocodes/module-importer": "^1.0.1",
@@ -1577,9 +1577,9 @@
                 "cross-spawn": "^7.0.6",
                 "debug": "^4.3.2",
                 "escape-string-regexp": "^4.0.0",
-                "eslint-scope": "^8.3.0",
-                "eslint-visitor-keys": "^4.2.0",
-                "espree": "^10.3.0",
+                "eslint-scope": "^8.4.0",
+                "eslint-visitor-keys": "^4.2.1",
+                "espree": "^10.4.0",
                 "esquery": "^1.5.0",
                 "esutils": "^2.0.2",
                 "fast-deep-equal": "^3.1.3",
@@ -1792,9 +1792,9 @@
             }
         },
         "node_modules/eslint-scope": {
-            "version": "8.3.0",
-            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
-            "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+            "version": "8.4.0",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+            "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
             "license": "BSD-2-Clause",
             "dependencies": {
                 "esrecurse": "^4.3.0",
@@ -1808,9 +1808,9 @@
             }
         },
         "node_modules/eslint-visitor-keys": {
-            "version": "4.2.0",
-            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-            "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+            "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
             "license": "Apache-2.0",
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1820,14 +1820,14 @@
             }
         },
         "node_modules/espree": {
-            "version": "10.3.0",
-            "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-            "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+            "version": "10.4.0",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+            "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
             "license": "BSD-2-Clause",
             "dependencies": {
-                "acorn": "^8.14.0",
+                "acorn": "^8.15.0",
                 "acorn-jsx": "^5.3.2",
-                "eslint-visitor-keys": "^4.2.0"
+                "eslint-visitor-keys": "^4.2.1"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4035,15 +4035,15 @@
             }
         },
         "node_modules/typescript-eslint": {
-            "version": "8.34.0",
-            "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.34.0.tgz",
-            "integrity": "sha512-MRpfN7uYjTrTGigFCt8sRyNqJFhjN0WwZecldaqhWm+wy0gaRt8Edb/3cuUy0zdq2opJWT6iXINKAtewnDOltQ==",
+            "version": "8.34.1",
+            "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.34.1.tgz",
+            "integrity": "sha512-XjS+b6Vg9oT1BaIUfkW3M3LvqZE++rbzAMEHuccCfO/YkP43ha6w3jTEMilQxMF92nVOYCcdjv1ZUhAa1D/0ow==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/eslint-plugin": "8.34.0",
-                "@typescript-eslint/parser": "8.34.0",
-                "@typescript-eslint/utils": "8.34.0"
+                "@typescript-eslint/eslint-plugin": "8.34.1",
+                "@typescript-eslint/parser": "8.34.1",
+                "@typescript-eslint/utils": "8.34.1"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "authentik"
-version = "2025.6.1"
+version = "2025.6.2"
 description = ""
 authors = [{ name = "authentik Team", email = "hello@goauthentik.io" }]
 requires-python = "==3.13.*"
@@ -48,7 +48,7 @@ dependencies = [
     "packaging==25.0",
     "paramiko==3.5.1",
     "psycopg[c,pool]==3.2.9",
-    "pydantic==2.11.5",
+    "pydantic==2.11.7",
     "pydantic-scim==0.0.8",
     "pyjwt==2.10.1",
     "pyrad==2.4",
@@ -68,7 +68,7 @@ dependencies = [
     "urllib3<3",
     "uvicorn[standard]==0.34.3",
     "watchdog==6.0.0",
-    "webauthn==2.5.2",
+    "webauthn==2.6.0",
     "wsproto==1.2.0",
     "xmlsec==1.3.15",
     "zxcvbn==4.5.0",
@@ -141,6 +141,7 @@ skip = [
     "**/web/src/locales",
     "**/web/xliff",
     "**/web/out",
+    "**/web/playwright-report",
     "./web/storybook-static",
     "./web/custom-elements.json",
     "./website/build",

schema.yml

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

tests/e2e/docker-compose.yml

@@ -7,7 +7,7 @@ services:
     network_mode: host
     restart: always
   mailpit:
-    image: docker.io/axllent/mailpit:v1.26.0
+    image: docker.io/axllent/mailpit:v1.26.1
     ports:
       - 1025:1025
       - 8025:8025

uv.lock

@@ -165,7 +165,7 @@ wheels = [
 
 [[package]]
 name = "authentik"
-version = "2025.6.1"
+version = "2025.6.2"
 source = { editable = "." }
 dependencies = [
     { name = "argon2-cffi" },
@@ -309,7 +309,7 @@ requires-dist = [
     { name = "packaging", specifier = "==25.0" },
     { name = "paramiko", specifier = "==3.5.1" },
     { name = "psycopg", extras = ["c", "pool"], specifier = "==3.2.9" },
-    { name = "pydantic", specifier = "==2.11.5" },
+    { name = "pydantic", specifier = "==2.11.7" },
     { name = "pydantic-scim", specifier = "==0.0.8" },
     { name = "pyjwt", specifier = "==2.10.1" },
     { name = "pyrad", specifier = "==2.4" },
@@ -329,7 +329,7 @@ requires-dist = [
     { name = "urllib3", specifier = "<3" },
     { name = "uvicorn", extras = ["standard"], specifier = "==0.34.3" },
     { name = "watchdog", specifier = "==6.0.0" },
-    { name = "webauthn", specifier = "==2.5.2" },
+    { name = "webauthn", specifier = "==2.6.0" },
     { name = "wsproto", specifier = "==1.2.0" },
     { name = "xmlsec", specifier = "==1.3.15" },
     { name = "zxcvbn", specifier = "==4.5.0" },
@@ -2463,7 +2463,7 @@ wheels = [
 
 [[package]]
 name = "pydantic"
-version = "2.11.5"
+version = "2.11.7"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "annotated-types" },
@@ -2471,9 +2471,9 @@ dependencies = [
     { name = "typing-extensions" },
     { name = "typing-inspection" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/f0/86/8ce9040065e8f924d642c58e4a344e33163a07f6b57f836d0d734e0ad3fb/pydantic-2.11.5.tar.gz", hash = "sha256:7f853db3d0ce78ce8bbb148c401c2cdd6431b3473c0cdff2755c7690952a7b7a", size = 787102, upload-time = "2025-05-22T21:18:08.761Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/00/dd/4325abf92c39ba8623b5af936ddb36ffcfe0beae70405d456ab1fb2f5b8c/pydantic-2.11.7.tar.gz", hash = "sha256:d989c3c6cb79469287b1569f7447a17848c998458d49ebe294e975b9baf0f0db", size = 788350, upload-time = "2025-06-14T08:33:17.137Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/b5/69/831ed22b38ff9b4b64b66569f0e5b7b97cf3638346eb95a2147fdb49ad5f/pydantic-2.11.5-py3-none-any.whl", hash = "sha256:f9c26ba06f9747749ca1e5c94d6a85cb84254577553c8785576fd38fa64dc0f7", size = 444229, upload-time = "2025-05-22T21:18:06.329Z" },
+    { url = "https://files.pythonhosted.org/packages/6a/c0/ec2b1c8712ca690e5d61979dee872603e92b8a32f94cc1b72d53beab008a/pydantic-2.11.7-py3-none-any.whl", hash = "sha256:dde5df002701f6de26248661f6835bbe296a47bf73990135c7d07ce741b9623b", size = 444782, upload-time = "2025-06-14T08:33:14.905Z" },
 ]
 
 [package.optional-dependencies]
@@ -3391,7 +3391,7 @@ wheels = [
 
 [[package]]
 name = "webauthn"
-version = "2.5.2"
+version = "2.6.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "asn1crypto" },
@@ -3399,9 +3399,9 @@ dependencies = [
     { name = "cryptography" },
     { name = "pyopenssl" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/8d/92/8d2a4eec83d8e7feacdaad37c6eb6eb922100cecce5c14a41d8069a59a03/webauthn-2.5.2.tar.gz", hash = "sha256:09c13dfc1c68c810f32fa4d89b1d37acb9f9ae9091c9d7019e313be4525a95ef", size = 124114, upload-time = "2025-03-07T19:44:05.243Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/63/38/5792cb2034673c162a721df0ad65825699516ee0c938a65670ad3cdabf6c/webauthn-2.6.0.tar.gz", hash = "sha256:13cf5b009a64cef569599ffecf24550df1d7c0cd4fbaea870f937148484a80b4", size = 123608, upload-time = "2025-06-16T22:25:26.76Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/7f/fe/f6ae41de9f383439e30b303a67f6f45d2fceabedaedc34c62f74d58c5c73/webauthn-2.5.2-py3-none-any.whl", hash = "sha256:44246e496e617eb5e2f51165046b9f0197fcdf470f69cd6734061a27ba365f8e", size = 71624, upload-time = "2025-03-07T19:44:03.728Z" },
+    { url = "https://files.pythonhosted.org/packages/56/c5/b1bba7f6a50caca77f37003e098f48f8dc68d990aba8a03ac8376016430b/webauthn-2.6.0-py3-none-any.whl", hash = "sha256:459973eb5780c1f41bec42b682acf587456b185733398a0b99a0714705b79447", size = 71189, upload-time = "2025-06-16T22:25:25.535Z" },
 ]
 
 [[package]]

web/.gitignore

@@ -25,6 +25,8 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+playwright-report
+test-results
 *.lcov
 
 # nyc test coverage

web/.storybook/main.js

@@ -27,11 +27,6 @@ const inlineCSSPlugin = {
     },
 };
 
-/**
- * @satisfies {InlineConfig}
- */
-// const viteFinal = ;
-
 /**
  * @satisfies {StorybookConfig}
  */

web/e2e/elements/proxy.ts

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { LocatorContext } from "#e2e/selectors/types";
+import { ConsoleLogger } from "#logger/node";
+import { Locator, Page, expect } from "@playwright/test";
+import { kebabCase } from "change-case";
+
+export type LocatorMatchers = ReturnType<typeof expect<Locator>>;
+
+export interface LocatorProxy extends Pick<Locator, keyof Locator> {
+    $: Locator;
+    expect: LocatorMatchers;
+}
+
+// Type helpers to extract the shape of the proxy
+export type DeepLocatorProxy<T> =
+    Disposable & T extends Record<string, any>
+        ? T extends HTMLElement
+            ? LocatorProxy
+            : {
+                  [K in keyof T]: DeepLocatorProxy<T[K]>;
+              }
+        : LocatorProxy;
+
+export function createLocatorProxy<T extends Record<string, any>>(
+    ctx: LocatorContext,
+    initialPathPrefix: string[] = [],
+    dataAttribute: string = "test-id",
+): DeepLocatorProxy<T> {
+    dataAttribute = kebabCase(dataAttribute);
+
+    function createProxy(path: string[] = initialPathPrefix): any {
+        const proxyCache = new Map<string, LocatorProxy>();
+
+        return new Proxy({} as any, {
+            get(_, property: string) {
+                // Build the current path
+                const currentPath = [...path, property];
+
+                // Convert the path to kebab-case and join with hyphens
+                const selectorValue = currentPath.map((segment) => kebabCase(segment)).join("-");
+                const selector = `[data-${dataAttribute}="${selectorValue}"]`;
+
+                // Create a locator for the current selector
+                const locator = ctx.locator(selector);
+
+                if (proxyCache.has(selector)) {
+                    ConsoleLogger.debug(`Using cached locator for ${selector}`);
+                    return proxyCache.get(selector)!;
+                }
+
+                // Return a new proxy that also behaves like a Locator
+                // This allows us to either continue chaining or use Locator methods
+                const nextProxy = new Proxy(locator, {
+                    get(target, prop) {
+                        if (typeof prop === "string") {
+                            // The user is likely trying to access a property on the page.
+                            if (prop === "$") {
+                                return target as any;
+                            }
+
+                            if (prop === "expect") {
+                                return expect(target);
+                            }
+                        }
+
+                        // If the property exists on the Locator, use it
+                        if (prop in target) {
+                            const value = (target as any)[prop];
+                            // Bind methods to the locator instance
+                            if (typeof value === "function") {
+                                return value.bind(target);
+                            }
+                            return value;
+                        }
+                        // Otherwise, continue building the path
+
+                        return createProxy(currentPath)[prop];
+                    },
+                });
+
+                proxyCache.set(selector, nextProxy as LocatorProxy);
+
+                return nextProxy;
+            },
+        });
+    }
+
+    return createProxy() as DeepLocatorProxy<T>;
+}

web/e2e/fixtures/FormFixture.ts

@@ -0,0 +1,174 @@
+import { PageFixture } from "#e2e/fixtures/PageFixture";
+import type { LocatorContext } from "#e2e/selectors/types";
+import { Page, expect } from "@playwright/test";
+
+export class FormFixture extends PageFixture {
+    static fixtureName = "Form";
+
+    //#region Selector Methods
+
+    //#endregion
+
+    //#region Field Methods
+
+    /**
+     * Set the value of a text input.
+     *
+     * @param fieldName The name of the form element.
+     * @param value the value to set.
+     */
+    public fill = async (
+        fieldName: string,
+        value: string,
+        parent: LocatorContext = this.page,
+    ): Promise<void> => {
+        const control = parent
+            .getByRole("textbox", {
+                name: fieldName,
+            })
+            .or(
+                parent.getByRole("spinbutton", {
+                    name: fieldName,
+                }),
+            )
+            .first();
+
+        await expect(control, `Field (${fieldName}) should be visible`).toBeVisible();
+
+        await control.fill(value);
+    };
+
+    /**
+     * Set the value of a radio or checkbox input.
+     *
+     * @param fieldName The name of the form element.
+     * @param value the value to set.
+     */
+    public setInputCheck = async (
+        fieldName: string,
+        value: boolean = true,
+        parent: LocatorContext = this.page,
+    ): Promise<void> => {
+        const control = parent.locator("ak-switch-input", {
+            hasText: fieldName,
+        });
+
+        await control.scrollIntoViewIfNeeded();
+
+        await expect(control, `Field (${fieldName}) should be visible`).toBeVisible();
+
+        const currentChecked = await control
+            .getAttribute("checked")
+            .then((value) => value !== null);
+
+        if (currentChecked === value) {
+            return;
+        }
+
+        await control.click();
+    };
+
+    /**
+     * Set the value of a radio or checkbox input.
+     *
+     * @param fieldName The name of the form element.
+     * @param pattern the value to set.
+     */
+    public setRadio = async (
+        groupName: string,
+        fieldName: string,
+        parent: LocatorContext = this.page,
+    ): Promise<void> => {
+        const group = parent.getByRole("group", { name: groupName });
+
+        await expect(group, `Field "${groupName}" should be visible`).toBeVisible();
+        const control = parent.getByRole("radio", { name: fieldName });
+
+        await control.setChecked(true, {
+            force: true,
+        });
+    };
+
+    /**
+     * Set the value of a search select input.
+     *
+     * @param fieldLabel The name of the search select element.
+     * @param pattern The text to match against the search select entry.
+     */
+    public selectSearchValue = async (
+        fieldLabel: string,
+        pattern: string | RegExp,
+        parent: LocatorContext = this.page,
+    ): Promise<void> => {
+        const control = parent.getByRole("textbox", { name: fieldLabel });
+
+        await expect(
+            control,
+            `Search select control (${fieldLabel}) should be visible`,
+        ).toBeVisible();
+
+        const fieldName = await control.getAttribute("name");
+
+        if (!fieldName) {
+            throw new Error(`Unable to find name attribute on search select (${fieldLabel})`);
+        }
+
+        // Find the search select input control and activate it.
+        await control.click();
+
+        const button = this.page
+            // ---
+            .locator(`div[data-managed-for*="${fieldName}"] button`, {
+                hasText: pattern,
+            });
+
+        if (!button) {
+            throw new Error(
+                `Unable to find an ak-search-select entry matching ${fieldLabel}:${pattern.toString()}`,
+            );
+        }
+
+        await button.click();
+        await this.page.keyboard.press("Tab");
+        await control.blur();
+    };
+
+    public setFormGroup = async (
+        pattern: string | RegExp,
+        value: boolean = true,
+        parent: LocatorContext = this.page,
+    ) => {
+        const control = parent
+            .locator("ak-form-group", {
+                hasText: pattern,
+            })
+            .first();
+
+        const currentOpen = await control.getAttribute("open").then((value) => value !== null);
+
+        if (currentOpen === value) {
+            this.logger.debug(`Form group ${pattern} is already ${value ? "open" : "closed"}`);
+            return;
+        }
+
+        this.logger.debug(`Toggling form group ${pattern} to ${value ? "open" : "closed"}`);
+
+        await control.click();
+
+        if (value) {
+            await expect(control).toHaveAttribute("open");
+        } else {
+            await expect(control).not.toHaveAttribute("open");
+        }
+    };
+
+    //#endregion
+
+    //#region Lifecycle
+
+    constructor(page: Page, testName: string) {
+        super({ page, testName });
+    }
+
+    //#endregion
+}

web/e2e/fixtures/PageFixture.ts

@@ -0,0 +1,29 @@
+import { ConsoleLogger, FixtureLogger } from "#logger/node";
+import { Page } from "@playwright/test";
+
+export interface PageFixtureOptions {
+    page: Page;
+    testName: string;
+}
+
+export abstract class PageFixture {
+    /**
+     * The name of the fixture.
+     *
+     * Used for logging.
+     */
+    static fixtureName: string;
+
+    protected readonly logger: FixtureLogger;
+    protected readonly page: Page;
+    protected readonly testName: string;
+
+    constructor({ page, testName }: PageFixtureOptions) {
+        this.page = page;
+        this.testName = testName;
+
+        const Constructor = this.constructor as typeof PageFixture;
+
+        this.logger = ConsoleLogger.fixture(Constructor.fixtureName, this.testName);
+    }
+}

web/e2e/fixtures/PointerFixture.ts

@@ -0,0 +1,41 @@
+import { PageFixture } from "#e2e/fixtures/PageFixture";
+import type { LocatorContext } from "#e2e/selectors/types";
+import { Page } from "@playwright/test";
+
+export type GetByRoleParameters = Parameters<Page["getByRole"]>;
+export type ARIARole = GetByRoleParameters[0];
+export type ARIAOptions = GetByRoleParameters[1];
+
+export type ClickByName = (name: string) => Promise<void>;
+export type ClickByRole = (
+    role: ARIARole,
+    options?: ARIAOptions,
+    context?: LocatorContext,
+) => Promise<void>;
+
+export class PointerFixture extends PageFixture {
+    public static fixtureName = "Pointer";
+
+    public click = (
+        name: string,
+        optionsOrRole?: ARIAOptions | ARIARole,
+        context: LocatorContext = this.page,
+    ): Promise<void> => {
+        if (typeof optionsOrRole === "string") {
+            return context.getByRole(optionsOrRole, { name }).click();
+        }
+
+        const options = {
+            ...optionsOrRole,
+            name,
+        };
+
+        return (
+            context
+                // ---
+                .getByRole("button", options)
+                .or(context.getByRole("link", options))
+                .click()
+        );
+    };
+}

web/e2e/fixtures/SessionFixture.ts

@@ -0,0 +1,118 @@
+import { PageFixture } from "#e2e/fixtures/PageFixture";
+import { Page, expect } from "@playwright/test";
+
+export const GOOD_USERNAME = "test-admin@goauthentik.io";
+export const GOOD_PASSWORD = "test-runner";
+
+export const BAD_USERNAME = "bad-username@bad-login.io";
+export const BAD_PASSWORD = "-this-is-a-bad-password-";
+
+export interface LoginInit {
+    username?: string;
+    password?: string;
+    to?: URL | string;
+}
+
+export class SessionFixture extends PageFixture {
+    static fixtureName = "Session";
+
+    public static readonly pathname = "/if/flow/default-authentication-flow/";
+
+    //#region Selectors
+
+    public $identificationStage = this.page.locator("ak-stage-identification");
+
+    /**
+     * The username field on the login page.
+     */
+    public $usernameField = this.$identificationStage.locator('input[name="uidField"]');
+
+    /**
+     * The button to continue with the login process,
+     * typically to the password flow stage.
+     */
+    public $submitUsernameStageButton = this.$identificationStage.locator('button[type="submit"]');
+
+    public $passwordStage = this.page.locator("ak-stage-password");
+    public $passwordField = this.$passwordStage.locator('input[name="password"]');
+    /**
+     * The button to submit the the login flow,
+     * typically redirecting to the authenticated interface.
+     */
+    public $submitPasswordStageButton = this.$passwordStage.locator('button[type="submit"]');
+
+    /**
+     * A possible authentication failure message.
+     */
+    public $authFailureMessage = this.page.locator(".pf-m-error");
+
+    //#endregion
+
+    constructor(page: Page, testName: string) {
+        super({ page, testName });
+    }
+
+    //#region Specific interactions
+
+    public async submitUsernameStage(username: string) {
+        this.logger.info("Submitting username stage", username);
+
+        await this.$usernameField.fill(username);
+
+        await expect(this.$submitUsernameStageButton).toBeEnabled();
+
+        await this.$submitUsernameStageButton.click();
+    }
+
+    public async submitPasswordStage(password: string) {
+        this.logger.info("Submitting password stage");
+
+        await this.$passwordField.fill(password);
+
+        await expect(this.$submitPasswordStageButton).toBeEnabled();
+
+        await this.$submitPasswordStageButton.click();
+    }
+
+    public checkAuthenticated = async (): Promise<boolean> => {
+        // TODO: Check if the user is authenticated via API
+        return true;
+    };
+
+    /**
+     * Log into the application.
+     */
+    public async login({
+        username = GOOD_USERNAME,
+        password = GOOD_PASSWORD,
+        to = SessionFixture.pathname,
+    }: LoginInit = {}) {
+        this.logger.info("Logging in...");
+
+        const initialURL = new URL(this.page.url());
+
+        if (initialURL.pathname === SessionFixture.pathname) {
+            this.logger.info("Skipping navigation because we're already in a authentication flow");
+        } else {
+            await this.page.goto(to.toString());
+        }
+
+        await this.submitUsernameStage(username);
+
+        await this.$passwordField.waitFor({ state: "visible" });
+
+        await this.submitPasswordStage(password);
+
+        const expectedPathname = typeof to === "string" ? to : to.pathname;
+
+        await this.page.waitForURL(`**${expectedPathname}`);
+    }
+
+    //#endregion
+
+    //#region Navigation
+
+    public async toLoginPage() {
+        await this.page.goto(SessionFixture.pathname);
+    }
+}

web/e2e/index.ts

@@ -0,0 +1,55 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { DeepLocatorProxy, createLocatorProxy } from "#e2e/elements/proxy";
+import { FormFixture } from "#e2e/fixtures/FormFixture";
+import { PointerFixture } from "#e2e/fixtures/PointerFixture";
+import { SessionFixture } from "#e2e/fixtures/SessionFixture";
+import { createOUIDNameEngine } from "#e2e/selectors/ouid";
+import { type Page, test as base } from "@playwright/test";
+
+export { expect } from "@playwright/test";
+
+type TestIDLocatorProxy = DeepLocatorProxy<TestIDSelectorMap>;
+
+interface E2EFixturesTestScope {
+    /**
+     * A proxy to retrieve elements by test ID.
+     *
+     * ```ts
+     * const $button = $.button;
+     * ```
+     */
+    $: TestIDLocatorProxy;
+    session: SessionFixture;
+    pointer: PointerFixture;
+    form: FormFixture;
+}
+
+interface E2EWorkerScope {
+    selectorRegistration: void;
+}
+
+export const test = base.extend<E2EFixturesTestScope, E2EWorkerScope>({
+    selectorRegistration: [
+        async ({ playwright }, use) => {
+            await playwright.selectors.register("ouid", createOUIDNameEngine);
+            await use();
+        },
+        { auto: true, scope: "worker" },
+    ],
+
+    $: async ({ page }, use) => {
+        await use(createLocatorProxy<TestIDSelectorMap>(page));
+    },
+
+    session: async ({ page }, use, { title }) => {
+        await use(new SessionFixture(page, title));
+    },
+
+    form: async ({ page }, use, { title }) => {
+        await use(new FormFixture(page, title));
+    },
+
+    pointer: async ({ page }, use, { title }) => {
+        await use(new PointerFixture({ page, testName: title }));
+    },
+});

web/e2e/selectors/ouid.ts

@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+
+type SelectorRoot = Document | ShadowRoot;
+
+export function createOUIDNameEngine() {
+    const attributeName = "data-ouid-component-name";
+
+    console.log("Creating OUID selector engine!!");
+    return {
+        // Returns all elements matching given selector in the root's subtree.
+        queryAll(scope: SelectorRoot, componentName: string) {
+            const result: Element[] = [];
+
+            const match = (element: Element) => {
+                const name = element.getAttribute(attributeName);
+
+                if (name === componentName) {
+                    result.push(element);
+                }
+            };
+
+            const query = (root: Element | ShadowRoot | Document) => {
+                const shadows: ShadowRoot[] = [];
+
+                if ((root as Element).shadowRoot) {
+                    shadows.push((root as Element).shadowRoot!);
+                }
+
+                for (const element of root.querySelectorAll("*")) {
+                    match(element);
+
+                    if (element.shadowRoot) {
+                        shadows.push(element.shadowRoot);
+                    }
+                }
+
+                shadows.forEach(query);
+            };
+
+            query(scope);
+            return result;
+        },
+    };
+}

web/e2e/selectors/types.ts

@@ -0,0 +1,13 @@
+import type { Locator } from "@playwright/test";
+
+export type LocatorContext = Pick<
+    Locator,
+    | "locator"
+    | "getByRole"
+    | "getByTestId"
+    | "getByText"
+    | "getByLabel"
+    | "getByAltText"
+    | "getByTitle"
+    | "getByPlaceholder"
+>;

web/e2e/utils/generators.ts

@@ -0,0 +1,59 @@
+import { IDGenerator } from "@goauthentik/core/id";
+import {
+    Config as NameConfig,
+    adjectives,
+    colors,
+    uniqueNamesGenerator,
+} from "unique-names-generator";
+
+/**
+ * Given a dictionary of words, slice the dictionary to only include words that start with the given letter.
+ */
+export function alliterate(dictionary: string[], letter: string): string[] {
+    let firstIndex = 0;
+
+    for (let i = 0; i < dictionary.length; i++) {
+        if (dictionary[i][0] === letter) {
+            firstIndex = i;
+            break;
+        }
+    }
+
+    let lastIndex = firstIndex;
+
+    for (let i = firstIndex; i < dictionary.length; i++) {
+        if (dictionary[i][0] !== letter) {
+            lastIndex = i;
+            break;
+        }
+    }
+
+    return dictionary.slice(firstIndex, lastIndex);
+}
+
+export function createRandomName({
+    seed = IDGenerator.randomID(),
+    ...config
+}: Partial<NameConfig> = {}) {
+    const randomLetterIndex =
+        typeof seed === "number"
+            ? seed
+            : Array.from(seed).reduce((acc, char) => acc + char.charCodeAt(0), 0);
+
+    const letter = adjectives[randomLetterIndex % adjectives.length][0];
+
+    const availableAdjectives = alliterate(adjectives, letter);
+
+    const availableColors = alliterate(colors, letter);
+
+    const name = uniqueNamesGenerator({
+        dictionaries: [availableAdjectives, availableAdjectives, availableColors],
+        style: "capital",
+        separator: " ",
+        length: 3,
+        seed,
+        ...config,
+    });
+
+    return name;
+}

web/logger/node.js

@@ -0,0 +1,101 @@
+/**
+ * Application logger.
+ *
+ * @import { LoggerOptions, Logger, Level, ChildLoggerOptions } from "pino"
+ * @import { PrettyOptions } from "pino-pretty"
+ */
+import { pino } from "pino";
+
+//#region Constants
+
+/**
+ * Default options for creating a Pino logger.
+ *
+ * @category Logger
+ * @satisfies {LoggerOptions<never, false>}
+ */
+export const DEFAULT_PINO_LOGGER_OPTIONS = {
+    enabled: true,
+    level: "info",
+    transport: {
+        target: "./transport.js",
+        options: /** @satisfies {PrettyOptions} */ ({
+            colorize: true,
+        }),
+    },
+};
+
+//#endregion
+
+//#region Functions
+
+/**
+ * Read the log level from the environment.
+ * @return {Level}
+ */
+export function readLogLevel() {
+    return process.env.AK_LOG_LEVEL || DEFAULT_PINO_LOGGER_OPTIONS.level;
+}
+
+/**
+ * @typedef {Logger} FixtureLogger
+ */
+
+/**
+ * @this {Logger}
+ * @param {string} fixtureName
+ * @param {string} [testName]
+ * @param {ChildLoggerOptions} [options]
+ * @returns {FixtureLogger}
+ */
+function createFixtureLogger(fixtureName, testName, options) {
+    return this.child(
+        { name: fixtureName },
+        {
+            msgPrefix: `[${testName}] `,
+            ...options,
+        },
+    );
+}
+
+/**
+ * @typedef {object} CustomLoggerMethods
+ * @property {typeof createFixtureLogger} fixture
+ */
+
+/**
+ * @typedef {Logger & CustomLoggerMethods} ConsoleLogger
+ */
+
+/**
+ * A singleton logger instance for Node.js.
+ *
+ * ```js
+ * import { ConsoleLogger } from "#logger/node";
+ *
+ * ConsoleLogger.info("Hello, world!");
+ * ```
+ *
+ * @runtime node
+ * @type {ConsoleLogger}
+ */
+export const ConsoleLogger = Object.assign(
+    pino({
+        ...DEFAULT_PINO_LOGGER_OPTIONS,
+        level: readLogLevel(),
+    }),
+    { fixture: createFixtureLogger },
+);
+
+/**
+ * @typedef {ReturnType<ConsoleLogger['child']>} ChildConsoleLogger
+ */
+
+//#region Aliases
+
+export const info = ConsoleLogger.info.bind(ConsoleLogger);
+export const debug = ConsoleLogger.debug.bind(ConsoleLogger);
+export const warn = ConsoleLogger.warn.bind(ConsoleLogger);
+export const error = ConsoleLogger.error.bind(ConsoleLogger);
+
+//#endregion

web/logger/transport.js

@@ -0,0 +1,21 @@
+/**
+ * @file Pretty transport for Pino
+ *
+ * @import { PrettyOptions } from "pino-pretty"
+ */
+import PinoPretty from "pino-pretty";
+
+/**
+ * @param {PrettyOptions} options
+ */
+function prettyTransporter(options) {
+    const pretty = PinoPretty({
+        ...options,
+        ignore: "pid,hostname",
+        translateTime: "SYS:HH:MM:ss",
+    });
+
+    return pretty;
+}
+
+export default prettyTransporter;

web/package.json

@@ -24,8 +24,8 @@
         "pseudolocalize": "node ./scripts/pseudolocalize.mjs",
         "storybook": "storybook dev -p 6006",
         "storybook:build": "wireit",
-        "test": "wireit",
-        "test:e2e": "wireit",
+        "test": "vitest",
+        "test:e2e": "playwright test",
         "test:e2e:watch": "wireit",
         "test:watch": "wireit",
         "tsc": "wireit",
@@ -69,6 +69,9 @@
         "#flow/*": "./src/flow/*.js",
         "#locales/*": "./src/locales/*.js",
         "#stories/*": "./src/stories/*.js",
+        "#tests/*": "./tests/*.js",
+        "#e2e": "./e2e/index.ts",
+        "#e2e/*": "./e2e/*.ts",
         "#*/browser": {
             "types": "./out/*/browser.d.ts",
             "import": "./*/browser.js"
@@ -102,8 +105,8 @@
         "@open-wc/lit-helpers": "^0.7.0",
         "@patternfly/elements": "^4.1.0",
         "@patternfly/patternfly": "^4.224.2",
-        "@sentry/browser": "^9.28.1",
-        "@spotlightjs/spotlight": "^3.0.0",
+        "@sentry/browser": "^9.28.0",
+        "@spotlightjs/spotlight": "^2.13.3",
         "@webcomponents/webcomponentsjs": "^2.8.0",
         "base64-js": "^1.5.1",
         "change-case": "^5.4.4",
@@ -121,7 +124,9 @@
         "hastscript": "^9.0.1",
         "lit": "^3.2.0",
         "md-front-matter": "^1.0.4",
-        "mermaid": "^11.6.0",
+        "mermaid": "^11.4.1",
+        "pino": "^9.7.0",
+        "pino-pretty": "^13.0.0",
         "rapidoc": "^9.3.8",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -149,6 +154,7 @@
         "@goauthentik/tsconfig": "^1.0.4",
         "@hcaptcha/types": "^1.0.4",
         "@lit/localize-tools": "^0.8.0",
+        "@playwright/test": "^1.52.0",
         "@storybook/addon-essentials": "^8.6.14",
         "@storybook/addon-links": "^8.6.14",
         "@storybook/blocks": "^8.6.12",
@@ -158,6 +164,7 @@
         "@storybook/test": "^8.6.14",
         "@storybook/web-components": "^8.6.14",
         "@storybook/web-components-vite": "^8.6.14",
+        "@testing-library/dom": "^10.4.0",
         "@trivago/prettier-plugin-sort-imports": "^5.2.2",
         "@types/chart.js": "^2.9.41",
         "@types/codemirror": "^5.60.15",
@@ -170,12 +177,10 @@
         "@types/react-dom": "^19.1.5",
         "@typescript-eslint/eslint-plugin": "^8.8.0",
         "@typescript-eslint/parser": "^8.8.0",
-        "@wdio/browser-runner": "9.4",
-        "@wdio/cli": "9.4",
-        "@wdio/spec-reporter": "^9.1.2",
-        "@web/test-runner": "^0.20.2",
-        "chromedriver": "^136.0.3",
-        "esbuild": "^0.25.5",
+        "@vitest/browser": "^3.2.0",
+        "@wdio/cli": "^9.15.0",
+        "@wdio/spec-reporter": "^9.15.0",
+        "esbuild": "^0.25.4",
         "esbuild-plugin-copy": "^2.1.1",
         "esbuild-plugin-polyfill-node": "^0.3.0",
         "esbuild-plugins-node-modules-polyfill": "^1.7.0",
@@ -187,16 +192,22 @@
         "knip": "^5.58.0",
         "lit-analyzer": "^2.0.3",
         "npm-run-all": "^4.1.5",
+        "p-iteration": "^1.1.8",
+        "playwright": "^1.52.0",
         "prettier": "^3.3.3",
         "pseudolocale": "^2.1.0",
         "rollup-plugin-postcss-lit": "^2.2.0",
         "storybook": "^8.6.14",
         "storybook-addon-mock": "^5.0.0",
         "turnstile-types": "^1.2.3",
+        "type-fest": "^4.41.0",
         "typescript": "^5.8.3",
         "typescript-eslint": "^8.34.0",
-        "vite-plugin-lit-css": "^2.0.0",
+        "unique-names-generator": "^4.7.1",
+        "vite": "^6.3.5",
+        "vite-plugin-lit-css": "^2.1.0",
         "vite-tsconfig-paths": "^5.0.1",
+        "vitest": "^3.2.0",
         "wireit": "^0.14.12"
     },
     "optionalDependencies": {
@@ -278,7 +289,7 @@
             "command": "lit-analyzer src"
         },
         "lint:types:tests": {
-            "command": "tsc --noEmit -p ./tests"
+            "command": "tsc --noEmit -p tsconfig.test.json"
         },
         "lint:types": {
             "command": "tsc -p .",
@@ -314,33 +325,33 @@
             }
         },
         "test": {
-            "command": "wdio ./wdio.conf.ts --logLevel=warn",
+            "command": "wdio ./wdio.conf.js --logLevel=warn",
             "env": {
                 "CI": "true",
                 "TS_NODE_PROJECT": "tsconfig.test.json"
             }
         },
         "test:e2e": {
-            "command": "wdio run ./tests/wdio.conf.ts",
+            "command": "wdio run ./tests/wdio.conf.js",
             "dependencies": [
                 "build"
             ],
             "env": {
                 "CI": "true",
-                "TS_NODE_PROJECT": "./tests/tsconfig.test.json"
+                "TS_NODE_PROJECT": "tsconfig.test.json"
             }
         },
         "test:e2e:watch": {
-            "command": "wdio run ./tests/wdio.conf.ts",
+            "command": "wdio run ./tests/wdio.conf.js",
             "dependencies": [
                 "build"
             ],
             "env": {
-                "TS_NODE_PROJECT": "./tests/tsconfig.test.json"
+                "TS_NODE_PROJECT": "tsconfig.test.json"
             }
         },
         "test:watch": {
-            "command": "wdio run ./wdio.conf.ts",
+            "command": "wdio run ./wdio.conf.js",
             "dependencies": [
                 "build"
             ],

web/packages/core/id/index.js

@@ -0,0 +1,50 @@
+/**
+ * @file Unique ID utilities.
+ */
+
+/**
+ * A global ID generator.
+ *
+ * @singleton
+ * @runtime common
+ *
+ * @category IDs
+ */
+export class IDGenerator {
+    static #sequenceIndex = 0;
+    static #elementIndex = 0;
+
+    /**
+     * Create a new ID for an HTML element.
+     *
+     * This ID will be unique for the lifetime of the page and will not be
+     * exposed on the `window` object.
+     *
+     * @param {string | number} [name] An optional name to use for the element.
+     */
+    static elementID(name) {
+        name = name || ++this.#elementIndex;
+
+        return "«ak-" + name + "»";
+    }
+
+    /**
+     * Create a new ID.
+     */
+    static next() {
+        this.#sequenceIndex += 1;
+
+        return this.#sequenceIndex;
+    }
+
+    /**
+     * Generate a random ID in hexadecimal format.
+     *
+     * @param {number} [characterLength]
+     */
+    static randomID(characterLength = 6) {
+        const bytes = crypto.getRandomValues(new Uint8Array(characterLength / 2));
+
+        return Array.from(bytes, (a) => a.toString(16)).join("");
+    }
+}

web/packages/core/promises/index.js

@@ -0,0 +1,27 @@
+/**
+ * @file Helpers for running tests.
+ */
+
+/**
+ * A function that returns a promise.
+ * @template {never[]} [A=never[]]
+ * @typedef {(...args: A) => Promise<unknown>} Thenable
+ */
+
+/**
+ * A tuple of a function and its arguments.
+ * @template {Thenable} [T=Thenable]
+ * @typedef {[T, Parameters<T>]} SerializedThenable
+ */
+
+/**
+ * Executes a sequence of promise-returning functions in series
+ * @template {Thenable[]} T
+ * @param {{ [K in keyof T]: [T[K], ...Parameters<T[K]>] }} sequence
+ * @returns {Promise<void>}
+ */
+export async function series(...sequence) {
+    for (const [thenable, ...args] of sequence) {
+        await thenable(...args);
+    }
+}

web/packages/sfe/package.json

@@ -11,11 +11,11 @@
     },
     "dependencies": {
         "@goauthentik/api": "^2024.6.0-1719577139",
-        "base64-js": "^1.5.1",
         "bootstrap": "^4.6.1",
         "formdata-polyfill": "^4.0.10",
         "jquery": "^3.7.1",
-        "weakmap-polyfill": "^2.0.4"
+        "weakmap-polyfill": "^2.0.4",
+        "webauthn-polyfills": "^0.1.7"
     },
     "devDependencies": {
         "@goauthentik/core": "^1.0.0",

web/packages/sfe/src/index.ts

@@ -1,7 +1,7 @@
-import { fromByteArray } from "base64-js";
 import "formdata-polyfill";
 import $ from "jquery";
 import "weakmap-polyfill";
+import "webauthn-polyfills";
 
 import {
     type AuthenticatorValidationChallenge,
@@ -257,47 +257,9 @@ class AutosubmitStage extends Stage<AutosubmitChallenge> {
     }
 }
 
-export interface Assertion {
-    id: string;
-    rawId: string;
-    type: string;
-    registrationClientExtensions: string;
-    response: {
-        clientDataJSON: string;
-        attestationObject: string;
-    };
-}
-
-export interface AuthAssertion {
-    id: string;
-    rawId: string;
-    type: string;
-    assertionClientExtensions: string;
-    response: {
-        clientDataJSON: string;
-        authenticatorData: string;
-        signature: string;
-        userHandle: string | null;
-    };
-}
-
 class AuthenticatorValidateStage extends Stage<AuthenticatorValidationChallenge> {
     deviceChallenge?: DeviceChallenge;
 
-    b64enc(buf: Uint8Array): string {
-        return fromByteArray(buf).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
-    }
-
-    b64RawEnc(buf: Uint8Array): string {
-        return fromByteArray(buf).replace(/\+/g, "-").replace(/\//g, "_");
-    }
-
-    u8arr(input: string): Uint8Array {
-        return Uint8Array.from(atob(input.replace(/_/g, "/").replace(/-/g, "+")), (c) =>
-            c.charCodeAt(0),
-        );
-    }
-
     checkWebAuthnSupport(): boolean {
         if ("credentials" in navigator) {
             return true;
@@ -310,98 +272,6 @@ class AuthenticatorValidateStage extends Stage<AuthenticatorValidationChallenge>
         return false;
     }
 
-    /**
-     * Transforms items in the credentialCreateOptions generated on the server
-     * into byte arrays expected by the navigator.credentials.create() call
-     */
-    transformCredentialCreateOptions(
-        credentialCreateOptions: PublicKeyCredentialCreationOptions,
-        userId: string,
-    ): PublicKeyCredentialCreationOptions {
-        const user = credentialCreateOptions.user;
-        // Because json can't contain raw bytes, the server base64-encodes the User ID
-        // So to get the base64 encoded byte array, we first need to convert it to a regular
-        // string, then a byte array, re-encode it and wrap that in an array.
-        const stringId = decodeURIComponent(window.atob(userId));
-        user.id = this.u8arr(this.b64enc(this.u8arr(stringId)));
-        const challenge = this.u8arr(credentialCreateOptions.challenge.toString());
-
-        return Object.assign({}, credentialCreateOptions, {
-            challenge,
-            user,
-        });
-    }
-
-    /**
-     * Transforms the binary data in the credential into base64 strings
-     * for posting to the server.
-     * @param {PublicKeyCredential} newAssertion
-     */
-    transformNewAssertionForServer(newAssertion: PublicKeyCredential): Assertion {
-        const attObj = new Uint8Array(
-            (newAssertion.response as AuthenticatorAttestationResponse).attestationObject,
-        );
-        const clientDataJSON = new Uint8Array(newAssertion.response.clientDataJSON);
-        const rawId = new Uint8Array(newAssertion.rawId);
-
-        const registrationClientExtensions = newAssertion.getClientExtensionResults();
-        return {
-            id: newAssertion.id,
-            rawId: this.b64enc(rawId),
-            type: newAssertion.type,
-            registrationClientExtensions: JSON.stringify(registrationClientExtensions),
-            response: {
-                clientDataJSON: this.b64enc(clientDataJSON),
-                attestationObject: this.b64enc(attObj),
-            },
-        };
-    }
-
-    transformCredentialRequestOptions(
-        credentialRequestOptions: PublicKeyCredentialRequestOptions,
-    ): PublicKeyCredentialRequestOptions {
-        const challenge = this.u8arr(credentialRequestOptions.challenge.toString());
-
-        const allowCredentials = (credentialRequestOptions.allowCredentials || []).map(
-            (credentialDescriptor) => {
-                const id = this.u8arr(credentialDescriptor.id.toString());
-                return Object.assign({}, credentialDescriptor, { id });
-            },
-        );
-
-        return Object.assign({}, credentialRequestOptions, {
-            challenge,
-            allowCredentials,
-        });
-    }
-
-    /**
-     * Encodes the binary data in the assertion into strings for posting to the server.
-     * @param {PublicKeyCredential} newAssertion
-     */
-    transformAssertionForServer(newAssertion: PublicKeyCredential): AuthAssertion {
-        const response = newAssertion.response as AuthenticatorAssertionResponse;
-        const authData = new Uint8Array(response.authenticatorData);
-        const clientDataJSON = new Uint8Array(response.clientDataJSON);
-        const rawId = new Uint8Array(newAssertion.rawId);
-        const sig = new Uint8Array(response.signature);
-        const assertionClientExtensions = newAssertion.getClientExtensionResults();
-
-        return {
-            id: newAssertion.id,
-            rawId: this.b64enc(rawId),
-            type: newAssertion.type,
-            assertionClientExtensions: JSON.stringify(assertionClientExtensions),
-
-            response: {
-                clientDataJSON: this.b64RawEnc(clientDataJSON),
-                signature: this.b64RawEnc(sig),
-                authenticatorData: this.b64RawEnc(authData),
-                userHandle: null,
-            },
-        };
-    }
-
     render() {
         if (this.challenge.deviceChallenges.length === 1) {
             this.deviceChallenge = this.challenge.deviceChallenges[0];
@@ -505,8 +375,8 @@ class AuthenticatorValidateStage extends Stage<AuthenticatorValidationChallenge>
             `);
         navigator.credentials
             .get({
-                publicKey: this.transformCredentialRequestOptions(
-                    this.deviceChallenge?.challenge as PublicKeyCredentialRequestOptions,
+                publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(
+                    this.deviceChallenge?.challenge as PublicKeyCredentialRequestOptionsJSON,
                 ),
             })
             .then((assertion) => {
@@ -514,15 +384,9 @@ class AuthenticatorValidateStage extends Stage<AuthenticatorValidationChallenge>
                     throw new Error("No assertion");
                 }
                 try {
-                    // we now have an authentication assertion! encode the byte arrays contained
-                    // in the assertion data as strings for posting to the server
-                    const transformedAssertionForServer = this.transformAssertionForServer(
-                        assertion as PublicKeyCredential,
-                    );
-
                     // post the assertion to the server for verification.
                     this.executor.submit({
-                        webauthn: transformedAssertionForServer,
+                        webauthn: (assertion as PublicKeyCredential).toJSON(),
                     });
                 } catch (err) {
                     throw new Error(`Error when validating assertion on server: ${err}`);

web/playwright.config.js

@@ -0,0 +1,92 @@
+/**
+ * @file Playwright configuration.
+ *
+ * @see https://playwright.dev/docs/test-configuration
+ *
+ * @import { LogFn, Logger } from "pino"
+ */
+import { ConsoleLogger } from "#logger/node";
+import { defineConfig, devices } from "@playwright/test";
+
+const CI = !!process.env.CI;
+
+/**
+ * @type {Map<string, Logger>}
+ */
+const LoggerCache = new Map();
+
+const baseURL = process.env.AK_TEST_RUNNER_PAGE_URL ?? "http://localhost:9000";
+
+export default defineConfig({
+    testDir: "./test/browser",
+    fullyParallel: true,
+    forbidOnly: CI,
+    retries: CI ? 2 : 0,
+    workers: CI ? 1 : undefined,
+    reporter: CI
+        ? "github"
+        : [
+              // ---
+              ["list", { printSteps: true }],
+              ["html", { open: "never" }],
+          ],
+    use: {
+        testIdAttribute: "data-test-id",
+        baseURL,
+        trace: "on-first-retry",
+        launchOptions: {
+            logger: {
+                isEnabled() {
+                    return true;
+                },
+                log: (name, severity, message, args) => {
+                    let logger = LoggerCache.get(name);
+
+                    if (!logger) {
+                        logger = ConsoleLogger.child({
+                            name: `Playwright ${name.toUpperCase()}`,
+                        });
+                        LoggerCache.set(name, logger);
+                    }
+
+                    /**
+                     * @type {LogFn}
+                     */
+                    let log;
+
+                    switch (severity) {
+                        case "verbose":
+                            log = logger.debug;
+                            break;
+                        case "warning":
+                            log = logger.warn;
+                            break;
+                        case "error":
+                            log = logger.error;
+                            break;
+                        default:
+                            log = logger.info;
+                            break;
+                    }
+
+                    if (name === "api") {
+                        log = logger.debug;
+                    }
+
+                    log.call(logger, message.toString(), args);
+                },
+            },
+        },
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+
+            use: {
+                ...devices["Desktop Chrome"],
+            },
+        },
+    ],
+});

web/src/admin/AdminInterface/AboutModal.ts

@@ -6,8 +6,9 @@ import "@goauthentik/elements/EmptyState";
 import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
 
 import { msg } from "@lit/localize";
-import { TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { until } from "lit/directives/until.js";
 
 import PFAbout from "@patternfly/patternfly/components/AboutModalBox/about-modal-box.css";
@@ -16,16 +17,15 @@ import { AdminApi, CapabilitiesEnum, LicenseSummaryStatusEnum } from "@goauthent
 
 @customElement("ak-about-modal")
 export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton)) {
-    static get styles() {
-        return ModalButton.styles.concat(
-            PFAbout,
-            css`
-                .pf-c-about-modal-box__hero {
-                    background-image: url("/static/dist/assets/images/flow_background.jpg");
-                }
-            `,
-        );
-    }
+    static styles: CSSResult[] = [
+        ...ModalButton.styles,
+        PFAbout,
+        css`
+            .pf-c-about-modal-box__hero {
+                background-image: url("/static/dist/assets/images/flow_background.jpg");
+            }
+        `,
+    ];
 
     async getAboutEntries(): Promise<[string, string | TemplateResult][]> {
         const status = await new AdminApi(DEFAULT_CONFIG).adminSystemRetrieve();
@@ -55,21 +55,32 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton))
         ];
     }
 
-    renderModal() {
+    #contentRef = createRef<HTMLDivElement>();
+
+    #backdropListener = (event: PointerEvent) => {
+        // We only want to close the modal when the backdrop is clicked, not when it's children are clicked.
+
+        if (this.#contentRef.value?.contains(event.target as Node)) {
+            return;
+        }
+        this.close();
+    };
+
+    protected override renderModal() {
         let product = this.brandingTitle;
 
         if (this.licenseSummary.status !== LicenseSummaryStatusEnum.Unlicensed) {
             product += ` ${msg("Enterprise")}`;
         }
-        return html`<div
-            class="pf-c-backdrop"
-            @click=${(e: PointerEvent) => {
-                e.stopPropagation();
-                this.closeModal();
-            }}
-        >
+        return html`<div class="pf-c-backdrop" @click=${this.#backdropListener}>
             <div class="pf-l-bullseye">
-                <div class="pf-c-about-modal-box" role="dialog" aria-modal="true">
+                <div
+                    ${ref(this.#contentRef)}
+                    class="pf-c-about-modal-box"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby="modal-title"
+                >
                     <div class="pf-c-about-modal-box__brand">
                         <img
                             class="pf-c-about-modal-box__brand-image"
@@ -78,18 +89,12 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton))
                         />
                     </div>
                     <div class="pf-c-about-modal-box__close">
-                        <button
-                            class="pf-c-button pf-m-plain"
-                            type="button"
-                            @click=${() => {
-                                this.open = false;
-                            }}
-                        >
+                        <button class="pf-c-button pf-m-plain" type="button" @click=${this.close}>
                             <i class="fas fa-times" aria-hidden="true"></i>
                         </button>
                     </div>
                     <div class="pf-c-about-modal-box__header">
-                        <h1 class="pf-c-title pf-m-4xl">${product}</h1>
+                        <h1 class="pf-c-title pf-m-4xl" id="modal-title">${product}</h1>
                     </div>
                     <div class="pf-c-about-modal-box__hero"></div>
                     <div class="pf-c-about-modal-box__content">

web/src/admin/AdminInterface/AdminSidebar.ts

@@ -1,16 +1,44 @@
+import { SidebarItemProperties } from "#elements/sidebar/SidebarItem";
 import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "@goauthentik/elements/router/Route";
 import { spread } from "@open-wc/lit-helpers";
 
 import { msg } from "@lit/localize";
 import { TemplateResult, html, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 
+/**
+ * Given a record-like object, prefixes each key with a dot, allowing it to be spread into a
+ * template literal.
+ *
+ * ```ts
+ * interface MyElementProperties {
+ *     foo: string;
+ *     bar: number;
+ * }
+ *
+ * const properties {} as LitPropertyRecord<MyElementProperties>
+ *
+ * console.log(properties) // { '.foo': string; '.bar': number }
+ * ```
+ */
+export type LitPropertyRecord<T extends object> = {
+    [K in keyof T as K extends string ? LitPropertyKey<K> : never]: T[K];
+};
+
+/**
+ * A type that represents a property key that can be used in a LitPropertyRecord.
+ *
+ * @see {@linkcode LitPropertyRecord}
+ */
+export type LitPropertyKey<K> = K extends string ? `.${K}` | `?${K}` | K : K;
+
 // The second attribute type is of string[] to help with the 'activeWhen' control, which was
 // commonplace and singular enough to merit its own handler.
 type SidebarEntry = [
     path: string | null,
     label: string,
-    attributes?: Record<string, any> | string[] | null, // eslint-disable-line
+    attributes?: LitPropertyRecord<SidebarItemProperties> | string[] | null,
     children?: SidebarEntry[],
 ];
 
@@ -31,8 +59,7 @@ export function renderSidebarItem([
         properties.path = path;
     }
 
-    return html`<ak-sidebar-item ${spread(properties)}>
-        ${label ? html`<span slot="label">${label}</span>` : nothing}
+    return html`<ak-sidebar-item label=${ifDefined(label)} ${spread(properties)}>
         ${children ? renderSidebarItems(children) : nothing}
     </ak-sidebar-item>`;
 }

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

@@ -7,6 +7,7 @@ import { me } from "#common/users";
 import { WebsocketClient } from "#common/ws";
 import { SidebarToggleEventDetail } from "#components/ak-page-header";
 import { AuthenticatedInterface } from "#elements/AuthenticatedInterface";
+import "#elements/a11y/ak-skip-to-content";
 import "#elements/ak-locale-context/ak-locale-context";
 import "#elements/banner/EnterpriseStatusBanner";
 import "#elements/banner/EnterpriseStatusBanner";
@@ -22,6 +23,7 @@ import "#elements/router/RouterOutlet";
 import "#elements/sidebar/Sidebar";
 import "#elements/sidebar/SidebarItem";
 
+import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement, eventOptions, property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -162,16 +164,18 @@ export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterfac
     }
 
     async firstUpdated(): Promise<void> {
-        this.user = await me();
+        me().then((session) => {
+            this.user = session;
 
-        const canAccessAdmin =
-            this.user.user.isSuperuser ||
-            // TODO: somehow add `access_admin_interface` to the API schema
-            this.user.user.systemPermissions.includes("access_admin_interface");
+            const canAccessAdmin =
+                this.user.user.isSuperuser ||
+                // TODO: somehow add `access_admin_interface` to the API schema
+                this.user.user.systemPermissions.includes("access_admin_interface");
 
-        if (!canAccessAdmin && this.user.user.pk > 0) {
-            window.location.assign("/if/user/");
-        }
+            if (!canAccessAdmin && this.user.user.pk > 0) {
+                window.location.assign("/if/user/");
+            }
+        });
     }
 
     render(): TemplateResult {
@@ -190,13 +194,14 @@ export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterfac
         };
 
         return html` <ak-locale-context>
+            <ak-skip-to-content></ak-skip-to-content>
             <div class="pf-c-page">
                 <ak-page-navbar ?open=${this.sidebarOpen} @sidebar-toggle=${this.sidebarListener}>
                     <ak-version-banner></ak-version-banner>
                     <ak-enterprise-status interface="admin"></ak-enterprise-status>
                 </ak-page-navbar>
 
-                <ak-sidebar class="${classMap(sidebarClasses)}">
+                <ak-sidebar ?hidden=${!this.sidebarOpen} class="${classMap(sidebarClasses)}">
                     ${renderSidebarItems(AdminSidebarEntries)}
                     ${this.can(CapabilitiesEnum.IsEnterprise)
                         ? renderSidebarItems(AdminSidebarEnterpriseEntries)
@@ -208,9 +213,10 @@ export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterfac
                         <div class="pf-c-drawer__main">
                             <div class="pf-c-drawer__content">
                                 <div class="pf-c-drawer__body">
-                                    <main class="pf-c-page__main">
+                                    <div class="pf-c-page__main">
                                         <ak-router-outlet
                                             role="main"
+                                            aria-label="${msg("Main content")}"
                                             class="pf-c-page__main"
                                             tabindex="-1"
                                             id="main-content"
@@ -218,7 +224,7 @@ export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterfac
                                             .routes=${ROUTES}
                                         >
                                         </ak-router-outlet>
-                                    </main>
+                                    </div>
                                 </div>
                             </div>
                             <ak-notification-drawer

web/src/admin/admin-overview/cards/AdminStatusCard.ts

@@ -1,3 +1,4 @@
+import { SlottedTemplateResult } from "#elements/types";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { PFSize } from "@goauthentik/common/enums.js";
 import {
@@ -13,7 +14,7 @@ import { state } from "lit/decorators.js";
 
 export interface AdminStatus {
     icon: string;
-    message?: TemplateResult;
+    message?: SlottedTemplateResult;
 }
 
 /**
@@ -98,8 +99,8 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
      *
      * @returns TemplateResult displaying the value
      */
-    protected renderValue(): TemplateResult {
-        return html`${this.value}`;
+    protected renderValue(): SlottedTemplateResult {
+        return this.value ? html`${this.value}` : nothing;
     }
 
     /**
@@ -108,7 +109,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
      * @param status - AdminStatus object containing icon and message
      * @returns TemplateResult for status display
      */
-    private renderStatus(status: AdminStatus): TemplateResult {
+    private renderStatus(status: AdminStatus): SlottedTemplateResult {
         return html`
             <p><i class="${status.icon}"></i>&nbsp;${this.renderValue()}</p>
             ${status.message ? html`<p class="subtext">${status.message}</p>` : nothing}
@@ -121,9 +122,9 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
      * @param error - Error message to display
      * @returns TemplateResult for error display
      */
-    private renderError(error: string): TemplateResult {
+    private renderError(error: string): SlottedTemplateResult {
         return html`
-            <p><i class="fa fa-times"></i>&nbsp;${msg("Failed to fetch")}</p>
+            <p><i aria-hidden="true" class="fa fa-times"></i>&nbsp;${msg("Failed to fetch")}</p>
             <p class="subtext">${error}</p>
         `;
     }
@@ -133,7 +134,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
      *
      * @returns TemplateResult for loading spinner
      */
-    private renderLoading(): TemplateResult {
+    private renderLoading(): SlottedTemplateResult {
         return html`<ak-spinner size="${PFSize.Large}"></ak-spinner>`;
     }
 
@@ -142,7 +143,7 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
      *
      * @returns TemplateResult for current component state
      */
-    renderInner(): TemplateResult {
+    renderInner(): SlottedTemplateResult {
         return html`
             <p class="center-value">
                 ${

web/src/admin/admin-overview/cards/RecentEventsCard.ts

@@ -88,7 +88,8 @@ export class RecentEventsCard extends Table<Event> {
         }
 
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No Events found.")}>
+            html`<ak-empty-state
+                ><span slot="header">${msg("No Events found.")}</span>
                 <div slot="body">${msg("No matching events could be found.")}</div>
             </ak-empty-state>`,
         );

web/src/admin/admin-overview/cards/SystemStatusCard.ts

@@ -1,3 +1,4 @@
+import { SlottedTemplateResult } from "#elements/types";
 import {
     AdminStatus,
     AdminStatusCard,
@@ -5,7 +6,7 @@ import {
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 
 import { msg } from "@lit/localize";
-import { TemplateResult, html } from "lit";
+import { TemplateResult, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 import { AdminApi, OutpostsApi, SystemInfo } from "@goauthentik/api";
@@ -84,12 +85,12 @@ export class SystemStatusCard extends AdminStatusCard<SystemInfo> {
         });
     }
 
-    renderHeader(): TemplateResult {
-        return html`${msg("System status")}`;
+    renderHeader(): SlottedTemplateResult {
+        return msg("System status");
     }
 
-    renderValue(): TemplateResult {
-        return html`${this.statusSummary}`;
+    renderValue(): SlottedTemplateResult {
+        return this.statusSummary ? html`${this.statusSummary}` : nothing;
     }
 }
 

web/src/admin/admin-settings/AdminSettingsFooterLinks.ts

@@ -1,4 +1,7 @@
-import { AkControlElement } from "@goauthentik/elements/AkControlElement.js";
+import {
+    AkControlElement,
+    formatFormElementAsJSON,
+} from "@goauthentik/elements/AkControlElement.js";
 import { type Spread } from "@goauthentik/elements/types";
 import { spread } from "@open-wc/lit-helpers";
 
@@ -23,33 +26,32 @@ const hasLegalScheme = (url: string) =>
 
 @customElement("ak-admin-settings-footer-link")
 export class FooterLinkInput extends AkControlElement<FooterLink> {
-    static get styles() {
-        return [
-            PFBase,
-            PFInputGroup,
-            PFFormControl,
-            css`
-                .pf-c-input-group input#linkname {
-                    flex-grow: 1;
-                    width: 8rem;
-                }
-            `,
-        ];
-    }
+    static styles = [
+        PFBase,
+        PFInputGroup,
+        PFFormControl,
+        css`
+            .pf-c-input-group input#linkname {
+                flex-grow: 1;
+                width: 8rem;
+            }
+        `,
+    ];
 
     @property({ type: Object, attribute: false })
-    footerLink: FooterLink = {
+    public footerLink: FooterLink = {
         name: "",
         href: "",
     };
 
-    @queryAll(".ak-form-control")
-    controls?: HTMLInputElement[];
+    @property({ type: String })
+    public name?: string | null;
 
-    json() {
-        return Object.fromEntries(
-            Array.from(this.controls ?? []).map((control) => [control.name, control.value]),
-        ) as unknown as FooterLink;
+    @queryAll(".ak-form-control")
+    protected controls?: HTMLInputElement[];
+
+    public override json() {
+        return formatFormElementAsJSON<FooterLink>(this.controls);
     }
 
     get isValid() {

web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.test.ts

@@ -1,42 +1,49 @@
 import { render } from "@goauthentik/elements/tests/utils.js";
-import { $, expect } from "@wdio/globals";
+import { $, browser, expect } from "@wdio/globals";
 
 import { html } from "lit";
 
 import "../AdminSettingsFooterLinks.js";
 
 describe("ak-admin-settings-footer-link", () => {
-    afterEach(async () => {
-        await browser.execute(async () => {
-            await document.body.querySelector("ak-admin-settings-footer-link")?.remove();
-            if (document.body._$litPart$) {
-                // @ts-expect-error expression of type '"_$litPart$"' is added by Lit
-                await delete document.body._$litPart$;
+    afterEach(() =>
+        browser.execute(() => {
+            document.body.querySelector("ak-admin-settings-footer-link")?.remove();
+
+            if ("_$litPart$" in document.body) {
+                delete document.body._$litPart$;
             }
-        });
-    });
+        }),
+    );
 
     it("should render an empty control", async () => {
         render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
-        const link = await $("ak-admin-settings-footer-link");
-        await expect(await link.getProperty("isValid")).toStrictEqual(false);
-        await expect(await link.getProperty("toJson")).toEqual({ name: "", href: "" });
+        const link = $("ak-admin-settings-footer-link");
+
+        await expect(link.getProperty("isValid")).resolves.toStrictEqual(false);
+        await expect(link.getProperty("toJson")).resolves.toEqual({
+            name: "",
+            href: "",
+        });
     });
 
     it("should not be valid if just a name is filled in", async () => {
         render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
-        const link = await $("ak-admin-settings-footer-link");
+        const link = $("ak-admin-settings-footer-link");
         await link.$('input[name="name"]').setValue("foo");
-        await expect(await link.getProperty("isValid")).toStrictEqual(false);
-        await expect(await link.getProperty("toJson")).toEqual({ name: "foo", href: "" });
+        await expect(link.getProperty("isValid")).resolves.toStrictEqual(false);
+        await expect(link.getProperty("toJson")).resolves.toEqual({
+            name: "foo",
+            href: "",
+        });
     });
 
     it("should be valid if just a URL is filled in", async () => {
         render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
-        const link = await $("ak-admin-settings-footer-link");
+        const link = $("ak-admin-settings-footer-link");
         await link.$('input[name="href"]').setValue("https://foo.com");
-        await expect(await link.getProperty("isValid")).toStrictEqual(true);
-        await expect(await link.getProperty("toJson")).toEqual({
+        await expect(link.getProperty("isValid")).resolves.toStrictEqual(true);
+        await expect(link.getProperty("toJson")).resolves.toEqual({
             name: "",
             href: "https://foo.com",
         });
@@ -44,11 +51,13 @@ describe("ak-admin-settings-footer-link", () => {
 
     it("should be valid if both are filled in", async () => {
         render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
-        const link = await $("ak-admin-settings-footer-link");
+        const link = $("ak-admin-settings-footer-link");
+
         await link.$('input[name="name"]').setValue("foo");
         await link.$('input[name="href"]').setValue("https://foo.com");
-        await expect(await link.getProperty("isValid")).toStrictEqual(true);
-        await expect(await link.getProperty("toJson")).toEqual({
+
+        await expect(link.getProperty("isValid")).resolves.toStrictEqual(true);
+        await expect(link.getProperty("toJson")).resolves.toEqual({
             name: "foo",
             href: "https://foo.com",
         });
@@ -56,13 +65,13 @@ describe("ak-admin-settings-footer-link", () => {
 
     it("should not be valid if the URL is not valid", async () => {
         render(html`<ak-admin-settings-footer-link name="link"></ak-admin-settings-footer-link>`);
-        const link = await $("ak-admin-settings-footer-link");
+        const link = $("ak-admin-settings-footer-link");
         await link.$('input[name="name"]').setValue("foo");
         await link.$('input[name="href"]').setValue("never://foo.com");
-        await expect(await link.getProperty("toJson")).toEqual({
+        await expect(link.getProperty("toJson")).resolves.toEqual({
             name: "foo",
             href: "never://foo.com",
         });
-        await expect(await link.getProperty("isValid")).toStrictEqual(false);
+        await expect(link.getProperty("isValid")).resolves.toStrictEqual(false);
     });
 });

web/src/admin/applications/ApplicationForm.ts

@@ -5,6 +5,7 @@ import { policyEngineModes } from "@goauthentik/admin/policies/PolicyEngineModes
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import "@goauthentik/components/ak-file-input";
 import "@goauthentik/components/ak-radio-input";
+import "@goauthentik/components/ak-slug-input";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
 import "@goauthentik/components/ak-textarea-input";
@@ -130,14 +131,14 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                 required
                 help=${msg("Application's display Name.")}
             ></ak-text-input>
-            <ak-text-input
+            <ak-slug-input
                 name="slug"
                 value=${ifDefined(this.instance?.slug)}
                 label=${msg("Slug")}
                 required
                 help=${msg("Internal application name used in URLs.")}
                 input-hint="code"
-            ></ak-text-input>
+            ></ak-slug-input>
             <ak-text-input
                 name="group"
                 value=${ifDefined(this.instance?.group)}
@@ -176,9 +177,8 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm<Applicatio
                 .options=${policyEngineModes}
                 .value=${this.instance?.policyEngineMode}
             ></ak-radio-input>
-            <ak-form-group>
-                <span slot="header"> ${msg("UI settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("UI settings")}">
+                <div class="pf-c-form">
                     <ak-text-input
                         name="metaLaunchUrl"
                         label=${msg("Launch URL")}

web/src/admin/applications/ApplicationListPage.ts

@@ -85,7 +85,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage<Application>)
         ];
     }
 
-    renderSidebarAfter(): TemplateResult {
+    protected renderSidebarAfter(): TemplateResult {
         return html`<div class="pf-c-sidebar__panel pf-m-width-25">
             <div class="pf-c-card">
                 <div class="pf-c-card__body">

web/src/admin/applications/wizard/ApplicationWizardStep.ts

@@ -5,7 +5,8 @@ import {
     WizardNavigationEvent,
     WizardUpdateEvent,
 } from "@goauthentik/components/ak-wizard/events";
-import { KeyUnknown, serializeForm } from "@goauthentik/elements/forms/Form";
+import type { AkControlElement } from "@goauthentik/elements/forms/Form";
+import { serializeForm } from "@goauthentik/elements/forms/Form";
 import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
 
 import { msg } from "@lit/localize";
@@ -29,22 +30,21 @@ export class ApplicationWizardStep extends WizardStep {
 
     // As recommended in [WizardStep](../../../components/ak-wizard/WizardStep.ts), we override
     // these fields and provide them to all the child classes.
-    wizardTitle = msg("New application");
-    wizardDescription = msg("Create a new application and configure a provider for it.");
-    canCancel = true;
+    protected wizardTitle = msg("New application");
+    protected wizardDescription = msg("Create a new application and configure a provider for it.");
+    public cancelable = true;
 
     // This should be overridden in the children for more precise targeting.
     @query("form")
-    form!: HTMLFormElement;
+    protected form!: HTMLFormElement;
 
-    get formValues(): KeyUnknown | undefined {
+    get formValues(): Record<string, unknown> {
         const elements = [
-            ...Array.from(
-                this.form.querySelectorAll<HorizontalFormElement>("ak-form-element-horizontal"),
-            ),
-            ...Array.from(this.form.querySelectorAll<HTMLElement>("[data-ak-control=true]")),
+            ...this.form.querySelectorAll<HorizontalFormElement>("ak-form-element-horizontal"),
+            ...this.form.querySelectorAll<AkControlElement>("[data-ak-control]"),
         ];
-        return serializeForm(elements as unknown as NodeListOf<HorizontalFormElement>);
+
+        return serializeForm(elements);
     }
 
     protected removeErrors(

web/src/admin/applications/wizard/ak-wizard-title.ts

@@ -22,7 +22,7 @@ export class AkWizardTitle extends AKElement {
 
     render() {
         return html`<div class="ak-bottom-spacing pf-c-content">
-            <h3><slot></slot></h3>
+            <h3 data-test-id="wizard-heading"><slot></slot></h3>
         </div>`;
     }
 }
@@ -33,4 +33,12 @@ declare global {
     interface HTMLElementTagNameMap {
         "ak-wizard-title": AkWizardTitle;
     }
+
+    interface WizardTestIDMap {
+        heading: HTMLHeadingElement;
+    }
+
+    interface TestIDSelectorMap {
+        wizard: WizardTestIDMap;
+    }
 }

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

@@ -1,16 +1,15 @@
 import { ApplicationWizardStep } from "@goauthentik/admin/applications/wizard/ApplicationWizardStep.js";
 import "@goauthentik/admin/applications/wizard/ak-wizard-title.js";
 import { policyEngineModes } from "@goauthentik/admin/policies/PolicyEngineModes";
-import { camelToSnake } from "@goauthentik/common/utils.js";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-slug-input";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
 import { type NavigableButton, type WizardButton } from "@goauthentik/components/ak-wizard/types";
-import { type KeyUnknown } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { isSlug } from "@goauthentik/elements/router/utils.js";
+import { snakeCase } from "change-case";
 
 import { msg } from "@lit/localize";
 import { html } from "lit";
@@ -23,11 +22,10 @@ import { ApplicationWizardStateUpdate, ValidationRecord } from "../types";
 
 const autoTrim = (v: unknown) => (typeof v === "string" ? v.trim() : v);
 
-const trimMany = (o: KeyUnknown, vs: string[]) =>
+const trimMany = (o: Record<string, unknown>, vs: string[]) =>
     Object.fromEntries(vs.map((v) => [v, autoTrim(o[v])]));
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isStr = (v: any): v is string => typeof v === "string";
+const isStr = (v: unknown): v is string => typeof v === "string";
 
 @customElement("ak-application-wizard-application-step")
 export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
@@ -48,9 +46,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
     errorMessages(name: string) {
         return this.errors.has(name)
             ? [this.errors.get(name)]
-            : (this.wizard.errors?.app?.[name] ??
-                  this.wizard.errors?.app?.[camelToSnake(name)] ??
-                  []);
+            : (this.wizard.errors?.app?.[name] ?? this.wizard.errors?.app?.[snakeCase(name)] ?? []);
     }
 
     get buttons(): WizardButton[] {
@@ -117,13 +113,11 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
                     ?invalid=${this.errors.has("name")}
                     .errorMessages=${errors.name ?? this.errorMessages("name")}
                     help=${msg("Application's display Name.")}
-                    id="ak-application-wizard-details-name"
                 ></ak-text-input>
                 <ak-slug-input
                     name="slug"
                     value=${ifDefined(app.slug)}
                     label=${msg("Slug")}
-                    source="#ak-application-wizard-details-name"
                     required
                     ?invalid=${errors.slug ?? this.errors.has("slug")}
                     .errorMessages=${this.errorMessages("slug")}
@@ -148,9 +142,8 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep {
                     .value=${app.policyEngineMode}
                     .errorMessages=${errors.policyEngineMode ?? []}
                 ></ak-radio-input>
-                <ak-form-group aria-label=${msg("UI Settings")}>
-                    <span slot="header"> ${msg("UI Settings")} </span>
-                    <div slot="body" class="pf-c-form">
+                <ak-form-group label=${msg("UI Settings")}>
+                    <div class="pf-c-form">
                         <ak-text-input
                             name="metaLaunchUrl"
                             label=${msg("Launch URL")}

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

@@ -115,7 +115,8 @@ export class ApplicationWizardBindingsStep extends ApplicationWizardStep {
                     .columns=${COLUMNS}
                     .content=${[]}
                 ></ak-select-table>
-                <ak-empty-state header=${msg("No bound policies.")} icon="pf-icon-module">
+                <ak-empty-state icon="pf-icon-module"
+                    ><span slot="header">${msg("No bound policies.")} </span>
                     <div slot="body">${msg("No policies are currently bound to this object.")}</div>
                     <div slot="primary">
                         <button

web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts

@@ -1,13 +1,14 @@
-import { camelToSnake } from "@goauthentik/common/utils.js";
 import "@goauthentik/components/ak-number-input";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
 import { AKElement } from "@goauthentik/elements/Base.js";
-import { KeyUnknown, serializeForm } from "@goauthentik/elements/forms/Form";
+import type { AkControlElement } from "@goauthentik/elements/forms/Form";
+import { serializeForm } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
+import { snakeCase } from "change-case";
 
 import { property, query } from "lit/decorators.js";
 
@@ -30,14 +31,13 @@ export class ApplicationWizardProviderForm<T extends OneOfProvider> extends AKEl
     @query("form#providerform")
     form!: HTMLFormElement;
 
-    get formValues(): KeyUnknown | undefined {
+    get formValues(): Record<string, unknown> {
         const elements = [
-            ...Array.from(
-                this.form.querySelectorAll<HorizontalFormElement>("ak-form-element-horizontal"),
-            ),
-            ...Array.from(this.form.querySelectorAll<HTMLElement>("[data-ak-control=true]")),
+            ...this.form.querySelectorAll<HorizontalFormElement>("ak-form-element-horizontal"),
+            ...this.form.querySelectorAll<AkControlElement>("[data-ak-control]"),
         ];
-        return serializeForm(elements as unknown as NodeListOf<HorizontalFormElement>);
+
+        return serializeForm(elements);
     }
 
     get valid() {
@@ -49,7 +49,7 @@ export class ApplicationWizardProviderForm<T extends OneOfProvider> extends AKEl
         return name in this.errors
             ? [this.errors[name]]
             : (this.wizard.errors?.provider?.[name] ??
-                  this.wizard.errors?.provider?.[camelToSnake(name)] ??
+                  this.wizard.errors?.provider?.[snakeCase(name)] ??
                   []);
     }
 

web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts

@@ -60,9 +60,8 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF
                     input-hint="code"
                 ></ak-text-input>
 
-                <ak-form-group expanded>
-                    <span slot="header"> ${msg("Protocol settings")} </span>
-                    <div slot="body" class="pf-c-form">
+                <ak-form-group open label=" ${msg("Protocol settings")} ">
+                    <div class="pf-c-form">
                         <ak-form-element-horizontal
                             label=${msg("Property mappings")}
                             name="propertyMappings"

web/src/admin/blueprints/BlueprintForm.ts

@@ -176,9 +176,8 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
                 </div>
             </div>
 
-            <ak-form-group>
-                <span slot="header">${msg("Additional settings")}</span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Additional settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Context")} name="context">
                         <ak-codemirror
                             mode=${CodeMirrorMode.YAML}

web/src/admin/brands/BrandForm.ts

@@ -87,9 +87,8 @@ export class BrandForm extends ModelForm<Brand, string> {
                 </p>
             </ak-form-element-horizontal>
 
-            <ak-form-group>
-                <span slot="header"> ${msg("Branding settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Branding settings")} ">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Title")} required name="brandingTitle">
                         <input
                             type="text"
@@ -170,9 +169,8 @@ export class BrandForm extends ModelForm<Brand, string> {
                 </div>
             </ak-form-group>
 
-            <ak-form-group>
-                <span slot="header"> ${msg("External user settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("External user settings")} ">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Default application")}
                         name="defaultApplication"
@@ -215,9 +213,8 @@ export class BrandForm extends ModelForm<Brand, string> {
                 </div>
             </ak-form-group>
 
-            <ak-form-group>
-                <span slot="header"> ${msg("Default flows")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Default flows")} ">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Authentication flow")}
                         name="flowAuthentication"
@@ -295,9 +292,8 @@ export class BrandForm extends ModelForm<Brand, string> {
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Other global settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Other global settings")} ">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Web Certificate")}
                         name="webCertificate"

web/src/admin/common/ak-core-group-search.ts

@@ -44,19 +44,18 @@ export class CoreGroupSearch extends CustomListenerElement(AKElement) {
      * @attr
      */
     @property({ type: String, reflect: true })
-    group?: string;
+    public group?: string;
 
     @query("ak-search-select")
-    search!: SearchSelect<Group>;
+    public search!: SearchSelect<Group>;
 
     @property({ type: String })
-    name: string | null | undefined;
+    public name?: string | null;
 
     selectedGroup?: Group;
 
     constructor() {
         super();
-        this.selected = this.selected.bind(this);
         this.handleSearchUpdate = this.handleSearchUpdate.bind(this);
     }
 
@@ -83,9 +82,9 @@ export class CoreGroupSearch extends CustomListenerElement(AKElement) {
         this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
     }
 
-    selected(group: Group) {
+    selected = (group: Group) => {
         return this.group === group.pk;
-    }
+    };
 
     render() {
         return html`

web/src/admin/common/ak-crypto-certificate-search.ts

@@ -32,13 +32,19 @@ const renderValue = (item: CertificateKeyPair | undefined): string | undefined =
 @customElement("ak-crypto-certificate-search")
 export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement) {
     @property({ type: String, reflect: true })
-    certificate?: string;
+    public certificate?: string;
 
     @query("ak-search-select")
-    search!: SearchSelect<CertificateKeyPair>;
+    public search!: SearchSelect<CertificateKeyPair>;
 
     @property({ type: String })
-    name: string | null | undefined;
+    public name?: string | null;
+
+    @property({ type: String })
+    public label?: string | undefined;
+
+    @property({ type: String })
+    public placeholder?: string | undefined;
 
     /**
      * Set to `true` to allow certificates without private key to show up. When set to `false`,
@@ -46,7 +52,7 @@ export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement)
      * @attr
      */
     @property({ type: Boolean, attribute: "nokey" })
-    noKey = false;
+    public noKey = false;
 
     /**
      * Set this to true if, should there be only one certificate available, you want the system to
@@ -55,16 +61,12 @@ export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement)
      * @attr
      */
     @property({ type: Boolean, attribute: "singleton" })
-    singleton = false;
+    public singleton = false;
 
-    selectedKeypair?: CertificateKeyPair;
-
-    constructor() {
-        super();
-        this.selected = this.selected.bind(this);
-        this.fetchObjects = this.fetchObjects.bind(this);
-        this.handleSearchUpdate = this.handleSearchUpdate.bind(this);
-    }
+    /**
+     * @todo Document this.
+     */
+    public selectedKeypair?: CertificateKeyPair;
 
     get value() {
         return this.selectedKeypair ? renderValue(this.selectedKeypair) : null;
@@ -83,13 +85,13 @@ export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement)
         }
     }
 
-    handleSearchUpdate(ev: CustomEvent) {
+    handleSearchUpdate = (ev: CustomEvent) => {
         ev.stopPropagation();
         this.selectedKeypair = ev.detail.value;
         this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-    }
+    };
 
-    async fetchObjects(query?: string): Promise<CertificateKeyPair[]> {
+    fetchObjects = async (query?: string): Promise<CertificateKeyPair[]> => {
         const args: CryptoCertificatekeypairsListRequest = {
             ordering: "name",
             hasKey: !this.noKey,
@@ -102,19 +104,21 @@ export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement)
             args,
         );
         return certificates.results;
-    }
+    };
 
-    selected(item: CertificateKeyPair, items: CertificateKeyPair[]) {
+    selected = (item: CertificateKeyPair, items: CertificateKeyPair[]) => {
         return (
             (this.singleton && !this.certificate && items.length === 1) ||
             (!!this.certificate && this.certificate === item.pk)
         );
-    }
+    };
 
     render() {
         return html`
             <ak-search-select
                 name=${ifDefined(this.name ?? undefined)}
+                label=${ifDefined(this.label ?? undefined)}
+                placeholder=${ifDefined(this.placeholder ?? undefined)}
                 .fetchObjects=${this.fetchObjects}
                 .renderElement=${renderElement}
                 .value=${renderValue}

web/src/admin/common/ak-flow-search/FlowSearch.ts

@@ -5,6 +5,7 @@ import { SearchSelect } from "@goauthentik/elements/forms/SearchSelect";
 import "@goauthentik/elements/forms/SearchSelect";
 import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter";
 
+import { msg } from "@lit/localize";
 import { html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -34,13 +35,15 @@ export function getFlowValue(flow: Flow | undefined): string | undefined {
  */
 
 export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement) {
+    //#region Properties
+
     /**
      * The type of flow we're looking for.
      *
      * @attr
      */
     @property({ type: String })
-    flowType?: FlowsInstancesListDesignationEnum;
+    public flowType?: FlowsInstancesListDesignationEnum;
 
     /**
      * The id of the current flow, if any. For stages where the flow is already defined.
@@ -48,7 +51,7 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
      * @attr
      */
     @property({ type: String })
-    currentFlow?: string | undefined;
+    public currentFlow?: string | undefined;
 
     /**
      * If true, it is not valid to leave the flow blank.
@@ -56,10 +59,7 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
      * @attr
      */
     @property({ type: Boolean })
-    required?: boolean = false;
-
-    @query("ak-search-select")
-    search!: SearchSelect<T>;
+    public required?: boolean = false;
 
     /**
      * When specified and the object instance does not have a flow selected, auto-select the flow with the given slug.
@@ -70,9 +70,29 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
     defaultFlowSlug?: string;
 
     @property({ type: String })
-    name: string | null | undefined;
+    public name?: string | null;
 
-    selectedFlow?: T;
+    /**
+     * The label of the input, for forms.
+     *
+     * @attr
+     */
+    @property({ type: String })
+    public label?: string;
+
+    /**
+     * The textual placeholder for the search's <input> object, if currently empty. Used as the
+     * native <input> object's `placeholder` field.
+     *
+     * @attr
+     */
+    @property({ type: String })
+    public placeholder: string = msg("Select a flow...");
+
+    @query("ak-search-select")
+    protected search!: SearchSelect<T>;
+
+    protected selectedFlow?: T;
 
     get value() {
         return this.selectedFlow ? getFlowValue(this.selectedFlow) : null;
@@ -80,18 +100,16 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
 
     constructor() {
         super();
-        this.fetchObjects = this.fetchObjects.bind(this);
         this.selected = this.selected.bind(this);
-        this.handleSearchUpdate = this.handleSearchUpdate.bind(this);
     }
 
-    handleSearchUpdate(ev: CustomEvent) {
+    handleSearchUpdate = (ev: CustomEvent) => {
         ev.stopPropagation();
         this.selectedFlow = ev.detail.value;
         this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-    }
+    };
 
-    async fetchObjects(query?: string): Promise<Flow[]> {
+    fetchObjects = async (query?: string): Promise<Flow[]> => {
         const args: FlowsInstancesListRequest = {
             ordering: "slug",
             designation: this.flowType,
@@ -99,7 +117,7 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
         };
         const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(args);
         return flows.results;
-    }
+    };
 
     /* This is the most commonly overridden method of this class. About half of the Flow Searches
      * use this method, but several have more complex needs, such as relating to the brand, or just
@@ -134,6 +152,8 @@ export class FlowSearch<T extends Flow> extends CustomListenerElement(AKElement)
                 .renderElement=${renderElement}
                 .renderDescription=${renderDescription}
                 .value=${getFlowValue}
+                placeholder=${ifDefined(this.placeholder ?? undefined)}
+                label=${ifDefined(this.label ?? undefined)}
                 name=${ifDefined(this.name ?? undefined)}
                 @ak-change=${this.handleSearchUpdate}
                 ?blankable=${!this.required}

web/src/admin/common/ak-flow-search/ak-branded-flow-search.ts

@@ -21,14 +21,9 @@ export class AkBrandedFlowSearch<T extends Flow> extends FlowSearch<T> {
     @property({ attribute: false, type: String })
     brandFlow?: string;
 
-    constructor() {
-        super();
-        this.selected = this.selected.bind(this);
-    }
-
-    selected(flow: Flow): boolean {
+    public selected = (flow: Flow): boolean => {
         return super.selected(flow) || flow.pk === this.brandFlow;
-    }
+    };
 }
 
 declare global {

web/src/admin/common/ak-flow-search/ak-source-flow-search.ts

@@ -32,19 +32,14 @@ export class AkSourceFlowSearch<T extends Flow> extends FlowSearch<T> {
     @property({ type: String })
     instanceId: string | undefined;
 
-    constructor() {
-        super();
-        this.selected = this.selected.bind(this);
-    }
-
     // If there's no instance or no currentFlowId for it and the flow resembles the fallback,
     // otherwise defer to the parent class.
-    selected(flow: Flow): boolean {
+    selected = (flow: Flow): boolean => {
         return (
             (!this.instanceId && !this.currentFlow && flow.slug === this.fallback) ||
             super.selected(flow)
         );
-    }
+    };
 }
 
 declare global {

web/src/admin/common/ak-license-notice.ts

@@ -8,25 +8,35 @@ import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 @customElement("ak-license-notice")
-export class AkLicenceNotice extends WithLicenseSummary(AKElement) {
+export class AKLicenceNotice extends WithLicenseSummary(AKElement) {
     static styles = [$PFBase];
 
     @property()
-    notice = msg("Enterprise only");
+    public label = msg("Enterprise only");
+
+    @property()
+    public description = msg("Learn more about the enterprise license.");
 
     render() {
-        return this.hasEnterpriseLicense
-            ? nothing
-            : html`
-                  <ak-alert class="pf-c-radio__description" inline plain>
-                      <a href="#/enterprise/licenses">${this.notice}</a>
-                  </ak-alert>
-              `;
+        if (this.hasEnterpriseLicense) {
+            return nothing;
+        }
+
+        return html`
+            <ak-alert class="pf-c-radio__description" inline plain>
+                <a
+                    aria-label="${this.label}"
+                    aria-description="${this.description}"
+                    href="#/enterprise/licenses"
+                    >${this.label}</a
+                >
+            </ak-alert>
+        `;
     }
 }
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-license-notice": AkLicenceNotice;
+        "ak-license-notice": AKLicenceNotice;
     }
 }

web/src/admin/enterprise/EnterpriseStatusCard.test.ts

@@ -12,8 +12,8 @@ describe("ak-enterprise-status-card", () => {
     it("should not error when no data is loaded", async () => {
         render(html`<ak-enterprise-status-card></ak-enterprise-status-card>`);
 
-        const status = await $("ak-enterprise-status-card");
-        await expect(status).toHaveText(msg("Loading"));
+        const status = $("ak-enterprise-status-card");
+        await expect(status).resolves.toHaveText(msg("Loading"));
     });
 
     it("should render empty when unlicensed", async () => {
@@ -35,22 +35,22 @@ describe("ak-enterprise-status-card", () => {
             </ak-enterprise-status-card>`,
         );
 
-        const status = await $("ak-enterprise-status-card").$(
+        const status = $("ak-enterprise-status-card").$(
             ">>>.pf-c-description-list__description > .pf-c-description-list__text",
         );
-        await expect(status).toExist();
-        await expect(status).toHaveText(msg("Unlicensed"));
+        await expect(status).resolves.toExist();
+        await expect(status).resolves.toHaveText(msg("Unlicensed"));
 
-        const internalUserProgress = await $("ak-enterprise-status-card").$(
+        const internalUserProgress = $("ak-enterprise-status-card").$(
             ">>>#internalUsers > .pf-c-progress__bar",
         );
-        await expect(internalUserProgress).toExist();
-        await expect(internalUserProgress).toHaveAttr("aria-valuenow", "0");
-        const externalUserProgress = await $("ak-enterprise-status-card").$(
+        await expect(internalUserProgress).resolves.toExist();
+        await expect(internalUserProgress).resolves.toHaveAttr("aria-valuenow", "0");
+        const externalUserProgress = $("ak-enterprise-status-card").$(
             ">>>#externalUsers > .pf-c-progress__bar",
         );
-        await expect(externalUserProgress).toExist();
-        await expect(externalUserProgress).toHaveAttr("aria-valuenow", "0");
+        await expect(externalUserProgress).resolves.toExist();
+        await expect(externalUserProgress).resolves.toHaveAttr("aria-valuenow", "0");
     });
 
     it("should show warnings when full", async () => {
@@ -72,34 +72,35 @@ describe("ak-enterprise-status-card", () => {
             </ak-enterprise-status-card>`,
         );
 
-        const status = await $("ak-enterprise-status-card").$(
+        const status = $("ak-enterprise-status-card").$(
             ">>>.pf-c-description-list__description > .pf-c-description-list__text",
         );
-        await expect(status).toExist();
-        await expect(status).toHaveText(msg("Valid"));
+        await expect(status).resolves.toExist();
+        await expect(status).resolves.toHaveText(msg("Valid"));
 
-        const internalUserProgress = await $("ak-enterprise-status-card").$(
+        const internalUserProgress = $("ak-enterprise-status-card").$(
             ">>>#internalUsers > .pf-c-progress__bar",
         );
-        await expect(internalUserProgress).toExist();
-        await expect(internalUserProgress).toHaveAttr("aria-valuenow", "100");
+        await expect(internalUserProgress).resolves.toExist();
+        await expect(internalUserProgress).resolves.toHaveAttr("aria-valuenow", "100");
 
-        await expect(
-            await $("ak-enterprise-status-card").$(">>>#internalUsers"),
-        ).toHaveElementClass("pf-m-warning");
+        await expect($("ak-enterprise-status-card").$(">>>#internalUsers")).toHaveElementClass(
+            "pf-m-warning",
+        );
 
-        const externalUserProgress = await $("ak-enterprise-status-card").$(
+        const externalUserProgress = $("ak-enterprise-status-card").$(
             ">>>#externalUsers > .pf-c-progress__bar",
         );
-        await expect(externalUserProgress).toExist();
-        await expect(externalUserProgress).toHaveAttr("aria-valuenow", "100");
+        await expect(externalUserProgress).resolves.toExist();
+        await expect(externalUserProgress).resolves.toHaveAttr("aria-valuenow", "100");
 
         await expect(
-            await $("ak-enterprise-status-card").$(">>>#internalUsers"),
-        ).toHaveElementClass("pf-m-warning");
+            $("ak-enterprise-status-card").$(">>>#internalUsers"),
+        ).resolves.toHaveElementClass("pf-m-warning");
+
         await expect(
-            await $("ak-enterprise-status-card").$(">>>#externalUsers"),
-        ).toHaveElementClass("pf-m-warning");
+            $("ak-enterprise-status-card").$(">>>#externalUsers"),
+        ).resolves.toHaveElementClass("pf-m-warning");
     });
 
     it("should show infinity when not licensed for a user type", async () => {
@@ -121,33 +122,33 @@ describe("ak-enterprise-status-card", () => {
             </ak-enterprise-status-card>`,
         );
 
-        const status = await $("ak-enterprise-status-card").$(
+        const status = $("ak-enterprise-status-card").$(
             ">>>.pf-c-description-list__description > .pf-c-description-list__text",
         );
-        await expect(status).toExist();
-        await expect(status).toHaveText(msg("Valid"));
+        await expect(status).resolves.toExist();
+        await expect(status).resolves.toHaveText(msg("Valid"));
 
-        const internalUserProgress = await $("ak-enterprise-status-card").$(
+        const internalUserProgress = $("ak-enterprise-status-card").$(
             ">>>#internalUsers > .pf-c-progress__bar",
         );
-        await expect(internalUserProgress).toExist();
-        await expect(internalUserProgress).toHaveAttr("aria-valuenow", "100");
+        await expect(internalUserProgress).resolves.toExist();
+        await expect(internalUserProgress).resolves.toHaveAttr("aria-valuenow", "100");
 
-        await expect(
-            await $("ak-enterprise-status-card").$(">>>#internalUsers"),
-        ).toHaveElementClass("pf-m-warning");
+        await expect($("ak-enterprise-status-card").$(">>>#internalUsers")).toHaveElementClass(
+            "pf-m-warning",
+        );
 
-        const externalUserProgress = await $("ak-enterprise-status-card").$(
+        const externalUserProgress = $("ak-enterprise-status-card").$(
             ">>>#externalUsers > .pf-c-progress__bar",
         );
-        await expect(externalUserProgress).toExist();
-        await expect(externalUserProgress).toHaveAttr("aria-valuenow", "∞");
+        await expect(externalUserProgress).resolves.toExist();
+        await expect(externalUserProgress).resolves.toHaveAttr("aria-valuenow", "∞");
 
         await expect(
-            await $("ak-enterprise-status-card").$(">>>#internalUsers"),
-        ).toHaveElementClass("pf-m-warning");
+            $("ak-enterprise-status-card").$(">>>#internalUsers"),
+        ).resolves.toHaveElementClass("pf-m-warning");
         await expect(
-            await $("ak-enterprise-status-card").$(">>>#externalUsers"),
-        ).toHaveElementClass("pf-m-danger");
+            $("ak-enterprise-status-card").$(">>>#externalUsers"),
+        ).resolves.toHaveElementClass("pf-m-danger");
     });
 });

web/src/admin/flows/BoundStagesList.ts

@@ -135,7 +135,8 @@ export class BoundStagesList extends Table<FlowStageBinding> {
 
     renderEmpty(): TemplateResult {
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No Stages bound")} icon="pf-icon-module">
+            html`<ak-empty-state icon="pf-icon-module">
+                <span slot="header">${msg("No Stages bound")}</span>
                 <div slot="body">${msg("No stages are currently bound to this flow.")}</div>
                 <div slot="primary">
                     <ak-stage-wizard

web/src/admin/flows/FlowForm.ts

@@ -3,6 +3,7 @@ import { DesignationToLabel, LayoutToLabel } from "@goauthentik/admin/flows/util
 import { policyEngineModes } from "@goauthentik/admin/policies/PolicyEngineModes";
 import { AuthenticationEnum } from "@goauthentik/api/dist/models/AuthenticationEnum";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-slug-input.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -91,17 +92,16 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                 />
                 <p class="pf-c-form__helper-text">${msg("Shown as the Title in Flow pages.")}</p>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.slug)}"
-                    class="pf-c-form-control pf-m-monospace"
-                    autocomplete="off"
-                    spellcheck="false"
-                    required
-                />
-                <p class="pf-c-form__helper-text">${msg("Visible in the URL.")}</p>
-            </ak-form-element-horizontal>
+
+            <ak-slug-input
+                name="slug"
+                value=${ifDefined(this.instance?.slug)}
+                label=${msg("Slug")}
+                required
+                help=${msg("Visible in the URL.")}
+                input-hint="code"
+            ></ak-slug-input>
+
             <ak-form-element-horizontal label=${msg("Designation")} required name="designation">
                 <select class="pf-c-form-control">
                     <option value="" ?selected=${this.instance?.designation === undefined}>
@@ -211,9 +211,8 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                     ${msg("Required authentication level for this flow.")}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-group>
-                <span slot="header"> ${msg("Behavior settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Behavior settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal name="compatibilityMode">
                         <label class="pf-c-switch">
                             <input
@@ -286,9 +285,8 @@ export class FlowForm extends WithCapabilitiesConfig(ModelForm<Flow, string>) {
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Appearance settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Appearance settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Layout")} required name="layout">
                         <select class="pf-c-form-control">
                             <option

web/src/admin/outposts/OutpostForm.ts

@@ -231,9 +231,8 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                     selected-label="${msg("Selected Applications")}"
                 ></ak-dual-select-provider>
             </ak-form-element-horizontal>
-            <ak-form-group aria-label=${msg("Advanced settings")}>
-                <span slot="header"> ${msg("Advanced settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label=${msg("Advanced settings")}>
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Configuration")} name="config">
                         <ak-codemirror
                             mode=${CodeMirrorMode.YAML}

web/src/admin/policies/BoundPoliciesList.ts

@@ -198,7 +198,8 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
 
     renderEmpty(): TemplateResult {
         return super.renderEmpty(
-            html`<ak-empty-state header=${msg("No Policies bound.")} icon="pf-icon-module">
+            html`<ak-empty-state icon="pf-icon-module"
+                ><span slot="header">${msg("No Policies bound.")}</span>
                 <div slot="body">${msg("No policies are currently bound to this object.")}</div>
                 <div slot="primary">
                     <ak-policy-wizard

web/src/admin/policies/dummy/DummyPolicyForm.ts

@@ -64,9 +64,8 @@ export class DummyPolicyForm extends BasePolicyForm<DummyPolicy> {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Policy-specific settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Policy-specific settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal name="result">
                         <label class="pf-c-switch">
                             <input

web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts

@@ -76,9 +76,8 @@ export class EventMatcherPolicyForm extends BasePolicyForm<EventMatcherPolicy> {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Policy-specific settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Policy-specific settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Action")} name="action">
                         <ak-search-select
                             .fetchObjects=${async (query?: string): Promise<TypeCreate[]> => {

web/src/admin/policies/expiry/ExpiryPolicyForm.ts

@@ -64,9 +64,8 @@ export class PasswordExpiryPolicyForm extends BasePolicyForm<PasswordExpiryPolic
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Policy-specific settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Policy-specific settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Maximum age (in days)")}
                         required

web/src/admin/policies/expression/ExpressionPolicyForm.ts

@@ -67,9 +67,8 @@ export class ExpressionPolicyForm extends BasePolicyForm<ExpressionPolicy> {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Policy-specific settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Policy-specific settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Expression")}
                         required

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

@@ -78,9 +78,8 @@ export class GeoIPPolicyForm extends BasePolicyForm<GeoIPPolicy> {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-group>
-                <span slot="header"> ${msg("Distance settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Distance settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal name="checkHistoryDistance">
                         <label class="pf-c-switch">
                             <input
@@ -185,9 +184,8 @@ export class GeoIPPolicyForm extends BasePolicyForm<GeoIPPolicy> {
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header">${msg("Static rule settings")}</span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Static rule settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("ASNs")} name="asns">
                         <input
                             type="text"

web/src/admin/policies/password/PasswordPolicyForm.ts

@@ -44,9 +44,8 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
     }
 
     renderStaticRules(): TemplateResult {
-        return html` <ak-form-group>
-            <span slot="header"> ${msg("Static rules")} </span>
-            <div slot="body" class="pf-c-form">
+        return html` <ak-form-group label="${msg("Static rules")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     label=${msg("Minimum length")}
                     required
@@ -142,9 +141,8 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
 
     renderHIBP(): TemplateResult {
         return html`
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("HaveIBeenPwned settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("HaveIBeenPwned settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Allowed count")}
                         required
@@ -167,9 +165,8 @@ export class PasswordPolicyForm extends BasePolicyForm<PasswordPolicy> {
 
     renderZxcvbn(): TemplateResult {
         return html`
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("zxcvbn settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("zxcvbn settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Score threshold")}
                         required

web/src/admin/policies/reputation/ReputationPolicyForm.ts

@@ -74,9 +74,8 @@ doesn't pass when either or both of the selected options are equal or above the
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Policy-specific settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Policy-specific settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal name="checkIp">
                         <label class="pf-c-switch">
                             <input

web/src/admin/property-mappings/PropertyMappingProviderRACForm.ts

@@ -62,9 +62,8 @@ export class PropertyMappingProviderRACForm extends BasePropertyMappingForm<RACP
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("General settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("General settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Username")}
                         name="staticSettings.username"
@@ -89,9 +88,8 @@ export class PropertyMappingProviderRACForm extends BasePropertyMappingForm<RACP
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("RDP settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("RDP settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Ignore server certificate")}
                         name="staticSettings.ignore-cert"
@@ -134,9 +132,8 @@ export class PropertyMappingProviderRACForm extends BasePropertyMappingForm<RACP
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Advanced settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Advanced settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Expression")}
                         required

web/src/admin/providers/BaseProviderForm.ts

@@ -3,7 +3,7 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import { msg } from "@lit/localize";
 
 export abstract class BaseProviderForm<T> extends ModelForm<T, number> {
-    getSuccessMessage(): string {
+    public override getSuccessMessage(): string {
         return this.instance
             ? msg("Successfully updated provider.")
             : msg("Successfully created provider.");

web/src/admin/providers/ProviderListPage.ts

@@ -28,32 +28,38 @@ import { Provider, ProvidersApi } from "@goauthentik/api";
 
 @customElement("ak-provider-list")
 export class ProviderListPage extends TablePage<Provider> {
-    searchEnabled(): boolean {
+    override searchEnabled(): boolean {
         return true;
     }
-    pageTitle(): string {
+
+    override pageTitle(): string {
         return msg("Providers");
     }
-    pageDescription(): string {
+
+    override pageDescription(): string {
         return msg("Provide support for protocols like SAML and OAuth to assigned applications.");
     }
-    pageIcon(): string {
+
+    override pageIcon(): string {
         return "pf-icon pf-icon-integration";
     }
 
-    checkbox = true;
-    clearOnRefresh = true;
+    override checkbox = true;
+    override clearOnRefresh = true;
 
     @property()
-    order = "name";
+    public order = "name";
 
-    async apiEndpoint(): Promise<PaginatedResponse<Provider>> {
+    public searchLabel = msg("Provider name");
+    public searchPlaceholder = msg("Search for providers…");
+
+    override async apiEndpoint(): Promise<PaginatedResponse<Provider>> {
         return new ProvidersApi(DEFAULT_CONFIG).providersAllList(
             await this.defaultEndpointConfig(),
         );
     }
 
-    columns(): TableColumn[] {
+    override columns(): TableColumn[] {
         return [
             new TableColumn(msg("Name"), "name"),
             new TableColumn(msg("Application")),
@@ -62,8 +68,9 @@ export class ProviderListPage extends TablePage<Provider> {
         ];
     }
 
-    renderToolbarSelected(): TemplateResult {
+    override renderToolbarSelected(): TemplateResult {
         const disabled = this.selectedElements.length < 1;
+
         return html`<ak-forms-delete-bulk
             objectLabel=${msg("Provider(s)")}
             .objects=${this.selectedElements}
@@ -84,7 +91,7 @@ export class ProviderListPage extends TablePage<Provider> {
         </ak-forms-delete-bulk>`;
     }
 
-    rowApp(item: Provider): TemplateResult {
+    #rowApp(item: Provider): TemplateResult {
         if (item.assignedApplicationName) {
             return html`<i class="pf-icon pf-icon-ok pf-m-success"></i>
                 ${msg("Assigned to application ")}
@@ -92,6 +99,7 @@ export class ProviderListPage extends TablePage<Provider> {
                     >${item.assignedApplicationName}</a
                 >`;
         }
+
         if (item.assignedBackchannelApplicationName) {
             return html`<i class="pf-icon pf-icon-ok pf-m-success"></i>
                 ${msg("Assigned to application (backchannel) ")}
@@ -99,15 +107,15 @@ export class ProviderListPage extends TablePage<Provider> {
                     >${item.assignedBackchannelApplicationName}</a
                 >`;
         }
-        return html`<i class="pf-icon pf-icon-warning-triangle pf-m-warning"></i> ${msg(
-                "Warning: Provider not assigned to any application.",
-            )}`;
+
+        return html`<i aria-hidden="true" class="pf-icon pf-icon-warning-triangle pf-m-warning"></i>
+            ${msg("Warning: Provider not assigned to any application.")}`;
     }
 
-    row(item: Provider): TemplateResult[] {
+    override row(item: Provider): TemplateResult[] {
         return [
             html`<a href="#/core/providers/${item.pk}"> ${item.name} </a>`,
-            this.rowApp(item),
+            this.#rowApp(item),
             html`${item.verboseName}`,
             html`<ak-forms-modal>
                 <span slot="submit"> ${msg("Update")} </span>
@@ -120,16 +128,20 @@ export class ProviderListPage extends TablePage<Provider> {
                     type=${item.component}
                 >
                 </ak-proxy-form>
-                <button slot="trigger" class="pf-c-button pf-m-plain">
+                <button
+                    aria-label=${msg("Edit provider")}
+                    slot="trigger"
+                    class="pf-c-button pf-m-plain"
+                >
                     <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit"></i>
+                        <i aria-hidden="true" class="fas fa-edit"></i>
                     </pf-tooltip>
                 </button>
             </ak-forms-modal>`,
         ];
     }
 
-    renderObjectCreate(): TemplateResult {
+    override renderObjectCreate(): TemplateResult {
         return html`<ak-provider-wizard> </ak-provider-wizard> `;
     }
 }

web/src/admin/providers/ProviderWizard.ts

@@ -25,23 +25,16 @@ import { ProvidersApi, TypeCreate } from "@goauthentik/api";
 
 @customElement("ak-provider-wizard")
 export class ProviderWizard extends AKElement {
-    static get styles(): CSSResult[] {
-        return [PFBase, PFButton];
-    }
-
-    @property()
-    createText = msg("Create");
+    static styles: CSSResult[] = [PFBase, PFButton];
 
     @property({ attribute: false })
-    providerTypes: TypeCreate[] = [];
+    public providerTypes: TypeCreate[] = [];
 
     @property({ attribute: false })
-    finalHandler: () => Promise<void> = () => {
-        return Promise.resolve();
-    };
+    public finalHandler?: () => Promise<void>;
 
     @query("ak-wizard")
-    wizard?: Wizard;
+    private wizard?: Wizard;
 
     connectedCallback() {
         super.connectedCallback();
@@ -56,9 +49,7 @@ export class ProviderWizard extends AKElement {
                 .steps=${["initial"]}
                 header=${msg("New provider")}
                 description=${msg("Create a new provider.")}
-                .finalHandler=${() => {
-                    return this.finalHandler();
-                }}
+                .finalHandler=${this.finalHandler}
             >
                 <ak-wizard-page-type-create
                     name="selectProviderType"
@@ -82,7 +73,15 @@ export class ProviderWizard extends AKElement {
                         </ak-wizard-page-form>
                     `;
                 })}
-                <button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button>
+                <button
+                    aria-label=${msg("New Provider")}
+                    aria-description="${msg("Open the wizard to create a new provider.")}"
+                    type="button"
+                    slot="trigger"
+                    class="pf-c-button pf-m-primary"
+                >
+                    ${msg("Create")}
+                </button>
             </ak-wizard>
         `;
     }

web/src/admin/providers/google_workspace/GoogleWorkspaceProviderForm.ts

@@ -56,9 +56,8 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Protocol settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Credentials")}
                         required
@@ -181,9 +180,8 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group expanded>
-                <span slot="header">${msg("User filtering")}</span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("User filtering")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal name="excludeUsersServiceAccount">
                         <label class="pf-c-switch">
                             <input
@@ -234,9 +232,8 @@ export class GoogleWorkspaceProviderFormPage extends BaseProviderForm<GoogleWork
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Attribute mapping")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Attribute mapping")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("User Property Mappings")}
                         name="propertyMappings"

web/src/admin/providers/ldap/LDAPProviderFormForm.ts

@@ -47,7 +47,9 @@ export function renderForm(
 ) {
     return html`
         <ak-text-input
+            autocomplete="on"
             name="name"
+            placeholder=${msg("Provider name")}
             value=${ifDefined(provider?.name)}
             label=${msg("Name")}
             .errorMessages=${errors?.name ?? []}
@@ -80,10 +82,8 @@ export function renderForm(
         >
         </ak-switch-input>
 
-        <ak-form-group expanded>
-            <span slot="header"> ${msg("Flow settings")} </span>
-
-            <div slot="body" class="pf-c-form">
+        <ak-form-group open label="${msg("Flow settings")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     label=${msg("Bind flow")}
                     required
@@ -91,6 +91,7 @@ export function renderForm(
                     .errorMessages=${errors?.authorizationFlow ?? []}
                 >
                     <ak-branded-flow-search
+                        label=${msg("Bind flow")}
                         flowType=${FlowsInstancesListDesignationEnum.Authentication}
                         .currentFlow=${provider?.authorizationFlow}
                         .brandFlow=${brand?.flowAuthentication}
@@ -119,9 +120,8 @@ export function renderForm(
             </div>
         </ak-form-group>
 
-        <ak-form-group expanded>
-            <span slot="header"> ${msg("Protocol settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group open label="${msg("Protocol settings")}">
+            <div class="pf-c-form">
                 <ak-text-input
                     name="baseDn"
                     label=${msg("Base DN")}
@@ -141,6 +141,8 @@ export function renderForm(
                     .errorMessages=${errors?.certificate ?? []}
                 >
                     <ak-crypto-certificate-search
+                        label=${msg("Certificate")}
+                        placeholder=${msg("Select a certificate...")}
                         certificate=${ifDefined(provider?.certificate ?? nothing)}
                         name="certificate"
                     >

web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderForm.ts

@@ -55,9 +55,8 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Protocol settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Client ID")} required name="clientId">
                         <input
                             type="text"
@@ -157,9 +156,8 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group expanded>
-                <span slot="header">${msg("User filtering")}</span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("User filtering")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal name="excludeUsersServiceAccount">
                         <label class="pf-c-switch">
                             <input
@@ -210,9 +208,8 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Attribute mapping")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Attribute mapping")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("User Property Mappings")}
                         name="propertyMappings"

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

@@ -2,7 +2,7 @@ import { BaseProviderForm } from "@goauthentik/admin/providers/BaseProviderForm"
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { DualSelectPair } from "@goauthentik/elements/ak-dual-select/types";
 
-import { css } from "lit";
+import { CSSResult, css } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 import { ClientTypeEnum, OAuth2Provider, ProvidersApi } from "@goauthentik/api";
@@ -21,16 +21,14 @@ export async function oauth2ProvidersProvider(page = 1, search = "") {
 
     return {
         pagination: oauthProviders.pagination,
-        options: oauthProviders.results.map((provider) => providerToSelect(provider)),
+        options: oauthProviders.results.map(providerToSelect),
     };
 }
 
 export function oauth2ProviderSelector(instanceProviders: number[] | undefined) {
     if (!instanceProviders) {
         return async (mappings: DualSelectPair<OAuth2Provider>[]) =>
-            mappings.filter(
-                ([_0, _1, _2, source]: DualSelectPair<OAuth2Provider>) => source !== undefined,
-            );
+            mappings.filter(([, , , source]: DualSelectPair<OAuth2Provider>) => !source);
     }
 
     return async () => {
@@ -57,41 +55,46 @@ export function oauth2ProviderSelector(instanceProviders: number[] | undefined)
 
 @customElement("ak-provider-oauth2-form")
 export class OAuth2ProviderFormPage extends BaseProviderForm<OAuth2Provider> {
-    @state()
-    showClientSecret = true;
-
-    static get styles() {
-        return super.styles.concat(css`
+    static styles: CSSResult[] = [
+        ...super.styles,
+        css`
             ak-array-input {
                 width: 100%;
             }
-        `);
-    }
+        `,
+    ];
 
-    async loadInstance(pk: number): Promise<OAuth2Provider> {
+    @state()
+    protected showClientSecret = true;
+
+    override async loadInstance(pk: number): Promise<OAuth2Provider> {
         const provider = await new ProvidersApi(DEFAULT_CONFIG).providersOauth2Retrieve({
             id: pk,
         });
+
         this.showClientSecret = provider.clientType === ClientTypeEnum.Confidential;
+
         return provider;
     }
 
-    async send(data: OAuth2Provider): Promise<OAuth2Provider> {
+    override async send(data: OAuth2Provider): Promise<OAuth2Provider> {
         if (this.instance) {
             return new ProvidersApi(DEFAULT_CONFIG).providersOauth2Update({
                 id: this.instance.pk,
                 oAuth2ProviderRequest: data,
             });
         }
+
         return new ProvidersApi(DEFAULT_CONFIG).providersOauth2Create({
             oAuth2ProviderRequest: data,
         });
     }
 
-    renderForm() {
+    override renderForm() {
         const showClientSecretCallback = (show: boolean) => {
             this.showClientSecret = show;
         };
+
         return renderForm(this.instance ?? {}, [], this.showClientSecret, showClientSecretCallback);
     }
 }

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

@@ -125,7 +125,9 @@ export function renderForm(
     showClientSecretCallback: ShowClientSecret = defaultShowClientSecret,
 ) {
     return html` <ak-text-input
+            autocomplete="on"
             name="name"
+            placeholder=${msg("Provider name")}
             label=${msg("Name")}
             value=${ifDefined(provider?.name)}
             required
@@ -137,6 +139,8 @@ export function renderForm(
             required
         >
             <ak-flow-search
+                label=${msg("Authorization flow")}
+                placeholder=${msg("Select an authorization flow...")}
                 flowType=${FlowsInstancesListDesignationEnum.Authorization}
                 .currentFlow=${provider?.authorizationFlow}
                 required
@@ -145,9 +149,8 @@ export function renderForm(
                 ${msg("Flow used when authorizing this provider.")}
             </p>
         </ak-form-element-horizontal>
-        <ak-form-group expanded>
-            <span slot="header"> ${msg("Protocol settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group open label="${msg("Protocol settings")}">
+            <div class="pf-c-form">
                 <ak-radio-input
                     name="clientType"
                     label=${msg("Client type")}
@@ -196,6 +199,8 @@ export function renderForm(
                 <ak-form-element-horizontal label=${msg("Signing Key")} name="signingKey">
                     <!-- NOTE: 'null' cast to 'undefined' on signingKey to satisfy Lit requirements -->
                     <ak-crypto-certificate-search
+                        label=${msg("Signing Key")}
+                        placeholder=${msg("Select a signing key...")}
                         certificate=${ifDefined(provider?.signingKey ?? undefined)}
                         singleton
                     ></ak-crypto-certificate-search>
@@ -204,6 +209,8 @@ export function renderForm(
                 <ak-form-element-horizontal label=${msg("Encryption Key")} name="encryptionKey">
                     <!-- NOTE: 'null' cast to 'undefined' on encryptionKey to satisfy Lit requirements -->
                     <ak-crypto-certificate-search
+                        label=${msg("Encryption Key")}
+                        placeholder=${msg("Select an encryption key...")}
                         certificate=${ifDefined(provider?.encryptionKey ?? undefined)}
                     ></ak-crypto-certificate-search>
                     <p class="pf-c-form__helper-text">${msg("Key used to encrypt the tokens.")}</p>
@@ -211,14 +218,15 @@ export function renderForm(
             </div>
         </ak-form-group>
 
-        <ak-form-group>
-            <span slot="header"> ${msg("Advanced flow settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label=${msg("Advanced flow settings")}>
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     name="authenticationFlow"
                     label=${msg("Authentication flow")}
                 >
                     <ak-flow-search
+                        label=${msg("Authentication flow")}
+                        placeHolder=${msg("Select an authentication flow...")}
                         flowType=${FlowsInstancesListDesignationEnum.Authentication}
                         .currentFlow=${provider?.authenticationFlow}
                     ></ak-flow-search>
@@ -234,6 +242,8 @@ export function renderForm(
                     required
                 >
                     <ak-flow-search
+                        label=${msg("Invalidation flow")}
+                        placeHolder=${msg("Select an invalidation flow...")}
                         flowType=${FlowsInstancesListDesignationEnum.Invalidation}
                         .currentFlow=${provider?.invalidationFlow}
                         defaultFlowSlug="default-provider-invalidation-flow"
@@ -246,9 +256,8 @@ export function renderForm(
             </div>
         </ak-form-group>
 
-        <ak-form-group>
-            <span slot="header"> ${msg("Advanced protocol settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label="${msg("Advanced protocol settings")}">
+            <div class="pf-c-form">
                 <ak-text-input
                     name="accessCodeValidity"
                     label=${msg("Access code validity")}
@@ -331,9 +340,8 @@ export function renderForm(
             </div>
         </ak-form-group>
 
-        <ak-form-group>
-            <span slot="header">${msg("Machine-to-Machine authentication settings")}</span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label="${msg("Machine-to-Machine authentication settings")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     label=${msg("Federated OIDC Sources")}
                     name="jwtFederationSources"

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

@@ -1,5 +1,8 @@
 import "@goauthentik/admin/providers/oauth2/OAuth2ProviderRedirectURI";
-import { AkControlElement } from "@goauthentik/elements/AkControlElement.js";
+import {
+    AkControlElement,
+    formatFormElementAsJSON,
+} from "@goauthentik/elements/AkControlElement.js";
 import { type Spread } from "@goauthentik/elements/types";
 import { spread } from "@open-wc/lit-helpers";
 
@@ -43,9 +46,7 @@ export class OAuth2ProviderRedirectURI extends AkControlElement<RedirectURI> {
     controls?: HTMLInputElement[];
 
     json() {
-        return Object.fromEntries(
-            Array.from(this.controls ?? []).map((control) => [control.name, control.value]),
-        ) as unknown as RedirectURI;
+        return formatFormElementAsJSON<RedirectURI>(this.controls);
     }
 
     get isValid() {

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

@@ -4,6 +4,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import renderDescriptionList from "@goauthentik/components/DescriptionList";
 import "@goauthentik/components/events/ObjectChangelog";
+import { IDGenerator } from "@goauthentik/core/id";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/EmptyState";
@@ -265,12 +266,16 @@ export class OAuth2ProviderViewPage extends AKElement {
                     <div class="pf-c-card__body">
                         <form class="pf-c-form">
                             <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
+                                <label
+                                    class="pf-c-form__label"
+                                    for="${IDGenerator.elementID("providerInfo")}"
+                                >
                                     <span class="pf-c-form__label-text"
                                         >${msg("OpenID Configuration URL")}</span
                                     >
                                 </label>
                                 <input
+                                    id="${IDGenerator.elementID("providerInfo")}"
                                     class="pf-c-form-control"
                                     readonly
                                     type="text"
@@ -278,12 +283,16 @@ export class OAuth2ProviderViewPage extends AKElement {
                                 />
                             </div>
                             <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
+                                <label
+                                    class="pf-c-form__label"
+                                    for="${IDGenerator.elementID("issuer")}"
+                                >
                                     <span class="pf-c-form__label-text"
                                         >${msg("OpenID Configuration Issuer")}</span
                                     >
                                 </label>
                                 <input
+                                    id="${IDGenerator.elementID("issuer")}"
                                     class="pf-c-form-control"
                                     readonly
                                     type="text"
@@ -292,12 +301,16 @@ export class OAuth2ProviderViewPage extends AKElement {
                             </div>
                             <hr class="pf-c-divider" />
                             <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
+                                <label
+                                    class="pf-c-form__label"
+                                    for="${IDGenerator.elementID("authorize")}"
+                                >
                                     <span class="pf-c-form__label-text"
                                         >${msg("Authorize URL")}</span
                                     >
                                 </label>
                                 <input
+                                    id="${IDGenerator.elementID("authorize")}"
                                     class="pf-c-form-control"
                                     readonly
                                     type="text"
@@ -305,10 +318,14 @@ export class OAuth2ProviderViewPage extends AKElement {
                                 />
                             </div>
                             <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
+                                <label
+                                    class="pf-c-form__label"
+                                    for="${IDGenerator.elementID("token")}"
+                                >
                                     <span class="pf-c-form__label-text">${msg("Token URL")}</span>
                                 </label>
                                 <input
+                                    id="${IDGenerator.elementID("token")}"
                                     class="pf-c-form-control"
                                     readonly
                                     type="text"
@@ -316,12 +333,16 @@ export class OAuth2ProviderViewPage extends AKElement {
                                 />
                             </div>
                             <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
+                                <label
+                                    class="pf-c-form__label"
+                                    for="${IDGenerator.elementID("userInfo")}"
+                                >
                                     <span class="pf-c-form__label-text"
                                         >${msg("Userinfo URL")}</span
                                     >
                                 </label>
                                 <input
+                                    id="${IDGenerator.elementID("userInfo")}"
                                     class="pf-c-form-control"
                                     readonly
                                     type="text"
@@ -329,10 +350,14 @@ export class OAuth2ProviderViewPage extends AKElement {
                                 />
                             </div>
                             <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
+                                <label
+                                    class="pf-c-form__label"
+                                    for="${IDGenerator.elementID("logout")}"
+                                >
                                     <span class="pf-c-form__label-text">${msg("Logout URL")}</span>
                                 </label>
                                 <input
+                                    id="${IDGenerator.elementID("logout")}"
                                     class="pf-c-form-control"
                                     readonly
                                     type="text"
@@ -340,10 +365,14 @@ export class OAuth2ProviderViewPage extends AKElement {
                                 />
                             </div>
                             <div class="pf-c-form__group">
-                                <label class="pf-c-form__label">
+                                <label
+                                    class="pf-c-form__label"
+                                    for="${IDGenerator.elementID("jwks")}"
+                                >
                                     <span class="pf-c-form__label-text">${msg("JWKS URL")}</span>
                                 </label>
                                 <input
+                                    id="${IDGenerator.elementID("jwks")}"
                                     class="pf-c-form-control"
                                     readonly
                                     type="text"
@@ -389,9 +418,12 @@ export class OAuth2ProviderViewPage extends AKElement {
                     ${renderDescriptionList(
                         [
                             [
-                                msg("Preview for user"),
+                                html`<label for="${IDGenerator.elementID("preview-user")}"
+                                    >${msg("Preview for user")}</label
+                                >`,
                                 html`
                                     <ak-search-select
+                                        id="${IDGenerator.elementID("preview-user")}"
                                         .fetchObjects=${async (query?: string): Promise<User[]> => {
                                             const args: CoreUsersListRequest = {
                                                 ordering: "username",

web/src/admin/providers/proxy/ProxyProviderFormForm.ts

@@ -228,9 +228,8 @@ export function renderForm(
             input-hint="code"
         ></ak-text-input>
 
-        <ak-form-group>
-            <span slot="header">${msg("Advanced protocol settings")}</span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label="${msg("Advanced protocol settings")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal label=${msg("Certificate")} name="certificate">
                     <ak-crypto-certificate-search
                         .certificate=${provider?.certificate}
@@ -273,9 +272,8 @@ ${provider?.skipPathRegex}</textarea
                 </ak-form-element-horizontal>
             </div>
         </ak-form-group>
-        <ak-form-group>
-            <span slot="header">${msg("Authentication settings")}</span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label="${msg("Authentication settings")}">
+            <div class="pf-c-form">
                 <ak-switch-input
                     name="interceptHeaderAuth"
                     label=${msg("Intercept header authentication")}
@@ -333,9 +331,8 @@ ${provider?.skipPathRegex}</textarea
             </div>
         </ak-form-group>
 
-        <ak-form-group>
-            <span slot="header"> ${msg("Advanced flow settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label="${msg("Advanced flow settings")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     label=${msg("Authentication flow")}
                     name="authenticationFlow"

web/src/admin/providers/rac/EndpointForm.ts

@@ -115,9 +115,8 @@ export class EndpointForm extends ModelForm<Endpoint, string> {
                     selected-label="${msg("Selected User Property Mappings")}"
                 ></ak-dual-select-dynamic-selected>
             </ak-form-element-horizontal>
-            <ak-form-group>
-                <span slot="header"> ${msg("Advanced settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Advanced settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Settings")} name="settings">
                         <ak-codemirror
                             mode="yaml"

web/src/admin/providers/rac/RACProviderForm.ts

@@ -115,9 +115,8 @@ export class RACProviderFormPage extends ModelForm<RACProvider, number> {
                 </p>
             </ak-form-element-horizontal>
 
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Protocol settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Property mappings")}
                         name="propertyMappings"

web/src/admin/providers/radius/RadiusProviderFormForm.ts

@@ -44,6 +44,7 @@ export function renderForm(
         <ak-text-input
             name="name"
             label=${msg("Name")}
+            placeholder=${msg("Provider name")}
             value=${ifDefined(provider?.name)}
             .errorMessages=${errors?.name ?? []}
             required
@@ -57,6 +58,8 @@ export function renderForm(
             .errorMessages=${errors?.authorizationFlow ?? []}
         >
             <ak-branded-flow-search
+                label=${msg("Authentication flow")}
+                placeholder=${msg("Select an authentication flow...")}
                 flowType=${FlowsInstancesListDesignationEnum.Authentication}
                 .currentFlow=${provider?.authorizationFlow}
                 .brandFlow=${brand?.flowAuthentication}
@@ -73,17 +76,14 @@ export function renderForm(
         >
         </ak-switch-input>
 
-        <ak-form-group expanded>
-            <span slot="header"> ${msg("Protocol settings")} </span>
-            <div slot="body" class="pf-c-form">
-                <ak-hidden-text-input
-                    name="sharedSecret"
-                    label=${msg("Shared secret")}
+        <ak-form-group open label="${msg("Protocol settings")}">
+            <div class="pf-c-form">
+                <ak-hidden-text-input>
+                    name="sharedSecret" label=${msg("Shared secret")}
                     .errorMessages=${errors?.sharedSecret ?? []}
                     value=${provider?.sharedSecret ?? randomString(128, ascii_letters + digits)}
-                    required
-                    input-hint="code"
-                ></ak-hidden-text-input>
+                    required input-hint="code" ></ak-hidden-text-input
+                >
                 <ak-text-input
                     name="clientNetworks"
                     label=${msg("Client Networks")}
@@ -106,15 +106,16 @@ export function renderForm(
                 </ak-form-element-horizontal>
             </div>
         </ak-form-group>
-        <ak-form-group>
-            <span slot="header"> ${msg("Advanced flow settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label="${msg("Advanced flow settings")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     label=${msg("Invalidation flow")}
                     name="invalidationFlow"
                     required
                 >
                     <ak-flow-search
+                        label=${msg("Invalidation flow")}
+                        placeholder=${msg("Select an invalidation flow...")}
                         flowType=${FlowsInstancesListDesignationEnum.Invalidation}
                         .currentFlow=${provider?.invalidationFlow}
                         .errorMessages=${errors?.invalidationFlow ?? []}

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

@@ -84,9 +84,8 @@ export function renderForm(
             </p>
         </ak-form-element-horizontal>
 
-        <ak-form-group expanded>
-            <span slot="header"> ${msg("Protocol settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group open label="${msg("Protocol settings")}">
+            <div class="pf-c-form">
                 <ak-text-input
                     name="acsUrl"
                     label=${msg("ACS URL")}
@@ -122,9 +121,8 @@ export function renderForm(
             </div>
         </ak-form-group>
 
-        <ak-form-group>
-            <span slot="header"> ${msg("Advanced flow settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label="${msg("Advanced flow settings")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     label=${msg("Authentication flow")}
                     name="authenticationFlow"
@@ -157,9 +155,8 @@ export function renderForm(
             </div>
         </ak-form-group>
 
-        <ak-form-group>
-            <span slot="header"> ${msg("Advanced protocol settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group label="${msg("Advanced protocol settings")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal label=${msg("Signing Certificate")} name="signingKp">
                     <ak-crypto-certificate-search
                         .certificate=${provider?.signingKp}

web/src/admin/providers/scim/SCIMProviderFormForm.ts

@@ -31,9 +31,8 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
             required
             help=${msg("Method's display Name.")}
         ></ak-text-input>
-        <ak-form-group expanded>
-            <span slot="header"> ${msg("Protocol settings")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group open label="${msg("Protocol settings")}">
+            <div class="pf-c-form">
                 <ak-text-input
                     name="url"
                     label=${msg("URL")}
@@ -113,9 +112,8 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
                 </ak-form-element-horizontal>
             </div>
         </ak-form-group>
-        <ak-form-group expanded>
-            <span slot="header">${msg("User filtering")}</span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group open label="${msg("User filtering")}">
+            <div class="pf-c-form">
                 <ak-switch-input
                     name="excludeUsersServiceAccount"
                     label=${msg("Exclude service accounts")}
@@ -155,9 +153,8 @@ export function renderForm(provider?: Partial<SCIMProvider>, errors: ValidationE
             </div>
         </ak-form-group>
 
-        <ak-form-group expanded>
-            <span slot="header"> ${msg("Attribute mapping")} </span>
-            <div slot="body" class="pf-c-form">
+        <ak-form-group open label="${msg("Attribute mapping")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     label=${msg("User Property Mappings")}
                     name="propertyMappings"

web/src/admin/providers/ssf/SSFProviderFormPage.ts

@@ -57,9 +57,8 @@ export class SSFProviderFormPage extends BaseProviderForm<SSFProvider> {
                 value=${ifDefined(provider?.name)}
                 required
             ></ak-text-input>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Protocol settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Signing Key")}
                         name="signingKey"
@@ -93,9 +92,8 @@ export class SSFProviderFormPage extends BaseProviderForm<SSFProvider> {
                 </div>
             </ak-form-group>
 
-            <ak-form-group>
-                <span slot="header">${msg("Authentication settings")}</span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Authentication settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("OIDC Providers")}
                         name="oidcAuthProviders"

web/src/admin/rbac/InitialPermissionsListPage.ts

@@ -67,7 +67,7 @@ export class InitialPermissionsListPage extends TablePage<InitialPermissions> {
         </ak-forms-delete-bulk>`;
     }
 
-    render(): TemplateResult {
+    render() {
         return html`<ak-page-header
                 icon=${this.pageIcon()}
                 header=${this.pageTitle()}

web/src/admin/roles/RoleListPage.ts

@@ -65,7 +65,7 @@ export class RoleListPage extends TablePage<Role> {
         </ak-forms-delete-bulk>`;
     }
 
-    render(): TemplateResult {
+    render() {
         return html`<ak-page-header
                 icon=${this.pageIcon()}
                 header=${this.pageTitle()}

web/src/admin/sources/kerberos/KerberosSourceForm.ts

@@ -9,6 +9,7 @@ import {
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
 import "@goauthentik/components/ak-secret-text-input.js";
 import "@goauthentik/components/ak-secret-textarea-input.js";
+import "@goauthentik/components/ak-slug-input.js";
 import "@goauthentik/components/ak-switch-input";
 import "@goauthentik/components/ak-text-input";
 import "@goauthentik/components/ak-textarea-input";
@@ -87,12 +88,13 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                 value=${ifDefined(this.instance?.name)}
                 required
             ></ak-text-input>
-            <ak-text-input
+            <ak-slug-input
                 name="slug"
-                label=${msg("Slug")}
                 value=${ifDefined(this.instance?.slug)}
+                label=${msg("Slug")}
                 required
-            ></ak-text-input>
+                input-hint="code"
+            ></ak-slug-input>
             <ak-switch-input
                 name="enabled"
                 ?checked=${this.instance?.enabled ?? true}
@@ -119,9 +121,8 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                     "Enable this option to write password changes made in authentik back to Kerberos. Ignored if sync is disabled.",
                 )}
             ></ak-switch-input>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Realm settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Realm settings")}">
+                <div class="pf-c-form">
                     <ak-text-input
                         name="realm"
                         label=${msg("Realm")}
@@ -211,9 +212,8 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Sync connection settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Sync connection settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("KAdmin type")}
                         required
@@ -274,9 +274,8 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                     ></ak-text-input>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("SPNEGO settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("SPNEGO settings")}">
+                <div class="pf-c-form">
                     <ak-text-input
                         name="spnegoServerName"
                         label=${msg("SPNEGO server name")}
@@ -303,9 +302,8 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                     ></ak-text-input>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Kerberos Attribute mapping")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Kerberos Attribute mapping")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("User Property Mappings")}
                         name="userPropertyMappings"
@@ -342,9 +340,8 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Flow settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Flow settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Authentication flow")}
                         name="authenticationFlow"
@@ -375,9 +372,8 @@ export class KerberosSourceForm extends WithCapabilitiesConfig(BaseSourceForm<Ke
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Additional settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Additional settings")}">
+                <div class="pf-c-form">
                     <ak-text-input
                         name="userPathTemplate"
                         label=${msg("User path")}

web/src/admin/sources/ldap/LDAPSourceForm.ts

@@ -3,6 +3,7 @@ import { placeholderHelperText } from "@goauthentik/admin/helperText";
 import { BaseSourceForm } from "@goauthentik/admin/sources/BaseSourceForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import "@goauthentik/components/ak-secret-text-input.js";
+import "@goauthentik/components/ak-slug-input.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -54,14 +55,15 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.slug)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+
+            <ak-slug-input
+                name="slug"
+                value=${ifDefined(this.instance?.slug)}
+                label=${msg("Slug")}
+                required
+                input-hint="code"
+            ></ak-slug-input>
+
             <ak-form-element-horizontal name="enabled">
                 <label class="pf-c-switch">
                     <input
@@ -169,9 +171,8 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                     )}
                 </p>
             </ak-form-element-horizontal>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Connection settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Connection settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Server URI")}
                         required
@@ -275,9 +276,8 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("LDAP Attribute mapping")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("LDAP Attribute mapping")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("User Property Mappings")}
                         name="userPropertyMappings"
@@ -312,9 +312,8 @@ export class LDAPSourceForm extends BaseSourceForm<LDAPSource> {
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Additional settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Additional settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Parent Group")} name="syncParentGroup">
                         <ak-search-select
                             .fetchObjects=${async (query?: string): Promise<Group[]> => {

web/src/admin/sources/oauth/OAuthSourceForm.ts

@@ -10,6 +10,7 @@ import {
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-secret-textarea-input.js";
+import "@goauthentik/components/ak-slug-input.js";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
@@ -125,9 +126,8 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
         if (!this.providerType?.urlsCustomizable) {
             return html``;
         }
-        return html` <ak-form-group expanded>
-            <span slot="header"> ${msg("URL settings")} </span>
-            <div slot="body" class="pf-c-form">
+        return html` <ak-form-group open label="${msg("URL settings")}">
+            <div class="pf-c-form">
                 <ak-form-element-horizontal
                     label=${msg("Authorization URL")}
                     name="authorizationUrl"
@@ -267,16 +267,13 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.slug)}"
-                    class="pf-c-form-control pf-m-monospace"
-                    autocomplete="off"
-                    spellcheck="false"
-                    required
-                />
-            </ak-form-element-horizontal>
+            <ak-slug-input
+                name="slug"
+                value=${ifDefined(this.instance?.slug)}
+                label=${msg("Slug")}
+                required
+                input-hint="code"
+            ></ak-slug-input>
             <ak-form-element-horizontal name="enabled">
                 <label class="pf-c-switch">
                     <input
@@ -423,9 +420,8 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                       <p class="pf-c-form__helper-text">${iconHelperText}</p>
                   </ak-form-element-horizontal>`}
 
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Protocol settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Consumer key")}
                         required
@@ -466,9 +462,8 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                 </div>
             </ak-form-group>
             ${this.renderUrlOptions()}
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("OAuth Attribute mapping")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("OAuth Attribute mapping")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("User Property Mappings")}
                         name="userPropertyMappings"
@@ -503,9 +498,8 @@ export class OAuthSourceForm extends WithCapabilitiesConfig(BaseSourceForm<OAuth
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Flow settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Flow settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Authentication flow")}
                         name="authenticationFlow"

web/src/admin/sources/plex/PlexSourceForm.ts

@@ -10,6 +10,7 @@ import {
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex";
 import { ascii_letters, digits, randomString } from "@goauthentik/common/utils";
+import "@goauthentik/components/ak-slug-input.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-provider.js";
@@ -183,14 +184,15 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.slug)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+
+            <ak-slug-input
+                name="slug"
+                value=${ifDefined(this.instance?.slug)}
+                label=${msg("Slug")}
+                required
+                input-hint="code"
+            ></ak-slug-input>
+
             <ak-form-element-horizontal name="enabled">
                 <label class="pf-c-switch">
                     <input
@@ -332,9 +334,8 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                       />
                       <p class="pf-c-form__helper-text">${iconHelperText}</p>
                   </ak-form-element-horizontal>`}
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Protocol settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Client ID")} required name="clientId">
                         <input
                             type="text"
@@ -346,9 +347,8 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                     ${this.renderSettings()}
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Flow settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Flow settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Authentication flow")}
                         name="authenticationFlow"
@@ -379,9 +379,8 @@ export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSo
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Plex Attribute mapping")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Plex Attribute mapping")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("User Property Mappings")}
                         name="userPropertyMappings"

web/src/admin/sources/saml/SAMLSourceForm.ts

@@ -9,6 +9,7 @@ import {
     UserMatchingModeToLabel,
 } from "@goauthentik/admin/sources/oauth/utils";
 import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-slug-input.js";
 import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -89,14 +90,15 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                     required
                 />
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${msg("Slug")} required name="slug">
-                <input
-                    type="text"
-                    value="${ifDefined(this.instance?.slug)}"
-                    class="pf-c-form-control"
-                    required
-                />
-            </ak-form-element-horizontal>
+
+            <ak-slug-input
+                name="slug"
+                value=${ifDefined(this.instance?.slug)}
+                label=${msg("Slug")}
+                required
+                input-hint="code"
+            ></ak-slug-input>
+
             <ak-form-element-horizontal name="enabled">
                 <label class="pf-c-switch">
                     <input
@@ -231,9 +233,8 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                       <p class="pf-c-form__helper-text">${iconHelperText}</p>
                   </ak-form-element-horizontal>`}
 
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("Protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("Protocol settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("SSO URL")} required name="ssoUrl">
                         <input
                             type="text"
@@ -319,9 +320,8 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Advanced protocol settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Advanced protocol settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal name="allowIdpInitiated">
                         <label class="pf-c-switch">
                             <input
@@ -491,9 +491,8 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group expanded>
-                <span slot="header"> ${msg("SAML Attribute mapping")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group open label="${msg("SAML Attribute mapping")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("User Property Mappings")}
                         name="userPropertyMappings"
@@ -528,9 +527,8 @@ export class SAMLSourceForm extends WithCapabilitiesConfig(BaseSourceForm<SAMLSo
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
-            <ak-form-group>
-                <span slot="header"> ${msg("Flow settings")} </span>
-                <div slot="body" class="pf-c-form">
+            <ak-form-group label="${msg("Flow settings")}">
+                <div class="pf-c-form">
                     <ak-form-element-horizontal
                         label=${msg("Pre-authentication flow")}
                         required