@umbraco-cms/backoffice 17.2.1 → 17.3.0-rc

package/dist-cms/packages/core/collection/components/pagination/collection-pagination.element.d.ts

@@ -4,6 +4,8 @@ export declare class UmbCollectionPaginationElement extends UmbLitElement {
     #private;
     private _totalPages;
     private _currentPage;
+    private _totalItems;
+    private _currentItemsCount;
     private _collectionContext?;
     constructor();
     render(): typeof nothing | import("lit-html").TemplateResult<1>;

package/dist-cms/packages/core/collection/components/pagination/collection-pagination.element.js

@@ -13,10 +13,14 @@ let UmbCollectionPaginationElement = class UmbCollectionPaginationElement extend
         super();
         this._totalPages = 1;
         this._currentPage = 1;
+        this._totalItems = 0;
+        this._currentItemsCount = 0;
         this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
             this._collectionContext = instance;
             this.#observeCurrentPage();
             this.#observerTotalPages();
+            this.#observeTotalItems();
+            this.#observeItems();
         });
     }
     #observeCurrentPage() {
@@ -29,11 +33,21 @@ let UmbCollectionPaginationElement = class UmbCollectionPaginationElement extend
             this._totalPages = totalPages ?? 1;
         }, 'umbTotalPagesObserver');
     }
