From 9caf8aba182071b24e48bade45eeb9e7e306c30f Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 11 Apr 2024 10:59:56 +0200
Subject: [PATCH] convert `FormControlMixin` to `UUIFormControlMixin` due to
 breaking change in uui

---
 .../input-collection-configuration.element.ts        |  4 ++--
 .../components/input-color/input-color.element.ts    |  4 ++--
 .../input-content-type-property.element.ts           |  4 ++--
 .../core/components/input-date/input-date.element.ts |  6 +++---
 .../input-dropdown/input-dropdown-list.element.ts    |  4 ++--
 .../components/input-entity/input-entity.element.ts  |  4 ++--
 .../input-eye-dropper/input-eye-dropper.element.ts   |  4 ++--
 .../input-multi-url/input-multi-url.element.ts       |  4 ++--
 .../input-radio-button-list.element.ts               |  4 ++--
 .../components/input-slider/input-slider.element.ts  |  6 +++---
 .../components/input-toggle/input-toggle.element.ts  |  4 ++--
 .../input-tree-picker-source.element.ts              |  6 +++---
 .../input-upload-field/input-upload-field.element.ts |  4 ++--
 .../multiple-color-picker-input.element.ts           |  4 ++--
 .../multiple-color-picker-item-input.element.ts      |  6 +++---
 .../input-multiple-text-string-item.element.ts       |  6 +++---
 .../input-multiple-text-string.element.ts            |  4 ++--
 .../input-culture-select.element.ts                  |  8 ++++----
 .../ui-culture-input/ui-culture-input.element.ts     | 12 ++++++------
 .../input-checkbox-list.element.ts                   |  4 ++--
 .../input-section/input-section.element.ts           |  4 ++--
 .../tree/components/input-tree/input-tree.element.ts |  4 ++--
 .../data-type-flow-input.element.ts                  |  4 ++--
 .../data-type-input/data-type-input.element.ts       |  4 ++--
 .../input-document-type.element.ts                   |  4 ++--
 .../input-document-root-picker.element.ts            |  4 ++--
 .../input-document/input-document.element.ts         |  4 ++--
 ...nput-document-granular-user-permission.element.ts |  4 ++--
 .../input-language/input-language.element.ts         |  4 ++--
 .../input-markdown-editor/input-markdown.element.ts  |  4 ++--
 .../input-media-type/input-media-type.element.ts     |  4 ++--
 .../components/input-media/input-media.element.ts    |  4 ++--
 .../input-member-group/input-member-group.element.ts |  4 ++--
 .../input-member-type/input-member-type.element.ts   |  4 ++--
 .../components/input-member/input-member.element.ts  |  4 ++--
 .../object-type/input-object-type.element.ts         |  4 ++--
 .../input-static-file/input-static-file.element.ts   |  4 ++--
 .../tags/components/tags-input/tags-input.element.ts |  4 ++--
 .../stylesheet-input/stylesheet-input.element.ts     |  4 ++--
 .../stylesheet-rule-input.element.ts                 |  4 ++--
 .../input-template/input-template.element.ts         |  4 ++--
 .../template-card/template-card.element.ts           |  4 ++--
 .../input-tiny-mce/input-tiny-mce.element.ts         |  4 ++--
 .../input-user-group/user-group-input.element.ts     |  4 ++--
 .../input-entity-user-permission.element.ts          |  4 ++--
 .../user/components/user-input/user-input.element.ts |  4 ++--
 46 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts
