@siemens/element-ng 51.3.0 → 51.5.0

package/types/siemens-element-ng-filtered-search.d.ts

@@ -140,12 +140,23 @@ interface DisplayedCriteriaEventArgs {
     allow(criteriaNamesToDisplay: string[], freeText?: boolean): void;
 }
 
+/** Criterion definition normalized for internal rendering and input handling. */
 interface InternalCriterionDefinition extends CriterionDefinition {
     label: string;
     translatedLabel: string;
+    /**
+     * Identifies free-text pills, displayed without a criterion label using a plain-text editor.
+     * Omitted for regular criteria. Internal only; not included in the search model.
+     */
     type?: 'free-text';
 }
 
+interface InternalCriterion {
+    config: InternalCriterionDefinition;
+    value: CriterionValue;
+    editOnCreation: boolean;
+    initialValueText?: string;
+}
 declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     /**
      * Factory for CDK scroll strategies used by filtered-search overlays.
@@ -375,11 +386,8 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     private readonly scrollContainer;
     private readonly valueComponents;
     protected dataSource: Observable<InternalCriterionDefinition[]>;
-    protected autoEditCriteria: boolean;
-    protected readonly values: _angular_core.WritableSignal<{
-        config: InternalCriterionDefinition;
-        value: CriterionValue;
-    }[]>;
+    protected readonly values: _angular_core.WritableSignal<InternalCriterion[]>;
+    protected readonly maxCriteriaReached: _angular_core.Signal<boolean>;
     protected readonly searchValue: _angular_core.WritableSignal<string>;
     /** Internal criteria model */
     protected internalCriterionDefinitions: InternalCriterionDefinition[];
@@ -423,6 +431,11 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
      */
     private convertToExternalModel;
     private addCriterion;
