Changelog

51.1.0 (2026-09-21)¶

Features¶

navbar-vertical-next: implement mobile flat group functionality (7c44799)

Bug Fixes¶

auto-collapsible-list: fix memory leak (1e54467)
charts: fix potential memory leak due to event listeners (434c8af)
live-preview: fix memory leak (0525730)
resize-observer: fix memory leak when never subscribed to observer (ba35136)
schematics: remove test files and imports (b5a2b66), closes #2795
theme: fix selection buttons with only icons on Firefox (43af0e7)

51.0.1 (2026-09-17)¶

Revert "refactor(notification-item): deprecate component" (a9df4a9)

Bug Fixes¶

card: align header icon with heading (b854ca3)
card: omit undefined heading ids (690fd4b)
dashboards: prevent widget move and resize in expanded mode (02f9d1e)
theme: rename color tokens (c5008c3)

NOTES¶

theme: Semantic color tokens gained a color group segment.

This is an emergency correction of the already released 51.0.0 names to align with the Siemens Design Language, shipped as a patch.

Renamed every system color token from si.sys.. to si.sys.color.., for example $si-sys-background-0 to $si-sys-color-background-0 and --si-sys-text-primary to --si-sys-color-text-primary.

Run ng update @siemens/element-ng to apply the 51.0.1 schematic. If you import generated brand dist files, update si-dark.* and si-light.* to si-sys-color.dark.* and si-sys-color.light.*, si-typography.* to si-sys-typography.default.*, and si-sys-classes.* to si-sys-color-classes.*.

51.0.0 (2026-09-10)¶

Release blog post: "Welcome Element v51!"

Features¶

angular: update to angular version 22 (9b00425)
cdk/overlay: expose scroll strategies (766d401)
chat-messages: add AI activity trace (5d34fcb)
chat-messages: add content projection to messages (fe1b220)
chat-messages: add follow-up prompts (49b0f80)
chat-messages: add sources to si-ai-message (4d67760)
dashboards-ng: support bulk add from widget catalog (ff9dfa4)
datatable: support @siemens/ngx-datatable v27 (3485573)
datatable: support striped rows in ngx-datatable (79facb6)
dropdown: update background color to background-3 (ba611a2), closes #2661
file-uploader: merge upload texts into single button label (82acd6e)
formly: add ngx-formly v7 support (0c68442)
forms: new form-col-layout classes for CSS only responsiveness (ad1fc6e)
form: support Angular's signal forms with new si-form-field (98fa995)
http-error-pages: add HTTP error pages component with SVG illustrations (acf260a)
info-page: adjust illustration size and spacing defaults (7834d2f)
landing-page: use outlined card for EULA content (526bac8)
list-details: support configurable split unit for list pane (942a999)
list-item: add list variants and improve examples (579f7eb), closes #2634
list-item: introduce new styles (53c302a), closes #1641
live-preview: support relative imports in loader via rel=true (2c6fc3c)
main-detail-container: support configurable split unit for main part (c001490)
map-styles: introduce new library @siemens/map-styles (a1e69ce)
maplibre: provide injectSiMapTranslations signal with default translations (6c58a2a)
maplibre: provide basic theme for maplibre (967ad01)
maplibre: provide cluster visualization via si-cluster-source (5c78723)
maplibre: provide status marker component (ab9b859)
markdown: copy/download as CSV for tables (8fa45cc)
markdown: custom directive for rendering tabset/tabs (d81ed3c)
markdown: handle directive :cite[name] like [name] citation (3cef2a9)
markdown: make tables scroll horizontally if needed (75bb09d)
markdown: markdown rendering component (6178e9c)
markdown: special handling for file: links (957cc55)
markdown: support filename in code block through meta (dc1e173)
markdown: support markdown directives and add a callout directive (a17bc2a)
markdown: support source citations (4446cf9)
navbar-vertical-next: add label input to navbar items instead of using ng-content (fea322f)
navbar-vertical-next: open items in overlay menu when chip is clicked (030b370)
navbar-vertical-next: update aria-haspopup attributes and refine dialog structure in tests (346d049)
schematics: add launchpad factory symbol removal instruction (f192c2f)
schematics: add migration data for btn-ghost and btn-primary-ghost naming convention (470117c), closes #1882
schematics: add migration for icon status removal and symbol renaming (e231829)
schematics: add migration for updating deprecated CSS properties (5d1405c)
schematics: add schematics and migration for deprecated css property (3bd970c)
schematics: add schematics for button class migration in si-select (c0585f2)
schematics: add schematics for deprecated typography styles migration (9f6a1de)
schematics: add schematics for maps input migration (f0ab0b0)
schematics: add typography variables for schematics and add tests for typography variables (758ef03)
schematics: provide schematics for si-tabset-legacy migration (9700122)
select: support custom template for selected input values (dcc8c33), closes #2713
side-panel: add back button slot for inner navigation (d208787), closes #2381
source-chip: add source chip component (4a74ae7)
split: configure sizes per part via size and unit (6f74f7c)
split: migrate showCollapseButton to collapsible (6a8bf77), closes #2596
split: migrate si-split to OnPush (5c204c9)
split: remove scale input in favour of unit (830989d)
split: rename collapse direction API (b00533a)
system-banner: add support for links and other content (52dc174)
system-banner: update typography and dimensions (7c47e8e), closes #2491
theme: align ghost button naming convention (dbba17a), closes #1797
theme: consumer defined root font size (656712e), closes #2166
theme: expose new Siemens Design Langauge system tokens (98e312d)
theme: introduce generic CSS variable backed sizing map (4b87633)
theme: new utilities based on system tokens (e0707bc)
theme: support dynamic root selectors (6467e23)
theme: turn line-heights into CSS variables (61180d2)
theme: variable icon sizes (f343d0a)
translate: support @ngx-translate/core v18 (28c1a8c)
tree-view: support tracking immutable items (09784c2), closes #2405
typography: apply body paragraph typography to affected components (5d65ccc), closes #2611
typography: update font definitions (e4376c9)

Bug Fixes¶

accordion: prevent initial panel animation (25e1895), closes #2347
ag-grid: restore pinned row shadows (f79dcb8)
application-header: fix item size to be 44px (for RFS 16px) isof 46px (9c955d7)
application-header: launchpad Show more/less should have aria-expanded (e4bfc6b)
breadcrumb: add space key activation to dropdown toggle (3c20e31)
breadcrumb: remove obsolete dropdown styling (53c1dc9)
charts/theme: add support for visualmap (0ced159)
charts/theme: update tooltip text and background color (80419cc)
chat-messages: correct chat container spacing for activity message (bbcf253)
chat-messages: display line only between adjacent activity messages or traces (fa4708d)
chat-messages: in si-chat-input restore primary action and attach button displaying (e796418)
chat-messages: pass messages to action handlers (311d836)
chat-messages: use siTooltip for more actions in si-chat-input (027d159)
dashboards-ng: use svg icon for default placeholder (7e14883)
dashboards: translate widget card heading aria label (2da2bd6)
dashboards: use correct aria roles for widgets in none edit mode (1a20450)
datatable: show complete header focus ring (14ca682)
date-range-filter: align spacing with UX (f113394)
date-range-filter: support entering invalid date time values (664a86a)
datepicker: propagate date range validation to signal forms (9022187)
datepicker: reset manually edited input value (1e7d72e), closes #2574
datepicker: use btn-tertiary styling for header buttons (d040d43)
empty-state: align icon size with figma specs (b76be61)
empty-state: keep overflowing content reachable (f1b23b2)
empty-state: use relative size for icon (a23915e)
filtered-search: omit daterange specific properties from datepickerConfig (7d00413)
filtered-search: prevent vertical stretching (981b88a)
form: group template-driven radio buttons (3a4bac9)
forms: adjust form check spacing (5734e54), closes #612
live-previewer: render examples on on active tabs (e49f1eb)
maps-ng: embed tooltip content as text instead of html (e36ea79), closes CVE-2026-66155
markdown: make HighlightJS only auto-guess language in none specified (af7425b)
menu-bar: align border-radius with UX specs (237e312)
menu-bar: ensure icon-only menu triggers have correct width (4ecc76a)
menu: mark expanded dropdown trigger as active (a8a96b2)
menu: preserve submenus when items update (978af4d), closes #2335
native-popover: bring to top layer for special cases (183a541), closes #2619
navbar-vertical-next: update toggle button text and flyout accessibility (79a9d00)
navigation: use consistent icon sizes (4e131d9), closes #2483
password-toggle: use ghost tertiary button (832dea3)
popover: emit current state visibility with siPopoverVisibilityChange (3dd9301)
popover: reopen after close scroll strategy (db555e4)
result-details-list: ensure running state changes don't cause a layout shifts (47460b2)
search-bar: align with UX (030d2ea)
search-bar: disabled state styles on hover (6c3da4e)
search-bar: restore focus after clear (25b3c68)
shadow-root: sync overlay styles (2f3b593), closes #2447
split: adjust handle size and cursor styles for better usability (6408eac), closes #2102
split: restore split part sizes regardless of initial size (115ff72)
split: use tertiary ghost icon buttons in headers (fdef8b6), closes #2520
status-bar: use static text for the toggle button (91e956a), closes #2004
summary-chip: fix layout (fbb3d92)
summary-chip: make single-digit chips circular (e16817d)
summary-widget: fix layout (6a8c6b0)
table: use correct caption style (e1736a2)
tabs: ensure first tab is active when no active tab is provided (d4fe947)
tabs: remove tabindex from non-scrollable panels (ad5552b)
theme: update page header title size (fd9622c), closes #2498
theme: update tab visual design (6857221), closes #2489
theme: use relative sizes for table row heights (e61d01b)
toast-notification: allow passing translation params to constructor function (b4a9cca)
tooltip: resolve placement when shown (164c2dd)
tour: add aria modal (f42bed9)
tour: calculate arrow position correctly on size change (f4168c0)
translate-cli: avoid shell expansion for glob (8360c4f)
tree-view: align items with and without folder state toggle (15d1cf4), closes #2550
ux: update texts from ux writing review (b7a5423)
wizard: focus next step content (955f4eb), closes #2346

NOTES¶