+    #observeTotalItems() {
+        this.observe(this._collectionContext?.totalItems, (totalItems) => {
+            this._totalItems = totalItems ?? 0;
+        }, 'umbTotalItemsObserver');
+    }
+    #observeItems() {
+        this.observe(this._collectionContext?.items, (items) => {
+            this._currentItemsCount = items?.length ?? 0;
+        }, 'umbItemsObserver');
+    }
     #onChange(event) {
         this._collectionContext?.pagination.setCurrentPageNumber(event.target.current);
     }
     render() {
-        if (this._totalPages <= 1) {
+        if (this._currentItemsCount === this._totalItems || this._totalPages <= 1) {
             return nothing;
         }
         return html `<uui-pagination
@@ -65,6 +79,12 @@ __decorate([
 __decorate([
     state()
 ], UmbCollectionPaginationElement.prototype, "_currentPage", void 0);
+__decorate([
+    state()
+], UmbCollectionPaginationElement.prototype, "_totalItems", void 0);
+__decorate([
+    state()
+], UmbCollectionPaginationElement.prototype, "_currentItemsCount", void 0);
 UmbCollectionPaginationElement = __decorate([
     customElement('umb-collection-pagination')
 ], UmbCollectionPaginationElement);

package/dist-cms/packages/core/collection/default/collection-default.context.js

@@ -93,15 +93,16 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
         // The parent entity context is used to get the parent entity for the collection items
         // All items in the collection are children of the current entity context
         this.consumeContext(UMB_ENTITY_CONTEXT, (context) => {
-            const currentEntityUnique = context?.getUnique();
-            const currentEntityType = context?.getEntityType();
-            const parent = currentEntityUnique && currentEntityType
-                ? {
-                    unique: currentEntityUnique,
-                    entityType: currentEntityType,
-                }
-                : undefined;
-            this.#parentEntityContext?.setParent(parent);
+            this.observe(context?.unique, (currentEntityUnique) => {
+                const currentEntityType = context?.getEntityType();
+                const parent = currentEntityUnique && currentEntityType
+                    ? {
+                        unique: currentEntityUnique,
+                        entityType: currentEntityType,
+                    }
+                    : undefined;
+                this.#parentEntityContext?.setParent(parent);
+            }, '_observeEntityContextUnique');
         });
     }
     setupView(viewElement) {
@@ -153,25 +154,17 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
                 this.selection.setMultiple(multiple);
             }
         }, 'umbCollectionHasBulkActionsObserver');
-        if (this.#config.pageSize) {
-            this.pagination.setPageSize(this.#config.pageSize);
-        }
+        this.pagination.setPageSize(this.#config.pageSize ?? 50);
         const filterValue = this._filter.getValue();
         this._filter.setValue({
             ...this.#defaultFilter,
             ...this.#config,
             ...filterValue,
             skip: filterValue.skip ?? 0,
-            take: this.#config.pageSize,
+            take: this.pagination.getPageSize(),
         });
         this.#userDefinedProperties.setValue(this.#config?.userDefinedProperties ?? []);
-        const viewManagerConfig = { defaultViewAlias: this.#defaultViewAlias };
-        if (this.#config.layouts && this.#config.layouts.length > 0) {
-            this.#viewLayouts.setValue(this.#config.layouts);
-            const aliases = this.#config.layouts.map((layout) => layout.collectionView);
-            viewManagerConfig.manifestFilter = (manifest) => aliases.includes(manifest.alias);
-        }
-        this.view.setConfig(viewManagerConfig);
+        this.#configureViews();
         this._configured = true;
     }
     #checkIfInitialized() {
@@ -335,4 +328,13 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
             }
         });
     }
+    #configureViews() {
+        const viewManagerConfig = { defaultViewAlias: this.#defaultViewAlias };
+        const layouts = this.#config?.layouts;
+        if (layouts && layouts.length > 0) {
+            this.#viewLayouts.setValue(layouts);
+            viewManagerConfig.viewsOverride = layouts;
+        }
+        this.view.setConfig(viewManagerConfig);
+    }
 }

package/dist-cms/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.d.ts

@@ -2,8 +2,8 @@ import type { UmbEntityCollectionItemElement } from '../entity-collection-item-e
 import type { UmbCollectionItemModel } from '../types.js';
 import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
-import type { UmbWithOptionalThumbnailModel } from '../../../models/index.js';
-type UmbDefaultCollectionItemCardItemModel = UmbCollectionItemModel & UmbWithOptionalThumbnailModel;
+import type { UmbWithOptionalDescriptionModel, UmbWithOptionalThumbnailModel } from '../../../models/index.js';
+type UmbDefaultCollectionItemCardItemModel = UmbCollectionItemModel & UmbWithOptionalThumbnailModel & UmbWithOptionalDescriptionModel;
 export declare class UmbDefaultCollectionItemCardElement extends UmbLitElement implements UmbEntityCollectionItemElement {
     #private;
     item?: UmbDefaultCollectionItemCardItemModel;

package/dist-cms/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.js

@@ -34,6 +34,7 @@ let UmbDefaultCollectionItemCardElement = class UmbDefaultCollectionItemCardElem
         return html `
 			<umb-figure-card
 				name=${this.item.name ?? `${getItemFallbackName(this.item)}`}
+				description=${ifDefined(this.item.description ?? undefined)}
 				href=${ifDefined(this.href)}
 				?selectable=${this.selectable}
 				?select-only=${this.selectOnly}

package/dist-cms/packages/core/collection/item/entity-collection-item-ref/default-collection-item-ref.element.d.ts

@@ -2,9 +2,11 @@ import type { UmbCollectionItemModel } from '../types.js';
 import type { UmbEntityCollectionItemElement } from '../entity-collection-item-element.interface.js';
 import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbWithOptionalDescriptionModel } from '../../../models/index.js';
+type UmbDefaultCollectionItemRefItemModel = UmbCollectionItemModel & UmbWithOptionalDescriptionModel;
 export declare class UmbDefaultCollectionItemRefElement extends UmbLitElement implements UmbEntityCollectionItemElement {
     #private;
-    item?: UmbCollectionItemModel;
+    item?: UmbDefaultCollectionItemRefItemModel;
     selectable: boolean;
     selected: boolean;
     selectOnly: boolean;
@@ -17,3 +19,4 @@ declare global {
         'umb-default-collection-item-ref': UmbDefaultCollectionItemRefElement;
     }
 }
+export {};

package/dist-cms/packages/core/collection/item/entity-collection-item-ref/default-collection-item-ref.element.js

@@ -33,6 +33,7 @@ let UmbDefaultCollectionItemRefElement = class UmbDefaultCollectionItemRefElemen
             return nothing;
         return html `<uui-ref-node
 			name=${this.item.name ?? `${getItemFallbackName(this.item)}`}
+			detail=${ifDefined(this.item.description ?? undefined)}
 			@selected=${this.#onSelected}
 			@deselected=${this.#onDeselected}
 			?selectable=${this.selectable}

package/dist-cms/packages/core/collection/item/umb-entity-collection-item-element-base.element.d.ts

@@ -3,6 +3,7 @@ import { UmbLitElement } from '../../lit-element/index.js';
 import type { PropertyValueMap } from '../../../../external/lit/index.js';
 export declare abstract class UmbEntityCollectionItemElementBase extends UmbLitElement {
     #private;
+    constructor();
     protected _component?: any;
     set item(value: UmbCollectionItemModel | undefined);
     get item(): UmbCollectionItemModel | undefined;

package/dist-cms/packages/core/collection/item/umb-entity-collection-item-element-base.element.js

@@ -11,8 +11,18 @@ import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 import { UmbDeselectedEvent, UmbSelectedEvent } from '../../event/index.js';
 import { UmbRoutePathAddendumContext } from '../../router/index.js';
 import { UMB_MARK_ATTRIBUTE_NAME } from '../../const/index.js';
+import { UmbEntityContext, UMB_ENTITY_CONTEXT } from '../../entity/index.js';
+import { UmbContextBoundaryController } from '../../../../libs/context-api/index.js';
 export class UmbEntityCollectionItemElementBase extends UmbLitElement {
+    constructor() {
+        super();
+        // Prevent any outer/ancestor UMB_ENTITY_CONTEXT from leaking into this collection item.
+        // Each item provides its own entity context, and consumers inside should never
+        // accidentally receive a context from an ancestor or sibling before this item supplies its own.
+        new UmbContextBoundaryController(this, UMB_ENTITY_CONTEXT);
+    }
     #extensionsController;
+    #entityContext;
     #item;
     set item(value) {
         const oldValue = this.#item;
@@ -24,6 +34,8 @@ export class UmbEntityCollectionItemElementBase extends UmbLitElement {
         // If the component is already created and the entity type is the same, we can just update the item.
         if (this._component && value.entityType === oldValue?.entityType) {
             this._component.item = value;
+            this.#entityContext?.setUnique(value.unique ?? null);
+            this.#pathAddendum.setAddendum(this.getPathAddendum(value.entityType, value.unique));
             return;
         }
         this.#pathAddendum.setAddendum(this.getPathAddendum(value.entityType, value.unique));
@@ -118,9 +130,14 @@ export class UmbEntityCollectionItemElementBase extends UmbLitElement {
         if (this.#extensionsController) {
             this.#extensionsController.destroy();
         }
+        this.#entityContext?.destroy();
+        this.#entityContext = undefined;
         this.#extensionsController = new UmbExtensionsElementInitializer(this, umbExtensionsRegistry, this.getExtensionType(), (manifest) => manifest.forEntityTypes.includes(entityType), (extensionControllers) => {
             this._component?.remove();
             const component = extensionControllers[0]?.component || this.createFallbackElement();
+            this.#entityContext = new UmbEntityContext(component);
+            this.#entityContext.setEntityType(entityType);
+            this.#entityContext.setUnique(this.item?.unique ?? null);
             // TODO: I would say this code can use feature of the UmbExtensionsElementInitializer, to set properties and get a fallback element. [NL]
             // assign the properties to the component
             component.item = this.item;
@@ -144,6 +161,8 @@ export class UmbEntityCollectionItemElementBase extends UmbLitElement {
     destroy() {
         this._component?.removeEventListener(UmbSelectedEvent.TYPE, this.#boundOnSelected);
         this._component?.removeEventListener(UmbDeselectedEvent.TYPE, this.#boundOnDeselected);
+        this.#entityContext?.destroy();
+        this.#entityContext = undefined;
         super.destroy();
     }
 }

package/dist-cms/packages/core/collection/types.d.ts

@@ -33,7 +33,7 @@ export interface UmbCollectionColumnConfiguration {
 }
 export interface UmbCollectionLayoutConfiguration {
     icon?: string;
-    name: string;
+    name?: string;
     collectionView: string;
 }
 export type UmbCollectionSelectionConfiguration = {

package/dist-cms/packages/core/collection/view/card/card-collection-view.element.js

@@ -29,10 +29,7 @@ let UmbCardCollectionViewElement = class UmbCardCollectionViewElement extends Um
 			?selected=${this._isSelectedItem(item.unique)}
 			@selected=${() => this._selectItem(item.unique)}
 			@deselected=${() => this._deselectItem(item.unique)}>
-			<umb-entity-actions-bundle
-				slot="actions"
-				.entityType=${item.entityType}
-				.unique=${item.unique}></umb-entity-actions-bundle>
+			<umb-entity-actions-bundle slot="actions"></umb-entity-actions-bundle>
 		</umb-entity-collection-item-card>`;
     }
     static { this.styles = [

package/dist-cms/packages/core/collection/view/collection-view.manager.d.ts

@@ -1,3 +1,4 @@
+import type { UmbCollectionLayoutConfiguration } from '../types.js';
 import type { ManifestCollectionView } from './collection-view.extension.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
@@ -5,6 +6,7 @@ import type { UmbRoute } from '../../router/index.js';
 export interface UmbCollectionViewManagerConfig {
     defaultViewAlias?: string;
     manifestFilter?: (manifest: ManifestCollectionView) => boolean;
+    viewsOverride?: Array<UmbCollectionLayoutConfiguration>;
 }
 export declare class UmbCollectionViewManager extends UmbControllerBase {
     #private;

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

@@ -8,6 +8,7 @@ export class UmbCollectionViewManager extends UmbControllerBase {
     #routes;
     #rootPathName;
     #defaultViewAlias;
+    #viewsOverride;
     constructor(host) {
         super(host);
         this.#views = new UmbArrayState([], (x) => x.alias);
@@ -26,6 +27,7 @@ export class UmbCollectionViewManager extends UmbControllerBase {
     }
     setConfig(config) {
         this.#defaultViewAlias = config.defaultViewAlias;
+        this.#viewsOverride = config.viewsOverride;
         this.#observeViews(config.manifestFilter);
     }
     // Views
@@ -46,8 +48,14 @@ export class UmbCollectionViewManager extends UmbControllerBase {
         return this.#currentView.getValue();
     }
     #observeViews(filter) {
-        return new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'collectionView', filter ?? null, (views) => {
-            const manifests = views.map((view) => view.manifest);
+        return new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'collectionView', filter ?? null, (manifestInitializer) => {
+            let manifests = manifestInitializer.map((view) => view.manifest);
+            // Reorder and filter to match the `viewsOverride` array order
+            if (this.#viewsOverride?.length) {
+                manifests = this.#viewsOverride
+                    .map((override) => manifests.find((m) => m.alias === override.collectionView))
+                    .filter((m) => m !== undefined);
+            }
             this.#views.setValue(manifests);
             this.#createRoutes(manifests);
         });
@@ -56,7 +64,10 @@ export class UmbCollectionViewManager extends UmbControllerBase {
         let routes = [];
         if (views && views.length > 0) {
             // find the default view from the config. If it doesn't exist, use the first view
-            const defaultView = views.find((view) => view.alias === this.#defaultViewAlias);
+            const firstOverrideView = this.#viewsOverride?.length
+                ? views.find((view) => view.alias === this.#viewsOverride[0].collectionView)
+                : null;
+            const defaultView = firstOverrideView ?? views.find((view) => view.alias === this.#defaultViewAlias);
             const fallbackView = defaultView ?? views[0];
             routes = views.map((view) => {
                 return {

package/dist-cms/packages/core/collection/view/ref/ref-collection-view.element.js

@@ -27,10 +27,7 @@ let UmbRefCollectionViewElement = class UmbRefCollectionViewElement extends UmbC
 			?selected=${this._isSelectedItem(item.unique)}
 			@selected=${() => this._selectItem(item.unique)}
 			@deselected=${() => this._deselectItem(item.unique)}>
-			<umb-entity-actions-bundle
-				slot="actions"
-				.entityType=${item.entityType}
-				.unique=${item.unique}></umb-entity-actions-bundle>
+			<umb-entity-actions-bundle slot="actions"></umb-entity-actions-bundle>
 		</umb-entity-collection-item-ref>`;
     }
     static { this.styles = [

package/dist-cms/packages/core/collection/view/umb-collection-view-element-base.d.ts

@@ -4,9 +4,9 @@ import { UmbLitElement } from '../../lit-element/index.js';
  * Abstract base class for collection view elements.
  * Provides shared state management, selection handling, and context consumption for collection views.
  */
-export declare abstract class UmbCollectionViewElementBase extends UmbLitElement {
+export declare abstract class UmbCollectionViewElementBase<CollectionItemType extends UmbCollectionItemModel = UmbCollectionItemModel> extends UmbLitElement {
     #private;
-    protected _items: Array<UmbCollectionItemModel>;
+    protected _items: Array<CollectionItemType>;
     protected _selectable: boolean;
     protected _multiple: boolean;
     protected _selectOnly: boolean;
@@ -16,20 +16,20 @@ export declare abstract class UmbCollectionViewElementBase extends UmbLitElement
     constructor();
     /**
      * Determines if an item is selectable
-     * @param {UmbCollectionItemModel} item - The item to check for selectability.
+     * @param {CollectionItemType} item - The item to check for selectability.
      * @returns {boolean} True if the item is selectable, false otherwise.
      */
-    protected _isSelectableItem(item: UmbCollectionItemModel): boolean;
+    protected _isSelectableItem(item: CollectionItemType): boolean;
     /**
      * Selects an item in the collection.
      * @param {string} unique - The unique identifier of the item to select.
      */
-    protected _selectItem(unique: UmbCollectionItemModel['unique']): void;
+    protected _selectItem(unique: CollectionItemType['unique']): void;
     /**
      * Deselects an item in the collection.
      * @param {string} unique - The unique identifier of the item to deselect.
      */
-    protected _deselectItem(unique: UmbCollectionItemModel['unique']): void;
+    protected _deselectItem(unique: CollectionItemType['unique']): void;
     /**
      * Sets the current selection in the collection.
      * @param {Array<string>} selection - An array of unique identifiers representing the new selection.
@@ -40,5 +40,5 @@ export declare abstract class UmbCollectionViewElementBase extends UmbLitElement
      * @param {string} unique - The unique identifier of the item to check.
      * @returns {boolean} True if the item is selected, false otherwise.
      */
-    protected _isSelectedItem(unique: UmbCollectionItemModel['unique']): boolean;
+    protected _isSelectedItem(unique: CollectionItemType['unique']): boolean;
 }

package/dist-cms/packages/core/collection/view/umb-collection-view-element-base.js

@@ -38,7 +38,7 @@ export class UmbCollectionViewElementBase extends UmbLitElement {
     }
     /**
      * Determines if an item is selectable
-     * @param {UmbCollectionItemModel} item - The item to check for selectability.
+     * @param {CollectionItemType} item - The item to check for selectability.
      * @returns {boolean} True if the item is selectable, false otherwise.
      */
     _isSelectableItem(item) {

package/dist-cms/packages/core/collection/workspace-view/collection-workspace-view.element.js

@@ -13,6 +13,7 @@ let UmbCollectionWorkspaceViewElement = class UmbCollectionWorkspaceViewElement
         if (!this.manifest.meta.collectionAlias)
             return html ` <div>No Collection Alias in Manifest</div>`;
         return html `<umb-collection
+			data-mark="collection:${this.manifest.meta.collectionAlias}"
 			alias=${this.manifest.meta.collectionAlias}
 			.config=${this._config}
 			.filter=${this._filter}></umb-collection>`;

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

@@ -9,6 +9,7 @@ export declare class UmbDropdownElement extends UmbLitElement {
     color: UUIInterfaceColor;
     placement: PopoverContainerPlacement;
     compact: boolean;
+    disabled: boolean;
     hideExpand: boolean;
     popoverContainerElement?: UUIPopoverContainerElement;
     openDropdown(): void;

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

@@ -17,6 +17,7 @@ let UmbDropdownElement = class UmbDropdownElement extends UmbLitElement {
         this.color = 'default';
         this.placement = 'bottom-start';
         this.compact = false;
+        this.disabled = false;
         this.hideExpand = false;
     }
     #open;
@@ -67,7 +68,8 @@ let UmbDropdownElement = class UmbDropdownElement extends UmbLitElement {
 				.look=${this.look}
 				.color=${this.color}
 				.label=${this.label ?? ''}
-				.compact=${this.compact}>
+				.compact=${this.compact}
+				?disabled=${this.disabled}>
 				<slot name="label"></slot>
 				${when(!this.hideExpand, () => html `<uui-symbol-expand id="symbol-expand" .open=${this.#open}></uui-symbol-expand>`)}
 			</uui-button>
@@ -113,6 +115,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UmbDropdownElement.prototype, "compact", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbDropdownElement.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'hide-expand' })
 ], UmbDropdownElement.prototype, "hideExpand", void 0);

package/dist-cms/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.d.ts

@@ -1,17 +1,25 @@
 import { nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
-import type { PropertyValueMap } from '../../../../external/lit/index.js';
 export declare class UmbEntityActionsBundleElement extends UmbLitElement {
     #private;
-    entityType?: string;
-    unique?: string | null;
+    /**
+     * @deprecated Provide through the UMB_ENTITY_CONTEXT context instead. Will be removed in Umbraco 19.
+     * @returns {string | undefined} The entity type.
+     */
+    get entityType(): string | undefined;
+    set entityType(value: string | undefined);
+    /**
+     * @deprecated Provide through the UMB_ENTITY_CONTEXT context instead. Will be removed in Umbraco 19.
+     * @returns {string | null | undefined} The unique key.
+     */
+    get unique(): string | null | undefined;
+    set unique(value: string | null | undefined);
     label?: string;
     private _numberOfActions;
     private _firstActionManifest?;
     private _firstActionApi?;
     private _firstActionHref?;
     constructor();
-    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/core/components/entity-actions-bundle/entity-actions-bundle.element.js

@@ -9,24 +9,70 @@ import { css, customElement, html, ifDefined, nothing, property, state } from '.
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 import { UmbExtensionsManifestInitializer, createExtensionApi } from '../../../../libs/extension-api/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
+import { UMB_ENTITY_CONTEXT } from '../../entity/index.js';
+import { observeMultiple } from '../../../../libs/observable-api/index.js';
+import { UmbDeprecation } from '../../utils/index.js';
+const umbEntityActionsBundleDeprecation = new UmbDeprecation({
+    deprecated: 'The `entityType` and `unique` properties on `<umb-entity-actions-bundle>`.',
+    removeInVersion: '19',
+    solution: 'Provide the entity type and unique via the UMB_ENTITY_CONTEXT context instead.',
+});
 let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends UmbLitElement {
-    // TODO: Ideally this is provided on a higher level, as in the Tree-item, Workspace, Collection-Row, etc [NL]
-    #entityContext;
+    /**
+     * @deprecated Provide through the UMB_ENTITY_CONTEXT context instead. Will be removed in Umbraco 19.
+     * @returns {string | undefined} The entity type.
+     */
+    get entityType() {
+        return this.#entityType;
+    }
+    set entityType(value) {
+        if (value === this.#entityType)
+            return;
+        umbEntityActionsBundleDeprecation.warn();
+        this.#entityType = value;
+        this.#ensureFallbackEntityContext().setEntityType(value);
+        this.#requestObserveEntityActions();
+    }
+    /**
+     * @deprecated Provide through the UMB_ENTITY_CONTEXT context instead. Will be removed in Umbraco 19.
+     * @returns {string | null | undefined} The unique key.
+     */
+    get unique() {
+        return this.#unique;
+    }
+    set unique(value) {
+        if (value === this.#unique)
+            return;
+        umbEntityActionsBundleDeprecation.warn();
+        this.#unique = value;
+        this.#ensureFallbackEntityContext().setUnique(value ?? null);
+        this.#requestObserveEntityActions();
+    }
+    #entityType;
+    #unique;
+    #fallbackEntityContext;
     #inViewport;
     #observingEntityActions;
     constructor() {
         super();
         this._numberOfActions = 0;
-        // TODO: Ideally this is provided on a higher level, as in the Tree-item, Workspace, Collection-Row, etc [NL]
-        this.#entityContext = new UmbEntityContext(this);
         this.#inViewport = false;
         this.#observingEntityActions = false;
+        this.consumeContext(UMB_ENTITY_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(observeMultiple([context.entityType, context.unique]), ([entityType, unique]) => {
+                this.#entityType = entityType ?? undefined;
+                this.#unique = unique;
+                this.#requestObserveEntityActions();
+            });
+        });
         // Only observe entity actions when the element is in the viewport
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     this.#inViewport = true;
-                    this.#observeEntityActions();
+                    this.#requestObserveEntityActions();
                 }
             });
         }, {
@@ -35,23 +81,23 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
         });
         observer.observe(this);
     }
-    updated(_changedProperties) {
-        if (_changedProperties.has('entityType') && _changedProperties.has('unique')) {
-            this.#entityContext.setEntityType(this.entityType);
-            this.#entityContext.setUnique(this.unique ?? null);
-            this.#observeEntityActions();
+    // TODO: v19 remove when fallback context is no longer needed
+    #ensureFallbackEntityContext() {
+        if (!this.#fallbackEntityContext) {
+            this.#fallbackEntityContext = new UmbEntityContext(this);
         }
+        return this.#fallbackEntityContext;
     }
-    #observeEntityActions() {
-        if (!this.entityType)
+    #requestObserveEntityActions() {
+        if (!this.#entityType)
             return;
-        if (this.unique === undefined)
+        if (this.#unique === undefined)
             return;
         if (!this.#inViewport)
             return; // Only observe if the element is in the viewport
         if (this.#observingEntityActions)
             return;
-        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'entityAction', (ext) => ext.forEntityTypes.includes(this.entityType), async (actions) => {
+        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'entityAction', (ext) => ext.forEntityTypes.includes(this.#entityType), async (actions) => {
             this._numberOfActions = actions.length;
             const oldFirstManifest = this._firstActionManifest;
             this._firstActionManifest =
@@ -66,7 +112,7 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
             return;
         const oldFirstApi = this._firstActionApi;
         this._firstActionApi = await createExtensionApi(this, this._firstActionManifest, [
-            { unique: this.unique, entityType: this.entityType, meta: this._firstActionManifest.meta },
+            { unique: this.#unique, entityType: this.#entityType, meta: this._firstActionManifest.meta },
         ]);
         if (this._firstActionApi) {
             this._firstActionApi.manifest = this._firstActionManifest;
@@ -99,10 +145,12 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
     #renderFirstAction() {
         if (!this._firstActionApi || !this._firstActionManifest)
             return nothing;
+        const label = this.localize.string(this._firstActionManifest.meta.label, this.label);
         return html `
 			<uui-button
-				label=${this.localize.string(this._firstActionManifest.meta.label, this.label)}
-				data-mark=${'entity-action:' + this._firstActionManifest.alias}
+				label=${label}
+				title=${label}
+				data-mark=${`entity-action:${this._firstActionManifest.alias}`}
 				href=${ifDefined(this._firstActionHref)}
 				@click=${this.#onFirstActionClick}>
 				<umb-icon name=${ifDefined(this._firstActionManifest.meta.icon)}></umb-icon>
@@ -119,10 +167,10 @@ let UmbEntityActionsBundleElement = class UmbEntityActionsBundleElement extends
 };
 __decorate([
     property({ type: String, attribute: 'entity-type' })
-], UmbEntityActionsBundleElement.prototype, "entityType", void 0);
+], UmbEntityActionsBundleElement.prototype, "entityType", null);
 __decorate([
     property({ type: String })
-], UmbEntityActionsBundleElement.prototype, "unique", void 0);
+], UmbEntityActionsBundleElement.prototype, "unique", null);
 __decorate([
     property({ type: String })
 ], UmbEntityActionsBundleElement.prototype, "label", void 0);