v47.11.0

47.11.0 (2025-09-01)

Features

• maps-ng: add maps-ng (d1ebd75)

v47.10.0

47.10.0 (2025-08-28)

Features

• charts/gauge: support custom value formatter (e74dd7d)

DEPRECATIONS

• charts/gauge: Input SiChartGaugeComponent.labelFormatter should no longer be used to format the value. Use SiChartGaugeComponent.valueFormatter instead.

v48.0.0

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.
• **act...

v48.0.0-next.9

48.0.0-next.9 (2025-08-22)

Bug Fixes

• icon-status: add missing ng-package.json file (9b7132a)

v48.0.0-next.8

48.0.0-next.8 (2025-08-22)

Bug Fixes

• formly: link error messages to custom controls (1dfb9ee)

v48.0.0-next.7

48.0.0-next.7 (2025-08-22)

Features

• forms: allow overriding of errormessage IDs on custom form controls (3afbc5a)

DEPRECATIONS

• 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.

v48.0.0-next.6

48.0.0-next.6 (2025-08-21)

Features

• element-theme: update to new version of siemens brand package (59d92a1)
• form: support context help button in form-items (6bd0863), closes #511
• landing-page: add landing page feature components (26e0066)
• typography: update typography definitions to latest Figma ones (779058e)

Bug Fixes

• maps: use new fonts, fallback to sans-serif (6b17274)
• navbar-vertical: support flexible drop down positioning (24acde0)

BREAKING CHANGES

• 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.
• 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

DEPRECATIONS

• 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.

v47.9.1

47.9.1 (2025-08-21)

Bug Fixes

• formly: link error messages to input (69f2e25)
• navbar-vertical: support flexible drop down positioning (4146bcf)
• select: announce readonly flag in screen-reader (923a776)

v48.0.0-next.5

48.0.0-next.5 (2025-08-19)

Features

• card: add support for sub-heading to cards (183dcab)
• copyright-notice: use the company-name provided by the theme (fe2fe9f)
• list-details: support usage with the Angular router (4731e77)
• maps-ng: open source maps-ng (0d70b10)
• popover: replace current siPopover with siPopoverNext (b96e46f)
• search-bar: align with theme updates (709aa53)
• tabs: replace current si-tabs with si-tabs-next (6fbba15)

Bug Fixes

• charts: title and legend overlap on theme change (5daabb5)
• formly: link error messages to input (11c1b61)
• select: announce readonly flag in screen-reader (ed049b1)

BREAKING CHANGES

• 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 noteable 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.

• 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:

  <!-- before -->
  <si-tabset selectedTabIndex="0" (selectedTabIndexChange)="changedTab($event)">
    <si-tab iconAltText="Favorites" icon="element-favorite">...</si-tab>
  </si-tabset>
  
  <!-- after -->
  <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.

• 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

v48.0.0-next.4

48.0.0-next.4 (2025-08-12)

Bug Fixes

• datatable: keep focused row in view when using keyboard (e0f3af7)
• datatable: prevent overlapping last row on footer (9a0a9e8)