+    private resolveValue;
+    private isDateCriterion;
+    private parseModelDate;
+    private parseInputDate;
+    private getAllowedCriteria;
     /**
      * Get criteria list to be shown in typeahead.
      * @returns list of criteria to be shown in typeahead.
@@ -434,22 +447,25 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     protected onCreateCriterion(event: {
         criterion: InternalCriterionDefinition;
         value?: string;
+        accept: () => void;
     }): void;
     protected onCreateCriterionByName(event: {
         criterionName: string;
         value?: string;
+        editOnCreation?: boolean;
+        accept: () => void;
     }): void;
     protected onSearchValueChange(): void;
-    protected valueChange(value: CriterionValue, criterion: {
-        config: InternalCriterionDefinition;
-        value: CriterionValue;
-    }): void;
+    protected valueChange(value: CriterionValue, criterion: InternalCriterion): void;
     protected focusNext(index: number, event: {
         freeText: string;
     } | void): void;
     private updateAndEmitSearchCriteria;
     private emitChangeEvent;
-    protected createFreeTextPill(query: string): void;
+    protected createFreeTextPill(event: {
+        query: string;
+        accept: () => void;
+    }): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFilteredSearchComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFilteredSearchComponent, "si-filtered-search", never, { "scrollStrategy": { "alias": "scrollStrategy"; "required": false; "isSignal": true; }; "doSearchOnInputChange": { "alias": "doSearchOnInputChange"; "required": false; "isSignal": true; }; "lazyCriterionProvider": { "alias": "lazyCriterionProvider"; "required": false; "isSignal": true; }; "lazyValueProvider": { "alias": "lazyValueProvider"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "strictCriterion": { "alias": "strictCriterion"; "required": false; "isSignal": true; }; "strictValue": { "alias": "strictValue"; "required": false; "isSignal": true; }; "onlySelectValue": { "alias": "onlySelectValue"; "required": false; "isSignal": true; }; "lazyLoadingDebounceTime": { "alias": "lazyLoadingDebounceTime"; "required": false; "isSignal": true; }; "searchDebounceTime": { "alias": "searchDebounceTime"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "optionsInScrollableView": { "alias": "optionsInScrollableView"; "required": false; "isSignal": true; }; "searchCriteria": { "alias": "searchCriteria"; "required": false; "isSignal": true; }; "criteria": { "alias": "criteria"; "required": false; "isSignal": true; }; "exclusiveCriteria": { "alias": "exclusiveCriteria"; "required": false; "isSignal": true; }; "maxCriteria": { "alias": "maxCriteria"; "required": false; "isSignal": true; }; "maxCriteriaOptions": { "alias": "maxCriteriaOptions"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "clearButtonLabel": { "alias": "clearButtonLabel"; "required": false; "isSignal": true; }; "submitButtonLabel": { "alias": "submitButtonLabel"; "required": false; "isSignal": true; }; "itemCountText": { "alias": "itemCountText"; "required": false; "isSignal": true; }; "colorVariant": { "alias": "colorVariant"; "required": false; "isSignal": true; }; "disableFreeTextSearch": { "alias": "disableFreeTextSearch"; "required": false; "isSignal": true; }; "typeaheadOptionsLimit": { "alias": "typeaheadOptionsLimit"; "required": false; "isSignal": true; }; "disableSelectionByColonAndSemicolon": { "alias": "disableSelectionByColonAndSemicolon"; "required": false; "isSignal": true; }; "freeTextCriterion": { "alias": "freeTextCriterion"; "required": false; "isSignal": true; }; "searchForFreeTextLabel": { "alias": "searchForFreeTextLabel"; "required": false; "isSignal": true; }; }, { "doSearch": "doSearch"; "searchCriteria": "searchCriteriaChange"; "interceptDisplayedCriteria": "interceptDisplayedCriteria"; }, never, never, true, never>;
 }

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

@@ -5,6 +5,7 @@ import { Subject, BehaviorSubject } from 'rxjs';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 declare class SiListDetailsComponent implements OnInit, OnChanges, OnDestroy {
+    private readonly document;
     private resizeSubs?;
     private elementRef;
     private resizeObserver;
@@ -113,6 +114,7 @@ declare class SiListDetailsComponent implements OnInit, OnChanges, OnDestroy {
 
 declare class SiListPaneComponent {
     protected parent: SiListDetailsComponent;
+    private readonly document;
     private element;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiListPaneComponent, never>;

package/types/siemens-element-ng-loading-spinner.d.ts

@@ -1,6 +1,5 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, OnChanges, OnDestroy } from '@angular/core';
-import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as rxjs from 'rxjs';
 import { BehaviorSubject } from 'rxjs';
@@ -56,9 +55,13 @@ declare class SiLoadingSpinnerComponent {
      * t(() => $localize`:@@SI_LOADING_SPINNER.LABEL:Loading`)
      * ```
      */
