@engie-group/fluid-design-system
Version:
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
1,761 lines (1,196 loc) • 121 kB
Markdown
# Changelog
All notable changes to Fluid Design System will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
## 📦 6.2.0 - 2026-05-11
### ⚠️ Breaking changes
###### [GLOBAL]
- Replace `.material-icons` CSS selectors with `.nj-icon-material` in component stylesheets. Consumers using `.material-icons` as a selector for nested icons must update to `.nj-icon-material`.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@6.2.0
## 📦 6.1.2 - 2026-04-30
### 🐛 Fixed
###### [SIDEBAR-DEPRECATED]
- Fix logo not being properly centered in the brand section
## 📦 6.1.1 - 2026-04-29
### 🐛 Fixed
###### [CARD]
- Replace undefined `--nj-semantic-color-text-body` CSS token with valid `--nj-semantic-color-text-neutral-primary-default` token
###### [SELECT, MULTI-SELECT]
- Fix label color on hover: label now stays at its default color instead of switching to secondary.
- Fix label color when focused (closed): label correctly turns secondary.
- Fix label and border color when open: label and border now use the brand color for floating labels.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@6.1.1
## 📦 6.1.0 - 2026-04-01
### ⚠️ Breaking changes
###### [AVATAR-LIST]
- Update avatar list item structure to use a dedicated `nj-avatar-list__avatar` class.
```html
<!-- Before -->
<div class="nj-avatar-list">
<div class="nj-avatar">AL</div>
<div class="nj-avatar">BM</div>
<div class="nj-avatar">CD</div>
</div>
<!-- After -->
<div class="nj-avatar-list">
<div class="nj-avatar-list__avatar nj-avatar">AL</div>
<div class="nj-avatar-list__avatar nj-avatar">BM</div>
<div class="nj-avatar-list__avatar nj-avatar">CD</div>
</div>
```
###### [BREADCRUMB]
- Separate breadcrumb item style class (`nj-breadcrumb-item`) in two classes:
- `nj-breadcrumb__item` for positioning and breadcrumb specific styles (e.g., separator)
- `nj-breadcrumb-item` for the breadcrumb item itself, which is used to apply styles to both the root and link elements of the breadcrumb item
- Rename breadcrumb item link CSS class from `nj-breadcrumb__link` to `nj-breadcrumb-item__link`
- Split breadcrumb root and breadcrumb item styles into dedicated style modules
Migration:
```html
<!-- Before -->
<li class="nj-breadcrumb__item">
<a class="nj-breadcrumb__link">...</a>
</li>
<!-- After -->
<li class="nj-breadcrumb__item nj-breadcrumb-item">
<a class="nj-breadcrumb-item__link">...</a>
</li>
```
###### [PROGRESS]
- The DOM structure of the progress component has changed. The `nj-progress__bar` and `nj-progress__description` elements must now be wrapped in a new `nj-progress__container` element. The description element also changed from `<div>` to `<p>`.
- The bottom description is no longer centered below the bar — it is now left-aligned.
```html
<!-- Before -->
<div
class="nj-progress"
role="progressbar"
aria-label="Progress"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
>
<div class="nj-progress__bar">
<div class="nj-progress__indicator" style="width: 50%"></div>
</div>
<div class="nj-progress__description">50%</div>
</div>
<!-- After -->
<div
class="nj-progress"
role="progressbar"
aria-label="Progress"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
aria-valuetext="50%"
>
<div class="nj-progress__container">
<div class="nj-progress__bar">
<div class="nj-progress__indicator" style="width: 50%"></div>
</div>
<p aria-hidden="true" class="nj-progress__description">50%</p>
</div>
</div>
```
### 🚀 Added
###### [PROGRESS]
- Add `nj-progress__header` element containing a `nj-progress__label` (`<label>`) and an optional `nj-progress__subscript` (`<p>`) to display a visible label and status text above the progress bar
- Add `nj-progress--{variant}` modifier to set the bar color (`information`, `success`, `error`)
- Add `nj-progress--subscript-{variant}` modifier to set the subscript color and icon (`information`, `success`, `error`)
```html
<div class="nj-progress nj-progress--success nj-progress--subscript-success" role="progressbar" ...>
<div class="nj-progress__header">
<label class="nj-progress__label">Upload complete</label>
<p class="nj-progress__subscript">
<span class="material-icons nj-icon-material nj-icon-material--sm" aria-hidden="true">check</span>
File uploaded successfully
</p>
</div>
<div class="nj-progress__container">
<div class="nj-progress__bar">
<div class="nj-progress__indicator" style="width: 100%"></div>
</div>
</div>
</div>
```
###### [RADIO]
- Apply correct spacing for error message in `.nj-radio-group` component.
- Add `scale` support to radio groups with `md`, `lg`, and `xl` values.
- Update spacing for radio groups based on the selected `scale` value.
- Change border color of radio component from strong to moderate
## 📦 6.0.1 - 2026-02-05
### 🚀 Added
###### [BADGE]
- Add icon to breadcrumb component item when active
###### [BREADCRUMB]
- A `nj-breadcrumb__link` CSS class has been added to style the breadcrumb item link. Link scale and variant CSS class still work but prefer using this class insteed.
```html
//Before
<ol class="nj-breadcrumb">
<li class="nj-breadcrumb__item">
<a href="#" class="nj-link nj-link--sm nj-link--grayed nj-link-icon">
<span aria-hidden="true" class="nj-icon-material">home</span>
<span class="nj-sr-only">Home</span>
</a>
</li>
</ol>
//After
<ol class="nj-breadcrumb">
<li class="nj-breadcrumb__item">
<a href="#" class="nj-link nj-link-icon nj-breadcrumb__link">
<span aria-hidden="true" class="nj-icon-material">home</span>
<span class="nj-sr-only">Home</span>
</a>
</li>
</ol>
```
###### [ICON]
- Add variant `yellow-tertiary`
- Add `engie_ai_filled` icon
###### [STATUS-INDICATOR]
- Component now uses material icons instead of custom SVGs.
- Component `ai` status now uses `engie_ai_filled` icon for better visibility and constistency.
### 🐛 Fixed
###### [NAVIGATION, TAB]
- Fix tabs incorrectly displaying selected state when `aria-selected="false"`
- Fix disabled styles incorrectly applied when `aria-disabled="false"`
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@6.1.0
## 📦 6.0.0 - 2025-12-10
Major release of `Fluid 6`.
All changes since `5.18.2` can be found above in details and are summarized in [the migration guide](https://fluid.design.digital.engie.com/fluid-design-system/storybook/vanilla/index.html?path=/docs/docs-migrations-v5-to-v6--documentation).
### ⚠️ Breaking changes
###### [GLOBAL]
- Remove `Fluid 4` deprecated components:
- Remove `.nj-alert` component.
- Remove `.nj-dropdown` component.
- Remove all `nj-form-*` component, except `nj-form-item` which is a `Fluid 5` component.
- Remove `.nj-icon` component.
- Remove `.nj-switch` component.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@6.0.0
## 📦 6.0.0-rc.0 - 2025-12-09
### ⚠️ Breaking changes
###### [GLOBAL]
- All icons in Fluid no longer needs the class `material-icons` use the `nj-icon-material` class instead.
Make sure to replace all occurrences of `material-icons` by `nj-icon-material` in your codebase.
```html
<!-- Before -->
<span aria-hidden="true" class="material-icons nj-icon-material">home</span>
<!-- After -->
<span aria-hidden="true" class="nj-icon-material">home</span>
```
### 🚀 Added
###### [BADGE]
- Change badge icon color when it has `warning` variant and `minimal` emphasis to `--nj-semantic-color-icon-status-warning-contrast-default` design token for a better contrast.
- Change badge vertical spacing:
- `6px` to `4px` for `md` scale
- `9px` to `6px` for `lg` scale
###### [SEGMENTED_CONTROL]
- Add a new modifier class `nj-segmented-control-btn--icon-only` for `nj-segmented-control-btn` which reduce padding to icon-only buttons.
### 🐛 Fixed
###### [BADGE]
- Fix badge border-radius to ensure a correct pill shape regardless of the badge scale.
###### [FORM-ITEM]
- Form item trailing icons are now vertically centered
###### [TOAST]
- Fixed icon alignment in Toast component. Ensured that the icon is properly centered vertically within the Toast with respect to the text content.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.13.1-rc.0
## 📦 6.0.0-next.11 - 2025-11-13
### ⚠️ Breaking changes
###### [AVATAR]
- Remove `nj-avatar` background for picture avatars.
###### [BADGE]
- The badge component no longer controls custom icon sizes. Custom icon sizes must now be defined directly in the custom icon definition itself.
Use the `--nj-material-icon-size` CSS custom property to set the icon size.
Example of setting a custom icon size using this CSS custom property:
```html
<svg
aria-hidden="true"
focusable="false"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
style={{
width: 'var(--nj-material-icon-size)',
height: 'var(--nj-material-icon-size)',
stroke: 'var(--nj-material-icon-color)',
fill: 'none'
}}
>
<path d="M10.5 5.5V6.5H9.5V5.5H10.5ZM10.5 9.5V14.5H9.5V9.5H10.5ZM0.5 10C0.5 4.75614 4.75614 0.5 10 0.5C15.2439 0.5 19.5 4.75614 19.5 10C19.5 15.2439 15.2439 19.5 10 19.5C4.75614 19.5 0.5 15.2439 0.5 10ZM1.5 10C1.5 14.6861 5.31386 18.5 10 18.5C14.6861 18.5 18.5 14.6861 18.5 10C18.5 5.31386 14.6861 1.5 10 1.5C5.31386 1.5 1.5 5.31386 1.5 10Z" />
</svg>
```
###### [MODAL]
- The `.nj-modal` CSS class has been deprecated.
- Consider using the new `nj-modal` web component instead.
- Change the `.nj-modal` CSS class (and sub classes) to `.nj-modal-deprecated` to continue using the deprecated styles.
For example, change:
```html
<div class="nj-modal" id="completeModal" role="alertDialog" aria-labelledby="completeModalLabel">
<div class="nj-modal__dialog" role="document">
<div class="nj-modal__content">
<div class="nj-modal__header">
<h1 class="nj-modal__title" id="completeModalLabel">Confirm these settings?</h1>
<button
type="button"
class="nj-icon-btn nj-icon-btn--sm nj-icon-btn--secondary nj-modal__close"
data-dismiss="modal"
aria-label="Close"
>
<span class="nj-sr-only">Close the modal</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>
</div>
<div class="nj-modal__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
</p>
</div>
<div class="nj-modal__footer">
<button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
<button type="button" class="nj-btn">Confirm</button>
</div>
</div>
</div>
</div>
```
to:
```html
<div class="nj-modal-deprecated" id="completeModal" role="alertDialog" aria-labelledby="completeModalLabel">
<div class="nj-modal-deprecated__dialog" role="document">
<div class="nj-modal-deprecated__content">
<div class="nj-modal-deprecated__header">
<h1 class="nj-modal-deprecated__title" id="completeModalLabel">Confirm these settings?</h1>
<button
type="button"
class="nj-icon-btn nj-icon-btn--sm nj-icon-btn--secondary nj-modal-deprecated__close"
data-dismiss="modal"
aria-label="Close"
>
<span class="nj-sr-only">Close the modal</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>
</div>
<div class="nj-modal-deprecated__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
</p>
</div>
<div class="nj-modal-deprecated__footer">
<button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
<button type="button" class="nj-btn">Confirm</button>
</div>
</div>
</div>
</div>
```
###### [TAG]
- `nj-tag__link` and `nj-tag__button` classes have been changed to `nj-tag__action` to standardize styling for interactive elements within `nj-tag`.
```html
<!-- Before -->
<div class="nj-tag">
<a href="#" class="nj-tag__link">lime</a>
</div>
<!-- or -->
<div class="nj-tag">
<button onclick="#" class="nj-tag__button">lime</button>
</div>
<!-- Now -->
<div class="nj-tag">
<a href="#" class="nj-tag__action">lime</a>
</div>
<!-- or -->
<div class="nj-tag">
<button onclick="#" class="nj-tag__action">lime</button>
</div>
```
### 🚀 Added
###### [GLOBAL]
- Font used in components are now embedded directly in CSS file (Lato, Material Icons, Roboto Mono). They should no longer be imported externally.
###### [AVATAR-LIST]
- Avatar list's scale now propagates to the children avatars by CSS.
If you set a scale to avatar list, all avatars will be scaled accordingly.
You can still set a specific scale to an avatar to override the inherited one.
###### [ICON]
- Refactor icon style to use CSS custom properties for style override by parent components
###### [SKELETON]
- Add skeleton circle scales `2xl` and `3xl`
- Update skeleton circle scale :
- `sm`: 32px
- `md`: 40px
- `lg`: 48px
- `xl`: 56px
- `2xl`: 64px
- `3xl`: 96px
- Default skeleton circle scale is now `lg`
###### [TAG]
- Add `xl` scale to tag component
## 📦 6.0.0-next.10 - 2025-07-12
### ⚠️ Breaking changes
###### [MENU-GROUP]
- A parent container with `nj-menu-group` class is now required to define a menu group.
The `nj-menu-group` class should be applied to a parent element that contains the menu items and the menu group header.
- Use `nj-menu-group__header` class to define the header of a menu group.
### 🐛 Fixed
###### [LIST]
- Update list item content font size design token, from `--nj-semantic-font-size-text-sm` to `--nj-semantic-font-size-text-md`
## 📦 6.0.0-next.9 - 2025-06-23
### ⚠️ Breaking changes
###### [HEADER]
- Deprecate `nj-header` component which has been deprecated in design.
- Please rename all CSS classes from `nj-header*` to `nj-header-deprecated*` to handle change.
###### [LIST-ITEM]
- The list item DOM structure has changed, please refer to the documentation for more details.
- Main change is that the list item is no longer a BEM block, but a BEM element of the `list` component.
```html
<!-- Before -->
<ul class="nj-list">
<li class="nj-list-item nj-list__item">
<button class="nj-list__item-wrapper">
<span aria-hidden="true" class="material-icons nj-icon-material nj-list-item__leading">navigation</span>
<span class="nj-list-item__content">Simple list item</span>
<p class="nj-badge nj-list-item__trailing">1</p>
</button>
</li>
</ul>
<!-- Now -->
<ul class="nj-list">
<li class="nj-list__item">
<button class="nj-list__item-wrapper">
<span aria-hidden="true" class="material-icons nj-icon-material nj-list__item-leading">settings</span>
<div class="nj-list__item-content">
<span class="nj-list__item-primary">Simple list item</span>
</div>
<p class="nj-badge nj-list__item-trailing">1</p>
</button>
</li>
</ul>
```
### 🚀 Added
###### [LIST-ITEM]
- List item can now have a secondary content. It must be in a `nj-list__item-secondary` container in the `nj-list__item-content` container
## 📦 6.0.0-next.8 - 2025-04-16
### 🐛 Fixed
###### [AVATAR]
- Fix badge default variant, from `neutral` to `information`
###### [INLINE-MESSAGE]
- Fix `information` variant not working properly
## 📦 6.0.0-next.7 - 2025-04-09
### ⚠️ Breaking changes
###### [HEADING]
- Reduce font size of scales `lg` and `xl`. To keep previous sizes, use instead, respectively: heading `xl` and display `md`
- Remove `2xl` scale property value. Use new display component instead
```html
<!-- Before -->
<h1 class="nj-heading nj-heading--2xl">Previous heading 2xl ➡️ doesn't exist anymore</h1>
<h1 class="nj-heading nj-heading--xl">Previous heading xl ➡️ font size reduced</h1>
<h1 class="nj-heading nj-heading--lg">Previous heading lg ➡️ font size reduced</h1>
<!--Now-->
<h1 class="nj-display nj-display--xl">Previous heading 2xl ➡️ Now display xl</h1>
<h1 class="nj-display nj-display--md">Previous heading xl ➡️ Now display md</h1>
<h1 class="nj-heading nj-heading--xl">Previous heading lg ➡️ Now heading xl</h1>
```
### 🚀 Added
###### [DISPLAY]
- Implement display component
###### [HEADING]
- Add `ai` variant which colors the text with Engie's `ai` gradient
### 🐛 Fixed
###### [CHECKBOX]
- Fix checkbox scale `xl` displaying in `md`
###### [SKELETON]
- Fix missing styles used in skeleton component after token update
## 📦 6.0.0-next.6 - 2025-03-21
### ⚠️ Breaking changes
###### [FOOTER]
- Deprecate component which has been deprecated in design.
###### [ICON-BUTTON]
- The default size of the icon button has been changed from `xs` to `sm`.
## 📦 6.0.0-next.5 - 2025-03-04
### 🐛 Fixed
###### [TOGGLE]
- Removed necessity to use `.nj-toggle__track`. Toggle style are now applied directly to the input.
- Fixed toggle not changing state on click when no label in parents
## 📦 6.0.0-next.4 - 2025-02-12
### ⚠️ Breaking changes
###### [AVATAR]
- Updated size midifiers:
- `nj-avatar--md` = `48px` -> `40px`
- `nj-avatar--lg` = `64px` -> `48px`
- `nj-avatar--xl` = `96px` -> `56px`
- New size modifiers:
- `nj-avatar--2xl` -> `64px`
- `nj-avatar--3xl` -> `96px`
###### [LIST]
- List item component has been simplified `nj-list-item--navigation` and `nj-list-item--selection` has been deleted. `nj-list-item__icon` has been deleted, please use `nj-list-item__leading` instead.
###### [SIDEBAR]
- Sidebar component has been deprecated. You can switch all occurences of `nj-sidebar*` classes to `nj-sidebar-deprecated*` to limit impact. We highly recommend to switch to the updated `nj-sidebar` component.
###### [SIDEPANEL-LAYOUT]
- `nj-sidepanel-layout` class has been deleted as it was not aligned with the library philosophy. Fluid doesn't aim to provide layout components.
```html
<!-- Before -->
<div class="nj-sidepanel-layout">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="nj-sidepanel-layout__sidepanel">Panel</div>
</div>
<!-- After (example) -->
<div style="display: flex;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div>Panel</div>
</div>
```
### 🚀 Added
###### [GLOBAL]
- Added new responsive token for typescale: `--nj-semantic-font-size-text-xx`, `--nj-semantic-font-size-heading-xx`, `--nj-semantic-line-height-text-xx` & `--nj-semantic-line-height-heading-xx` tokens. They replace usage of specific desktop and mobile versions. They value change depending on the screen size.
###### [INLINE-MESSAGE]
- Add new `scale` modifier `nj-inline-message--{scale}`
- `nj-inline-message--sm`
- `nj-inline-message--md (default)`
###### [SIDEBAR]
- Sidebar component has been revamped to facilitate usage. Please check the documentation
## 📦 6.0.0-next.3 - 2024-12-09
### ⚠️ Breaking changes
###### [SPINNER]
- Update `scale` value from `xxs` to `2xs`
```html
<!-- Before -->
<div aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--xxs">
<p class="nj-sr-only">Loading...</p>
</div>
<!-- Now -->
<div aria-live="polite" aria-atomic="true" class="nj-spinner nj-spinner--2xs">
<p class="nj-sr-only">Loading...</p>
</div>
```
### 🚀 Added
###### [BADGE]
- Add new `ai` modifier for generative AI context.
###### [BUTTON]
- Add new `ai` modifier for generative AI context.
###### [ICON]
- Add new color values for the `variant` prop: `ai`, `*-contrast`. See component doc for an exhaustive list.
- Update icon sizes for a better consistency with design.
- Add a new icon `engie_ai` in the icon library. This icon is Engie specific and is used to represent the Gen AI. To use it, you need to add a specific class to the icon element (`nj-icon-material--engie`).
```html
<span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--engie">engie_ai</span>
```
###### [SPINNER]
- Add new `ai` modifier for generative AI context.
###### [STATUS-INDICATOR]
- Add new `ai` modifier for generative AI context.
###### [TOGGLE]
- Add new `ai` modifier for generative AI context.
## 📦 6.0.0-next.2 - 2024-11-06
### ⚠️ Breaking changes
###### [INLINE-MESSAGE]
- Replace the `<p>` by a `<div>` for the `nj-inline-message__body` element:
```html
<!-- OLD -->
<p class="nj-inline-message__body">Message description</p>
<!-- NEW -->
<div class="nj-inline-message__body">Message description</div>
```
- Remove the title, the inline-message now only accepts a content (can be multiline, with some bold elements etc ...). You can use the new `nj-heading` and `nj-text` components to style it however you want.
```html
<!-- OLD -->
<div class="nj-inline-message__content">
<h4 class="nj-inline-message__title">Title <b>error</b> Message</h4>
<p class="nj-inline-message__body">Message description</p>
</div>
<!-- NEW: remove the `nj-inline-message__title` element like so: -->
<div class="nj-inline-message__content">
<div class="nj-inline-message__body">
<p class="nj-text">Message description</p>
</div>
</div>
```
### 🚀 Added
###### [INLINE-MESSAGE]
- Add a new `action` element, in which you can specify an action (for example, a link "Learn more" or "Undo action"):
```html
<div class="nj-inline-message__content">
<div class="nj-inline-message__body">...</div>
<!-- New action slot: -->
<div class="nj-inline-message__action">
<a class="nj-link nj-link--high-contrast">Undo action</a>
</div>
</div>
```
- You can also specify the action placement through the `nj-inline-message--action-placement-right` modifier:
```html
<div class="nj-inline-message nj-inline-message--action-placement-right">
...
<div class="nj-inline-message__content">
<div class="nj-inline-message__body">...</div>
<div class="nj-inline-message__action">
<a class="nj-link nj-link--high-contrast">Undo action</a>
</div>
</div>
</div>
```
### 🐛 Fixed
###### [STATUS-INDICATOR]
- Update status indicator sizes to account for borders. Status indicators sizes are now 2px smaller:
- `sm`: 14px -> 12px,
- `md`: 18px -> 16px,
- `lg`: 26px -> 24px
## 📦 6.0.0-next.1 - 2024-10-07
### 🛠️ Maintained
- Update codebase with last current version
## 📦 6.0.0-next.0 - 2024-10-04
### 🚀 Added
###### [HEADING]
- Added a new `nj-heading` component to the design system
`nj-heading` are used for page titles or subheadings to introduce content.
They are designed to contrast with body content, enhancing visual hierarchy and helping readers easily understand the content structure.
```html
<h4 class="nj-heading nj-heading--md nj-heading--primary">Hello World</h4>
```
###### [TEXT]
- Added a new `nj-text` component to the design system
`nj-text` component is used for the main content, typically following headings. It serves as detailed descriptions and messages but can also stand alone in components.
It comes with different sizes and variants to adapt to the context.
```html
<p class="nj-text nj-text--md nj-text--primary">Hello World</p>
```
## 📦 5.18.2 - 2025-11-13
### 🐛 Fixed
###### [TAB]
- Fix `font-family` for `Tab` component to match the design specifications.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.13.0
## 📦 5.18.1 - 2025-07-11
### 🐛 Fixed
###### [PAGINATION]
- Current item is not interactive anymore. It was not intended to be interactive.
## 📦 5.18.0 - 2025-06-23
### ⚠️ Breaking changes
###### [ICON]
- Change the `xxl` size modifier to `2xl` to match the design system's naming convention.
- Update your code accordingly if you are using the `xxl` size modifier.
```html
<!-- From -->
<span class="nj-icon-material nj-icon-material--xxl">...</span>
<!-- To -->
<span class="nj-icon-material nj-icon-material--2xl">...</span>
```
## 📦 5.17.2 - 2025-04-07
### 🐛 Fixed
###### [SKELETON]
- Fix styles used in skeleton components after token update
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.12.0
## 📦 5.17.1 - 2025-02-12
### 🐛 Fixed
###### [SEGMENTED-CONTROL]
- Animation has been removed to be aligned with design directions
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.11.0
## 📦 5.17.0 - 2024-12-06
### ⚠️ Breaking changes
###### [SELECT]
- Implement the new list for the select options update your select occurrences.
`SelectInput.init()` will no longer work with a deprecated list.
```html
<!-- Before -->
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
...
<ul
class="nj-form-item__list nj-list-deprecated nj-list-deprecated--no-border nj-list-deprecated--sm"
role="listbox"
hidden
aria-label="Example"
tabindex="-1"
>
<li
class="nj-list-deprecated__item nj-list-deprecated__item--clickable"
role="option"
tabindex="-1"
aria-selected="false"
data-value="option-1"
>
Option 1
</li>
...
</ul>
</div>
</div>
<!-- Now -->
<div class="nj-form-item nj-form-item--select nj-form-item--custom-list">
<div class="nj-form-item__field-wrapper">
...
<ul class="nj-form-item__list nj-list" role="listbox" hidden aria-label="Example" tabindex="-1">
<li
class="nj-list__item nj-list__item--interactive"
role="option"
tabindex="-1"
aria-selected="false"
data-value="option-1"
>
Option 1
</li>
...
</ul>
</div>
</div>
```
### 🐛 Fixed
###### [SEARCH]
- Add background color to search input
###### [SELECT]
- Fix select options focus not working properly on webkit browsers (Safari).
### 🛠️ Maintained
- Remove engine property from package.json file which was causing install warning.
- Updated dependency
- @engie-group/fluid-design-tokens@5.10.0
## 📦 5.16.2 - 2024-10-07
### 🐛 Fixed
###### [ALERT & TAG]
- Update font size with the new font size tokens
## 📦 5.16.1 - 2024-10-03
### 🚀 Added
###### [GLOBAL]
- Update font family to `Roboto Mono` for monospace. Please import this font in your project
```diff
- href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap"
+ href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap"
```
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.9.0
## 📦 5.16.0 - 2024-10-02
### ⚠️ Breaking changes
###### [PROGRESS]
- Renamed `nj-progress` to `nj-progress-deprecated` and create a new component `nj-progress` instead
```html
<!--From -->
<div class="nj-progress">
<div
class="nj-progress__bar"
role="progressbar"
aria-label="Label of progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
<span class="nj-sr-only">25%</span>
</div>
</div>
<!--To-->
<div class="nj-progress-deprecated">
<div
class="nj-progress-deprecated__bar"
role="progressbar"
aria-label="Label of progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
<span class="nj-sr-only">25%</span>
</div>
</div>
<!--Or with new progress component-->
<div
class="nj-progress"
role="progressbar"
aria-label="Label of progressbar"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
<div class="nj-progress__bar">
<div class="nj-progress__indicator" style="width: 25%"></div>
</div>
</div>
```
### 🚀 Added
###### [BUTTON]
- Add a new modifier for loading state `nj-btn--is-loading` to display the button with a spinner.
Make sure to add the spinner component inside the button.
```html
<button class="nj-btn nj-btn--is-loading" type="button">
<div class="nj-spinner " aria-live="polite" aria-atomic="true">
<p class="nj-sr-only">Loading...</p>
</div>
</button>
```
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.8.2
## 📦 5.15.4 - 2024-09-13
### 🐛 Fixed
###### [FORM-CONTROL]
- Update styles of all form controls due to rendering issue.
###### [SPINNER]
- Update styles of the spinner component to fix a rendering bug.
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.8.1
## 📦 5.15.3 - 2024-09-11
### 🐛 Fixed
###### [FOOTER]
- Footer style is now displayed correctly
## 📦 5.15.2 - 2024-09-08
### 🐛 Fixed
###### [AVATAR]
- Avatar default icon is now correctly rendered.
###### [STATUS-INDICATOR]
- Status indicator badge is now correctly rendered
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.8.0
## 📦 5.15.1 - 2024-09-06
### 🛠️ Maintained
- Remove unpublished dependency
- Update URLs in README.md
## 📦 5.15.0 - 2024-09-06
### ⚠️ Breaking changes
###### [GLOBAL]
- Build has been reworked to fix some major issues and facilitate future development.
We strongly recommend consulting the Getting started documentation to update your project.
- The main changes are based on how you will have to import CSS in your project. If you encounter any issues, please come back to us.
```html
<!-- tokens.css = Styles to import tokens needed by components -->
<link
href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css"
rel="stylesheet"
/>
<!-- fluid-design-system.css = Styles of all components -->
<link
href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/fluid-design-system.css"
rel="stylesheet"
/>
```
or in your JavaScript entry file :
```javascript
import '@engie-group/fluid-design-tokens/css';
import '@engie-group/fluid-design-system/css';
```
###### [TAG]
- Tag's icon's style is now applied to the class `nj-icon-material` instead of `material-icons`.
Make sur that the `nj-icon-material` class is correctly applied to your icon.
```html
<div class="nj-tag">
<a href="#" class="nj-tag__link">tag</a>
<span aria-hidden="true" class="nj-tag__icon material-icons">check</span>
<button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--2xs">
<span class="nj-sr-only">Remove tag XXX</span>
<span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>
</div>
<!-- Becomes -->
<div class="nj-tag">
<a href="#" class="nj-tag__link">tag</a>
<span aria-hidden="true" class="nj-tag__icon nj-icon-material material-icons">check</span>
<button type="button" class="nj-tag__close nj-icon-btn nj-icon-btn--2xs">
<span class="nj-sr-only">Remove tag XXX</span>
<span aria-hidden="true" class="nj-icon-btn__icon nj-icon-material material-icons">close</span>
</button>
</div>
```
### 🐛 Fixed
###### [TAG]
- Fix the display of the focus ring when `nj-tag` is clickable
## 📦 5.14.0 - 2024-08-23
### ⚠️ Breaking changes
###### [BREADCRUMB]
- Remove default margin (32px) and padding (4px). Your layout can be affected by this change, you can add them back if needed (values provided at the start).
## 📦 5.13.0 - 2024-07-16
### 🚀 Added
###### [MENU]
- Add separator to `nj-menu` component with hr HTML element.
- Add a `nj-menu--full-width` modifier to take parent full-width.
###### [MENU-GROUP]
- Add a `nj-menu-group` component to group menu items.
### 🐛 Fixed
###### [LIST]
- Solves accessibility issues regarding the focus state
## 📦 5.12.1 - 2024-07-09
### 🐛 Fixed
###### [FORM-ITEM]
- Ensure the `nj-form-item--textarea` uses the correct font (sans-serif)
### 🛠️ Maintained
- Updated dependencies
- @engie-group/fluid-design-tokens@5.7.2
## 📦 5.12.0 - 2024-06-04
### ⚠️ Breaking changes
###### [FOOTER]
- Update footer styles and html structure.
###### [ICON-BUTTON]
- We added new sizes and update existing ones:
- `2xs`: height `16px`
- `xs`: height `24px` (new default)
- `sm`: height `32px` (old 16px)
- `md`: height `40px` (old default, 24px)
- `lg`: height `48px` (old 32px)
- `xl`: height `56px`
```html
<!-- To apply those changes, search and replace the following: -->
<button class="... nj-icon-button--sm">...</button> -> <button class="... nj-icon-button--2xs">...</button>
<button class="... nj-icon-button--lg">...</button> -> <button class="... nj-icon-button--sm"></button>
```
###### [RADIO-GROUP]
- Remove the `has-danger` class (used to force error styles). Instead, use the new `nj-radio-group--has-error` modifier.
### 🚀 Added
###### [ACCORDION]
- Implement a new `nj-accordion` component
```html
<div class="nj-accordion">
<details class="nj-accordion-item">
<summary>
<span class="nj-accordion-item__label">Header</span>
<span aria-hidden="true" class="material-icons nj-icon-material nj-accordion-item__toggle">expand_more</span>
</summary>
<p class="nj-accordion-item__content">Fatalis advena absolute promissios rumor est.</p>
</details>
</div>
```
###### [AUTOCOMPLETE]
- Add a `success` variant
###### [CHECKBOX]
- Add a `success` variant:
use the `nj-checkbox--success` modifier and add the `nj-checkbox__subscript` element with an `id` linking to the input through a
`aria-describedby`.
- Add a `subcript` variant to pass a hint message. Use the `nj-checkbox__subscript` element with an `id` linking to the input through a
`aria-describedby`.
###### [FORM-ITEM]
- Add a `success` variant
###### [RADIO]
- Add two new `nj-radio` sizes:
- `nj-radio--lg` 24px
- `nj-radio--xl` 32px
- Add a `required` radio-group example.
- Add a `.nj-radio--no-animation` modifier to remove the transition animation.
###### [SELECT]
- Add a `success` variant
###### [TEXTAREA]
- Add a `success` variant
###### [CHECKBOX]
- Add a simple structure for a checkbox without label
```html
<!-- only checkbox, without label -->
<input type="checkbox" id="checkbox-id" class="nj-checkbox" checked />
<!-- or with label -->
<div class="nj-checkbox">
<label for="checkbox-id">
<input type="checkbox" id="checkbox-id" checked />
<span class="nj-checkbox__label">Basic checkbox</span>
</label>
</div>
```
### 🖍 Changed
###### [CHECKBOX]
- We updated how the `nj-checkbox` error state can be implemented. Use the `nj-checkbox--error` modifier and replace the
`nj-checkbox__error` element by a `nj-checkbox__subscript`.
###### [RADIO]
- Update default `nj-radio` size from 20px to 16px.
- Improve `nj-radio-group` error message
## 📦 5.11.0 - 2024-05-07
### ⚠️ Breaking changes
###### [TOOLTIP]
- Rework of the tooltip to be based on a `Tooltip` class exposing methods to update tooltip state.
- `updateTooltipContent()`, `updateTooltipModifiers()` functions have been deleted in favor of the new `setContent()`and `updateOptions()` class methods
- `createTooltipElement()` function has been deleted
- Signatures of `njTooltip` and `initAllTooltips` functions have been updated to return `Tooltip` instances.
Read documentation for further information.
### 🚀 Added
###### [BADGE]
- Add a new `small` size variation (18px) with the `nj-badge--sm` modifier.
###### [MENU]
- Add a `nj-menu` component.
- Implements `openMenu()` function to open a floating menu
```javascript
openMenu(anchor, content, document.body, { placement: 'bottom-end' });
```
###### [TOOLTIP]
- Implement [#1052](https://github.com/FluidDesignSystem/fluid-design-system/issues/1052) feature,
You can now show or hide a tooltip with its corresponding `Tooltip` methods.
- Implement function `displayTooltipOnHoverAndFocus` to attach listeners to focus and hover events to display a tooltip.
```javascript
const tooltip = njTooltip(anchor, content, options);
// If you want to manually display and hide the tooltip
tooltip.show();
tooltip.hide();
// If you want the tooltip to be displayed automatically on hover and focus
const unmount = displayTooltipOnHoverAndFocus(tooltip);
// Call the returned function when you want to remove event listeners
unmount();
```
### 🖍 Changed
###### [BADGE]
- Increase the size of the default badge size, from `20px` to `24px`.
###### [TOGGLE]
- Update default `nj-toggle` label font size from 14px to 16px
## 📦 5.10.2 - 2024-04-18
### 🐛 Fixed
###### [BUTTON]
- Fix button variants not rendering correctly
###### [CHECKBOX]
- Prevent checkboxes from initializing more than one checkbox
###### [FORM ITEM]
- Enforce text alignment to the start
## 📦 5.10.1 - 2024-04-12
### ⚠️ Breaking changes
###### [LIST]
- Rename variant `.nj-list__item--clickable` to `.nj-list__item--interactive`
### 🐛 Fixed
###### [GLOBAL]
- Fix border colors on `nj-inline-message`s, `nj-badge`s and `nj-tag`s color variants
## 📦 5.10.0 - 2024-04-12
### ⚠️ Breaking changes
###### [BUTTON]
- Add new `nj-btn--lg` size modifier. Previous `nj-btn--lg` size is now `nj-btn--xl`. Please update your base code to reflect this change if needed.
```html
<button type="button" class="nj-btn nj-btn--lg "></button> ==> <button type="button" class="nj-btn nj-btn--xl"></button>
```
###### [CHECKBOX]
- To standardize our component sizes and for consistency with the design, we had to make modifications to the checkbox sizes:
- ❌ REMOVED small (14px, `nj-checkbox--sm`), use the normal size instead (16px).
- 🖍 UPDATED default (20px) to 16 px.
- 🖍 UPDATED large (30px, `nj-checkbox--lg`) to 24px.
- 🚀 ADDED new extra-large (`nj-checkbox--xl`) with a size of 32px.
- We also removed the animation, and therefor removed the `.nj-checkbox--no-animation` modifier.
### 🚀 Added
###### [INPUT SEARCH]
- Add an `input-search` component with 2 'variations' :
- basic (only the field)
- with button
###### [LIST]
- Add a `nj-list` up to date with new design changes.
### 🖍 Changed
###### [LIST GROUP]
- `nj-list-group` is now deprecated and renamed to `nj-list-deprecated` classes, prefer using the `nj-list` up to date with the new design changes.
## 📦 5.9.0 - 2024-03-20
### ⚠️ Breaking changes
###### [GLOBAL]
- To accommodate the changes made to the **border radius tokens**, all components border radiuses have been set to the token `--nj-semantic-size-border-radius-none` (in order to not change their appearance).
- Following the changes made to the **border color tokens**, all components border color tokens have been updated to their new nomenclature (adding the `-default` suffix).
###### [FORM ITEM PASSWORD]
- Replaced the password icon variant: from `nj-icon-btn--secondary` modifier to `nj-icon-btn--tertiary` modifier.
```html
<div class="nj-form-item nj-form-item--password">
<div class="nj-form-item__field-wrapper">
<input />
<label />
<button type="button" aria-pressed="false" class="nj-form-item__password-button nj-icon-btn nj-icon-btn--lg ">
<!-- swap secondary for tertiary here -->
<span />
<span />
</button>
<p />
</div>
</div>
```
###### [TOOLTIP]
- Refactor of the tooltip component:
- Migrating from popper.js to FloatingUI library
- Reword of HTML attributes for a better contextualization.
- Better handling of the remaining space to display the tooltip where it fit best (remove placement `auto`).
- Remove the auto initialization of all tooltips on `DOMContentLoaded`, you can now use the built-in `initAllTooltips` function to replicate the behavior.
### 🚀 Added
###### [TAB]
- Add the possibility to include a `nj-badge` inside a `nj-tab__item`.
### 🖍 Changed
###### [FORM ITEM]
- Replaced icon variant from `secondary` to `tertiary`
###### [LINK]
- Update the `hovered`, `focused` and `pressed` colors for the `grayed` and `contextual` link variants.
###### [TAG]
- Update the icon color of the neutral tag to use the new `tertiary` token.
## 📦 5.8.0 - 2024-03-05
### 🚀 Added
###### [CHECKBOX]
- Add new size modifiers
- small: `nj-checkbox--sm`
- large: `nj-checkbox--lg`
- Add new optional asterisk element when input is required: `<span aria-hidden="true" class="nj-checkbox__required">*</span>` (check out the storybooks for a detailed example)
### 🖍 Changed
###### [GLOBAL]
- Update dependencies to support Node >= 20
###### [CHECKBOX]
- Update the way we handle `required` and `error` state.
#### ⚠️ Breaking changes
###### [CHECKBOX]
- Remove `.nj-checkbox--inline` modifier. You can inline elements with the `display: flexbox` CSS property on the parent.
- Remove `.has-danger` class (it was previously used to force errors). Use the `aria-invalid="true"` attribute instead.
- Update the Html structure for the label: we now wrap the text of the label with `.nj-checkbox__label`. We updated the documentation with new examples and explanations, make sure to check it out.
```html
<div class="nj-checkbox">
<label for="checkbox-changelog-example">
<input type="checkbox" id="checkbox-changelog-example" />
<span class="nj-checkbox__label">Checkbox label</span>
<!-- New wrapper for the label text -->
</label>
</div>
```
## 📦 5.7.0 - 2024-01-31
### 🖍 Changed
###### [FAB]
- Replace `nj-fab` scss variables by component css variables (`$fab-size` -> `--nj-component-fab-size-base` and `$fab-size-sm` -> `--nj-component-fab-size-sm`)
###### [SEGMENTED-CONTROL]
- Change events suffix to match with the component, now `*.nj.segmented-control`.
- Better types for `select` method signature, now `select(index: number)`.
### 🚀 Added
###### [BADGE]
- Add `nj-badge__icon` element to add icon in the badge:
```html
<p class="nj-badge">
<span aria-hidden="true" class="nj-badge__icon material-icons">outlined_flag</span>
badge with icon
</p>
```
###### [ICON]
- Add new size `nj-icon-material--xs`
### 🐛 Fixed
###### [AUTOCOMPLETE]
- Fix issue [#900](https://github.com/FluidDesignSystem/fluid-design-system/issues/900),
Rework component to be more accessible, and shows keyboard on mobile.
## 📦 5.6.0 - 2023-12-15
### 🚀 Added
###### [BADGE]
- Add new `nj-badge--planet` semantic color variation
###### [INLINE MESSAGE]
- Add new `nj-inline-message--planet` and `nj-inline-message--discovery` semantic colors variations
###### [SIDEPANEL]
- Add new `.nj-sidepanel` component
- Add new `.nj-sidepanel-layout` wrapper component to attach a sidepanel aside of a content
###### [STATUS INDICATOR]
- Add new `nj-status-indicator--planet` and `nj-status-indicator--discovery` semantic colors variations
### 🖍 Changed
###### [FORM ITEM]
- Change label color when input is filled from `text-neutral-tertiary` to `text-neutral-secondary`
#### ⚠️ Breaking changes
###### [HEADER]
- Update `nj-header` to use latest Fluid components. This component will be updated in the near future to cover a wider scope of usages.
- The `nj-header` now uses contextual `nj-link`s, `nj-icon-button`s and has some basic keyboard accessibility.
- ⚠️ Breaking changes: Make sure to use the updated html structure, some elements changed / were replaced by Fluid components.
###### [ICON]
- Split `.nj-icon-material--inherit` to its color (`.nj-icon-material--color-inherit`) and size (`.nj-icon-material--size-inherit`) variants.
- Update material icons default color.
Icons no longer inherit color from its context by default.
To keep previous behaviour, add modifier `.nj-icon-material--color-inherit`.
- To inherit icon size from context, use `.nj-icon-material--size-inherit`.
###### [INLINE MESSAGE]
- Rename `nj-inline-message--info` to `nj-inline-message--information` to homogenize with the new token names.
###### [STATUS INDICATOR]
- Rename `nj-status-indicator--info` to `nj-status-indicator--information` to homogenize with the new token names.
## 📦 5.5.3 - 2023-10-27
### 🐛 Fixed
###### [STATUS INDICATOR]
- Fix offline status indicator color
## 📦 5.5.2 - 2023-10-23
### 🖍 Changed
- Update tokens dependencies
## 📦 5.5.1 - 2023-10-23
### 🖍 Changed
- Update tokens dependencies
## 📦 5.5.0 - 2023-10-20
### 🖍 Changed
###### [GLOBAL]
- Update tokens to their new nomenclature. It should not affect they way you use Fluid components.
- ⚠️ Breaking changes: If you are using Fluid tokens (for overrides on Fluid components or for custom components), please check out the `fluid-design-tokens`'s changelog. We provide a script to automatically update all tokens.
### 🐛 Fixed
###### [LIST ITEM]
- Fix issue [#368](https://github.com/FluidDesignSystem/fluid-design-system/issues/368),
focus state display the correct colors and focus ring when used with `role='option'` (autocomplete input, select custom, multi-select).
## 📦 5.4.0 - 2023-09-06
### 🚀 Added
###### [MODAL]
- Add new `.nj-modal--fit-viewport` variant, to fix the modal to the viewport area.
### 🖍 Changed
#### ⚠️ Breaking changes
###### [ICON]
- `--nj-material-icon-color` CSS variable is no longer used to set icon color.
###### [MODAL]
- Change of the default modal behaviour: The modal is now attached to its parent container by default, where it was
attached to the viewport area before.
If you want to keep the old behaviour: please add `.nj-modal--fit-viewport` class to the `.nj-modal` element.
- The default modal position is now `absolute` instead of `fixed`.
- Your modal parent anchor should be **positioned** (position `relative`, `absolute`, `fixed` or `sticky`) in order to
the modal to be attached to it.
- The modal parent anchor is the `.nj-modal` parent container if `data-appendto` is not set, or the selected element if
set.
`data-appendto` can take any valid `querySelector` as it uses `element.querySelector`(
see. [Doc](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)) under the hood
e.g: `data-appendto="body"` or `data-appendto="#element_id"`
### 🐛 Fixed
###### [GLOBAL]
- Correctly export the input number component
###### [AUTOCOMPLETE INPUT]
- Fix issue [#791](https://github.com/FluidDesignSystem/fluid-design-system/issues/791),
add possibility to load suggestion dynamically after component loaded
###### [CARD]
- Fix issue [#875](https://github.com/FluidDesignSystem/fluid-design-system/issues/875).
Card gradient bottom border is now visible again.
###### [FORM ITEM]
- Fix issue [#873](https://github.com/FluidDesignSystem/fluid-design-system/issues/873).
The placeholder in the form item is now correctly hidden in Firefox.
###### [ICON]
- Fix issue [#846](https://github.com/FluidDesignSystem/fluid-design-system/issues/846).
Remove the default `color: inherit` and the `--nj-material-icon-color` variable on material icon, so the correct color
is displayed properly.
###### [MODAL]
- Fix issue [#870](https://github.com/FluidDesignSystem/fluid-design-system/issues/870),
storybook's canvas on Firefox behave now like in Chrome browsers.
The backdrop remains in the same container as the modal, even when the modal is attached to another container.
## 📦 5.3.0 - 2023-07-06
### 🚀 Added
###### [ICON]
- Add new `nj-icon-material--tertiary` variant (grey 500).
###### [MULTI SELECT]
- Add styles for multi select component
###### [SKELETON]
- Add new `nj-skeleton` component with 3 available children to mock your data as you need:
- `nj-skeleton__rectangle`
- `nj-skeleton__circle`
- `nj-skeleton__area`
- This component is highly customizable:
- pass a custom width and size:
- Css property: style="max-width: 200px;"
- Css variables: style="--nj-skeleton-width: 24px;"
- pass a custom svg in `nj-skeleton__area`
- ⚠️ Make sure to read the documentation provided, as this component needs a bit of work to fulfill accessibility
standards!
###### [TAG]
- Add size `xs` for tags
### 🐛 Fixed
###### [SELECT]
- Fix issue [#843](https://github.com/FluidDesignSystem/fluid-design-system/issues/843).
When using Windows, the `option` and `otpgroup` elements should behave properly in dark mode (this bug is related to
OS-dependent styling).
###### [MODAL]
- Fix issue [#809](https://github.com/FluidDesignSystem/fluid-design-system/issues/809).
Buttons in the modal now have the correct focus-visible behaviour in React and Angular.
- Fix issue [#824](https://github.com/FluidDesignSystem/fluid-design-system/issues/824).
We now check if the event.target has the [data-toggle="modal"] attribute, if not find the closest element to trigger
the modal properly.
###### [SELECT INPUT]
- Fix issue [#800](https://github.com/FluidDesignSystem/fluid-design-system/issues/800),
add function `updateOptionsAndListeners()` that you can access
via `window.NJ.SelectInput.getInstance(SELECT_INPUT_ELEMENT).updateOptionsAndListeners()`
### 🖍 Changed
###### [TOOLTIP]
- We now expose the fixTitle() method that allows easier on the flight change to a tooltip title.
#### ⚠️ Breaking changes
###### [AVATAR]
- Rename root tokens for avatar sizes:
- `--nj-avatar-size--sm` -> `--nj-component-avatar-size-sm`
- `--nj-avatar-size--base` -> `--nj-component-avatar-size-base`
- `--nj-avatar-s