@umbraco-cms/backoffice 16.3.4 → 16.4.0-rc2

package/dist-cms/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.js

@@ -17,9 +17,6 @@ import { UmbDataPathBlockElementDataQuery } from '../../../block/index.js';
  * @class UmbBlockRteEntryElement
  */
 let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElement {
-    get contentKey() {
-        return this._contentKey;
-    }
     set contentKey(value) {
         if (!value)
             return;
@@ -30,6 +27,9 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             this._blockViewProps.contentInvalid = hasMessages;
         }, 'observeMessagesForContent');
     }
+    get contentKey() {
+        return this._contentKey;
+    }
     #context;
     #updateBlockViewProps(incoming) {
         this._blockViewProps = { ...this._blockViewProps, ...incoming };
@@ -94,7 +94,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         this.observe(this.#context.blockType, (blockType) => {
             this.#updateBlockViewProps({ blockType });
         }, null);
-        // TODO: Implement index.
+        this.observe(this.#context.index, (index) => this.#updateBlockViewProps({ index }), null);
         this.observe(this.#context.label, (label) => {
             this.#updateBlockViewProps({ label });
             this._label = label;
@@ -171,7 +171,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
     }
     #renderActionBar() {
         return this._showActions
-            ? html ` <uui-action-bar> ${this.#renderEditAction()} ${this.#renderEditSettingsAction()}</uui-action-bar> `
+            ? html `<uui-action-bar>${this.#renderEditAction()}${this.#renderEditSettingsAction()}</uui-action-bar>`
             : nothing;
     }
     #renderBuiltinBlockView;
@@ -179,6 +179,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
         return html `<umb-ref-rte-block
 			.label=${this._label}
 			.icon=${this._icon}
+			.index=${this._blockViewProps.index}
 			.unpublished=${!this._exposed}
 			.content=${this._blockViewProps.content}
 			.settings=${this._blockViewProps.settings}

package/dist-cms/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.d.ts

@@ -7,6 +7,7 @@ import type { UmbBlockEditorCustomViewConfiguration } from '../../../block-custo
 export declare class UmbRefRteBlockElement extends UmbLitElement {
     label?: string;
     icon?: string;
+    index?: number;
     unpublished?: boolean;
     content?: UmbBlockDataType;
     settings?: UmbBlockDataType;

package/dist-cms/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.js

@@ -20,7 +20,7 @@ let UmbRefRteBlockElement = class UmbRefRteBlockElement extends UmbLitElement {
         });
     }
     render() {
-        const blockValue = { ...this.content, $settings: this.settings };
+        const blockValue = { ...this.content, $settings: this.settings, $index: this.index };
         return html `
 			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this._workspaceEditPath : undefined) ?? ''}>
 				<div class="selection-background" aria-hidden="true">&emsp;</div>
@@ -67,6 +67,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UmbRefRteBlockElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], UmbRefRteBlockElement.prototype, "index", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbRefRteBlockElement.prototype, "unpublished", void 0);

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

@@ -134,10 +134,9 @@ let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElem
         const contentType = store.getItems([item.contentElementTypeKey]);
         await umbConfirmModal(this, {
             color: 'danger',
-            headline: `Remove ${contentType[0]?.name}?`,
-            // TODO: Translations: [NL]
-            content: 'Are you sure you want to remove this Block Type Configuration?',
-            confirmLabel: 'Remove',
+            headline: '#blockEditor_confirmDeleteBlockTypeTitle',
+            content: this.localize.term('blockEditor_confirmDeleteBlockTypeMessage', [contentType[0]?.name]),
+            confirmLabel: '#general_remove',
         });
         this.deleteItem(item.contentElementTypeKey);
     }

package/dist-cms/packages/clipboard/clipboard-entry/picker/clipboard-entry-picker.element.js

@@ -110,7 +110,7 @@ let UmbClipboardEntryPickerElement = class UmbClipboardEntryPickerElement extend
 				slot="actions"
 				.entityType=${item.entityType}
 				.unique=${item.unique}
