@umbraco-cms/backoffice 15.3.1 → 15.4.0-rc2

package/dist-cms/packages/block/block-rte/context/block-rte-entries.context.js

@@ -1,9 +1,13 @@
-import { UMB_BLOCK_CATALOGUE_MODAL, UmbBlockEntriesContext } from '../../block/index.js';
 import { UMB_BLOCK_RTE_WORKSPACE_MODAL, } from '../workspace/block-rte-workspace.modal-token.js';
 import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context-token.js';
+import { UMB_BLOCK_CATALOGUE_MODAL, UmbBlockEntriesContext } from '../../block/index.js';
 import { UmbBooleanState } from '../../../../libs/observable-api/index.js';
 import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
-import { UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS } from '../../../rte/index.js';
+/**
+ * Copied from the 'rte' package to avoid a circular dependency.
+ * @internal
+ */
+const UMB_BLOCK_RTE_PROPERTY_EDITOR_SCHEMA_ALIAS = 'Umbraco.RichText';
 export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext {
     constructor(host) {
         super(host, UMB_BLOCK_RTE_MANAGER_CONTEXT);

package/dist-cms/packages/block/block-rte/context/block-rte-manager.context.d.ts

@@ -1,7 +1,7 @@
 import type { UmbBlockRteWorkspaceOriginData } from '../workspace/block-rte-workspace.modal-token.js';
 import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel } from '../types.js';
 import type { UmbBlockDataModel } from '../../block/types.js';
-import { UmbBlockManagerContext, type UmbBlockDataObjectModel } from '../../block/index.js';
+import { UmbBlockManagerContext } from '../../block/index.js';
 import '../components/block-rte-entry/index.js';
 /**
  * A implementation of the Block Manager specifically for the Rich Text Editor.
@@ -10,9 +10,12 @@ export declare class UmbBlockRteManagerContext<BlockLayoutType extends UmbBlockR
     removeOneLayout(contentKey: string): void;
     removeManyLayouts(contentKeys: Array<string>): void;
     /**
+     * @param contentElementTypeKey
+     * @param partialLayoutEntry
+     * @param _originData
      * @deprecated Use createWithPresets instead. Will be removed in v.17.
      */
-    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, _originData?: UmbBlockRteWorkspaceOriginData): UmbBlockDataObjectModel<BlockLayoutType>;
+    create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, _originData?: UmbBlockRteWorkspaceOriginData): never;
     createWithPresets(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>, _originData?: UmbBlockRteWorkspaceOriginData): Promise<{
         layout: BlockLayoutType;
         content: {

package/dist-cms/packages/block/block-rte/context/block-rte-manager.context.js

@@ -11,6 +11,9 @@ export class UmbBlockRteManagerContext extends UmbBlockManagerContext {
         this._layouts.remove(contentKeys);
     }
     /**
+     * @param contentElementTypeKey
+     * @param partialLayoutEntry
+     * @param _originData
      * @deprecated Use createWithPresets instead. Will be removed in v.17.
      */
     create(
@@ -22,7 +25,6 @@ export class UmbBlockRteManagerContext extends UmbBlockManagerContext {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     _originData) {
         throw new Error('Method deparecated use createWithPresets');
-        return {};
     }
     async createWithPresets(contentElementTypeKey, partialLayoutEntry, 
     // This property is used by some implementations, but not used in this, do not remove. [NL]

package/dist-cms/packages/block/block-type/components/input-block-type/input-block-type.element.js

@@ -154,8 +154,8 @@ let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElem
 			div {
 				display: grid;
 				gap: var(--uui-size-space-3);
-				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-				grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
+				grid-template-columns: repeat(auto-fill, minmax(var(--umb-card-medium-min-width), 1fr));
+				grid-template-rows: repeat(auto-fill, minmax(var(--umb-card-medium-min-width), 1fr));
 			}
 
 			[drag-placeholder] {

package/dist-cms/packages/clipboard/constants.d.ts

@@ -1,4 +1,4 @@
 export * from './clipboard-entry/constants.js';
 export * from './clipboard-root/constants.js';
 export * from './collection/constants.js';
-export * from './property/context/constants.js';
+export * from './property/constants.js';

package/dist-cms/packages/clipboard/constants.js

@@ -1,4 +1,4 @@
 export * from './clipboard-entry/constants.js';
 export * from './clipboard-root/constants.js';
 export * from './collection/constants.js';
-export * from './property/context/constants.js';
+export * from './property/constants.js';

package/dist-cms/packages/clipboard/property/actions/constants.d.ts

@@ -0,0 +1 @@
+export * from './paste/constants.js';

package/dist-cms/packages/clipboard/property/actions/constants.js

@@ -0,0 +1 @@
+export * from './paste/constants.js';

package/dist-cms/packages/clipboard/property/actions/index.d.ts

@@ -0,0 +1 @@
+export * from './paste/index.js';

package/dist-cms/packages/clipboard/property/actions/index.js

@@ -0,0 +1 @@
+export * from './paste/index.js';

package/dist-cms/packages/clipboard/property/actions/paste/constants.d.ts

@@ -0,0 +1 @@
+export { UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST } from './manifests.js';

package/dist-cms/packages/clipboard/property/actions/paste/constants.js

@@ -0,0 +1 @@
+export { UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST } from './manifests.js';

package/dist-cms/packages/clipboard/property/actions/paste/index.d.ts

@@ -0,0 +1 @@
+export { UmbPasteFromClipboardPropertyAction } from './paste-from-clipboard.property-action.js';

package/dist-cms/packages/clipboard/property/actions/paste/index.js

@@ -0,0 +1 @@
+export { UmbPasteFromClipboardPropertyAction } from './paste-from-clipboard.property-action.js';

package/dist-cms/packages/clipboard/property/actions/paste/manifests.d.ts

@@ -1,2 +1,3 @@
 import type { UmbExtensionManifestKind } from '../../../../core/extension-registry/index.js';
+export declare const UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST: UmbExtensionManifestKind;
 export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/clipboard/property/actions/paste/manifests.js

@@ -1,20 +1,21 @@
 import { UMB_PROPERTY_ACTION_DEFAULT_KIND_MANIFEST } from '../../../../core/property-action/index.js';
-export const manifests = [
-    {
-        type: 'kind',
-        alias: 'Umb.Kind.PropertyAction.pasteFromClipboard',
-        matchKind: 'pasteFromClipboard',
-        matchType: 'propertyAction',
-        manifest: {
-            ...UMB_PROPERTY_ACTION_DEFAULT_KIND_MANIFEST.manifest,
-            type: 'propertyAction',
-            kind: 'pasteFromClipboard',
-            api: () => import('./paste-from-clipboard.property-action.js'),
-            weight: 1190,
-            meta: {
-                icon: 'icon-clipboard-paste',
-                label: 'Replace',
-            },
+export const UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST = {
+    type: 'kind',
+    alias: 'Umb.Kind.PropertyAction.pasteFromClipboard',
+    matchKind: 'pasteFromClipboard',
+    matchType: 'propertyAction',
+    manifest: {
+        ...UMB_PROPERTY_ACTION_DEFAULT_KIND_MANIFEST.manifest,
+        type: 'propertyAction',
+        kind: 'pasteFromClipboard',
+        api: () => import('./paste-from-clipboard.property-action.js'),
+        weight: 1190,
+        meta: {
+            icon: 'icon-clipboard-paste',
+            label: 'Replace',
         },
     },
+};
+export const manifests = [
+    UMB_PROPERTY_ACTION_PASTE_FROM_CLIPBOARD_KIND_MANIFEST,
 ];

package/dist-cms/packages/clipboard/property/actions/paste/paste-from-clipboard.property-action.d.ts

@@ -4,6 +4,7 @@ import { UmbPropertyActionBase, type UmbPropertyActionArgs } from '../../../../c
 export declare class UmbPasteFromClipboardPropertyAction extends UmbPropertyActionBase<MetaPropertyActionPasteFromClipboardKind> {
     #private;
     constructor(host: UmbControllerHost, args: UmbPropertyActionArgs<MetaPropertyActionPasteFromClipboardKind>);
+    protected _pickerFilter(value: any, config: any): Promise<boolean>;
     execute(): Promise<void>;
 }
 export { UmbPasteFromClipboardPropertyAction as api };

package/dist-cms/packages/clipboard/property/actions/paste/paste-from-clipboard.property-action.js

@@ -18,6 +18,10 @@ export class UmbPasteFromClipboardPropertyAction extends UmbPropertyActionBase {
             }).asPromise(),
         ]);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async _pickerFilter(value, config) {
+        return true;
+    }
     async execute() {
         await this.#init;
         if (!this.#clipboardContext)
@@ -31,6 +35,7 @@ export class UmbPasteFromClipboardPropertyAction extends UmbPropertyActionBase {
         const result = await this.#clipboardContext.pick({
             propertyEditorUiAlias: propertyEditorManifest.alias,
             multiple: false,
+            filter: this._pickerFilter,
         });
         const selectedUnique = result.selection[0];
         const propertyValue = result.propertyValues[0];

package/dist-cms/packages/clipboard/property/constants.d.ts

@@ -0,0 +1,2 @@
+export * from './actions/constants.js';
+export * from './context/constants.js';

package/dist-cms/packages/clipboard/property/constants.js

@@ -0,0 +1,2 @@
+export * from './actions/constants.js';
+export * from './context/constants.js';

package/dist-cms/packages/clipboard/property/context/clipboard.property-context.d.ts

@@ -46,11 +46,13 @@ export declare class UmbClipboardPropertyContext extends UmbContextBase<UmbClipb
      * @param args - Arguments for picking a clipboard entry
      * @param {boolean} args.multiple - Allow multiple clipboard entries to be picked
      * @param {string} args.propertyEditorUiAlias - The alias of the property editor to match
+     * @param {() => Promise<boolean>} args.filter - A filter function to filter clipboard entries
      * @returns { Promise<{ selection: Array<UmbEntityUnique>; propertyValues: Array<any> }> }
      */
     pick(args: {
         multiple: boolean;
         propertyEditorUiAlias: string;
+        filter?: (value: any, config: any) => Promise<boolean>;
     }): Promise<{
         selection: Array<UmbEntityUnique>;
         propertyValues: Array<any>;

package/dist-cms/packages/clipboard/property/context/clipboard.property-context.js

@@ -83,6 +83,7 @@ export class UmbClipboardPropertyContext extends UmbContextBase {
      * @param args - Arguments for picking a clipboard entry
      * @param {boolean} args.multiple - Allow multiple clipboard entries to be picked
      * @param {string} args.propertyEditorUiAlias - The alias of the property editor to match
+     * @param {() => Promise<boolean>} args.filter - A filter function to filter clipboard entries
      * @returns { Promise<{ selection: Array<UmbEntityUnique>; propertyValues: Array<any> }> }
      */
     async pick(args) {
@@ -100,8 +101,8 @@ export class UmbClipboardPropertyContext extends UmbContextBase {
                     }
                     const pasteTranslator = await valueResolver.getPasteTranslator(clipboardEntryDetail.values, propertyEditorUiManifest.alias);
                     if (pasteTranslator.isCompatibleValue) {
-                        const value = await valueResolver.resolve(clipboardEntryDetail.values, propertyEditorUiManifest.alias);
-                        return pasteTranslator.isCompatibleValue(value, config);
+                        const propertyValue = await valueResolver.resolve(clipboardEntryDetail.values, propertyEditorUiManifest.alias);
+                        return pasteTranslator.isCompatibleValue(propertyValue, config, args.filter);
                     }
                     return true;
                 },

package/dist-cms/packages/clipboard/property/index.d.ts

@@ -1 +1,2 @@
+export * from './actions/index.js';
 export * from './value-translator/index.js';

package/dist-cms/packages/clipboard/property/index.js

@@ -1 +1,2 @@
+export * from './actions/index.js';
 export * from './value-translator/index.js';

package/dist-cms/packages/clipboard/property/value-translator/paste/types.d.ts

@@ -1,6 +1,6 @@
 import type { UmbApi } from '../../../../../libs/extension-api/index.js';
 export type * from './clipboard-paste-translator.extension.js';
-export interface UmbClipboardPastePropertyValueTranslator<ClipboardEntryValueType = any, PropertyValueModelType = any, ConfigType = any> extends UmbApi {
-    translate: (value: ClipboardEntryValueType) => Promise<PropertyValueModelType>;
-    isCompatibleValue?: (value: ClipboardEntryValueType, config: ConfigType) => Promise<boolean>;
+export interface UmbClipboardPastePropertyValueTranslator<ClipboardEntryValueType = any, PropertyValueType = any, ConfigType = any> extends UmbApi {
+    translate: (clipboardEntryValue: ClipboardEntryValueType) => Promise<PropertyValueType>;
+    isCompatibleValue?: (propertyValue: PropertyValueType, config: ConfigType, filter?: (propertyValue: PropertyValueType, config: ConfigType) => Promise<boolean>) => Promise<boolean>;
 }

package/dist-cms/packages/code-editor/property-editor/property-editor-ui-code-editor.element.js

@@ -5,9 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, customElement, html, property, state, styleMap } from '../../../external/lit/index.js';
-import { UmbInputEvent } from '../../core/event/index.js';
+import { UmbChangeEvent, UmbInputEvent } from '../../core/event/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
-import { UmbPropertyValueChangeEvent } from '../../core/property-editor/index.js';
 import '../components/code-editor.element.js';
 const elementName = 'umb-property-editor-ui-code-editor';
 let UmbPropertyEditorUICodeEditorElement = class UmbPropertyEditorUICodeEditorElement extends UmbLitElement {
@@ -35,7 +34,7 @@ let UmbPropertyEditorUICodeEditorElement = class UmbPropertyEditorUICodeEditorEl
         if (!(event instanceof UmbInputEvent))
             return;
         this.value = event.target.code;
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `

package/dist-cms/packages/core/collection/collection-view.manager.js

@@ -69,6 +69,7 @@ export class UmbCollectionViewManager extends UmbControllerBase {
             });
             if (routes.length > 0) {
                 routes.push({
+                    unique: fallbackView.alias,
                     path: '',
                     component: () => createExtensionElement(fallbackView),
                     setup: () => {

package/dist-cms/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.js

@@ -39,8 +39,11 @@ let UmbBackofficeModalContainerElement = class UmbBackofficeModalContainerElemen
         const oldModals = oldValue.filter((oldModal) => !modals.some((modal) => modal.key === oldModal.key));
         oldModals.forEach((modal) => {
             // TODO: I would not think this works as expected, the callback method has to be the exact same instance as the one added: [NL]
-            this._modalElementMap.get(modal.key)?.removeEventListener('close-end', this.#onCloseEnd.bind(this, modal.key));
+            const modalElement = this._modalElementMap.get(modal.key);
+            modalElement?.removeEventListener('close-end', this.#onCloseEnd.bind(this, modal.key));
+            modalElement?.destroy();
             this._modalElementMap.delete(modal.key);
+            modal.destroy();
         });
         if (this._modals.length === 0) {
             //this._modalElementMap.clear(); // should not make a difference now that we clean it above. [NL]

package/dist-cms/packages/core/components/input-color/input-color.element.d.ts

@@ -1,6 +1,6 @@
 import { UmbLitElement } from '../../lit-element/index.js';
 import type { UmbSwatchDetails } from '../../models/index.js';
-declare const UmbInputColorElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbInputColorElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputColorElement extends UmbInputColorElement_base {
     #private;
     protected getFormElement(): undefined;

package/dist-cms/packages/core/components/input-date/input-date.element.d.ts

@@ -16,6 +16,7 @@ export declare class UmbInputDateElement extends UUIInputElement {
     set type(type: InputDateType);
     get type(): InputDateType;
     constructor();
+    static styles: import("lit").CSSResult[];
 }
 export default UmbInputDateElement;
 declare global {

package/dist-cms/packages/core/components/input-date/input-date.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement } from '../../../../external/lit/index.js';
+import { customElement, css } from '../../../../external/lit/index.js';
 import { UUIInputElement } from '../../../../external/uui/index.js';
 /**
  * This element passes a datetime string to a regular HTML input element.
@@ -29,6 +29,15 @@ let UmbInputDateElement = class UmbInputDateElement extends UUIInputElement {
         super();
         this.type = 'date'; // Default to 'date'
     }
+    // Adding styles override to add a darkmode version.
+    static { this.styles = [
+        ...UUIInputElement.styles,
+        css `
+			input {
+				color-scheme: var(--uui-color-scheme, normal);
+			}
+		`,
+    ]; }
 };
 UmbInputDateElement = __decorate([
     customElement('umb-input-date')

package/dist-cms/packages/core/components/input-dropdown/input-dropdown-list.element.d.ts

@@ -1,10 +1,18 @@
 import { UmbLitElement } from '../../lit-element/index.js';
-declare const UmbInputDropdownListElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue | undefined>) & typeof UmbLitElement;
+declare const UmbInputDropdownListElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputDropdownListElement extends UmbInputDropdownListElement_base {
     #private;
-    options?: Array<Option>;
+    set options(value: Array<Option> | undefined);
+    get options(): Array<Option> | undefined;
     placeholder?: string;
     multiple?: boolean;
+    name?: string;
+    /**
+     * Sets the input to required, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    required?: boolean;
+    requiredMessage?: string;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
      * @type {boolean}
@@ -12,8 +20,8 @@ export declare class UmbInputDropdownListElement extends UmbInputDropdownListEle
      * @default false
      */
     readonly: boolean;
-    private selectEle;
-    protected getFormElement(): HTMLInputElement;
+    constructor();
+    protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/core/components/input-dropdown/input-dropdown-list.element.js

@@ -4,13 +4,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, customElement, property, query } from '../../../../external/lit/index.js';
-import { UUIFormControlMixin } from '../../../../external/uui/index.js';
+import { css, customElement, html, property } from '../../../../external/lit/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
-let UmbInputDropdownListElement = class UmbInputDropdownListElement extends UUIFormControlMixin(UmbLitElement, undefined) {
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../validation/index.js';
+let UmbInputDropdownListElement = class UmbInputDropdownListElement extends UmbFormControlMixin(UmbLitElement, undefined) {
+    set options(value) {
+        this.#options = value;
+        this.value =
+            value
+                ?.filter((option) => option.selected)
+                .map((option) => option.value)
+                .join(', ') ?? undefined;
+    }
+    get options() {
+        return this.#options;
+    }
+    #options;
     constructor() {
-        super(...arguments);
+        super();
+        this.name = 'Dropdown';
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
          * @type {boolean}
@@ -18,23 +31,26 @@ let UmbInputDropdownListElement = class UmbInputDropdownListElement extends UUIF
          * @default false
          */
         this.readonly = false;
+        this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !this.readonly && !!this.required && (this.value === undefined || this.value === null || this.value === ''));
     }
-    getFormElement() {
-        return this.selectEle;
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('uui-select'));
     }
     #onChange(e) {
         e.stopPropagation();
-        if (e.target.value)
-            this.value = e.target.value;
+        this.value = e.target.value?.toString() ?? undefined;
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
-        return html `<uui-select
-			label=${this.localize.term('formProviderFieldTypes_dropdownName')}
-			.placeholder=${this.placeholder ?? ''}
-			.options=${this.options ?? []}
-			@change=${this.#onChange}
-			?readonly=${this.readonly}></uui-select>`;
+        return html `
+			<uui-select
+				label=${this.localize.term(this.localize.term('general_fieldFor', [this.name]))}
+				.placeholder=${this.placeholder ?? ''}
+				.options=${this.options ?? []}
+				@change=${this.#onChange}
+				?readonly=${this.readonly}>
+			</uui-select>
+		`;
     }
     static { this.styles = [
         css `
@@ -46,19 +62,25 @@ let UmbInputDropdownListElement = class UmbInputDropdownListElement extends UUIF
 };
 __decorate([
     property({ type: Array })
-], UmbInputDropdownListElement.prototype, "options", void 0);
+], UmbInputDropdownListElement.prototype, "options", null);
 __decorate([
     property({ type: String })
 ], UmbInputDropdownListElement.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean })
 ], UmbInputDropdownListElement.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputDropdownListElement.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputDropdownListElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputDropdownListElement.prototype, "requiredMessage", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputDropdownListElement.prototype, "readonly", void 0);
-__decorate([
-    query('uui-select')
-], UmbInputDropdownListElement.prototype, "selectEle", void 0);
 UmbInputDropdownListElement = __decorate([
     customElement('umb-input-dropdown-list')
 ], UmbInputDropdownListElement);

package/dist-cms/packages/core/components/input-eye-dropper/input-eye-dropper.element.d.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '../../lit-element/index.js';
-declare const UmbInputEyeDropperElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbInputEyeDropperElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputEyeDropperElement extends UmbInputEyeDropperElement_base {
     #private;
     protected getFormElement(): undefined;

package/dist-cms/packages/core/components/input-number-range/input-number-range.element.d.ts

@@ -1,6 +1,6 @@
 import { UmbLitElement } from '../../lit-element/index.js';
 import type { UmbNumberRangeValueType } from '../../models/index.js';
-declare const UmbInputNumberRangeElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<FormData | FormDataEntryValue | undefined>> & typeof UmbLitElement;
+declare const UmbInputNumberRangeElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<FormDataEntryValue | FormData | undefined>> & typeof UmbLitElement;
 export declare class UmbInputNumberRangeElement extends UmbInputNumberRangeElement_base {
     #private;
     minLabel: string;

package/dist-cms/packages/core/components/input-number-range/input-number-range.element.js

@@ -100,10 +100,10 @@ let UmbInputNumberRangeElement = class UmbInputNumberRangeElement extends UmbFor
     }
     static { this.styles = css `
 		:host(:invalid:not([pristine])) {
-			color: var(--uui-color-danger);
+			color: var(--uui-color-invalid);
 		}
 		:host(:invalid:not([pristine])) uui-input {
-			border-color: var(--uui-color-danger);
+			border-color: var(--uui-color-invalid);
 		}
 	`; }
 };

package/dist-cms/packages/core/components/input-radio-button-list/input-radio-button-list.element.d.ts

@@ -5,7 +5,7 @@ export type UmbRadioButtonItem = {
     value: string;
     invalid?: boolean;
 };
-declare const UmbInputRadioButtonListElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbInputRadioButtonListElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputRadioButtonListElement extends UmbInputRadioButtonListElement_base {
     #private;
     set value(value: string);
@@ -18,7 +18,13 @@ export declare class UmbInputRadioButtonListElement extends UmbInputRadioButtonL
      * @default false
      */
     readonly: boolean;
-    protected getFormElement(): undefined;
+    /**
+     * Sets the input to required, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    required?: boolean;
+    requiredMessage?: string;
+    constructor();
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/core/components/input-radio-button-list/input-radio-button-list.element.js

@@ -5,12 +5,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, nothing, repeat, customElement, property, classMap } from '../../../../external/lit/index.js';
-import { UUIFormControlMixin, UUIRadioElement } from '../../../../external/uui/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
-let UmbInputRadioButtonListElement = class UmbInputRadioButtonListElement extends UUIFormControlMixin(UmbLitElement, '') {
+import { UUIRadioElement } from '../../../../external/uui/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../validation/index.js';
+let UmbInputRadioButtonListElement = class UmbInputRadioButtonListElement extends UmbFormControlMixin(UmbLitElement, undefined) {
+    set value(value) {
+        this.#value = value;
+    }
+    get value() {
+        return this.#value;
+    }
+    #value;
     constructor() {
-        super(...arguments);
+        super();
         this.#value = '';
         this.list = [];
         /**
@@ -20,16 +28,7 @@ let UmbInputRadioButtonListElement = class UmbInputRadioButtonListElement extend
          * @default false
          */
         this.readonly = false;
-    }
-    #value;
-    set value(value) {
-        this.#value = value;
-    }
-    get value() {
-        return this.#value;
-    }
-    getFormElement() {
-        return undefined;
+        this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !this.readonly && !!this.required && (this.value === undefined || this.value === null || this.value === ''));
     }
     #onChange(event) {
         event.stopPropagation();
@@ -48,11 +47,13 @@ let UmbInputRadioButtonListElement = class UmbInputRadioButtonListElement extend
 		`;
     }
     #renderRadioButton(item) {
-        return html `<uui-radio
-			value=${item.value}
-			class=${classMap({ invalid: !!item.invalid })}
-			label=${item.label + (item.invalid ? ` (${this.localize.term('validation_legacyOption')})` : '')}
-			title=${item.invalid ? this.localize.term('validation_legacyOptionDescription') : ''}></uui-radio>`;
+        return html `
+			<uui-radio
+				value=${item.value}
+				class=${classMap({ invalid: !!item.invalid })}
+				label=${item.label + (item.invalid ? ` (${this.localize.term('validation_legacyOption')})` : '')}
+				title=${item.invalid ? this.localize.term('validation_legacyOptionDescription') : ''}></uui-radio>
+		`;
     }
     static { this.styles = [
         css `
@@ -77,6 +78,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputRadioButtonListElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputRadioButtonListElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputRadioButtonListElement.prototype, "requiredMessage", void 0);
 UmbInputRadioButtonListElement = __decorate([
     customElement('umb-input-radio-button-list')
 ], UmbInputRadioButtonListElement);

package/dist-cms/packages/core/components/input-slider/input-slider.element.d.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '../../lit-element/index.js';
-declare const UmbInputSliderElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
+declare const UmbInputSliderElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbInputSliderElement extends UmbInputSliderElement_base {
     #private;
     label: string;

package/dist-cms/packages/core/components/input-toggle/input-toggle.element.d.ts

@@ -1,5 +1,5 @@
 import { UmbLitElement } from '../../lit-element/index.js';
-declare const UmbInputToggleElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<FormData | FormDataEntryValue>> & typeof UmbLitElement;
+declare const UmbInputToggleElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<FormDataEntryValue | FormData>> & typeof UmbLitElement;
 export declare class UmbInputToggleElement extends UmbInputToggleElement_base {
     #private;
     /**