index 9e27a0707c..250a041229 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts
@@ -1,5 +1,5 @@
 import { html, customElement, property, css, state, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
@@ -13,7 +13,7 @@ import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/mod
 import type { UmbDataTypeItemModel } from '@umbraco-cms/backoffice/data-type';
 
 @customElement('umb-input-collection-configuration')
-export class UmbInputCollectionConfigurationElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputCollectionConfigurationElement extends UUIFormControlMixin(UmbLitElement, {}) {
 	protected getFormElement() {
 		return undefined;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.element.ts
index 44b2794d90..b616c98dfd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.element.ts
@@ -1,5 +1,5 @@
 import { html, customElement, property, map, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
@@ -10,7 +10,7 @@ import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui
  * @element umb-input-color
  */
 @customElement('umb-input-color')
-export class UmbInputColorElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ type: Boolean })
 	showLabels = false;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-content-type-property/input-content-type-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-content-type-property/input-content-type-property.element.ts
index 5ea836aa88..a4304c9162 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-content-type-property/input-content-type-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-content-type-property/input-content-type-property.element.ts
@@ -1,5 +1,5 @@
 import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbChangeEvent, UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbMediaTypeDetailRepository } from '@umbraco-cms/backoffice/media-type';
@@ -32,7 +32,7 @@ type UmbInputContentTypePropertyConfiguration = {
 };
 
 @customElement('umb-input-content-type-property')
-export class UmbInputContentTypePropertyElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputContentTypePropertyElement extends UUIFormControlMixin(UmbLitElement, undefined) {
 	#configuration: UmbInputContentTypePropertyConfiguration = {
 		documentTypes: {
 			item: {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
index 9331038dcf..d3f34925ef 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
@@ -1,11 +1,11 @@
 import { UmbConfigRepository } from '../../repository/config/config.repository.js';
-import { css, html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-input-date')
-export class UmbInputDateElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputDateElement extends UUIFormControlMixin(UmbLitElement, '') {
 	protected getFormElement() {
 		return undefined;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
index ca52c1e656..3fb1592fc6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
@@ -1,11 +1,11 @@
 import { css, html, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-dropdown-list')
-export class UmbInputDropdownListElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputDropdownListElement extends UUIFormControlMixin(UmbLitElement, undefined) {
 	@property({ type: Array })
 	public options?: Array<Option>;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-entity/input-entity.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-entity/input-entity.element.ts
index 9395d4ad09..2737f43596 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-entity/input-entity.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-entity/input-entity.element.ts
@@ -9,13 +9,13 @@ import {
 	when,
 } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 
 @customElement('umb-input-entity')
-export class UmbInputEntityElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputEntityElement extends UUIFormControlMixin(UmbLitElement, '') {
 	// TODO: [LK] Add sort ordering.
 
 	protected getFormElement() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts
index 4c2a24bc4e..58ca8a736a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts
@@ -1,10 +1,10 @@
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-eye-dropper')
-export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputEyeDropperElement extends UUIFormControlMixin(UmbLitElement, '') {
 	protected getFormElement() {
 		return undefined;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
index d2ceeabca2..52cccb7c5f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts
@@ -1,5 +1,5 @@
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
@@ -13,7 +13,7 @@ import type { UmbModalRouteBuilder, UmbLinkPickerLink } from '@umbraco-cms/backo
  * @fires focus - when the input gains focus
  */
 @customElement('umb-input-multi-url')
-export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, '') {
 	protected getFormElement() {
 		return undefined;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts
index b52be82f13..c7cd5c44c9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts
@@ -1,11 +1,11 @@
 import { css, html, nothing, repeat, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-radio-button-list')
-export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputRadioButtonListElement extends UUIFormControlMixin(UmbLitElement, '') {
 	#value: string = '';
 
 	@property()
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts
index 651fa38e66..7e7cc81dca 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-slider/input-slider.element.ts
@@ -1,10 +1,10 @@
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUISliderEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-slider')
-export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ type: Number })
 	min = 0;
 
@@ -29,7 +29,7 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 
 	#onChange(e: UUISliderEvent) {
 		e.stopPropagation();
-		this.value = e.target.value;
+		this.value = e.target.value as string;
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts
index 6b7f5c856b..1fe0364836 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts
@@ -1,10 +1,10 @@
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-input-toggle')
-export class UmbInputToggleElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '') {
 	_checked = false;
 	@property({ type: Boolean })
 	public set checked(toggle: boolean) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
index cbbae5a775..be4d8e0aeb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree-picker-source/input-tree-picker-source.element.ts
@@ -1,7 +1,7 @@
 import type { UmbInputDocumentRootPickerElement } from '@umbraco-cms/backoffice/document';
 import { html, customElement, property, css, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
@@ -26,7 +26,7 @@ export type UmbTreePickerDynamicRootQueryStep = {
 };
 
 @customElement('umb-input-tree-picker-source')
-export class UmbInputTreePickerSourceElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputTreePickerSourceElement extends UUIFormControlMixin(UmbLitElement, '') {
 	protected getFormElement() {
 		return undefined;
 	}
@@ -89,7 +89,7 @@ export class UmbInputTreePickerSourceElement extends FormControlMixin(UmbLitElem
 	#onDocumentRootChange(event: CustomEvent) {
 		switch (this.type) {
 			case 'content':
-				this.dynamicRoot = (event.target as UmbInputDocumentRootPickerElement).data;
+				this.dynamicRoot = (event?.target as unknown as UmbInputDocumentRootPickerElement).data;
 
 				// HACK: Workaround consolidating the old content-picker and dynamic-root. [LK:2024-01-24]
 				if (this.dynamicRoot?.originAlias === 'ByKey') {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
index ad87b45ca5..e7f6443b11 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
@@ -13,7 +13,7 @@ import {
 	state,
 	repeat,
 } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UUIFileDropzoneElement, UUIFileDropzoneEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
@@ -22,7 +22,7 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 
 @customElement('umb-input-upload-field')
-export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElement, '') {
 	private _keys: Array<string> = [];
 	/**
 	 * @description Keys to the files that belong to this upload field.
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
index 619a58c0cc..24f099399a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
@@ -9,7 +9,7 @@ import {
 	property,
 	state,
 } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
@@ -21,7 +21,7 @@ import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
  * @element umb-multiple-color-picker-input
  */
 @customElement('umb-multiple-color-picker-input')
-export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	#sorter = new UmbSorterController(this, {
 		getUniqueOfElement: (element: UmbMultipleColorPickerItemInputElement) => {
 			return element.value.toString();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
index 2b6d05ffd5..3032099bec 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
@@ -9,7 +9,7 @@ import {
 	state,
 } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIColorPickerElement, UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -18,7 +18,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
  * @element umb-multiple-color-picker-item-input
  */
 @customElement('umb-multiple-color-picker-item-input')
-export class UmbMultipleColorPickerItemInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ type: String })
 	public set value(value: string) {
 		if (value.startsWith('#')) {
@@ -174,7 +174,7 @@ export class UmbMultipleColorPickerItemInputElement extends FormControlMixin(Umb
 								?disabled=${this.disabled}
 								compact>
 								<uui-icon name="icon-trash"></uui-icon>
-						  </uui-button>`}
+							</uui-button>`}
 				</div>
 			</uui-form-validation-message>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
index f606197309..3713da212d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts
@@ -1,6 +1,6 @@
 import { css, html, nothing, customElement, property, query } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
  * @element umb-input-multiple-text-string-item
  */
 @customElement('umb-input-multiple-text-string-item')
-export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMultipleTextStringItemElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * Disables the input
 	 * @type {boolean}
@@ -101,7 +101,7 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
 						?disabled=${this.disabled}
 						compact>
 						<uui-icon name="icon-trash"></uui-icon>
-				  </uui-button>`}
+					</uui-button>`}
 		`;
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts
index e014cbeba7..06e73c10d0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts
@@ -1,6 +1,6 @@
 import type { UmbInputMultipleTextStringItemElement } from './input-multiple-text-string-item.element.js';
 import { css, html, nothing, repeat, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
@@ -10,7 +10,7 @@ import type { UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/even
  * @element umb-input-multiple-text-string
  */
 @customElement('umb-input-multiple-text-string')
-export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMultipleTextStringElement extends UUIFormControlMixin(UmbLitElement, '') {
 	#sorter = new UmbSorterController(this, {
 		getUniqueOfElement: (element) => {
 			return element.getAttribute('data-sort-entry-id');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts
index eb00b0e550..b8bf9fdc87 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/culture/components/input-culture-select/input-culture-select.element.ts
@@ -2,12 +2,12 @@ import { UmbCultureRepository } from '../../repository/culture.repository.js';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { html, repeat, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIComboboxElement, UUIComboboxEvent } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { CultureReponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 
 @customElement('umb-input-culture-select')
-export class UmbInputCultureSelectElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputCultureSelectElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * Disables the input
 	 * @type {boolean}
@@ -56,9 +56,9 @@ export class UmbInputCultureSelectElement extends FormControlMixin(UmbLitElement
 	#onCultureChange(event: UUIComboboxEvent) {
 		event.stopPropagation();
 		const target = event.composedPath()[0] as UUIComboboxElement;
-		this._value = target.value;
+		this.value = target.value;
 		const culture = this._cultures.find(
-			(culture) => culture.name.toLowerCase() === (this._value as string).toLowerCase(),
+			(culture) => culture.name.toLowerCase() === (this.value as string).toLowerCase(),
 		);
 		this.selectedCultureName = culture?.englishName;
 		this.dispatchEvent(new UmbChangeEvent());
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/localization/components/ui-culture-input/ui-culture-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/localization/components/ui-culture-input/ui-culture-input.element.ts
index bbed3c9eac..5c46080ee5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/localization/components/ui-culture-input/ui-culture-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/localization/components/ui-culture-input/ui-culture-input.element.ts
@@ -1,7 +1,7 @@
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { css, html, customElement, query, state, property } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIComboboxElement, UUIComboboxEvent } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { ManifestLocalization } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@@ -12,7 +12,7 @@ interface UmbCultureInputOption {
 }
 
 @customElement('umb-ui-culture-input')
-export class UmbUiCultureInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbUiCultureInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@state()
 	private _options: Array<UmbCultureInputOption> = [];
 
@@ -21,12 +21,12 @@ export class UmbUiCultureInputElement extends FormControlMixin(UmbLitElement) {
 
 	@property({ type: String })
 	get value() {
-		return this._value;
+		return super.value;
 	}
 	set value(value: FormDataEntryValue | FormData) {
 		if (typeof value === 'string') {
-			const oldValue = this._value;
-			this._value = value.toLowerCase();
+			const oldValue = super.value;
+			super.value = value.toLowerCase();
 			this.requestUpdate('value', oldValue);
 		}
 	}
@@ -70,7 +70,7 @@ export class UmbUiCultureInputElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	render() {
-		return html` <uui-combobox value="${this._value}" @change=${this.#onChange}>
+		return html` <uui-combobox value="${this.value}" @change=${this.#onChange}>
 			<uui-combobox-list>
 				${this._options.map(
 					(option) => html`<uui-combobox-list-option value="${option.value}">${option.name}</uui-combobox-list-option>`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/input-checkbox-list/input-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/input-checkbox-list/input-checkbox-list.element.ts
index 9fd855e21f..3952186dac 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/input-checkbox-list/input-checkbox-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/input-checkbox-list/input-checkbox-list.element.ts
@@ -1,11 +1,11 @@
 import { css, html, nothing, repeat, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-checkbox-list')
-export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputCheckboxListElement extends UUIFormControlMixin(UmbLitElement, '') {
 	// TODO: Could this use a type that we export to ensure TS failure, or hook this up with a type coming from backend?
 	@property({ attribute: false })
 	public list: Array<{ label: string; value: string; checked: boolean }> = [];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts
index 40040eca48..63025e5774 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts
@@ -1,12 +1,12 @@
 import type { UmbSectionItemModel } from '../../repository/index.js';
 import { UmbSectionPickerContext } from './input-section.context.js';
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-input-section')
-export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputSectionElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
index 5129eacf48..83ddc09f3c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
@@ -1,5 +1,5 @@
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
@@ -9,7 +9,7 @@ import type { UmbReferenceByUniqueAndType } from '@umbraco-cms/backoffice/models
 import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-input-tree')
-export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputTreeElement extends UUIFormControlMixin(UmbLitElement, '') {
 	protected getFormElement() {
 		return undefined;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
index d89712a6da..a899ddbf5a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
@@ -1,7 +1,7 @@
 import { UMB_DATATYPE_WORKSPACE_MODAL } from '../../index.js';
 import { UMB_DATA_TYPE_PICKER_FLOW_MODAL } from '../../modals/index.js';
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -15,7 +15,7 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
  * @fires focus - when the input gains focus
  */
 @customElement('umb-data-type-flow-input')
-export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputDataTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
 	protected getFormElement() {
 		return undefined;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-input/data-type-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-input/data-type-input.element.ts
index de989b2070..504d13de9c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-input/data-type-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-input/data-type-input.element.ts
@@ -1,12 +1,12 @@
 import type { UmbDataTypeItemModel } from '../../repository/item/types.js';
 import { UmbDataTypePickerContext } from './data-type-input.context.js';
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-data-type-input')
-export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbDataTypeInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
index c022d1000d..86fa8b08ed 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
@@ -10,13 +10,13 @@ import {
 	repeat,
 	nothing,
 } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-input-document-type')
-export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputDocumentTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * Limits to only select Element Types
 	 * @type {boolean}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-root-picker/input-document-root-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-root-picker/input-document-root-picker.element.ts
index d8b2b46b98..fdf2e960ac 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-root-picker/input-document-root-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-root-picker/input-document-root-picker.element.ts
@@ -1,5 +1,5 @@
 import { html, css, customElement, property, ifDefined, state, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -18,7 +18,7 @@ import type { UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import type { UmbTreePickerDynamicRoot, UmbTreePickerDynamicRootQueryStep } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-input-document-root-picker')
-export class UmbInputDocumentRootPickerElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLitElement, '') {
 	protected getFormElement() {
 		return undefined;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
index f643a477a6..6e8055da88 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
@@ -1,7 +1,7 @@
 import type { UmbDocumentTreeItemModel } from '../../tree/types.js';
 import { UmbDocumentPickerContext } from './input-document.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
@@ -9,7 +9,7 @@ import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import type { UmbDocumentItemModel } from '@umbraco-cms/backoffice/document';
 
 @customElement('umb-input-document')
-export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement, '') {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
 			return element.getAttribute('detail');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts
index 8c43e9af9c..e3d553111f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/input-document-granular-user-permission/input-document-granular-user-permission.element.ts
@@ -9,10 +9,10 @@ import type { UmbDeselectedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbChangeEvent, UmbSelectedEvent } from '@umbraco-cms/backoffice/event';
 import type { ManifestEntityUserPermission } from '@umbraco-cms/backoffice/extension-registry';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-document-granular-user-permission')
-export class UmbInputDocumentGranularUserPermissionElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputDocumentGranularUserPermissionElement extends UUIFormControlMixin(UmbLitElement, '') {
 	_permissions: Array<UmbDocumentUserPermissionModel> = [];
 	public get permissions(): Array<UmbDocumentUserPermissionModel> {
 		return this._permissions;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts b/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts
index 7da3256813..69d0f4a540 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts
@@ -1,12 +1,12 @@
 import type { UmbLanguageItemModel } from '../../repository/index.js';
 import { UmbLanguagePickerContext } from './input-language.context.js';
 import { css, html, ifDefined, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-input-language')
-export class UmbInputLanguageElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputLanguageElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts
index 665ab2e9e6..e8b1c14f3d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts
@@ -4,7 +4,7 @@ import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
 import type { UmbCodeEditorController, UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
 import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
 import { css, html, customElement, query, property, unsafeHTML, when } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin, type UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin, type UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
@@ -22,7 +22,7 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
  */
 
 @customElement('umb-input-markdown')
-export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, '') {
 	protected getFormElement() {
 		return this._codeEditor;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts
index 37f18447f0..6201d1da8d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts
@@ -1,12 +1,12 @@
 import type { UmbMediaTypeItemModel } from '../../repository/index.js';
 import { UmbMediaTypePickerContext } from './input-media-type.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-input-media-type')
-export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMediaTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
index 1367987c5f..1cbc5b8da1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
@@ -1,7 +1,7 @@
 import type { UmbMediaItemModel } from '../../repository/index.js';
 import { UmbMediaPickerContext } from './input-media.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
@@ -20,7 +20,7 @@ const SORTER_CONFIG: UmbSorterConfig<string> = {
 };
 
 @customElement('umb-input-media')
-export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMediaElement extends UUIFormControlMixin(UmbLitElement, '') {
 	#sorter = new UmbSorterController(this, {
 		...SORTER_CONFIG,
 		onChange: ({ model }) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
index c0fc8a2ae8..565e13a28e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
@@ -1,7 +1,7 @@
 import type { UmbMemberGroupItemModel } from '../../repository/index.js';
 import { UmbMemberPickerContext } from './input-member-group.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { MemberItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
@@ -21,7 +21,7 @@ const SORTER_CONFIG: UmbSorterConfig<string> = {
 };
 
 @customElement('umb-input-member-group')
-export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElement, '') {
 	#sorter = new UmbSorterController(this, {
 		...SORTER_CONFIG,
 		onChange: ({ model }) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.element.ts
index c42c94ae53..cdb1f7d6e1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.element.ts
@@ -1,12 +1,12 @@
 import { UmbMemberTypePickerContext } from './input-member-type.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { MemberTypeItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-input-member-type')
-export class UmbInputMemberTypeElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMemberTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts
index f4dee267b0..2ebefc05df 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts
@@ -1,7 +1,7 @@
 import type { UmbMemberItemModel } from '../../repository/index.js';
 import { UmbMemberPickerContext } from './input-member.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { MemberItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
@@ -21,7 +21,7 @@ const SORTER_CONFIG: UmbSorterConfig<string> = {
 };
 
 @customElement('umb-input-member')
-export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, '') {
 	#sorter = new UmbSorterController(this, {
 		...SORTER_CONFIG,
 		onChange: ({ model }) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/object-type/input-object-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/object-type/input-object-type.element.ts
index 585089555c..3db8e11954 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/object-type/input-object-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/object-type/input-object-type.element.ts
@@ -1,11 +1,11 @@
 import { UmbObjectTypeRepository } from './object-type.repository.js';
 import { html, customElement, property, query, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UUISelectElement } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-input-object-type')
-export class UmbInputObjectTypeElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputObjectTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@query('uui-select')
 	private select!: UUISelectElement;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts b/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts
index 941e03254b..9d8b20f381 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts
@@ -1,12 +1,12 @@
 import type { UmbStaticFileItemModel } from '../../repository/item/types.js';
 import { UmbStaticFilePickerContext } from './input-static-file.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-input-static-file')
-export class UmbInputStaticFileElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputStaticFileElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected files in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts
index 3a2d40e448..f135e7fbda 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts
@@ -11,12 +11,12 @@ import {
 	repeat,
 } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIInputElement, UUIInputEvent, UUITagElement } from '@umbraco-cms/backoffice/external/uui';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { TagResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 
 @customElement('umb-tags-input')
-export class UmbTagsInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ type: String })
 	group?: string;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts
index 5dca0d4509..8829b3c654 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts
@@ -1,12 +1,12 @@
 import type { UmbStylesheetItemModel } from '../../types.js';
 import { UmbStylesheetPickerContext } from './stylesheet-input.context.js';
 import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-stylesheet-input')
-export class UmbStylesheetInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbStylesheetInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-rule-input/stylesheet-rule-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-rule-input/stylesheet-rule-input.element.ts
index 6e473a408b..0aebf5c162 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-rule-input/stylesheet-rule-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-rule-input/stylesheet-rule-input.element.ts
@@ -2,14 +2,14 @@ import type { UmbStylesheetRule } from '../../types.js';
 import { UMB_STYLESHEET_RULE_SETTINGS_MODAL } from './stylesheet-rule-settings-modal.token.js';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { css, html, customElement, repeat, property } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 // TODO: add sorting when we have a generic sorting component/functionality for ref lists
 
 @customElement('umb-stylesheet-rule-input')
-export class UmbStylesheetRuleInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbStylesheetRuleInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ type: Array, attribute: false })
 	rules: UmbStylesheetRule[] = [];
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts
index 52fda1981e..49326ca55a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts
@@ -4,7 +4,7 @@ import type { UmbTemplateItemModel } from '../../repository/item/index.js';
 import { UmbTemplateItemRepository } from '../../repository/item/index.js';
 import { UMB_TEMPLATE_PICKER_MODAL } from '../../modals/index.js';
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import {
 	UMB_MODAL_MANAGER_CONTEXT,
 	UMB_WORKSPACE_MODAL,
@@ -14,7 +14,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-input-template')
-export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputTemplateElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/template-card/template-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/template-card/template-card.element.ts
index cc4a841859..5cb2490b8a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/template-card/template-card.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/template-card/template-card.element.ts
@@ -1,5 +1,5 @@
 import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 /**
@@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 // TODO: This should extends the UUICardElement, and the visual look of this should be like the UserCard or similarly.
 // TOOD: Consider if this should be select in the 'persisted'-select style when it is selected as a default. (But its should not use the runtime-selection style)
 @customElement('umb-template-card')
-export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) {
+export class UmbTemplateCardElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ type: String })
 	name = '';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts
index 4c85e03a05..e6b3714ae5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.element.ts
@@ -5,7 +5,7 @@ import { availableLanguages } from './input-tiny-mce.languages.js';
 import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js';
 import type { TinyMcePluginArguments, UmbTinyMcePluginBase } from './tiny-mce-plugin.js';
 import { getProcessedImageUrl } from '@umbraco-cms/backoffice/utils';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { EditorEvent, Editor, RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce';
 import { type ManifestTinyMcePlugin, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { css, customElement, html, property, query, state } from '@umbraco-cms/backoffice/external/lit';
@@ -44,7 +44,7 @@ async function onResize(
 }
 
 @customElement('umb-input-tiny-mce')
-export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputTinyMceElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ attribute: false })
 	configuration?: UmbPropertyEditorConfigCollection;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts
index e0342b556b..289c946cae 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts
@@ -1,12 +1,12 @@
 import type { UmbUserGroupItemModel } from '../../repository/index.js';
 import { UmbUserGroupPickerContext } from './user-group-input.context.js';
 import { css, html, customElement, property, state, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-user-group-input')
-export class UmbUserGroupInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbUserGroupInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/components/input-entity-user-permission/input-entity-user-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/components/input-entity-user-permission/input-entity-user-permission.element.ts
index 5b19e06dd3..00ae1f1204 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/components/input-entity-user-permission/input-entity-user-permission.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/components/input-entity-user-permission/input-entity-user-permission.element.ts
@@ -5,10 +5,10 @@ import { html, customElement, property, state, nothing, ifDefined } from '@umbra
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbUserPermissionVerbElement } from '@umbraco-cms/backoffice/user';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-entity-user-permission')
-export class UmbInputEntityUserPermissionElement extends FormControlMixin(UmbLitElement) {
+export class UmbInputEntityUserPermissionElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ type: String, attribute: 'entity-type' })
 	public get entityType(): string {
 		return this._entityType;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts
index dd6846ac76..f7918ae903 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts
@@ -1,12 +1,12 @@
 import type { UmbUserItemModel } from '../../repository/index.js';
 import { UmbUserPickerContext } from './user-input.context.js';
 import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-user-input')
-export class UmbUserInputElement extends FormControlMixin(UmbLitElement) {
+export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	// TODO: [LK] Add sorting!
 
 	/**