@siemens/element-ng 51.0.0-rc.8 → 51.0.0

package/schematics/utils/template-utils.js

@@ -3,54 +3,40 @@
  * SPDX-License-Identifier: MIT
  */
 import ts from 'typescript';
-export const getInlineTemplates = (source) => {
-    const templateNodes = [];
-    const componentDecoratorVisitor = (node) => {
-        if (ts.isDecorator(node) &&
-            ts.isCallExpression(node.expression) &&
-            ts.isIdentifier(node.expression.expression) &&
-            node.expression.expression.text === 'Component') {
-            const arg = node.expression.arguments[0];
-            if (ts.isObjectLiteralExpression(arg)) {
-                const template = arg.properties.find(property => ts.isPropertyAssignment(property) &&
-                    ts.isIdentifier(property.name) &&
-                    property.name.text === 'template');
-                const initializer = template?.initializer;
-                if (initializer &&
-                    (ts.isNoSubstitutionTemplateLiteral(initializer) || ts.isStringLiteral(initializer))) {
-                    templateNodes.push(initializer);
+export const getComponentTemplates = (source) => {
+    const templates = [];
+    const visit = (node) => {
+        if (ts.isClassDeclaration(node)) {
+            for (const decorator of ts.getDecorators(node) ?? []) {
+                const call = decorator.expression;
+                if (!ts.isCallExpression(call) ||
+                    !ts.isIdentifier(call.expression) ||
+                    call.expression.text !== 'Component') {
+                    continue;
                 }
-            }
-        }
-        else {
-            node.forEachChild(componentDecoratorVisitor);
-        }
-    };
-    source.forEachChild(componentDecoratorVisitor);
-    return templateNodes;
-};
-export const getTemplateUrl = (source) => {
-    const templateUrls = [];
-    const componentDecoratorVisitor = (node) => {
-        if (ts.isDecorator(node) &&
-            ts.isCallExpression(node.expression) &&
-            ts.isIdentifier(node.expression.expression) &&
-            node.expression.expression.text === 'Component') {
-            const arg = node.expression.arguments[0];
-            if (ts.isObjectLiteralExpression(arg)) {
-                const template = arg.properties.find(property => ts.isPropertyAssignment(property) &&
-                    ts.isIdentifier(property.name) &&
-                    property.name.text === 'templateUrl');
-                const initializer = template?.initializer;
-                if (initializer && ts.isStringLiteral(initializer)) {
-                    templateUrls.push(initializer.text);
+                const metadata = call.arguments[0];
+                if (!metadata || !ts.isObjectLiteralExpression(metadata)) {
+                    continue;
+                }
+                for (const property of metadata.properties) {
+                    if (!ts.isPropertyAssignment(property) || !ts.isIdentifier(property.name)) {
+                        continue;
+                    }
+                    const value = property.initializer;
+                    if (property.name.text === 'template' &&
+                        (ts.isStringLiteral(value) || ts.isNoSubstitutionTemplateLiteral(value))) {
+                        templates.push({ component: node, kind: 'inline', node: value });
+                    }
+                    else if (property.name.text === 'templateUrl' && ts.isStringLiteral(value)) {
+                        templates.push({ component: node, kind: 'external', url: value.text });
+                    }
                 }
             }
         }
-        else {
-            node.forEachChild(componentDecoratorVisitor);
-        }
+        ts.forEachChild(node, visit);
     };
-    source.forEachChild(componentDecoratorVisitor);
-    return templateUrls;
+    visit(source);
+    return templates;
 };
+export const getInlineTemplates = (source) => getComponentTemplates(source).flatMap(template => template.kind === 'inline' ? [template.node] : []);
+export const getTemplateUrl = (source) => getComponentTemplates(source).flatMap(template => template.kind === 'external' ? [template.url] : []);

package/template-i18n.json

@@ -205,6 +205,7 @@
   "SI_MAP.WINDOWS_HELP": "Use Ctrl + scroll to zoom the map",
   "SI_MAP.ZOOM_IN": "Zoom in",
   "SI_MAP.ZOOM_OUT": "Zoom out",
+  "SI_MAP_CLUSTER.LABEL": "Cluster with {{count}} locations",
   "SI_MARKDOWN.COPIED_CODE": "Copied",
   "SI_MARKDOWN.COPY_CODE": "Copy code",
   "SI_MARKDOWN.COPY_TABLE_AS_CSV": "Copy table as CSV",

package/types/siemens-element-ng-avatar.d.ts

@@ -9,7 +9,7 @@ import { TranslatableString } from '@siemens/element-translate-ng/translate';
  */
 declare class SiAvatarBackgroundColorDirective implements OnChanges {
     /**
-     * The desired color index from $si-sys-data-categorial-* color tokens. This can be set to any kind of
+     * The desired color index from $si-sys-data-categorical-* color tokens. This can be set to any kind of
      * positive integer that is then mapped to a color index.
      * A better way to set a pseudo-random color is to set {@link autoColor} to `true`.
      *

package/types/siemens-element-ng-chat-messages.d.ts

@@ -1,10 +1,9 @@
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
-import { TranslatableString as TranslatableString$1 } from '@siemens/element-translate-ng/translate';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, AfterContentInit, OnDestroy, AfterViewInit, ElementRef } from '@angular/core';
 import { MenuItem } from '@siemens/element-ng/menu';
 import { SourceReference } from '@siemens/element-ng/source-chip';
-import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { FileUploadError, UploadFile } from '@siemens/element-ng/file-uploader';
 import * as i1 from '@siemens/element-ng/resize-observer';
@@ -99,6 +98,73 @@ declare class SiAiMessageComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAiMessageComponent, "si-ai-message", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "sources": { "alias": "sources"; "required": false; "isSignal": true; }; "secondaryActionsLabel": { "alias": "secondaryActionsLabel"; "required": false; "isSignal": true; }; }, { "sourceClicked": "sourceClicked"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Collapsible activity message for displaying progress and intermediate steps in a chat.
+ *
+ * @experimental
+ */
+declare class SiActivityMessageComponent {
+    /** Activity heading. */
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
+    /** Activity icon. */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** Current state of the activity. */
+    readonly state: _angular_core.InputSignal<"running" | "failed" | undefined>;
+    /**
+     * Whether the activity details are expanded.
+     *
+     * @defaultValue false
+     */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    protected readonly icons: Record<"elementRight2" | "elementCircleFilled" | "elementIssue", string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiActivityMessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiActivityMessageComponent, "si-activity-message", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Titled content part for use inside an activity message.
+ *
+ * @experimental
+ */
+declare class SiActivityMessagePartComponent {
+    /** Part heading. */
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Whether the part can be collapsed and expanded.
+     *
+     * @defaultValue false
+     */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether collapsible content is expanded.
+     *
+     * @defaultValue true
+     */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    protected readonly icons: Record<"elementRight2" | "elementCircleFilled", string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiActivityMessagePartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiActivityMessagePartComponent, "si-activity-message-part", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Collapsible container for grouping multiple activity messages.
+ *
+ * @experimental
+ */
+declare class SiActivityTraceComponent {
+    /** Trace heading. */
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Whether the trace content is expanded.
+     *
+     * @defaultValue false
+     */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    protected readonly icons: Record<"elementRight2", string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiActivityTraceComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiActivityTraceComponent, "si-activity-trace", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+}
+
 /**
  * Attachment item interface for file attachments in chat messages, used by {@link SiAttachmentListComponent} and inside {@link SiUserMessageComponent} as well as {@link SiChatInputComponent}.
  *
@@ -328,7 +394,7 @@ declare class SiChatInputComponent implements AfterViewInit {
      * t(() => $localize`:@@SI_CHAT_INPUT.PLACEHOLDER:Enter a message…`)
      * ```
      */
-    readonly placeholder: _angular_core.InputSignal<TranslatableString$1>;
+    readonly placeholder: _angular_core.InputSignal<TranslatableString>;
     /**
      * Whether the input is disabled
      * @defaultValue false
@@ -356,10 +422,9 @@ declare class SiChatInputComponent implements AfterViewInit {
      * If not provided, the component will look for projected content with the `siChatInputDisclaimer` directive.
      * If both are empty, no disclaimer section will be shown (handled via CSS :empty).
      */
-    readonly disclaimer: _angular_core.InputSignal<TranslatableString$1 | undefined>;
+    readonly disclaimer: _angular_core.InputSignal<TranslatableString | undefined>;
     /**
-     * Primary actions available in the input (attach files, etc.)
-     * All actions displayed inline
+     * Primary actions available in the input. Provide at most one action.
      * @defaultValue []
      */
     readonly actions: _angular_core.InputSignal<MessageAction[]>;
@@ -406,7 +471,7 @@ declare class SiChatInputComponent implements AfterViewInit {
      * t(() => $localize`:@@SI_CHAT_INPUT.SEND:Send`)
      * ```
      */
-    readonly sendButtonLabel: _angular_core.InputSignal<TranslatableString$1>;
+    readonly sendButtonLabel: _angular_core.InputSignal<TranslatableString>;
     /**
      * Send button icon
      *
@@ -421,7 +486,7 @@ declare class SiChatInputComponent implements AfterViewInit {
      * t(() => $localize`:@@SI_CHAT_INPUT.INTERRUPT:Stop processing`)
      * ```
      */
-    readonly interruptButtonLabel: _angular_core.InputSignal<TranslatableString$1>;
+    readonly interruptButtonLabel: _angular_core.InputSignal<TranslatableString>;
     /**
      * Auto-focus the input on component initialization
      * @defaultValue false
@@ -435,7 +500,7 @@ declare class SiChatInputComponent implements AfterViewInit {
      * t(() => $localize`:@@SI_CHAT_INPUT.ATTACH_FILE:Attach file`)
      * ```
      */
-    readonly attachFileLabel: _angular_core.InputSignal<TranslatableString$1>;
+    readonly attachFileLabel: _angular_core.InputSignal<TranslatableString>;
     /**
      * Remove attachment aria label.
      * The attachment name is available with `{{attachment}}`.
@@ -445,7 +510,7 @@ declare class SiChatInputComponent implements AfterViewInit {
      * t(() => $localize`:@@SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT:Remove {{attachment}}`)
      * ```
      */
-    readonly removeAttachmentLabel: _angular_core.InputSignal<TranslatableString$1>;
+    readonly removeAttachmentLabel: _angular_core.InputSignal<TranslatableString>;
     /**
      * More actions button aria label
      *
@@ -454,7 +519,7 @@ declare class SiChatInputComponent implements AfterViewInit {
      * t(() => $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:Additional actions`)
      * ```
      */
-    readonly secondaryActionsLabel: _angular_core.InputSignal<TranslatableString$1>;
+    readonly secondaryActionsLabel: _angular_core.InputSignal<TranslatableString>;
     /**
      * Suggested follow-up prompts to display as pill buttons above the chat input.
      * Use `followUpPromptSelected` to handle selection and update the input value.
@@ -487,14 +552,14 @@ declare class SiChatInputComponent implements AfterViewInit {
     protected readonly hasAttachments: _angular_core.Signal<boolean>;
     protected readonly hasActions: _angular_core.Signal<boolean>;
     protected readonly hasSecondaryActions: _angular_core.Signal<boolean>;
-    protected readonly allMenuActions: _angular_core.Signal<MenuItem[]>;
+    protected readonly combinedMenuActions: _angular_core.Signal<MenuItem[]>;
     protected readonly hasMenuActions: _angular_core.Signal<boolean>;
     protected triggerFileInput(): void;
     protected readonly canSend: _angular_core.Signal<boolean>;
     protected readonly showInterruptButton: _angular_core.Signal<boolean>;
     protected readonly buttonDisabled: _angular_core.Signal<boolean>;
     protected readonly buttonIcon: _angular_core.Signal<string>;
-    protected readonly buttonLabel: _angular_core.Signal<TranslatableString$1>;
+    protected readonly buttonLabel: _angular_core.Signal<TranslatableString>;
     protected readonly dragOver: _angular_core.WritableSignal<boolean>;
     private readonly injector;
     protected onInputChange(value: string): void;
@@ -673,10 +738,10 @@ declare class SiUserMessageComponent {
 }
 
 interface PromptCategory {
-    label: TranslatableString$1;
+    label: TranslatableString;
 }
 interface PromptSuggestion {
-    text: TranslatableString$1;
+    text: TranslatableString;
 }
 /**
  * AI welcome screen component for displaying initial state in AI chat interfaces.
@@ -691,7 +756,6 @@ interface PromptSuggestion {
  * - Clickable prompt suggestion cards
  * - Optional refresh button to regenerate suggestions
  *
- * @see {@link SiAiChatContainerComponent} for the AI chat container which uses this component
  * @see {@link SiChatContainerComponent} for the base chat container
  *
  * @experimental
@@ -722,5 +786,5 @@ declare class SiAiWelcomeScreenComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAiWelcomeScreenComponent, "si-ai-welcome-screen", never, { "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "selectedCategory": { "alias": "selectedCategory"; "required": false; "isSignal": true; }; "promptSuggestions": { "alias": "promptSuggestions"; "required": false; "isSignal": true; }; }, { "selectedCategory": "selectedCategoryChange"; "promptSelected": "promptSelected"; }, never, ["*"], true, never>;
 }
 
-export { SiAiMessageComponent, SiAiWelcomeScreenComponent, SiAttachmentListComponent, SiChatContainerComponent, SiChatContainerInputDirective, SiChatInputComponent, SiChatInputDisclaimerDirective, SiChatMessageActionDirective, SiChatMessageComponent, SiUserMessageComponent };
+export { SiActivityMessageComponent, SiActivityMessagePartComponent, SiActivityTraceComponent, SiAiMessageComponent, SiAiWelcomeScreenComponent, SiAttachmentListComponent, SiChatContainerComponent, SiChatContainerInputDirective, SiChatInputComponent, SiChatInputDisclaimerDirective, SiChatMessageActionDirective, SiChatMessageComponent, SiUserMessageComponent };
 export type { Attachment, ChatInputAttachment, MessageAction, PromptCategory, PromptSuggestion };

package/types/siemens-element-ng-form.d.ts

@@ -340,6 +340,8 @@ declare class SiFormItemComponent implements AfterContentInit, AfterContentCheck
     readonly required: _angular_core.Signal<boolean>;
     /** @internal */
     readonly control: _angular_core.Signal<_angular_forms.AbstractControl<any, any, any> | null | undefined>;
+    /** @internal */
+    readonly radioGroupName: _angular_core.Signal<string | undefined>;
     ngOnChanges(changes: SimpleChanges<this>): void;
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -358,6 +360,7 @@ declare class SiFormItemComponent implements AfterContentInit, AfterContentCheck
 
 interface SiFormFieldsetControl {
     readonly control: Signal<unknown>;
+    readonly radioGroupName?: Signal<string | undefined>;
     readonly required: Signal<boolean>;
     readonly touched: Signal<boolean>;
     readonly errors: Signal<readonly SiFormError[]>;

package/types/siemens-element-ng-list-details.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, OnChanges, OnDestroy, SimpleChanges, Signal } from '@angular/core';
+import { SplitUnit } from '@siemens/element-ng/split';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
@@ -8,6 +9,8 @@ declare class SiListDetailsComponent implements OnInit, OnChanges, OnDestroy {
     private elementRef;
     private resizeObserver;
     private readonly listDetailsContainer;
+    private readonly listPart;
+    private readonly split;
     protected readonly animationsGloballyDisabled: boolean;
     /**
      * A numeric value defining the minimum width in px, which the component needs
@@ -35,11 +38,22 @@ declare class SiListDetailsComponent implements OnInit, OnChanges, OnDestroy {
      */
     readonly disableResizing: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * The percentage width of the list view of the overall component width.
+     * The list pane size, updated when the split is resized or restored.
+     * With resizing enabled, the value uses {@link listWidthUnit}: pixels for `px`,
+     * or a percentage-based fractional weight for `fr`. With resizing disabled,
+     * the value is always interpreted as a percentage.
+     * Percentage values must be in the inclusive range 0-100; values outside this
+     * range fall back to a 32/68 list/details split.
      *
-     * @defaultValue 32
+     * @defaultValue 300
      */
     readonly listWidth: _angular_core.ModelSignal<number>;
+    /**
+     * Unit used for the list split part when resizing is enabled.
+     *
+     * @defaultValue 'px'
+     */
+    readonly listWidthUnit: _angular_core.InputSignal<SplitUnit>;
     /**
      * Sets the minimal width of the list component in pixel.
      *
@@ -57,6 +71,13 @@ declare class SiListDetailsComponent implements OnInit, OnChanges, OnDestroy {
      * Required for persistence of ui state.
      */
     readonly stateId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Percentage width shared by static and resizable `fr` layouts.
+     * The migration sets `listWidthUnit="fr"` without setting `listWidth`, so the default
+     * pixel width of 300 must fall back to 32 to preserve the legacy 32/68 split.
+     * @internal
+     */
+    readonly listWidthPercent: _angular_core.Signal<number>;
     protected readonly splitSizes: _angular_core.Signal<[number, number]>;
     protected readonly listStateId: _angular_core.Signal<string | undefined>;
     protected readonly detailsStateId: _angular_core.Signal<string | undefined>;
@@ -79,6 +100,7 @@ declare class SiListDetailsComponent implements OnInit, OnChanges, OnDestroy {
     ngOnDestroy(): void;
     private readonly resizeDimensions;
     protected onSplitSizesChange(sizes: number[]): void;
+    private getListSizePx;
     /** @internal */
     detailsBackClicked(options?: {
         animationDone?: () => void;
@@ -86,7 +108,7 @@ declare class SiListDetailsComponent implements OnInit, OnChanges, OnDestroy {
     protected detailsExpandedAnimationDone(event: TransitionEvent): void;
     private transferFocus;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiListDetailsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiListDetailsComponent, "si-list-details", never, { "expandBreakpoint": { "alias": "expandBreakpoint"; "required": false; "isSignal": true; }; "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; "disableResizing": { "alias": "disableResizing"; "required": false; "isSignal": true; }; "listWidth": { "alias": "listWidth"; "required": false; "isSignal": true; }; "minListSize": { "alias": "minListSize"; "required": false; "isSignal": true; }; "minDetailsSize": { "alias": "minDetailsSize"; "required": false; "isSignal": true; }; "stateId": { "alias": "stateId"; "required": false; "isSignal": true; }; }, { "detailsActive": "detailsActiveChange"; "listWidth": "listWidthChange"; }, never, ["si-list-pane", "si-details-pane"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiListDetailsComponent, "si-list-details", never, { "expandBreakpoint": { "alias": "expandBreakpoint"; "required": false; "isSignal": true; }; "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; "disableResizing": { "alias": "disableResizing"; "required": false; "isSignal": true; }; "listWidth": { "alias": "listWidth"; "required": false; "isSignal": true; }; "listWidthUnit": { "alias": "listWidthUnit"; "required": false; "isSignal": true; }; "minListSize": { "alias": "minListSize"; "required": false; "isSignal": true; }; "minDetailsSize": { "alias": "minDetailsSize"; "required": false; "isSignal": true; }; "stateId": { "alias": "stateId"; "required": false; "isSignal": true; }; }, { "detailsActive": "detailsActiveChange"; "listWidth": "listWidthChange"; }, never, ["si-list-pane", "si-details-pane"], true, never>;
 }
 
 declare class SiListPaneComponent {

package/types/siemens-element-ng-main-detail-container.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { SplitUnit } from '@siemens/element-ng/split';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 declare class SiMainDetailContainerComponent implements OnInit, OnChanges {
@@ -9,6 +10,8 @@ declare class SiMainDetailContainerComponent implements OnInit, OnChanges {
     private readonly resizeObserver;
     private readonly changeDetectorRef;
     private readonly destroyRef;
+    private readonly splitElement;
+    private readonly mainSplitPart;
     /**
      * A numeric value defining the minimum width in px, which the container needs
      * to be displayed in its large layout. Whenever smaller than
@@ -101,8 +104,23 @@ declare class SiMainDetailContainerComponent implements OnInit, OnChanges {
      */
     readonly detailContainerClass: _angular_core.InputSignal<string>;
     /**
-     * The percentage width of the main container from the overall component width.
-     * Can be a number or `'default'`, which is 32% when {@link resizableParts} is active, otherwise 50%.
+     * Unit used for the main split part when {@link resizableParts} is enabled.
+     *
+     * @defaultValue 'px'
+     */
+    readonly mainContainerWidthUnit: _angular_core.InputSignal<SplitUnit>;
+    /**
+     * The size of the main container. When {@link resizableParts} is enabled,
+     * the value is interpreted using {@link mainContainerWidthUnit} and updates as the splitter is moved.
+     * With `mainContainerWidthUnit="fr"`, numeric values must be from `0` to `100` (inclusive).
+     * The main and detail fractional weights are the value and `100 - value`;
+     * out-of-range values fall back to `32` and `68`.
+     * In the static layout, numeric values represent a percentage from `0` to `100`
+     * (inclusive); out-of-range values leave both containers without max-size constraints.
+     * Pixel widths are not limited to the `0` to `100` range.
+     *
+     * With `'default'`, resizable pixel layouts use {@link minMainSize}, resizable fractional
+     * layouts use main and detail weights of `32` and `68`, and static layouts use `50%`.
      *
      * @defaultValue 'default'
      */
@@ -145,11 +163,13 @@ declare class SiMainDetailContainerComponent implements OnInit, OnChanges {
      * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set
      */
     private getMaxSize;
+    private getSplitSizes;
+    private getMainSizePx;
     private determineLayout;
     private doAnimation;
     private updateDetailsFocusable;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiMainDetailContainerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiMainDetailContainerComponent, "si-main-detail-container", never, { "largeLayoutBreakpoint": { "alias": "largeLayoutBreakpoint"; "required": false; "isSignal": true; }; "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "truncateHeading": { "alias": "truncateHeading"; "required": false; "isSignal": true; }; "detailsHeading": { "alias": "detailsHeading"; "required": false; "isSignal": true; }; "resizableParts": { "alias": "resizableParts"; "required": false; "isSignal": true; }; "hideBackButton": { "alias": "hideBackButton"; "required": false; "isSignal": true; }; "detailsBackButtonText": { "alias": "detailsBackButtonText"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "mainContainerClass": { "alias": "mainContainerClass"; "required": false; "isSignal": true; }; "detailContainerClass": { "alias": "detailContainerClass"; "required": false; "isSignal": true; }; "mainContainerWidth": { "alias": "mainContainerWidth"; "required": false; "isSignal": true; }; "minMainSize": { "alias": "minMainSize"; "required": false; "isSignal": true; }; "minDetailSize": { "alias": "minDetailSize"; "required": false; "isSignal": true; }; "stateId": { "alias": "stateId"; "required": false; "isSignal": true; }; }, { "hasLargeSizeChange": "hasLargeSizeChange"; "detailsActive": "detailsActiveChange"; "mainContainerWidth": "mainContainerWidthChange"; }, never, ["[slot=mainSearch]", "[slot=mainActions]", "[slot=mainData]", "[slot=detailActions]", "[slot=details]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiMainDetailContainerComponent, "si-main-detail-container", never, { "largeLayoutBreakpoint": { "alias": "largeLayoutBreakpoint"; "required": false; "isSignal": true; }; "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "truncateHeading": { "alias": "truncateHeading"; "required": false; "isSignal": true; }; "detailsHeading": { "alias": "detailsHeading"; "required": false; "isSignal": true; }; "resizableParts": { "alias": "resizableParts"; "required": false; "isSignal": true; }; "hideBackButton": { "alias": "hideBackButton"; "required": false; "isSignal": true; }; "detailsBackButtonText": { "alias": "detailsBackButtonText"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "mainContainerClass": { "alias": "mainContainerClass"; "required": false; "isSignal": true; }; "detailContainerClass": { "alias": "detailContainerClass"; "required": false; "isSignal": true; }; "mainContainerWidthUnit": { "alias": "mainContainerWidthUnit"; "required": false; "isSignal": true; }; "mainContainerWidth": { "alias": "mainContainerWidth"; "required": false; "isSignal": true; }; "minMainSize": { "alias": "minMainSize"; "required": false; "isSignal": true; }; "minDetailSize": { "alias": "minDetailSize"; "required": false; "isSignal": true; }; "stateId": { "alias": "stateId"; "required": false; "isSignal": true; }; }, { "hasLargeSizeChange": "hasLargeSizeChange"; "detailsActive": "detailsActiveChange"; "mainContainerWidth": "mainContainerWidthChange"; }, never, ["[slot=mainSearch]", "[slot=mainActions]", "[slot=mainData]", "[slot=detailActions]", "[slot=details]"], true, never>;
 }
 
 declare class SiMainDetailContainerModule {

package/types/siemens-element-ng-maplibre.d.ts

@@ -1,6 +1,33 @@
-import * as i0 from '@angular/core';
+import { ExtendedStatusType } from '@siemens/element-ng/common';
+import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import { StyleSpecification } from 'maplibre-gl';
+import * as geojson from 'geojson';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/** A point feature consumed by the clustered MapLibre source. */
+type ClusterPoint = GeoJSON.Feature<GeoJSON.Point, GeoJSON.GeoJsonProperties>;
+/**
+ * Built-in group palette or exact colors indexed by positive group ID. The `'status'` palette is
+ * the four-color palette used for numeric groups; it is separate from status-based bucketing.
+ */
+type ClusterColors = 'status' | 'element' | Record<number, string>;
+/** A rendered color segment and its generated cluster-property name. */
+interface ClusterSegment {
+    color: string;
+    property: string;
+}
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/** Status values supported by status markers and cluster status segments. */
+type MarkerStatus = ExtendedStatusType | 'default';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -24,6 +51,104 @@ import { StyleSpecification } from 'maplibre-gl';
  */
 declare const injectSiMapStyle: (key: string) => Signal<StyleSpecification>;
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+type ClusterProperties = Record<string, ['+', unknown]>;
+/** @internal */
+interface ClusterConfiguration {
+    clusterProperties: ClusterProperties;
+    segments: readonly ClusterSegment[];
+}
+
+/**
+ * Adds a clustered GeoJSON source to a MapLibre map and renders interactive cluster markers.
+ *
+ * Cluster markers display the number of contained points and their distribution by group. Status
+ * segments can be enabled for ungrouped points by providing `statusProperty`. Render individual,
+ * unclustered points separately with `mgl-markers-for-clusters` using the same source ID.
+ * Positive numeric groups always take precedence over status segments. Status segments apply only
+ * when the normalized group value is zero; points without a matching group or status use the
+ * ungrouped color.
+ *
+ * @example Basic usage
+ * ```html
+ * <mgl-map [mapStyle]="mapStyle()">
+ *   <si-cluster-source
+ *     sourceId="locations"
+ *     statusProperty="status"
+ *     [data]="locations"
+ *     (clusterClick)="onClusterClick($event)"
+ *   />
+ *
+ *   <mgl-markers-for-clusters source="locations">
+ *     <ng-template let-feature mglPoint>
+ *       <si-status-marker
+ *         [status]="feature.properties?.status"
+ *       />
+ *     </ng-template>
+ *   </mgl-markers-for-clusters>
+ * </mgl-map>
+ * ```
+ *
+ * @experimental
+ */
+declare class SiClusterSourceComponent {
+    /** ID used to register the generated GeoJSON source in MapLibre. */
+    readonly sourceId: _angular_core.InputSignal<string>;
+    /**
+     * Point feature collection to cluster.
+     * @defaultValue EMPTY_DATA
+     */
+    readonly data: _angular_core.InputSignal<geojson.FeatureCollection<geojson.Point, geojson.GeoJsonProperties>>;
+    /**
+     * Feature property containing the positive numeric group ID.
+     * @defaultValue 'group'
+     */
+    readonly groupProperty: _angular_core.InputSignal<string>;
+    /**
+     * Built-in palette or exact colors indexed by group ID. The built-in `'status'` palette contains
+     * four colors for numeric groups and is separate from status-based bucketing.
+     * @defaultValue 'status'
+     */
+    readonly groupColors: _angular_core.InputSignal<ClusterColors>;
+    /**
+     * Top-level feature property containing a {@link MarkerStatus} value. Status bucketing is
+     * disabled by default and only applies when the normalized group value is zero. Missing or
+     * unsupported status values, and groups that do not match a configured bucket, use the ungrouped
+     * color. Built-in colors match `SiStatusMarkerComponent`, with `default` using accent and
+     * `unknown` using neutral.
+     * @defaultValue undefined
+     * @see https://maplibre.org/maplibre-style-spec/sources/#clusterproperties
+     */
+    readonly statusProperty: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Cluster radius in pixels.
+     * @defaultValue 50
+     */
+    readonly clusterRadius: _angular_core.InputSignal<number>;
+    /**
+     * Maximum zoom at which points are clustered.
+     * @defaultValue undefined
+     */
+    readonly clusterMaxZoom: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Minimum number of points required to form a cluster.
+     * @defaultValue 2
+     */
+    readonly clusterMinPoints: _angular_core.InputSignal<number>;
+    /** Emits when a cluster marker is activated. */
+    readonly clusterClick: _angular_core.OutputEmitterRef<ClusterPoint>;
+    protected readonly clusterConfiguration: _angular_core.Signal<ClusterConfiguration>;
+    /** Stores selection for the projected cluster-popover integration. */
+    protected readonly selectedCluster: _angular_core.WritableSignal<ClusterPoint | undefined>;
+    protected selectCluster(feature: ClusterPoint): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiClusterSourceComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiClusterSourceComponent, "si-cluster-source", never, { "sourceId": { "alias": "sourceId"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "groupProperty": { "alias": "groupProperty"; "required": false; "isSignal": true; }; "groupColors": { "alias": "groupColors"; "required": false; "isSignal": true; }; "statusProperty": { "alias": "statusProperty"; "required": false; "isSignal": true; }; "clusterRadius": { "alias": "clusterRadius"; "required": false; "isSignal": true; }; "clusterMaxZoom": { "alias": "clusterMaxZoom"; "required": false; "isSignal": true; }; "clusterMinPoints": { "alias": "clusterMinPoints"; "required": false; "isSignal": true; }; }, { "clusterClick": "clusterClick"; }, never, ["si-cluster-popover,[siClusterPopoverOutlet]"], true, never>;
+}
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -51,16 +176,15 @@ declare const injectSiMapStyle: (key: string) => Signal<StyleSpecification>;
  */
 declare const injectSiMapTranslations: () => Signal<Record<string, string>>;
 
-type MarkerStatus = 'default' | 'unknown' | 'success' | 'info' | 'warning' | 'danger' | 'caution' | 'critical';
 declare class SiStatusMarkerComponent {
     /**
      * The status of the marker.
      * @defaultValue 'default'
      */
-    readonly status: i0.InputSignal<MarkerStatus>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SiStatusMarkerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SiStatusMarkerComponent, "si-status-marker", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly status: _angular_core.InputSignal<MarkerStatus>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiStatusMarkerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiStatusMarkerComponent, "si-status-marker", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { SiStatusMarkerComponent, injectSiMapStyle, injectSiMapTranslations };
-export type { MarkerStatus };
+export { SiClusterSourceComponent, SiStatusMarkerComponent, injectSiMapStyle, injectSiMapTranslations };
+export type { ClusterColors, ClusterPoint, ClusterSegment, MarkerStatus };