Merge pull request #1439 from umbraco/bugfix/cleaning-of-input-components-getters

rename selectedIds + Corrections for Lit warnings

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts

@@ -14,12 +14,13 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 	implements UmbPropertyEditorUiElement
 {
 	@property({ type: Array })
-	public get value(): Array<UmbBlockGridTypeAreaTypePermission> {
-		return this._value;
-	}
 	public set value(value: Array<UmbBlockGridTypeAreaTypePermission>) {
 		this._value = value ?? [];
 	}
+	public get value(): Array<UmbBlockGridTypeAreaTypePermission> {
+		return this._value;
+	}
+
 	@state()
 	private _value: Array<UmbBlockGridTypeAreaTypePermission> = [];
 
@@ -151,7 +152,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement
 						<umb-localize key="blockEditor_areaAllowedBlocksEmpty">
 							By default, all block types are allowed in an Area, Use this option to allow only selected types.
 						</umb-localize>
-				  </small>`
+					</small>`
 				: nothing} `;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts

@@ -24,19 +24,17 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 	#defaultAreaGridColumns: number = 12;
 	#valueOfAreaGridColumns?: number | null;
 
-	#workspaceModal: UmbModalRouteRegistrationController;
-
 	@property({ type: Array })
-	public get value(): Array<UmbBlockGridTypeAreaType> {
-		return this._value;
-	}
 	public set value(value: Array<UmbBlockGridTypeAreaType>) {
 		this._value = value ?? [];
 	}
+	public get value(): Array<UmbBlockGridTypeAreaType> {
+		return this._value;
+	}
+
 	@state()
 	private _value: Array<UmbBlockGridTypeAreaType> = [];
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const defaultAreaGridColumns = config?.getValueByAlias('defaultAreaGridColumns');
 		if (typeof defaultAreaGridColumns === 'number' && defaultAreaGridColumns > 0) {
@@ -59,7 +57,7 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
 	constructor() {
 		super();
 
-		this.#workspaceModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL)
+		new UmbModalRouteRegistrationController(this, UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL)
 			.addAdditionalPath('block-grid-area-type')
 			.onSetup(() => {
 				return { data: { entityType: 'block-grid-area-type', preset: {} }, modal: { size: 'large' } };

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts

@@ -13,7 +13,6 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement
 	@state()
 	private _columnsArray = Array.from(Array(12).keys());
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const maxColumns = config?.getValueByAlias('maxColumns');
 		if (typeof maxColumns === 'number') {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts

@@ -26,7 +26,6 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 		settingsData: [],
 	};
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 
@@ -56,9 +55,6 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 	private _layoutColumns?: number;
 
 	@property({ attribute: false })
-	public get value(): UmbBlockGridValueModel {
-		return this._value;
-	}
 	public set value(value: UmbBlockGridValueModel | undefined) {
 		const buildUpValue: Partial<UmbBlockGridValueModel> = value ? { ...value } : {};
 		buildUpValue.layout ??= {};
@@ -70,6 +66,9 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 		this.#context.setContents(buildUpValue.contentData);
 		this.#context.setSettings(buildUpValue.settingsData);
 	}
+	public get value(): UmbBlockGridValueModel {
+		return this._value;
+	}
 
 	constructor() {
 		super();

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts

@@ -14,14 +14,13 @@ export class UmbPropertyEditorUIBlockGridGroupConfigurationElement
 	private _value: Array<UmbBlockGridTypeGroupType> = [];
 
 	@property({ type: Array })
-	public get value(): Array<UmbBlockGridTypeGroupType> {
-		return this._value;
-	}
 	public set value(value: Array<UmbBlockGridTypeGroupType>) {
 		this._value = value || [];
 	}
+	public get value(): Array<UmbBlockGridTypeGroupType> {
+		return this._value;
+	}
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {}
 
 	#addGroup() {

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/property-editor-ui-block-grid-layout-stylesheet.element.ts

@@ -17,18 +17,18 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 	private _value: Array<string> = [];
 
 	@property({ type: Array })
-	public get value(): Array<string> {
-		return this._value;
-	}
 	public set value(value: Array<string>) {
 		this._value = value || [];
 	}
+	public get value(): Array<string> {
+		return this._value;
+	}
 
 	@property({ attribute: false })
-	public set config(config: UmbPropertyEditorConfigCollection | undefined) {}
+	public config?: UmbPropertyEditorConfigCollection;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputStaticFileElement).selectedPaths;
+		this.value = (event.target as UmbInputStaticFileElement).selection;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
@@ -37,7 +37,7 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 		return html`
 			<umb-input-static-file
 				@change=${this._onChange}
-				.selectedIds=${this._value}
+				.selection=${this._value}
 				.min=${0}
 				.max=${1}></umb-input-static-file>
 			<br />

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -51,9 +51,6 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 	};
 
 	@property({ attribute: false })
-	public get value(): UmbBlockListValueModel {
-		return this._value;
-	}
 	public set value(value: UmbBlockListValueModel | undefined) {
 		const buildUpValue: Partial<UmbBlockListValueModel> = value ? { ...value } : {};
 		buildUpValue.layout ??= {};
@@ -65,11 +62,13 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 		this.#managerContext.setContents(buildUpValue.contentData);
 		this.#managerContext.setSettings(buildUpValue.settingsData);
 	}
+	public get value(): UmbBlockListValueModel {
+		return this._value;
+	}
 
 	@state()
 	private _createButtonLabel = this.localize.term('content_createEmpty');
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts

@@ -13,12 +13,12 @@ export class UmbInputBlockTypeElement<
 	BlockType extends UmbBlockTypeBaseModel = UmbBlockTypeBaseModel,
 > extends UmbLitElement {
 	@property({ type: Array, attribute: false })
-	public get value() {
-		return this._items;
-	}
 	public set value(items) {
 		this._items = items ?? [];
 	}
+	public get value() {
+		return this._items;
+	}
 
 	@property({ type: String })
 	workspacePath?: string;
@@ -26,6 +26,7 @@ export class UmbInputBlockTypeElement<
 	@state()
 	private _items: Array<BlockType> = [];
 
+	// TODO: Seems no need to have these initially, then can be retrieved inside the `create` method. [NL]
 	#datasetContext?: UmbPropertyDatasetContext;
 	#filter: Array<UmbBlockTypeBaseModel> = [];
 

src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts

@@ -39,15 +39,15 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 
 	private _value: FieldPickerValue | undefined;
 	@property({ type: Object })
-	public get value(): FieldPickerValue | undefined {
-		return this._value;
-	}
 	public set value(val: FieldPickerValue | undefined) {
 		const oldVal = this._value;
 		this._value = val;
 		this.requestUpdate('value', oldVal);
 		this.dispatchEvent(new UmbChangeEvent());
 	}
+	public get value(): FieldPickerValue | undefined {
+		return this._value;
+	}
 
 	@state()
 	private _type?: FieldType;
@@ -168,7 +168,7 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 								display-value=${this.localize.term('content_mediatype')}>
 								<strong> ${this.localize.term('content_mediatype')} </strong>
 								${this.localize.term('defaultdialogs_treepicker')}
-						  </uui-combobox-list-option>`
+							</uui-combobox-list-option>`
 						: nothing}
 				</uui-combobox-list>
 			</uui-combobox>

src/Umbraco.Web.UI.Client/src/packages/core/components/input-multi-url/input-multi-url.element.ts

