@umbraco-cms/backoffice 16.0.0-rc → 16.0.0-rc3

package/dist-cms/assets/lang/pt-br.d.ts

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

package/dist-cms/assets/lang/pt-br.ts

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

package/dist-cms/assets/lang/pt.d.ts

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

package/dist-cms/assets/lang/pt.js

@@ -0,0 +1 @@
+export default {};

package/dist-cms/assets/lang/pt.ts

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

package/dist-cms/custom-elements.json

@@ -531,6 +531,17 @@
         }
       ]
     },
+    {
+      "name": "umb-preview-segment",
+      "path": "./../src/apps/preview/apps/preview-segment.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
     {
       "name": "umb-preview",
       "path": "./../src/apps/preview/preview.element.ts",
@@ -2632,8 +2643,7 @@
         },
         {
           "name": "label",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | undefined"
         },
         {
           "name": "look",
@@ -2662,9 +2672,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "popoverContainerElement"
-        },
         {
           "name": "open",
           "attribute": "open",
@@ -2674,8 +2681,7 @@
         {
           "name": "label",
           "attribute": "label",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | undefined"
         },
         {
           "name": "look",
@@ -2707,6 +2713,9 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "popoverContainerElement"
+        },
         {
           "name": "styles",
           "type": "array",
@@ -4343,6 +4352,22 @@
         {
           "name": "standalone",
           "type": "boolean"
+        },
+        {
+          "name": "select-only",
+          "type": "boolean"
+        },
+        {
+          "name": "selectable",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean"
         }
       ],
       "properties": [
@@ -4359,6 +4384,26 @@
           "attribute": "standalone",
           "type": "boolean"
         },
+        {
+          "name": "selectOnly",
+          "attribute": "select-only",
+          "type": "boolean"
+        },
+        {
+          "name": "selectable",
+          "attribute": "selectable",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "type": "boolean"
+        },
         {
           "name": "styles",
           "type": "array",
@@ -4536,19 +4581,14 @@
       "attributes": [
         {
           "name": "value",
-          "type": "FormDataEntryValue | FormData"
+          "type": "string | undefined"
         }
       ],
       "properties": [
         {
           "name": "value",
           "attribute": "value",
-          "type": "FormDataEntryValue | FormData"
-        },
-        {
-          "name": "styles",
-          "type": "array",
-          "default": "[null]"
+          "type": "string | undefined"
         }
       ]
     },
@@ -5097,7 +5137,14 @@
     },
     {
       "name": "umb-picker-search-result",
-      "path": "./../src/packages/core/picker/search/picker-search-result.element.ts"
+      "path": "./../src/packages/core/picker/search/picker-search-result.element.ts",
+      "properties": [
+        {
+          "name": "pickableFilter",
+          "type": "PickableFilterMethodType<UmbEntityModel>",
+          "default": "\"() => true\""
+        }
+      ]
     },
     {
       "name": "umb-default-picker-search-result-item",
@@ -5106,6 +5153,10 @@
         {
           "name": "item",
           "type": "ItemType | undefined"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean | undefined"
         }
       ],
       "properties": [
@@ -5113,6 +5164,11 @@
           "name": "item",
           "attribute": "item",
           "type": "ItemType | undefined"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "type": "boolean | undefined"
         }
       ]
     },
@@ -7389,6 +7445,26 @@
           "name": "standalone",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "select-only",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -7408,6 +7484,30 @@
           "attribute": "standalone",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "selectOnly",
+          "attribute": "select-only",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectable",
+          "attribute": "selectable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "type": "boolean",
+          "default": "false"
         }
       ]
     },
@@ -15144,7 +15244,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UmbTextStyles\",null]"
+          "default": "[null]"
         }
       ]
     },

package/dist-cms/libs/observable-api/states/array-state.d.ts

@@ -53,7 +53,7 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
     getHasOne(unique: U): boolean;
     /**
      * @function remove
-     * @param {unknown[]} uniques - The unique values to remove.
+     * @param {U[]} uniques - The unique values to remove.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Remove some new data of this Subject.
      * @example <caption>Example remove entry with id '1' and '2'</caption>
@@ -64,10 +64,10 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
      * const myState = new UmbArrayState(data, (x) => x.id);
      * myState.remove([1, 2]);
      */
-    remove(uniques: unknown[]): this;
+    remove(uniques: U[]): this;
     /**
      * @function removeOne
-     * @param {unknown} unique - The unique value to remove.
+     * @param {U} unique - The unique value to remove.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Remove some new data of this Subject.
      * @example <caption>Example remove entry with id '1'</caption>
@@ -78,7 +78,7 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
      * const myState = new UmbArrayState(data, (x) => x.id);
      * myState.removeOne(1);
      */
