UI MarCom 3

Component Library Changelog


  • Pagination items background hover restored


  • Dark theme support for many components to build dark user interfaces
  • Increase focus ring thickness to 3px
  • Some callback functions now using the component object as parameter instead of the value.
  • All Sass mixins now using the @content rule consistently
  • Change license string to LicenseRef to match SPDX standard
  • Radio Button component disabled state
  • Value Slider resizes responsivly


  • Selectboxes got improved usability inspired by the native select element
  • Remove the bottom margin inside form input components
  • Add date attribute to Date Picker, which sets an initially selected date or reflects the choosen date
  • Textarea, Textfield and Selectbox can expand width to their container
  • Media Object displays the image even if no width is specified
  • Textarea resizes with multi line text
  • Textarea now supports hinttext below it like Textfields
  • Textfields focus state is visible even if validation states are applied
  • Selectbox closes when focus drops
  • Multiselect is now focusable
  • Tabs are focusable to be controlled via keyboard
  • Menu items are focusable to be controlled via keyboard
  • Collection Items that are linked get the proper orange focusring
  • Search result items focus is visibility corrected
  • Searchfield bottom border does not disappear on focus
  • Application Bar Meta Menu focus visibility corrected
  • Value Slider range thumb shows visible focus
  • Value Slider with double range got draggability of the right thumb fixed
  • Overlay closes when Esc key is pressed or the surrounding fog is clicked
  • Modal Dialog closes when Esc key is pressed or the surrounding fog is clicked
  • Date Picker label stays on top after a date is choosen
  • Country and Language Selector error when only one of both is changed is fixed
  • Superscript and subscript does not increase the spacing between lines


  • Button component supports disabled state
  • Card gets an card-title slot to for a headline with proper margins
  • Card Slider UI/UX improved
  • Language Selector is observable with an onChange event callback
  • Country and Language Selector is observable with an onChange event callback
  • Country and Language Selector has customizable headings and button label
  • Fix Textfield label position issue when focus is lost
  • Eye Catcher updates when text attribute changes
  • Fix dark theme support for Footer component
  • Fix double rule issue on slim footer
  • Multiselect does not list group names alongside their nested items
  • Multiselect is now focusable for keyboard control
  • Card borders can not be hidden by container in Card Slider or Carousel
  • Card border does not disappear on focus state
  • Covered Card image leaves no bottom margin
  • Card Slider number of visible cards respond to viewport
  • Cards inside the Card Slider apply headline, anchor and paragraph styles
  • Country and Language Selector suppresses the native select options on iOS
  • Alert clears auto-hide timeout on manual close


  • Selectbox suppresses the appearance of native select options on iOS
  • Selectbox passes selected item to callback function
  • Fix Selectbox theming issue with the items in option list


  • Deploy dist files with npm package


  • Add Toggle Button Group component as segmented controls
  • Add Value/Range Slider component
  • Add Multiselect component as a Select Box variant with support for nesting checkboxes
  • Add a downloadable boilerplate template to quickstart prototyping with UI MarCom 3 components
  • Redesign Alerts component to support inline or overlay appearance with automatic hiding
  • Add labeled variant to Hotspots component
  • Add indeterminate state to Checkbox component
  • Add dark theme support for Breadcrumbs
  • Fix dark theme support for Select Box
  • Streamline internal build process to reduce dependencies
  • Include required sub-components in each component
  • Checkbox state change triggers a callback event hook
  • Fix icon set documentation
  • Avoid loading external images inside the documentation
  • Alerts no longer have buttons by design


  • Streamline internal build process to reduce dependencies


  • Fix HTML validity in Accordion component to match accessibility guidlines


  • Disable body scroll when overlay is open


  • Fix dark theme support for Cards


  • Correct upper/lower case typo in SH-Bree-Headline folder name


  • Fix automated tests


  • Add Covered Stage component
  • Add Covered Card component
  • Add Eye Catcher component
  • Add new icon set
  • Developers guide for migrating from 2.x to 3.x
  • Explain integration of Javascript and SCSS components
  • Technical documentation of the interfaces of all web components
  • Make all Lit Elements extendable through export-statements
  • Include international web font subsets of SH-Bree-Headline V1.4
  • Update Date Time Picker web component
  • Add useful hooks for callback functions
  • Eliminate compiling error regarding the installed package
  • Solve Search Field and auto suggest issues
  • Fix Filtered Select for Country and Language Selector
  • Solve Application Footer issues
  • Fix some found minor incidents
  • Fix elevation shadow on hovered cards


  • All components available as Web Components
  • Country and Language Selector arrives
  • More than 250 round shaped country flags are now included


  • Hotfix Selectbox issue with native options apearing additionally
  • Update all dependencies to counteract future vulnerabilities


  • Downgrade flatpickr third party plugin to v4.5.7 to fix issues
  • Date Picker gets rid of the unintended month select
  • Time input will open timepicker again
  • Update vulnerable dependencies


  • include dist files into npm package
  • Update dependencies


  • Update vulnerable dependencies


  • The new Text Button reveals background on hover
  • Font update to SH-Bree-Headline V1.4
  • Introduce a new default Link style
  • Apply new link styles on Footer Sitemap and Legal links
  • Apply proper hover state to Collection with link items
  • Apply proper hover state to Menu link items
  • Date-Time-Picker shows selected date now correctly
  • Put Hero Block title on black background on small viewports
  • Steps Bar items can now reflect states independently

2.0.0 - 2.3.0

  • Colors have been updated per the brand design update for background colors, additional colors and functional colors. There is also a new accessible Orange, Petrol, Red, and Green for when needed to meet AA level contrast requirements.

  • Typography has been updated to now include Siemens Sans with a larger base font size for easier reading of longer articles.

  • Spacing system is now defined and available to ensure consistent spacing between elements and simplify understanding for user.

  • States concept for common interactive elements like hover, focus, active, disabled is now available.

  • Component status for an overview of all the components where you may find what is new or has been updated in latest release

  • Cards is now an official component that can be reused for various applications. We have added a new hover state and elevation to this component.

  • There has been alignment with our product team for common elements such as Date-Time-Picker, Textfield, and Tabs so that we have a consistent experience for our users across touchpoints.

  • Buttons and Textfield components now show various versions for the three main background colors: white, gray, black.

  • Navigation Bar and Footer now have a “Dark theme” version available in addition to the light theme version. See “Code” tab for details.