Sorry, but you either have no stories or none are selected somehow.
Please check the Storybook config.
Try reloading the page.
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:
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.
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.
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.
Changelog
= Breaking change
7.0 2025-06-19
Changed
Dropdown is now inline block per default. sblock / mblock property moved
from dropdown-content to dropdown component.
Link icons (sorry to say) have (due to a Firefox issue) again been moved around.
You will have to add them yourself as spans within the a-tag and add appropriate classes.
Link arrow: The icon ids-icon-arrow-right-small has been removed. Replace
it with ids-icon-arrow-right-small for all arrow links.
Puff list - due to accessibility reasons - no longer takes headline as a string.
You now have to supply a ids-puff-list-item-header with optional a-tag inside. The slots have changed
names to better reflect the content. If the whole puff list item should be a link, provide a link in
the new slot called item-link and add the content and a ids-puff-list-item-header without a slot
inside. CSS some divs have been added/rearranged.
Header 1177 has a new avatar when logged in. The avatar has a dropdown menu,
and its own mobile menu. The mobile menu must therefore be duplicated (one instance for the navbar
and one for the avatar) and put inside the avatar.
CSS Select multiple class ids-select-multiple__dropdown--hide has been
renamed to ids-select-multiple__dropdown--show and its function has been inverted, to align with
IDS patterns.
CSS Badge now has an inner wrapper ids-badge__inner.
CSS Box-link now has an inner wrapper ids-box-link__inner.
CSS Tag has moved its closable button to inside the ids-tag__content.
CSS Input wrappers have changed class names and the button for input type
search has moved up one div, in order to support icons for all types of inputs.
CSS Stepper step content now has a class ids-step__content--expanded
if it is expanded.
CSS Navigation local ids-navigation-local__link--active has changed name
to ids-navigation-local-link--active.
CSS Dropdown ids-dropdown__link has change name to ids-dropdown-content-link".
CSS Header inera admin - ids-header-inera-admin__brand-text-slot has
changed name to ids-header-inera-admin__brand-text-link.
Icon-region has changed name to Region-icon. It is now using the icon font,
and has some new props.
Header-1177 has a new avatar which has a dropdown for the links, and supports
acting agent radio buttons.
Header-1177 has a new component for the mobile menu ids-header-1177-menu-mobile,
and is no longer placed inside the mobile navbar, but instead as one of the header items, in order
to work together with the new avatar.
Header-1177 & Header-1177-pro are now using the new ids-region-icon component
for region icons.
Header-1177-admin mobile avatar now uses ids-link for login/logout links.
Popover needs to add slot headline to the headline.
Tab no longer takes notifications and notices. Supply a notification badge
of your choice using slot notification.
Notification badge can no longer be outlined. Instead they take a type (like
badges).
Card no longer has options fill-1 and fill-2, instead you can set focuscard
to true to get a highlighted background color, or fill for inera and inera admin.
Select no longer has a automatic aria-label that will e.g read "1 of 4".
6.2.1 - 2025-06-11
Bugfix
Form elements should now correctly remove aria-disabled when invalid changes to false or is
removed.
6.2.0 - 2025-05-30
Added
A tertiary icon button.
Progressbar can now take a label which will be shown before the value.
Header patient, a patient header to combine with Header 1177 admin or Header inera admin.
Changed
CSS Progressbar has moved the label and gotten a new wrapper div (a11y).
CSS Range has new class names, where the wrapper has class ids-range
and the input ids-range__input (a11y).
Bugfix
Missing CSS for header items in header inera and header inera admin is now added.
Header 1177 admin, Header 1177 pro and Header inera admin for angular, can now set the initial
expanded state for the desktop avatars.
Error messages for radio buttons.
Buttons trigger a blur event if wrapper becomes disabled.
6.1.0 - 2025-04-30
Added
Select has a automatic aria-label that will e.g read "1 of 4" so that screen readers will
articulate which option is selected of the total number of options in the list. Can be turned off
with nooptiondescriber.
All icons (except for region icons) are now available in the Inera Design Icons font.
Links now have a prop nounderline.
Changed
Side menu does no longer support the mobile menu inside it. Remove the mobile
menu and only use the side menu for all screen sizes. Also the hideonm is removed.
Inputs of type search will no longer automatically have a visible label. The label should still be
provided, but it will be visibly hidden unless the user sets the new property showsearchlabel on
the ids-input.
Bugfix
Invisible borders in side-panel removed.
6.0.3 - 2025-04-07
Bugfix
Race condition for setting slot attributes in mobile-menus within headers fixed.
6.0.3 - 2025-04-07
Bugfix
Race condition for setting slot attributes in mobile-menus within headers fixed.
6.0.2 - 2025-04-04
Bugfix
Side-menu footer now part of scrollable area.
CSS Link pseudo now have important icon font as font-family.
CSS Alert ribbon now has correct margin
6.0.1 - 2025-04-01
Bugfix
Dropdown link CSS adjusted.
Alert content text can again contain links.
Popover autofocus not active as default.
Dropdown content is now 100% only if set to mblock or sblock.
Dropdown position now works on desktop.
CSS Dropdown links now get white-space set by dropdown component.
Angular Container gutterless prop now updates in routes.
6.0.0 - 2025-03-28
Added
Icon font - We will be deprecating the icon components, and start using a font instead in the
future.
Links, buttons, tabs, badges, inputs, and headers now support font-icons.
Changed
Tags clickable property removed. Use your own button instead.
Alert Global dismissible property removed. Not used.
The old header and footer are no longer supported.
Expandable is now called Accordion - and props have change names.
List is now called Puff list.
Button property search is gone. Use submit instead.
Dropdown and navigation content now use ids-link.
Dialog slot action is now called actions.
CSS New icon font used internally - affected components: Agent, Alert,
Alert global, Breadcrumbs, Box link, Data pagination, Dialog, Dropdwon, Carousel, Check button, Checkbox,
Data table, Error message, Headers, Footers, Input, Link, List pagination, Mobile menu, Navigation
content, Popover, Puff list, Select, Select multiple, Side menu, Side panel, Stepper, Tabs, Tag, Time,
Toggle.
CSS Card css structure is changed.
CSS Date-label now has class ids-date-label instead of ids-time.
CSS Header navbar links now need wrappers with correct class.
CSS Dropdown links now need wrappers with correct class.
CSS Header 1177 pro avatar has some new css classes.
CSS Side-panel footer links: each link needs to be wrapped in a div.
Angular Alert globals expanded property now called Collapsed.
Angular Alert type requires info to default. information not supported.
Bugfix
Popover focus-anchor should now work correctly.
5.5.0 - 2025-02-28
Added
Links have a new attribute called box.
Side menu has support for icons.
Changed
Side panel footer is now a part of the scrollable area.
CSS Alert has a new div called ids-alert__icon_and_text.
CSS Header 1177 has two new divs called ids-header-1177__inner-left and
ids-header-1177__inner-right.
CSS Header 1177-pro has a new div called ids-header-1177-pro__items-inner.
CSS Header 1177-admin has a new div called ids-header-1177-admin__items-inner.
CSS Tabs has a new wrapper div called ids-tabs. Name changes: ids-tabs
-> ids-tabs__tabs, ids-tab-panel -> ids-tabs__panel (USI-818).
Bugfix
The hamburger menu is less blurry.
USI-818 - Tabs should be accessible if there are a lot of them (wcag).
Dropdown content z-index added.
Headers will scale better when font size is increased up to 200% (wcag).
5.4.3 - 2025-02-13
Bugfix
Issue with focusing elements in dialogs triggered with scripts in Angular.
5.4.2 - 2025-02-11
Bugfix
Autofocus priority for dialogs restored.
5.4.1 - 2025-02-5
Bugfix
Dialogs triggered with scripts threw an error.
5.4.0 - 2025-01-31
Added
Side menu component.
Side panel component.
Badge can now have an icon.
Links now have a 3:rd preset color.
Mobile menu now has hover states.
List pagination now has a property that will allow the initial focus to be on the
next-page-button.
Changed
Breadcrumbs: The current attribute is now a boolean, and is set on the crumb
corresponding to the active page, and not on the parent component as before.
CSS Alert global has 2 more divs in its html structure to make it more
responsive. The divs have classes ids-alert-global__header and ids-alert-global__icon-headline.
CSS Stepper has a rearranged html to make it more responsive. ids-step__indicator-wrapper
is now a sibling of ids-step__button-text.
CSS Breadcrumbs should now use an arrow icon on mobile.
CSS List item no longer has a border-bottom. You need to add the ids-list-item-separator
between each item.
Inera header & admin header: 4th column in navigation menu is now reserved for a puff text.
Inera admin footer: links now have color preset 3.
Bugfix
USI-780 - file icons hover state on buttons.
Range will now update correctly if min or max is changed.
Angular User icon now correctly registered.
5.3.1 - 2024-12-18
Bugfix
More missing icons added in header register.
5.3.0 - 2024-12-17
Added
Compact form elements for 1177-pro & inera-admin theme.
New logo for Jämtland Härjedalen.
Header items for all 1177 header can now also be buttons (not just links).
Dialog have a new slot actions rather than slotting them separately.
Changed
CSS Input type search: ids-input__prepend-icon is now
ids-input__search-icon since it only applies to input type search.
CSS Input of type time has updated html structure and css classes.
Bugfix
Select multiple with required checkboxes should now show invalid styles correctly.
Tab panels with ids should now link correctly to the tab.
Missing icon imports in headers are now included.
5.2.1 - 2024-12-04
Bugfix
Radio and checkboxes should now have correct look when label is multiple lines.
Uppsala and Västra götaland icons should now render correctly in angular and react.
5.2.0 - 2024-12-02
Added
Header Inera & Header Inera Admin can now also have buttons as header items.
Changed
Dialog autofocus is always on. Property removed.
Dialog autofocus headline instead of close button (if headline is focusable).
Alert-global property expanded now called collapsed.
Input type search will no longer have a cancel button.
default text color changed from black to --IDS-COLOR-NEUTRAL-20.
CSS Headings have new class names:
ids-heading-1 > ids-heading-xxl,
ids-heading-1 ids-small > ids-heading-xl,
ids-heading-2 > ids-heading-m,
ids-heading-3 > ids-heading-s,
ids-heading-4 > ids-heading-xs
CSS Class ids-select-wrapper is now called ids-select-multiple-wrapper,
ids-select in the same component is called ids-select-multiple__select.
CSS Checkboxes must now have a wrapper with class ids-checkbox.
CSS Radios must now have a wrapper with class ids-radio.
CSS Textarea must now have a wrapper with class ids-textarea.
CSS The toggle has all new HTML structure and CSS classes.
CSS Data tables now follow the same pattern for state classes as other
components.
Bugfix
CSS Scrollbar hover design.
CSS 1177 Header navbar hover design.
CSS Tag background color.
CSS Alert margin and sizes.
CSS Form tooltip adjustment.
CSS Breadcrumb separators no longer get link styles.
CSS USI-725 data tables are no longer transparent on hover.
Angular Dialog focus loop is now working correctly with the new id-button.
5.1.2 - 2024-11-07
Changed
Header nav items have slightly smaller padding to accommodate many nav-items.
Bugfix
Button should now be able to handle unknown elements.
5.1.1 - 2024-11-05
Changed
Link underlined property is now working again.
Dropdown item will no longer be able to have an active state.
CSS 3 classes and their elements removed: ids-linkiconwrap,
ids-header-1177itemsitem-dropdowncontent-item,
ids-header-1177-proitemsitem-dropdowncontent-item.
List pagination emit events now only outputs strings
Bugfix
1177 header-nav box-shadow now shows correctly.
Mobile menu in 1177 header should not appear transparent.
Angular Links now supports pipes.
Angular Link light is now a boolean.
USE-716 - scrollbar
5.1.0 - 2024-10-31
Added
List now has 2 new props: time och showtime.
List pagination component.
Data pagination component.
Inera and Inera Admin header components.
Stepper has a new event didToggleExpansion.
Dropdown component.
CSS Inera Header CSS.
CSS Ul Lists and OL Lists. Classes: ids-bullet-list & ids-numbered-list
CSS Stepper CSS.
CSS Tooltip CSS.
CSS Navigation-content CSS.
CSS Navigation-local CSS.
CSS New background classes ids-bg-1 & ids-bg-2.
CSS Description list.
Angular Steppers step expanded property now supports two way binding.
Changed
Button component now requires a button element. Unnecessary styling properties
removed.
Link component refactored. No longer uses slots.
Navigation-local now accepts simple a instead of ids-link.
Popover content property visible is now called show.
Popover trigger must now be a button or any other focusable element.
Tag has a updated look.
Badge has an updated look.
CSS Link CSS moved to global styles (no import needed).
CSS Button CSS moved to global styles (no import needed).
CSS Tabs CSS is now splitted into 3 files.
CSS Uppercase headings are no longer supported. Heading-5 now looks like heading-3 & heading-6
now looks like heading-4.
Angular Footers are now standalone components.
Bugfix
Link active icons should now have correct color on on hover and focus.
Input invalid and disabled border should now look normal.
Headers z-index should now be placed above alert-global.
Radio buttons now also work in Firefox.
Focus trap for popover should now include close button.
Angular 1177-Header no longer renders borders for desktop items in mobile mode.
5.0.3 - 2024-10-08
Bugfix
Header Avatar renders correctly without unit supplied.
5.0.2 - 2024-10-01
Bugfix
Problems with mobile menu and table css z-position fixed.
header-1177-pro nav has correct width and reacts to fluid.
5.0.1 - 2024-09-30
Bugfix
Alert ribbon should not be affected by automatic compact mode.
5.0.0 - 2024-09-27
5.0 introduces a new 1177-pro footer and header component. The old 1177-pro header and footer are
now named 1177-admin. For now, both 1177-pro and 1177-admin components share the same 1177-pro css
theme. If you are using the ids-header or ids-footer, no change is required but we recommend
changing to the theme specific header and footer. The ids-header and ids-footer will be deprecated
and removed in a future release.
Added
Header standalone components for 1177, 1177-pro, 1177-admin.
Footer standalone components for 1177, 1177-pro, 1177-admin, inera and inera-admin.
CSS Header CSS for 1177, 1177-pro, 1177-admin.
CSS Footer CSS for 1177, 1177-pro, 1177-admin, inera and inera-admin.
CSS Data-table css.
CSS Popover css.
Changed
Dialog trigger property should now be a slot.
Popover property cathegory changed to category.
1177 pro theme mobile-menu now has a transparent background, instead of white.
Card: property border is now bordertop.
CSS property ids-card__border--1 changed to ids-card__border-top--1.
Popover: property visible is now show.
Bugfix
ids-link anchor element should now be contained within the web component.
Gotland icon fixed.
Notification-badge border should not affect height.
Popover layout, and popover property category is now spelled category.
Card border now hidden when hideons or hideonm is active.
Time component hover state issue.
Card component border issue.
Expandable borderless issue.
Dialog width issue - you can now provide width and max-width independently from each other, e.g.
width 43rem, maxwidth 80%.
Angular input icons position.
Angular shiled locked icon.
4.10.0 - 2024-05-29
Added
Alert ribbon property.
Button group break property to decide breakpoint.
Changed
Card interactive can now accept a link.
CSS Cards classes changed.
Bugfix
Cards do not hide overflow any more.
1177 avatar user icon has correct color.
Angular link and link icon colors should now always have their color visible.
4.9.0 - 2024-05-17
Added
Range interval property for large spans.
Tooltip position property for manual positioning.
Button group justify position for horizontal alignment.
Card border property.
Changed
Card fill property is now broken into two border and fill and has more variations for 1177
and 1177-pro.
Card fill2 property is removed.
1177 color tokens: secondary-90 and secondary-40 are now removed. Use Accent instead.
1177-pro now have a blue theme instead of a red. Note that slotted elements might need manual
change.
CSS Card fill and border classes are changed. See examples.
Bugfix
Changed border color of error alert.
Rare popover crashes should not occur in Angular anymore.
4.8.1 - 2024-05-02
Bugfix
Expandable aria-expanded now displays correct state when false.
List item should now colorize arrow-icon.
Screen readers should now read alert headline if slotted element is a heading.
4.8.0 - 2024-04-29
Added
Header now has skip-to-content slot for skip link.
Card hideonm and hideons property for hiding card wrapper on smaller screens.
Textarea autosize property for automatic vertical textarea sizing.
Textarea block property is back.
Changed
Links append icon now aligns to the first row.
CSS Active icons inside links now have an additional wrapper.
Bugfix
Button for 1177 now have correct font.
Autofocus for form-elements should now work.
Textarea hint placement fixed.
CSS ids-time conflict with date-label is now resolved.
4.7.3 - 2024-04-17
Added
Better support for jsdom environment.
4.7.2 - 2024-04-16
Bugfix
Tooltip slots for checkboxes and radio buttons should now render correctly.
Graphic bug for error message speech bubble on certain zoom levels fixed.
4.7.1 - 2024-04-12
Bugfix
File-CSV, Form-numbered-reoccurring now applies correct colors on Inera theme.
Error message CSS now have updated warning icon.
4.7.0 - 2024-04-12
This release moves the majority of Form CSS from the Web Components to the global IDS CSS. Allowing
it to manipulate the form elements in the light dom directly rather than via slots. Minimizing
redundant CSS and decreasing bundle sizes.
Dynamic icon (ids-icon/id-icon/IDSIcon) is now removed.
Select multiple label prop changed to labeltext.
Form valid property is now changed to invalid and accepts a boolean instead of a string.
Range, Textarea and Toggle related css-properties have changed names.
Textarea Fade effect removed. Property nofade is removed.
Errormessage is now an inline-block.
Form element event onValidation is now two events onValid and onInvalid.
CSS.ids-alert-global__headline is now a wrapper rather than the class of the headline.
Bugfix
Error messages aria-describedby should now switch correctly between hint and error-message.
Tabpanel relative and z-index wrapper now removed.
Tab role="tablist" now only wraps tabs, not panels.
Checkboxes that are light now have correct invalid style.
Alert no longer render empty h1 if slot is provided.
CSS Expandable class ids-expandable__icon--closed now works as intended.
Angular Tabs default slot and Tabpanel properties present again.
React IDSIconX is now imported correctly in api.
4.6.3 - 2024-03-22
Added
New tooltip slot for form elements.
4.6.2 - 2024-03-21
Added
Header-avatar has two new events expanded & closed.
Angular Header-avatar and Header-mobile-menu expanded property now supports data binding.
Changed
ids-header-mobile-menu didToggleExpansion event replaced by expanded and closed event.
4.6.1 - 2024-03-20
Bugfix
ids-header-mobile-menu expanded state is now reflected in the property.
4.6.0 - 2024-03-14
4.6 Is a huge patch for Angular users. IDIcon, IDLink and other classes representing elements are
now removed in order to accommodate scaling and a smaller bundle size. Icons should now be imported
individually. Creating components with objects like IDLink and IDHeaderItem is replaced with a more
familiar component-based approach. Affected components: Alert Global, Breadcrumbs, Button, Footer,
Icon (Shouldn't be used), Header, Mobile-menu, Link, Tabs.
Added
CSS Expandable icons can now easier be managed with classes ids-expandable__icon--closed and
ids-expandable__icon--expanded.
Angular Icons component.
Angular Icon-region component.
Angular Components representing old classes in @inera/ids-angular/common.
Changed
1177-pro Header avatar unit text is slightly smaller.
Angular Breadcrumbs no longer use links and mobilelink. Use id-crumb component instead.
Angular Button no longer use iconobject. Use individual icons instead.
Angular Header no longer use IDHeaderAvatar, IDHeaderItem, IDHeaderNavItem. Instead use
components: id-header-mobile-menu, id-header-item, id-header-mobile-item, id-header-nav,
id-header-nav-item, id-header-avatar.
Angular Mobile Menu no longer use items. Use id-mobile-menu component instead.
Angular Link no longer use prependiconor appendicon. Use individual icons instead.
Angular Tabs no longer use items. Use id-tab component instead.
Bugfix
H1 small has correct color in 1177-pro.
Header avatar for 1177-pro now aligns correctly.
Alert chevrons now registers correctly.
Popover scrollbar renders correctly.
Form spinner live now handles property correctly in aria-live.
4.5.1 - 2024-03-01
Bugfix
1177 header avatar on safari now renders correctly.
Button is disabled if loading is true.
Angular Icon Ostergotland now renders correctly.
Angular Icon Twitter now renders correctly.
4.5.0 - 2024-02-28
Added
Button has new loading property.
Form Spinner added to CSS.
Form Spinner light property.
Tab now have a compact property, removing space between tab and panel.
Changed
Tabs have slightly different style.
Links' appended icon will now be placed behind last sentence if link is multi-lined.
Focused links will now have a hover effect.
1177-pro Service name text used with Brand Text Top/bottom is now 24px (was 30px).
Notification badge style for Inera changed.
CSS Appended CSS icon class .ids-link__icon is now a child of .ids-link__text. See
examples.
Bugfix
1177 header avatar on mobile is now 100%.
Select chevron no longer interfere with click event.
Input light now works.
Footer linkcol value auto should now apply correctly.
Radio disabled border should now render correctly.
Expandable Chevron is now correctly rotated if expanded on first render.
4.4.3 - 2024-02-18
Bugfix
Expandable expansion now works correctly.
4.4.2 - 2024-02-15
Bugfix
List registers chevron correctly in core.
List-item ignores interactive text if slot is provided.
4.4.1 - 2024-02-14
Added
Angular Tabs now have access to onTabChange event.
Bugfix
Button text and icon now have a gap.
Tabs tabChange event will only trigger if tab is actually changed, not on click.
4.4.0 - 2024-02-14
Important information for Angular users
@inera/ids-angular internal structure is changed to accommodate tree shaking. All components and
modules are moved into @inera/ids-angular/components/*. Classes, interfaces and internally used
components are moved to @inera/ids-angular/common.
import { IDHeaderModule } from '@inera/ids-angular/components/header'; import { IDIconModule } from '@inera/ids-angular/components/icon'; import { IDLinkModule } from '@inera/ids-angular/components/link'; import { IDMobileMenuItem, IDLinkWeb, IDHeaderItem, IDHeaderAvatar, IDHeaderNavItem, IDIcon } from '@inera/ids-angular/common';
Added
Checkbox, Error Message, Radio, Input are now available as CSS.
Alert has a new headline slot.
Notification badge is now available in header-navigation-item.
List has new nocontent property to display headline-only list-items.
Tabs default slot now available between tabs and panel. Allowing you to show the same element on
top of every panel.
Header now has a header-top slot for rendering content inside header-tag. Above header.
Chat and Prescription icon.
Expandable has 2 new events closed and expanded.
Dialog has 1 new event open.
Angular Expandable property expanded now supports two way data binding.
Angular Dialog property show now supports two way data binding.
Angular IDLinkRoute now accepts a NagivationExtra object.
Changed
Links without an icon will have underlined="true" automatically.
Checkbox margins are now only present if used in a checkbox group.
Checkbox compact property is now removed.
Notification badge font-weight is now normal.
Toggle Label is now on the right side of the toggle-switch.
Size of search button text is now bigger.
Buttons can now be used with any input.
Grid selectors have been changed from .ids .col-x to .ids-col-x.
Angular IDListItem and IDListItemInfo Module removed, components included in IDListModule.
CSS List has a now a new body div around content.
Bugfix
Multi-text-lined buttons should now scale correctly.
Header items with links should now have their focus-outline back.
Footer linkcol property now correctly sets the width of the link columns.
Dialog now hides (and restores scrollbar) if it disconnects from DOM.
Dialog can now correctly be turned off with a property change in angular.
Secondary button height is now the same as primary.
Tertiary button disabled now have correct style.
List headline slot is now back.
List is correctly registering chevron icon.
Textarea inline style width is now always set to initial width if nofade="false" (default).
Expandable can now have it's state set programatically.
Dialog button gap decreased to 20px from 40px in desktop mode.
Angular Textarea now has a new block property allowing it to be 100% width.
Angular IDLinkRoute executes internal click function and includes extra correctly as an
argument to navigate function.
4.3.0 - 2024-01-15
In order to support the usage of components in isolation, some changes have been done to the
internal structure of ids-design.
Theme tokens (CSS-properties), previously found inside each theme.css file, are now placed in their
own theme-tokens.css file. Enabling the registration of theme-tokens without including component
tokens and related css (including reset, global and util classes) in your stylesheet. All components
will also have their tokens extracted into their own file. Making it possible to only register the
components you need.
This does not require any changes on the consuming end.
Added
Tabs, List and Notification-badge CSS now avaible.
Disabled state for select multiple.
Headline slot for expandable.
ids-divider class for hr-tag, ensuring correct color.
Angular IDHeaderAvatar now have a new hide property.
Angular IDLink now have a new arialabel property.
Changed
1177 CSS properties have changed names and is now using the same system used in the Inera theme.
Alert CSS Theme Tokens are now separated into token files.
Notification-badge size is smaller.
Mobile menu focus outline is now more evident.
Inera alert corners are now sharper.
Bugfix
Checkboxes now reflect compact property.
Notification-badge sizes removed.
justify-content: start changed to flex-start.
Attention icon viewbox no longer clips bottom.
Breadcrumbs that span two rows now wrapped.
Angular Expandable variation 2 now renders correctly.
Angular Card fill2 property now works correctly.
Angular Alert rendering should now be more resilient to state changes.
Inera Heading 6 and Preamable should now have correct weight and colors.
4.2.0 - 2023-12-01
Added
Hint slot to input and textarea.
Progressbar CSS.
Tag CSS.
Progressbar is now responsive.
Changed
Alert compact wraps text around icon on mobile.
Tags are slightly taller.
Bugfix
Secondary icon now has correct color on hover.
Badge neutral now have its border back.
Button blocks with icons now aligns correctly.
Textarea fade now updates correctly if textarea is resized.
4.1.2 - 2023-11-27
Removed
Dialog closed event.detail.reason removed.
Changed
Dialog persistent property now also prevents closing with ESC button.
Bugfix
Dialog should not emit closed event on render and should only emit once when closed.
Footer sub-footer should now align correctly to the center.
Header 1177 desktop avatar links are now get underlined via slot.
4.1.1 - 2023-11-27
Added
Dialog closed via property change should now be handled the same way as internal close button.
4.1.0 - 2023-11-27
Added
Typography classes now include responsivity.
Icon for X.
Dialog CSS.
Dialog property keepscrollbar now keeps old behavior and scrollbar on body.
Expandable children now requires class ids-expandable--child to ensure correct styling.
Changed
Dialog now hides body scrollbar by default.
Internal HTML for Dialog component.
1177 link color preset 2 is now slightly darker.
Twitter icon now has the same icon as X.
List link chevron are now bigger and have slightly less space between self and text.
Negative margins removed from header items on narrow mode.
Radio buttons are now aligned to top if text is multiline.
Mobile menu avatar shadow is now removed.
CSS - Footer: div.ids-footer__sub-footer-mobile-service-name is now the wrapper for service
name on mobile.
Bugfix
Button properties mBlock and sBlock now works again.
1177-pro header avatar (desktop) chevron is now visible.
Tertiary Icons should now have correct hover color.
Footer links with 14px font-size should now be set correctly.
Fixed ids-links that are clickable outside the area in footers.
Footer padding around logo on 1177/1177-pro mobile is now back.
Removed
CSS - Alert: div.ids-alert__inner is no longer needed.
Dialog headline is now removed. Can be supplied via slot instead.
ids-dialog-actions is now removed. Can be supplied via slot instead.
4.0.0 - 2023-11-16
With 4.0 we introduce a brand new ids package called ids-design, which will be downloaded
automatically. Which now holds all of the IDS CSS. This makes it possible for developers to use IDS
without the need to use the Web Components. Expanding IDS support for projects which can't use the
components as is. Some CSS properties will continue to change until @inera/ids-design starts to
include the design tokens.
Mobile item have two new properties showtext and hidetext for aria-label in expandable buttons
containing chevrons.
Angular Tabs can now be created with new IDTab object.
Changed
Theme files are now moved to @inera/ids-design
Table CSS moved to @inera/ids-design
Inner HTML for Agent, Alert, Alert Global, Badge, Breadcrumbs, Button Group, Button, Card,
Date-label, Expandable, Footer, Link, Mobile-menu is changed to enable CSS compatibility.
1177 Header avatar name is no longer faded if too long.
Expandables with multirow headlines should now be padded.
Links for 1177 now have correct color.
Buttons with icons are now handled automatically without nested col and row.
Mobile Menu design is overhauled.
Removed
Recommended Datepicker including the supplied css for duet-date-picker are removed.
Ineras legacy themes are no longer available.
Mega menu graphic from 1177 and 1177-pro.
Bugfix
Tab focus can now be shifted with arrow keys again.
Angular Dialog focus loop should now exclude trigger.
Angular Icons inside Links should not throw name error anymore.
Angular Footer should not render until type is resolved.
Angular Header items should now be clickable.
[3.1.3] - 2023-10-09
Bugfix
Links with long texts and icons should now align correctly regardless size.
[3.1.2] - 2023-10-09
Added
Global CSS variable --IDS__MAX-WIDTH for controlling ids-container max-width.
Badges are now responsive.
Changed
Checkboxes now have margin instead of relying on label to dictate margins.
Bugfix
Error thrown when dialog is hidden should now be resolved.
Alert headline now scales correctly on smaller screens.
[3.1.1] - 2023-10-03
Changed
Datepicker CSS updated.
Bugfix
Button tabindex now responds to disabled property changes.
[3.1.0] - 2023-10-02
Several issues with links have been addressed in this release. First of all, selecting an
appropriate link color is now easier than ever by using 3 of the new color presets introduced. These
color presets are now applied automatically when an ids-link is used inside another ids-component.
Making it a lot easier to ensure their correct look and feel. Therefore, it's no longer needed to
apply color, activeicon or other style defining properties when using ids-link inside another
ids-component. Secondly, links used in header-items, the navbar and in regular ids-links will now
present the correct target in the bottom left corner. They should also be read correctly in screen
readers.
Added
A new Navigation Local component.
Custom headlines are now supported in Dialogs and List-item.
Select-multiple now have two new properties selectedlabel and multiselectedlabel.
Cards now have an interactive property.
Button groups are now responsive by default, but can be turned off with the new unresponsive
property.
Link now have five new properties bold, hovercolor, light, active and colorpreset.
List-item have a new property interactive.
Changed
Select multiple now displays the amount of options selected and not the selected option text.
Links, Header items and header navigation items are now using the supplied link as the clickable
and focusable element.
Links with icons in header within header-nav-items no longer need color and size properties.
Links now have underline on hover.
Links now change color on hover by default.
Link's line-height is now 1.5rem by default.
Link's prepend icon now changes color with the link on hover.
Buttons inside disabled ids-inputs are now independent and will have to be disabled independently.
Dialog edge gap between edge of screen and is now smaller on small devices.
Dialog scrollbar now have a padding.
Cards have an updated border for 1177 theme.
Search button and input are now separated on 1177 theme.
Disabled inputs have new style (1177).
Link property activeiconbackground is now removed. It's now based on the link color and
hovercolor.
Angular Button onClick now emits the custom event from the Web component instead of a boolean.
Bugfix
Focus loop now re evaluates content each time dialog is shown. Ensuring it works every time even
if content has changed.
Button groups no longer apply right margin to buttons.
Chevron icon is now centered.
Link icons should now be aligned correctly on top if link text spans over multiple lines.
[3.0.9] - 2023-08-23
Added
Row gets a new Gap property.
Bugfix
Links should now be clickable with Enter
Select options with long text will now overflow into an ellipsis.
Buttons can now be clicked with NumpadEnter.
HeaderAvatar maxwidth should now apply correctly on 1177 themes.
Changed
Alert global / Agent default show/hide text changed.
Notification badge size property removed.
Mobile menu unresponsive property removed.
[3.0.8] - 2023-06-21
Changed
Mobile menu items now have !important padding.
[3.0.7] - 2023-06-20
Changed
Mobile menu item links no longers requires slot="link" if it's a standard anchor tag.
[3.0.6] - 2023-06-20
Added
Card has a new property "lean".
Changed
Mobile menu item links now requires slot="link".
Mobile menu items now uses the slotted link as the clickable item and not a javascript link.
Borderless expandables now contains the same size. If expandables are used in Card, use new lean
property on the card.
1177, Mobile menu text is slightly bolder.
1177, Tag (clickable) text is slightly bolder.
Select chevron no longer rotates.
Internal refactoring.
Bugfix
Expandables borderless state now updates correctly.
[3.0.5] - 2023-06-12
Added
Stepper component can now get a headline slotted.
[3.0.4] - 2023-06-08
Bugfix
Header brandlogotypes should now be registered correctly in header.
[3.0.3] - 2023-06-07
Bugfix
Inera admin header brand text is now inline.
[3.0.2] - 2023-06-07
Changed
Popover, Dialog and Tooltip now have a border.
Alert now centers short text if a headline isn't provided.
Östergötland now have a new icon.
Dialog now have a larger padding.
Dialog now scales better, supports a scrollbar and has a max-width.
Bugfix
Dialogs should not be larger than screen any more.
[3.0.1] - 2023-05-26
Added
Popover now requires autofocus="true" in order to autofocus content.
Dialog now supports autofocus="true" when displayed.
Changed
Internal usage of em changed to rem.
Compact on checkbox now removes margin around the checkbox.
Margin between checkbox and label is moved to label.
Bugfix
Expandables inside cards should now look correct.
Tooltips should now be centered if intersecting with top of viewport.
Dialog focustrap and focus should now work better if dialog is triggered by script rather than
click on trigger element.
[3.0.0] - 2023-05-17
Angular now shares property names with Core and React. Resulting in all property names being
lowercase. Minimizing administration, future development and documentation time. Angular events are
now prefixed with ‘on’ just like React events.
We have made a complete overhaul of how we use icons. Splitting up the ids-icon component and
icons.ts module into separate modules and components. Resulting in smaller production bundles and
hopefully faster load times. This will only work if ids-icon isn't used (imported) anywhere in
your project.
Added
All icons now have a corresponding component.
A new ids-region-icon component for dynamic rendering of regional icons.
Footer has a new slot sub-footer-mobile.
A new light property to input elements.
Header now have two new slots region and region-mobile.
Dialog now have a closed event.
Changed
HeaderItem no longer accepts icon as a property.
Tab no longer accepts icon as a property.
HeaderMobileItem (1177) no longer accepts icon as a property.
prop subheadline does not render on 1177-pro, servicename only renders in footer.
The default "service name drivs av" text is removed from 1177-pro & inera-admin footer.
Header prop regionicontitle is removed. Is now applied directly to icon.
Expandables now have an updated style when expanded.
Örebro now have a new logotype.
Popover focus should now look better and have correct color.
Badge main color changed for inera theme.
Icon button should now have correct secondary colors.
list-item-info no longer requires any margin classes. Will be handled automatically.
Badge type main changed to primary.
Angular: All properties are now lowercase.
Angular: Buttons now accepts an icon as an property object instead of as a child.
Angular: Alert global now accepts an icon as an property object instead of as a child.
Angular: Tabs now accepts an entire icon in the icon property instead of just the icon name.
Angular: All events are now prefixed by "on".
Angular: maxWidth property on id-header, for avatar maxWidth, is now moved to the
IDHeaderAvatar class.
Bugfix
React Tabs selected property should now work properly.
Buttons should now have correct height.
Fix where header fluid wouldn't be correctly applied on header sub-elements.
Alert close button svg should now throw an error anymore.
Angular Dialog properties persistent and dismissible should now work correctly.
[2.6.0] - 2023-04-19
Added
New Toggle component.
Footer link columns can now be 1, 2 or 3 with new cols property.
Alert can now be collapsed by default with new collapsed property.
Tertiary buttons now support icons.
Changed
Form elements with states disabled and invalid now have an updated look.
Error messages have an updated look.
Tertiary buttons padding is now a lot smaller.
Inera and Inera Admin footers now scale vertically better.
Sub-footer links are now slightly smaller.
Datepicker now have bigger visual difference between active month days and other month days.
Breadcrumb default value changed from "Brödsmulor" to "Du är här:"
Bugfix
1177 agent banner should now have correct colors.
Stepper should now have correct styling.
[2.5.0] - 2023-03-24
Web and React components now share property names, minimizing administration and future development
and documentation time. A lot of technical debt has also been addressed. However, there's more to be
done and in the short term some refactoring will have to be done in order to ensure compatibility
with this release.
Added
@inera/ids-react now includes type declarations.
Tabs are now responsive. Introducing 3 new properties responsive, unresponsive and
selectlabel.
maxwidth property for header-avatar. Setting the max-width of username and unit.
Tabs now emits selected tab index when a tab is selected.
regionicontitle added to header. Which sets the title of the region icon for 1177 theme.
Changed
Irregularities in react with property names where some starts with a capital letter should now be
fixed.
Property name changes:
Mobile-menu-avatar: servicename -> unit.
Slots moved to properties:
ids-header-avatar: slot="avatar-text" should now be supplied to new property unit.
No more hyphens in property names. For example: this-property -> thisproperty. (No action
required for @inera/ids-angular users):
Alert Global: hide-mobile-icon.
Button: m-block, s-block.
Carousel: autoplay-delay
Column: m-offset, s-offset.
Dialog: no-overlay, no-focus-trap.
Form elements: no-validation.
Header: logo-href.
Header item: separator-left.
Textarea: no-fade.
Tab Panel: no-focus.
Select Multiple: max-height.
Popover content: max-width, max-height.
No more camelcase in properties (No action required for @inera/ids-angular users):
Header: brandTextTopbrandTextbrandTexBottom
Form elements: autoFocus
Interface changes (Angular)
@inera/ids-angular Interface IDHeaderAvatarProp: serviceName changed to unit
Link size property now requires unit. Not px by default.
Tab internal prop value changed to index.
Dialog dismissible button should now align better to right side.
Accessibility changes.
Agent now has role="alert", not the global alert inside it.
Alert headline is now a h2.
Alert Global headline is now a h1.
Agent headline is not a h1.
Expandable variation 2 headline is now a h2.
1177 avatar links are now underlined
Bugfixes
Rendering header sub-components after first load (like waiting for authentication to render
ids-header-avatar) should now display them correctly.
Checkboxes with labels on two rows should now maintain their full size.
Select multiple selections will now be contained and not be displayed under the chevron.
Avatar username and unit name should now be aligned to the left.
Progressbar with 0% should now be completely empty.
valid on form groups should now correctly display error message.
select-multiple now has the same height as select.
ids-textarea wrapper is now inline block.
Avatar icon for 1177 and 1177-admin now have correct size.
[2.4.0] - 2023-03-10
Added
Stepper component.
Header logotype and brand text can now be turned into a link with the new logo-href and/or
brand-text slots.
Changed
shield-locked-filled name changed to shield-locked-primary.
Supplying an unslotted link for the logo will no longer work.
Expandable clickable area is now a div with role="button".
Icons color1 and color2 are now reversed. 1177 icons should now have correct default colors when
only one is used.
React Web component conversion updated to newer @lit-labs/react version. This dependency
might require a reinstall.
Bugfix
Region Stockholm icon isn't cropped anymore.
Header navigation separator not visible if no navigationbar is present.
Some expected datatypes should now be correct.
[2.3.2] - 2023-02-28
Changed
1177 default colors are now reversed.
[2.3.2] - 2023-02-27
Bugfix
Buttons are not active by default.
[2.3.1] - 2023-02-24
Changed
Minor changes in tag component.
[2.3.0] - 2023-02-24
Added
Carousel component.
Tag component.
Tabs now support notifications badges.
Checkboxes and checkbox-groups now have a compact property, decreasing the margin between
checkboxes.
Select-multiple have a new max-height property, enabling setting the max-height of the dropdown.
Notification badge now have an outlined property.
Changed
All the icons are now slightly thicker.
Company icons are reworked.
Footer sub-headline is now a part of the headlines h1.
Util classes are now bound to root font size. em -> rem.
Bugfix
Angular Checkbox-group legends should now be visible.
[2.2.0] - 2023-01-30
Added
Fab button.
Icon button.
Alert component can now be collapsed with new property collapsable.
Textarea now have an property no-fade to remove the fading text effect when content overflows.
Changed
1177 tabs now have an updated look.
Bugfix
Small button focus outline offset when used with icons fixed.
Textarea fade should now only be visible if content creates a scrollbar.
Dialog heading tag changed to h3 to enhance accessibility.
[2.1.2] - 2023-01-17
Added
Better support for lazy loading in Angular.
Bugfix
Header menu button now have correct outline in inera and inera-legacy theme.
Text in header sub-components should now scale better according to browser settings.
[2.1.1] - 2023-01-16
Changed
Tooltips now have a default z-index of 2.
Bugfix
Button focus outline should now be correctly spaced.
Search inputs with buttons should now have a correctly aligned clear button on mobile and desktop.
[2.1.0] - 2023-01-13
Changed
Typography rework. Old classes like .ids .h1 does not work anymore. Instead use ids-heading-1
etc.
ids-header-mobile-menu will now close if a child ids-link is clicked. persistent property
added to header-mobile-menu to keep old behavior.
Bugfix
Tooltips should now be placed on bottom if the top overflows viewport.
Links with a href should now be able to be opened by right clicking.
Icons should not throw a style related error anymore.
Dialog now have an internal text-alignment to the left to the left.
Tooltips on ids-icon now uses aria-labelledby instead of aria-describedby.
Search inputs without buttons should now have a correctly aligned clear button.
[2.0.1] - 2022-12-14
Bugfix
Problem where component text wouldn't scale according to browser settings should now be fixed.
[2.0.0] - 2022-12-13
Added
New inera and inera-admin theme.
New icons, inera brand, search-inera, computer-inera.
Type removed from Mobile menu item.
Changed
Old inera and inera-admin theme are now named inera-legacy and inera-admin-legacy. This includes
the type property is present in some components.
Type removed from refactored Mobile-menu-item component.
Angular Breadcrumbs property name change srlabel -> srLabel.
Icons can now set activeicon background color with new property activeiconbackground.
Changed
Icons active icon now has a 3px padding
Angular
Links activeicon changed to activeIcon.
[1.13.3] - 2022-11-15
Added
Popover-content now support a custom max-width and max-height.
Tab-panel content focus can now be turned off with no-focus.
Button custom color props now also support suffix hover.
[1.13.2] - 2022-11-08
Changed
Button color prop changed to backgroundcolor. color now affects text color. Both props are
now accompanied by suffixes disabled and active for custom styling on those states.
[1.13.1] - 2022-11-08
Bugfix
Progressbar is now aligned with both edges during 100% completion.
[1.13.0] - 2022-11-08
Added
Badge component.
Popover component.
Progressbar component.
Changed
Alert headline is now set via a prop.
Alert styles are moved inside the shadowDom.
Input type Search now renders icons and is responsive.
Placeholder texts for form elements are now darker.
Buttons now are styled internally based on reflective attributes instead of classes.
Button dimensions now correlates with Figma sketches.
Button tabindex will not be overwritten if supplied.
Button color can now be changed by prop color, if really really needed.
Angular
Classes on id-col / id-row are now passed to the ids-col / ids-row.
Input icons are now supplied via a property.
Bugfix
Error message does not have a background color in the Inera and Inera Admin theme.
A supplied icon on an input should now render a right-hand padding.
A supplied icon on an input should now render disabled if the input is disabled.
Safari: Header avatar links for theme 1177 should now be spaced correctly.
[1.12.7] - 2022-10-19
Changed
Header nav-items are now more responsive.
[1.12.6] - 2022-10-13
Bugfix
Button groups now have correct directional margin based on RTL prop, even in Angular.
[1.12.5] - 2022-10-13
Bugfix
Button groups now have correct directional margin based on RTL prop.
[1.12.4] - 2022-10-12
Changed
Global-alerts headline is now set by using the headline property.
[1.12.3] - 2022-10-12
Bugfix
Name in header avatar should now be correctly aligned.
[1.12.2] - 2022-10-12
Bugfix
Header, Agent and Global alerts should now have correct layering
[1.12.1] - 2022-10-11
Bugfix
Expandables now get correct height if borderless in react.
[1.12.0] - 2022-10-11
Added
Expandable component.
Icon now have a Rotate property.
Footer link columns flex can now be set manually.
Changed
Cards are now blocks.
Bugfix
Disabled tertiary underline is removed.
Button groups now make sure slotted items get correct margin.
[1.11.1] - 2022-10-04
Bugfix
Tables styles now affect class="ids-table" and not other tables
[1.11.0] - 2022-10-03
Added
Button gets two new properties: tertiary and size.
Header responsiveness can now be turned off with new unresponsive property.
Changed
Reintroduced the speech bubble effect on 1177 error messages.
Bugfix
1177 header avatar box should now have correct fade and width restrictions.
Button groups now centers buttons.
[1.10.0] - 2022-09-26
Added
Agent component.
Alert Global component now have an action slot.
Alert Global component now have a hide-mobile-icon property. Hiding the icon on medium and
small.
no-validation property introduced to form components. Preventing internal validation to
execute.
More util classes for small and medium screens.
Changed
Dialog now has better support for screen readers. Introducing the srclosetext property and
more internal changes.
Dialog now locks focus between supplied elements.
Bugfix
Tabs with icons should now have correct height.
[1.9.1] - 2022-09-20
Added
Errormessages is now visible if valid="false" on default
Bugfix
Select now has correct error styling
[1.9.0] - 2022-09-19
1.9.0 introduces many changes. Grids will now support more breakpoints. Button, header and textareas
can now fill entire width. Textareas and Inputs can now, just like checkboxes, render an invalid
state by default.
The biggest change comes to the @inera/ids-react implementation where textarea, input now
requires labels and form elements to be provided.
Added
New padding classes.
Grid ids-col now support two new breakpoints m (1024px) and s (640px).
Grid ids-col now support offset, m-offset and s-offset.
Button m-block and s-block will give more control over new prop block.
Header now supports fluid in order to fill entire width.
Textareas now support custom width.
Textareas and Input can render invalid as default.
Changed
Grid ids-col no longer support mobile. But instead uses m.
Button responsive is now replaced by block.
Bugfix
Textarea fade should now align to bottom.
[1.8.0] - 2022-09-13
Added
Card component.
Dialog component.
Including:
Dialog-actions component.
Button now have a new responsive property.
New icons: id-card-locked, copy-file.
[1.7.1] - 2022-08-31
Bugfix
Grouped checkboxes now has styling on invalid.
[1.7.0] - 2022-08-30
Added
Table component.
Radio buttons and checkboxes are now styled when invalid.
Checkboxes can be set to valid="false" per default.
Bugfix
Autofocus should now work as intended.
Changed
1177-pro header brand/unit texts are now correct tags and sizes.
[1.6.0] - 2022-08-19
Added
Breadcrumbs component.
h1 small Typography.
[1.5.1] - 2022-06-30
Added
Header (1177-pro) now accepts a brandtexttop and brandtextbottom property.
[1.5.0] - 2022-06-22
Added
Date label component.
List component.
Changed
Notification badge no longer support types.
Bugfix
Links should now render correctly in Angular.
[1.4.0] - 2022-06-08
Added
Tab component.
Changed
Input icons should now be placed in center of inputs.
[1.3.0] - 2022-05-31
Added
New 1177 profession theme.
New Inera admin theme.
Header component.
Including:
Header avatar component.
Header item component.
Header navigation component.
Header navigation mobile item component.
Header mobile menu component.
Footer component.
Link component.
Mobile menu component.
Including:
Mobile menu item component.
Mobile menu avatar component.
Notification-badge component.
Columns now support an offset value.
Changed
Button component emits own clicked event.
Date picker popup now has thematic colors.
Grid container have x-padding and gutterless property.
Size 'xs' on icons are now 14px instead of 15px.
[1.2.1] - 2022-03-15
Bugfix
Missing style error fixed.
[1.2.0] - 2022-03-15
Added
Container component.
Alert global component.
Icon component.
Changed
Chevron icon name change to chevron-bold.
Alert headline now supplied by supplying a h3. No longer by property.
Alert component close button now has configurable text
Alert component now accepts title for the icon.
All icons are now aria-hidden by default.
Bugfix
Button tabindex now being set earlier in lifecycle
Screen readers now read Alert headlines.
[1.1.1] - 2022-02-09
Bugfix
Input base bugfix (Angular bug)
[1.1.0] - 2022-02-09
Added
Row and column component.
Alert component.
Util classes.
Changed
Button component now have class indicating it's status. (Required for React)
Button component clicks self on 'Enter' and 'Space'
Button group component is now separated from button.