Release Notes

Designers can now use an “xs” size in vertical orientation for sd-step and sd-step-group. This option makes multi-step flows easier to present in tight spaces—on small screens or as a compact alternative on larger layouts—while still working smoothly alongside sd-progress-bar. Code implementation is planned for the next iteration.

This update brings development and design into closer alignment, resulting in more consistent theme behavior and improved reliability across all components. It includes multiple bug fixes and overall improvements that make multi-theming more robust and predictable.

What’s changed:

• Token naming has been streamlined and standardized, creating a cleaner and more intuitive experience. This update aligns more closely with Figma, ensuring better consistency between design and implementation.
• As part of this process, some CSS variables previously used for custom theming have been removed. Multi-theming is now more robust, with improved structure and fewer edge cases.
• Documentation has also been enhanced. Based on user feedback, we’ve improved the guidance around multi-theming and its implementation, aiming to make the overall experience as smooth and straightforward as possible.

Important for Developers:
Breaking changes related to the removed theming variables will be introduced in a future release (date to be announced).

• Deprecated variables are still functional
• They are clearly marked in the documentation
• Recommended replacements are provided

Upcoming changes to package compatibility:
Currently, any version of the components and styles packages is compatible with any version of the tokens package. This will change in a future release. A minimum dependency requirement will be introduced:

• The tokens package version will need to be equal to or higher than the components and styles versions

We strongly recommend starting the migration process early to avoid future issues — read the full documentation and learn more about dependency changes.

We conducted research to make confident, informed decisions on two new components and ensure they are shaped around real use cases and product team needs.

• For the upcoming file selector, we explored how files are selected - whether via click or drag-and-drop - and how the chosen file should be clearly communicated.
• For selectable content patterns - cards, list items, tiles, and more - we mapped out current usage contexts to define a versatile component that works independently or alongside sd-step-group.

The compact header template consolidates logo and navigation into one streamlined row that works seamlessly across all screen sizes. Designed for pages with straightforward, single-level navigation, it includes a reference implementation showcasing optimal partner logo management and adaptive positioning strategies. The template provides a consistent structural foundation while remaining adaptable to various partnership models and requirements.

A new “Playing with slots” section was included in the Getting started section in figma to facilitate user instruction on how to use Figma Slots.

Transparent variants for sd-brandshape are fully available in code, with updated variants aligned with Figma - keeping brand clarity intact.

The table template now applies consistent cell sizing so that cell height properly matches row height. Additional adjustments improve multi-theming reliability, ensuring tables behave visually and structurally as expected across themes.

A new realistic audio template is now fully synced with Figma. This ensures designers and developers share the same structure and behaviors, strengthening alignment across both environments.

This iteration includes multiple fixes and refinements across various components to improve stability, visual consistency, and expected behavior throughout the system.This iteration includes multiple fixes and refinements across various components to improve stability, visual consistency, and expected behavior throughout the system.