web: Flesh out radio buttons clean up. Add fonts, autocomplete disable.

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

@@ -74,6 +74,7 @@ export class MicrosoftEntraProviderFormPage extends BaseProviderForm<MicrosoftEn
                     <ak-hidden-text-input
                         name="clientSecret"
                         label=${msg("Client Secret")}
+                        autocomplete="off"
                         value="${this.instance?.clientSecret ?? ""}"
                         input-hint="code"
                         required

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

@@ -171,6 +171,7 @@ export function renderForm(
                 </ak-text-input>
                 <ak-hidden-text-input
                     name="clientSecret"
+                    autocomplete="off"
                     label=${msg("Client Secret")}
                     value="${provider?.clientSecret ?? randomString(128, ascii_letters + digits)}"
                     input-hint="code"

web/src/common/styles/authentik.css

@@ -1,3 +1,5 @@
+@import url("./fonts.css");
+
 /**
  * @file authentik base UI theme.
  */
@@ -73,6 +75,54 @@ html > form > input {
 
 /* #endregion */
 
+/* #region Form */
+
+.pf-c-form {
+    --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--form-element);
+
+    &.ak-m-radio-list {
+        --pf-c-form--GridGap: 0.5rem;
+
+        .pf-c-radio {
+            --pf-c-radio__input--MarginTop: 0;
+            --pf-c-radio__input--first-child--MarginLeft: 0.25rem;
+            padding: 1rem;
+
+            .pf-c-radio__input {
+                place-self: center;
+                grid-row: 3 / -1;
+            }
+        }
+    }
+}
+
+.pf-c-radio {
+    --pf-c-radio__label--FontWeight: 500;
+    --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--lg);
+
+    user-select: none;
+    cursor: pointer;
+    border-radius: var(--pf-c-card--m-rounded--BorderRadius);
+
+    transition: background-color linear 100ms;
+
+    outline: 1px solid transparent;
+
+    &:hover {
+        background-color: var(
+            --radio-background-color--hover,
+            var(--pf-global--BackgroundColor--light-200)
+        );
+    }
+
+    &:has(input:checked) {
+        background-color: var(
+            --radio-background-color--selected,
+            var(--pf-global--BackgroundColor--light-200)
+        );
+    }
+}
+
 /* #region Icons */
 
 .pf-icon {

web/src/common/styles/fonts.css

@@ -0,0 +1,100 @@
+body {
+    --pf-global--FontFamily--sans-serif2: "foobar";
+
+    --pf-global--FontFamily--sans-serif:
+        RedHatVF, "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
+
+    --pf-global--FontFamily--heading--sans-serif:
+        RedHatDisplayVF, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+
+    --pf-global--FontFamily--monospace:
+        RedHatMonoVF, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+        monospace;
+}
+
+code,
+pre {
+    /*
+        The variable weight is a bit too thin compared to the fixed weight.
+        So we'll use a slightly larger value here to compensate.
+     */
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "RedHatDisplayVF";
+    font-style: normal;
+    font-weight: 300 900;
+    font-display: fallback;
+    src:
+        local("Red Hat Display"),
+        url("/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2")
+            format("woff2-variations"),
+        url("https://goauthentik.io/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2")
+            format("woff2-variations");
+}
+
+@font-face {
+    font-family: "RedHatDisplayVF";
+    font-style: italic;
+    font-weight: 300 900;
+    font-display: fallback;
+    src:
+        local("Red Hat Display"),
+        url("/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2")
+            format("woff2-variations"),
+        url("https://goauthentik.io/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2")
+            format("woff2-variations");
+}
+
+@font-face {
+    font-family: "RedHatTextVF";
+    font-style: normal;
+    font-weight: 400 500;
+    font-display: fallback;
+    src:
+        local("Red Hat Display"),
+        url("/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2")
+            format("woff2-variations"),
+        url("https://goauthentik.io/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2")
+            format("woff2-variations");
+}
+
+@font-face {
+    font-family: "RedHatTextVF";
+    font-style: italic;
+    font-weight: 400 500;
+    font-display: fallback;
+    src:
+        local("Red Hat Display"),
+        url("/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2")
+            format("woff2-variations")
+            url("https://goauthentik.io/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2")
+            format("woff2-variations");
+}
+
+@font-face {
+    font-family: "RedHatMonoVF";
+    font-style: normal;
+    font-weight: 300 700;
+    font-display: fallback;
+    src:
+        local("Red Hat Mono"),
+        url("/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2")
+            format("woff2-variations"),
+        url("https://goauthentik.io/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2")
+            format("woff2-variations");
+}
+
+@font-face {
+    font-family: "RedHatMonoVF";
+    font-style: italic;
+    font-weight: 300 700;
+    font-display: fallback;
+    src:
+        local("Red Hat Mono"),
+        url("/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2")
+            format("woff2-variations"),
+        url("https://goauthentik.io/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2")
+            format("woff2-variations");
+}

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

@@ -14,6 +14,8 @@
     --ak-global--Color--100: var(--ak-dark-foreground) !important;
     --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
     --pf-global--BorderColor--100: var(--ak-dark-background-lighter) !important;
+    --radio-background-color--hover: rgba(3, 3, 3, 0.1);
+    --radio-background-color--selected: rgba(3, 3, 3, 0.3);
 }
 
 body {

web/src/components/ak-hidden-text-input.ts

@@ -79,7 +79,7 @@ export class AkHiddenTextInput<T extends InputLike = HTMLInputElement>
      * @attribute
      */
     @property({ type: String })
-    public autocomplete?: "none" | AutoFill;
+    public autocomplete?: AutoFill;
 
     /**
      * @property
@@ -118,6 +118,7 @@ export class AkHiddenTextInput<T extends InputLike = HTMLInputElement>
         return html` <input
             style="flex: 1 1 auto; min-width: 0;"
             part="input"
+            autocomplete=${ifDefined(this.autocomplete)}
             type=${this.revealed ? "text" : "password"}
             @input=${setValue}
             value=${ifDefined(this.value)}

web/src/elements/forms/Radio.ts

@@ -42,10 +42,6 @@ export class Radio<T> extends CustomEmitterElement(AKElement) {
                     var(--pf-c-form--m-horizontal__group-label--md--PaddingTop) * 1.3
                 );
             }
-            .pf-c-radio label,
-            .pf-c-radio span {
-                user-select: none;
-            }
         `,
     ];
 

web/src/elements/wizard/TypeCreateWizardPage.ts

@@ -8,7 +8,7 @@ import { TypeCreate } from "@goauthentik/api";
 import { msg, str } from "@lit/localize";
 import { css, CSSResult, html, nothing, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { createRef, ref, Ref } from "lit/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
@@ -26,13 +26,13 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
     //#region Properties
 
     @property({ attribute: false })
-    types: TypeCreate[] = [];
+    public types: TypeCreate[] = [];
 
     @property({ attribute: false })
-    selectedType?: TypeCreate;
+    public selectedType: TypeCreate | null = null;
 
     @property({ type: String })
-    layout: TypeCreateWizardPageLayouts = TypeCreateWizardPageLayouts.list;
+    public layout: TypeCreateWizardPageLayouts = TypeCreateWizardPageLayouts.list;
 
     //#endregion
 
@@ -47,6 +47,7 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
                 max-height: 2em;
                 min-height: 2em;
             }
+
             :host([theme="dark"]) .pf-c-card__header-main img {
                 filter: invert(1);
             }
@@ -55,7 +56,7 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
 
     //#region Refs
 
-    formRef: Ref<HTMLFormElement> = createRef();
+    #formRef = createRef<HTMLFormElement>();
 
     //#endregion
 
@@ -63,12 +64,12 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
 
     public reset = () => {
         super.reset();
-        this.selectedType = undefined;
-        this.formRef.value?.reset();
+        this.selectedType = null;
+        this.#formRef.value?.reset();
     };
 
-    activeCallback = (): void => {
-        const form = this.formRef.value;
+    public override activeCallback = (): void => {
+        const form = this.#formRef.value;
 
         this.host.isValid = form?.checkValidity() ?? false;
 
@@ -138,31 +139,36 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
 
     renderList(): TemplateResult {
         return html`<form
-            ${ref(this.formRef)}
-            class="pf-c-form pf-m-horizontal"
+            ${ref(this.#formRef)}
+            class="pf-c-form pf-m-horizontal ak-m-radio-list"
             data-ouid-component-type="ak-type-create-list"
         >
-            ${this.types.map((type) => {
+            ${this.types.map((type, idx) => {
                 const requiresEnterprise = type.requiresEnterprise && !this.hasEnterpriseLicense;
+                const id = `${type.component}-${type.modelName}-${idx}`;
 
                 return html`<div
                     class="pf-c-radio"
                     data-ouid-component-type="ak-type-create-list-card"
                     data-ouid-component-name=${type.modelName.split(".")[1] ?? "--unknown--"}
+                    @click=${() => {
+                        this.shadowRoot?.getElementById(id)?.click();
+                    }}
                 >
                     <input
                         class="pf-c-radio__input"
                         type="radio"
                         name="type"
-                        id=${`${type.component}-${type.modelName}`}
+                        id=${id}
+                        required
+                        ?checked=${this.selectedType?.modelName === type.modelName}
                         @change=${() => {
                             this.selectDispatch(type);
+                            this.selectedType = type;
                         }}
                         ?disabled=${requiresEnterprise}
                     />
-                    <label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`}
-                        >${type.name}</label
-                    >
+                    <label class="pf-c-radio__label" for=${id}>${type.name}</label>
                     <span class="pf-c-radio__description"
                         >${type.description}
                         ${requiresEnterprise