-    removeOne(unique: unknown): this;
+    removeOne(unique: U): this;
     /**
      * @function filter
      * @param predicate
@@ -149,7 +149,7 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
     append(entries: T[]): this;
     /**
      * @function updateOne
-     * @param {unknown} unique - Unique value to find entry to update.
+     * @param {U} unique - Unique value to find entry to update.
      * @param {Partial<T>} entry - new data to be added in this Subject.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Update a item with some new data, requires the ArrayState to be constructed with a getUnique method.
@@ -161,6 +161,6 @@ export declare class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
      * const myState = new UmbArrayState(data, (x) => x.key);
      * myState.updateOne(2, {value: 'updated-bar'});
      */
-    updateOne(unique: unknown, entry: Partial<T>): this;
+    updateOne(unique: U, entry: Partial<T>): this;
     destroy(): void;
 }

package/dist-cms/libs/observable-api/states/array-state.js

@@ -79,7 +79,7 @@ export class UmbArrayState extends UmbDeepState {
     }
     /**
      * @function remove
-     * @param {unknown[]} uniques - The unique values to remove.
+     * @param {U[]} uniques - The unique values to remove.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Remove some new data of this Subject.
      * @example <caption>Example remove entry with id '1' and '2'</caption>
@@ -108,7 +108,7 @@ export class UmbArrayState extends UmbDeepState {
     }
     /**
      * @function removeOne
-     * @param {unknown} unique - The unique value to remove.
+     * @param {U} unique - The unique value to remove.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Remove some new data of this Subject.
      * @example <caption>Example remove entry with id '1'</caption>
@@ -244,7 +244,7 @@ export class UmbArrayState extends UmbDeepState {
     }
     /**
      * @function updateOne
-     * @param {unknown} unique - Unique value to find entry to update.
+     * @param {U} unique - Unique value to find entry to update.
      * @param {Partial<T>} entry - new data to be added in this Subject.
      * @returns {UmbArrayState<T>} Reference to it self.
      * @description - Update a item with some new data, requires the ArrayState to be constructed with a getUnique method.

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.d.ts

@@ -11,7 +11,7 @@ export declare class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitEl
     get containerId(): string | null | undefined;
     set containerId(value: string | null | undefined);
     _dataOwner?: UmbBlockElementManager;
-    _variantId?: UmbVariantId;
+    _workspaceVariantId?: UmbVariantId;
     _visibleProperties?: Array<UmbPropertyTypeModel>;
     private _ownerEntityType?;
     constructor();

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.js

@@ -36,7 +36,7 @@ let UmbBlockWorkspaceViewEditPropertiesElement = class UmbBlockWorkspaceViewEdit
             this.#workspaceContext = workspaceContext;
             this._ownerEntityType = this.#workspaceContext?.getEntityType();
             this.observe(workspaceContext?.variantId, (variantId) => {
-                this._variantId = variantId;
+                this._workspaceVariantId = variantId;
                 this.#processPropertyStructure();
             }, 'observeVariantId');
             this.#setStructureManager();
@@ -54,13 +54,13 @@ let UmbBlockWorkspaceViewEditPropertiesElement = class UmbBlockWorkspaceViewEdit
         }, 'observePropertyStructure');
     }
     #processPropertyStructure() {
-        if (!this._dataOwner || !this.#properties || !this.#propertyStructureHelper) {
+        if (!this._dataOwner || !this.#properties || !this.#propertyStructureHelper || !this._workspaceVariantId) {
             return;
         }
         const propertyViewGuard = this._dataOwner.propertyViewGuard;
         this.#properties.forEach((property) => {
-            const propertyVariantId = new UmbVariantId(this._variantId?.culture, this._variantId?.segment);
-            this.observe(propertyViewGuard.isPermittedForVariantAndProperty(propertyVariantId, property), (permitted) => {
+            const propertyVariantId = new UmbVariantId(property.variesByCulture ? this._workspaceVariantId.culture : null, property.variesBySegment ? this._workspaceVariantId.segment : null);
+            this.observe(propertyViewGuard.isPermittedForVariantAndProperty(propertyVariantId, property, this._workspaceVariantId), (permitted) => {
                 if (permitted) {
                     this.#visiblePropertiesUniques.push(property.unique);
                     this.#calculateVisibleProperties();
@@ -79,12 +79,12 @@ let UmbBlockWorkspaceViewEditPropertiesElement = class UmbBlockWorkspaceViewEdit
         this._visibleProperties = this.#properties.filter((property) => this.#visiblePropertiesUniques.includes(property.unique));
     }
     render() {
-        return this._variantId && this._visibleProperties
+        return this._workspaceVariantId && this._visibleProperties
             ? repeat(this._visibleProperties, (property) => property.alias, (property) => html `<umb-block-workspace-view-edit-property
 							class="property"
 							.ownerContext=${this._dataOwner}
 							.ownerEntityType=${this._ownerEntityType}
-							.variantId=${this._variantId}
+							.variantId=${this._workspaceVariantId}
 							.property=${property}></umb-block-workspace-view-edit-property>`)
             : nothing;
     }
@@ -111,7 +111,7 @@ __decorate([
 ], UmbBlockWorkspaceViewEditPropertiesElement.prototype, "_dataOwner", void 0);
 __decorate([
     state()
-], UmbBlockWorkspaceViewEditPropertiesElement.prototype, "_variantId", void 0);
+], UmbBlockWorkspaceViewEditPropertiesElement.prototype, "_workspaceVariantId", void 0);
 __decorate([
     state()
 ], UmbBlockWorkspaceViewEditPropertiesElement.prototype, "_visibleProperties", void 0);

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-property.element.js

@@ -19,7 +19,7 @@ let UmbBlockWorkspaceViewEditPropertyElement = class UmbBlockWorkspaceViewEditPr
                     culture: propertyVariantId.culture,
                     segment: propertyVariantId.segment,
                 })}].value`;
-                this.observe(this.ownerContext.propertyWriteGuard.isPermittedForVariantAndProperty(propertyVariantId, this.property), (write) => {
+                this.observe(this.ownerContext.propertyWriteGuard.isPermittedForVariantAndProperty(propertyVariantId, this.property, this.variantId), (write) => {
                     this._writeable = write;
                 }, 'observeView');
             }

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

@@ -107,6 +107,7 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
         this.#extensionSlotRenderMethod = (ext) => {
             if (ext.component) {
                 ext.component.classList.add('umb-block-grid__block--view');
+                ext.component.setAttribute('part', 'component');
             }
             if (this._exposed) {
                 return ext.component;
@@ -441,6 +442,11 @@ let UmbBlockGridEntryElement = class UmbBlockGridEntryElement extends UmbLitElem
 				border-color: var(--uui-color-invalid);
 			}
 
+			umb-extension-slot::part(component) {
+				position: relative;
+				z-index: 0;
+			}
+
 			#invalidLocation {
 				position: absolute;
 				top: -1em;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.d.ts

@@ -2,17 +2,16 @@ import type { UmbBlockGridTypeAreaTypePermission } from '../../index.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { nothing } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
-import type { UmbBlockTypeWithGroupKey } from '@umbraco-cms/backoffice/block-type';
 export declare class UmbPropertyEditorUIBlockGridAreaTypePermissionElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
     set value(value: Array<UmbBlockGridTypeAreaTypePermission>);
     get value(): Array<UmbBlockGridTypeAreaTypePermission>;
     private _value;
-    _blockTypes: Array<UmbBlockTypeWithGroupKey>;
+    private _blockTypes?;
     private _blockTypesWithElementName;
     private _blockGroups;
     constructor();
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1> | "There must be one Block Type created before permissions can be configured.";
     static styles: import("lit").CSSResult[];
 }
 export default UmbPropertyEditorUIBlockGridAreaTypePermissionElement;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.js

@@ -22,14 +22,13 @@ let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEdi
     constructor() {
         super();
         this._value = [];
-        this._blockTypes = [];
         this._blockTypesWithElementName = [];
         this._blockGroups = [];
         this.#itemsManager = new UmbRepositoryItemsManager(this, UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS);
         this.observe(this.#itemsManager.items, (items) => {
             this._blockTypesWithElementName = items
                 .map((item) => {
-                const blockType = this._blockTypes.find((block) => block.contentElementTypeKey === item.unique);
+                const blockType = this._blockTypes?.find((block) => block.contentElementTypeKey === item.unique);
                 if (blockType) {
                     return { type: blockType, name: item.name };
                 }
@@ -82,9 +81,12 @@ let UmbPropertyEditorUIBlockGridAreaTypePermissionElement = class UmbPropertyEdi
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
-        if (this._blockTypesWithElementName.length === 0) {
+        if (this._blockTypes === undefined) {
             return nothing;
         }
+        if (this._blockTypesWithElementName.length === 0) {
+            return 'There must be one Block Type created before permissions can be configured.';
+        }
         return html `<div id="permissions">
 				${repeat(this._value, (permission) => permission, (permission, index) => {
             const showCategoryHeader = this._blockGroups.length > 0 && this._blockTypesWithElementName.length > 0;
@@ -191,6 +193,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_blockTypes", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIBlockGridAreaTypePermissionElement.prototype, "_blockTypesWithElementName", void 0);

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

@@ -75,6 +75,7 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
             return true;
         };
         this.#extensionSlotRenderMethod = (ext) => {
+            ext.component?.setAttribute('part', 'component');
             if (this._exposed) {
                 return ext.component;
             }
@@ -354,6 +355,11 @@ let UmbBlockListEntryElement = class UmbBlockListEntryElement extends UmbLitElem
 				border-color: var(--uui-color-invalid);
 			}
 
+			umb-extension-slot::part(component) {
+				position: relative;
+				z-index: 0;
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);

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

@@ -55,6 +55,7 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
             this.#context.expose();
         };
         this.#extensionSlotRenderMethod = (ext) => {
+            ext.component?.setAttribute('part', 'component');
             if (this._exposed) {
                 return ext.component;
             }
@@ -223,6 +224,12 @@ let UmbBlockRteEntryElement = class UmbBlockRteEntryElement extends UmbLitElemen
 					outline: 3px solid var(--uui-color-focus);
 				}
 			}
+
+			umb-extension-slot::part(component) {
+				position: relative;
+				z-index: 0;
+			}
+
 			uui-action-bar {
 				position: absolute;
 				top: var(--uui-size-2);

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

@@ -93,12 +93,17 @@ let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElem
                             presetAlias: 'element',
                         },
                     },
+                    // TODO: hide the queryParams and filter config under a "elementTypesOnly" field. [MR]
+                    search: {
+                        queryParams: {
+                            isElementType: true,
+                        },
+                    },
                     pickableFilter: (docType) => 
                     // Only pick elements:
                     docType.isElement &&
                         // Prevent picking the an already used element type:
-                        this.#filter &&
-                        this.#filter.find((x) => x.contentElementTypeKey === docType.unique) === undefined,
+                        this.#filter?.find((x) => x.contentElementTypeKey === docType.unique) === undefined,
                 },
                 value: {
                     selection: [],

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=${item.name}>
+				.label=${this.localize.term('actions_viewActionsFor', [item.name])}>
 			</umb-entity-actions-bundle>
 		`;
     }

package/dist-cms/packages/clipboard/property/value-translator/copy/clipboard-copy-translator-value-resolver.js

@@ -14,7 +14,12 @@ export class UmbClipboardCopyPropertyValueTranslatorValueResolver extends UmbCon
             throw new Error('No clipboard copy translators found.');
         }
         // Create translators
-        const apiPromises = manifests.map((manifest) => createExtensionApi(this, manifest));
+        const apiPromises = manifests.map((manifest) => createExtensionApi(this, manifest).then((api) => {
+            if (api) {
+                api.manifest = manifest;
+            }
+            return api;
+        }));
         const apis = await Promise.all(apiPromises);
         // Translate values
         const valuePromises = apis.map(async (api) => api?.translate(propertyValue));

package/dist-cms/packages/content/content/controller/merge-content-variant-data.controller.js

@@ -87,6 +87,7 @@ export class UmbMergeContentVariantDataController extends UmbControllerBase {
             // If api is not to be found, then we can continue using the draftValue as is.
             return draftValue;
         }
+        api.manifest = manifest;
         let newValue = draftValue;
         if (api.processValues) {
             // The a property values resolver resolves one value, we need to gather the persisted inner values first, and store them here:

package/dist-cms/packages/content/content/property-dataset-context/element-property-dataset.context.js

@@ -1,7 +1,7 @@
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbBasicState, UmbBooleanState, classEqualMemoization, createObservablePart, mergeObservables, } from '@umbraco-cms/backoffice/observable-api';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UmbVariantContext, UmbVariantId } from '@umbraco-cms/backoffice/variant';
 export class UmbElementPropertyDatasetContext extends UmbContextBase {
     #variantId;
     getVariantId() {
@@ -10,6 +10,7 @@ export class UmbElementPropertyDatasetContext extends UmbContextBase {
     #propertyVariantIdPromise;
     #propertyVariantIdPromiseResolver;
     #propertyVariantIdMap;
+    #variantContext;
     getEntityType() {
         return this._dataOwner.getEntityType();
     }
@@ -26,8 +27,10 @@ export class UmbElementPropertyDatasetContext extends UmbContextBase {
         this._propertyVariantIdMap = this.#propertyVariantIdMap.asObservable();
         this._readOnly = new UmbBooleanState(false);
         this.readOnly = this._readOnly.asObservable();
+        this.#variantContext = new UmbVariantContext(this).inherit();
         this._dataOwner = dataOwner;
         this.#variantId = variantId ?? UmbVariantId.CreateInvariant();
+        this.#variantContext.setVariantId(this.#variantId);
         this.#propertyVariantIdPromise = new Promise((resolve) => {
             this.#propertyVariantIdPromiseResolver = resolve;
         });