-				.label=${this.localize.term('actions_viewActionsFor', [item.name])}>
+				.label=${this.localize.string(item.name)}>
 			</umb-entity-actions-bundle>
 		`;
     }

package/dist-cms/packages/content/content/manager/content-data-manager.js

@@ -67,6 +67,7 @@ export class UmbContentWorkspaceDataManager extends UmbElementWorkspaceDataManag
         const currentData = this.getCurrent();
         if (!currentData)
             throw new Error('Data is missing');
+        // If varies by segment:
         if (!variantId.isSegmentInvariant()) {
             // The server requires a segment name. It doesn't matter what it is as long as it is not empty. The server will overwrite it with the name of the default.
             update = { ...update, name: 'Segment' };

package/dist-cms/packages/content/content/manager/element-data-manager.js

@@ -68,9 +68,14 @@ export class UmbElementWorkspaceDataManager extends UmbEntityWorkspaceDataManage
         else {
             variantsToStore = [...selectedVariants, invariantVariantId];
         }
+        const data = this.getCurrent();
+        if (!data)
+            throw new Error('Current data is missing');
+        //if (!data.unique) throw new Error('Unique of current data is missing');
         // If we vary by segment we need to save all segments for a selected culture.
+        // And all segments for the invariant culture.
         if (this._variesBySegment === true) {
-            const dataSegments = this.getCurrent().values.map((x) => x.segment);
+            const dataSegments = data.values.map((x) => x.segment).filter((x) => x);
             variantsToStore = [
                 ...variantsToStore,
                 ...dataSegments.flatMap((segment) => variantsToStore.map((variant) => variant.toSegment(segment))),
@@ -80,10 +85,6 @@ export class UmbElementWorkspaceDataManager extends UmbEntityWorkspaceDataManage
                 ...dataSegments.flatMap((segment) => selectedVariants.map((variant) => variant.toSegment(segment))),
             ];
         }
-        const data = this.getCurrent();
-        if (!data)
-            throw new Error('Current data is missing');
-        //if (!data.unique) throw new Error('Unique of current data is missing');
         const persistedData = this.getPersisted();
         return await new UmbMergeContentVariantDataController(this).process(persistedData, data, selectedVariants, variantsToStore);
     }

package/dist-cms/packages/content/content/types.d.ts

@@ -1,3 +1,4 @@
+import type { UmbEntityFlag } from '../../core/entity-flag/index.js';
 import type { UmbPropertyValueData } from '../../core/property/index.js';
 import type { UmbEntityVariantModel } from '../../core/variant/index.js';
 export type * from './collection/types.js';
@@ -8,7 +9,11 @@ export interface UmbElementDetailModel {
 export interface UmbElementValueModel<ValueType = unknown> extends UmbPropertyValueData<ValueType> {
     culture: string | null;
     editorAlias: string;
-    entityType: string;
+    /**
+     * @deprecated, we do not use entityType on values anymore. To be removed in Umbraco v.18.
+     * Just remove the property.
+     */
+    entityType?: string;
     segment: string | null;
 }
 export interface UmbContentValueModel<ValueType = unknown> extends UmbElementValueModel<ValueType> {
@@ -22,6 +27,7 @@ export interface UmbContentDetailModel<VariantModelType extends UmbEntityVariant
     unique: string;
     entityType: string;
     variants: Array<VariantModelType>;
+    flags: Array<UmbEntityFlag>;
 }
-export interface UmbContentLikeDetailModel extends UmbElementDetailModel, Partial<Pick<UmbContentDetailModel, 'variants'>> {
+export interface UmbContentLikeDetailModel extends UmbElementDetailModel, Partial<Pick<UmbContentDetailModel, 'variants' | 'flags'>> {
 }

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

@@ -80,7 +80,11 @@ export declare abstract class UmbContentDetailWorkspaceContextBase<DetailModelTy
     getVariantValidationContext(variantId: UmbVariantId): UmbValidationController | undefined;
     constructor(host: UmbControllerHost, args: UmbContentDetailWorkspaceContextArgs<DetailModelType, ContentTypeDetailModelType, VariantModelType, VariantOptionModelType>);
     loadLanguages(): Promise<void>;
+    /**
+     * @deprecated Call `_processIncomingData` instead. `_scaffoldProcessData` will be removed in v.18.
+     */
     protected _scaffoldProcessData(data: DetailModelType): Promise<DetailModelType>;
+    protected _processIncomingData(data: DetailModelType): Promise<DetailModelType>;
     /**
      * Get the name of a variant
      * @param {UmbVariantId } [variantId] - The variant id

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

@@ -238,16 +238,19 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         const { data } = await this.#segmentRepository.requestCollection({});
         this.#segments.setValue(data?.items ?? []);
     }
-    async _scaffoldProcessData(data) {
+    /**
+     * @deprecated Call `_processIncomingData` instead. `_scaffoldProcessData` will be removed in v.18.
+     */
+    _scaffoldProcessData(data) {
+        return this._processIncomingData(data);
+    }
+    async _processIncomingData(data) {
         const contentTypeUnique = data[this.#contentTypePropertyName].unique;
         if (!contentTypeUnique) {
             throw new Error(`Could not find content type unique on property '${this.#contentTypePropertyName}'`);
         }
         // Load the content type structure, usually this comes from the data, but in this case we are making the data, and we need this to be able to complete the data. [NL]
         await this.structure.loadType(contentTypeUnique);
-        /**
-         * TODO: Should we also set Preset Values when loading Content, because maybe content contains uncreated Cultures or Segments.
-         */
         // Set culture and segment for all values:
         const cultures = this.#languages.getValue().map((x) => x.unique);
         if (this.structure.variesBySegment) {
@@ -284,11 +287,15 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         if (segments) {
             controller.setSegments(segments);
         }
-        const presetValues = await controller.create(valueDefinitions, {
+        controller.setValues(data.values);
+        const processedValues = await controller.create(valueDefinitions, {
             entityType: this.getEntityType(),
             entityUnique: data.unique,
             entityTypeUnique: contentTypeUnique,
         });
+        /*
+        const presetValues = ...
+
         // Don't just set the values, as we could have some already populated from a blueprint.
         // If we have a value from both a blueprint and a preset, use the latter as priority.
         const dataValues = [...data.values];
@@ -298,13 +305,14 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
             const matchingDataValueIndex = dataValues.findIndex((v) => v.alias === presetValue.alias && variantId.compare(v));
             if (matchingDataValueIndex > -1) {
                 dataValues[matchingDataValueIndex] = presetValue;
-            }
-            else {
+            } else {
                 dataValues.push(presetValue);
             }
         }
+
         data.values = dataValues;
-        return data;
+        */
+        return { ...data, values: processedValues };
     }
     /**
      * Get the name of a variant
@@ -472,8 +480,24 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
             // @ts-ignore
             // TODO: fix type error
             this._data.updateCurrent({ values });
-            // TODO: Ideally we should move this type of logic to the act of saving [NL]
-            this._data.ensureVariantData(variantId);
+            /**
+             * Handling of Not-Culture but Segment variant properties: [NL]
+             * We need to ensure variant-entries across all culture variants for the given segment variant, when er property is configured to vary by segment but not culture.
+             * This is the only different case, in all other cases its fine to just target the given variant.
+             */
+            if (this.getVariesByCulture() && property.variesByCulture === false && property.variesBySegment === true) {
+                // get all culture options:
+                const cultureOptions = await firstValueFrom(this.variantOptions);
+                for (const cultureOption of cultureOptions) {
+                    if (cultureOption.segment === variantId.segment) {
+                        this._data.ensureVariantData(UmbVariantId.Create(cultureOption));
+                    }
+                }
+            }
+            else {
+                // otherwise we know the property variant-id will be matching with a variant:
+                this._data.ensureVariantData(variantId);
+            }
         }
         this.finishPropertyValueChange();
     }

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 _loaded;
     private _hasRootGroups;
     private _routes;
     private _tabs?;
@@ -11,7 +12,7 @@ export declare class UmbContentWorkspaceViewEditElement extends UmbLitElement im
     private _hintMap;
     private _tabsStructureHelper;
     constructor();
-    render(): import("lit-html").TemplateResult<1> | undefined;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbContentWorkspaceViewEditElement;

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

@@ -22,6 +22,7 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
     #structureManager;
     constructor() {
         super();
+        this._loaded = false;
         this._hasRootGroups = false;
         this._routes = [];
         this._activePath = '';
@@ -45,6 +46,9 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
             this.#structureManager = workspaceContext?.structure;
             this._tabsStructureHelper.setStructureManager(workspaceContext?.structure);
             this.#observeRootGroups();
+            this.observe(this.#structureManager?.contentTypeLoaded, (loaded) => {
+                this._loaded = loaded ?? false;
+            }, 'observeContentTypeLoaded');
         });
     }
     async #observeRootGroups() {
@@ -138,8 +142,9 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
         view.provideAt(component);
     }
     render() {
-        if (!this._routes || !this._tabs)
-            return;
+        if (!this._loaded || !this._routes || this._routes.length === 0 || !this._tabs) {
+            return html `<umb-view-loader></umb-view-loader>`;
+        }
         return html `
 			<umb-body-layout header-fit-height>
 				${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups))