chat-messages: In si-chat-input, the actions input is displayed inline again. Use secondaryActions for menu-only ("+) actions.
navigation: si-application-header and si-navbar-vertical now use the normal 20px icon size.
tabs: Applications using si-tabset-legacy and si-tab-legacy can migrate automatically to the current tabs API with:

ng g @siemens/element-ng:migrate-tabs-legacy
theme: The default root font size is now configurable when loading the Element theme. Pass the value via $element-root-font-size, or set it to none to use the browser default.

If nothing is provided, the default remains 16px, so nothing breaks and projects can opt in when ready. We recommend switching to none / initial as soon as possible. Starting with Element v52, initial will be the default.

@use '@siemens/element-theme/src/theme' with ( $element-root-font-size: initial );

Furthermore, a series of helper classes are provided that can be applied to the <html> tag to change the root font size: - rfs-none: use the browser default, regardless of the configured default - rfs-16: use 16px - rfs-20: use 20px - rfs-24: use 24px

Any other value can be used by setting the CSS variable at the <html> tag or using a :root {} CSS block: --element-root-font-size.
typography: Our components now use the Siemens Design Language styles for typography.

All headings are consistently sbold style
Consistent naming conventions for text styles
Font-sizes steps follow a logical 1.2 factor, rounded to even pixel value
Line-heights follow font size definitions

Make sure to use the page header, especially the si-layout-title on all h2 to maintain a correct layout.

BREAKING CHANGES¶

angular: Angular 22+ is required. Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=21.0-22.0
angular: endpoint @siemens/element-ng/translate no longer re-exports @siemens/element-translate-ng/translate.

Use @siemens/element-translate-ng/translate instead.

Before:

import { ... } from '@siemens/element-ng/translate';

After:

import { ... } from '@siemens/element-translate-ng/translate';
angular/aria: @angular/aria is now required peer dependency for @siemens/element-ng.
application-header: Removed component SiHeaderSiemensLogoComponent. Use SiHeaderLogoDirective instead.

 <a si-header-siemens-logo routerLink="/" aria-label="Siemens" class="d-none d-md-flex"></a>  <a siHeaderLogo routerLink="/" class="d-none d-md-flex"></a>
charts/gauge: Input SiChartGaugeComponent.labelFormatter should no longer be used to format the value, it should be used only to format axis labels. For formatting values, use SiChartGaugeComponent.valueFormatter instead.
chat-message: For si-ai-message and si-user-message, the contentFormatter input is no longer available. Instead use content projection. For markdown content, use the new si-markdown component. There's a schematic to automatically upgrade.
dashboards-ng: SiWidgetCatalogComponent.closed signature changed from output<Omit<WidgetConfig, 'id'> | undefined> to output<Omit<WidgetConfig, 'id'>[] | undefined>. In single-select mode the array always contains exactly one entry.

This only affects code that either: - subclasses SiWidgetCatalogComponent and overrides closed or calls this.closed.emit(...), or - uses <si-widget-catalog> directly in a template and subscribes to (closed).

Migration for subclasses: - Update overridden output type to Omit<WidgetConfig, 'id'>[] | undefined. - Wrap emit(config) calls as emit([config]).

Migration for direct template consumers:

Before:

onClosed(config: Omit<WidgetConfig, 'id'> | undefined) { if (config) this.addWidget(config); }

After:

onClosed(configs: Omit<WidgetConfig, 'id'>[] | undefined) { configs?.forEach(config => this.addWidget(config)); }
dashboards-ng: GridStack ^13 is now required.
datatable: @siemens/ngx-datatable 26+ is required. Read their changelog and update your app.
datepicker: Removed input SiDatepickerComponent.calenderWeekLabel. Use SiDatepickerComponent.calendarWeekLabel instead.
file-uploader: The uploadTextFileSelect input has been removed from SiFileUploaderComponent and SiFileDropzoneComponent.

The full text now lives in uploadDropText, which renders as the button. Remove uploadTextFileSelect and move its content into uploadDropText.

Before:

<si-file-uploader uploadDropText="Drop files here or" uploadTextFileSelect="click to upload" />
After:
<si-file-uploader uploadDropText="Drop files here or click to upload" />
filtered-search: CriterionDefinition.datepickerConfig type narrowed

The type of datepickerConfig in CriterionDefinition (filtered-search) changed from DatepickerInputConfig to Omit<DatepickerInputConfig, 'enableDateRange' | 'enableTwoMonthDateRange'>.

The properties enableDateRange and enableTwoMonthDateRange are no longer accepted in datepickerConfig when used with filtered-search criteria, as they had no effect in that context.

Migration: Remove any enableDateRange and enableTwoMonthDateRange properties from your datepickerConfig objects passed to CriterionDefinition.
formly: The @siemens/element-ng/formly entry point is now based on ngx-formly v7.1 and exposes the standalone SiFormlyComponent. The v6 implementation moved to @siemens/element-ng/formly-legacy. Consumers still on ngx-formly v6 must either migrate to v7.1 or change the import path to @siemens/element-ng/formly-legacy (SiFormlyModule). The legacy package is deprecated and will be removed in a future release.
icon: Removed provideIconConfig() provider without replacment.

Element will now always render SVG icons internally. Consumer which provide their own custom icons must use the icons property of a theme: https://github.com/siemens/element/blob/main/projects/element-ng/theme/si-theme.model.ts#L42.

As a consequence, overrides of the .element-* icon font classes no longer affect Element components.
icon-status: Removed component SiIconStatusComponent. Use SiStatusCounterComponent component instead.
list-details: The default sizing unit of the list split part in si-list-details when resizing is enabled has changed from fr to px.

When resizing is enabled: - The list part now defaults to unit="px" (initial size of 300px), and the details part takes the remaining space (1fr). - listWidth is now interpreted in listWidthUnit. With the default listWidthUnit="px", numeric values are treated as pixels instead of percentages. - [(listWidth)] now emits and accepts pixel values instead of percentage values.

To retain the previous relative percentage-based split behavior, explicitly set listWidthUnit="fr".

Static layouts (disableResizing="true") are unaffected and continue to interpret listWidth as a percentage.

Before:

<si-list-details [listWidth]="50" />

After (retaining previous relative behavior):

<si-list-details [listWidth]="50" listWidthUnit="fr" />

After (adopting new fixed-width layout):

<si-list-details [listWidth]="300" />
live-preview: SampleModule and the modules configuration are removed.

Migrate every preview example to a standalone SampleComponent, declaring its dependencies in the component imports and providers. Remove the SampleModule export and the modules property from the preview configuration.
live-preview: Built-in dummy routes are removed.

Declare the routes required by an example in that example's providers:

import { Component } from "@angular/core"; import { Route } from "@angular/router"; import { provideExampleRoutes } from "@siemens/live-preview"; const routes: Route[] = [ { path: "route1", component: RouteOneComponent }, { path: "route2", component: RouteTwoComponent } ]; @Component({ providers: [provideExampleRoutes(routes)] }) export class SampleComponent {}

To retain shared fallback routes for examples that do not declare their own, configure defaultRoutes in SiLivePreviewModule.forRoot():

import { Route } from "@angular/router"; import { SiDummyComponent, SiLivePreviewModule } from "@siemens/live-preview"; const defaultRoutes: Route[] = [ { path: "route1", component: SiDummyComponent }, { path: "route2", component: SiDummyComponent } ]; SiLivePreviewModule.forRoot({ // ... defaultRoutes });
live-preview: Built-in Ionic runtime rendering is removed.

Restore Ionic rendering with a custom runtimeComponent that extends SiLivePreviewRuntimeComponent:

import { Component, ViewContainerRef, viewChild } from "@angular/core"; import { IonApp } from "@ionic/angular/standalone"; import { SiLivePreviewRuntimeComponent } from "@siemens/live-preview"; @Component({ imports: [IonApp], selector: "app-ionic-preview-runtime", template: "<ion-app><ng-container #container /></ion-app>" }) export class IonicPreviewRuntimeComponent extends SiLivePreviewRuntimeComponent { readonly container = viewChild.required("container", { read: ViewContainerRef }); }

Configure it with runtimeComponent: IonicPreviewRuntimeComponent. The base class renders the example into container and preserves route, ready, and error handling.
live-preview: The live-preview components were migrated to signal inputs.
loading-spinner: Removed LOADING_SPINNER_BLOCKING and LOADING_SPINNER_OVERLAY injection tokens. Use the corresponding inputs of si-loading-spinner instead.
main-detail-container: The default sizing unit of the main split part in si-main-detail-container when resizableParts is enabled has changed from fr to px.

When resizableParts is enabled: - The main part now defaults to unit="px" (initial size of minMainSize, default 300px), and the detail part takes the remaining space (1fr). - mainContainerWidth is now interpreted in mainContainerWidthUnit. With the default mainContainerWidthUnit="px", numeric values are treated as pixels instead of percentages. - [(mainContainerWidth)] and (mainContainerWidthChange) now emit and accept pixel values instead of percentage values. - When adopting the new px default, main-part sizes saved via stateId with fr are not restored on the first load after upgrading because the persisted unit no longer matches. Keeping mainContainerWidthUnit="fr" preserves compatible saved splitter positions.

To retain the previous relative percentage-based split behavior, explicitly set mainContainerWidthUnit="fr".

Static layouts (resizableParts="false") are unaffected and continue to interpret mainContainerWidth as a percentage.

Before:

 <si-main-detail-container resizableParts [mainContainerWidth]="40" [(detailsActive)]="detailsActive" > <div slot="mainData">...</div> <div slot="details">...</div> </si-main-detail-container>

After (retaining previous relative behavior):

 <si-main-detail-container resizableParts mainContainerWidthUnit="fr" [mainContainerWidth]="40" [(detailsActive)]="detailsActive" > <div slot="mainData">...</div> <div slot="details">...</div> </si-main-detail-container>

After (adopting new fixed-width layout):
 <si-main-detail-container resizableParts [mainContainerWidth]="360" [(detailsActive)]="detailsActive" > <div slot="mainData">...</div> <div slot="details">...</div> </si-main-detail-container>
map-styles: @siemens/maps-ng now requires @siemens/map-styles as a peer dependency.

Consumers upgrading @siemens/maps-ng must also add @siemens/map-styles to their project dependencies.
maps: Removed constant DEFAULT_FIT_PADDING without any replacement.
maps: Removed extraProps property handling in map feature points

The extraProps property was never part of the official MapPoint interface and is no longer supported. Use extraProperties instead:

Before:

const point: MapPoint = { // ... other properties extraProps: { label: 'Custom Label', value: 'Custom Value' } };

After:

const point: MapPoint = { // ... other properties extraProperties: { label: 'Custom Label', value: 'Custom Value' } };
maps: Removed input SiMapComponent.moreText. Use SiMapTooltipComponent.moreText instead.

Example:
<si-map ...><si-map-tooltip [moreText]="'KEY_MORE'" /></si-map>
markdown-renderer: si-markdown-renderer and getMarkdownRenderer have been removed in favor of the new si-markdown component. There's a schematic to replace the component.
resize-observer: Removed method ResizeObserverService._checkAll. For testing purposes use the resize observer mock:

ts beforeEach(() => mockResizeObserver()); afterEach(() => restoreResizeObserver()); it('should trigger resize', () => { // For all observed elements MockResizeObserver.triggerResize({}); // For specific HTML element MockResizeObserver.triggerResize({ target: myElement }); });
search-bar: removed the tabbable input of si-search-bar

Removed the tabbable input without any replacement. Remove the input from your templates:

 <si-search-bar [tabbable]="false" />  <si-search-bar />

The migration-v51 schematic removes the input automatically.
select: When using si-select withouth .form-control the classes .btn .btn-ghost must be applied to keep a similar appreance.
sort-bar: Removed component SiSortBarComponent without any replacement.
split: Rename si-split-part replaced collapseDirection with collapsible.

Migrate CollapseTo values: - start -> to-start - end -> to-end

Before:

<si-split-part collapseDirection="start" />
After:
<si-split-part collapsible="to-start" />
split: si-split and si-split-part inputs were migrated to signal inputs
split: The scale input and exported Scale type have been removed from si-split-part.

Use unit="fr" for split parts that scale with the available space and unit="px" for split parts that keep a fixed size.

Before:

<si-split> <si-split-part scale="auto"> Flexible content </si-split-part> <si-split-part scale="none"> Fixed content </si-split-part> </si-split>

After:

<si-split> <si-split-part size="1" unit="fr"> Flexible content </si-split-part> <si-split-part size="240" unit="px"> Fixed content </si-split-part> </si-split>

Replace typed Scale values with SplitUnit, mapping 'auto' to 'fr' and 'none' to 'px'.
split: The showCollapseButton input on si-split-part has been removed.

The collapse button will now be rendered when the collapsible input is provided.

Before:

<si-split> <si-split-part showCollapseButton="false" ... /> <si-split-part showCollapseButton="true" ... /> </si-split>

After:

<si-split>  <si-split-part ... />  <si-split-part collapsible="to-start" ... /> </si-split>
split: The relative sizes of split parts are now configured on each si-split-part via the required size and unit input ('px' | 'fr'), instead of the sizes array on si-split.

The sizes input on SiSplitComponent has been removed and SiSplitPartComponent.size is now required. The unit input on SiSplitPartComponent is now required.

Remove SiSplitComponent.sizes input.
Add SiSplitPartComponent.unit input ('px' | 'fr').
Make SiSplitPartComponent.size required.

Migration: move the relative sizes from [sizes] on si-split onto the size/unit inputs of each si-split-part.

Before:

<si-split [sizes]="[20, 60, 20]"> <si-split-part>Left</si-split-part> <si-split-part>Center</si-split-part> <si-split-part>Right</si-split-part> </si-split>
After:
<si-split> <si-split-part size="20" unit="fr">Left</si-split-part> <si-split-part size="60" unit="fr">Center</si-split-part> <si-split-part size="20" unit="fr">Right</si-split-part> </si-split>
Fixed pixel sizes are now expressed directly on the part:
<si-split> <si-split-part size="200" unit="px">Fixed 200px</si-split-part> <si-split-part size="1" unit="fr">Remaining space</si-split-part> </si-split>
status-bar: Changed the accessibility text inputs of si-status-bar

The expandButtonText and collapseButtonText inputs were removed and replaced by a single toggleButtonText input. Update usages that set these inputs to use toggleButtonText instead. The associated translation keys SI_STATUS_BAR.EXPAND and SI_STATUS_BAR.COLLAPSE were replaced by SI_STATUS_BAR.TOGGLE.
theme: All .si-* typography utility classes were adapted to match the new typography system. Replace the following matches with their new counterparts:

Instead of .si-h1-black, use .si-h1-bold instead.
Instead of .si-title-1-bold, use .si-h4-bold instead.
Instead of .si-title-1, use .si-h4 instead.
Instead of .si-title-2-bold, use .si-h5-bold instead.
Instead of .si-title-2, use .si-h5 instead.
Instead of .si-body-1, use .si-body-lg instead.
Instead of .si-body-2, use .si-body instead.
Instead of .si-display-1, use .si-display-xl instead.
Instead of .si-display-2, use .si-display-lg instead.
Instead of .si-display-3, use .si-display-bold instead.
Instead of .si-display-4, use .si-display instead.
theme: All $si-font-size-*, $si-line-height-*, and $si-font-weight-* variables were adapted to match the new typography system. Replace the following matches with their new counterparts:

Instead of $si-*-h1-black, use $si-*-h1-bold instead.
Instead of $si-*-title-1-bold, use $si-*-h4-bold instead.
Instead of $si-*-title-1, use $si-*-h4 instead.
Instead of $si-*-title-2-bold, use $si-*-h5-bold instead.
Instead of $si-*-title-2, use $si-*-h5 instead.
Instead of $si-*-body-1, use $si-*-body-lg instead.
Instead of $si-*-body-2, use $si-*-body instead.
Instead of $si-*-caption-1, use $si-*-caption instead.
Instead of $si-*-display-1, use $si-*-display-xl instead.
Instead of $si-*-display-2, use $si-*-display-lg instead.
Instead of $si-*-display-3, use $si-*-display-bold instead.
Instead of $si-*-display-4, use $si-*-display instead.
theme: Removed css property --si-feedback-icon-offset. Use --si-feedback-icon-size instead.
theme: Replace the CSS class text-primary with text-accent to preserve the previous color.

The legacy text-primary selector conflicts with the new system token text-primary utility and cannot be retained. Applications using text-primary must update templates or styles before upgrading.
theme: The .btn-ghost class now uses the primary ghost style instead of the tertiary style. To maintain the current behavior in your application:

rename: .btn-ghost to .btn-tertiary-ghost
rename: .btn-primary-ghost to .btn-ghost

In the past, only .btn-ghost existed which was style wise appearing like a tertiary button. In order to support the full button style features we introduced a temporary .btn-primary-ghost class. Now the ghost buttons are aligned.
theme: The spacers in $spacers are now derived from CSS variables. This means they cannot be used in simple math expressions like before but require a calc() operation.
theme: there's new spacers, changing spacer-10 and spacer-11.

spacer-10 needs to be replaced with spacer-13
spacer-11 needs to be replaced with spacer-14

This also affect margin/padding helpers, e.g. mt-10 becomes mt-13, etc. There's a schematic provided to automatically update these.
translate: @ngx-translate/core@16 is no longer supported. Please update to @ngx-translate/core@18.

DEPRECATIONS¶

application-header: SiLaunchpadFactoryComponent.showLessAppsText input is deprecated and no longer used. SiLaunchpadFactoryComponent.showMoreAppsText is always displayed, independent of the state.
dashboards: widgetCatalog property of SiWidgetCatalogComponent is deprecated, use the signal based widgetList property instead.
dashboards-ng: SiWidgetCatalogComponent.selected is deprecated in favor of selectedWidgets and hasSelection. The old property only ever holds the first selected widget and is not updated in multi-select mode. It will be removed in one of the next major releases. Only relevant if you extend SiWidgetCatalogComponent.
datatable: import datatable config from ngx-datatable

Deprecated NgxDatatableConfig and INgxDatatableConfig exports from @siemens/element-ng/datatable. Import NgxDatatableConfig from @siemens/ngx-datatable instead.
formly: The @siemens/element-ng/formly-legacy entry point (SiFormlyModule, SiFormlyComponent) is deprecated and will be removed in a future release. Migrate to the standalone SiFormlyComponent from @siemens/element-ng/formly which is based on ngx-formly v7.

Before (v6 — @siemens/element-ng/formly-legacy):

import { SiFormlyModule } from '@siemens/element-ng/formly-legacy'; @NgModule({ imports: [SiFormlyModule.forRoot()] }) export class AppModule {}

After (v7.1 — @siemens/element-ng/formly):

import { SiFormlyComponent } from '@siemens/element-ng/formly'; @Component({ imports: [SiFormlyComponent] }) export class MyComponent {}
forms: si-form-container should no longer be used.

When providing a form wide error mapper, use the provideFormValidationErrorMapper.
import { provideFormValidationErrorMapper } from '@siemens/element-ng/forms' @Component({ template: `<form>...</form>` providers: [provideFormValidationErrorMapper({ 'name.required': 'CUSTOM_REQUIRED_ERROR' })] }) class MyFormComponent {}

When using the column layout, use the form-col-layout classes.

 <form class="responsive-form-col-layout">...</form>  <form class="form-col-layout">...</form>

For a custom breakpoint use the SCSS mixin:

@use '@siemens/element-theme/src/styles/bootstrap/mixins/form-layout'; // Custom responsive breakpoint .custom-form-col-layout { // Above 400px the column layout is used @include form-layout.responsive-form-col-layout(400px); }
native-charts-ng: SiNativeChartsNgModule is deprecated, import individual components instead. Separate entry points are available for each component, allowing applications to import components from specific entry points.
theme: Legacy Bootstrap shadow variables and utilities, elevation APIs, and box shadow color custom properties have been deprecated.

Replace deprecated APIs as follows:

.shadow -> .shadow-2
.shadow-sm -> .shadow-1
.shadow-lg -> .shadow-3
$box-shadow -> $si-sys-effects-shadow-2
$box-shadow-sm -> $si-sys-effects-shadow-1
$box-shadow-lg -> $si-sys-effects-shadow-3
$box-shadow-inset -> no replacement
$input-box-shadow -> no replacement
$popover-box-shadow -> $si-sys-effects-shadow-3
$modal-content-box-shadow-xs -> $si-sys-effects-shadow-3
$modal-content-box-shadow-sm-up -> $si-sys-effects-shadow-2
$thumbnail-box-shadow -> $si-sys-effects-shadow-1
.elevation-none -> .shadow-none
.elevation-[1-4] -> .shadow-[1-4]
$element-elevation-[1-4] -> $si-sys-effects-shadow-[1-4]
$element-elevation-inset-[1-4] -> no replacement
--element-box-shadow-color-[1-2] -> no replacement
theme: Legacy color utilities are deprecated in favor of system token utility classes.

The following legacy utilities remain available during the deprecation period. Replace them with system token utility classes. Run the Element update schematic to migrate supported classes in Angular templates.

Deprecated utility Replacement
bg-primary background-accent
bg-secondary background-neutral
bg-tertiary background-4
bg-success background-success
bg-info background-information
bg-warning background-warning
bg-danger background-danger
bg-base-0 background-0
bg-base-1 background-1
bg-base-2 background-2
bg-base-3 background-3
bg-base-4 background-4
bg-base-info background-information-subtle
bg-base-success background-success-subtle
bg-base-caution background-caution-subtle
bg-base-warning background-warning-subtle
bg-base-danger background-danger-subtle
bg-base-critical background-critical-subtle
text-body text-primary
text-tertiary text-disabled
text-muted text-disabled
text-info text-information
theme: The list group styles are deprecated, use the Element list (.list / .list-item) instead. The list group is only a bordered container and has no notion of the list anatomy, so migrating means restructuring the markup, it is not a plain class rename.

Deprecated Replacement
.list-group .list, optionally with .list-divider, .list-filled or .list-outline
.list-group-item .list-item, wrap the content in slot classes such as .list-item-title and .list-item-description
.list-group-item-action .list-item.list-item-action on a <button> or <a>
.list-group-flush .list.list-divider to preserve dividers; otherwise .list, which has no outer border
.list-group-md, .list-group-lg No replacement, the height of a list item follows its content
.list-group-horizontal* No replacement, use flex or grid utilities
.list-group-numbered No replacement, use an ordered list with a custom counter because .list-item removes list markers
.list-group-item-secondary, .list-group-item-success, .list-group-item-warning, .list-group-item-caution, .list-group-item-danger, .list-group-item-info No replacement, use background and text utilities, or a list item indicator
.list-header No replacement, use a heading element
$list-group-* Sass variables No replacement

Before:

<ul class="list-group"> <li class="list-group-item">Item</li> </ul>

After:

<ul class="list"> <li class="list-item"> <span class="list-item-title">Item</span> </li> </ul>

Choose the list style according to the application context. See the "Choosing the right style" section in the list documentation for the appropriate migration guidance.

The deprecated styles remain available and there is no removal planned at this point, so applications can keep using them. They will not receive further design updates and may be removed in a future major version. See the list documentation for the full migration guide.
typography: The former bold and caption typography styles have been replaced.

The following typography utilities and Sass variables are deprecated. Replace them as follows:

.si-h1-bold -> .si-h1
.si-h4-bold -> .si-h4
.si-caption -> .si-body-sm
.si-display-bold -> .si-display-lg-sbold
$si-(font-size|line-height|font-weight)-h1-bold -> $si-(font-size|line-height|font-weight)-h1
$si-(font-size|line-height|font-weight)-h4-bold -> $si-(font-size|line-height|font-weight)-h4
$si-(font-size|line-height|font-weight)-body-lg-bold -> $si-(font-size|line-height|font-weight)-body-lg-sbold
$si-(font-size|line-height|font-weight)-caption -> $si-(font-size|line-height|font-weight)-body-sm
$si-(font-size|line-height|font-weight)-display-bold -> $si-(font-size|line-height|font-weight)-display-lg-sbold

49.13.0 (2026-07-02)¶

Features¶

add sequential color tokens avocado, blue, royal blue, and yellow (86f911a)
application-header: show tooltip on icon-only header items (39a0ae5)
tabs: show tooltip in icon mode (bdf3a77)

Bug Fixes¶

header-dropdown: expose aria-pressed on checked dropdown items (30b84f7), closes #2153
header-dropdown: expose role and aria-haspopup based on overlay mode (999a8fd), closes #2153
ip-input: allow IPv6 unspecified address (b200ce2), closes #2183
live-preview: preserve NgModule scope when recompiling edited examples (f1b59ca)
live-preview: skip stackblitz source fetch when no example is set (dbba53e)
phone-number: emit valueChange together with form control update (b78ab82)
phone-number: make country dropdown grow if needed (324823c)
restore flex-grow-1 wrapper for main-detail-container layout (1d2da3b)
tooltip: reposition overlay when content changes dynamically (b370c1b), closes #2219
tree-view: fix ExpressionChangedAfterItHasBeenCheckedError (663041e), closes #2227

DEPRECATIONS¶

dashboards: The SimplDashboardsNgModule should no longer be used. Use SiDashboardsNgModule instead. The Simpl prefix is deprecated and will be removed in v51.

49.12.0 (2026-06-23)¶

Features¶

angular: add support for Angular 22 (cef398a)
carousel: add carousel component (0a3f82f)
dashboards: provide widget renderer component (e051240)
date-range-filter: add space key support for preset list items (fa24c27)

Bug Fixes¶

chat-messages: use base-input background in focus state (e6d566e), closes #2176
empty-state: render heading as styled span instead of h3 (3285d00), closes #2174
file-uploader: use button for click to upload trigger (711ce15), closes #2173
pagination: handle page size zero (bb18fda)
pills-input: trim whitespaces when entering a separated list (91fb65d)

49.11.0 (2026-06-17)¶

Features¶

about: add translatable logoAlt input to SiAboutComponent (11f6747)
dashboards-ng: add keyboard support for moving and resizing widgets (dbe8b32)
navbar-vertical-next: add inline collapse mode (255c7d3), closes #1945

Bug Fixes¶

application-header: declare launchpad as role="dialog" (e94135b), closes #2152
datatable: no hover and min inline size on summary row with templates (deb539d)
date-range-filter: show a label instead of ? when range is not defined (2903cec)
datepicker: keep AM/PM input visible after re-enabling time (c89dd98)
drag-drop: support cdkDropListHasAnchor placeholder styling (fbb121b)
filtered-search: prevent free-text input from collapsing with multiple criteria (acc6be5)
form: correct misleading validation messages for date/time bounds (8f7f481)
forms: maintain hover/focus state with sibling form-control-actions (5bfaff9)
landing-page: remove footer only scrolling (d538b4b), closes #2151
navbar-vertical: dynamically update group content when data changes (26fb653)
si-map-tooltip: replace three dots with ellipsis character (b101c6e)
theme: make .btn-close always round (37bda5d)

49.10.0 (2026-06-02)¶

Features¶

chat-messages: update components to latest design specs (364fe8e)
dashboard: add weather widget (d1e8281)
navbar-vertical-next: add inline collapse mode (349c889), closes #1945

Bug Fixes¶

color-picker: pass color as interpolation param to aria-label translation (95424a2)
dashboard: respect showLoadingIndicator input when auto-loading is disabled (1e855e4)
navbar-vertical-next: make flyout sub-item styling consistent in all flyout modes (27ffa33)

49.9.0 (2026-05-20)¶

Features¶

breadcrumb-router: make ariaLabel type TranslatableString (9cb6f87)
navbar-vertical-next: add alwaysFlyout mode for groups (d627796), closes #1944
select: support constructions of custom select (f1279ba), closes #1840

Bug Fixes¶

dashboard: correct heading input type to TranslatableString (e34a867)
navbar-vertical: prevent initial animation (af31e36)
side-panel: fix position of legacy status action dot with increased RFS (720c733)
theme: ensure the input line-height is consistent between browsers (1336e45), closes #2031
theme: make .badge-text center aligned (33764a1)

49.8.0 (2026-05-08)¶

Features¶

ag-grid: update sorting icons (0909157), closes #2009
dashboards-ng: add translation support for widget name, description, and heading (eb3e07b)
file-uploader: show max file size in error message for exceeded file size (9642f3e), closes #2008
form-control: introduce .form-control-actions wrapper (436c998)
popover: add scrollStrategy input (d642809)
search-bar: add maxlength input to limit search input length (6d42511)
tooltip: add scrollStrategy input (fac50c9)

Bug Fixes¶

a11y: add space key activation for summary chip and widget (3c9bb11)
datepicker: remove focus ring on date-range input when calendar (50ddddb)
datepicker: use correct spacing between calendar button and (3d08006)
filtered-search: emit event when search text is cleared (630cf29), closes #1980
filtered-search: focus ring not visible in case of empty option value (1c2a627)
forms: invalid controls should always have a red border (7649734)
navbar-primary: align translation defaults with launchpad (46c727b)
navbar-vertical-next: replace expand/collapse button texts with single toggleButtonText (18d9d04), closes #2003
number-input: use correct spacing icons (60bc1c1)
select: align position of dropdown arrow (e27d7eb)
status-bar: a11y fix for collapse button (d465032)

49.7.0 (2026-04-28)¶

Features¶

ag-grid: support version v35 (e5e5ea1)
forms: align input colors with guidelines (4e2704f)
live-preview: allow overriding root font size (b4281a7)
modal: migrate .modal to use CSS starting-style instead of using timers (a9f2d08)
navbar-vertical-next: add footer items support via si-navbar-vertical-next-footer-items (ba5b62f)
side-panel: improve accessibility (e6dd452)

Bug Fixes¶

about: remove additional border and margin around pre tag (999229c)
buttons: keep label and icon size consistent across button sizes (5aca798)
charts/gauge: remove minvalue workaround (2b673cd)
charts: retain grid config on theme change (e91f41c)
dashboard-card: display subHeading (9877b8b), closes #1874
dashboards-ng: align catalog list styles with UX guidelines (ca79c3e)
dashboards-ng: do not clip focus-ring in footer (d420a52)
dashboards-ng: preserve auto-positioned widget layout on cancel (841a990)
date-range-filter: fix range selection, display message when incomplete (c081396)
datepicker: correct offset of calendar icon (a7b6d98)
datepicker: correctly classify noon as PM in si-timepicker meridian detection (91263f0), closes #1886
element-theme: align card-header typography to design specs (e8172bc)
forms: align .form-control text-color with UX specs (d9f1f99)
header-dropdown: decrement backdrop counter for every nested level on close (f17380e)
list-widget: use translated labels for list widget filtering and sorting (376f9bd)
live-preview: rendering error text not readable (9d0e650)
loading-spinner: update blocking state when toggled at runtime (143ca08)
native-charts: fix visual in single gauge chart with min > 0 (d21ec84)
pagination: improve accessibility of current page button (2db7ded)
pills-input: show correct cursor when hovering delete (14d3b44), closes #888
status-bar: fix responsive mode items not updating (88e97e4)
status-bar: focus outline hidden behind background color (45c83d6)

49.6.0 (2026-04-13)¶

Features¶

schematics: add migration schematic for modal options from initialState to inputValues (37401de)

Bug Fixes¶

datepicker: set correct range preview on dateRange input changes (d34bd15)
live-preview: code editor cursor position misaligned (25ce952)
theme: align checkbox and radio inputs (0332eb4)
toast-notification: fix missing toasts when called during bootstrap (bfa89b8)
tooltip: remove min-width constraint from tooltip (548b313)

49.5.0 (2026-04-09)¶

Features¶

element-theme: introduce btn ghost style (63dcabb)
microchart-progress: improve accessibility (f0de43a)
modal: migrate .modal-backdrop to use CSS starting-style instead of using timers (abf3119)
navbar-vertical-next: add navbar-vertical-next component (5a378b6)

Bug Fixes¶

buttons: selection buttons hover state (5bbba31)
charts: import missing echarts imports (fd1a5e0)
charts: visualize datasets in si-chart-cartesian and si-chart (233009b), closes #1761
chat-messages: improve chat container layout (b9c27b4)
dashbaords-ng: use square icon style for edit button (daf06ee)
dashboards-ng: use siTooltip over html native tooltip (712e77b)
datatable: use correct header-height (4d96425)
element-theme: reduce button padding to align with design specs (b98ef66), closes #1801
file-uploader: fix icon and text alignment (0ebca28)
filtered-search: only emit criteriaValueChange once after option selection (cf8fbd8)
live-preview: hide StackBlitz button without element-theme dependency (d885f54)
tooltip: remove aria-describedby when tooltip is disabled (d204337)
tree-view: ensure contextMenuItems input changes are automatically applied (1a0f1c4)
typography: align code and pre tags with UX (81de50b)

NOTES¶

element-theme: The ghost button naming deviates from the usual button naming convention to avoid breaking changes. The .btn-primary-ghost class has been added to represent the updated ghost button style, while the .btn-ghost class continues to represent the tertiary ghost style buttons.

With the next major release, the ghost button naming will be updated to match the button naming conventions.

49.4.0 (2026-03-26)¶

Features¶

threshold: add useAliasForStepValues input to display alias labels (1dadebc)

Bug Fixes¶

application-header: highlight active route on mobile (4d25237)

49.3.0 (2026-03-25)¶

Features¶

card: add support for card-outline (2ef16f9)
dashboards-ng: extend module-federation version range to include v21 (e669f31)
navbar-vertical: allow to customize search debounce time (fe05c29)
side-panel: extract status actions into new component (f796850)

Bug Fixes¶

form: align col-form-label with form-control and form-check (bd1e763)
form: prevent feedback icon from disappearing on hover in readonly inputs (52a3441)
header-dropdown: use correct icon size for checked item (047ded0)
side-panel: use correct spacing in collapse mode (5c1fd2b)

DEPRECATIONS¶

side-panel: The input SiSidePanelContentComponent.statusActions should no longer be used. Use the new <si-side-panel-actions> instead:

<si-side-panel-content> <si-side-panel-actions> <button type="button" si-side-panel-action icon="element-alarm-background-filled" iconColor="status-danger" stackedIcon="element-alarm-tick" stackedIconColor="text-body" (click)="action()" > Action </button> </si-side-panel-actions> </si-side-panel-content>

49.2.0 (2026-03-18)¶

Features¶

live-preview: support creating a stackblitz based on an example (e5a6877)
ngx-datatable: support @siemens/ngx-datatable v26 (a872638)
typeahead: make overlay scroll strategy configurable (3bd1e5a)

Bug Fixes¶

maps: add extraProperties to map feature point to match MapPointMetaData interface (a337170)
map: show popover with name and description on click (21b9d2e)
select: optimize single selection rendering (2873d0b)

49.1.0 (2026-03-13)¶

Revert "chore(element-ng): narrow @siemens/ngx-datatable peer dependency to v25" (cc760f1)

Features¶

datatable: add theming for the datatable summary row (9f5a354)
landing-page: add default texts for forgot password and register now links (b4dc71a)
live-preview: allow apps to use AOT compilation with live preview (240ed53)
tabs: add contentOverflowAuto attribute to si-tabset for auto-scrolling (b4d22b8)
tabs: provide the ability to render a tabpanel outside the tabset via CDK DOM Portal (3c6a39e)
typeahead: experimental option source with loading state (a673a56)

Bug Fixes¶

card: use correct spacing in si-action-card (4c15dad)
dashboards-ng: prevent unnecessary widgetRef config updates (9032307)
filtered-search: only emit doSearch once for each change (c75bde8)
landing-page: pass loginAlert action and translationParams (71854e6), closes #1555
landing-page: prevent initial animation (0c9ce58)
launchpad: align external icon size and spacing with design specs (d04db2a)
navbar-vertical: remove absolute positioning from title (b45b7a3)
schematics: distinguish files from directories during ts compilation (e010e2c)
side-panel: hide fullscreen button on smaller breakpoints (282005b), closes #1529
typography: align lead with body-lg (95cc743)

49.0.0 (2026-02-18)¶

Release blog post: "Welcome Element v49!"

Features¶

ag-grid: add Element theme for AG Grid (0c6ad96)
angular: update to Angular 21 (1f6ff72)
buttons: add square icon buttons (acb4069)
buttons: unify sizing across text and icon variants (d3c42ba)
buttons: update selection buttons to support tooltips (4893864)
charts: theme change without reloading the chart (48aee8e)
charts: split into separate entry point (06ca45e)
chat-messages: add ai-welcome-screen component (1aaaf7c)
content-action-bar: add tooltip support (8a153c3)
dashboards-ng: custom id provider for widget instance (f815092)
dashboards: add support for primary and secondary toolbar actions via component inputs (bc4d0d2)
dashboards: native federation (f81c5a4)
element-ng: replace @angular/animations with native CSS (4ae0b79)
element-theme: introduce new active states (d917006)
file-uploader: provide translation params to uploader messages (d6dfadf), closes #1447
form: extend and align validation messages with UX guidelines (13f8c88), closes #1373
forms: derive validation border via CSS on .form-control-wrapper (85bcfb3), closes #1339
icon: enable svg icons by default (9093f59)
icons: use open source icons (be23170)
landing-page: remove registration introduction text due to ux guidelines (10c08f8)
launchpad: align to new style and responsive design (643f66c)
list-details: stabilize APIs and remove experimental flag (cb3ad59)
live-preview: use siemens syntax highlighting colors (f2b77a8)
navbar-vertical: update badges visibility logic (acd4456)
navbar-vertical: use siTooltip for collapsed items (515137a)
npm: add support for ngx-translate v17 (56e04bf)
password-toggle: support form validation for si-password-toggle (caca09e)
schematics: add class member replacement functionality (f31da29)
schematics: add element class migration for element styling changes (94d9bcf)
schematics: add icon path migration schematic to update icon imports (0d99124)
schematics: add migration for Simpl to Si module renamings (2b28daf)
schematics: add new schematics data for version 49 (41535ca)
schematics: add ng-update schematic (4622b60)
schematics: remove OSS migration schematics (8bfc8bf)
schematics: rename output-names and component-names model (ebbf217)
schematics: update schematics for dashboards config token migration (ea54afb)
side-panel: add backdrop support (fb9fefd)
tooltip: add animation (a3e09ea)

Bug Fixes¶

breadcrumb: align with Figma component (36147b6)
buttons: button group sizing (f928791)
charts: update progress chart colors on theme change (be0defc)
chat-messages: improve scroll responsiveness and expose scroll methods on si-chat-container (58b6c2e)
dashboards-ng: correctly overlap gridstack resize icon on custom resize icon (0db47e7)
dashboards-ng: drop ngx-translate peerDependency (b5fa436)
dashboards-ng: use consistent spacing for draggable-overlay (d73d785)
date-range-filter: correctly update range when toggling advanced mode (287dedb)
datepicker: update date even on changing only time (b3b3c8f), closes #1431
deps: add missing peer dependencies for dashboards-ng, maps-ng and native-charts-ng (1c8b49a)
file-uploader: center file types text in si-file-dropzone (e12fff8)
filtered-search: avoid expression change errors in zoneless apps (025ccf9)
icon: ng-deep styles not getting applied with webpack builds (5bbf233)
inline-notification: remove colon from heading (800ee01)
ip-input: retain cursor position when inserting characters (2084039)
list-details: prevent half visible content (9b43b9d)
live-preview: support zoneless (6d83417)
navbar-vertical: focus and active state handling (2edbcc9)
pills-input: only show placeholder text when a string is provided (4e1ccdf)
schematics: remove unused simpl-siemens-migration schematic (56d5c79)
select: maintain filtered rows when updating all rows (769a8f7)
side-panel: set default display to inline-flex (5317335)
toast-notification: restore RTL for toast notification (a4732be)
tooltip: always show if hovered or focused (b55e175)
tooltip: update content while tooltip is open (f279709)
tree-view: use hasAnyChildren from parent to determine inline padding (9d37335)
typeahead: treat space as normal search text in multi select (75f293d)
wizard: align save button correctly when hideNavigation is true (4a1ec89)

NOTES¶

icons: We updated the icons’ underlying grid. The geometry has been improved to allow proportional scaling at 16, 20, and 24 px, with line thickness adjusted accordingly. This also allows scaling up, if needed, in 4 px increments. The new icon set also has reduced built-in margins around the icons, improving visual balance with surrounding elements.
navbar-vertical: The badge behavior in the vertical navbar has been updated. Badge colors are now consistent in both collapsed and expanded states, text-only badges are detected and rendered as a simple dot in collapsed mode. In addition, a new input property hideBadgeWhenCollapsed allows to optionally hide the badge when the navbar is collapsed (by default, badges remain visible in both states), improving flexibility and visual consistency.
launchpad: The subtitleText input no longer shows "Access all your apps" by default. To maintain the previous behavior, explicitly set the input.
buttons: The new square icon buttons (.btn-icon) are introduced as the new default style for icon buttons. The existing circle buttons (.btn-circle) are now reserved for cases where a circular shape is explicitly required.
buttons: The minimum inline size for standard buttons (excluding circle, link, close, and icon variants) has been reduced from 100px to 80px. This provides more flexibility for compact layouts and the buttons appear narrower compared to earlier versions.
side-panel: Backdrop support has been added to the side-panel. By default, the side-panel will now render a modal backdrop that blocks background interactions and closes the panel on click. To restore the previous behavior (without a backdrop), set disableBackdrop to true.
typeahead: The typeahead multi selection which is also used in the filtered-search no longer selects values when pressing space. Instead space is treated as a normal search value.
angular: The whitespace character between time and meridian in date/time formats has changed with Angular 21. The format now uses a narrow no-break space (U+202F) instead of a regular space. See https://github.com/angular/angular/issues/65707 for more details.

BREAKING CHANGES¶

icon: <si-icon> now renders icons by default as SVG instead of using the icon-font. element-* icon classes are not affected by this change.

SVG icons render slightly differently so VRT snapshots may need to be updated.

To restore the previous behavior, opt-out SVG icons.
provideIconConfig({ disableSvgIcons: true })
landing-page: The registerNowIntroText input has been removed to align with UX guidelines. Remove all usages.
file-uploader: File uploader translation strings now require interpolation placeholders.

The SiFileUploaderComponent and SiFileDropzoneComponent inputs:

maxFileSizeText requires the placeholder {{maxFileSize}} to display the maximum file size.
acceptText requires the placeholder {{accept}} to display the accepted file types.
maxFilesReachedText requires the placeholder {{maxFiles}} to display the maximum number of files allowed.

Migration guide for english default translation keys:

Before:
{ "SI_FILE_UPLOADER.MAX_SIZE": "Maximum upload size", "SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES": "Accepted file types", "SI_FILE_UPLOADER.MAX_FILE_REACHED": "Maximum number of files reached" }

After:
{ "SI_FILE_UPLOADER.MAX_SIZE": "Max. {{maxFileSize}} upload size.", "SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES": "Accepted file types: {{accept}}.", "SI_FILE_UPLOADER.MAX_FILE_REACHED": "Max. {{maxFiles}} files" }
element-ng: Animations can no longer be disabled using @angular/animations specific features like:

NoopAnimationsModule
BrowserAnimationsModule.withConfig({disableAnimations: false})
provideNoopAnimations
provideAnimationsAsync('noop')

Use CSS to disable animations. See: https://element.siemens.io/architecture/motion-animation/
icons: @simpl/element-icons package replaced by @siemens/element-icons.

The new icon set implements the new icon style, which has a reduced margin around the icons.

Replace the package: 1. Uninstall @simpl/element-icons 2. Install @siemens/element-icons 3. Adjust import in style sheet. Before: @use '@simpl/element-icons/dist/style/simpl-element-icons'; After: @use '@siemens/element-icons/dist/style/siemens-element-icons'; 4. Adjust SVG imports: Before: import { ... } from '@simpl/element-ng/ionic'; Before: import { ... } from '@simpl/element-ng/svg'; After: import { ... } from '@siemens/element-icons';

Adjust styles: Always use the correct classes for sizing an icon: - (small: 16px): <si-icon class="icon-sm" icon="..." /> - (default: 20px): <si-icon class="icon" icon="..." /> - (large: 24px): <si-icon class="icon-lg" icon="..." />

As the icons new have a reduced built-in margin, spacings must be adjusted: - remove negative margins, which previously were needed to remove the spacing overhead - add extra spacing-1 between icons and inline-text

Element components have those changes automatically applied (including buttons). When updating follow Element recommendations, always use the icon classes and remove custom overrides.
tooltip: The triggers input has been removed to align the behavior with accessibility guidelines. Remove all usages. The tooltip will always be shown if the target element is focused or hovered.
buttons: Removed the class btn-xs, use instead btn-sm for icon buttons.

Button heights has been standardized to fix misalignment between text buttons and icon buttons.

All button sizes now follow the same specifications: - Default: 32px - Large (btn-lg): 40px - Small (btn-sm): 24px (reduced from 28px for text buttons)

Changes: * btn-sm reduced to 24px to preserve the 8px increment scale (24 → 32 → 40) * icon buttons now match text button heights

Update your code if it relies on previous .btn-circle sizing:

Before:
 <button class="btn btn-circle">...</button>  <button class="btn btn-circle btn-sm">...</button>  <button class="btn btn-circle btn-xs">...</button> 

After:
 <button class="btn btn-circle btn-lg">...</button>  <button class="btn btn-circle">...</button>  <button class="btn btn-circle btn-sm">...</button>  

If you were using btn-xs, replace it with btn-sm to maintain the same 24px size.
npm: ngx-translate now requires an explicit missingTranslationHandler to provide default translations for Element.

Add provideMissingTranslationHandlerForElement() to your TranslateModule or provider configuration:

 TranslateModule.forRoot({ ... });  TranslateModule.forRoot({ // Translate configuration ..., missingTranslationHandler: provideMissingTranslationHandlerForElement() });  TranslateModule.forRoot({ ..., missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler } });  TranslateModule.forRoot({ // Translate configuration ..., missingTranslationHandler: provideMissingTranslationHandlerForElement({ provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler }) });  provideTranslateService({ // Translate configuration ... });  provideTranslateService({ ..., missingTranslationHandler: provideMissingTranslationHandlerForElement() });
angular: Angular 21+ is required. Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=20.0-21.0
dashboards-ng: New widgets are now assigned IDs upon creation using the SiWidgetIdProvider.generateWidgetId, rather than using temporary NEW_WIDGET_PREFIX IDs that are replaced on save.

The save() method signature in the abstract class SiWidgetStorage has been modified to separate existing widgets from new widgets:

Before:

abstract save( widgets: (WidgetConfig | Omit<WidgetConfig, 'id'>)[], removedWidgets?: WidgetConfig[], dashboardId?: string ): Observable<WidgetConfig[]>;

After:
abstract save( modifiedWidgets: WidgetConfig[], addedWidgets: WidgetConfig[], removedWidgets?: WidgetConfig[], dashboardId?: string ): Observable<WidgetConfig[]>;

addedWidgets array will contain new widgets with ids generated by SiWidgetIdProvider.generateWidgetId.
element-ng: Dropped support for @siemens/ngx-datatable versions 22-24. Only version 25 is now supported as a peer dependency.
filtered-search: Empty value fields of criterion options are no longer replaced with the value from the label.

Always provide a correct value.
typescript: Element now requires ECMA script 2024 or newer. This is implemented by all evergreen browsers for more than two years.
form: The input SiFormItemComponent.label is now required. This change ensures that si-form-item components meet accessibility standards as inputs always require a label. Provide a label that describes the input properly. Do NOT provide an empty string.
form: The property SiFormItemControl.errormessageId is now required. All implementations of SiFormItemControl must provide this property to ensure proper accessibility support for error messages.
split: The default value of SiSplitPartComponent.collapseOthers input has been changed from true to false. Previously, when a split part was collapsed, all split parts between it and the end of the split in the respective direction would also collapse automatically. Now, by default, only the individual split part will collapse.
toast-notification: Removed type ToastStateName, use type StatusType which can be imported from @siemens/element-ng/common instead. The StatusType omits the connection state which was legacy code and should not be used anymore. This change affects below interfaces/apis where the above type should be adapted accordingly.

SiToastNotificationService.queueToastNotification
SiToast interface
SiToastNotificationService.showToastNotification
SiToastNotificationService.hideToastNotification
filtered-search: Removed type Criterion. Use more specific types CriterionValue or CriterionDefinition instead for below inputs and output.

SiFilteredSearchComponent.lazyCriterionProvider
SiFilteredSearchComponent.criteria
SiFilteredSearchComponent.doSearch

 readonly lazyCriterionProvider = input<(typed: string, searchCriteria?: SearchCriteria) => Observable<Criterion[] | CriterionDefinition[]>>();  readonly lazyCriterionProvider = input<(typed: string, searchCriteria?: SearchCriteria) => Observable<CriterionDefinition[]>>();

 readonly criteria = input<Criterion[] | CriterionDefinition[]>([]);  readonly criteria = input<CriterionDefinition[]>([]);

 onSearch(searchCriteria: SearchCriteria) { const criterionValues: Criterion[] = searchCriteria.criteria; }  onSearch(searchCriteria: SearchCriteria) { const criterionValues: CriterionValue[] = searchCriteria.criteria; }
filtered-search: Removed SiFilteredSearchComponent.readonly input. Use SiFilteredSearchComponent.disabled instead.
select: Removed deprecated interface SelectOptionLegacy. Use interface SelectOption instead.

The options can be converted like below:

Before:

const options: SelectOptionLegacy[] = [ { id: '1', title: 'Option 1' }, { id: '2', title: 'Option 2', icon: 'check', color: 'text-success', disabled: false } ];

After:

const options: SelectOption<string>[] = [ { type: 'option', value: '1', label: 'Option 1' }, { type: 'option', value: '2', label: 'Option 2', icon: 'check', iconColor: 'text-success', disabled: false } ];
select: Removed deprecated output SiSelectComponent.dropdownClose. Use output SiSelectComponent.openChange instead.
unauthorized-page: Removed the deprecated SiUnauthorizedPageComponent component. Use the SiInfoPageComponent component with the si-info-page element instead. The SiInfoPageComponent is a superset of this component and supports the same use cases and more.

Before:

<si-unauthorized-page heading="Access denied" subHeading="You are not authorized to access this section." description="Contact your administrator" [link]="{ title: 'Go back', link: '/' }" />

After:

<si-info-page icon="element-warning-filled" iconColor="status-warning" titleText="Access denied" copyText="You are not authorized to access this section." instructions="Contact your administrator" [link]="{ title: 'Go back', link: '/' }" />
dashboards: Removed injection token CONFIG_TOKEN. Use SI_DASHBOARD_CONFIGURATION injection token instead.
dashboards-ng: Removed property WidgetConfig.invalid. Use WidgetInstanceEditor.statusChanges emitter instead.

Example usage:
this.statusChanges.emit({ invalid: this.isInvalid });
dashboards-ng: Removed module configuration SiDashboardsNgModule.forRoot. Use injection tokens SI_DASHBOARD_CONFIGURATION and SI_WIDGET_STORE directly in your app configuration.

Before:

imports: [ SiDashboardsNgModule.forRoot({ config: {}, dashboardApi: { provide: SiWidgetStorage, useClass: CustomWidgetStorage } }) ]

After:

imports: [SiDashboardsNgModule], providers: [ { provide: SI_WIDGET_STORE, useClass: AppWidgetStorage }, { provide: SI_DASHBOARD_CONFIGURATION, useValue: config } ]
modal: Removed property ModalOptions.initialState. Use ModalOptions.inputValues instead. Note that inputValues only binds to component inputs, unlike initialState, which could set any property on the component instance.
dashboards/grid: Removed property SiGridComponent.loadingService. Use SiGridComponent.isLoading instead to indicate load and save operations.
common: Removed buildTrackByIdentity() function. Use Angular's new control-flow syntax instead.
common: Removed buildTrackByIndex() function. Use Angular's new control-flow syntax instead.
buttons: Changed selection-buttons sizing.

The sizing has been aligned with regular buttons. The sizing classes are now consistent with standard button classes: - Use btn-lg for large selection buttons - Use btn (no modifier) for default size selection buttons - Use btn-sm for small selection buttons

This change affects the HTML structure of selection button groups. Previously, selection buttons had different size mappings compared to regular buttons.

Before:
 <div class="btn-group"> <label> <input type="radio" class="btn-check" name="example" /> <span class="btn btn-sm">Option 1</span> </label> </div>

After:
 <div class="btn-group"> <label> <input type="radio" class="btn-check" name="example" /> <span class="btn">Option 1</span> </label> </div>
maps: Removed the deprecated SiMapComponent.onResize() method. It had no impact.
resize-observer: Removed following deprecated properties from SiResponsiveContainerDirective in favor of signal-based properties:

isXs -> Use xs instead isSm -> Use sm instead isMd -> Use md instead isLg -> Use lg instead isXl -> Use xl instead isXxl -> Use xxl instead
select: Removed the [complexOptions] input of si-select. Instead use the [options] input which supports

grouping of options
providing values of any type

Complex options can be converted like below:

 <si-select [complexOptions]="{group1: [{myLabel: 'My Label', uniqueData: uniqueData}]}" [valueProvider]="valueProvider" [groupProvider]="groupProvider" [optionEqualCheckFn]="uniqueDataEqual" />  <si-select [options]="[ { type: 'group', label: 'Group-1', key: 'group1 (optional)', options: [{type: 'option', label: 'My Label', value: uniqueData}] } ]" [optionEqualCheckFn]="uniqueDataEqual" />
charts/gauge: Removed input SiChartGaugeComponent.numberOfDecimals. Use SiChartGaugeComponent.minNumberOfDecimals or SiChartGaugeComponent.maxNumberOfDecimals inputs instead.
tour: Removed property attachTo.on of TourStep interface. It has no effect, position is automatic.

DEPRECATIONS¶

dashboards: SiWidgetStorage.getToolbarMenuItems is deprecated. Use provideDashboardToolbarItems in your app configuration for global toolbar items, and/or use the primaryEditActions and secondaryEditActions inputs on SiFlexibleDashboardComponent for dashboard specific toolbar items.

Before (deprecated approach):

export class AppWidgetStorage extends SiDefaultWidgetStorage { override getToolbarMenuItems = (dashboardId?: string) => ({ primary: of([{ type: 'action', label: 'Custom Action', action: (grid) => alert('Action!') }]), secondary: of([{ type: 'action', label: 'Settings', action: (grid) => this.openSettings() }]) }); }

After

// For global toolbar items (shared across all dashboards): // standalone setup export const appConfig: ApplicationConfig = { providers: [ provideDashboardToolbarItems({ primary: [{ type: 'action', label: 'Custom Action', action: (grid) => alert('Action!') }], secondary: [{ type: 'action', label: 'Settings', action: (grid) => this.openSettings() }] }) ] }; // For module-based apps: @NgModule({ providers: [ provideDashboardToolbarItems({ primary: [{ type: 'action', label: 'Custom Action', action: (grid) => alert('Action!') }], secondary: [{ type: 'action', label: 'Settings', action: (grid) => this.openSettings() }] }) ] }) export class AppModule { } // For dashboard-specific toolbar items: <si-flexible-dashboard [primaryEditActions]="primaryActions" [secondaryEditActions]="secondaryActions" />
sort-bar: SiSortBarComponent and SiSortBarModule are deprecated. They originate from the older design system and do not align with current design guidelines. No known use case exists for this component. Both will be removed in v50.
The type alias with Simpl prefix are deprecated, use types with Si prefix instead as per below

SimplLineSeriesOption -> Use SiLineSeriesOption instead
SimplBarSeriesOption -> Use SiBarSeriesOption instead
SimplHeatmapSeriesOption -> Use SiHeatmapSeriesOption instead
SimplScatterSeriesOption -> Use SiScatterSeriesOption instead
SimplCandlestickSeriesOption -> Use SiCandlestickSeriesOption instead
buttons: The NotificationItemActionCircleButton interface and 'action-circle-button' type are deprecated. Use NotificationItemActionIconButton and 'action-icon-button' instead. Both interfaces render square icon buttons (.btn-icon) and remain fully backward compatible.
The type alias with Simpl prefix are deprecated, use types with Si prefix instead as per below

SimplChartsNgModule -> Use SiChartsNgModule instead SimplSeriesOption -> Use SiSeriesOption instead SimplLivePreviewRoutingModule -> Use SiLivePreviewRoutingModule instead SimplLivePreviewModule -> Use SiLivePreviewModule instead SimplMapsNgModule -> Use SiMapsNgModule instead SimplNativeChartsNgModule -> Use SiNativeChartsNgModule instead
charts: SiChartsNgModule is deprecated, import individual components instead. Starting with v49, separate entry points are available for each component, allowing applications to import components from specific entry points, which helps reduce the application bundle size.
chart: The method SiChartComponent.resetChart is deprecated and should not be used by the consumer directly.

48.9.0 (2025-12-19)¶

Features¶

angular: add support for Angular 21 (11fce52)
dashboards-ng: support widgets as standalone component (5dad1d4)
filtered-search: support free text as pills (1970897)

Bug Fixes¶

charts/circle: align with figma specs (75157e7)
side-panel: ensure search bar focus outline is visible (32d3959), closes #1204

NOTES¶

angular: Angular without ZoneJS (Zoneless) is generally supported but due to incomplete of testing, it might not work in all cases.

48.8.0 (2025-12-17)¶

Features¶

side-panel: add extended size option (199e451)
side-panel: enhance navigation with router-link and link support (3f8679a)
side-panel: implement fullscreen overlay and navigation modes (526773f)

Bug Fixes¶

date-range-filter: update datepicker date-range on preset selection (70433ae)
datepicker: convert 12 AM to 0 hours for 12-hour clock (1f2eb16)
icon: render font icons when name contains kebab-case with numbers (8684c7f)
password-toggle: hide MS Edge built-in reveal toggle icon (fdba859)

48.7.0 (2025-12-10)¶

Features¶

chat-messages: allow asterisk lists and simple images for markdown renderer (7559fce)
typeahead: introduce experimental create option (a2b2ae9)

Bug Fixes¶

charts/cartesian: confine tooltip for cartesian (f3dc55f)
datatable: support compatibility with datatable v22 (bedc4ec)
loading-spinner: should work in zoneless environment (09b6530)

48.6.0 (2025-12-02)¶

Features¶

datatable: support @siemens/ngx-datatable@25 (c89d4f6)
microchart-line: add area support (de15e4d)

Bug Fixes¶

icon: don't use hardcoded id on svg (8b0792f)
microchart-line: fix gradient ID not unique (0a1ceb0)
schematics: ignore dot files and node_modules in directory traversal (b97e4ce)
schematics: remove simpl-element-ng token from scss files and support single and double quotes (8500e73)
summary-chip: make value attribute optional (ea69015)

48.5.2 (2025-11-26)¶

Bug Fixes¶

map: avoid TypeError when clicking point without handler (b8f36b4)
schematics: scss migration should not modify node_modules (e521c20)
translate-ng: prevent unwanted import of ngx-translate (d8a636c)

48.5.1 (2025-11-26)¶

Bug Fixes¶

application-header: replace ngx-translate dependency with element translate pipe (8a8022c)
badges: prevent misaligned icons (452db9a)
datepicker: fix incorrect week numbers (c84fceb)
schematics: add symbols in exports as well for NgModule (ac2fd82)

48.5.0 (2025-11-24)¶

Features¶

schematics: add mappings for native charts components and module (fe9fea5)

Bug Fixes¶

application-header: truncate heading if needed in collapsed mode (32f270a)
charts/custom-legend: align symbol spacing with design specs (778b889)
chat-messages: allow dragging on files to chat-input (40019e0)
chat-messages: allow interrupting with enter (19112a6)
loading-spinner: slow down animation isof stopping for reduced-motion (0c8371c)
schematics: add support for SimplElementNgModule imports and update mappings (5260687)
schematics: add translation mapping in element-ng case and update mappings (8b9df33)
schematics: update path imports for cross-platform compatibility and update mapping file (2e7a2dc)

Performance Improvements¶

dashboards-ng: optimize lookups (fb3da90)

48.4.0 (2025-11-13)¶

Features¶

chat-messages: add chat container (bb5ef0c)
select: add template context guard for select actions directive (d16b4b8)

Bug Fixes¶

chat-messages: auto-collapse smaller left-aligned chat-messages (52cde0a)
datepicker: add translation key for today button default text (fb082e5)
schematics: remove unused imports after action-modal migration (d79cb07)

48.3.0 (2025-11-05)¶

Features¶

buttons: introduce button group with sub variants (bd261ba)
chat-messages: add base chat components (b32133e)
chat-messages: add chat input (0f10739)
file-uploader: provide standalone file-upload directive (03c2dd1)
header-dropdown: provide account item component (1b5cd8f)
markdown-renderer: add markdown renderer and styles (62666a0)
native-charts/gauge: add support for label and value formatter (ec1b1b0)
schematics: implement migration rule for wizard API and add related test files (4a7f527)
schematics: remove the deprecated API usages in various components (b9dee69)

Bug Fixes¶

charts/gauge: align with figma specs (19d32c9)
ip-input: shift remaining numbers to the right when inserting in middle of an ipv4 input (e8db6bd)
ip-input: trim leading zeros from IPv4 on focus lost (d7f0e4f)
theme: fix unintended alignment change for icons in card header (5fc8dc4)

DEPRECATIONS¶

accordion: SiCollapsiblePanelComponent.colorVariant input has no effect and is deprecated.
tree-view: siTreeViewItemTemplate is deprecated in favor of siTreeViewItem.

Currently there are 2 directives siTreeViewItemTemplate for providing custom template and siTreeViewItem for applying custom directives (e.g cdkDrag) on tree item.

the siTreeViewItemTemplate has 2 main DX problems:

Every tree item needs to specify templateName in its json structure.
For every unique custom template there needs a separate ng-template with exact mapping of that templateName which doesn't provide type safety.

Migration Guide:

Before (deprecated):
<si-tree-view> <ng-template siTreeViewItemTemplate="root" let-item> <div class="custom-item">Root {{ item.name }}</div> </ng-template> <ng-template siTreeViewItemTemplate="child" let-item> <div class="custom-item">Child {{ item.name }}</div> </ng-template> </si-tree-view>

After (recommended):
<si-tree-view> <ng-template siTreeViewItem let-item="treeItem"> <si-tree-view-item> <div class="custom-item"> @if (item.level === 0) { Root {{ item.name }} } @else { Child {{ item.name }} } </div> </si-tree-view-item> </ng-template> </si-tree-view>
resize-observer: ResizeObserverService._checkAll method is deprecated without replacement.

48.2.0 (2025-10-27)¶

Features¶

card: introduce si-action-card component (7732ec0)
charts/circle: support start and end angle (261ea86)
datatable: separator line between pinned and scrollable columns (80e9522)
datepicker: expose form control validation for si-timepicker (74b95ea), closes #739
datepicker: show error border on invalid time input (192104a), closes #739
datepicker: support 12 hours clock for date-ranges (47b862b)
header-dropdown: add class header-dropdown-overlay when rendered as overlay (1c30d4c)
micro-line-chart: support markers (2f05c49)
migration: add schematics for simpl to siemens migration (5b5144d)
schematics: add migration for legacy component updates (bceb6c8)
schematics: add migration schematic for updating action-modal from v47 to v48 (4c33b5b)
schematics: migrate style imports to siemens (35645bb)
search-bar: translatable aria label for clear button (0db4cf8)

Bug Fixes¶

charts/sankey: add new tooltip input to replace misspelled toolTip input (0ed875e)
charts/sunburst: add new tooltip input to replace misspelled toolTip input (eded236)
dashboard: ignore icons on screen reader (06c3a0a)
dashboards-ng: align drag cursor style with figma (09e3c3e)
datepicker: correct si-timepicker input field validation (818b9d8)
element-theme: update default $nav-link-color to element-text-primary (3401ec3)
filtered-search: visually clear input text in active mode if clear is pressed (2b51b09)
ip-input: ensure validation verifies the entire input string (9fcacb1)
list-details: align details-header with design specs (f2cef2f)
list-details: hide empty header (c75ae23)
list-details: ignore icon with screen reader (b18b63f)
textarea: align spacing and line height with design specs (a1b2171)
tooltip: unsubscribe from observable to avoid memory leaks (3f05889)
tree-view: use aria label for expand collapse icons (d2eacf0)
typeahead: remove icon component if no icon is provided (5943e8d)

DEPRECATIONS¶

charts/sunburst: SiChartSunburstComponent.toolTip input is deprecated. Use SiChartSunburstComponent.tooltip instead.
charts/sankey: SiChartSankeyComponent.toolTip input is deprecated. Use SiChartSankeyComponent.tooltip instead.
filter-bar: Filter.status and FilterStatusType are deprecated as they have no visual effect.

48.1.0 (2025-09-29)¶

Features¶

datepicker: allow only digits to be entered in si-timepicker (3de8109)
notification-item: introduce new component (ed52f95)
tabs: provide canActivate and canDeactivate guards (1d33374)

Bug Fixes¶

column-dialog: align row icons in case of long title (c7441c2)
dashboard: consistently translate labels (bd04c6b)
datepicker: update the AM/PM meridian for 12-hour clock (9da7f15)
file-uploader: allow concurrent uploads in auto-upload mode (fb97873)
filtered-search: filter pill overlay stays open opn focus out scenario (6571588)
filtered-search: handle invalid date (d9871d6)
filtered-search: multi select options should call the lazyValueProvider on input event (a6e1d05)
list-details: unsubscribe observables to avoid memory leaks (e0d3c91)
navbar-vertical-item: align badge in collapse state correctly (2acaf4d)
tabs: always scroll active tab into view (d557f9a), closes #772

48.0.3 (2025-09-10)¶

Bug Fixes¶

list-details: load route details state on initial load (419a3d1)

48.0.2 (2025-09-10)¶

Bug Fixes¶

microchart-bar: handle negative values (3e32a33)

48.0.1 (2025-09-05)¶

Bug Fixes¶

card: show ellipsis on heading text overflow (2d772a1), closes #689
datatable: not possible to tab out from table (9869db1)
datatable: use NgxDatatableConfig from upstream (2fb7903)
icon: handle undefined icon use case (7c52855)
modal-dialogs: update confirmation dialog text and update snapshots (2d69d63)
threshold: ensure number input and buttons are above other elements (6d8f3bf)

DEPRECATIONS¶

datatable: INgxDatatableConfig is deprecated in favor of upstream NgxDatatableConfig.

Replace INgxDatatableConfig imports with NgxDatatableConfig from @siemens/ngx-datatable:

// Before import { INgxDatatableConfig } from '@siemens/element-ng/datatable'; // After import { NgxDatatableConfig } from '@siemens/ngx-datatable';

48.0.0 (2025-08-26)¶

Features¶

angular: update to Angular 20 (cf9d3d5)
card: add support for sub-heading to cards (183dcab)
charts/gauge: support custom value formatter (5ea6af2)
copyright-notice: use the company-name provided by the theme (fe2fe9f)
dashboard-toolbar: add title attribute to edit button (14afc3c)
element-theme: update to new version of siemens brand package (59d92a1)
element-translation-ng: add t-function to locally override $localize (b2916f4), closes #436
filtered-search: align with theme updates (72f2227)
form: drop form-item legacy mode (5d83257)
form: allow overriding of errormessage IDs on custom form controls (3afbc5a)
form: support context help button in form-items (6bd0863), closes #511
form: improve visual appearance of long and multiline checkbox and radio labels (32a18ce)
header-dropdown: remove automatic filled icon when the dropdown is open (d259942)
help-button: introduce a help button component (29ff865)
icon: replace current si-icon with si-icon-next (cb06a07)
landing-page: add landing page feature components (26e0066)
launchpad: support routerLink for launchpad apps (bf78c1f)
list-details: support usage with the Angular router (4731e77)
maps-ng: open source maps-ng (0d70b10)
micro-charts: add micro bar chart (89e779f)
micro-charts: add micro donut chart (5e29b58)
micro-charts: add micro line chart (e7c8429)
micro-charts: add micro progress chart (e9333dc)
popover: replace current siPopover with siPopoverNext (b96e46f)
search-bar: align with theme updates (709aa53)
switch: align switch label padding with checkboxes (13cf2f4)
tabs: align with UX specs (e3280c6)
tabs: replace current si-tabs with si-tabs-next (6fbba15)
theme: update critical status colors to use data-orchid palette (f5e2b3b)
toast-notification: support pausing of toast-notification (eac9bc3)
tooltip: support template context with tooltip template (6bfc714)
tree-view: remove SiTreeViewComponent.disableFilledIcons input (97b5aef)
typography: update typography definitions to latest Figma ones (779058e)
wizard: switch to footer navigation as default (2f07b9c)

Bug Fixes¶

accordion: don't switch to cursor pointer in case of disabled panel (bebdc16)
badge: align default text with design specs (d96cf0b), closes #425
charts: title and legend overlap on theme change (5daabb5)
circle-status: correct spacing in aria label generation (ac59ea3)
datatable: keep focused row in view when using keyboard (e0f3af7)
datatable: prevent overlapping last row on footer (9a0a9e8)
date-range-filter: allow empty reference point (2f7748e)
date-range-filter: stop automatic advanced mode toggle in input mode (6337d0a)
form: ensure default width of si-form-fieldset labels is 16% in horizontal layout (0f16342)
formly: link error messages to custom controls (1dfb9ee)
formly: link error messages to input (11c1b61)
help-button: don't change color on hover when disabled (5df4d9f)
live-preview: change initialization order to fix locale change loop (acf2190), closes #451
maps: use new fonts, fallback to sans-serif (6b17274)
navbar-vertical: support flexible drop down positioning (24acde0)
search-bar: do not emit searchChange during initialisation (e2be687)
select: announce readonly flag in screen-reader (ed049b1)
status-toggle: use correct cursor for disabled state (6cde8c0)
tabs-next: ensure that the active tab is focussed by default (2b787fb)
threshold: input is not focused after adding step (6cc6765)
utilities: apply correct style for rounded-end utility (295fc49)

NOTES¶

header-dropdown: The si-header-dropdown-item no longer shows a filled icon when the dropdown is open.
theme: The colors for the "critical" status have changed. If this change is not desired, the old colors can be restored using this snippet in the application's main styles.scss:

@use '@siemens/element-theme/src/theme/base-colors'; // load theme here as usual @use '@siemens/element-theme/src/theme'; @use '@siemens/element-ng/element-ng'; // add overrides :root { --element-base-critical: #{base-colors.$color-red-100}; --element-status-critical: #{base-colors.$color-red-900}; --element-text-critical: #{base-colors.$color-red-700}; } :root.app--dark { --element-base-critical: #{base-colors.$color-red-900}; --element-status-critical: #{base-colors.$color-red-700}; --element-text-critical: #{base-colors.$color-red-100}; }

BREAKING CHANGES¶

accordion: Removed SiAccordionComponent.colorVariant input without any replacement.
action-modal: Removed AlertDialogResult, EditDiscardDialogResult, ConfirmationDialogResult and DeleteConfirmationDialogResult as const objects. Use them only as type.
action-modal: Removed deprecated methods:

SiActionDialogService.showAlertDialog
SiActionDialogService.showConfirmationDialog
SiActionDialogService.showEditDiscardDialog
SiActionDialogService.showDeleteConfirmationDialog

Use SiActionDialogService.showActionDialog instead.
angular: Angular 20+ is required. Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=19.0-20.0
charts-ng: The @siemens/charts-ng package now requires ECharts version 6.0.0 or higher. Please update your dependencies accordingly. For details on ECharts 6, see: https://github.com/apache/echarts/releases/tag/6.0.0
collapsible-panel: Removed SiCollapsiblePanelComponent.toggle output use SiCollapsiblePanelComponent.panelToggle instead.
dashboards-ng: gridstack.js v12 is required. To migrate to v12, update the package and drop the inclusion of gridstack-extra.css in angular.json
datepicker: Removed SiDatepickerOverlayComponent.isFocused and SiDatepickerOverlayDirective.isFocused without any replacement.
datepicker: Removed SiDatepickerOverlayDirective.toggleOverlay method. Use SiDatepickerOverlayDirective.showOverlay or SiDatepickerOverlayDirective.closeOverlay methods instead.
datepicker: Removed SiDateInputDirective.dateInputDebounceTime, SiDateRangeComponent .debounceTime and SiDatepickerDirective.triggeringInput inputs without any replacement as they had no effect.
element-theme: The make-theme SCSS mixin no longer prefixes variables with element- hence custom build-time OEM themes have to be adapted accordingly, see: https://element.siemens.io/architecture/theming/#build-time-custom-theme.
filtered-search: Removed following deprecated inputs:

SiFilteredSearchComponent.showIcon without any replacement.
SiFilteredSearchComponent.selectedCriteriaIndex. Instead of preselecting the most relevant option, sort the options by relevance.
SiFilteredSearchComponent.noMatchingCriteriaText without any replacement.
SiFilteredSearchComponent.submitText. Use SiFilteredSearchComponent.submitButtonLabel instead.
SiFilteredSearchComponent.items. Use SiFilteredSearchComponent.itemCountText instead.
form: Removed deprecated SiFormContainerComponent.getValidationErrors method.

Use the built-in mechanism of the si-form-item to show validation errors. See: https://element.siemens.io/components/forms-inputs/forms/#error-messages
form: Removed SiFormItemComponent.inputId and SiFormItemComponent.readonly inputs without any replacement.
form: Removed siFormItemControl directive.

Replace this directive with either the class form-control or form-check-input:

 <input type="checkbox" siFormItemControl> <input siFormItemControl>  <input type="checkbox" class="form-check-input"> <input class="form-control">
form: Checkboxes and radio inputs (<input type="checkbox"> or <input type="radio">) must now be wrapped in a .form-check container.

Additionally, when using Bootstrap’s grid system (bs-grid), each .form-check must be placed inside a .col-* element and cannot be a direct child of a .row. This change is necessary to ensure proper alignment and spacing, especially for long or multiline labels.

Before:

<input type="checkbox" class="form-check-input"> <label class="form-check-label">Label</label>

After:

<div class="form-check"> <input type="checkbox" class="form-check-input"> <label class="form-check-label">Label</label> </div>
form: Using multiple form-controls within a single si-form-item is no longer supported. Use si-form-fieldset to group multiple si-form-item components.

Before:

<si-form-item label="Group label"> <div class="form-check"> <input type="checkbox" id="check-1" class="form-check-input" [formControl]="check1" /> <label for="check-1">Label 1</label> </div> <div class="form-check"> <input type="checkbox" id="check-2" class="form-check-input" [formControl]="check2" /> <label for="check-2">Label 2</label> </div> </si-form-item>

After:

<si-form-fieldset label="Group label"> <si-form-item label="Label 1"> <input type="checkbox" class="form-check-input" [formControl]="check1" /> </si-form-item> <si-form-item label="Label 2"> <input type="checkbox" class="form-check-input" [formControl]="check2" /> </si-form-item> </si-form-fieldset>
icon: The si-icon component has been completely re-implemented including breaking changes in the API. The main motivation of this change is support for SVG icons and to ensure a similar behavior compared to the direct use via CSS classes, making icon usage more interchangeable.

We recommend adjusting your code to the new si-icon. Alternatively, you may use si-icon-legacy to preserve the previous behavior.

The most notable changes are: - Dropped all inputs other than the icon input. Use CSS classes instead. - Dropped the default size along with the size input. Use CSS class icon to apply the default size via CSS or use any other text size class. - The content of this component is hidden in the a11y tree. If needed, set proper labels e.g. aria-label="Close". - Dropped support for stacked icons via inputs. Use HTML and the icon-stack class to construct layered icons.

Single colored icons can be converted as follows:

 <si-icon icon="element-user" color="text-danger" />  <si-icon icon="element-user" class="icon text-danger" />

Important: Previously, the class icon was automatically applied. Unless not needed, it must now be applied manually. The icon class sets a fixed size of 1.5rem.

Stacked (composite) icons need to be constructed using HTML.

 <si-icon icon="element-alarm-background-filled" color="status-danger" stackedIcon="element-alarm-tick" stackedColor="text-secondary" size="display-2" />  <span class="icon icon-stack"> <si-icon class="si-display-lg status-danger" icon="element-alarm-background-filled" /> <si-icon class="si-display-lg text-secondary" icon="element-alarm-tick" /> </span>

For status icons, the new si-status-icon component simplifies usage even more:

 <si-icon icon="element-circle-filled" color="status-danger" stackedIcon="element-state-exclamation-mark" stackedColor="status-danger-contrast" size="display-2" />  <si-status-icon class="si-display-lg" status="danger" />
maps-ng: The @siemens/maps-ng package now requires ol-mapbox-style version 13.1.0 or higher. Please update your dependencies accordingly. For details on ol-mapbox-style 13, see: https://github.com/openlayers/ol-mapbox-style/releases/tag/v13.0.0
navbar-vertical: Removed SiNavbarVerticalComponent.autoCollapseDelay input without any replacement.
popover: The siPopover directive has been completely re-implemented, including breaking changes in the API. The main highlight is a complete accessibility support and unified interaction.

The most notable changes are: - the triggers opening or closing a popover can no longer be modified - instead of having two shown/hidden events there is one visibilityChange event - all inputs and outputs are prefixed with siPopover to avoid name conflicts - a popover always receives the focus on open

The new popover was already available as a preview via siPopoverNext in v47 and is now fully replacing the old popover with v48. If you are already using siPopoverNext, you can do a simple search & replace removing the next suffix.

The "old" popover is still available with via the legacy entrypoint @siemens/element-ng/popover-legacy. Classes and selectors were renamed accordingly: - siPopover --> siPopoverLegacy - SiPopoverDirective --> SiPopoverLegacyDirective - SiPopoverModule --> SiPopoverLegacyModule

Usually, the migration to new popover is simple.

If the trigger or outsideClick was modified, please read the popover documentation on how to properly use a popover.

In all other cases, it is sufficient to replace shown / hidden events with visibilityChange and prefix all input / outputs with siPopover.
result-details-list: Removed ResultDetailStepState as object. Use ResultDetailStepState as type with direct string values.
search-bar: SiSearchBarComponent.searchChange is not emitted during initialisation with value input
split: Removed unused SiSplitPartComponent.headerStatusColor and SiSplitPartComponent.headerStatusIconClass inputs without any replacement.
tabs: The si-tabs component has been completely re-implemented including breaking changes in the API. The main highlights are enhanced accessibility, improved responsive behavior, and Angular router support.

The most notable changes are: - replacing the selectedIndex with an active input in the si-tab - dropping iconAltText in favor of enforcing heading - if an icon is provided, the heading is always visually hidden - no tab is selected by default - dropping deselect and selectedTabIndexChange in favor of using activeChange on the si-tab

The new tabs were already available as a preview via si-tabs-next in v47 and are now fully replacing the old tabs with v48. If you are already using si-tabs-next, you can do a simple search & replace removing the -next suffix.

The "old" tabs are still available via legacy entrypoint @siemens/element-ng/tabs-legacy. Classes and selectors were renamed accordingly: - si-tabset --> si-tabset-legacy - SiTabsetComponent --> SiTabsetLegacyComponent - si-tab --> si-tab-legacy - SiTabComponent --> SiTabLegacyComponent - SiTabModule --> SiTabLegacyModule

When migrating to the new tabs, we recommend checking whether using the router based approach is applicable.

Otherwise, code needs to be changed to use the new active input and renaming iconAltText to heading:

 <si-tabset selectedTabIndex="0" (selectedTabIndexChange)="changedTab($event)"> <si-tab iconAltText="Favorites" icon="element-favorite">...</si-tab> </si-tabset>  <si-tabset> <si-tab heading="Favorites" icon="element-favorite" [active]="true" (activeChange)="changedTab($event)">...</si-tab> </si-tabset>

Please note, the implementation of changedTab must also be adjusted.
tree-view: Removed SiTreeViewComponent.disableFilledIcons input.

Tree items no longer show a filled icon on selection.
tree-view: Removed SiTreeViewComponent.trackByFunction input which had no effect.
typeahead: Removed SiTypeaheadDirective.typeaheadOnMultiselectClose and SiTypeaheadDirective.typeaheadClosed output. Use SiTypeaheadDirective.typeaheadOpenChange instead.
wizard: The si-wizard now has the navigation buttons by default in the footer.

To restore the old behavior set SiWizardComponent.inlineNavigation to true:

<si-wizard inlineNavigation> ... </si-wizard>
wizard: Removed SiWizardComponent.hasNavigation input and SiWizardComponent.cancel output. Use SiWizardComponent.hideNavigation and SiWizardComponent.wizardCancel respectively instead.

DEPRECATIONS¶

charts/gauge: Input labelFormatter should no longer be used to format the value. Use valueFormatter instead.
datepicker: SiDatepickerComponent.calenderWeekLabel input is deprecated. Use SiDatepickerComponent.calendarWeekLabel instead.
element-theme: All .si-* typography utility classes were adapted to match the new typography system. Replace the following matches with their new counterparts:

Instead of .si-h1-black, use .si-h1-bold instead.
Instead of .si-title-1-bold, use .si-h4-bold instead.
Instead of .si-title-1, use .si-h4 instead.
Instead of .si-title-2-bold, use .si-h5-bold instead.
Instead of .si-title-2, use .si-h5 instead.
Instead of .si-body-1, use .si-body-lg instead.
Instead of .si-body-2, use .si-body instead.
Instead of .si-display-1, use .si-display-xl instead.
Instead of .si-display-2, use .si-display-lg instead.
Instead of .si-display-3, use .si-display-bold instead.
Instead of .si-display-4, use .si-display instead.
element-theme: All $si-font-size-*, $si-line-height-*, and $si-font-weight-* variables were adapted to match the new typography system. Replace the following matches with their new counterparts:

Instead of $si-*-h1-black, use $si-*-h1-bold instead.
Instead of $si-*-title-1-bold, use $si-*-h4-bold instead.
Instead of $si-*-title-1, use $si-*-h4 instead.
Instead of $si-*-title-2-bold, use $si-*-h5-bold instead.
Instead of $si-*-title-2, use $si-*-h5 instead.
Instead of $si-*-body-1, use $si-*-body-lg instead.
Instead of $si-*-body-2, use $si-*-body instead.
Instead of $si-*-caption-1, use $si-*-caption instead.
Instead of $si-*-display-1, use $si-*-display-xl instead.
Instead of $si-*-display-2, use $si-*-display-lg instead.
Instead of $si-*-display-3, use $si-*-display-bold instead.
Instead of $si-*-display-4, use $si-*-display instead.
status-counter: The component si-icon-status has been renamed to si-status-counter. The class name changes from SiIconStatusComponent to SiStatusCounterComponent. The old names still work and will be removed in future release.

To migrate to the new names, change imports from SiIconStatusComponent or SiIconStatusModule to SiStatusCounterComponent and replace si-icon-status with si-status-counter in all templates.

47.8.0 (2025-07-22)¶

Features¶

dashboard: add dashboard (c4288e4)
dashboards-ng: add dashboards-ng components (8c5398c)
patterns: add drag drop patterns (3ebd6be)
themes: add experimental new tokens for AI patterns (4719ee2)

Bug Fixes¶

charts: empty series name in tooltip (ad1be3d)
datatable: align group header to match row styles (00af856)
photo-upload: remove padding from the sides when a rounded mask is applied (6ad9894)
select: match selected item icon size with figma specs (087bfcb)
theme: add missing base-4 to utility CSS classes (2407b1c)
wizard: update disabled styles to match with figma (7de558e)

47.7.0 (2025-07-14)¶

Features¶

about: add about (86b562a)
content-action-bar: support checkbox items (9cc6a5f)
landing-page: add landing page component (76731fc)
translate: use provider function to create service instances (b76324c)

Bug Fixes¶

translate: prevent missing $localize errors (2098eb1)

47.6.0 (2025-07-08)¶

Features¶

breadcrumb-router: add breadcrumb router component and resolver service (7a23ea8)
charts: add si chart (76d3e8a)
date-range-filter: improve layout for smaller screens (07e2ef8)
main-detail-container: add main-detail-container (7171549)
navbar-vertical: add navbar-vertical (ade96f8)
resize-observer: add emitInitial input to control initial resize emit (f512259)
theme: add a .text-link class for link in text (ea7f7a4)
theme: introduce base-4, updated base colors (0712c41)
threshold: add threshold component with customizable thresholds and validation (c395815)
tour: add tour (3c4b151)

Bug Fixes¶

formly: add support for placeholder for select (830608e)
tabs-next: calculate scroll container width correctly on load (b93396d)
tabs-next: drop only showing fully visible tabs in responsive mode (0eb49f6)

47.5.0 (2025-06-26)¶

Features¶

angular: add support for Angular 20 (ca6275f)
datatable: add datatable config and interaction (4134ac1)
datatable: support @siemens/datatable 23 (bd19350)
element: add list-details component (6b8503b)
filtered-search: add filtered search (766db4b)
form: add form examples (8d217f6)
formly: add formly wrappers and components (6c4f12f)
loading-spinner: ensure compatibility to Angular CDK 20 (c236c30)
modal: ensure compatibility to Angular CDK 20 (67382c5)
native-charts: add native charts (ec19393)
password-strength: add option to allow whitespaces (b18c232)
password-strength: allow setting minRequiredPolicies (776b47c)
phone-number: add phone number (66589d2)
result-details-list: add result details list (f4842f5)
shadow-root: add shadow-root (5e0d1cb)
side-panel: add side-panel (78a75a0)
status-bar: add status bar (8328095)
tabs-next: add si-tabs-next (a1e87ee)
tree-view: add tree view component (203edbd)

Bug Fixes¶

status-icon: add aria label for status icons (b202fd7)
wizard: improve vertical wizard button positioning on small screens (fa6f486)

47.4.0 (2025-06-20)¶

Features¶

add photo upload component with cropping functionality (40c1491)
badge: introduce critical badge (8a1f9c0)
breadcrumb: add breadcrumb component (a8b3a90)
card: add card component (bf05edb)
card: introduce critical accent (69cf124)
circle-status: add circle status component (5448a6f)
column-selection-dialog: add column selection dialog (85bb1fc)
common: move caution and critical to the base status types (e7eed49)
date-range-filter: add date range filter component (798dcd0)
datepicker: add datepicker components and directives (928b5cc)
electron-titlebar: add electron titlebar component (1f53bb5)
file-uploader: add file uploader (afea528)
filter-bar: add filter bar (55b2c14)
info-page: add info page component (89aeb11)
inline-notification: introduce critical notification (c741a52)
ip-input: implement IPv4 and IPv6 input directives with validation and masking (fc94b0d)
localization: add localization service and related components (609f67c)
search-bar: add search bar (ca68d76)
slider: add slider (7d07906)
sort-bar: add sort bar component with sorting functionality and documentation (9fc833d)
split: add split (b78f847)
status-toggle: add status toggle (c60fc38)
system-banner: add system banner (fefc1ee)
tabs: add tabs component (bbd73d5)
theme: introduce text-critical token (11ef127)
unauthorized-page: add unauthorized page component (96ce204)

47.3.0 (2025-06-10)¶

Features¶

autocomplete: add autocomplete directives and module (a478cd6)
badges: badges with icons and emphasis (175b375)
content-action-bar: add content action bar component (06de114)
forms: add si-form (d771de6)
icon-status: add icon status component with styling and examples (e2cdd3f)
input: add radio, checkbox,switch input type and textarea (2df0b9d)
language-switcher: add language switcher component (032b8c2)
launchpad: add tokens for application icon color/background (d31db92)
number-input: add number input (bcadbe7)
password-strength: add password strength component with validation and UI integration (19a38fb)
pills-input: add pills Input component (af0486d)
popover-next: add si-popover-next component with directives and templates (291ca35)
popover: add popover component (87312d3)
progress-bar: add progress bar component with dynamic functionality (b6c5405)
progress-bar: add progress bar component with dynamic functionality (12051f8)
select: add select component with multi-select and filtering capabilities (c1a1837)
select: add support for stacked icons (9c6f052)
summary-widget: add summary widget (44a540c)
theme: introduce base-critical token and class (a7692e7)
toast-notification: add toast notification component and service (70f23b5)
typeahead: add typeahead directive and components (754a60e)
wizard: add wizard component with dynamic steps and navigation (944c13b)

Bug Fixes¶

live-previewer: make initialization more reliable (3219d17)
live-preview: fix recompile on template change in viewer (af70347)
tsdoc: add default ref (ef9377d)

47.2.0 (2025-05-28)¶

Features¶

accordion: add accordion (6115492)
action-modal: add action modal service and components (ac54c88)
auto-collapsable-list: add auto-collapsable list components and directives (95c27fe)
color-picker: add color picker (1811d08)
connection-strength: add connection strength (50b746e)
copyright-notice: introduce copyright notice (c053f5f)
empty-state: add empty state (7b382af)
footer: add footer component (4b14465)
inline-notification: add inline notification (592c7b9)
loading-spinner: add loading spinner component (ec94faa)
menu: add menu component (27020af)
modal: add modal component (2c05627)
pagination: add pagination component (6cadaba)
password-toggle: add password toggle component (6f9b405)
summary-chip: add summary chip (7f6d187)
tooltip: add tooltip component (151809b)

Bug Fixes¶

examples: update navbar examples to use element prefix (92b0ee7)
live-preview: automatic dark/light theme for overview (31d0376)

47.1.0 (2025-05-21)¶

Bug Fixes¶

application-header: announce logo text in Safari / VoiceOver (71d02a7)
datatable: respect content 100% width (c0fa7fc)
live-preview: accept legacy component loader import (452cd56)
theme: fix card spacing for focus outline (ec3d92f)

Features¶

element-translation-ng: move key extraction CLI into a separate package (3c5cd72)
icon: introduce status icon (5ce6727)
icon: support stacking in template with si-icon (87d2a02)
navbar: add legacy navbar primary (a62fe11)
typography: add title bold styles (34c16ff)

47.0.0 (2025-05-19)¶

Build System¶

harmonize package versions to 47.0.0 (6b088b5)

BREAKING CHANGES¶

Set the correct version in every package.

Except where otherwise noted, content on this site is licensed under MIT License.

Explore
GitHub
Siemens Xcelerator Developer Portal
© Siemens 2016-2026 Corporate Information Privacy Policy Terms of Use

Deprecated utility	Replacement
bg-primary	background-accent
bg-secondary	background-neutral
bg-tertiary	background-4
bg-success	background-success
bg-info	background-information
bg-warning	background-warning
bg-danger	background-danger
bg-base-0	background-0
bg-base-1	background-1
bg-base-2	background-2
bg-base-3	background-3
bg-base-4	background-4
bg-base-info	background-information-subtle
bg-base-success	background-success-subtle
bg-base-caution	background-caution-subtle
bg-base-warning	background-warning-subtle
bg-base-danger	background-danger-subtle
bg-base-critical	background-critical-subtle
text-body	text-primary
text-tertiary	text-disabled
text-muted	text-disabled
text-info	text-information

Deprecated	Replacement
`.list-group`	`.list`, optionally with `.list-divider`, `.list-filled` or `.list-outline`
`.list-group-item`	`.list-item`, wrap the content in slot classes such as `.list-item-title` and `.list-item-description`
`.list-group-item-action`	`.list-item.list-item-action` on a `<button>` or `<a>`
`.list-group-flush`	`.list.list-divider` to preserve dividers; otherwise `.list`, which has no outer border
`.list-group-md`, `.list-group-lg`	No replacement, the height of a list item follows its content
`.list-group-horizontal*`	No replacement, use flex or grid utilities
`.list-group-numbered`	No replacement, use an ordered list with a custom counter because `.list-item` removes list markers
`.list-group-item-secondary`, `.list-group-item-success`, `.list-group-item-warning`, `.list-group-item-caution`, `.list-group-item-danger`, `.list-group-item-info`	No replacement, use background and text utilities, or a list item indicator
`.list-header`	No replacement, use a heading element
`$list-group-*` Sass variables	No replacement

Changelog¶

Changelog

51.1.0 (2026-09-21)¶

Features¶

Bug Fixes¶

51.0.1 (2026-09-17)¶

Bug Fixes¶

NOTES¶

51.0.0 (2026-09-10)¶

Features¶

Bug Fixes¶

NOTES¶

BREAKING CHANGES¶

DEPRECATIONS¶

49.13.0 (2026-07-02)¶

Features¶

Bug Fixes¶

DEPRECATIONS¶

49.12.0 (2026-06-23)¶

Features¶

Bug Fixes¶

49.11.0 (2026-06-17)¶

Features¶

Bug Fixes¶

49.10.0 (2026-06-02)¶

Features¶

Bug Fixes¶

49.9.0 (2026-05-20)¶

Features¶

Bug Fixes¶

49.8.0 (2026-05-08)¶

Features¶

Bug Fixes¶

49.7.0 (2026-04-28)¶

Features¶

Bug Fixes¶

49.6.0 (2026-04-13)¶

Features¶

Bug Fixes¶

49.5.0 (2026-04-09)¶

Features¶

Bug Fixes¶

NOTES¶

49.4.0 (2026-03-26)¶

Features¶

Bug Fixes¶

49.3.0 (2026-03-25)¶

Features¶

Bug Fixes¶

DEPRECATIONS¶

49.2.0 (2026-03-18)¶

Features¶

Bug Fixes¶

49.1.0 (2026-03-13)¶

Features¶

Bug Fixes¶

49.0.0 (2026-02-18)¶

Features¶

Bug Fixes¶

NOTES¶

BREAKING CHANGES¶

DEPRECATIONS¶

48.9.0 (2025-12-19)¶

Features¶

Bug Fixes¶

NOTES¶

48.8.0 (2025-12-17)¶

Features¶

Bug Fixes¶

48.7.0 (2025-12-10)¶

Features¶

Bug Fixes¶

48.6.0 (2025-12-02)¶

Features¶

Bug Fixes¶

48.5.2 (2025-11-26)¶

Bug Fixes¶

48.5.1 (2025-11-26)¶

Bug Fixes¶

48.5.0 (2025-11-24)¶