@umbraco-cms/backoffice 18.0.2 → 18.1.0-rc

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

@@ -0,0 +1,32 @@
+import { LitElement } from '../../../../external/lit/index.js';
+/**
+ * An overlay that frames its parent with a rounded border and shows a label tab
+ * just above the parent's top-right corner. Visibility is controlled by the consumer via
+ * `--umb-entity-frame-opacity` (defaults to `1`); the typical pattern is for the parent
+ * container to set it to `0` by default and toggle to `1` on `:hover` and/or `:focus-within`.
+ * The parent must establish a positioning context (e.g. `position: relative`), and must not
+ * clip overflow above its top edge (the tab renders outside the parent's content box).
+ * @element umb-entity-frame
+ * @slot - Optional rich content for the tab. Falls back to the `label` property.
+ * @cssprop --umb-entity-frame-border-width - Thickness of the border. Defaults to `2px`.
+ * @cssprop --umb-entity-frame-color - Accent colour for the border and tab background. Defaults to `--uui-color-focus`.
+ * @cssprop --umb-entity-frame-contrast-color - Text colour for the tab. Defaults to `--uui-color-selected-contrast`. Override when using a custom `--umb-entity-frame-color` that does not pair with the default contrast token.
+ * @cssprop --umb-entity-frame-opacity - Opacity of the border and tab. Defaults to `1`. Set to `0` on the parent and toggle to `1` on `:hover` / `:focus-within` to gate visibility.
+ * @augments {LitElement}
+ */
+export declare class UmbEntityFrameElement extends LitElement {
+    /**
+     * Text displayed in the tab when no slot content is projected.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    label: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-entity-frame': UmbEntityFrameElement;
+    }
+}

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

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, customElement, html, property, LitElement } from '../../../../external/lit/index.js';
+/**
+ * An overlay that frames its parent with a rounded border and shows a label tab
+ * just above the parent's top-right corner. Visibility is controlled by the consumer via
+ * `--umb-entity-frame-opacity` (defaults to `1`); the typical pattern is for the parent
+ * container to set it to `0` by default and toggle to `1` on `:hover` and/or `:focus-within`.
+ * The parent must establish a positioning context (e.g. `position: relative`), and must not
+ * clip overflow above its top edge (the tab renders outside the parent's content box).
+ * @element umb-entity-frame
+ * @slot - Optional rich content for the tab. Falls back to the `label` property.
+ * @cssprop --umb-entity-frame-border-width - Thickness of the border. Defaults to `2px`.
+ * @cssprop --umb-entity-frame-color - Accent colour for the border and tab background. Defaults to `--uui-color-focus`.
+ * @cssprop --umb-entity-frame-contrast-color - Text colour for the tab. Defaults to `--uui-color-selected-contrast`. Override when using a custom `--umb-entity-frame-color` that does not pair with the default contrast token.
+ * @cssprop --umb-entity-frame-opacity - Opacity of the border and tab. Defaults to `1`. Set to `0` on the parent and toggle to `1` on `:hover` / `:focus-within` to gate visibility.
+ * @augments {LitElement}
+ */
+let UmbEntityFrameElement = class UmbEntityFrameElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Text displayed in the tab when no slot content is projected.
+         * @type {string}
+         * @attr
+         * @default ''
+         */
+        this.label = '';
+    }
+    render() {
+        return html `
+			<div class="border" aria-hidden="true"></div>
+			<div class="tab"><slot>${this.label}</slot></div>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				position: absolute;
+				inset: 0;
+				pointer-events: none;
+				z-index: 1;
+			}
+
+			.border,
+			.tab {
+				opacity: var(--umb-entity-frame-opacity, 1);
+				transition: opacity 120ms ease-out;
+			}
+
+			.border {
+				position: absolute;
+				inset: 0;
+				border: var(--umb-entity-frame-border-width, 2px) solid var(--umb-entity-frame-color, var(--uui-color-focus));
+				border-radius: var(--uui-border-radius);
+				border-top-right-radius: 0;
+				box-sizing: border-box;
+				pointer-events: none;
+			}
+
+			.tab {
+				position: absolute;
+				bottom: 100%;
+				right: 0;
+				background: var(--umb-entity-frame-color, var(--uui-color-focus));
+				color: var(--umb-entity-frame-contrast-color, var(--uui-color-selected-contrast));
+				padding: var(--uui-size-2) var(--uui-size-2) var(--uui-size-1);
+				border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;
+				font-size: var(--uui-type-small-size);
+				line-height: 1;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: String })
+], UmbEntityFrameElement.prototype, "label", void 0);
+UmbEntityFrameElement = __decorate([
+    customElement('umb-entity-frame')
+], UmbEntityFrameElement);
+export { UmbEntityFrameElement };

package/dist-cms/packages/core/components/entity-frame/index.d.ts

@@ -0,0 +1,2 @@
+import './entity-frame.element.js';
+export * from './entity-frame.element.js';

package/dist-cms/packages/core/components/entity-frame/index.js

@@ -0,0 +1,2 @@
+import './entity-frame.element.js';
+export * from './entity-frame.element.js';

package/dist-cms/packages/core/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './figure-card/figure-card.element.js';
 export * from './code-block/index.js';
 export * from './dropdown/index.js';
 export * from './entity-actions-bundle/index.js';
+export * from './entity-frame/index.js';
 export * from './footer-layout/index.js';
 export * from './header-app/index.js';
 export * from './history/index.js';

package/dist-cms/packages/core/components/index.js

@@ -8,6 +8,7 @@ export * from './figure-card/figure-card.element.js';
 export * from './code-block/index.js';
 export * from './dropdown/index.js';
 export * from './entity-actions-bundle/index.js';
+export * from './entity-frame/index.js';
 export * from './footer-layout/index.js';
 export * from './header-app/index.js';
 export * from './history/index.js';

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

@@ -45,7 +45,7 @@ let UmbInputDropdownListElement = class UmbInputDropdownListElement extends UmbF
         return html `
 			<uui-select
 				label=${this.localize.term('general_fieldFor', [this.name])}
-				.placeholder=${this.placeholder ?? ''}
+				.placeholder=${this.localize.string(this.placeholder)}
 				.options=${this.options ?? []}
 				@change=${this.#onChange}
 				?readonly=${this.readonly}>

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

@@ -6,12 +6,36 @@ declare const UmbInputEntityElement_base: import("../../../../libs/extension-api
 export declare class UmbInputEntityElement extends UmbInputEntityElement_base {
     #private;
     protected getFormElement(): undefined;
+    getIcon?: (item: UmbItemModel) => string;
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default
+     */
     set min(value: number);
     get min(): number;
+    /**
+     * Min validation message.
+     * @type {string}
+     * @attr
+     * @default
+     */
     minMessage: string;
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default
+     */
     set max(value: number);
     get max(): number;
-    getIcon?: (item: UmbItemModel) => string;
+    /**
+     * Max validation message.
+     * @type {string}
+     * @attr
+     * @default
+     */
     maxMessage: string;
     set selection(uniques: Array<string>);
     get selection(): Array<string>;

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

@@ -16,6 +16,12 @@ let UmbInputEntityElement = class UmbInputEntityElement extends UmbFormControlMi
     getFormElement() {
         return undefined;
     }
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default
+     */
     set min(value) {
         this.#min = value;
         if (this.#pickerContext) {
@@ -26,6 +32,12 @@ let UmbInputEntityElement = class UmbInputEntityElement extends UmbFormControlMi
         return this.#min;
     }
     #min;
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default
+     */
     set max(value) {
         this.#max = value;
         if (this.#pickerContext) {
@@ -77,8 +89,20 @@ let UmbInputEntityElement = class UmbInputEntityElement extends UmbFormControlMi
             },
         });
         this.#min = 0;
-        this.minMessage = 'This field need more items';
+        /**
+         * Min validation message.
+         * @type {string}
+         * @attr
+         * @default
+         */
+        this.minMessage = 'This field needs more items';
         this.#max = Infinity;
+        /**
+         * Max validation message.
+         * @type {string}
+         * @attr
+         * @default
+         */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && (this.#pickerContext?.getSelection().length ?? 0) < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && (this.#pickerContext?.getSelection().length ?? 0) > this.max);
@@ -147,6 +171,9 @@ let UmbInputEntityElement = class UmbInputEntityElement extends UmbFormControlMi
 		`,
     ]; }
 };
+__decorate([
+    property({ attribute: false })
+], UmbInputEntityElement.prototype, "getIcon", void 0);
 __decorate([
     property({ type: Number })
 ], UmbInputEntityElement.prototype, "min", null);
@@ -157,10 +184,7 @@ __decorate([
     property({ type: Number })
 ], UmbInputEntityElement.prototype, "max", null);
 __decorate([
-    property({ attribute: false })
-], UmbInputEntityElement.prototype, "getIcon", void 0);
-__decorate([
-    property({ type: String, attribute: 'min-message' })
+    property({ type: String, attribute: 'max-message' })
 ], UmbInputEntityElement.prototype, "maxMessage", void 0);
 __decorate([
     property({ type: Array })

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

@@ -2,6 +2,7 @@ import { UmbLitElement } from '../../lit-element/index.js';
 declare const UmbInputWithAliasElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputWithAliasElement extends UmbInputWithAliasElement_base {
     #private;
+    name?: string;
     label: string;
     placeholder?: string;
     alias: string;
@@ -10,6 +11,7 @@ export declare class UmbInputWithAliasElement extends UmbInputWithAliasElement_b
     aliasReadonly: boolean;
     autoGenerateAlias?: boolean;
     aliasPattern: string;
+    autocomplete?: string;
     private _aliasLocked;
     protected firstUpdated(): void;
     focus(): Promise<void> | undefined;

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

@@ -94,7 +94,9 @@ let UmbInputWithAliasElement = class UmbInputWithAliasElement extends UmbFormCon
         return html `
 			<uui-input
 				id="name"
+				name=${ifDefined(this.name)}
 				placeholder=${ifDefined(this.placeholder)}
+				.autocomplete=${this.autocomplete}
 				label=${nameLabel}
 				.value=${this.value ?? ''}
 				@input=${this.#onNameChange}
@@ -103,11 +105,12 @@ let UmbInputWithAliasElement = class UmbInputWithAliasElement extends UmbFormCon
 				${!this.readonly
             ? html `
 							<uui-input-lock
-								name="alias"
+								name=${ifDefined(this.name ? `${this.name}-alias` : undefined)}
 								slot="append"
 								label=${aliasLabel}
 								placeholder=${aliasLabel}
 								.value=${this.alias}
+								.autocomplete=${this.autocomplete}
 								?auto-width=${!!this.value}
 								?locked=${this._aliasLocked && !this.aliasReadonly}
 								?readonly=${this._aliasLocked || this.aliasReadonly}
@@ -151,6 +154,9 @@ let UmbInputWithAliasElement = class UmbInputWithAliasElement extends UmbFormCon
 		}
 	`; }
 };
+__decorate([
+    property({ type: String })
+], UmbInputWithAliasElement.prototype, "name", void 0);
 __decorate([
     property({ type: String })
 ], UmbInputWithAliasElement.prototype, "label", void 0);
@@ -175,6 +181,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'alias-pattern' })
 ], UmbInputWithAliasElement.prototype, "aliasPattern", void 0);
+__decorate([
+    property({ type: String, attribute: 'autocomplete' })
+], UmbInputWithAliasElement.prototype, "autocomplete", void 0);
 __decorate([
     state()
 ], UmbInputWithAliasElement.prototype, "_aliasLocked", void 0);

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

@@ -15,7 +15,7 @@ export declare class UmbMultipleColorPickerInputElement extends UmbMultipleColor
     min?: number;
     /**
      * Min validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */
@@ -29,7 +29,7 @@ export declare class UmbMultipleColorPickerInputElement extends UmbMultipleColor
     max?: number;
     /**
      * Max validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */

package/dist-cms/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.js

@@ -36,14 +36,14 @@ let UmbMultipleColorPickerInputElement = class UmbMultipleColorPickerInputElemen
         });
         /**
          * Min validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * Max validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
@@ -177,7 +177,7 @@ __decorate([
     property({ type: Number })
 ], UmbMultipleColorPickerInputElement.prototype, "max", void 0);
 __decorate([
-    property({ type: String, attribute: 'min-message' })
+    property({ type: String, attribute: 'max-message' })
 ], UmbMultipleColorPickerInputElement.prototype, "maxMessage", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist-cms/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.d.ts

@@ -14,7 +14,7 @@ export declare class UmbInputMultipleTextStringElement extends UmbInputMultipleT
     min?: number;
     /**
      * Min validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */
