@siemens/element-ng 49.11.0 → 49.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/element-ng",
   "description": "Element Angular component library, implementing the Siemens Design Language",
-  "version": "49.11.0",
+  "version": "49.13.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,16 +35,16 @@
     "migrations": "./schematics/migration.json"
   },
   "peerDependencies": {
-    "@angular/cdk": "21",
-    "@angular/common": "21",
-    "@angular/core": "21",
-    "@angular/forms": "21",
-    "@angular/router": "21",
+    "@angular/cdk": "21 - 22",
+    "@angular/common": "21 - 22",
+    "@angular/core": "21 - 22",
+    "@angular/forms": "21 - 22",
+    "@angular/router": "21 - 22",
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
     "@siemens/element-icons": "1",
-    "@siemens/element-translate-ng": "49.11.0",
-    "@siemens/element-theme": "49.11.0",
+    "@siemens/element-translate-ng": "49.13.0",
+    "@siemens/element-theme": "49.13.0",
     "@siemens/ngx-datatable": "22 - 26",
     "ag-grid-community": "^34.3.1 || ^35.0.0",
     "flag-icons": "^7.3.2",
@@ -132,6 +132,10 @@
       "types": "./types/siemens-element-ng-card.d.ts",
       "default": "./fesm2022/siemens-element-ng-card.mjs"
     },
