No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

9.0 - 2026-02-27

Added

  • Darkmode toggle: New component to add to footers for toggling darkmode.
  • Grid layout: New component for layouts based on a CSS grid layout.
  • Side panel provider: New component for easier use of the side panel.
  • Footers: It is now possible to place the footer links in ul/li elements.
  • CSS spacing classes: from 13 up to 38. E.g. ids-mt-38.

Bugfix

  • Preamble: Line height value.
  • Spinner: Light spinner is now white in darkmode.

Changed

  • All web components: have changed name to ids-wc-component-name.
  • Checkbox & Radios: THe property compact has been removed.
  • Checkbox: THe property nolabel has been removed. Simply omit the label instead.
  • Col: has changed name to column: ids-wc-column.
  • Data pagination: import folder structure has changed from pagination/data-pagination to data-pagination.
  • Global alert: didToggleExpansion has changed name to toggle.
  • Header login link: For mobile the login links are now mobile-nav-items instead of a link provided to the avatar.
  • Region pickers: The event didToggleRegion has changed name to toggleRegion.
  • List pagination: import folder structure has changed from pagination/list-pagination to list-pagination.
  • Navigation content: import folder structure has changed from navigation/content to navigation-content.
  • Navigation local: import folder structure has changed from navigation/local to navigation-local.
  • Notification badge: import folder structure has changed from notification/badge to notification-badge.
  • Mobile menu: import folder structure has changed from mobile/menu to mobile-menu. didToggleExpansion has changed. name to toggle.
  • Stepper: didToggleExpansion has changed name to toggle.
  • Spinner: light has been replaced with variant. Variant 1 is the default, variant 2 is used on secondary buttons, and variant 3 on primary buttons (former light version).
  • Tooltip: The tooltip will only adjust itself horizontally. If you set a max width, the overflow handling will be disabled.

CSS breaking changes

  • Data table: The ids-data-table classes should now be placed directly on the <table>. The sorting icon margin-left should be set with util class ids-ml-2.
  • Form labels: now has a new wrapper ids-label-wrapper.
  • Form tooltips: Have to be wrapped in a span with class ids-label__tooltip. And for legends ids-legend__tooltip.
  • Header 1177 navbar: ids-header-1177__nav has changed to ids-header-1177-nav__
  • Header 1177 mobile menu: The header mobile menu now has a wrapper and changed class for the button.
  • Header 1177 admin mobile menu: The header mobile menu now has a wrapper and changed class for the button.
  • Header 1177 pro mobile menu: The header mobile menu now has a wrapper and changed class for the button.
  • Header 1177 pro: ids-header-1177-pro-nav__inner-mobile removed, mobile now shares _inner class with desktop.
  • Header inera: ids-header-inera-menu-mobile__menu-itemschange to ids-header-inera-menu-mobile__items.
  • Header inera admin: ids-header-inera-admin-menu-mobile__menu-itemschange to ids-header-inera-admin-menu-mobile__items.
  • Input: Has changed HTML structure.
  • Side menu: ids-side-menu--level should be applied on ids-side-menu.
  • Tag: You now have to wrap the button in a span with class ids-tag.