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)

v48.0.0-next.3

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

Features

• filtered-search: align with theme updates (72f2227)
• header-dropdown: remove automatic filled icon when the dropdown is open (d259942)
• tree-view: remove SiTreeViewComponent.disableFilledIcons input (97b5aef)

Bug Fixes

• circle-status: correct spacing in aria label generation (ac59ea3)

NOTES

• header-dropdown: The si-header-dropdown-item no longer shows a filled icon when the dropdown is open.

BREAKING CHANGES

• tree-view: Removed SiTreeViewComponent.disableFilledIcons input.

  Tree items no longer show a filled icon on selection.

v48.0.0-next.2

48.0.0-next.2 (2025-08-11)

Features

• icon: replace current si-icon with si-icon-next (cb06a07)

BREAKING CHANGES

• icon: The si-icon component was replaced with the si-icon-next
  leading to a few API changes.
  The overall goal of this change is to ensure a similar behavior compared to
  the direct use via css classes.

  We recommend adjusting your code to the new si-icon.
  Alternatively, existing usages can be replaced
  The most notable changes are:

  • dropping the default size
  • dropping most inputs in favor of using css classes

  Single colored icon can be converted like this:

  <!-- before -->
  <si-icon icon="element-user" color="text-danger" />
  <!-- after -->
  <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 icons need to be constructed in HTML directly.
  If applicable, the si-status-icon component should be used instead.

  <!-- before -->
  <si-icon
    icon="element-circle-filled"
    color="status-success"
    stackedIcon="element-state-tick"
    stackedColor="status-success-contrast"
    alt="Success"
  />
  
  <!-- after -->
  <div class="icon-stack icon" aria-label="Success">
    <si-icon icon="element-circle-filled" class="status-success" />
    <si-icon icon="element-state-tick" class="status-success-contrast" />
  </div>

• 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

v48.0.0-next.1

48.0.0-next.1 (2025-08-08)

Features

• angular: update to Angular 20 (cf9d3d5)
• charts/gauge: support custom value formatter (5ea6af2)
• dashboard-toolbar: add title attribute to edit button (14afc3c)
• element-translation-ng: add t-function to locally override $localize (b2916f4), closes #436
• form: drop form-item legacy mode (5d83257)
• help-button: introduce a help button component (29ff865)
• improve visual appearance of long and multiline checkbox and radio labels (32a18ce)
• launchpad: support routerLink for launchpad apps (bf78c1f)
• 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)
• switch: align switch label padding with checkboxes (13cf2f4)
• tabs: align with UX specs (e3280c6)
• 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)
• 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
• 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)
• help-button: don't change color on hover when disabled (5df4d9f)
• live-preview: change initialization order to fix locale change loop (acf2190), closes #451
• search-bar: do not emit searchChange during initialisation (e2be687)
• 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

• 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

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

• search-bar: SiSearchBarComponent.searchChange is not emitted during initialisation with value input

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

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

• angular: Angular 20+ is required.
  Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=19.0-20.0

• Removed deprecated SiFormContainerComponent.getValidationErrors method.

  Use the build-in mechanism of the si-form-item to show validation errors.
  See: https://element.siemens.io/components/forms-inputs/forms/#error-messages

• Removed ResultDetailStepState as object. Use ResultDetailStepState as type with direct string values.

• Removed following deprecated inputs

  • SiFilteredSearchComponent.showIcon
  • SiFilteredSearchComponent.selectedCriteriaIndex
  • SiFilteredSearchComponent.noMatchingCriteriaText
  • SiFilteredSearchComponent.submitText (replaced by SiFilteredSearchComponent.submitButtonLabel)
  • SiFilteredSearchComponent.items (replaced by SiFilteredSearchComponent.itemCountText)

• Removed SiWizardComponent.hasNavigation input and SiWizardComponent.cancel output. Use SiWizardComponent.hideNavigation and SiWizardComponent.wizardCancel respectively instead.

• Removed deprecated methods:

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

  Use SiActionDialogService.showActionDialog instead.

• Removed AlertDialogResult, EditDiscardDialogResult, ConfirmationDialogResult and DeleteConfirmationDialogResult as const objects. Use them only as type.

• Removed SiFormItemComponent.inputId and SiFormItemComponent.readonly inputs without any replacement.

• Removed siFormItemControl directive.

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

  <!-- Before -->
  <input type="checkbox" siFormItemControl>
  <input siFormItemControl>
  
  <!-- After -->
  <input type="checkbox" class="form-check-input">
  <input class="form-control">
  

• Removed SiCollapsiblePanelComponent.toggle output use SiCollapsiblePanelComponent.panelToggle instead.

• Removed SiAccordionComponent.colorVariant input without any replacement.

• Removed `SiDatepickerOverl...

v47.9.0

47.9.0 (2025-08-08)

Features

• launchpad: support routerLink for launchpad apps (47e50cf)