+    "./carousel": {
+      "types": "./types/siemens-element-ng-carousel.d.ts",
+      "default": "./fesm2022/siemens-element-ng-carousel.mjs"
+    },
     "./chat-messages": {
       "types": "./types/siemens-element-ng-chat-messages.d.ts",
       "default": "./fesm2022/siemens-element-ng-chat-messages.mjs"

package/template-i18n.json

@@ -8,6 +8,13 @@
   "SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT": "Remove attachment",
   "SI_BREADCRUMB": "Breadcrumbs",
   "SI_BREADCRUMB_ROUTER_LABEL": "breadcrumb",
+  "SI_CAROUSEL.NEXT": "Next slide",
+  "SI_CAROUSEL.PAUSE": "Pause",
+  "SI_CAROUSEL.PLAY": "Play",
+  "SI_CAROUSEL.PREVIOUS": "Previous slide",
+  "SI_CAROUSEL.ROLE_DESCRIPTION": "carousel",
+  "SI_CAROUSEL.SLIDE_PAGE": "Slide {{page}} of {{total}}",
+  "SI_CAROUSEL.SLIDE_ROLE_DESCRIPTION": "Slide",
   "SI_CHANGE_PASSWORD.BACK": "Back",
   "SI_CHANGE_PASSWORD.CHANGE": "Change",
   "SI_CHANGE_PASSWORD.CHANGE_FACTORY_PASSWORD": "Factory set password must be changed",

package/types/siemens-element-ng-application-header.d.ts

@@ -1,10 +1,9 @@
-import * as rxjs from 'rxjs';
-import { Subject } from 'rxjs';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as _angular_core from '@angular/core';
-import { OnDestroy, TemplateRef, Injector, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { OnDestroy, TemplateRef, Injector, OnInit, OnChanges, Signal, ElementRef, SimpleChanges } from '@angular/core';
 import { HeaderWithDropdowns, SiHeaderDropdownTriggerDirective } from '@siemens/element-ng/header-dropdown';
+import { Subject } from 'rxjs';
 import * as _siemens_element_ng_application_header from '@siemens/element-ng/application-header';
 import { NavigationExtras, IsActiveMatchOptions, ActivatedRoute } from '@angular/router';
 
@@ -43,7 +42,8 @@ declare class SiApplicationHeaderComponent implements HeaderWithDropdowns, OnDes
     private openDropdown?;
     private closeMobileSub;
     /** @internal */
-    readonly inlineDropdown: rxjs.Observable<boolean>;
+    readonly inlineDropdown: _angular_core.Signal<boolean>;
+    constructor();
     ngOnDestroy(): void;
     /** @internal */
     onDropdownItemTriggered(): void;
@@ -109,7 +109,6 @@ declare class SiHeaderCollapsibleActionsComponent implements OnDestroy {
     private readonly focusTrap;
     private header;
     private closeMobileSub;
-    private inlineChangeSubscription?;
     ngOnDestroy(): void;
     protected toggleMobileExpanded(): void;
     protected escapePressed(): void;
@@ -148,10 +147,16 @@ declare abstract class SiHeaderActionIconItemBase extends SiHeaderActionItemBase
      * - =true, an empty red dot will be shown
      */
     readonly badge: _angular_core.InputSignal<number | boolean | null | undefined>;
-    protected readonly badgeDot: _angular_core.Signal<boolean>;
-    protected readonly badgeValue: _angular_core.Signal<string | undefined>;
+    protected abstract readonly itemTitle: Signal<string | ElementRef<Element>>;
+    private readonly tooltipService;
+    private readonly elementRef;
+    private readonly existingTooltip;
+    protected readonly badgeDot: Signal<boolean>;
+    protected readonly badgeValue: Signal<string | undefined>;
+    constructor();
+    private setupTooltip;
     ngOnChanges(changes: SimpleChanges<this>): void;
-    protected get visuallyHideTitle(): boolean;
+    protected readonly visuallyHideTitle: Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiHeaderActionIconItemBase, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiHeaderActionIconItemBase, never, never, { "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -160,6 +165,7 @@ declare abstract class SiHeaderActionIconItemBase extends SiHeaderActionItemBase
 declare class SiHeaderActionItemComponent extends SiHeaderActionIconItemBase {
     /** The icon to be shown. */
     readonly icon: _angular_core.InputSignal<string>;
+    protected readonly itemTitle: _angular_core.Signal<ElementRef<HTMLElement>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiHeaderActionItemComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiHeaderActionItemComponent, "button[si-header-action-item], a[si-header-action-item]", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; }, {}, never, ["si-avatar", "*"], true, never>;
 }
@@ -172,6 +178,7 @@ declare class SiHeaderAccountItemComponent extends SiHeaderActionIconItemBase {
     readonly initials: _angular_core.InputSignal<string | undefined>;
     /** URL to an image which should be shown instead of the initials. */
     readonly imageUrl: _angular_core.InputSignal<string | undefined>;
+    protected readonly itemTitle: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiHeaderAccountItemComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiHeaderAccountItemComponent, "button[si-header-account-item]", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Highlightable } from '@angular/cdk/a11y';
 
@@ -12,30 +12,30 @@ declare class SiAutocompleteOptionDirective<T = unknown> implements Highlightabl
      * `__si-autocomplete-option-${SiAutocompleteOptionDirective.idCounter++}`
      * ```
      */
-    readonly id: i0.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string>;
     /** @defaultValue false */
-    readonly disabledInput: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     get disabled(): boolean;
     /** @defaultValue undefined */
-    readonly value: i0.InputSignal<T | undefined>;
-    protected active?: boolean;
+    readonly value: _angular_core.InputSignal<T | undefined>;
+    protected readonly active: _angular_core.WritableSignal<boolean>;
     protected click(): void;
     /** @internal */
     setActiveStyles(): void;
     /** @internal */
     setInactiveStyles(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutocompleteOptionDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SiAutocompleteOptionDirective<any>, "[siAutocompleteOption]", ["siAutocompleteOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "siAutocompleteOption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAutocompleteOptionDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiAutocompleteOptionDirective<any>, "[siAutocompleteOption]", ["siAutocompleteOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "siAutocompleteOption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class SiAutocompleteDirective<T> {
     /** @internal */
-    readonly listbox: i0.WritableSignal<SiAutocompleteListboxDirective<T> | undefined>;
+    readonly listbox: _angular_core.WritableSignal<SiAutocompleteListboxDirective<T> | undefined>;
     protected get activeDescendant(): string;
     protected keydown(event: KeyboardEvent): void;
     get active(): SiAutocompleteOptionDirective<T> | undefined | null;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutocompleteDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SiAutocompleteDirective<any>, "input[siAutocomplete]", ["siAutocomplete"], {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAutocompleteDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiAutocompleteDirective<any>, "input[siAutocomplete]", ["siAutocomplete"], {}, {}, never, never, true, never>;
 }
 
 declare class SiAutocompleteListboxDirective<T> implements OnInit {
@@ -47,11 +47,11 @@ declare class SiAutocompleteListboxDirective<T> implements OnInit {
      * `__si-autocomplete-listbox-${SiAutocompleteListboxDirective.idCounter++}`
      * ```
      */
-    readonly id: i0.InputSignal<string>;
-    readonly autocomplete: i0.InputSignal<SiAutocompleteDirective<T>>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly autocomplete: _angular_core.InputSignal<SiAutocompleteDirective<T>>;
     /** @defaultValue 0 */
-    readonly siAutocompleteDefaultIndex: i0.InputSignal<number>;
-    readonly siAutocompleteOptionSubmitted: i0.OutputEmitterRef<T | undefined>;
+    readonly siAutocompleteDefaultIndex: _angular_core.InputSignal<number>;
+    readonly siAutocompleteOptionSubmitted: _angular_core.OutputEmitterRef<T | undefined>;
     private injector;
     private keyManager;
     private changeDetectorRef;
@@ -62,14 +62,14 @@ declare class SiAutocompleteListboxDirective<T> implements OnInit {
     /** @internal */
     onKeydown(event: KeyboardEvent): void;
     get active(): SiAutocompleteOptionDirective<T> | null;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutocompleteListboxDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SiAutocompleteListboxDirective<any>, "[siAutocompleteListboxFor]", ["siAutocompleteListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "siAutocompleteListboxFor"; "required": true; "isSignal": true; }; "siAutocompleteDefaultIndex": { "alias": "siAutocompleteDefaultIndex"; "required": false; "isSignal": true; }; }, { "siAutocompleteOptionSubmitted": "siAutocompleteOptionSubmitted"; }, ["options"], never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAutocompleteListboxDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiAutocompleteListboxDirective<any>, "[siAutocompleteListboxFor]", ["siAutocompleteListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "siAutocompleteListboxFor"; "required": true; "isSignal": true; }; "siAutocompleteDefaultIndex": { "alias": "siAutocompleteDefaultIndex"; "required": false; "isSignal": true; }; }, { "siAutocompleteOptionSubmitted": "siAutocompleteOptionSubmitted"; }, ["options"], never, true, never>;
 }
 
 declare class SiAutocompleteModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<SiAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SiAutocompleteModule, never, [typeof SiAutocompleteDirective, typeof SiAutocompleteListboxDirective, typeof SiAutocompleteOptionDirective], [typeof SiAutocompleteDirective, typeof SiAutocompleteListboxDirective, typeof SiAutocompleteOptionDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<SiAutocompleteModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAutocompleteModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiAutocompleteModule, never, [typeof SiAutocompleteDirective, typeof SiAutocompleteListboxDirective, typeof SiAutocompleteOptionDirective], [typeof SiAutocompleteDirective, typeof SiAutocompleteListboxDirective, typeof SiAutocompleteOptionDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiAutocompleteModule>;
 }
 
 export { SiAutocompleteDirective, SiAutocompleteListboxDirective, SiAutocompleteModule, SiAutocompleteOptionDirective };

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

@@ -0,0 +1,209 @@
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+declare class SiCarouselItemDirective {
+    protected readonly carousel: SiCarouselComponent;
+    protected readonly isVisible: _angular_core.Signal<boolean>;
+    /** @internal */
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** @internal */
+    readonly order: _angular_core.WritableSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiCarouselItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiCarouselItemDirective, "[siCarouselItem]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * A carousel component for displaying slides with navigation controls and auto-play.
+ *
+ * Features horizontal scrolling with snap behavior, pagination dots, and ARIA accessibility.
+ * Suitable for dashboards, image galleries, and content showcases.
+ *
+ * @example
+ *
+ * ```typescript
+ * import { SiCarouselComponent, SiCarouselItemDirective } from '@siemens/element-ng/carousel';
+ *
+ * @Component({
+ *   imports: [SiCarouselComponent, SiCarouselItemDirective],
+ *   template: `
+ *     <si-carousel>
+ *       <div siCarouselItem><h2>Slide 1</h2></div>
+ *       <div siCarouselItem><h2>Slide 2</h2></div>
+ *       <div siCarouselItem><h2>Slide 3</h2></div>
+ *     </si-carousel>
+ *   `
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+declare class SiCarouselComponent {
+    /**
+     * Controls whether pagination controls are shown.
+     * When `true`, the carousel shows one slide per page and hides pagination controls.
+     * @defaultValue false
+     * */
+    readonly hidePageControls: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enables or configures auto-play for the carousel. When set to `true`, the carousel automatically
+     * navigates to the next slide every 5000 milliseconds (5 seconds). Pass a positive number to set a
+     * custom interval in milliseconds. Pass `false` to disable auto-play.
+     * @defaultValue false
+     * */
+    readonly autoPlay: _angular_core.InputSignal<number | boolean>;
+    /**
+     * Aria role of the carousel element. Can be set to 'region' or 'group' depending on the desired accessibility semantics.
+     * @defaultValue 'region'
+     * */
+    readonly ariaRole: _angular_core.InputSignal<"group" | "region">;
+    /**
+     * Aria label for the previous button, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PREVIOUS:Previous slide`)
+     * ```
+     */
+    readonly previousButtonAriaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Aria label for the next button, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.NEXT:Next slide`)
+     * ```
+     */
+    readonly nextButtonAriaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.SLIDE_PAGE:Slide {{page}} of {{total}}`)
+     * ```
+     */
+    readonly slidePageAriaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Label for the play button when autoplay is paused.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PLAY:Play`)
+     * ```
+     */
+    readonly playButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Label for the pause button when autoplay is active.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PAUSE:Pause`)
+     * ```
+     */
+    readonly pauseButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Role description for the carousel container, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.ROLE_DESCRIPTION:carousel`)
+     * ```
+     */
+    readonly carouselRoleDescription: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Role description for each slide, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.SLIDE_ROLE_DESCRIPTION:Slide`)
+     * ```
+     */
+    readonly slideRoleDescription: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /** @internal */
+    readonly translatedSlideRoleDescription: _angular_core.Signal<string>;
+    /** @internal */
+    readonly currentActiveSlide: _angular_core.Signal<ElementRef<HTMLElement> | null>;
+    protected readonly translatedCarouselRoleDescription: _angular_core.Signal<string>;
+    protected readonly items: _angular_core.Signal<readonly SiCarouselItemDirective[]>;
+    protected readonly currentPage: _angular_core.WritableSignal<number | null>;
+    protected readonly isPaused: _angular_core.WritableSignal<boolean>;
+    protected readonly totalPages: _angular_core.Signal<number>;
+    protected readonly edgeLeftIndex: _angular_core.WritableSignal<number>;
+    protected readonly edgeRightIndex: _angular_core.WritableSignal<number>;
+    protected readonly insufficientSpace: _angular_core.WritableSignal<boolean>;
+    protected readonly pageControlContainerMinWidth: _angular_core.WritableSignal<number>;
+    protected readonly icons: Record<"elementLeft2" | "elementRight2" | "elementPlay" | "elementPause", string>;
+    private readonly autoPlayDuration;
+    private intervalId;
+    private scrollObserver;
+    /** requestAnimationFrame id of the running scroll animation, or null when idle. */
+    private animationFrameId;
+    /** Scroll position (`scrollLeft`) the running animation is easing towards. */
+    private animationTargetLeft;
+    /** Timestamp of the previous animation frame, used to make the easing frame-rate independent. */
+    private lastFrameTime;
+    /** Whether any slide's CSS order has been changed from its natural (source-index) position. */
+    private ordersModified;
+    private readonly destroyRef;
+    private readonly viewport;
+    private readonly pageControl;
+    private readonly playPauseBtn;
+    private readonly translateService;
+    private cdRef;
+    constructor();
+    protected goToPage(page: number, forceScroll?: boolean): void;
+    protected next(): void;
+    protected previous(): void;
+    /** Navigates directly to a specific slide, used by the pagination dots. */
+    protected goToSlide(index: number): void;
+    protected toggleAutoPlay(): void;
+    protected onResize(size: {
+        width: number;
+        height: number;
+    }): void;
+    /**
+     * Navigates a single slide forward (`1`) or backward (`-1`). Rapid clicks are intentionally not
+     * queued or throttled: each click advances {@link currentPage} immediately and retargets the
+     * running scroll animation (see {@link animateTo}) towards the new slide, so the carousel keeps
+     * gliding in the click direction without waiting for the previous scroll to finish.
+     *
+     * To keep the first/last wrap a continuous one-slide glide instead of a jump across the whole
+     * track, the target slide's CSS order is placed exactly one slot away from the current slide in
+     * the click direction (so it sits adjacent to it). The viewport scroll is compensated so this
+     * reorder is invisible. Orders may extend while the user keeps clicking; they are silently
+     * normalized once the animation settles (see {@link normalizeOrders}).
+     */
+    private step;
+    /**
+     * Changes a slide's CSS order while keeping the picture stable. Reordering shifts slides along
+     * the flex track, so the scroll position is adjusted by the exact amount the anchor slide moved,
+     * making the relocation invisible and letting any in-flight animation continue seamlessly.
+     */
+    private reorderSlide;
+    /**
+     * Sets the CSS order of a slide. The value is written to the DOM synchronously in addition to
+     * the signal, so a subsequent reflow/scroll uses the new order immediately instead of waiting
+     * for the asynchronous, signal-driven change detection update.
+     */
+    private setSlideOrder;
+    /**
+     * Silently restores the canonical slide order (each slide's CSS order equals its source index).
+     * Reordering shifts the track, so it anchors on the current slide and compensates the scroll
+     * position to avoid any visible jump. Called once the scroll animation settles.
+     */
+    private normalizeOrders;
+    /** Animates the viewport so the given slide is horizontally centered. */
+    private animateToSlide;
+    /**
+     * Eases `scrollLeft` towards `targetLeft` using a frame-rate independent exponential smoothing
+     * loop. The target can be updated mid-flight (rapid clicks), so the same animation simply chases
+     * the latest slide. Native scroll-snap and smooth scroll-behavior are disabled while animating so
+     * they do not fight the manual scrolling, and the scroll observer is paused to avoid feedback.
+     */
+    private animateTo;
+    private animationFrame;
+    /** Finalizes the animation: normalizes orders, restores native scrolling and the observer. */
+    private endAnimation;
+    /** Stops the running scroll animation and restores native scrolling, without normalizing. */
+    private cancelAnimation;
+    private scheduleAutoPlay;
+    private stopAutoPlay;
+    private setupScrollObserver;
+    private updateEdgeIndices;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiCarouselComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiCarouselComponent, "si-carousel", never, { "hidePageControls": { "alias": "hidePageControls"; "required": false; "isSignal": true; }; "autoPlay": { "alias": "autoPlay"; "required": false; "isSignal": true; }; "ariaRole": { "alias": "ariaRole"; "required": false; "isSignal": true; }; "previousButtonAriaLabel": { "alias": "previousButtonAriaLabel"; "required": false; "isSignal": true; }; "nextButtonAriaLabel": { "alias": "nextButtonAriaLabel"; "required": false; "isSignal": true; }; "slidePageAriaLabel": { "alias": "slidePageAriaLabel"; "required": false; "isSignal": true; }; "playButtonLabel": { "alias": "playButtonLabel"; "required": false; "isSignal": true; }; "pauseButtonLabel": { "alias": "pauseButtonLabel"; "required": false; "isSignal": true; }; "carouselRoleDescription": { "alias": "carouselRoleDescription"; "required": false; "isSignal": true; }; "slideRoleDescription": { "alias": "slideRoleDescription"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+
+export { SiCarouselComponent, SiCarouselItemDirective };

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

@@ -494,8 +494,7 @@ declare class SiChatInputComponent implements AfterViewInit {
     protected readonly buttonDisabled: _angular_core.Signal<boolean>;
     protected readonly buttonIcon: _angular_core.Signal<string>;
     protected readonly buttonLabel: _angular_core.Signal<TranslatableString$1>;
-    protected dragOver: boolean;
-    protected get attachmentList(): Attachment[];
+    protected readonly dragOver: _angular_core.WritableSignal<boolean>;
     protected onInputChange(value: string): void;
     protected onSend(): void;
     protected onButtonClick(): void;

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

@@ -55,7 +55,7 @@ declare class SiDashboardCardComponent extends SiCardComponent implements OnDest
      */
     readonly isExpanded: _angular_core.WritableSignal<boolean>;
     /** @internal */
-    hide: boolean;
+    readonly hide: _angular_core.WritableSignal<boolean>;
     /** @internal */
     readonly enableExpandInteractionInternal: _angular_core.WritableSignal<boolean>;
     readonly enableExpandInteractionComputed: _angular_core.Signal<boolean>;
@@ -112,12 +112,12 @@ declare class SiDashboardComponent implements OnChanges, AfterViewInit {
     readonly hideMenubar: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Is `true` if a card is expanded.
-     * @defaultref {@link _isExpanded}
+     * @defaultref {@link isExpandedSignal}
      */
     get isExpanded(): boolean;
-    protected dashboardFrameEndPadding: number | null;
+    protected readonly dashboardFrameEndPadding: _angular_core.WritableSignal<number | null>;
     protected readonly hideMenubarComputed: _angular_core.Signal<boolean>;
-    private _isExpanded;
+    protected readonly isExpandedSignal: _angular_core.WritableSignal<boolean>;
     private scrollPosition;
     private readonly reinitCards$;
     private cards;

package/types/siemens-element-ng-date-range-filter.d.ts

@@ -309,7 +309,7 @@ declare class SiDateRangeFilterComponent implements OnChanges {
     protected updateFromDateRange(dateRange?: DateRange): void;
     protected point1Changed(): void;
     protected point2Changed(): void;
-    protected selectPresetItem(event: Event, item: DateRangePreset): void;
+    protected selectPresetItem(label: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiDateRangeFilterComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiDateRangeFilterComponent, "si-date-range-filter", never, { "range": { "alias": "range"; "required": true; "isSignal": true; }; "presetList": { "alias": "presetList"; "required": false; "isSignal": true; }; "presetSearch": { "alias": "presetSearch"; "required": false; "isSignal": true; }; "enableTimeSelection": { "alias": "enableTimeSelection"; "required": false; "isSignal": true; }; "basicMode": { "alias": "basicMode"; "required": false; "isSignal": true; }; "reverseInputFields": { "alias": "reverseInputFields"; "required": false; "isSignal": true; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; "isSignal": true; }; "hideAdvancedMode": { "alias": "hideAdvancedMode"; "required": false; "isSignal": true; }; "refLabel": { "alias": "refLabel"; "required": false; "isSignal": true; }; "fromLabel": { "alias": "fromLabel"; "required": false; "isSignal": true; }; "toLabel": { "alias": "toLabel"; "required": false; "isSignal": true; }; "rangeLabel": { "alias": "rangeLabel"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "nowLabel": { "alias": "nowLabel"; "required": false; "isSignal": true; }; "dateLabel": { "alias": "dateLabel"; "required": false; "isSignal": true; }; "previewLabel": { "alias": "previewLabel"; "required": false; "isSignal": true; }; "datePlaceholder": { "alias": "datePlaceholder"; "required": false; "isSignal": true; }; "beforeLabel": { "alias": "beforeLabel"; "required": false; "isSignal": true; }; "afterLabel": { "alias": "afterLabel"; "required": false; "isSignal": true; }; "withinLabel": { "alias": "withinLabel"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; "unitLabel": { "alias": "unitLabel"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "presetLabel": { "alias": "presetLabel"; "required": false; "isSignal": true; }; "advancedLabel": { "alias": "advancedLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "rangeEndDateMissingLabel": { "alias": "rangeEndDateMissingLabel"; "required": false; "isSignal": true; }; "selectRangeLabel": { "alias": "selectRangeLabel"; "required": false; "isSignal": true; }; "datepickerConfig": { "alias": "datepickerConfig"; "required": false; "isSignal": true; }; }, { "range": "rangeChange"; "applyClicked": "applyClicked"; }, never, never, true, never>;
 }

package/types/siemens-element-ng-file-uploader.d.ts

@@ -1,7 +1,6 @@
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as _angular_core from '@angular/core';
-import { OnChanges, SimpleChanges } from '@angular/core';
 import { HttpHeaders, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
 import { Observable, Subscription } from 'rxjs';
 
@@ -219,7 +218,7 @@ declare class SiFileDropzoneComponent {
     private readonly fileUploadDirective;
     protected dropHandler(event: DragEvent): void;
     protected dragOverHandler(event: DragEvent): void;
-    protected inputEnterHandler(): void;
+    protected triggerFileSelect(): void;
     protected onFilesAdded(files: UploadFile[]): void;
     protected onFileError(error: FileUploadError): void;
     /**
@@ -271,7 +270,7 @@ interface ExtUploadFile extends UploadFile {
     successResponse?: HttpResponse<unknown>;
     fadeOut?: boolean;
 }
-declare class SiFileUploaderComponent implements OnChanges {
+declare class SiFileUploaderComponent {
     /**
      * Text of the link to open the file select dialog (follows `uploadDropText`).
      *
@@ -485,15 +484,14 @@ declare class SiFileUploaderComponent implements OnChanges {
      */
     readonly filesChanges: _angular_core.OutputEmitterRef<UploadFile[]>;
     protected readonly icons: Record<"elementCancel" | "elementDelete" | "elementDocument" | "elementRedo", string>;
-    protected files: ExtUploadFile[];
+    protected readonly files: _angular_core.WritableSignal<ExtUploadFile[]>;
     protected pending: number;
     private uploading;
-    protected uploadEnabled: boolean;
-    protected maxFilesReached: boolean;
+    protected readonly uploadEnabled: _angular_core.WritableSignal<boolean>;
+    protected readonly maxFilesReached: _angular_core.WritableSignal<boolean>;
     private readonly dropZone;
-    private cdRef;
     private http?;
-    ngOnChanges(changes: SimpleChanges<this>): void;
+    constructor();
     protected handleFiles(files: UploadFile[]): void;
     protected removeFile(index: number): void;
     protected cancelUpload(file: ExtUploadFile): void;

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

@@ -365,13 +365,11 @@ declare class SiFormValidationTooltipDirective implements OnDestroy, DoCheck {
     private readonly errors;
     private currentErrors;
     private touched;
-    private activationCount;
     protected readonly describedBy: string;
     ngDoCheck(): void;
     ngOnDestroy(): void;
-    protected increaseActivation(): void;
     private updateErrors;
-    protected decreaseActivation(): void;
+    private createTooltip;
     private destroyTooltip;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFormValidationTooltipDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiFormValidationTooltipDirective, "[siFormValidationTooltip]", never, { "formErrorMapper": { "alias": "formErrorMapper"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

package/types/siemens-element-ng-header-dropdown.d.ts

@@ -1,9 +1,8 @@
 import * as _siemens_element_ng_header_dropdown from '@siemens/element-ng/header-dropdown';
 import * as _angular_core from '@angular/core';
-import { OnChanges, OnInit, OnDestroy, TemplateRef, InjectionToken } from '@angular/core';
+import { OnChanges, OnInit, OnDestroy, TemplateRef, Signal, InjectionToken } from '@angular/core';
 import { MenuItem } from '@siemens/element-ng/common';
 import { ConnectedPosition } from '@angular/cdk/overlay';
-import { Observable } from 'rxjs';
 
 /**
  * Trigger to open dropdowns in a navbar.
@@ -28,6 +27,11 @@ declare class SiHeaderDropdownTriggerDirective implements OnChanges, OnInit, OnD
     private readonly parent;
     /** @internal */
     readonly navbar: _siemens_element_ng_header_dropdown.HeaderWithDropdowns | null;
+    /**
+     * Whether the dropdown is opened inline (mobile) instead of in an overlay (desktop).
+     * Inline dropdowns are simple disclosure groups, while overlay dropdowns are dialogs.
+     */
+    protected readonly inline: _angular_core.Signal<boolean>;
     private readonly injector;
     private viewRef?;
     private portal?;
@@ -41,6 +45,7 @@ declare class SiHeaderDropdownTriggerDirective implements OnChanges, OnInit, OnD
     /** @internal */
     readonly ariaControls: string;
     private headerAnchorComponentRef?;
+    constructor();
     /** Whether the dropdown is open. */
     get isOpen(): boolean;
     /** @internal */
@@ -125,7 +130,7 @@ interface HeaderWithDropdowns {
     /** Called whenever an item is triggered that is not opening another dropdown. */
     onDropdownItemTriggered?(): void;
     /** Whether the dropdown should be opened inline. */
-    inlineDropdown?: Observable<boolean>;
+    inlineDropdown: Signal<boolean>;
     /** The position of the dropdown if opened in an overlay. */
     overlayPosition?: ConnectedPosition[];
     /** Called whenever a dropdown is opened **/

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

@@ -2,7 +2,6 @@ import * as _angular_core from '@angular/core';
 import { OnChanges, SimpleChanges, OnInit, DoCheck, OnDestroy } from '@angular/core';
 import { MenuItem, EntityStatusType } from '@siemens/element-ng/common';
 import { HeaderWithDropdowns, SiHeaderDropdownTriggerDirective } from '@siemens/element-ng/header-dropdown';
-import * as rxjs from 'rxjs';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import { SiApplicationHeaderComponent, SiHeaderCollapsibleActionsComponent, App, AppCategory, FavoriteChangeEvent } from '@siemens/element-ng/application-header';
@@ -261,7 +260,7 @@ declare class SiNavbarPrimaryComponent implements OnChanges, HeaderWithDropdowns
     protected newAppItems?: App[] | AppCategory[];
     protected active?: MenuItem;
     /** @internal */
-    readonly inlineDropdown: rxjs.Observable<boolean>;
+    readonly inlineDropdown: _angular_core.Signal<boolean>;
     /** @internal */
     onDropdownItemTriggered(): void;
     /** @internal */

package/types/siemens-element-ng-phone-number.d.ts

@@ -142,7 +142,7 @@ declare class SiPhoneNumberInputComponent implements ControlValueAccessor, Valid
      */
     readonly errormessageId: _angular_core.InputSignal<string>;
     protected readonly phoneInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
-    protected selectedCountry?: CountryInfo;
+    protected readonly selectedCountry: _angular_core.WritableSignal<CountryInfo | undefined>;
     protected placeholder: string;
     protected readonly countryFocused: _angular_core.WritableSignal<boolean>;
     protected open: boolean;
@@ -153,7 +153,7 @@ declare class SiPhoneNumberInputComponent implements ControlValueAccessor, Valid
     private readonly allowedCountries;
     private readonly disabledNgControl;
     private isValidNumber;
-    private phoneNumber?;
+    private readonly phoneNumber;
     private onChange;
     private onTouched;
     ngOnChanges(changes: SimpleChanges<this>): void;

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

@@ -48,12 +48,16 @@ declare abstract class SiTabBaseDirective implements OnDestroy, FocusableOption
     readonly tabContent: Signal<TemplateRef<any> | undefined>;
     private static tabCounter;
     private indexBeforeClose;
+    private readonly tooltipService;
+    private readonly existingTooltip;
+    private tooltipRef?;
     /** @internal */
     tabId: string;
     protected readonly icons: Record<"elementCancel", string>;
     protected tabset: _siemens_element_ng_tabs.SiTabsetComponent;
     private readonly index;
     constructor();
+    private setupIconTooltip;
     ngOnDestroy(): void;
     protected closeTab(event: Event): void;
     /** @internal */