@@ -194,6 +199,9 @@ let UmbContentWorkspaceViewEditElement = class UmbContentWorkspaceViewEditElemen
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbContentWorkspaceViewEditElement.prototype, "_loaded", void 0);
 __decorate([
     state()
 ], UmbContentWorkspaceViewEditElement.prototype, "_hasRootGroups", void 0);

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

@@ -36,7 +36,7 @@ export class UmbContentTypeContainerStructureHelper extends UmbControllerBase {
         this.#childContainers = new UmbArrayState([], (x) => x.id);
         // State containing the merged containers (only one pr. name):
         this.#legacyMergedChildContainers = new UmbArrayState([], (x) => x.id);
-        this.#childContainersMerged = new UmbArrayState([], (x) => x.path);
+        this.#childContainersMerged = new UmbArrayState([], (x) => x.key);
         this.childContainers = this.#childContainersMerged.asObservable();
         // Owner containers are containers owned by the owner Content Type (The specific one up for editing)
         this.#ownerChildContainers = [];

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

@@ -56,6 +56,7 @@ export declare class UmbContentTypeStructureManager<T extends UmbContentTypeMode
     /** Public methods for consuming structure: */
     ownerContentTypeObservablePart<R>(mappingFunction: MappingFunction<T | undefined, R>): Observable<R>;
     getOwnerContentType(): T | undefined;
+    getOwnerContentTypeName(): string | undefined;
     getOwnerContentTypeUnique(): string | undefined;
     getVariesByCulture(): boolean | undefined;
     getVariesBySegment(): boolean | undefined;
@@ -150,14 +151,17 @@ export declare class UmbContentTypeStructureManager<T extends UmbContentTypeMode
      * @returns {Observable} - An observable that emits the merged containers that match the provided container ids.
      */
     /**
-     *
-     * Find merged containers that match the provided container ids.
-     * Notice if you can provide one or more ids matching the same container and it will still only return return the matching container once.
-     * @param containerIds - An array of container ids to find merged containers for.
-     * @param id
+     * Find a merged container that match the provided container id.
+     * @param {string} id - The id to find the merged container of.
      * @returns {UmbPropertyTypeContainerMergedModel | undefined} - The merged containers that match the provided container ids.
      */
     getMergedContainerById(id: string): UmbPropertyTypeContainerMergedModel | undefined;
+    /**
+     * Find a merged container that match the provided merged-container key.
+     * @param {string} key - The key to find the merged container of.
+     * @returns {UmbPropertyTypeContainerMergedModel | undefined} - The merged containers that match the provided merged-container key.
+     */
+    getMergedContainerByKey(key: string): UmbPropertyTypeContainerMergedModel | undefined;
     /**
      *
      * Find merged child containers that are children of the provided parent container ids.

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

@@ -182,6 +182,8 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
         this.#ownerContentTypeUnique = unique;
         if (!unique) {
             this.#initRejection?.(`Content Type structure manager could not load: ${unique}`);
+            this.#initResolver = undefined;
+            this.#initRejection = undefined;
             return Promise.reject(new Error('The unique identifier is missing. A valid unique identifier is required to load the content type.'));
         }
         this.#repoManager.setUniques([unique]);
@@ -189,6 +191,8 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
         const result = await this.observe(observable).asPromise();
         if (!result) {
             this.#initRejection?.(`Content Type structure manager could not load: ${unique}`);
+            this.#initResolver = undefined;
+            this.#initRejection = undefined;
             return {
                 error: new UmbError(`Content Type structure manager could not load: ${unique}`),
                 asObservable: () => observable,
@@ -200,9 +204,13 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
         }).catch(() => {
             const msg = `Content Type structure manager could not load: ${unique}. Not all Content Types loaded successfully.`;
             this.#initRejection?.(msg);
+            this.#initResolver = undefined;
+            this.#initRejection = undefined;
             return Promise.reject(new UmbError(msg));
         });
         this.#initResolver?.(result);
+        this.#initResolver = undefined;
+        this.#initRejection = undefined;
         return { data: result, asObservable: () => this.ownerContentType };
     }
     async createScaffold(preset) {
@@ -212,6 +220,8 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
         const { data } = repsonse;
         if (!data) {
             this.#initRejection?.(`Content Type structure manager could not create scaffold`);
+            this.#initResolver = undefined;
+            this.#initRejection = undefined;
             return { error: repsonse.error };
         }
         this.#ownerContentTypeUnique = data.unique;
@@ -220,6 +230,8 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
         // Make a entry in the repo manager:
         this.#repoManager.addEntry(data);
         this.#initResolver?.(data);
+        this.#initResolver = undefined;
+        this.#initRejection = undefined;
         return repsonse;
     }
     /**
@@ -280,6 +292,9 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
     getOwnerContentType() {
         return this.#contentTypes.getValue().find((y) => y.unique === this.#ownerContentTypeUnique);
     }
+    getOwnerContentTypeName() {
+        return this.getOwnerContentType()?.name;
+    }
     getOwnerContentTypeUnique() {
         return this.#ownerContentTypeUnique;
     }
@@ -752,16 +767,21 @@ export class UmbContentTypeStructureManager extends UmbControllerBase {
     }
     */
     /**
-     *
-     * Find merged containers that match the provided container ids.
-     * Notice if you can provide one or more ids matching the same container and it will still only return return the matching container once.
-     * @param containerIds - An array of container ids to find merged containers for.
-     * @param id
+     * Find a merged container that match the provided container id.
+     * @param {string} id - The id to find the merged container of.
      * @returns {UmbPropertyTypeContainerMergedModel | undefined} - The merged containers that match the provided container ids.
      */
     getMergedContainerById(id) {
         return this.#mergedContainers.find((x) => x.ids.includes(id));
     }
+    /**
+     * Find a merged container that match the provided merged-container key.
+     * @param {string} key - The key to find the merged container of.
+     * @returns {UmbPropertyTypeContainerMergedModel | undefined} - The merged containers that match the provided merged-container key.
+     */
+    getMergedContainerByKey(key) {
+        return this.#mergedContainers.find((x) => x.key === key);
+    }
     /**
      *
      * Find merged child containers that are children of the provided parent container ids.

package/dist-cms/packages/content/content-type/workspace/content-type-workspace-context-base.js

@@ -37,6 +37,7 @@ export class UmbContentTypeWorkspaceContextBase extends UmbEntityDetailWorkspace
         this._getDataPromise = request;
         let { data } = await request;
         if (data) {
+            data = await this._processIncomingData(data);
             data = await this._scaffoldProcessData(data);
             if (this.modalContext) {
                 // Notice if the preset comes with values, they will overwrite the scaffolded values... [NL]

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-group.element.js

@@ -237,12 +237,11 @@ let UmbContentTypeWorkspaceViewEditGroupElement = class UmbContentTypeWorkspaceV
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
-				cursor: grab;
 				padding: var(--uui-size-space-4) var(--uui-size-space-5);
 			}
 
-			:host([inherited]) div[slot='header'] {
-				cursor: default;
+			:host([has-owner-container]) div[slot='header'] {
+				cursor: grab;
 			}
 
 			div[slot='header'] > div {
@@ -287,7 +286,7 @@ __decorate([
     state()
 ], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "_groupId", void 0);
 __decorate([
-    state()
+    property({ type: Boolean, reflect: true, attribute: 'has-owner-container' })
 ], UmbContentTypeWorkspaceViewEditGroupElement.prototype, "_hasOwnerContainer", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'inherited' })

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.js

@@ -154,8 +154,8 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
         else {
             return html `
 				<div id="header">
-					<b>${this.property.name}</b>
-					<i>${this.property.alias}</i>
+					<p><b>${this.property.name}</b></p>
+					<p><i>${this.property.alias}</i></p>
 					<p>${this.property.description}</p>
 				</div>
 				<div id="editor">
@@ -264,6 +264,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 					${this.#renderVariantTags()}
 					${this.property.appearance?.labelOnTop == true
                 ? html `<uui-tag look="default">
+								<uui-icon name="icon-stretch-horizontal"></uui-icon>
 								<span>${this.localize.term('contentTypeEditor_displaySettingsLabelOnTop')}</span>
 							</uui-tag>`
                 : nothing}
@@ -299,18 +300,18 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
             !this.property.variesBySegment) {
             return html `
 				<uui-tag look="default">
-					<uui-icon name="icon-shared-value"></uui-icon> ${this.localize.term('contentTypeEditor_cultureAndVariantInvariantLabel')}
+					<uui-icon name="icon-trending-up-down"></uui-icon> ${this.localize.term('contentTypeEditor_cultureAndVariantInvariantLabel')}
 				</uui-tag>
 			`;
         }
         if (this.ownerVariesByCulture && !this.property.variesByCulture) {
             return html `<uui-tag look="default">
-				<uui-icon name="icon-shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_cultureInvariantLabel')}
+				<uui-icon name="icon-trending-up-down"></uui-icon> ${this.localize.term('contentTypeEditor_cultureInvariantLabel')}
 			</uui-tag>`;
         }
         if (this.ownerVariesBySegment && !this.property.variesBySegment) {
             return html `<uui-tag look="default">
-				<uui-icon name="icon-shuffle"></uui-icon> ${this.localize.term('contentTypeEditor_segmentInvariantLabel')}
+				<uui-icon name="icon-trending-up-down"></uui-icon> ${this.localize.term('contentTypeEditor_segmentInvariantLabel')}
 			</uui-tag>`;
         }
         // Not shared:
@@ -391,6 +392,12 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 				border-radius: var(--uui-border-radius);
 			}
 
+			:host([_inherited]) {
+				#header {
+					padding: 0 var(--uui-size-3, 9px);
+				}
+			}
+
 			p {
 				margin-bottom: 0;
 			}
@@ -410,6 +417,11 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 				--uui-button-background-color: var(--uui-color-background);
 				--uui-button-background-color-hover: var(--uui-color-background);
 			}
+			#editor:not(uui-button) {
+				background-color: var(--uui-color-background);
+				border-radius: var(--uui-button-border-radius, var(--uui-border-radius, 3px));
+				min-height: 143px;
+			}
 			#editor uui-action-bar {
 				--uui-button-background-color: var(--uui-color-surface);
 				--uui-button-background-color-hover: var(--uui-color-surface);