@umbraco-cms/backoffice 17.1.0 → 17.2.0-rc2

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

@@ -1,10 +1,11 @@
 import { UMB_BLOCK_RTE_MANAGER_CONTEXT } from './block-rte-manager.context-token.js';
 import { UMB_BLOCK_RTE_ENTRIES_CONTEXT } from './block-rte-entries.context-token.js';
 import { UmbBlockEntryContext } from '../../block/index.js';
-import { mergeObservables, observeMultiple } from '../../../../libs/observable-api/index.js';
+import { mergeObservables } from '../../../../libs/observable-api/index.js';
 export class UmbBlockRteEntryContext extends UmbBlockEntryContext {
     constructor(host) {
         super(host, UMB_BLOCK_RTE_MANAGER_CONTEXT, UMB_BLOCK_RTE_ENTRIES_CONTEXT);
+        /** @deprecated Use `displayInlineConfig` instead. This field will be removed in Umbraco 19. [LK] */
         this.displayInline = this._layout.asObservablePart((x) => (x ? (x.displayInline ?? false) : undefined));
         this.displayInlineConfig = this._blockType.asObservablePart((x) => (x ? (x.displayInline ?? false) : undefined));
         this.forceHideContentEditorInOverlay = this._blockType.asObservablePart((x) => x ? (x.forceHideContentEditorInOverlay ?? false) : undefined);
@@ -13,19 +14,6 @@ export class UmbBlockRteEntryContext extends UmbBlockEntryContext {
         });
     }
     _gotManager() { }
-    _gotEntries() {
-        // Secure displayInline fits configuration:
-        this.observe(observeMultiple([this.displayInline, this.displayInlineConfig]), ([displayInline, displayInlineConfig]) => {
-            if (displayInlineConfig !== undefined && displayInline !== undefined && displayInlineConfig !== displayInline) {
-                const layoutValue = this._layout.getValue();
-                if (!layoutValue)
-                    return;
-                this._layout.setValue({
-                    ...layoutValue,
-                    displayInline: displayInlineConfig,
-                });
-            }
-        }, 'displayInlineCorrection');
-    }
+    _gotEntries() { }
     _gotContentType() { }
 }

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