@@ -28,7 +28,7 @@ export declare class UmbInputMultipleTextStringElement extends UmbInputMultipleT
     max?: number;
     /**
      * Max validation message.
-     * @type {boolean}
+     * @type {string}
      * @attr
      * @default
      */

package/dist-cms/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.js

@@ -67,14 +67,14 @@ let UmbInputMultipleTextStringElement = class UmbInputMultipleTextStringElement
         });
         /**
          * Min validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * Max validation message.
-         * @type {boolean}
+         * @type {string}
          * @attr
          * @default
          */
@@ -210,7 +210,7 @@ __decorate([
     property({ type: Number })
 ], UmbInputMultipleTextStringElement.prototype, "max", void 0);
 __decorate([
-    property({ type: String, attribute: 'min-message' })
+    property({ type: String, attribute: 'max-message' })
 ], UmbInputMultipleTextStringElement.prototype, "maxMessage", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

@@ -5,6 +5,14 @@ export interface UmbTableItem {
     entityType?: string;
     data: Array<UmbTableItemData>;
     selectable?: boolean;
+    active?: boolean;
+    /** When set, the row shows a children indicator. The nested options control what activating it does. */
+    childrenIndicator?: {
+        /** When set, the indicator becomes an anchor linking to this href. */
+        href?: string;
+        /** When set (and no `href` is provided), the indicator becomes a button invoking this callback. */
+        onOpen?: () => void;
+    };
 }
 export interface UmbTableItemData {
     columnAlias: string;
@@ -99,6 +107,8 @@ export declare class UmbTableElement extends UmbLitElement {
     get sortable(): boolean;
     set sortable(newVal: boolean);
     private _selectionMode;
+    private _columnConfigurationHash;
+    private _hasChildrenColumn;
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     constructor();

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, customElement, html, ifDefined, keyed, property, ref, repeat, state, when, } from '../../../../external/lit/index.js';
+import { css, customElement, html, ifDefined, keyed, nothing, property, ref, repeat, state, when, } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 import { UmbSorterController } from '../../sorter/index.js';
 import { UmbTextStyles } from '../../style/index.js';
@@ -75,31 +75,51 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
         }
         this.requestUpdate('sortable', oldVal);
     }