@@ -22,11 +22,17 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) {
 	public set alias(value: string | undefined) {
 		this.myModalRegistration.setUniquePathValue('propertyAlias', value);
 	}
+	public get alias(): string | undefined {
+		return this.myModalRegistration.getUniquePathValue('propertyAlias');
+	}
 
 	@property()
 	public set variantId(value: string | UmbVariantId | undefined) {
 		this.myModalRegistration.setUniquePathValue('variantId', value?.toString());
 	}
+	public get variantId(): string | undefined {
+		return this.myModalRegistration.getUniquePathValue('variantId');
+	}
 
 	/**
 	 * This is a minimum amount of selected items in this input.
@@ -91,8 +97,7 @@ export class UmbInputMultiUrlElement extends FormControlMixin(UmbLitElement) {
 		this._urls = [...data]; // Unfreeze data coming from State, so we can manipulate it.
 		super.value = this._urls.map((x) => x.url).join(',');
 	}
-
-	get urls() {
+	get urls(): Array<UmbLinkPickerLink> {
 		return this._urls;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts

@@ -54,9 +54,8 @@ export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement)
 			this.maxValue = getNumberOrUndefined(splittedValue[1]);
 		}
 	}
-
-	constructor() {
-		super();
+	public get value(): string {
+		return this.minValue || this.maxValue ? (this.minValue || '') + ',' + (this.maxValue || '') : '';
 	}
 
 	protected getFormElement() {

src/Umbraco.Web.UI.Client/src/packages/core/components/input-radio-button-list/input-radio-button-list.element.ts

@@ -8,17 +8,17 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme
 	/**
 	 * List of items.
 	 */
-	@property()
+	@property({ attribute: false })
 	public list: Array<{ key: string; sortOrder: number; value: string }> = [];
 
 	#selected = '';
-	public get selected(): string {
-		return this.#selected;
-	}
 	public set selected(key: string) {
 		this.#selected = key;
 		super.value = key;
 	}
+	public get selected(): string {
+		return this.#selected;
+	}
 
 	@property()
 	public set value(key: string) {
@@ -26,6 +26,9 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme
 			this.selected = key;
 		}
 	}