@@ -24,9 +24,6 @@ export class UmbBlockRteManagerContext extends UmbBlockManagerContext {
         if (!blockType) {
             throw new Error(`Cannot create block, missing block type for ${contentElementTypeKey}`);
         }
-        if (blockType.displayInline) {
-            data.layout.displayInline = true;
-        }
         return data;
     }
     insert(layoutEntry, content, settings, originData) {

package/dist-cms/packages/block/block-rte/types.d.ts

@@ -4,6 +4,7 @@ export interface UmbBlockRteTypeModel extends UmbBlockTypeBaseModel {
     displayInline: boolean;
 }
 export interface UmbBlockRteLayoutModel extends UmbBlockLayoutBaseModel {
+    /** @deprecated Use `displayInline` on `UmbBlockRteTypeModel` instead. This field will be removed in Umbraco 19. [LK] */
     displayInline?: boolean;
 }
 export interface UmbBlockRteValueModel extends UmbBlockValueType<UmbBlockRteLayoutModel> {

package/dist-cms/packages/block/block-single/property-editors/block-single-editor/manifests.js

@@ -5,10 +5,10 @@ export const manifests = [
     {
         type: 'propertyEditorUi',
         alias: 'Umb.PropertyEditorUi.BlockSingle',
-        name: 'Block Single Property Editor UI',
+        name: 'Single Block Property Editor UI',
         element: () => import('./property-editor-ui-block-single.element.js'),
         meta: {
-            label: 'Block Single',
+            label: 'Single Block',
             propertyEditorSchemaAlias: UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS,
             icon: 'icon-shape-square',
             group: 'richContent',

package/dist-cms/packages/block/block-single/property-editors/block-single-editor/property-editor-ui-block-single.element.js

@@ -180,7 +180,12 @@ let UmbPropertyEditorUIBlockSingleElement = class UmbPropertyEditorUIBlockSingle
             }, 'observeContextualVariantId');
         });
         this.addValidator('rangeOverflow', () => this.localize.term('validation_entriesExceed', 1, this.#entriesContext.getLength() - 1), () => this.#entriesContext.getLength() > 1);
-        this.addValidator('valueMissing', () => this.mandatoryMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !!this.mandatory && this.#entriesContext.getLength() === 0);
+        this.addValidator('valueMissing', () => this.mandatoryMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => {
+            if (!this.mandatory || this.readonly)
+                return false;
+            const count = this.value?.layout?.[UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS]?.length ?? 0;
+            return count === 0;
+        });
         this.observe(this.#entriesContext.layoutEntries, (layouts) => {
             this._layouts = layouts;
             // Update sorter.

package/dist-cms/packages/clipboard/clipboard-entry/detail/manifests.js

@@ -1,6 +1,7 @@
 import { UMB_CLIPBOARD_ENTRY_ENTITY_TYPE } from '../entity.js';
 import { UMB_CLIPBOARD_ENTRY_ITEM_REPOSITORY_ALIAS } from '../item/index.js';
 import { UMB_CLIPBOARD_ENTRY_DETAIL_REPOSITORY_ALIAS, UMB_CLIPBOARD_ENTRY_DETAIL_STORE_ALIAS } from './constants.js';
+import { UmbClipboardEntryDetailStore } from './clipboard-entry-detail.store.js';
 export const manifests = [
     {
         type: 'repository',
@@ -12,7 +13,7 @@ export const manifests = [
         type: 'store',
         alias: UMB_CLIPBOARD_ENTRY_DETAIL_STORE_ALIAS,
         name: 'Clipboard Detail Store',
-        api: () => import('./clipboard-entry-detail.store.js'),
+        api: UmbClipboardEntryDetailStore,
     },
     {
         type: 'entityAction',

package/dist-cms/packages/clipboard/clipboard-entry/item/manifests.js

@@ -1,4 +1,5 @@
 import { UMB_CLIPBOARD_ENTRY_ITEM_REPOSITORY_ALIAS, UMB_CLIPBOARD_ENTRY_ITEM_STORE_ALIAS } from './constants.js';
+import { UmbClipboardEntryItemStore } from './clipboard-entry-item.store.js';
 export const manifests = [
     {
         type: 'repository',
@@ -10,6 +11,6 @@ export const manifests = [
         type: 'itemStore',
         alias: UMB_CLIPBOARD_ENTRY_ITEM_STORE_ALIAS,
         name: 'Clipboard Entry Item Store',
-        api: () => import('./clipboard-entry-item.store.js'),
+        api: UmbClipboardEntryItemStore,
     },
 ];

package/dist-cms/packages/content/content/collection/workspace-has-content-collection/manifests.js

@@ -1,9 +1,10 @@
 import { UMB_WORKSPACE_HAS_CONTENT_COLLECTION_CONDITION_ALIAS } from './constants.js';
+import { UmbWorkspaceHasContentCollectionCondition } from './workspace-has-content-collection.condition.js';
 export const manifests = [
     {
         type: 'condition',
         name: 'Workspace Has Collection Condition',
         alias: UMB_WORKSPACE_HAS_CONTENT_COLLECTION_CONDITION_ALIAS,
-        api: () => import('./workspace-has-content-collection.condition.js'),
+        api: UmbWorkspaceHasContentCollectionCondition,
     },
 ];

package/dist-cms/packages/content/content/conditions/has-properties/content-has-properties.condition.manifest.js

@@ -1,6 +1,7 @@
+import { UmbContentHasPropertiesWorkspaceCondition } from './content-has-properties.condition.js';
 export const manifest = {
     type: 'condition',
     name: 'Content has properties Workspace Condition',
     alias: 'Umb.Condition.Workspace.ContentHasProperties',
-    api: () => import('./content-has-properties.condition.js'),
+    api: UmbContentHasPropertiesWorkspaceCondition,
 };

package/dist-cms/packages/content/content/global-components/content-workspace-property.element.js

@@ -7,8 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../constants.js';
 import { html, customElement, property, state, nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../core/property/index.js';
-import { UmbVariantId } from '../../../core/variant/index.js';
+import { UMB_VARIANT_CONTEXT, UmbVariantId } from '../../../core/variant/index.js';
 import { UmbDataPathPropertyValueQuery } from '../../../core/validation/index.js';
 import { UMB_CURRENT_USER_CONTEXT } from '../../../user/current-user/index.js';
 let UmbContentWorkspacePropertyElement = class UmbContentWorkspacePropertyElement extends UmbLitElement {
@@ -23,8 +22,10 @@ let UmbContentWorkspacePropertyElement = class UmbContentWorkspacePropertyElemen
         super();
         this._hasAccessToSensitiveData = false;
         // The Property Dataset is local to the active variant, we use this to retrieve the variant we like to gather the value from.
-        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
-            this._datasetVariantId = datasetContext?.getVariantId();
+        this.consumeContext(UMB_VARIANT_CONTEXT, async (variantContext) => {
+            this.observe(variantContext?.variantId, (variantId) => {
+                this._datasetVariantId = variantId;
+            }, 'observeDatasetVariantId');
         });
         // The Content Workspace Context is used to retrieve the property type we like to observe.
         // This gives us the configuration from the property type as part of the data type.
@@ -43,16 +44,7 @@ let UmbContentWorkspacePropertyElement = class UmbContentWorkspacePropertyElemen
             return;
         this.observe(await this._workspaceContext?.structure.propertyStructureByAlias(this._alias), (propertyType) => {
             this._propertyType = propertyType;
-            this.#checkViewGuard();
-        });
-    }
-    #checkViewGuard() {
-        if (!this._workspaceContext || !this._propertyType || !this._datasetVariantId)
-            return;
-        const propertyVariantId = new UmbVariantId(this._propertyType.variesByCulture ? this._datasetVariantId.culture : null, this._propertyType.variesBySegment ? this._datasetVariantId.segment : null);
-        this.observe(this._workspaceContext.propertyViewGuard.isPermittedForVariantAndProperty(propertyVariantId, this._propertyType, this._datasetVariantId), (permitted) => {
-            this._viewable = permitted;
-        }, `umbObservePropertyViewGuard`);
+        }, 'observePropertyType');
     }
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
@@ -68,7 +60,10 @@ let UmbContentWorkspacePropertyElement = class UmbContentWorkspacePropertyElemen
                 })}].value`;
                 this.observe(this._workspaceContext.propertyWriteGuard.isPermittedForVariantAndProperty(propertyVariantId, this._propertyType, this._datasetVariantId), (write) => {
                     this._writeable = write;
-                }, 'observeView');
+                }, 'umbObservePropertyWriteGuard');
+                this.observe(this._workspaceContext.propertyViewGuard.isPermittedForVariantAndProperty(propertyVariantId, this._propertyType, this._datasetVariantId), (permitted) => {
+                    this._viewable = permitted;
+                }, `umbObservePropertyViewGuard`);
             }
         }
     }

package/dist-cms/packages/content/content/workspace/content-detail-workspace-base.d.ts

@@ -91,7 +91,7 @@ export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelTy
     protected _processIncomingData(data: DetailModelType): Promise<DetailModelType>;
     /**
      * Get the name of a variant
-     * @param {UmbVariantId } [variantId] - The variant id
+     * @param {UmbVariantId } [variantId] - The variant id. If not provided, returns the name of the first active variant.
      * @returns { string | undefined} - The name of the variant
      * @memberof UmbContentDetailWorkspaceContextBase
      */
@@ -105,7 +105,7 @@ export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelTy
     setName(name: string, variantId?: UmbVariantId): void;
     /**
      * Get an observable for the name of a variant
-     * @param {UmbVariantId} [variantId] - The variant id
+     * @param {UmbVariantId} [variantId] - The variant id. If not provided, observes the name of the first active variant.
      * @returns {Observable<string>} - The name of the variant
      * @memberof UmbContentDetailWorkspaceContextBase
      */

package/dist-cms/packages/content/content/workspace/content-detail-workspace-base.js

@@ -269,12 +269,6 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         else {
             this._segments.setValue([]);
         }
-        // Set culture and segment for all values:
-        const cultures = this.#languages.getValue().map((x) => x.unique);
-        let segments;
-        if (this.#variesBySegment) {
-            segments = this._segments.getValue().map((s) => s.alias);
-        }
         const repo = new UmbDataTypeDetailRepository(this);
         const propertyTypes = await this.structure.getContentTypeProperties();
         const contentTypeVariesByCulture = this.structure.getVariesByCulture();
@@ -301,10 +295,11 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
             };
         }));
         const controller = new UmbPropertyValuePresetVariantBuilderController(this);
-        controller.setCultures(cultures);
-        if (segments) {
-            controller.setSegments(segments);
+        const variantOptions = (await firstValueFrom(this.variantOptions)).map((o) => new UmbVariantId(o.culture, o.segment));
+        if (contentTypeVariesByCulture) {
+            variantOptions.push(UmbVariantId.CreateInvariant()); // Ensure invariant is included, when the contentType varies by culture, because we do not have a invariant-variant in our variant-options. [NL]
         }
+        controller.setVariantOptions(variantOptions);
         controller.setValues(data.values);
         const processedValues = await controller.create(valueDefinitions, {
             entityType: this.getEntityType(),
@@ -334,7 +329,7 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
     }
     /**
      * Get the name of a variant
-     * @param {UmbVariantId } [variantId] - The variant id
+     * @param {UmbVariantId } [variantId] - The variant id. If not provided, returns the name of the first active variant.
      * @returns { string | undefined} - The name of the variant
      * @memberof UmbContentDetailWorkspaceContextBase
      */
@@ -345,9 +340,14 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         if (variantId) {
             return variants.find((x) => variantId.compare(x))?.name;
         }
-        else {
-            return variants[0]?.name;
+        // Get the first active variant's name
+        const activeVariant = this.splitView.getActiveVariants()[0];
+        if (activeVariant) {
+            const activeVariantId = UmbVariantId.Create(activeVariant);
+            return variants.find((x) => activeVariantId.compare(x))?.name;
         }
+        // Fallback to first variant if no active variant is set
+        return variants[0]?.name;
     }
     /**
      * Set the name of a variant
@@ -360,12 +360,22 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
     }
     /**
      * Get an observable for the name of a variant
-     * @param {UmbVariantId} [variantId] - The variant id
+     * @param {UmbVariantId} [variantId] - The variant id. If not provided, observes the name of the first active variant.
      * @returns {Observable<string>} - The name of the variant
      * @memberof UmbContentDetailWorkspaceContextBase
      */
     name(variantId) {
-        return this._data.createObservablePartOfCurrent((data) => data?.variants?.find((x) => variantId?.compare(x))?.name ?? '');
+        if (variantId) {
+            // Explicit variant requested
+            return this._data.createObservablePartOfCurrent((data) => data?.variants?.find((x) => variantId.compare(x))?.name ?? '');
+        }
+        // No variant specified - observe first active variant's name
+        return mergeObservables([this.splitView.activeVariantByIndex(0), this.variants], ([activeVariant, variants]) => {
+            if (!activeVariant || !variants)
+                return '';
+            const activeVariantId = UmbVariantId.Create(activeVariant);
+            return variants.find((x) => activeVariantId.compare(x))?.name ?? '';
+        });
     }
     /* Variants */
     /**

package/dist-cms/packages/content/content/workspace/content-detail-workspace-type-transform.controller.js

@@ -27,17 +27,9 @@ export class UmbContentDetailWorkspaceTypeTransformController extends UmbControl
             return;
         }
         const defaultLanguage = this.#getDefaultLanguage();
-        // To spare a bit of energy we keep awareness of whether this brings any changes:
-        let hasChanges = false;
-        const values = currentData.values.map((v) => {
-            const transformation = this.#transformValueForVariationChange(v, oldPropertyTypes, newPropertyTypes, defaultLanguage);
-            if (transformation.changed) {
-                hasChanges = true;
-            }
-            return transformation.value;
-        });
-        if (hasChanges) {
-            this.#workspace.setData({ ...currentData, values });
+        const result = this.#transformValuesForVariationChanges(currentData.values, oldPropertyTypes, newPropertyTypes, defaultLanguage);
+        if (result.hasChanges) {
+            this.#workspace.setData({ ...currentData, values: result.values });
         }
     }
     #getDefaultLanguage() {
@@ -48,25 +40,77 @@ export class UmbContentDetailWorkspaceTypeTransformController extends UmbControl
         }
         return defaultLanguage;
     }
-    #transformValueForVariationChange(value, oldPropertyTypes, newPropertyTypes, defaultLanguage) {
-        const oldType = oldPropertyTypes.find((p) => p.alias === value.alias);
-        const newType = newPropertyTypes.find((p) => p.alias === value.alias);
-        // If we cant find both, we do not dare changing anything. Notice a composition may not have been loaded yet.
-        if (!oldType || !newType) {
-            return { value, changed: false };
-        }
-        // If variation hasn't changed, return unchanged
-        if (oldType.variesByCulture === newType.variesByCulture) {
-            return { value, changed: false };
+    /**
+     * Transforms all values based on property variation changes.
+     * Handles both invariant→variant and variant→invariant transitions, including cleanup of duplicate values.
+     * When transitioning to invariant, keeps all segment values for the chosen culture (default language preferred).
+     * @param {Array<UmbContentValueModel>} values - All content values
+     * @param {Array<UmbPropertyTypeModel>} oldPropertyTypes - Previous property type definitions
+     * @param {Array<UmbPropertyTypeModel>} newPropertyTypes - New property type definitions
+     * @param {string} defaultLanguage - The default language code
+     * @returns {{ values: Array<UmbContentValueModel>; hasChanges: boolean }} Transformed values and change flag
+     */
+    #transformValuesForVariationChanges(values, oldPropertyTypes, newPropertyTypes, defaultLanguage) {
+        // Group values by property alias for efficient processing
+        const valuesByAlias = new Map();
+        for (const value of values) {
+            const existing = valuesByAlias.get(value.alias) ?? [];
+            existing.push(value);
+            valuesByAlias.set(value.alias, existing);
         }
-        // Variation has changed, migrate the value
-        if (newType.variesByCulture) {
-            // If it now varies by culture, set to default language
-            return { value: { ...value, culture: defaultLanguage }, changed: true };
-        }
-        else {
-            // If it no longer varies by culture, set to invariant
-            return { value: { ...value, culture: null }, changed: true };
+        const result = [];
+        let hasChanges = false;
+        for (const [alias, valuesOfAlias] of valuesByAlias) {
+            const oldType = oldPropertyTypes.find((p) => p.alias === alias);
+            const newType = newPropertyTypes.find((p) => p.alias === alias);
+            // If we can't find both types, keep values unchanged (composition may not have been loaded yet)
+            if (!oldType || !newType) {
+                result.push(...valuesOfAlias);
+                continue;
+            }
+            // No variation change - keep all values as-is
+            if (oldType.variesByCulture === newType.variesByCulture) {
+                result.push(...valuesOfAlias);
+                continue;
+            }
+            hasChanges = true;
+            if (newType.variesByCulture) {
+                // Invariant → Variant: keep existing culture values, only migrate invariant values if no value exists for that culture+segment
+                for (const value of valuesOfAlias) {
+                    if (value.culture !== null) {
+                        // Keep existing culture values as-is
+                        result.push(value);
+                    }
+                    else {
+                        // Invariant value: only migrate if no value exists for default language + same segment
+                        const existingCultureValue = valuesOfAlias.find((v) => v.culture === defaultLanguage && v.segment === value.segment);
+                        if (!existingCultureValue) {
+                            result.push({ ...value, culture: defaultLanguage });
+                        }
+                    }
+                }
+            }
+            else {
+                // Variant → Invariant: keep existing invariant values, only migrate culture values if no invariant value exists for that segment
+                const cultureToKeep = valuesOfAlias.some((v) => v.culture === defaultLanguage)
+                    ? defaultLanguage
+                    : valuesOfAlias[0]?.culture;
+                for (const value of valuesOfAlias) {
+                    if (value.culture === null) {
+                        // Keep existing invariant values as-is
+                        result.push(value);
+                    }
+                    else if (value.culture === cultureToKeep) {
+                        // Culture value: only migrate if no invariant value exists for the same segment
+                        const existingInvariantValue = valuesOfAlias.find((v) => v.culture === null && v.segment === value.segment);
+                        if (!existingInvariantValue) {
+                            result.push({ ...value, culture: null });
+                        }
+                    }
+                    // Discard values from other cultures
+                }
+            }
         }
+        return { values: result, hasChanges };
     }
 }

package/dist-cms/packages/content/content/workspace/views/edit/content-editor.element.d.ts

@@ -3,6 +3,7 @@ import type { UmbWorkspaceViewElement } from '../../../../../core/workspace/inde
 import './content-editor-tab.element.js';
 export declare class UmbContentWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
     #private;
+    private _hasRootProperties;
     private _loaded;
     private _hasRootGroups;
     private _routes;

package/dist-cms/packages/content/content/workspace/views/edit/content-editor.element.js

@@ -12,16 +12,12 @@ import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { UMB_VIEW_CONTEXT, UmbViewController } from '../../../../../core/view/index.js';
 import './content-editor-tab.element.js';
 let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElement extends UmbLitElement {
-    /*
-    // root properties is a possible feature with Bellissima, but as it is new its not fully implemented yet [NL]
-    @state()
-    private _hasRootProperties = false;
-  */
     #viewContext;
     #tabViewContexts;
     #structureManager;
     constructor() {
         super();
+        this._hasRootProperties = false;
         this._loaded = false;
         this._hasRootGroups = false;
         this._routes = [];
@@ -41,7 +37,10 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
             this._tabs = tabs;
             this.#createRoutes();
         }, null);
-        // _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
+        this.observe(this._tabsStructureHelper.hasProperties, (hasRootProperties) => {
+            this._hasRootProperties = hasRootProperties;
+            this.#createRoutes();
+        }, 'observeRootProperties');
         this.consumeContext(UMB_PROPERTY_STRUCTURE_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#structureManager = workspaceContext?.structure;
             this._tabsStructureHelper.setStructureManager(workspaceContext?.structure);
@@ -63,7 +62,7 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
         if (!this._tabs || !this.#structureManager)
             return;
         const routes = [];
-        if (this._hasRootGroups) {
+        if (this._hasRootGroups || this._hasRootProperties) {
             routes.push({
                 path: 'root',
                 component: () => import('./content-editor-tab.element.js'),
@@ -147,9 +146,12 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
         }
         return html `
 			<umb-body-layout header-fit-height>
-				${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups))
+				${this._routerPath &&
+            (this._tabs.length > 1 || (this._tabs.length === 1 && (this._hasRootGroups || this._hasRootProperties)))
             ? html ` <uui-tab-group slot="header">
-							${this._hasRootGroups && this._tabs.length > 0 ? this.#renderTab(null, '#general_generic') : nothing}
+							${(this._hasRootGroups || this._hasRootProperties) && this._tabs.length > 0
+                ? this.#renderTab(null, '#general_generic')
+                : nothing}
 							${repeat(this._tabs, (tab) => tab.name, (tab, index) => {
                 const path = 'tab/' + encodeFolderName(tab.name || '');
                 return this.#renderTab(path, tab.name, index);
@@ -196,9 +198,15 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
 				height: 100%;
 				--uui-tab-background: var(--uui-color-surface);
 			}
+			umb-badge {
+				--uui-badge-inset: 0 0 auto auto;
+			}
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbContentWorkspaceViewEditElement.prototype, "_hasRootProperties", void 0);
 __decorate([
     state()
 ], UmbContentWorkspaceViewEditElement.prototype, "_loaded", void 0);

package/dist-cms/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.d.ts

@@ -7,6 +7,12 @@ export declare class UmbCompositionPickerModalElement extends UmbModalBaseElemen
     private _selection;
     private _usedForInheritance;
     private _usedForComposition;
+    /**
+     * Loading state for the composition data fetch.
+     * Initialized to true to show loader immediately when modal opens.
+     * Set to false when data is successfully loaded or an error occurs.
+     */
+    private _loading;
     connectedCallback(): void;
     protected _submitModal(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.js

@@ -16,6 +16,12 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
         this._selection = [];
         this._usedForInheritance = [];
         this._usedForComposition = [];
+        /**
+         * Loading state for the composition data fetch.
+         * Initialized to true to show loader immediately when modal opens.
+         * Set to false when data is successfully loaded or an error occurs.
+         */
+        this._loading = true;
     }
     // TODO: Loosen this from begin specific to Document Types, so we can have a general interface for composition repositories. [NL]
     #compositionRepository;
@@ -81,14 +87,17 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
             currentCompositeUniques: this._selection,
             currentPropertyAliases: currentPropertyAliases,
         });
-        if (!data)
+        if (!data) {
+            this._loading = false;
             return;
+        }
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         const grouped = Object.groupBy(data, (item) => '/' + item.folderPath.join('/'));
         this._compatibleCompositions = Object.keys(grouped)
             .sort((a, b) => a.localeCompare(b))
             .map((key) => ({ path: key, compositions: grouped[key] }));
+        this._loading = false;
     }
     #onSelectionAdd(unique) {
         this._selection = [...this._selection, unique];
@@ -142,6 +151,11 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
 		`;
     }
     #renderAvailableCompositions() {
+        if (this._loading) {
+            return html `<div id="loader" role="status" aria-live="polite" aria-label="Loading compositions">
+				<uui-loader></uui-loader>
+			</div>`;
+        }
         if (this._compatibleCompositions) {
             return html `
 				<umb-localize key="contentTypeEditor_compositionsDescription">
@@ -191,6 +205,14 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
     }
     static { this.styles = [
         css `
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: var(--uui-size-layout-1);
+				min-height: 200px;
+			}
+
 			uui-input {
 				margin: var(--uui-size-6) 0;
 				display: flex;
@@ -234,6 +256,9 @@ __decorate([
 __decorate([
     state()
 ], UmbCompositionPickerModalElement.prototype, "_usedForComposition", void 0);
+__decorate([
+    state()
+], UmbCompositionPickerModalElement.prototype, "_loading", void 0);
 UmbCompositionPickerModalElement = __decorate([
     customElement('umb-composition-picker-modal')
 ], UmbCompositionPickerModalElement);

package/dist-cms/packages/content/content-type/structure/content-type-property-structure-helper.class.js

@@ -52,7 +52,27 @@ export class UmbContentTypePropertyStructureHelper extends UmbControllerBase {
         return this.#containerId;
     }
     #observeContainer() {
-        this.observe(this.#containerId ? this.#structure?.mergedContainersOfId(this.#containerId) : undefined, (container) => {
+        // Handle three cases:
+        // 1. containerId === undefined → Not set yet, clear properties
+        // 2. containerId === null → Root properties (no container)
+        // 3. containerId === string → Container-based properties
+        if (this.#containerId === undefined) {
+            // Not set yet, clear properties
+            this.#propertyStructure.setValue([]);
+            this.removeUmbControllerByAlias('observeProperties');
+            this.removeUmbControllerByAlias('observeContainer');
+            return;
+        }
+        if (this.#containerId === null) {
+            // Root properties (no container)
+            this.removeUmbControllerByAlias('observeContainer');
+            this.observe(this.#structure?.rootPropertyStructures(), (properties) => {
+                this.#propertyStructure.setValue(properties ?? []);
+            }, 'observeProperties');
+            return;
+        }
+        // Container-based properties
+        this.observe(this.#structure?.mergedContainersOfId(this.#containerId), (container) => {
             this.observe(container ? this.#structure?.propertyStructuresOfGroupIds(container.ids ?? []) : undefined, (properties) => {
                 this.#propertyStructure.setValue(properties ?? []);
             }, 'observeProperties');

package/dist-cms/packages/content/content-type/structure/content-type-structure-manager.class.js

@@ -67,6 +67,7 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
         this.ownerContentTypeAlias = createObservablePart(this.ownerContentType, (x) => x?.alias);
         this.ownerContentTypeName = createObservablePart(this.ownerContentType, (x) => x?.name);
         this.ownerContentTypeCompositions = createObservablePart(this.ownerContentType, (x) => x?.compositions);
+        // TODO: for v.18 make it pausable for this to be undefined when no content-type are present. [NL]
         this.contentTypeCompositions = this.#contentTypes.asObservablePart((contentTypes) => {
             return contentTypes.flatMap((x) => x.compositions ?? []);
         });
@@ -628,7 +629,7 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
             const props = [];
             docTypes.forEach((docType) => {
                 docType.properties?.forEach((property) => {
-                    if (property.container?.id === containerId) {
+                    if ((containerId === null && !property.container) || property.container?.id === containerId) {
                         props.push(property);
                     }
                 });