-    #lastColumnKey;
     #cellElementCache;
+    #rowRenderedCallbacks;
+    #getRowRenderedCallback(item) {
+        const existing = this.#rowRenderedCallbacks.get(item.id);
+        if (existing) {
+            existing.current = item;
+            return existing.fn;
+        }
+        const entry = {
+            current: item,
+            fn: (el) => this.onRowRendered?.(el, entry.current),
+        };
+        this.#rowRenderedCallbacks.set(item.id, entry);
+        return entry.fn;
+    }
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
         if (changedProperties.has('selection')) {
             this._selectionMode = this.selection.length > 0;
         }
+        if (changedProperties.has('_items')) {
+            const currentIds = new Set(this._items.map((i) => i.id));
+            for (const id of this.#rowRenderedCallbacks.keys()) {
+                if (!currentIds.has(id))
+                    this.#rowRenderedCallbacks.delete(id);
+            }
+            this._hasChildrenColumn = this._items.some((i) => i.childrenIndicator);
+        }
+        if (changedProperties.has('_items') || changedProperties.has('columns')) {
+            this._columnConfigurationHash = JSON.stringify([
+                this._hasChildrenColumn,
+                ...this.columns.map((column) => column.alias),
+            ]);
+        }
     }
     updated(changedProperties) {
         super.updated(changedProperties);
         // The `keyed` directive in `render()` rebuilds the `<uui-table>` element when the column
-        // signature changes. The sorter caches its container element on first initialization, so
+        // configuration changes. The sorter caches its container element on first initialization, so
         // when the table is replaced we need to reattach it to the fresh node.
-        if (changedProperties.has('columns') && this._sortable) {
-            const columnKey = this.#getColumnKey();
-            if (columnKey !== this.#lastColumnKey) {
-                this.#lastColumnKey = columnKey;
-                this.#sorter.disable();
-                this.#sorter.enable();
-            }
+        if (this._sortable && changedProperties.has('_columnConfigurationHash')) {
+            this.#sorter.disable();
+            this.#sorter.enable();
         }
     }
-    #getColumnKey() {
-        return JSON.stringify(this.columns.map((column) => column.alias));
-    }
     #sorter;
     constructor() {
         super();
@@ -135,8 +155,10 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
         this.orderingDesc = false;
         this._sortable = false;
         this._selectionMode = false;
-        this.#lastColumnKey = '';
+        this._columnConfigurationHash = '';
+        this._hasChildrenColumn = false;
         this.#cellElementCache = new WeakMap();
+        this.#rowRenderedCallbacks = new Map();
         this.#sorter = new UmbSorterController(this, {
             getUniqueOfElement: (element) => {
                 return element.dataset.sortableId;
@@ -160,15 +182,19 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
             const isItemSelectable = this.#isSelectableItem(item);
             return html `
 			<uui-table-row
-				${ref((el) => {
-                this.onRowRendered?.(el, item);
-            })}
+				${ref(this.#getRowRenderedCallback(item))}
 				data-sortable-id=${item.id}
 				?selectable=${this.config.allowSelection && !this._sortable && isItemSelectable}
 				?select-only=${this._selectionMode || this.config.selectOnly}
 				?selected=${this._isSelected(item.id)}
+				?active=${item.active ?? false}
 				@selected=${() => this._selectRow(item)}
 				@deselected=${() => this._deselectRow(item)}>
+				${this._hasChildrenColumn
+                ? html `<uui-table-cell class="children-indicator-cell">
+							${this.#renderChildrenIndicator(item)}
+						</uui-table-cell>`
+                : nothing}
 				${this._renderRowCheckboxCell(item)}
 				${repeat(this.columns, (column) => column.alias, (column) => this._renderRowCell(column, item))}
 			</uui-table-row>
@@ -236,14 +262,21 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
         this.dispatchEvent(new UmbTableDeselectedEvent({ itemId: item.id }));
     }
     render() {
-        const style = !(this.config.allowSelection === false && this.config.hideIcon === true) ? 'width: 60px' : undefined;
+        const iconColumnWidth = this._hasChildrenColumn ? '45px' : '60px';
+        const style = !(this.config.allowSelection === false && this.config.hideIcon === true)
+            ? `width: ${iconColumnWidth}`
+            : undefined;
         // Firefox's `display: table-*` engine does not reliably relayout when cells are
         // inserted or removed from existing rows. Key the whole table on the column
-        // signature so the table is rebuilt whenever the column set changes.
-        return keyed(this.#getColumnKey(), html `
+        // configuration so the table is rebuilt whenever the column set changes.
+        return keyed(this._columnConfigurationHash, html `
 				<uui-table class="uui-text">
+					${this._hasChildrenColumn ? html `<uui-table-column style="width: 24px;"></uui-table-column>` : nothing}
 					<uui-table-column style=${ifDefined(style)}></uui-table-column>
 					<uui-table-head>
+						${this._hasChildrenColumn
+            ? html `<uui-table-head-cell class="children-indicator-cell"></uui-table-head-cell>`
+            : nothing}
 						${this._renderHeaderCheckboxCell()}
 						${repeat(this.columns, (column) => column.alias, (column) => this._renderHeaderCell(column))}
 					</uui-table-head>
@@ -253,10 +286,8 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
     }
     _renderHeaderCell(column) {
         return html `
-			<uui-table-head-cell style="--uui-table-cell-padding: 0 var(--uui-size-5)">
-				${column.allowSorting
-            ? html `${this._renderSortingUI(column)}`
-            : html `<span style="text-align:${column.align ?? 'left'};">${column.name}</span>`}
+			<uui-table-head-cell style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'};">
+				${column.allowSorting ? html `${this._renderSortingUI(column)}` : html `<span>${column.name}</span>`}
 			</uui-table-head-cell>
 		`;
     }
@@ -265,7 +296,7 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
 			<button
 				style="padding: var(--uui-size-5) var(--uui-size-1);"
 				@click="${() => this._handleOrderingChange(column)}">
-				<span style="text-align:${column.align ?? 'left'};">${column.name}</span>
+				<span>${column.name}</span>
 				<uui-symbol-sort ?active=${this.orderingColumn === column.alias} ?descending=${this.orderingDesc}>
 				</uui-symbol-sort>
 			</button>
@@ -281,11 +312,37 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
 							aria-label=${this.localize.term('general_selectAll')}
 							style="padding: var(--uui-size-4) var(--uui-size-5);"
 							@change="${this._handleAllRowsCheckboxChange}"
-							?checked=${this.selection.length === this.items.length}></uui-checkbox>
+							?checked=${this.selection.length === this.items.length}
+							?indeterminate=${this.selection.length > 0 && this.selection.length < this.items.length}></uui-checkbox>
 					`)}
 			</uui-table-head-cell>
 		`;
     }
+    #renderChildrenIndicator(item) {
+        const indicator = item.childrenIndicator;
+        if (!indicator)
+            return nothing;
+        const symbol = html `<uui-symbol-expand></uui-symbol-expand>`;
+        if (indicator.href) {
+            return html `
+				<uui-button compact label=${this.localize.term('general_open')} href=${indicator.href}>${symbol}</uui-button>
+			`;
+        }
+        if (indicator.onOpen) {
+            return html `
+				<uui-button
+					compact
+					label=${this.localize.term('general_open')}
+					@click=${(e) => {
+                e.stopPropagation();
+                indicator.onOpen?.();
+            }}>
+					${symbol}
+				</uui-button>
+			`;
+        }
+        return symbol;
+    }
     _renderRowCheckboxCell(item) {
         if (this.sortable === true) {
             return html `
@@ -383,6 +440,17 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
 				display: inline-block;
 			}
 
+			.children-indicator-cell {
+				padding-right: 0;
+				display: flex;
+				align-items: center;
+			}
+
+			.children-indicator-cell uui-button {
+				--uui-button-padding-left-factor: 0;
+				--uui-button-padding-right-factor: 0;
+			}
+
 			uui-table-head-cell:focus,
 			uui-table-head-cell:focus-within,
 			uui-table-head-cell:hover {
@@ -401,6 +469,7 @@ let UmbTableElement = class UmbTableElement extends UmbLitElement {
 				align-items: center;
 				justify-content: space-between;
 				width: 100%;
+				text-align: inherit;
 			}
 
 			uui-table-head-cell button > span {
@@ -440,6 +509,12 @@ __decorate([
 __decorate([
     state()
 ], UmbTableElement.prototype, "_selectionMode", void 0);
+__decorate([
+    state()
+], UmbTableElement.prototype, "_columnConfigurationHash", void 0);
+__decorate([
+    state()
+], UmbTableElement.prototype, "_hasChildrenColumn", void 0);
 UmbTableElement = __decorate([
     customElement('umb-table')
 ], UmbTableElement);