V16: Localization refinements (#19258)

src/Umbraco.Web.UI.Client/src/assets/lang/de-ch.ts

@@ -1,17 +0,0 @@
-/**
- * Creator Name: The Umbraco community
- * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
- *
- * Language Alias: de_CH
- * Language Int Name: German Switzerland (DE-CH)
- * Language Local Name: Deutsch Schweiz (DE-CH)
- * Language LCID: 7
- * Language Culture: de-CH
- */
-import de_de from './de-de.js';
-import type { UmbLocalizationDictionary } from '@umbraco-cms/backoffice/localization-api';
-
-export default {
-	// NOTE: Imports and re-exports the German (Germany) localizations, so that any German (Switzerland) localizations can be override them. [LK]
-	...de_de,
-} as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/assets/lang/fr-ch.ts

@@ -1,17 +0,0 @@
-/**
- * Creator Name: The Umbraco community
- * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
- *
- * Language Alias: fr_ch
- * Language Int Name: French Switzerland (FR-CH)
- * Language Local Name: Français Suisse (FR-CH)
- * Language LCID: 12
- * Language Culture: fr-CH
- */
-import fr_fr from './fr-fr.js';
-import type { UmbLocalizationDictionary } from '@umbraco-cms/backoffice/localization-api';
-
-export default {
-	// NOTE: Imports and re-exports the French (France) localizations, so that any French (Switzerland) localizations can be override them. [LK]
-	...fr_fr,
-} as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/assets/lang/it-ch.ts

@@ -1,17 +0,0 @@
-/**
- * Creator Name: The Umbraco community
- * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
- *
- * Language Alias: it_ch
- * Language Int Name: Italian Switzerland (IT-CH)
- * Language Local Name: Italiano Svizerra (IT-CH)
- * Language LCID: 16
- * Language Culture: it-CH
- */
-import it_it from './it-it.js';
-import type { UmbLocalizationDictionary } from '@umbraco-cms/backoffice/localization-api';
-
-export default {
-	// NOTE: Imports and re-exports the Italian (Italy) localizations, so that any Italian (Switzerland) localizations can be override them. [LK]
-	...it_it,
-} as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/assets/lang/pt-br.ts

@@ -3,8 +3,8 @@
  * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
  *
  * Language Alias: pt
- * Language Int Name: Portuguese (BR)
- * Language Local Name: português (BR)
+ * Language Int Name: Portuguese (Brazil)
+ * Language Local Name: Português ()
  * Language LCID:
  * Language Culture: pt-BR
  */

src/Umbraco.Web.UI.Client/src/assets/lang/pt.ts

@@ -0,0 +1,12 @@
+/**
+ * Creator Name: The Umbraco community
+ * Creator Link: https://docs.umbraco.com/umbraco-cms/extending/language-files
+ *
+ * Language Alias: pt
+ * Language Int Name: Portuguese
+ * Language Local Name: Português
+ * Language LCID:
+ * Language Culture: pt-PT
+ */
+import type { UmbLocalizationDictionary } from '@umbraco-cms/backoffice/localization-api';
+export default {} as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/packages/core/localization/components/ui-culture-input/ui-culture-input.element.ts

@@ -1,10 +1,11 @@
-import type { ManifestLocalization } from '../../extensions/localization.extension.js';
+import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { css, html, customElement, query, state, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_DEFAULT_LOCALIZATION_CULTURE } from '@umbraco-cms/backoffice/localization-api';
+import type { PropertyValues } from '@umbraco-cms/backoffice/external/lit';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
 interface UmbCultureInputOption {
 	name: string;
@@ -12,54 +13,97 @@ interface UmbCultureInputOption {
 }
 
 @customElement('umb-ui-culture-input')
-export class UmbUiCultureInputElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbUiCultureInputElement extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(
+	UmbLitElement,
+) {
+	#invalidCulture?: string;
+	#invalidBaseCulture?: string;
+
 	@state()
 	private _options: Array<UmbCultureInputOption> = [];
 
-	@query('uui-combobox')
-	private _selectElement!: HTMLInputElement;
-
 	@property({ type: String })
-	override get value() {
-		return super.value;
-	}
-	override set value(value: FormDataEntryValue | FormData) {
-		if (typeof value === 'string') {
+	override set value(value: string | undefined) {
+		if (value && typeof value === 'string') {
 			const oldValue = super.value;
 			super.value = value.toLowerCase();
 			this.requestUpdate('value', oldValue);
 		}
 	}
+	override get value(): string | undefined {
+		return super.value;
+	}
 
 	constructor() {
 		super();
-		this.#observeTranslations();
-	}
 
-	#observeTranslations() {
 		this.observe(
 			umbExtensionsRegistry.byType('localization'),
-			(localizationManifests) => {
-				this.#mapToOptions(localizationManifests);
+			(manifests) => {
+				const options = manifests
+					.filter((manifest) => !!manifest.meta.culture)
+					.map((manifest) => {
+						const culture = manifest.meta.culture.toLowerCase();
+						return {
+							name: this.localize.term(`uiCulture_${culture}`),
+							value: culture,
+						};
+					});
+
+				const distinct = [...new Map(options.map((item) => [item.value, item])).values()];
+
+				this._options = distinct.sort((a, b) => a.name.localeCompare(b.name));
 			},
 			'umbObserveLocalizationManifests',
 		);
+
+		this.addValidator(
+			'customError',
+			() => this.localize.term('user_languageNotFound', this.#invalidCulture, this.value),
+			() => !!this.#invalidCulture && !this.#invalidBaseCulture,
+		);
+
+		this.addValidator(
+			'customError',
+			() => this.localize.term('user_languageNotFoundFallback', this.#invalidCulture, this.#invalidBaseCulture),
+			() => !!this.#invalidCulture && !!this.#invalidBaseCulture,
+		);
 	}
 
-	#mapToOptions(manifests: Array<ManifestLocalization>) {
-		this._options = manifests
-			.filter((isoCode) => isoCode !== undefined)
-			.map((manifest) => ({
-				name: manifest.name,
-				value: manifest.meta.culture.toLowerCase(),
-			}));
-	}
+	protected override firstUpdated(_changedProperties: PropertyValues): void {
+		super.firstUpdated(_changedProperties);
 
-	protected override getFormElement() {
-		return this._selectElement;
+		if (this.value) {
+			// Check if the culture can be found.
+			const found = this._options.find((option) => option.value === this.value);
+			if (!found) {
+				this.#invalidCulture = this.value;
+
+				// if not found, check for the base culture
+				const locale = new Intl.Locale(this.value);
+				if (locale.language) {
+					const foundBase = this._options.find((option) => option.value === locale.language);
+					if (foundBase) {
+						this.value = locale.language;
+					} else {
+						// if the base culture is not found, set the value to "en"
+						this.#invalidBaseCulture = locale.language;
+						this.value = UMB_DEFAULT_LOCALIZATION_CULTURE;
+					}
+				} else {
+					// if the base culture is not found, set the value to "en"
+					this.value = UMB_DEFAULT_LOCALIZATION_CULTURE;
+				}
+			}
+		}
+
+		this.addFormControlElement(this.shadowRoot!.querySelector('uui-select')!);
+		this.checkValidity();
 	}
 
 	#onCustomValidationChange(event: UUISelectEvent) {
+		this.#invalidCulture = undefined;
+		this.#invalidBaseCulture = undefined;
 		this.value = event.target.value.toString();
 		this.dispatchEvent(new UmbChangeEvent());
 	}
@@ -67,23 +111,11 @@ export class UmbUiCultureInputElement extends UUIFormControlMixin(UmbLitElement,
 	override render() {
 		return html`
 			<uui-select
-				style="margin-top: var(--uui-size-space-1)"
-				@change=${this.#onCustomValidationChange}
-				.options=${this._options.map((e) => ({
-					name: e.name,
-					value: e.value,
-					selected: e.value == this.value,
-				}))}></uui-select>
+				.options=${this._options.map((e) => ({ ...e, selected: e.value == this.value }))}
+				@change=${this.#onCustomValidationChange}>
+			</uui-select>
 		`;
 	}
-
-	static override styles = [
-		css`
-			:host {
-				display: block;
-			}
-		`,
-	];
 }
 
 export default UmbUiCultureInputElement;

src/Umbraco.Web.UI.Client/src/packages/core/localization/manifests.ts

@@ -3,9 +3,9 @@ import type { ManifestLocalization } from './extensions/localization.extension.j
 export const manifests: Array<ManifestLocalization> = [
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Ar',
+		alias: 'Umb.Localization.AR',
 		weight: -100,
-		name: 'العربية',
+		name: 'Arabic Backoffice UI Localization',
 		meta: {
 			culture: 'ar',
 		},
@@ -13,9 +13,9 @@ export const manifests: Array<ManifestLocalization> = [
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Bs',
+		alias: 'Umb.Localization.BS',
 		weight: -100,
-		name: 'Bosanski',
+		name: 'Bosnian Backoffice UI Localization',
 		meta: {
 			culture: 'bs',
 		},
@@ -23,59 +23,49 @@ export const manifests: Array<ManifestLocalization> = [
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Cs-CZ',
+		alias: 'Umb.Localization.CS',
 		weight: -100,
-		name: 'česky',
+		name: 'Czech Backoffice UI Localization',
 		meta: {
-			culture: 'cs-cz',
+			culture: 'cs',
 		},
-		js: () => import('../../../assets/lang/cs-cz.js'),
+		js: () => import('../../../assets/lang/cs.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Cy-GB',
+		alias: 'Umb.Localization.CY',
 		weight: -100,
-		name: 'Cymraeg (UK)',
+		name: 'Welsh Backoffice UI Localization',
 		meta: {
-			culture: 'cy-gb',
+			culture: 'cy',
 		},
-		js: () => import('../../../assets/lang/cy-gb.js'),
+		js: () => import('../../../assets/lang/cy.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Da_DK',
+		alias: 'Umb.Localization.DA',
 		weight: -100,
-		name: 'Dansk (Danmark)',
+		name: 'Danish Backoffice UI Localization',
 		meta: {
-			culture: 'da-dk',
+			culture: 'da',
 		},
-		js: () => import('../../../assets/lang/da-dk.js'),
+		js: () => import('../../../assets/lang/da.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.De-DE',
+		alias: 'Umb.Localization.DE',
 		weight: -100,
-		name: 'Deutsch (DE)',
+		name: 'German Backoffice UI Localization',
 		meta: {
-			culture: 'de-de',
+			culture: 'de',
 		},
-		js: () => import('../../../assets/lang/de-de.js'),
+		js: () => import('../../../assets/lang/de.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.De-CH',
+		alias: 'Umb.Localization.EN',
 		weight: -100,
-		name: 'Deutsch (Schweiz)',
-		meta: {
-			culture: 'de-ch',
-		},
-		js: () => import('../../../assets/lang/de-ch.js'),
-	},
-	{
-		type: 'localization',
-		alias: 'Umb.Localization.En-GB',
-		weight: -100,
-		name: 'English (UK)',
+		name: 'English (United Kingdom) Backoffice UI Localization',
 		meta: {
 			culture: 'en',
 		},
@@ -83,211 +73,201 @@ export const manifests: Array<ManifestLocalization> = [
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.En_US',
+		alias: 'Umb.Localization.EN_US',
 		weight: -100,
-		name: 'English (US)',
+		name: 'English (United States) Backoffice UI Localization',
 		meta: {
-			culture: 'en-us',
+			culture: 'en-US',
 		},
 		js: () => import('../../../assets/lang/en-us.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Es-ES',
+		alias: 'Umb.Localization.ES',
 		weight: -100,
-		name: 'español',
+		name: 'Spanish Backoffice UI Localization',
 		meta: {
-			culture: 'es-es',
+			culture: 'es',
 		},
-		js: () => import('../../../assets/lang/es-es.js'),
+		js: () => import('../../../assets/lang/es.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Fr-FR',
+		alias: 'Umb.Localization.FR',
 		weight: -100,
-		name: 'français',
+		name: 'French Backoffice UI Localization',
 		meta: {
-			culture: 'fr-fr',
+			culture: 'fr',
 		},
-		js: () => import('../../../assets/lang/fr-fr.js'),
+		js: () => import('../../../assets/lang/fr.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Fr-CH',
+		alias: 'Umb.Localization.HE',
 		weight: -100,
-		name: 'Français (Suisse)',
+		name: 'Hebrew Backoffice UI Localization',
 		meta: {
-			culture: 'fr-ch',
+			culture: 'he',
 		},
-		js: () => import('../../../assets/lang/fr-ch.js'),
+		js: () => import('../../../assets/lang/he.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.He-IL',
+		alias: 'Umb.Localization.HR',
 		weight: -100,
-		name: 'Hebrew',
+		name: 'Croatian Backoffice UI Localization',
 		meta: {
-			culture: 'he-il',
+			culture: 'hr',
 		},
-		js: () => import('../../../assets/lang/he-il.js'),
+		js: () => import('../../../assets/lang/hr.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Hr-HR',
+		alias: 'Umb.Localization.IT',
 		weight: -100,
-		name: 'Hrvatski',
+		name: 'Italian Backoffice UI Localization',
 		meta: {
-			culture: 'hr-hr',
+			culture: 'it',
 		},
-		js: () => import('../../../assets/lang/hr-hr.js'),
+		js: () => import('../../../assets/lang/it.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.It-IT',
+		alias: 'Umb.Localization.JA',
 		weight: -100,
-		name: 'italiano',
+		name: 'Japanese Backoffice UI Localization',
 		meta: {
-			culture: 'it-it',
+			culture: 'ja',
 		},
-		js: () => import('../../../assets/lang/it-it.js'),
+		js: () => import('../../../assets/lang/ja.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.It-CH',
+		alias: 'Umb.Localization.KO',
 		weight: -100,
-		name: 'Italiano (Svizerra)',
+		name: 'Korean Backoffice UI Localization',
 		meta: {
-			culture: 'it-ch',
+			culture: 'ko',
 		},
-		js: () => import('../../../assets/lang/it-ch.js'),
+		js: () => import('../../../assets/lang/ko.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Ja-JP',
+		alias: 'Umb.Localization.NB',
 		weight: -100,
-		name: '日本語',
+		name: 'Norwegian Backoffice UI Localization',
 		meta: {
-			culture: 'ja-jp',
+			culture: 'nb',
 		},
-		js: () => import('../../../assets/lang/ja-jp.js'),
+		js: () => import('../../../assets/lang/nb.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Ko-KR',
+		alias: 'Umb.Localization.NL',
 		weight: -100,
-		name: '한국어',
+		name: 'Dutch Backoffice UI Localization',
 		meta: {
-			culture: 'ko-kr',
+			culture: 'nl',
 		},
-		js: () => import('../../../assets/lang/ko-kr.js'),
+		js: () => import('../../../assets/lang/nl.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Nb-NO',
+		alias: 'Umb.Localization.PL',
 		weight: -100,
-		name: 'norsk',
+		name: 'Polish Backoffice UI Localization',
 		meta: {
-			culture: 'nb-no',
+			culture: 'pl',
 		},
-		js: () => import('../../../assets/lang/nb-no.js'),
+		js: () => import('../../../assets/lang/pl.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Nl-NL',
+		alias: 'Umb.Localization.PT',
 		weight: -100,
-		name: 'Nederlands',
+		name: 'Portuguese Backoffice UI Localization',
 		meta: {
-			culture: 'nl-nl',
+			culture: 'pt',
 		},
-		js: () => import('../../../assets/lang/nl-nl.js'),
+		js: () => import('../../../assets/lang/pt.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Pl-PL',
+		alias: 'Umb.Localization.PT_BR',
 		weight: -100,
-		name: 'polski',
+		name: 'Portuguese (Brazil) Backoffice UI Localization',
 		meta: {
-			culture: 'pl-pl',
-		},
-		js: () => import('../../../assets/lang/pl-pl.js'),
-	},
-	{
-		type: 'localization',
-		alias: 'Umb.Localization.Pt-BR',
-		weight: -100,
-		name: 'Portuguese Brazil',
-		meta: {
-			culture: 'pt-br',
+			culture: 'pt-BR',
 		},
 		js: () => import('../../../assets/lang/pt-br.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Ro-RO',
+		alias: 'Umb.Localization.RO',
 		weight: -100,
-		name: 'romana (Romania)',
+		name: 'Romanian Backoffice UI Localization',
 		meta: {
-			culture: 'ro-ro',
+			culture: 'ro',
 		},
-		js: () => import('../../../assets/lang/ro-ro.js'),
+		js: () => import('../../../assets/lang/ro.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Ru-RU',
+		alias: 'Umb.Localization.RU',
 		weight: -100,
-		name: 'русский',
+		name: 'Russian Backoffice UI Localization',
 		meta: {
-			culture: 'ru-ru',
+			culture: 'ru',
 		},
-		js: () => import('../../../assets/lang/ru-ru.js'),
+		js: () => import('../../../assets/lang/ru.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Sv-SE',
+		alias: 'Umb.Localization.SV',
 		weight: -100,
-		name: 'Svenska',
+		name: 'Swedish Backoffice UI Localization',
 		meta: {
-			culture: 'sv-se',
+			culture: 'sv',
 		},
-		js: () => import('../../../assets/lang/sv-se.js'),
+		js: () => import('../../../assets/lang/sv.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Tr-TR',
+		alias: 'Umb.Localization.TR',
 		weight: -100,
-		name: 'Türkçe',
+		name: 'Turkish Backoffice UI Localization',
 		meta: {
-			culture: 'tr-tr',
+			culture: 'tr',
 		},
-		js: () => import('../../../assets/lang/tr-tr.js'),
+		js: () => import('../../../assets/lang/tr.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Uk-UA',
+		alias: 'Umb.Localization.UK',
 		weight: -100,
-		name: 'Українська',
+		name: 'Ukrainian Backoffice UI Localization',
 		meta: {
-			culture: 'uk-ua',
+			culture: 'uk',
 		},
-		js: () => import('../../../assets/lang/uk-ua.js'),
+		js: () => import('../../../assets/lang/uk.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Zh-CN',
+		alias: 'Umb.Localization.ZH',
 		weight: -100,
-		name: '中文（简体，中国）',
+		name: 'Chinese Backoffice UI Localization',
 		meta: {
-			culture: 'zh-cn',
+			culture: 'zh',
 		},
-		js: () => import('../../../assets/lang/zh-cn.js'),
+		js: () => import('../../../assets/lang/zh.js'),
 	},
 	{
 		type: 'localization',
-		alias: 'Umb.Localization.Zh-TW',
+		alias: 'Umb.Localization.ZH_TW',
 		weight: -100,
-		name: '中文（正體，台灣）',
+		name: 'Chinese (Taiwan) Backoffice UI Localization',
 		meta: {
-			culture: 'zh-tw',
+			culture: 'zh-TW',
 		},
 		js: () => import('../../../assets/lang/zh-tw.js'),
 	},

src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user/components/user-workspace-profile-settings/user-workspace-profile-settings.element.ts

@@ -1,12 +1,11 @@
+import { UmbUserKind } from '../../../../utils/index.js';
 import { UMB_USER_WORKSPACE_CONTEXT } from '../../user-workspace.context-token.js';
 import type { UmbUserDetailModel } from '../../../../types.js';
-import { UmbUserKind } from '../../../../utils/index.js';
 import { html, customElement, state, ifDefined, css, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import type { UmbUiCultureInputElement } from '@umbraco-cms/backoffice/localization';
-import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-user-workspace-profile-settings')
 export class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement {
@@ -61,27 +60,30 @@ export class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<uui-box>
-			<div slot="headline"><umb-localize key="user_profile">Profile</umb-localize></div>
-			${this.#renderEmailProperty()} ${this.#renderUsernameProperty()} ${this.#renderUILanguageProperty()}
-		</uui-box>`;
+		return html`
+			<uui-box>
+				<div slot="headline"><umb-localize key="user_profile">Profile</umb-localize></div>
+				${this.#renderEmailProperty()} ${this.#renderUsernameProperty()} ${this.#renderUILanguageProperty()}
+			</uui-box>
+		`;
 	}
 
 	#renderEmailProperty() {
 		return html`
 			<umb-property-layout
 				mandatory
-				label="${this.localize.term('general_email')}"
-				.description=${this.localize.term('user_emailDescription', this._usernameIsEmail)}>
+				label=${this.localize.term('general_email')}
+				description=${this.localize.term('user_emailDescription', this._usernameIsEmail)}>
 				<uui-input
 					slot="editor"
 					name="email"
-					label="${this.localize.term('general_email')}"
-					@change="${this.#onEmailChange}"
+					label=${this.localize.term('general_email')}
 					required
 					required-message=${this.localize.term('user_emailRequired')}
-					${umbBindToValidation(this)}
-					value=${ifDefined(this._user?.email)}></uui-input>
+					value=${ifDefined(this._user?.email)}
+					@change=${this.#onEmailChange}
+					${umbBindToValidation(this)}>
+				</uui-input>
 			</umb-property-layout>
 		`;
 	}
@@ -92,17 +94,18 @@ export class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement {
 		return html`
 			<umb-property-layout
 				mandatory
-				label="${this.localize.term('user_loginname')}"
+				label=${this.localize.term('user_loginname')}
 				description=${this.localize.term('user_loginnameDescription')}>
 				<uui-input
 					slot="editor"
 					name="username"
 					autocomplete="off"
-					label="${this.localize.term('user_loginname')}"
-					@change="${this.#onUsernameChange}"
+					label=${this.localize.term('user_loginname')}
 					required
 					required-message=${this.localize.term('user_loginnameRequired')}
-					value=${ifDefined(this._user?.userName)}></uui-input>
+					value=${ifDefined(this._user?.userName)}
+					@change=${this.#onUsernameChange}>
+				</uui-input>
 			</umb-property-layout>
 		`;
 	}
@@ -111,20 +114,20 @@ export class UmbUserWorkspaceProfileSettingsElement extends UmbLitElement {
 		if (this._user?.kind === UmbUserKind.API) return nothing;
 		return html`
 			<umb-property-layout
-				label="${this.localize.term('user_language')}"
+				label=${this.localize.term('user_language')}
 				description=${this.localize.term('user_languageHelp')}>
 				<umb-ui-culture-input
 					slot="editor"
-					value=${ifDefined(this._user?.languageIsoCode ?? undefined)}
-					@change="${this.#onLanguageChange}"
 					name="language"
-					label="${this.localize.term('user_language')}"></umb-ui-culture-input>
+					label=${this.localize.term('user_language')}
+					value=${ifDefined(this._user?.languageIsoCode ?? undefined)}
+					@change=${this.#onLanguageChange}>
+				</umb-ui-culture-input>
 			</umb-property-layout>
 		`;
 	}
 
 	static override styles = [
-		UmbTextStyles,
 		css`
 			:host {
 				display: block;

tests/Umbraco.Tests.AcceptanceTest/package-lock.json

@@ -8,7 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@umbraco/json-models-builders": "^2.0.33",
-        "@umbraco/playwright-testhelpers": "^16.0.9",
+        "@umbraco/playwright-testhelpers": "^16.0.11",
         "camelize": "^1.0.0",
         "dotenv": "^16.3.1",
         "node-fetch": "^2.6.7"
@@ -66,9 +66,10 @@
       }
     },
     "node_modules/@umbraco/playwright-testhelpers": {
-      "version": "16.0.9",
-      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.9.tgz",
-      "integrity": "sha512-nfoRZNYrD2PP6k/GljiINCEA8VM6uvOAlqmkhYOdiTzrgLmVRqZExsNskm1BhlcxDhE6+XZlpjTcFIotFBKLFQ==",
+      "version": "16.0.11",
+      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-16.0.11.tgz",
+      "integrity": "sha512-jduJC8xqtqQ78Sata3GhafDLavRv0ZaKHKFwz3KdLw0VmLNxgDMABAV0SMFGU9sABGzi3MjEUeVQ4ntH1nvA3w==",
+      "license": "MIT",
       "dependencies": {
         "@umbraco/json-models-builders": "2.0.33",
         "node-fetch": "^2.6.7"

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@umbraco/json-models-builders": "^2.0.33",
-    "@umbraco/playwright-testhelpers": "^16.0.9",
+    "@umbraco/playwright-testhelpers": "^16.0.11",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "node-fetch": "^2.6.7"