-    readonly ariaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly ariaLabel: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Optional text to be displayed below the spinner.
+     */
+    readonly loadingText: _angular_core.InputSignal<TranslatableString | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingSpinnerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiLoadingSpinnerComponent, "si-loading-spinner", never, { "isBlockingSpinner": { "alias": "isBlockingSpinner"; "required": false; "isSignal": true; }; "isSpinnerOverlay": { "alias": "isSpinnerOverlay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiLoadingSpinnerComponent, "si-loading-spinner", never, { "isBlockingSpinner": { "alias": "isBlockingSpinner"; "required": false; "isSignal": true; }; "isSpinnerOverlay": { "alias": "isSpinnerOverlay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy {
@@ -78,6 +81,10 @@ declare class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy
      * @defaultValue true
      */
     readonly initialDelay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Optional text to be displayed below the spinner.
+     */
+    readonly loadingText: _angular_core.InputSignal<TranslatableString | undefined>;
     private el;
     private readonly viewRef;
     private cdRef;
@@ -95,7 +102,7 @@ declare class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy
     ngOnChanges(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingSpinnerDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiLoadingSpinnerDirective, "[siLoading]", never, { "siLoading": { "alias": "siLoading"; "required": true; "isSignal": true; }; "blocking": { "alias": "blocking"; "required": false; "isSignal": true; }; "initialDelay": { "alias": "initialDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiLoadingSpinnerDirective, "[siLoading]", never, { "siLoading": { "alias": "siLoading"; "required": true; "isSignal": true; }; "blocking": { "alias": "blocking"; "required": false; "isSignal": true; }; "initialDelay": { "alias": "initialDelay"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class SiLoadingService {

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

@@ -1,8 +1,9 @@
 import { ExtendedStatusType } from '@siemens/element-ng/common';
 import * as _angular_core from '@angular/core';
-import { Signal } from '@angular/core';
+import { Signal, TemplateRef } from '@angular/core';
 import { StyleSpecification } from 'maplibre-gl';
 import * as geojson from 'geojson';
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -20,6 +21,27 @@ interface ClusterSegment {
     color: string;
     property: string;
 }
+/**
+ * Context supplied to custom cluster popover templates, including all locations loaded so far.
+ *
+ * @experimental
+ */
+interface ClusterPopoverContext {
+    /** All loaded original point features, exposed by an unqualified `let-features` binding. */
+    $implicit: readonly ClusterPoint[];
+    /** The same accumulated features as `$implicit`, exposed by `let-features="features"`. */
+    features: readonly ClusterPoint[];
+    /** Total number of locations in the selected cluster, including locations not yet loaded. */
+    total: number;
+    /** Whether the initial batch, an additional batch, or a retry is being loaded. */
+    loading: boolean;
+    /** Error from a failed batch request, or `undefined` when no error is available. */
+    error: unknown;
+    /** Selected cluster feature, including its `cluster_id` and `point_count` properties. */
+    cluster: ClusterPoint;
+    /** Closes the popover using the same behavior as its Close button. */
+    close: () => void;
+}
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -144,9 +166,94 @@ declare class SiClusterSourceComponent {
     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>;
+    private readonly source;
+    /**
+     * Returns a page of original points belonging to a cluster.
+     * @see https://maplibre.org/maplibre-gl-js/docs/API/classes/GeoJSONSource/#getclusterleaves
+     */
+    getClusterLeaves(clusterId: number, limit: number, offset: number): Promise<ClusterPoint[]>;
     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>;
+    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, ["*"], true, never>;
+}
+
+/**
+ * Optional popup with incrementally loaded locations projected into a `si-cluster-source`.
+ *
+ * @experimental
+ */
+declare class SiClusterPopoverComponent {
+    private static idCounter;
+    private readonly destroyRef;
+    private readonly focusTrapFactory;
+    private readonly document;
+    private readonly source;
+    private readonly mapService;
+    private readonly resizeObserver;
+    /**
+     * Maximum width passed to the MapLibre popup.
+     * @defaultValue '320px'
+     */
+    readonly maxWidth: _angular_core.InputSignal<string>;
+    /**
+     * Whether the popup closes when the map moves.
+     * @defaultValue true
+     */
+    readonly closeOnMove: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Number of locations loaded initially and with each "Load more" action.
+     * @defaultValue 8
+     */
+    readonly pageSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Feature property displayed in the default list.
+     * @defaultValue 'name'
+     */
+    readonly labelProperty: _angular_core.InputSignal<string>;
+    /**
+     * Feature property displayed as the description in the default list.
+     * @defaultValue 'description'
+     */
+    readonly descriptionProperty: _angular_core.InputSignal<string>;
+    private readonly dialog;
+    private readonly scrollRegion;
+    private readonly batchButton;
+    private readonly selectedCluster;
+    private readonly batchFocusRequested;
+    private readonly offset;
+    private readonly displayedFeatures;
+    protected readonly titleId: string;
+    protected readonly popupCoordinates: _angular_core.WritableSignal<geojson.Position | undefined>;
+    protected readonly availableBlockSize: _angular_core.WritableSignal<number | undefined>;
+    protected readonly leaves: _angular_core.ResourceRef<ClusterPoint[] | undefined>;
+    protected readonly context: _angular_core.Signal<ClusterPopoverContext | undefined>;
+    protected readonly template: _angular_core.Signal<TemplateRef<ClusterPopoverContext> | undefined>;
+    protected readonly clusterPopoverTitle: _siemens_element_translate_ng_translate.TranslatableString;
+    protected readonly locationsLabel: _siemens_element_translate_ng_translate.TranslatableString;
+    protected readonly errorText: _siemens_element_translate_ng_translate.TranslatableString;
+    protected readonly loadMoreText: _siemens_element_translate_ng_translate.TranslatableString;
+    protected readonly retryText: _siemens_element_translate_ng_translate.TranslatableString;
+    protected readonly closeText: _siemens_element_translate_ng_translate.TranslatableString;
+    protected readonly icons: Record<"elementCancel", string>;
+    protected readonly close: () => void;
+    protected readonly loadBatch: () => void;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiClusterPopoverComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiClusterPopoverComponent, "si-cluster-popover", never, { "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "closeOnMove": { "alias": "closeOnMove"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "labelProperty": { "alias": "labelProperty"; "required": false; "isSignal": true; }; "descriptionProperty": { "alias": "descriptionProperty"; "required": false; "isSignal": true; }; }, {}, ["template"], never, true, never>;
+}
+
+/**
+ * Template for custom location content inside `si-cluster-popover`.
+ *
+ * Receives a {@link ClusterPopoverContext} with all locations loaded so far. Loading feedback,
+ * error recovery, and the "Load more" button are handled by the popover.
+ *
+ * @experimental
+ */
+declare class SiClusterPopoverTemplateDirective {
+    /** @internal */
+    static ngTemplateContextGuard(directive: SiClusterPopoverTemplateDirective, context: unknown): context is ClusterPopoverContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiClusterPopoverTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiClusterPopoverTemplateDirective, "[siClusterPopoverTemplate]", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -186,5 +293,5 @@ declare class SiStatusMarkerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiStatusMarkerComponent, "si-status-marker", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { SiClusterSourceComponent, SiStatusMarkerComponent, injectSiMapStyle, injectSiMapTranslations };
-export type { ClusterColors, ClusterPoint, ClusterSegment, MarkerStatus };
+export { SiClusterPopoverComponent, SiClusterPopoverTemplateDirective, SiClusterSourceComponent, SiStatusMarkerComponent, injectSiMapStyle, injectSiMapTranslations };
+export type { ClusterColors, ClusterPoint, ClusterPopoverContext, ClusterSegment, MarkerStatus };

package/types/siemens-element-ng-markdown-extensions-katex.d.ts

@@ -11,7 +11,10 @@ import { Options } from 'remark-math';
  * An extension to render LaTeX math expressions using KaTeX. Uses `remark-math` to parse
  * the expressions inside the markdown document.
  * @param parseOptions - options passed to `remark-math`
- * @param katexOptions - options passed to `katex`
+ * @param katexOptions - options passed to `katex`. Keep the default `trust: false` for untrusted
+ * expressions. Do not set `trust: true` unless all expressions rendered with that configuration
+ * come from sources you fully trust. For untrusted expressions that require specific commands,
+ * use a narrowly scoped `trust` callback that validates commands and their arguments, including URLs.
  * @returns extension for `SiMarkdownOption.installExtension()`
  */
 declare const siMarkdownMathKaTeX: (parseOptions?: Options, katexOptions?: KatexOptions) => SiMarkdownExtension;

package/types/siemens-element-ng-markdown-extensions-mermaid.d.ts

@@ -6,6 +6,15 @@ import { MermaidConfig } from 'mermaid';
  * SPDX-License-Identifier: MIT
  */
 
+/**
+ * An extension to render Mermaid diagrams.
+ *
+ * Options configure the shared Mermaid instance and are not isolated per Markdown component.
+ * Keep `securityLevel: 'strict'` for untrusted content and avoid mixing strict and permissive
+ * configurations. The integration trusts Mermaid's generated SVG output.
+ *
+ * @param options - trusted application configuration passed to Mermaid
+ */
 declare const siMarkdownMermaid: (options?: MermaidConfig) => SiMarkdownExtension;
 
 export { siMarkdownMermaid };

package/types/siemens-element-ng-navbar-vertical-next.d.ts

@@ -2,6 +2,7 @@ import { DomPortal } from '@angular/cdk/portal';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import { SiNavbarVerticalLayout } from '@siemens/element-ng/common';
 import * as _siemens_element_ng_navbar_vertical_next from '@siemens/element-ng/navbar-vertical-next';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { ConnectedPosition } from '@angular/cdk/overlay';
@@ -171,7 +172,7 @@ declare class SiNavbarVerticalNextItemComponent implements OnInit {
 }
 
 /** @experimental */
-declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
+declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit, SiNavbarVerticalLayout {
     protected readonly icons: Record<"elementDoubleLeft" | "elementDoubleRight" | "elementLayoutPane2" | "elementLayoutPane2Right", string>;
     /**
      * Whether the navbar-vertical is collapsed.

package/types/siemens-element-ng-navbar-vertical.d.ts

@@ -3,7 +3,7 @@ import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as _angular_core from '@angular/core';
 import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { NavigationExtras, IsActiveMatchOptions, ActivatedRoute } from '@angular/router';
-import { MenuItem } from '@siemens/element-ng/common';
+import { SiNavbarVerticalLayout, MenuItem } from '@siemens/element-ng/common';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -96,7 +96,7 @@ declare class SiNavbarVerticalItemGuardDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNavbarVerticalItemGuardDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiNavbarVerticalItemGuardDirective, "[siNavbarVerticalItemGuard]", never, {}, {}, never, never, true, never>;
 }
-declare class SiNavbarVerticalComponent implements OnChanges, OnInit {
+declare class SiNavbarVerticalComponent implements OnChanges, OnInit, SiNavbarVerticalLayout {
     protected readonly icons: Record<"elementSearch" | "elementDoubleLeft" | "elementDoubleRight", string>;
     /**
      * Whether the navbar-vertical is collapsed.

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

@@ -57,6 +57,15 @@ declare class SiPopoverDirective implements OnDestroy {
     readonly popoverCounter: number;
     /** @internal */
     readonly popoverId: string;
+    /**
+     * The ID of the trigger element.
+     *
+     * @defaultValue
+     * ```
+     * `__popover-trigger_${this.popoverCounter}`
+     * ```
+     */
+    readonly id: _angular_core.InputSignal<string>;
     /** @internal */
     protected readonly isOpen: _angular_core.WritableSignal<boolean>;
     private overlayref?;
@@ -80,7 +89,7 @@ declare class SiPopoverDirective implements OnDestroy {
     protected onClick(): void;
     private createOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiPopoverDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiPopoverDirective, "[siPopover]", ["si-popover"], { "siPopover": { "alias": "siPopover"; "required": false; "isSignal": true; }; "placement": { "alias": "siPopoverPlacement"; "required": false; "isSignal": true; }; "title": { "alias": "siPopoverTitle"; "required": false; "isSignal": true; }; "containerClass": { "alias": "siPopoverContainerClass"; "required": false; "isSignal": true; }; "icon": { "alias": "siPopoverIcon"; "required": false; "isSignal": true; }; "context": { "alias": "siPopoverContext"; "required": false; "isSignal": true; }; "scrollStrategy": { "alias": "siPopoverScrollStrategy"; "required": false; "isSignal": true; }; }, { "visibilityChange": "siPopoverVisibilityChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiPopoverDirective, "[siPopover]", ["si-popover"], { "siPopover": { "alias": "siPopover"; "required": false; "isSignal": true; }; "placement": { "alias": "siPopoverPlacement"; "required": false; "isSignal": true; }; "title": { "alias": "siPopoverTitle"; "required": false; "isSignal": true; }; "containerClass": { "alias": "siPopoverContainerClass"; "required": false; "isSignal": true; }; "icon": { "alias": "siPopoverIcon"; "required": false; "isSignal": true; }; "context": { "alias": "siPopoverContext"; "required": false; "isSignal": true; }; "scrollStrategy": { "alias": "siPopoverScrollStrategy"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "visibilityChange": "siPopoverVisibilityChange"; }, never, never, true, never>;
 }
 
 declare class PopoverComponent implements OnInit, OnDestroy {
@@ -89,9 +98,16 @@ declare class PopoverComponent implements OnInit, OnDestroy {
     readonly popoverWrapper: _angular_core.Signal<ElementRef<any>>;
     /** @internal */
     labelledBy: string | undefined;
+    /**
+     * This property is set by the {@link SiPopoverTitleDirective} if present.
+     *
+     * @internal
+     */
+    readonly hasTemplateTitle: _angular_core.WritableSignal<boolean>;
     /** @internal */
     describedBy: string | undefined;
     protected readonly positionClass: _angular_core.WritableSignal<string>;
+    protected readonly ariaLabelledBy: _angular_core.Signal<string | undefined>;
     protected readonly arrowPos: _angular_core.WritableSignal<OverlayArrowPosition | undefined>;
     protected readonly description: _angular_core.Signal<_siemens_element_translate_ng_translate.TranslatableString | undefined>;
     protected popoverTemplate: TemplateRef<any> | null;
@@ -99,6 +115,7 @@ declare class PopoverComponent implements OnInit, OnDestroy {
     private elementRef;
     private focusTrapFactory;
     private focusTrap?;
+    private focusTimeoutId?;
     private readonly previouslyActiveElement;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -112,6 +129,7 @@ declare class PopoverComponent implements OnInit, OnDestroy {
 
 declare class SiPopoverTitleDirective {
     readonly popover: PopoverComponent;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiPopoverTitleDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiPopoverTitleDirective, "si-popover-title", never, {}, {}, never, never, true, never>;
 }

package/types/siemens-element-ng-shadow-root.d.ts

@@ -1,5 +1,6 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
+import { Provider } from '@angular/core';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -36,9 +37,23 @@ declare class SiShadowRootDirective extends OverlayContainer {
     private elementRef;
     private document;
     private destroyRef;
+    private themeTarget;
     protected _createContainer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiShadowRootDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SiShadowRootDirective, "[siShadowRoot]", never, {}, {}, never, never, true, never>;
 }
 
-export { SiShadowRootDirective };
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Provides the shadow root specific theme service with a dedicated theme target
+ * for components using Shadow DOM encapsulation.
+ * Use this when the component defines and loads the Element theme in its own shadow root instead
+ * of reusing the theme defined on `:root`.
+ */
+declare const provideShadowRootThemeTarget: () => Provider;
+
+export { SiShadowRootDirective, provideShadowRootThemeTarget };

package/types/siemens-element-ng-side-panel.d.ts

@@ -2,11 +2,12 @@ import * as _angular_core from '@angular/core';
 import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { Portal } from '@angular/cdk/portal';
 import { Observable } from 'rxjs';
+import * as _siemens_element_ng_common from '@siemens/element-ng/common';
+import { MenuItem } from '@siemens/element-ng/common';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import { Breakpoints, ElementDimensions } from '@siemens/element-ng/resize-observer';
 import { NavigationExtras, ActivatedRoute } from '@angular/router';
-import { MenuItem } from '@siemens/element-ng/common';
 import { ContentActionBarMainItem } from '@siemens/element-ng/content-action-bar';
 import { MenuItem as MenuItem$1 } from '@siemens/element-ng/menu';
 
@@ -208,6 +209,9 @@ declare class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges {
     protected readonly isHidden: _angular_core.WritableSignal<boolean>;
     protected readonly isFullscreenOverlay: _angular_core.WritableSignal<boolean>;
     protected readonly showTempContent: _angular_core.WritableSignal<boolean>;
+    protected readonly navbarLayout: _angular_core.Signal<_siemens_element_ng_common.SiNavbarVerticalLayout | undefined>;
+    private readonly enclosingNavbar;
+    private readonly projectedNavbar;
     private readonly panelElement;
     private readonly contentElement;
     private readonly portalOutlet;
@@ -246,7 +250,7 @@ declare class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges {
     private doOpenClose;
     private moveFocusInside;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelComponent, "si-side-panel", never, { "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "breakpoints": { "alias": "breakpoints"; "required": false; "isSignal": true; }; "enableMobile": { "alias": "enableMobile"; "required": false; "isSignal": true; }; "disableBackdrop": { "alias": "disableBackdrop"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "closed": "closed"; "contentResize": "contentResize"; }, never, ["si-side-panel-content, element-side-panel-content", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelComponent, "si-side-panel", never, { "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "breakpoints": { "alias": "breakpoints"; "required": false; "isSignal": true; }; "enableMobile": { "alias": "enableMobile"; "required": false; "isSignal": true; }; "disableBackdrop": { "alias": "disableBackdrop"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "closed": "closed"; "contentResize": "contentResize"; }, ["projectedNavbar"], ["si-side-panel-content, element-side-panel-content", "*"], true, never>;
 }
 
 /**
@@ -412,6 +416,7 @@ declare class SiSidePanelContentComponent implements OnInit {
      * For the animation we need to wait until the resize is done.
      */
     private readonly resizeAnimationDelay;
+    private readonly document;
     private readonly destroyRef;
     private readonly breakpointObserver;
     private expandedTimeout;

package/types/siemens-element-ng-skip-links.d.ts

@@ -4,7 +4,8 @@ import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 /**
  * Directive to mark an element as a target for a skip link.
- * If this directive is applied to a none interactive element, a tabindex of -1 must be added manually.
+ * Focuses the target if it is focusable, otherwise its first usable tabbable descendant.
+ * Add tabindex="-1" to a non-interactive element to focus the target itself.
  */
 declare class SiSkipLinkTargetDirective implements OnInit, OnDestroy {
     /**
@@ -13,10 +14,11 @@ declare class SiSkipLinkTargetDirective implements OnInit, OnDestroy {
     readonly name: i0.InputSignal<TranslatableString>;
     private skipLinkService;
     private elementRef;
+    private interactivityChecker;
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
-     * Call this methode to "activate" a skip link target. It will focus this element and scroll it into the view.
+     * Activate a skip link target by scrolling it into view and focusing it or its first tabbable descendant.
      */
     jumpToThisTarget(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiSkipLinkTargetDirective, never>;

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

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import * as i0 from '@angular/core';
-import { EventEmitter, Signal } from '@angular/core';
+import { InjectionToken, EventEmitter, Signal } from '@angular/core';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -48,7 +48,8 @@ interface ThemeColorSchemes {
 type ThemeColorScheme = {
     [key: string]: string;
 };
-type ThemeType = 'dark' | 'light' | 'auto';
+type ColorScheme = 'light' | 'dark';
+type ThemeType = ColorScheme | 'auto';
 declare const ELEMENT_THEME_NAME = "element";
 declare const elementTheme: ThemeDescription;
 
@@ -134,6 +135,32 @@ declare class SiDefaultThemeStore extends SiThemeStore {
     private saveStore;
 }
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * DOM boundary controlled by {@link SiThemeService}.
+ */
+interface SiThemeDomTarget {
+    /** Element that receives theme and color-scheme classes. */
+    readonly element: HTMLElement;
+    /** CSS selector used for runtime theme variables. */
+    readonly rootSelector: string;
+    /** Event target for the legacy `theme-switch` event. */
+    readonly eventTarget?: EventTarget;
+    forEachElement(callback: (element: HTMLElement) => void): void;
+    registerElement?(element: HTMLElement): () => void;
+    getStyleElement(id: string): HTMLStyleElement | null;
+    appendStyleElement(style: HTMLStyleElement): void;
+    updateColorScheme(colorScheme: ColorScheme): void;
+}
+/**
+ * Theme DOM target. The default implementation targets the current document.
+ */
+declare const SI_THEME_DOM_TARGET: InjectionToken<SiThemeDomTarget>;
+
 declare class SiThemeService {
     /**
      * The current color scheme. (e.g. light or dark).
@@ -190,8 +217,8 @@ declare class SiThemeService {
     private isBrowser;
     private previewTheme?;
     private themeStore;
-    private meta;
     private document;
+    private themeTarget;
     constructor();
     /**
      * Returns `true` if a theme with the given name is available.
@@ -228,11 +255,11 @@ declare class SiThemeService {
      */
     setActiveTheme(name?: string, type?: ThemeType): Observable<boolean>;
     /**
-     * Apply `light` or `dark` theme to the document.
+     * Apply `light` or `dark` theme to the configured theme target.
      */
     applyThemeType(type: ThemeType): void;
     /**
-     * Applies the given theme to the document. If no theme is given, the active theme is applied.
+     * Applies the given theme to the configured theme target. If no theme is given, the active theme is applied.
      */
     applyTheme(theme?: Theme, type?: ThemeType, overwrite?: boolean): void;
     /**
@@ -248,6 +275,7 @@ declare class SiThemeService {
     private activateTheme;
     private hasThemeCSS;
     private createThemeCSS;
+    private createThemeSelector;
     private createThemeVariantCSS;
     private removeThemeCSS;
     private toggleDark;
@@ -267,5 +295,5 @@ declare class SiThemeService {
  */
 declare const injectIsDarkTheme: () => Signal<boolean>;
 
-export { ELEMENT_THEME_NAME, SI_THEME_LOCAL_STORAGE_KEY, SiDefaultThemeStore, SiThemeService, SiThemeStore, elementTheme, injectIsDarkTheme };
-export type { Theme, ThemeColorScheme, ThemeColorSchemes, ThemeDescription, ThemeProperty, ThemePropertyGroup, ThemePropertyType, ThemeStorage, ThemeType };
+export { ELEMENT_THEME_NAME, SI_THEME_DOM_TARGET, SI_THEME_LOCAL_STORAGE_KEY, SiDefaultThemeStore, SiThemeService, SiThemeStore, elementTheme, injectIsDarkTheme };
+export type { ColorScheme, SiThemeDomTarget, Theme, ThemeColorScheme, ThemeColorSchemes, ThemeDescription, ThemeProperty, ThemePropertyGroup, ThemePropertyType, ThemeStorage, ThemeType };

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

@@ -50,6 +50,19 @@ declare class SiTooltipModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SiTooltipModule>;
 }
 
+/**
+ * Adds a tooltip containing the host element's text when that text is truncated.
+ */
+declare class SiTooltipOverflowDirective {
+    private readonly elementRef;
+    private readonly tooltipService;
+    private readonly element;
+    constructor();
+    private canShow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiTooltipOverflowDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiTooltipOverflowDirective, "[siTooltipOverflow]", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -90,5 +103,5 @@ declare class SiTooltipService {
     static ɵprov: i0.ɵɵInjectableDeclaration<SiTooltipService>;
 }
 
-export { SiTooltipDirective, SiTooltipModule, SiTooltipService };
+export { SiTooltipDirective, SiTooltipModule, SiTooltipOverflowDirective, SiTooltipService };
 export type { TooltipRef };