+	public get value(): string {
+		return this.selected;
+	}
 
 	protected getFormElement() {
 		return undefined;

src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts

@@ -32,10 +32,6 @@ export class UmbInputToggleElement extends FormControlMixin(UmbLitElement) {
 		return undefined;
 	}
 
-	constructor() {
-		super();
-	}
-
 	connectedCallback(): void {
 		super.connectedCallback();
 		this.#updateLabel();

src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.ts

@@ -126,12 +126,12 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
 	//  How do we handle this?
 	/*
 	@property()
-	public get value() {
-		throw new Error(`${this} does not support to get the value directly. Use items instead.`);
-	}
 	public set value(value: FormDataEntryValue | FormData) {
 		throw new Error(`${this} does not support to set the value directly. Use items instead.`);
 	}
+	public get value() {
+		throw new Error(`${this} does not support to get the value directly. Use items instead.`);
+	}
 	*/
 
 	#onAdd() {

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/default/entity-action.element.ts

@@ -12,16 +12,17 @@ export class UmbEntityActionElement<
 > extends UmbLitElement {
 	#api?: ApiType;
 
+	// TODO: Do these need to be properties? [NL]
 	@property({ type: String })
 	entityType?: string | null;
 
+	// TODO: Do these need to be properties? [NL]
 	@property({ type: String })
 	public unique?: string | null;
 
 	@property({ attribute: false })
 	public manifest?: ManifestEntityAction<MetaType>;
 
-	@property({ attribute: false })
 	public set api(api: ApiType | undefined) {
 		this.#api = api;
 

src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal-base.element.ts

@@ -38,21 +38,21 @@ export abstract class UmbModalBaseElement<
 	#modalContext?: UmbModalContext<ModalDataType, ModalValueType> | undefined;
 
 	@property({ attribute: false })
-	public get data(): ModalDataType | undefined {
-		return this._data;
-	}
 	public set data(value: ModalDataType | undefined) {
 		this._data = value;
 	}
+	public get data(): ModalDataType | undefined {
+		return this._data;
+	}
 	private _data?: ModalDataType | undefined;
 
 	@property({ attribute: false })
-	public get value(): ModalValueType {
-		return this.#value;
-	}
 	public set value(value: ModalValueType) {
 		this.#modalContext?.setValue(value);
 	}
+	public get value(): ModalValueType {
+		return this.#value;
+	}
 
 	public updateValue(partialValue: Partial<ModalValueType>) {
 		this.#modalContext?.updateValue(partialValue);

src/Umbraco.Web.UI.Client/src/packages/core/modal/route-registration/modal-route-registration.controller.ts

@@ -118,6 +118,9 @@ export class UmbModalRouteRegistrationController<D extends object = object, R =
 		this.#uniquePaths.set(identifier, value);
 		this.#registerModal();
 	}
+	getUniquePathValue(identifier: string): string | undefined {
+		return this.#uniquePaths.get(identifier);
+	}
 
 	async #registerModal() {
 		await this.#init;

src/Umbraco.Web.UI.Client/src/packages/core/property-action/components/property-action/default/property-action.element.ts

@@ -21,7 +21,6 @@ export class UmbPropertyActionElement<
 	@property({ attribute: false })
 	public manifest?: ManifestPropertyActionDefaultKind<MetaType>;
 
-	@property({ attribute: false })
 	public set api(api: ApiType | undefined) {
 		this.#api = api;
 

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts

@@ -12,14 +12,13 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
 export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	#value: Array<string> = [];
 	@property({ type: Array })
-	public get value(): Array<string> {
-		return this.#value;
-	}
 	public set value(value: Array<string>) {
 		this.#value = value ?? [];
 	}
+	public get value(): Array<string> {
+		return this.#value;
+	}
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		const listData: Record<number, { value: string; sortOrder: number }> | undefined = config.getValueByAlias('items');
@@ -52,7 +51,7 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem
 	render() {
 		return html`<umb-input-checkbox-list
 			@change="${this.#onChange}"
-			.selectedIds="${this.#value}"
+			.selection="${this.#value}"
 			.list="${this._list}"></umb-input-checkbox-list>`;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/collection-view/property-editor-ui-collection-view.element.ts

@@ -1,17 +1,14 @@
-import type {
-	UmbCollectionBulkActionPermissions,
-	UmbCollectionConfiguration,
-} from '../../../../core/collection/types.js';
 import type { UmbPropertyEditorConfigCollection } from '../../config/index.js';
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_DOCUMENT_COLLECTION_ALIAS } from '@umbraco-cms/backoffice/document';
-import { UMB_MEDIA_COLLECTION_ALIAS } from '@umbraco-cms/backoffice/media';
 import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
-import { UMB_WORKSPACE_CONTEXT, UMB_WORKSPACE_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/workspace';
-import type { UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document';
-import type { UmbMediaWorkspaceContext } from '@umbraco-cms/backoffice/media';
+import { UMB_WORKSPACE_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type {
+	UmbCollectionBulkActionPermissions,
+	UmbCollectionConfiguration,
+} from '@umbraco-cms/backoffice/collection';
 
 /**
  * @element umb-property-editor-ui-collection-view
@@ -27,7 +24,6 @@ export class UmbPropertyEditorUICollectionViewElement extends UmbLitElement impl
 	@state()
 	private _config?: UmbCollectionConfiguration;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._config = this.#mapDataTypeConfigToCollectionConfig(config);
 	}

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts

@@ -21,7 +21,6 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 	@state()
 	private _swatches: UmbSwatchDetails[] = [];
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
 		this._swatches = config?.getValueByAlias('items') ?? [];

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts

@@ -18,7 +18,6 @@ export class UmbPropertyEditorUIColorSwatchesEditorElement extends UmbLitElement
 	@state()
 	private _showLabels = this.#defaultShowLabels;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
 	}

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/date-picker/property-editor-ui-date-picker.element.ts

@@ -26,7 +26,6 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 			this._valueString = undefined;
 		}
 	}
-
 	get value() {
 		return this._valueString;
 	}
@@ -53,7 +52,6 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 
 	private _offsetTime?: boolean;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		const oldVal = this._inputType;

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts

@@ -11,12 +11,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	#value = '';
 	@property({ type: String })
-	public get value(): string {
-		return this.#value;
-	}
 	public set value(value: string | undefined) {
 		this.#value = value?.trim() || '';
 	}
+	public get value(): string {
+		return this.#value;
+	}
 
 	@state()
 	_multiple?: boolean;
@@ -24,7 +24,6 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
 	@state()
 	private _list: Array<Option> = [];
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		this._multiple = config?.getValueByAlias('multiple');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts

@@ -20,7 +20,6 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen
 	@state()
 	private _swatches: string[] = [];
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (config) {
 			this._opacity = config.getValueByAlias('showAlpha') ?? this.#defaultOpacity;

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts

@@ -13,17 +13,16 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 	// private _value: Array<string> = [];
 
 	// @property({ type: Array })
-	// public get value(): Array<string> {
-	// 	return this._value;
-	// }
 	// public set value(value: Array<string>) {
 	// 	this._value = Array.isArray(value) ? value : value ? [value] : [];
 	// }
+	// public get value(): Array<string> {
+	// 	return this._value;
+	// }
 
 	@property({ type: String })
 	public value: string = '';
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const validationLimit = config?.find((x) => x.alias === 'validationLimit');
 
@@ -48,8 +47,8 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 
 	private _onChange(event: CustomEvent) {
 		//TODO: This is a hack, something changed so now we need to convert the array to a comma separated string to make it work with the server.
-		const toCommaSeparatedString = (event.target as UmbInputMemberGroupElement).selectedIds.join(',');
-		// this.value = (event.target as UmbInputMemberGroupElement).selectedIds;
+		const toCommaSeparatedString = (event.target as UmbInputMemberGroupElement).selection.join(',');
+		// this.value = (event.target as UmbInputMemberGroupElement).selection;
 		this.value = toCommaSeparatedString;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
@@ -58,7 +57,7 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 		return html`
 			<umb-input-member-group
 				@change=${this._onChange}
-				.selectedIds=${this._items}
+				.selection=${this._items}
 				.min=${this._limitMin ?? 0}
 				.max=${this._limitMax ?? Infinity}
 				>Add</umb-input-member-group

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/member-picker/property-editor-ui-member-picker.element.ts

@@ -13,17 +13,16 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 	// private _value: Array<string> = [];
 
 	// @property({ type: Array })
-	// public get value(): Array<string> {
-	// 	return this._value;
-	// }
 	// public set value(value: Array<string>) {
 	// 	this._value = Array.isArray(value) ? value : value ? [value] : [];
 	// }
+	// public get value(): Array<string> {
+	// 	return this._value;
+	// }
 
 	@property({ type: String })
 	public value: string = '';
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const validationLimit = config?.find((x) => x.alias === 'validationLimit');
 
@@ -48,8 +47,8 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 
 	private _onChange(event: CustomEvent) {
 		//TODO: This is a hack, something changed so now we need to convert the array to a comma separated string to make it work with the server.
-		const toCommaSeparatedString = (event.target as UmbInputMemberElement).selectedIds.join(',');
-		// this.value = (event.target as UmbInputMemberElement).selectedIds;
+		const toCommaSeparatedString = (event.target as UmbInputMemberElement).selection.join(',');
+		// this.value = (event.target as UmbInputMemberElement).selection;
 		this.value = toCommaSeparatedString;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
@@ -58,7 +57,7 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 		return html`
 			<umb-input-member
 				@change=${this._onChange}
-				.selectedIds=${this._items}
+				.selection=${this._items}
 				.min=${this._limitMin ?? 0}
 				.max=${this._limitMax ?? Infinity}
 				>Add</umb-input-member

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts

@@ -15,7 +15,6 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
 	@property({ type: Array })
 	value: UmbLinkPickerLink[] = [];
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._overlaySize = config?.getValueByAlias('overlaySize');
 		this._hideAnchor = config?.getValueByAlias('hideAnchor');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts

@@ -14,7 +14,6 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
 	@property({ type: Array })
 	value?: Array<string>;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._limitMin = config?.getValueByAlias('minNumber');
 		this._limitMax = config?.getValueByAlias('maxNumber');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number-range/property-editor-ui-number-range.element.ts

@@ -13,15 +13,15 @@ import '../../../components/input-number-range/input-number-range.element.js';
 @customElement('umb-property-editor-ui-number-range')
 export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property({ type: Object })
-	private _value: NumberRangeValueType = { min: undefined, max: undefined };
-	public get value() {
-		return this._value;
-	}
 	public set value(value: NumberRangeValueType | undefined) {
 		this._value = value || { min: undefined, max: undefined };
 		this._minValue = value?.min;
 		this._maxValue = value?.max;
 	}
+	public get value() {
+		return this._value;
+	}
+	private _value: NumberRangeValueType = { min: undefined, max: undefined };
 
 	@property({ attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/number/property-editor-ui-number.element.ts

@@ -18,7 +18,6 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 	@state()
 	private _step?: number;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._min = config?.getValueByAlias('min');
 		this._max = config?.getValueByAlias('max');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts

@@ -12,14 +12,13 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	#value = '';
 	@property({ type: String })
-	public get value(): string {
-		return this.#value;
-	}
 	public set value(value: string | undefined) {
 		this.#value = value?.trim() || '';
 	}
+	public get value(): string {
+		return this.#value;
+	}
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		const listData: Record<number, { value: string; sortOrder: number }> | undefined = config.getValueByAlias('items');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/slider/property-editor-ui-slider.element.ts

@@ -35,7 +35,6 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
 	@state()
 	_max?: number;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._enableRange = config?.getValueByAlias('enableRange');
 		this._initVal1 = config?.getValueByAlias('initVal1');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.ts

@@ -26,7 +26,6 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements
 	@state()
 	private _placeholder?: string;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._type = config?.getValueByAlias<UuiInputTypeType>('inputType') ?? this.#defaultType;
 		this._inputMode = config?.getValueByAlias('inputMode');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/textarea/property-editor-ui-textarea.element.ts

@@ -24,7 +24,6 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
 	@state()
 	private _css?: any;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._maxChars = config?.getValueByAlias('maxChars');
 		this._rows = config?.getValueByAlias('rows');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/toggle/property-editor-ui-toggle.element.ts

@@ -21,7 +21,6 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
 	@state()
 	_showLabels?: boolean;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this.value ??= config?.getValueByAlias('default') ?? false;
 		this._labelOff = config?.getValueByAlias('labelOff');

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/source-type-picker/property-editor-ui-tree-picker-source-type-picker.element.ts

@@ -21,13 +21,13 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement
 	@property()
 	public set value(value: string) {
 		if (value) {
-			this.#selectedIds = value.split(',');
+			this.#selection = value.split(',');
 		} else {
-			this.#selectedIds = [];
+			this.#selection = [];
 		}
 	}
 	public get value(): string {
-		return this.#selectedIds.join(',');
+		return this.#selection.join(',');
 	}
 
 	@state()
@@ -73,20 +73,20 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement
 	#onChange(event: CustomEvent) {
 		switch (this.sourceType) {
 			case 'content':
-				this.#setValue((<UmbInputDocumentTypeElement>event.target).selectedIds);
+				this.#setValue((<UmbInputDocumentTypeElement>event.target).selection);
 				break;
 			case 'media':
-				this.#setValue((<UmbInputMediaTypeElement>event.target).selectedIds);
+				this.#setValue((<UmbInputMediaTypeElement>event.target).selection);
 				break;
 			case 'member':
-				this.#setValue((<UmbInputMemberTypeElement>event.target).selectedIds);
+				this.#setValue((<UmbInputMemberTypeElement>event.target).selection);
 				break;
 			default:
 				break;
 		}
 	}
 
-	#selectedIds: Array<string> = [];
+	#selection: Array<string> = [];
 
 	#setValue(value: string[]) {
 		this.value = value.join(',');
@@ -113,19 +113,17 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement
 	#renderTypeContent() {
 		return html`<umb-input-document-type
 			@change=${this.#onChange}
-			.selectedIds=${this.#selectedIds}></umb-input-document-type>`;
+			.selection=${this.#selection}></umb-input-document-type>`;
 	}
 
 	#renderTypeMedia() {
-		return html`<umb-input-media-type
-			@change=${this.#onChange}
-			.selectedIds=${this.#selectedIds}></umb-input-media-type>`;
+		return html`<umb-input-media-type @change=${this.#onChange} .selection=${this.#selection}></umb-input-media-type>`;
 	}
 
 	#renderTypeMember() {
 		return html`<umb-input-member-type
 			@change=${this.#onChange}
-			.selectedIds=${this.#selectedIds}></umb-input-member-type>`;
+			.selection=${this.#selection}></umb-input-member-type>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts

@@ -41,7 +41,6 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 
 	#dynamicRootRepository = new UmbDynamicRootRepository(this);
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const startNode: UmbTreePickerSource | undefined = config?.getValueByAlias('startNode');
 		if (startNode) {

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/upload-field/property-editor-ui-upload-field.element.ts

@@ -12,7 +12,6 @@ export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement impleme
 	@property()
 	value = '';
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 

src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts

@@ -47,15 +47,15 @@ export class UmbPropertyDatasetElement extends UmbLitElement {
 	 * ```
 	 */
 	@property({ attribute: false })
-	public get value(): Array<UmbPropertyValueData> {
-		return this.context.getValues();
-	}
 	public set value(value: Array<UmbPropertyValueData>) {
 		this.#allowChangeEvent = false;
 		this.context.setValues(value);
 		// Above might not trigger a observer callback (if no change), so set the allow change event to true:
 		this.#allowChangeEvent = true;
 	}
+	public get value(): Array<UmbPropertyValueData> {
+		return this.context.getValues();
+	}
 
 	/**
 	 * The name of the dataset, this name varies depending on the use-case. But this is either
@@ -71,15 +71,15 @@ export class UmbPropertyDatasetElement extends UmbLitElement {
 	 * `
 	 */
 	@property({ attribute: false })
-	public get name(): string | undefined {
-		return this.context.getName();
-	}
 	public set name(value: string | undefined) {
 		this.#allowChangeEvent = false;
 		this.context.setName(value);
 		// Above might not trigger a observer callback (if no change), so set the allow change event to true:
 		this.#allowChangeEvent = true;
 	}
+	public get name(): string | undefined {
+		return this.context.getName();
+	}
 
 	constructor() {
 		super();

src/Umbraco.Web.UI.Client/src/packages/core/section/components/input-section/input-section.element.ts

@@ -14,12 +14,12 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -37,12 +37,12 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -53,12 +53,12 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selection(): Array<string> {
-		return this.#pickerContext.getSelection();
-	}
 	public set selection(uniques: Array<string>) {
 		this.#pickerContext.setSelection(uniques);
 	}
+	public get selection(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
 
 	@property()
 	public set value(selectionString: string) {
@@ -67,6 +67,9 @@ export class UmbInputSectionElement extends FormControlMixin(UmbLitElement) {
 		if (selectionString === this.value) return;
 		this.selection = splitStringToArray(selectionString);
 	}
+	public get value(): string {
+		return this.selection.join(',');
+	}
 
 	@state()
 	private _items?: Array<UmbSectionItemModel>;

src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts

@@ -55,34 +55,34 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 
 	@property({ type: Array })
 	public set items(items: Array<UmbReferenceByUniqueAndType>) {
-		this.#selectedIds = items?.map((item) => item.unique) ?? [];
+		this.#selection = items?.map((item) => item.unique) ?? [];
 		this.value = items?.map((item) => item.unique).join(',');
 	}
 	public get items(): Array<UmbReferenceByUniqueAndType> {
-		return this.#selectedIds.map((id) => ({ type: this.#entityTypeLookup[this._type], unique: id }));
+		return this.#selection.map((id) => ({ type: this.#entityTypeLookup[this._type], unique: id }));
 	}
 
-	#selectedIds: Array<string> = [];
+	#selection: Array<string> = [];
 
 	#onChange(event: CustomEvent) {
 		switch (this._type) {
 			case 'content':
 				{
 					const input = event.target as UmbInputDocumentElement;
-					this.#selectedIds = input.selectedIds;
-					this.value = input.selectedIds.join(',');
+					this.#selection = input.selection;
+					this.value = input.selection.join(',');
 				}
 				break;
 			case 'media': {
 				const input = event.target as UmbInputMediaElement;
-				this.#selectedIds = input.selectedIds;
-				this.value = input.selectedIds.join(',');
+				this.#selection = input.selection;
+				this.value = input.selection.join(',');
 				break;
 			}
 			case 'member': {
 				const input = event.target as UmbInputMemberElement;
-				this.#selectedIds = input.selectedIds;
-				this.value = input.selectedIds.join(',');
+				this.#selection = input.selection;
+				this.value = input.selection.join(',');
 				break;
 			}
 			default:
@@ -111,7 +111,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 
 	#renderDocumentPicker() {
 		return html`<umb-input-document
-			.selectedIds=${this.#selectedIds}
+			.selection=${this.#selection}
 			.startNodeId=${this.startNodeId}
 			.allowedContentTypeIds=${this._allowedContentTypeIds}
 			.min=${this.min}
@@ -124,7 +124,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	#renderMediaPicker() {
 		// TODO: [LK] Review the data structure of this input editor.
 		return html`<umb-input-media
-			.selectedIds=${this.#selectedIds}
+			.selection=${this.#selection}
 			.allowedContentTypeIds=${this._allowedContentTypeIds}
 			.min=${this.min}
 			.max=${this.max}
@@ -135,7 +135,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 
 	#renderMemberPicker() {
 		return html`<umb-input-member
-			.selectedIds=${this.#selectedIds}
+			.selection=${this.#selection}
 			.allowedContentTypeIds=${this._allowedContentTypeIds}
 			.min=${this.min}
 			.max=${this.max}

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-action-menu-item/default/workspace-action-menu-item.element.ts

@@ -21,7 +21,6 @@ export class UmbWorkspaceActionMenuItemElement<
 	@property({ attribute: false })
 	public manifest?: ManifestWorkspaceActionMenuItemDefaultKind<MetaType>;
 
-	@property({ attribute: false })
 	public set api(api: ApiType | undefined) {
 		this.#api = api;
 

src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-input/data-type-input.element.ts

@@ -14,12 +14,12 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -37,12 +37,12 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -53,17 +53,20 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selectedIds(): Array<string> {
+	public get selection(): Array<string> {
 		return this.#pickerContext.getSelection();
 	}
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 	}
 
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
+	}
+	public get value(): string {
+		return this.selection.join(',');
 	}
 
 	@state()

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts

@@ -33,12 +33,12 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -56,12 +56,12 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -73,20 +73,20 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
 	maxMessage = 'This field exceeds the allowed amount of items';
 
 	@property({ type: Array })
-	public set selectedIds(ids: Array<string> | undefined) {
+	public set selection(ids: Array<string> | undefined) {
 		this.#pickerContext.setSelection(ids ?? []);
 	}
-	public get selectedIds(): Array<string> {
+	public get selection(): Array<string> {
 		return this.#pickerContext.getSelection();
 	}
 
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
 	}
 	public get value(): string {
-		return this.selectedIds.join(',');
+		return this.selection.join(',');
 	}
 
 	@state()
@@ -160,7 +160,7 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
 	}
 
 	#renderAddButton() {
-		if (this.max > 0 && this.selectedIds.length >= this.max) return nothing;
+		if (this.max > 0 && this.selection.length >= this.max) return nothing;
 		return html`
 			<uui-button
 				id="add-button"

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts

@@ -12,7 +12,6 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
 	@property()
 	public value?: string;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (config) {
 			const validationLimit = config.getValueByAlias<any>('validationLimit');
@@ -38,8 +37,8 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
 	private _onlyElementTypes?: boolean;
 
 	private _onChange(event: CustomEvent) {
-		const selectedIds = (event.target as UmbInputDocumentTypeElement).selectedIds;
-		this.value = this._multiPicker ? selectedIds.join(',') : selectedIds[0];
+		const selection = (event.target as UmbInputDocumentTypeElement).selection;
+		this.value = this._multiPicker ? selection.join(',') : selection[0];
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts

@@ -82,11 +82,11 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
 						<umb-input-document-type
 							element-types-only
-							.selectedIds=${this._allowedContentTypeUniques ?? []}
+							.selection=${this._allowedContentTypeUniques ?? []}
 							@change="${(e: CustomEvent) => {
 								const sortedContentTypesList: Array<UmbContentTypeSortModel> = (
 									e.target as UmbInputDocumentTypeElement
-								).selectedIds.map((id, index) => ({
+								).selection.map((id, index) => ({
 									contentType: { unique: id },
 									sortOrder: index,
 								}));

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.ts

@@ -52,7 +52,7 @@ export class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement
 		// save new allowed ids
 		const input = e.target as UmbInputTemplateElement;
 		const idsWithoutRoot =
-			input.selectedIds
+			input.selection
 				?.filter((id) => id !== null)
 				.map((id) => {
 					return { id };
@@ -68,7 +68,7 @@ export class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement
 				<div id="templates" slot="editor">
 					<umb-input-template
 						.defaultUnique=${this._defaultTemplateId ?? ''}
-						.selectedIds=${this._allowedTemplateIds}
+						.selection=${this._allowedTemplateIds}
 						@change=${this.#templateInputChange}></umb-input-template>
 				</div>
 			</umb-property-layout>

src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts

@@ -21,7 +21,7 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 		itemSelector: 'uui-ref-node',
 		containerSelector: 'uui-ref-list',
 		onChange: ({ model }) => {
-			this.selectedIds = model;
+			this.selection = model;
 		},
 	});
 
@@ -32,12 +32,12 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -55,12 +55,12 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -71,10 +71,10 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selectedIds(): Array<string> {
+	public get selection(): Array<string> {
 		return this.#pickerContext.getSelection();
 	}
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 		this.#sorter.setModel(ids);
 	}
@@ -94,10 +94,10 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
 	}
 	public get value() {
-		return this.selectedIds.join(',');
+		return this.selection.join(',');
 	}
 
 	@state()
@@ -177,7 +177,7 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	#renderAddButton() {
-		if (this.max > 0 && this.selectedIds.length >= this.max) return;
+		if (this.max === 1 && this.selection.length >= this.max) return;
 		return html`<uui-button
 			id="add-button"
 			look="placeholder"

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/public-access/modal/public-access-modal.element.ts

@@ -32,7 +32,7 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement<
 	private _startPage = true;
 
 	@state()
-	private _selectedIds: Array<string> = [];
+	private _selection: Array<string> = [];
 
 	@state()
 	private _loginPageId?: string;
@@ -76,11 +76,11 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement<
 		// Specific or Groups
 		this._specific = data.members.length > 0 ? true : false;
 
-		//SelectedIds
+		//selection
 		if (data.members.length > 0) {
-			this._selectedIds = data.members.map((m: any) => m.id);
+			this._selection = data.members.map((m: any) => m.id);
 		} else if (data.groups.length > 0) {
-			this._selectedIds = data.groups.map((g: any) => g.id);
+			this._selection = data.groups.map((g: any) => g.id);
 		}
 
 		this._loginPageId = data.loginPageId;
@@ -96,8 +96,8 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement<
 	async #handleSave() {
 		if (!this._loginPageId || !this._errorPageId || !this.#unique) return;
 
-		const groups = this._specific ? [] : this._selectedIds;
-		const members = this._specific ? this._selectedIds : [];
+		const groups = this._specific ? [] : this._selection;
+		const members = this._specific ? this._selection : [];
 
 		const requestBody: PublicAccessRequestModel = {
 			memberGroupNames: groups,
@@ -128,19 +128,19 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement<
 	// Change Events
 
 	#onChangeLoginPage(e: CustomEvent) {
-		this._loginPageId = (e.target as UmbInputDocumentElement).selectedIds[0];
+		this._loginPageId = (e.target as UmbInputDocumentElement).selection[0];
 	}
 
 	#onChangeErrorPage(e: CustomEvent) {
-		this._errorPageId = (e.target as UmbInputDocumentElement).selectedIds[0];
+		this._errorPageId = (e.target as UmbInputDocumentElement).selection[0];
 	}
 
 	#onChangeGroup(e: CustomEvent) {
-		this._selectedIds = (e.target as UmbInputMemberTypeElement).selectedIds;
+		this._selection = (e.target as UmbInputMemberTypeElement).selection;
 	}
 
 	#onChangeMember(e: CustomEvent) {
-		this._selectedIds = (e.target as UmbInputMemberElement).selectedIds;
+		this._selection = (e.target as UmbInputMemberElement).selection;
 	}
 
 	// Renders
@@ -204,13 +204,11 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement<
 			? html`<umb-localize key="publicAccess_paSelectMembers" .args=${[this._documentName]}>
 						Select the members who have access to the page <strong>${this._documentName}</strong>
 					</umb-localize>
-					<umb-input-member .selectedIds=${this._selectedIds} @change=${this.#onChangeMember}></umb-input-member>`
+					<umb-input-member .selection=${this._selection} @change=${this.#onChangeMember}></umb-input-member>`
 			: html`<umb-localize key="publicAccess_paSelectGroups" .args=${[this._documentName]}>
 						Select the groups who have access to the page <strong>${this._documentName}</strong>
 					</umb-localize>
-					<umb-input-member-type
-						.selectedIds=${this._selectedIds}
-						@change=${this.#onChangeGroup}></umb-input-member-type>`;
+					<umb-input-member-type .selection=${this._selection} @change=${this.#onChangeGroup}></umb-input-member-type>`;
 	}
 
 	// Action buttons
@@ -223,7 +221,7 @@ export class UmbPublicAccessModalElement extends UmbModalBaseElement<
 					look="primary"
 					color="positive"
 					label=${this.localize.term('buttons_save')}
-					?disabled=${!this._loginPageId || !this._errorPageId || this._selectedIds.length === 0}
+					?disabled=${!this._loginPageId || !this._errorPageId || this._selection.length === 0}
 					@click="${this.#handleSave}"></uui-button>`
 			: html`<uui-button
 					slot="actions"

src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts

@@ -12,7 +12,6 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
 	@property()
 	public value?: string;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const validationLimit = config?.find((x) => x.alias === 'validationLimit');
 
@@ -29,7 +28,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
 	private _limitMax?: number;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputDocumentElement).selectedIds.join(',');
+		this.value = (event.target as UmbInputDocumentElement).selection.join(',');
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 

src/Umbraco.Web.UI.Client/src/packages/language/components/input-language/input-language.element.ts

@@ -14,12 +14,12 @@ export class UmbInputLanguageElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -37,12 +37,12 @@ export class UmbInputLanguageElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -56,17 +56,20 @@ export class UmbInputLanguageElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: Object, attribute: false })
 	public filter: (language: UmbLanguageItemModel) => boolean = () => true;
 
-	public get selectedUniques(): Array<string> {
-		return this.#pickerContext.getSelection();
-	}
-	public set selectedUniques(uniques: Array<string>) {
+	public set selection(uniques: Array<string>) {
 		this.#pickerContext.setSelection(uniques);
 	}
+	public get selection(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
 
 	@property()
 	public set value(uniques: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedUniques = splitStringToArray(uniques);
+		this.selection = splitStringToArray(uniques);
+	}
+	public get value(): string {
+		return this.selection.join(',');
 	}
 
 	@state()

src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/views/language-details-workspace-view.element.ts

@@ -108,7 +108,7 @@ export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement implem
 	#handleFallbackChange(event: UmbChangeEvent) {
 		if (event instanceof UmbChangeEvent) {
 			const target = event.target as UmbInputLanguageElement;
-			const selectedLanguageUnique = target.selectedUniques?.[0];
+			const selectedLanguageUnique = target.selection?.[0];
 			this.#languageWorkspaceContext?.setFallbackCulture(selectedLanguageUnique);
 		}
 	}
@@ -149,7 +149,7 @@ export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement implem
 						${this._language?.isDefault && this._language?.isDefault !== this._isDefaultLanguage
 							? html`<div id="default-language-warning">
 									Switching default language may result in default content missing.
-							  </div>`
+								</div>`
 							: nothing}
 
 						<hr />

src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts

@@ -20,7 +20,6 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl
 	@state()
 	private _overlaySize?: UUIModalSidebarSize;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._preview = config?.getValueByAlias('preview');
 		this._overlaySize = config?.getValueByAlias('overlaySize') ?? undefined;

src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts

@@ -14,12 +14,12 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -37,12 +37,12 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -53,21 +53,20 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	@property({ type: Array })
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 	}
-	public get selectedIds(): Array<string> {
+	public get selection(): Array<string> {
 		return this.#pickerContext.getSelection();
 	}
 
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
 	}
 	public get value() {
-		return this.selectedIds.join(',');
+		return this.selection.join(',');
 	}
 
 	@state()
@@ -122,7 +121,7 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	#renderAddButton() {
-		if (this.max > 0 && this.selectedIds.length >= this.max) return;
+		if (this.max === 1 && this.selection.length >= this.max) return;
 		return html`
 			<uui-button
 				id="add-button"

src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts

@@ -12,7 +12,6 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp
 	@property()
 	public value?: string;
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (config) {
 			const validationLimit = config.getValueByAlias<any>('validationLimit');
@@ -30,7 +29,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp
 	private _limitMax?: number;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputMediaTypeElement).selectedIds.join(',');
+		this.value = (event.target as UmbInputMediaTypeElement).selection.join(',');
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 

src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/structure/media-type-workspace-view-structure.element.ts

@@ -81,11 +81,11 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
 					<div slot="editor">
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
 						<umb-input-media-type
-							.selectedIds=${this._allowedContentTypeIDs ?? []}
+							.selection=${this._allowedContentTypeIDs ?? []}
 							@change="${(e: CustomEvent) => {
 								const sortedContentTypesList: Array<UmbContentTypeSortModel> = (
 									e.target as UmbInputMediaTypeElement
-								).selectedIds.map((id, index) => ({
+								).selection.map((id, index) => ({
 									contentType: { unique: id },
 									sortOrder: index,
 								}));

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts

@@ -24,7 +24,7 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 	#sorter = new UmbSorterController(this, {
 		...SORTER_CONFIG,
 		onChange: ({ model }) => {
-			this.selectedIds = model;
+			this.selection = model;
 		},
 	});
 
@@ -35,12 +35,12 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -58,12 +58,12 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -74,13 +74,13 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selectedIds(): Array<string> {
-		return this.#pickerContext.getSelection();
-	}
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 		this.#sorter.setModel(ids);
 	}
+	public get selection(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
 
 	@property({ type: Array })
 	allowedContentTypeIds?: string[] | undefined;
@@ -94,10 +94,10 @@ export class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
 	}
 	public get value() {
-		return this.selectedIds.join(',');
+		return this.selection.join(',');
 	}
 
 	@state()

src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-cropper/property-editor-ui-image-cropper.element.ts

@@ -36,7 +36,6 @@ export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement implem
 		}
 	}
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this.crops = config?.getValueByAlias<UmbImageCropperPropertyEditorValue['crops']>('crops') ?? [];
 	}

src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts

@@ -26,7 +26,6 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme
 		return this.#value;
 	}
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const validationLimit = config?.getByAlias('validationLimit');
 		if (!validationLimit) return;
@@ -51,9 +50,9 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme
 	#value: Array<UmbMediaPickerPropertyValue> = [];
 
 	#onChange(event: CustomEvent) {
-		const selectedIds = (event.target as UmbInputMediaElement).selectedIds;
+		const selection = (event.target as UmbInputMediaElement).selection;
 
-		const result = selectedIds.map((mediaKey) => {
+		const result = selection.map((mediaKey) => {
 			return {
 				key: UmbId.new(),
 				mediaKey,
@@ -72,7 +71,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme
 		return html`
 			<umb-input-media
 				@change=${this.#onChange}
-				.selectedIds=${this._items}
+				.selection=${this._items}
 				.min=${this._limitMin}
 				.max=${this._limitMax}>
 				<umb-localize key="general_add">Add</umb-localize>

src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts

@@ -25,7 +25,7 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement)
 	#sorter = new UmbSorterController(this, {
 		...SORTER_CONFIG,
 		onChange: ({ model }) => {
-			this.selectedIds = model;
+			this.selection = model;
 		},
 	});
 
@@ -36,12 +36,12 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement)
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -59,12 +59,12 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement)
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -75,13 +75,13 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement)
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selectedIds(): Array<string> {
-		return this.#pickerContext.getSelection();
-	}
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 		this.#sorter.setModel(ids);
 	}
+	public get selection(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
 
 	@property({ type: Boolean })
 	showOpenButton?: boolean;
@@ -92,7 +92,10 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement)
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
+	}
+	public get value(): string {
+		return this.selection.join(',');
 	}
 
 	@property({ type: Object, attribute: false })
@@ -109,6 +112,7 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement)
 	constructor() {
 		super();
 
+		// TODO: This would have to be more specific if used in a property editor context... [NL]
 		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
 			.addAdditionalPath('member-group')
 			.onSetup(() => {
@@ -180,7 +184,7 @@ export class UmbInputMemberGroupElement extends FormControlMixin(UmbLitElement)
 	}
 
 	#renderAddButton() {
-		if (this.max > 0 && this.selectedIds.length >= this.max) return;
+		if (this.max === 1 && this.selection.length >= this.max) return;
 		return html`<uui-button
 			id="add-button"
 			look="placeholder"

src/Umbraco.Web.UI.Client/src/packages/members/member-type/components/input-member-type/input-member-type.element.ts

@@ -53,17 +53,20 @@ export class UmbInputMemberTypeElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 	}
-	public get selectedIds(): Array<string> {
+	public get selection(): Array<string> {
 		return this.#pickerContext.getSelection();
 	}
 
 	@property()
 	public set value(idsString: string) {
-		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection. [NL]
+		this.selection = splitStringToArray(idsString);
+	}
+	public get value(): string {
+		return this.selection.join(',');
 	}
 
 	@state()
@@ -118,7 +121,7 @@ export class UmbInputMemberTypeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	#renderAddButton() {
-		if (this.max > 0 && this.selectedIds.length >= this.max) return;
+		if (this.max === 1 && this.selection.length >= this.max) return;
 		return html`
 			<uui-button
 				id="add-button"

src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts

@@ -25,7 +25,7 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 	#sorter = new UmbSorterController(this, {
 		...SORTER_CONFIG,
 		onChange: ({ model }) => {
-			this.selectedIds = model;
+			this.selection = model;
 		},
 	});
 
@@ -36,12 +36,12 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -59,12 +59,12 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -75,13 +75,13 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selectedIds(): Array<string> {
-		return this.#pickerContext.getSelection();
-	}
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 		this.#sorter.setModel(ids);
 	}
+	public get selection(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
 
 	@property({ type: Boolean })
 	showOpenButton?: boolean;
@@ -92,7 +92,10 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
+	}
+	public get value(): string {
+		return this.selection.join(',');
 	}
 
 	@property({ type: Object, attribute: false })
@@ -180,7 +183,7 @@ export class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	#renderAddButton() {
-		if (this.max > 0 && this.selectedIds.length >= this.max) return;
+		if (this.max === 1 && this.selection.length >= this.max) return;
 		return html`<uui-button
 			id="add-button"
 			look="placeholder"

src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/member/member-workspace-view-member.element.ts

@@ -42,15 +42,16 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 	}
 
 	#onGroupsUpdated(event: CustomEvent) {
-		const uniques = (event.target as UmbInputMemberGroupElement).selectedIds;
+		const uniques = (event.target as UmbInputMemberGroupElement).selection;
 
 		this._workspaceContext?.set('groups', uniques);
 	}
 
 	#onPasswordUpdate = () => {
 		const newPassword = this.shadowRoot?.querySelector<HTMLInputElement>('uui-input[name="newPassword"]')?.value;
-		const confirmPassword = this.shadowRoot?.querySelector<HTMLInputElement>('uui-input[name="confirmPassword"]')
-			?.value;
+		const confirmPassword = this.shadowRoot?.querySelector<HTMLInputElement>(
+			'uui-input[name="confirmPassword"]',
+		)?.value;
 
 		if (newPassword !== confirmPassword) {
 			this._newPasswordError = 'Passwords do not match';
@@ -157,7 +158,7 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
 					<umb-input-member-group
 						slot="editor"
 						@change=${this.#onGroupsUpdated}
-						.selectedIds=${this._workspaceContext.memberGroups}></umb-input-member-group>
+						.selection=${this._workspaceContext.memberGroups}></umb-input-member-group>
 				</umb-property-layout>
 
 				<umb-property-layout label="Approved">

src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts

@@ -125,7 +125,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 			${this._package?.id
 				? html`<uui-button @click="${this.#download}" color="" look="secondary" label="Download package">
 						Download
-				  </uui-button>`
+					</uui-button>`
 				: nothing}
 			<uui-button
 				@click="${this._package.id ? this.#update : this.#save}"
@@ -176,7 +176,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 					.value=${this._package.contentNodeId ?? ''}
 					max="1"
 					@change="${(e: CustomEvent) =>
-						(this._package.contentNodeId = (e.target as UmbInputDocumentElement).selectedIds[0])}">
+						(this._package.contentNodeId = (e.target as UmbInputDocumentElement).selection[0])}">
 				</umb-input-document>
 				<uui-checkbox
 					label="Include child nodes"
@@ -192,9 +192,9 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 		return html`
 			<div slot="editor">
 				<umb-input-media
-					.selectedIds=${this._package.mediaIds ?? []}
+					.selection=${this._package.mediaIds ?? []}
 					@change="${(e: CustomEvent) =>
-						(this._package.mediaIds = (e.target as UmbInputMediaElement).selectedIds)}"></umb-input-media>
+						(this._package.mediaIds = (e.target as UmbInputMediaElement).selection)}"></umb-input-media>
 				<uui-checkbox
 					label="Include child nodes"
 					.checked="${this._package.mediaLoadChildNodes ?? false}"
@@ -222,7 +222,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 			<umb-input-language
 				.value="${this._package.languages?.join(',') ?? ''}"
 				@change="${(e: CustomEvent) => {
-					this._package.languages = (e.target as UmbInputLanguageElement).selectedUniques;
+					this._package.languages = (e.target as UmbInputLanguageElement).selection;
 				}}"></umb-input-language>
 		</div>`;
 	}

src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts

@@ -14,12 +14,12 @@ export class UmbInputStaticFileElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -37,12 +37,12 @@ export class UmbInputStaticFileElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -53,18 +53,21 @@ export class UmbInputStaticFileElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of files';
 
-	public get selectedPaths(): Array<string> {
-		return this.#pickerContext.getSelection();
-	}
-	public set selectedPaths(paths: Array<string>) {
+	public set selection(paths: Array<string>) {
 		this.#pickerContext.setSelection(paths);
 	}
+	public get selection(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
 
 	@property()
 	// get value is handled by super class.
 	public set value(pathsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedPaths = splitStringToArray(pathsString);
+		this.selection = splitStringToArray(pathsString);
+	}
+	public get value(): string {
+		return this.selection.join(',');
 	}
 
 	@state()
@@ -104,14 +107,14 @@ export class UmbInputStaticFileElement extends FormControlMixin(UmbLitElement) {
 							(item) => item.unique,
 							(item) => this._renderItem(item),
 						)}
-				  </uui-ref-list>`
+					</uui-ref-list>`
 				: ''}
 			${this.#renderAddButton()}
 		`;
 	}
 
 	#renderAddButton() {
-		if (this.max > 0 && this.selectedPaths.length >= this.max) return;
+		if (this.max === 1 && this.selection.length >= this.max) return;
 		return html`<uui-button
 			id="add-button"
 			look="placeholder"

src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.test.ts

@@ -20,8 +20,8 @@ describe('UmbInputStaticFileElement', () => {
 
 	describe('Public API', () => {
 		describe('properties', () => {
-			it('has a selectedPaths property', () => {
-				expect(element).to.have.property('selectedPaths').to.be.an.instanceOf(Array);
+			it('has a selection property', () => {
+				expect(element).to.have.property('selection').to.be.an.instanceOf(Array);
 			});
 
 			it('has a value property', () => {

src/Umbraco.Web.UI.Client/src/packages/static-file/property-editors/static-file-picker/property-editor-ui-static-file-picker.element.ts

@@ -10,14 +10,13 @@ export class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitElement im
 	private _value: Array<string> = [];
 
 	@property({ type: Array })
-	public get value(): Array<string> {
-		return this._value;
-	}
 	public set value(value: Array<string>) {
 		this._value = value || [];
 	}
+	public get value(): Array<string> {
+		return this._value;
+	}
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		const validationLimit = config?.find((x) => x.alias === 'validationLimit');
 
@@ -31,7 +30,7 @@ export class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitElement im
 	private _limitMax?: number;
 
 	private _onChange(event: CustomEvent) {
-		this.value = (event.target as UmbInputStaticFileElement).selectedPaths;
+		this.value = (event.target as UmbInputStaticFileElement).selection;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
@@ -40,7 +39,7 @@ export class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitElement im
 		return html`
 			<umb-input-static-file
 				@change=${this._onChange}
-				.selectedIds=${this._value}
+				.selection=${this._value}
 				.min=${this._limitMin ?? 0}
 				.max=${this._limitMax ?? Infinity}></umb-input-static-file>
 		`;

src/Umbraco.Web.UI.Client/src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts

@@ -13,12 +13,12 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb
 	private _value: Array<string> = [];
 
 	@property({ type: Array })
-	public get value(): Array<string> {
-		return this._value;
-	}
 	public set value(value: Array<string>) {
 		this._value = value || [];
 	}
+	public get value(): Array<string> {
+		return this._value;
+	}
 
 	@state()
 	private _group?: string;
@@ -27,7 +27,6 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb
 	private _culture?: string | null;
 	//TODO: Use type from VariantID
 
-	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._group = config?.getValueByAlias('group');
 		this.value = config?.getValueByAlias('items') ?? [];

src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-input/stylesheet-input.element.ts

@@ -53,17 +53,17 @@ export class UmbStylesheetInputElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selectedIds(): Array<string> {
+	public get selection(): Array<string> {
 		return this.#pickerContext.getSelection();
 	}
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 	}
 
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
 	}
 	public get value() {
 		return this.#pickerContext.getSelection().join(',');

src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/input-template/input-template.element.ts

@@ -51,25 +51,25 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	_selectedIds: Array<string> = [];
 	@property({ type: Array })
-	public get selectedIds() {
-		return this._selectedIds;
-	}
-	public set selectedIds(newKeys: Array<string> | undefined) {
-		this._selectedIds = newKeys ?? [];
+	public set selection(newKeys: Array<string> | undefined) {
+		this._selection = newKeys ?? [];
 		this.#observePickedTemplates();
 	}
+	public get selection() {
+		return this._selection;
+	}
+	_selection: Array<string> = [];
 
 	_defaultUnique = '';
 	@property({ type: String })
-	public get defaultUnique(): string {
-		return this._defaultUnique;
-	}
 	public set defaultUnique(newId: string) {
 		this._defaultUnique = newId;
 		super.value = newId;
 	}
+	public get defaultUnique(): string {
+		return this._defaultUnique;
+	}
 
 	private _templateItemRepository = new UmbTemplateItemRepository(this);
 
@@ -93,7 +93,7 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 
 	async #observePickedTemplates() {
 		this.observe(
-			(await this._templateItemRepository.requestItems(this._selectedIds)).asObservable(),
+			(await this._templateItemRepository.requestItems(this._selection)).asObservable(),
 			(data) => {
 				const oldValue = this._pickedTemplates;
 				this._pickedTemplates = data;
@@ -108,11 +108,11 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	#appendTemplates(unique: string[]) {
-		this.selectedIds = [...(this.selectedIds ?? []), ...unique];
+		this.selection = [...(this.selection ?? []), ...unique];
 
 		// If there is no default, set the first picked template as default.
-		if (!this.defaultUnique && this.selectedIds.length) {
-			this.defaultUnique = this.selectedIds[0];
+		if (!this.defaultUnique && this.selection.length) {
+			this.defaultUnique = this.selection[0];
 		}
 
 		this.dispatchEvent(new UmbChangeEvent());
@@ -131,7 +131,7 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 			data: {
 				hideTreeRoot: true,
 				multiple: true,
-				pickableFilter: (template) => template.unique !== null && !this._selectedIds.includes(template.unique),
+				pickableFilter: (template) => template.unique !== null && !this._selection.includes(template.unique),
 			},
 		});
 
@@ -139,12 +139,12 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 
 		if (!value?.selection) return;
 
-		const selectedIds = value.selection.filter((x) => x !== null) as Array<string>;
+		const selection = value.selection.filter((x) => x !== null) as Array<string>;
 
-		if (!selectedIds.length) return;
+		if (!selection.length) return;
 
 		// Add templates to row of picked templates and dispatch change event
-		this.#appendTemplates(selectedIds);
+		this.#appendTemplates(selection);
 	}
 
 	#removeTemplate(unique: string) {
@@ -157,12 +157,12 @@ export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
 		In current backoffice we just prevent deleting a default when there are other templates. But if its the only one its okay. This is a weird experience, so we should make something that makes more sense.
 		BTW. its weird cause the damage of removing the default template is equally bad when there is one or more templates.
 		*/
-		this.selectedIds = this._selectedIds.filter((x) => x !== unique);
+		this.selection = this._selection.filter((x) => x !== unique);
 
 		// If the default template is removed, set the first picked template as default or reset defaultUnique.
 		if (unique === this.defaultUnique) {
-			if (this.selectedIds.length) {
-				this.defaultUnique = this.selectedIds[0];
+			if (this.selection.length) {
+				this.defaultUnique = this.selection[0];
 			} else {
 				this.defaultUnique = '';
 			}

src/Umbraco.Web.UI.Client/src/packages/tiny-mce/property-editors/stylesheets/property-editor-ui-tiny-mce-stylesheets-configuration.element.ts

@@ -14,16 +14,16 @@ export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
-	private _value: Array<string> = [];
 	@property({ type: Array })
-	public get value(): Array<string> {
-		if (!this._value) return [];
-		return this._value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique)) as string[];
-	}
 	public set value(value: Array<string>) {
 		if (!value) return;
 		this._value = value.map((unique) => this.#serverFilePathUniqueSerializer.toUnique(unique));
 	}
+	public get value(): Array<string> {
+		if (!this._value) return [];
+		return this._value.map((unique) => this.#serverFilePathUniqueSerializer.toServerPath(unique)) as string[];
+	}
+	private _value: Array<string> = [];
 
 	@property({ type: Object, attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
@@ -32,12 +32,12 @@ export class UmbPropertyEditorUITinyMceStylesheetsConfigurationElement
 
 	#onChange(event: CustomEvent) {
 		const target = event.target as UmbStylesheetInputElement;
-		this._value = target.selectedIds;
+		this._value = target.selection;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
-		return html`<umb-stylesheet-input @change=${this.#onChange} .selectedIds=${this._value}></umb-stylesheet-input>`;
+		return html`<umb-stylesheet-input @change=${this.#onChange} .selection=${this._value}></umb-stylesheet-input>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/user/user-group/components/input-user-group/user-group-input.element.ts

@@ -14,12 +14,12 @@ export class UmbUserGroupInputElement extends FormControlMixin(UmbLitElement) {
 	 * @default 0
 	 */
 	@property({ type: Number })
-	public get min(): number {
-		return this.#pickerContext.min;
-	}
 	public set min(value: number) {
 		this.#pickerContext.min = value;
 	}
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
 
 	/**
 	 * Min validation message.
@@ -37,12 +37,12 @@ export class UmbUserGroupInputElement extends FormControlMixin(UmbLitElement) {
 	 * @default Infinity
 	 */
 	@property({ type: Number })
-	public get max(): number {
-		return this.#pickerContext.max;
-	}
 	public set max(value: number) {
 		this.#pickerContext.max = value;
 	}
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
 
 	/**
 	 * Max validation message.
@@ -53,17 +53,20 @@ export class UmbUserGroupInputElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selectedIds(): Array<string> {
-		return this.#pickerContext.getSelection();
-	}
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 	}
+	public get selection(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
 
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
+	}
+	public get value(): string {
+		return this.selection.join(',');
 	}
 
 	@state()

src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts

@@ -39,13 +39,13 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 	#onDocumentStartNodeChange(event: CustomEvent) {
 		event.stopPropagation();
 		const target = event.target as UmbInputDocumentElement;
-		this.#workspaceContext?.updateProperty('documentStartNode', { unique: target.selectedIds[0] });
+		this.#workspaceContext?.updateProperty('documentStartNode', { unique: target.selection[0] });
 	}
 
 	#onMediaStartNodeChange(event: CustomEvent) {
 		event.stopPropagation();
 		const target = event.target as UmbInputMediaElement;
-		this.#workspaceContext?.updateProperty('mediaStartNode', { unique: target.selectedIds[0] });
+		this.#workspaceContext?.updateProperty('mediaStartNode', { unique: target.selection[0] });
 	}
 
 	#onNameChange(event: UUIInputEvent) {
@@ -107,7 +107,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 					<umb-input-document
 						slot="editor"
 						max="1"
-						.selectedIds=${this._userGroup.documentStartNode?.unique ? [this._userGroup.documentStartNode.unique] : []}
+						.selection=${this._userGroup.documentStartNode?.unique ? [this._userGroup.documentStartNode.unique] : []}
 						@change=${this.#onDocumentStartNodeChange}></umb-input-document>
 				</umb-property-layout>
 				<umb-property-layout
@@ -116,7 +116,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
 					<umb-input-media
 						slot="editor"
 						max="1"
-						.selectedIds=${this._userGroup.mediaStartNode?.unique ? [this._userGroup.mediaStartNode.unique] : []}
+						.selection=${this._userGroup.mediaStartNode?.unique ? [this._userGroup.mediaStartNode.unique] : []}
 						@change=${this.#onMediaStartNodeChange}></umb-input-media>
 				</umb-property-layout>
 			</uui-box>

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts

@@ -53,17 +53,20 @@ export class UmbUserInputElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: String, attribute: 'min-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
-	public get selectedIds(): Array<string> {
+	public get selection(): Array<string> {
 		return this.#pickerContext.getSelection();
 	}
-	public set selectedIds(ids: Array<string>) {
+	public set selection(ids: Array<string>) {
 		this.#pickerContext.setSelection(ids);
 	}
 
 	@property()
 	public set value(idsString: string) {
 		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = splitStringToArray(idsString);
+		this.selection = splitStringToArray(idsString);
+	}
+	public get value(): string {
+		return this.selection.join(',');
 	}
 
 	@state()

src/Umbraco.Web.UI.Client/src/packages/user/user/invite/modal/invite/user-invite-modal.element.ts

@@ -24,7 +24,7 @@ export class UmbInviteUserModalElement extends UmbModalBaseElement {
 
 		//TODO: How should we handle pickers forms?
 		const userGroupPicker = form.querySelector('#userGroups') as UmbUserGroupInputElement;
-		const userGroupUniques = userGroupPicker?.selectedIds;
+		const userGroupUniques = userGroupPicker?.selection;
 
 		const message = formData.get('message') as string;
 

src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.element.ts

@@ -27,7 +27,7 @@ export class UmbCreateUserModalElement extends UmbModalBaseElement {
 		const email = formData.get('email') as string;
 
 		const userGroupPicker = form.querySelector('#userGroups') as UmbUserGroupInputElement;
-		const userGroups = userGroupPicker?.selectedIds;
+		const userGroups = userGroupPicker?.selection;
 
 		const { data: userScaffold } = await this.#userDetailRepository.createScaffold();
 		if (!userScaffold) return;

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

@@ -26,17 +26,17 @@ export class UmbUserWorkspaceAccessSettingsElement extends UmbLitElement {
 
 	#onUserGroupsChange(event: UmbChangeEvent) {
 		const target = event.target as UmbUserGroupInputElement;
-		this.#userWorkspaceContext?.updateProperty('userGroupUniques', target.selectedIds);
+		this.#userWorkspaceContext?.updateProperty('userGroupUniques', target.selection);
 	}
 
 	#onDocumentStartNodeChange(event: UmbChangeEvent) {
 		const target = event.target as UmbInputDocumentElement;
-		this.#userWorkspaceContext?.updateProperty('documentStartNodeUniques', target.selectedIds);
+		this.#userWorkspaceContext?.updateProperty('documentStartNodeUniques', target.selection);
 	}
 
 	#onMediaStartNodeChange(event: UmbChangeEvent) {
 		const target = event.target as UmbInputMediaElement;
-		this.#userWorkspaceContext?.updateProperty('mediaStartNodeUniques', target.selectedIds);
+		this.#userWorkspaceContext?.updateProperty('mediaStartNodeUniques', target.selection);
 	}
 
 	render() {
@@ -48,14 +48,14 @@ export class UmbUserWorkspaceAccessSettingsElement extends UmbLitElement {
 						description="${this.localize.term('user_groupsHelp')}">
 						<umb-user-group-input
 							slot="editor"
-							.selectedIds=${this._user?.userGroupUniques ?? []}
+							.selection=${this._user?.userGroupUniques ?? []}
 							@change=${this.#onUserGroupsChange}></umb-user-group-input>
 					</umb-property-layout>
 					<umb-property-layout
 						label=${this.localize.term('user_startnodes')}
 						description=${this.localize.term('user_startnodeshelp')}>
 						<umb-input-document
-							.selectedIds=${this._user?.documentStartNodeUniques ?? []}
+							.selection=${this._user?.documentStartNodeUniques ?? []}
 							@change=${this.#onDocumentStartNodeChange}
 							slot="editor"></umb-input-document>
 					</umb-property-layout>
@@ -63,7 +63,7 @@ export class UmbUserWorkspaceAccessSettingsElement extends UmbLitElement {
 						label=${this.localize.term('user_mediastartnodes')}
 						description=${this.localize.term('user_mediastartnodeshelp')}>
 						<umb-input-media
-							.selectedIds=${this._user?.mediaStartNodeUniques ?? []}
+							.selection=${this._user?.mediaStartNodeUniques ?? []}
 							@change=${this.#onMediaStartNodeChange}
 							slot="editor"></umb-input-media>
 					</umb-property-layout>