@dnb/eufemia 9.18.0 → 9.19.0

package/es/style/dnb-ui-components.css

@@ -955,6 +955,155 @@
       .dnb-autocomplete__options {
         display: block; } }
 
+/*
+* Avatar component
+*
+*/
+:root {
+  --avatar-font-size--small: var(--font-size-x-small);
+  --avatar-font-size--medium: var(--font-size-basis);
+  --avatar-font-size--large: var(--font-size-x-large);
+  --avatar-font-size--x-large: var(--font-size-x-large);
+  --avatar-line-height--small: var(--line-height-x-small);
+  --avatar-line-height--medium: var(--line-height-basis);
+  --avatar-line-height--large: var(--line-height-large);
+  --avatar-line-height--x-large: var(--line-height-large);
+  --avatar-width--small: 1.5rem;
+  --avatar-height--small: 1.5rem;
+  --avatar-width--medium: 2rem;
+  --avatar-height--medium: 2rem;
+  --avatar-width--large: 4rem;
+  --avatar-height--large: 4rem;
+  --avatar-width--x-large: 5rem;
+  --avatar-height--x-large: 5rem; }
+
+.dnb-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  line-height: 1;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border-radius: 50%;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+  .dnb-avatar,
+  .dnb-core-style .dnb-avatar {
+    line-height: 2.5rem;
+    line-height: var(--button-height); }
+  .dnb-avatar--size-small {
+    width: 1.5rem;
+    width: var(--avatar-width--small);
+    height: 1.5rem;
+    height: var(--avatar-height--small);
+    font-size: 0.875rem;
+    font-size: var(--avatar-font-size--small); }
+    .dnb-avatar--size-small,
+    .dnb-core-style .dnb-avatar--size-small {
+      line-height: 1.125rem;
+      line-height: var(--avatar-line-height--small); }
+  .dnb-avatar--size-medium {
+    width: 2rem;
+    width: var(--avatar-width--medium);
+    height: 2rem;
+    height: var(--avatar-height--medium);
+    font-size: 1.125rem;
+    font-size: var(--avatar-font-size--medium); }
+    .dnb-avatar--size-medium,
+    .dnb-core-style .dnb-avatar--size-medium {
+      line-height: 1.5rem;
+      line-height: var(--avatar-line-height--medium); }
+  .dnb-avatar--size-large {
+    width: 4rem;
+    width: var(--avatar-width--large);
+    height: 4rem;
+    height: var(--avatar-height--large);
+    font-size: 2.125rem;
+    font-size: var(--avatar-font-size--large); }
+    .dnb-avatar--size-large,
+    .dnb-core-style .dnb-avatar--size-large {
+      line-height: 2.5rem;
+      line-height: var(--avatar-line-height--large); }
+  .dnb-avatar--size-x-large {
+    width: 5rem;
+    width: var(--avatar-width--x-large);
+    height: 5rem;
+    height: var(--avatar-height--x-large);
+    font-size: 2.125rem;
+    font-size: var(--avatar-font-size--x-large); }
+    .dnb-avatar--size-x-large,
+    .dnb-core-style .dnb-avatar--size-x-large {
+      line-height: 2.5rem;
+      line-height: var(--avatar-line-height--x-large); }
+  .dnb-avatar__group {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-pack: flex;
+        -ms-flex-pack: flex;
+            justify-content: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row; }
+    .dnb-avatar__group .dnb-avatar {
+      -webkit-box-sizing: content-box;
+              box-sizing: content-box;
+      border: 0.125rem solid #f8f8f8;
+      border: 0.125rem solid var(--color-black-3); }
+      .dnb-avatar__group .dnb-avatar--size-small {
+        margin-left: -0.5rem; }
+      .dnb-avatar__group .dnb-avatar--size-medium {
+        margin-left: -0.75rem; }
+      .dnb-avatar__group .dnb-avatar--size-large {
+        margin-left: -1rem; }
+      .dnb-avatar__group .dnb-avatar--size-x-large {
+        margin-left: -1.5rem; }
+      .dnb-avatar__group .dnb-avatar:nth-of-type(2) {
+        margin-left: 0; }
+    .dnb-avatar__group--elements-left {
+      display: -webkit-inline-box;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      color: #737373;
+      color: var(--color-black-55); }
+      .dnb-avatar__group--elements-left--size-small {
+        font-size: 0.875rem;
+        font-size: var(--font-size-x-small);
+        margin-left: 0.125rem; }
+      .dnb-avatar__group--elements-left--size-medium {
+        font-size: 1rem;
+        font-size: var(--font-size-small);
+        margin-left: 0.125rem; }
+      .dnb-avatar__group--elements-left--size-large {
+        font-size: 1.625rem;
+        font-size: var(--font-size-large);
+        margin-left: 0.25rem;
+        margin-left: var(--spacing-xx-small); }
+      .dnb-avatar__group--elements-left--size-x-large {
+        font-size: 1.625rem;
+        font-size: var(--font-size-large);
+        margin-left: 0.25rem;
+        margin-left: var(--spacing-xx-small); }
+
 /*
 * Breadcrumb component
 *
@@ -2842,6 +2991,72 @@ html[data-visual-test] .dnb-global-status__shell {
           -ms-flex: none;
               flex: none; } }
 
+/*
+* InfoCard component
+*
+*/
+.dnb-info-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  background: white;
+  border: 1px solid #ebebeb;
+  border: 1px solid var(--color-black-8);
+  border-radius: 0.25rem;
+  padding: 1rem;
+  -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+          box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+  -webkit-box-shadow: var(--shadow-default);
+          box-shadow: var(--shadow-default); }
+  .dnb-info-card--centered {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: center; }
+  .dnb-info-card--content {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin-top: 0.1875rem; }
+  .dnb-info-card--centered .dnb-info-card--content {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin-top: 0; }
+  .dnb-info-card--icon {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+  .dnb-info-card--image {
+    height: 4rem;
+    width: 4rem; }
+  .dnb-info-card--buttons {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row; }
+    .dnb-info-card--buttons-centered {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      text-align: center; }
+
 /*
 * Input component
 *
@@ -6741,41 +6956,276 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
 * Tag component
 *
 */
-:root {
-  --tag-border-radius: 2.5rem; }
-
-.dnb-tag {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  padding: 0.25rem 0.5rem;
-  padding: var(--spacing-xx-small) var(--spacing-x-small);
-  font-size: 0.875rem;
-  font-size: var(--font-size-x-small);
+/*
+* Button mixins
+*
+*/
+/*
+* Tag mixins
+*
+*/
+.dnb-tag.dnb-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background-color: #ebebeb;
-  background-color: var(--color-black-8);
-  border-radius: 2.5rem;
-  border-radius: var(--tag-border-radius); }
-  .dnb-tag__icon {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center; }
-  .dnb-tag__text {
-    color: #333;
-    color: var(--color-black-80); }
+  background-color: var(--color-black-8); }
+  .dnb-tag.dnb-button.dnb-button--size-small {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem; }
+  .dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon {
+    padding-left: 0; }
+  .dnb-tag.dnb-button .dnb-button__text {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small);
+    -webkit-transform: none;
+            transform: none; }
+
+.dnb-tag:not(.dnb-tag--interactive) {
+  -webkit-user-select: unset;
+     -moz-user-select: unset;
+      -ms-user-select: unset;
+          user-select: unset;
+  cursor: unset; }
+  .dnb-tag:not(.dnb-tag--interactive) .dnb-button__text {
+    cursor: text; }
+
+.dnb-tag--interactive.dnb-button {
+  color: #007272;
+  color: var(--color-sea-green);
+  --border-color: var(--color-sea-green);
+  -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+          box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+  /* iOS fix - because "inset" works not fine with border-radius */
+  /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+  border-color: transparent; }
+  @supports (-webkit-touch-callout: none) {
+    .dnb-tag--interactive.dnb-button {
+      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+              box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+      .dnb-tag--interactive.dnb-button {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-tag--interactive.dnb-button {
+      -webkit-box-shadow: inset 0 0 0 1px #007272;
+              box-shadow: inset 0 0 0 1px #007272;
+      -webkit-box-shadow: inset 0 0 0 1px var(--color-sea-green);
+              box-shadow: inset 0 0 0 1px var(--color-sea-green); } }
+  html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover[disabled] {
+    cursor: not-allowed; }
+  html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: #ebebeb;
+    background-color: var(--color-black-8);
+    --border-color: var(--color-emerald-green);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
+        -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                box-shadow: 0 0 0 0.125rem #14555a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+    @media screen and (-ms-high-contrast: none) {
+      html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
+        opacity: 1; } }
+  .dnb-tag--interactive.dnb-button:focus[disabled],
+  html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus[disabled] {
+    cursor: not-allowed; }
+  .dnb-tag--interactive.dnb-button:focus:not([disabled]),
+  html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+    html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
+      color: #007272;
+      color: var(--color-sea-green);
+      background-color: #ebebeb;
+      background-color: var(--color-black-8); }
+    html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+    html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+              box-shadow: inset 0 0 0 0.125rem var(--border-color);
+      /* iOS fix - because "inset" works not fine with border-radius */
+      /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+      border-color: transparent; }
+      @supports (-webkit-touch-callout: none) {
+        html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                  box-shadow: 0 0 0 0.125rem var(--border-color); } }
+      @media not all and (min-resolution: 0.001dpcm) {
+        @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+          html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
+          -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
+                  box-shadow: inset 0 0 0 0.125rem #14555a;
+          -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
+                  box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
+  .dnb-tag--interactive.dnb-button:active[disabled],
+  html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:active[disabled] {
+    cursor: not-allowed; }
+  .dnb-tag--interactive.dnb-button:active:not([disabled]),
+  html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:active:not([disabled]) {
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50);
+    --border-color: transparent;
+    -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+            box-shadow: 0 0 0 0.0625rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-tag--interactive.dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch']) .dnb-tag--interactive.dnb-button:active:not([disabled]) {
+        -webkit-box-shadow: 0 0 0 0.0625rem transparent;
+                box-shadow: 0 0 0 0.0625rem transparent; } }
+  .dnb-tag--interactive.dnb-button[disabled] {
+    color: #b3dada;
+    color: var(--color-sea-green-30);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-sea-green-30);
+    -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+            box-shadow: 0 0 0 0.0625rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-tag--interactive.dnb-button[disabled] {
+        -webkit-box-shadow: 0 0 0 0.0625rem #b3dada;
+                box-shadow: 0 0 0 0.0625rem #b3dada;
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30);
+                box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } }
+
+.dnb-tag--removable.dnb-button {
+  color: #fff;
+  color: var(--color-white);
+  background-color: #007272;
+  background-color: var(--color-sea-green); }
+  .dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path {
+    fill: #fff;
+    fill: var(--color-white); }
+  .dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path {
+    stroke: #007272;
+    stroke: var(--color-sea-green); }
+  .dnb-tag--removable.dnb-button:focus[disabled],
+  html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus[disabled] {
+    cursor: not-allowed; }
+  .dnb-tag--removable.dnb-button:focus:not([disabled]),
+  html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+    html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
+      color: #007272;
+      color: var(--color-sea-green);
+      background-color: #fff;
+      background-color: var(--color-white); }
+    html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+    html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+              box-shadow: inset 0 0 0 0.125rem var(--border-color);
+      /* iOS fix - because "inset" works not fine with border-radius */
+      /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+      border-color: transparent; }
+      @supports (-webkit-touch-callout: none) {
+        html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                  box-shadow: 0 0 0 0.125rem var(--border-color); } }
+      @media not all and (min-resolution: 0.001dpcm) {
+        @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+          html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
+          -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
+                  box-shadow: inset 0 0 0 0.125rem #14555a;
+          -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
+                  box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
+    .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path,
+    html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path {
+      fill: #007272;
+      fill: var(--color-sea-green); }
+    .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path,
+    html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path {
+      stroke: #fff;
+      stroke: var(--color-white); }
+  html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover[disabled] {
+    cursor: not-allowed; }
+  html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) {
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-emerald-green);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) {
+        -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                box-shadow: 0 0 0 0.125rem #14555a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+    @media screen and (-ms-high-contrast: none) {
+      html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) {
+        opacity: 1; } }
+    html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path {
+      fill: #007272;
+      fill: var(--color-sea-green); }
+    html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path {
+      stroke: #fff;
+      stroke: var(--color-white); }
+  .dnb-tag--removable.dnb-button:active[disabled],
+  html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active[disabled] {
+    cursor: not-allowed; }
+  .dnb-tag--removable.dnb-button:active:not([disabled]),
+  html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) {
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50);
+    --border-color: transparent;
+    -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+            box-shadow: 0 0 0 0.0625rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-tag--removable.dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) {
+        -webkit-box-shadow: 0 0 0 0.0625rem transparent;
+                box-shadow: 0 0 0 0.0625rem transparent; } }
+    .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path,
+    html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path {
+      fill: #007272;
+      fill: var(--color-sea-green); }
+    .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path,
+    html:not([data-whatintent='touch']) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path {
+      stroke: #fff;
+      stroke: var(--color-white); }
+  .dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path {
+    fill: #d2f0e9;
+    fill: var(--color-mint-green-50); }
+  .dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path {
+    stroke: #b3dada;
+    stroke: var(--color-sea-green-30); }
+  .dnb-tag--removable.dnb-button .dnb-button__text {
+    padding-left: 0.5rem; }
+
+.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
+  padding-right: 0; }
 
 /*
 * Textarea component
@@ -7071,6 +7521,232 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
           -ms-flex: none;
               flex: none; } }
 
+/*
+* Timeline component
+*
+*/
+/*
+* Timeline theme
+*
+*/
+:root {
+  --timeline-icon-height--small: var(--button-height--small);
+  --timeline-icon-width--small: var(--button-width--small);
+  --timeline-icon-border-radius--small: calc(var(--timeline-icon-height--small)/2);
+  --timeline-icon-border-radius--small: calc(
+    var(--timeline-icon-height--small) / 2
+  );
+  --timeline-icon-height--medium: var(--button-height--medium);
+  --timeline-icon-width--medium: var(--button-width--medium);
+  --timeline-icon-border-radius--medium: calc(var(--timeline-icon-height--medium)/2);
+  --timeline-icon-border-radius--medium: calc(
+    var(--timeline-icon-height--medium) / 2
+  );
+  --timeline-icon-width-diff: calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);
+  --timeline-icon-width-diff: calc(
+    (
+        var(--timeline-icon-width--medium) -
+          var(--timeline-icon-width--small)
+      ) / 2
+  );
+  --timeline-border-spacing: var(--spacing-small);
+  --timeline-border-spacing--icon-adjusted: calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing));
+  --timeline-border-spacing--icon-adjusted: calc(
+    var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
+  ); }
+
+.dnb-timeline__item {
+  margin-left: 0.25rem;
+  margin-left: calc(
+    (
+        2rem -
+          1.5rem) / 2
+  );
+  margin-left: var(--timeline-icon-width-diff); }
+  .dnb-timeline__item__label__icon {
+    width: 1.5rem;
+    width: var(--timeline-icon-width--small);
+    line-height: 1.5rem;
+    line-height: var(--timeline-icon-height--small);
+    border-radius: 0.75rem;
+    border-radius: calc(
+    1.5rem / 2
+  );
+    border-radius: var(--timeline-icon-border-radius--small);
+    color: #333;
+    color: var(--color-black-80);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-black-80);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-timeline__item__label__icon {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: inset 0 0 0 1px #333;
+                box-shadow: inset 0 0 0 1px #333;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
+                box-shadow: inset 0 0 0 1px var(--color-black-80); } }
+  .dnb-timeline__item__label__name {
+    margin-left: 1.25rem;
+    margin-left: calc(
+    calc(
+    (
+        2rem -
+          1.5rem) / 2
+  ) + 1rem);
+    margin-left: var(--timeline-border-spacing--icon-adjusted);
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    line-height: 1.25rem;
+    line-height: var(--line-height-small); }
+  .dnb-timeline__item__content {
+    margin-left: 0.75rem;
+    margin-left: calc(1.5rem / 2);
+    margin-left: calc(var(--timeline-icon-width--small)/2);
+    margin-left: calc(var(--timeline-icon-width--small) / 2);
+    padding-left: 2rem;
+    padding-left: calc(1.5rem / 2 + calc(
+    calc(
+    (
+        2rem -
+          1.5rem) / 2
+  ) + 1rem));
+    padding-left: calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted));
+    padding-left: calc(var(--timeline-icon-width--small) / 2 + var(--timeline-border-spacing--icon-adjusted));
+    border-left: 1px dashed #737373;
+    border-left: 1px dashed var(--color-black-55); }
+  .dnb-timeline__item--completed .dnb-timeline__item__content {
+    border-left: 1px solid #333;
+    border-left: 1px solid var(--color-black-80); }
+  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+    color: #333;
+    color: var(--color-black-80); }
+  .dnb-timeline__item--current .dnb-timeline__item__content {
+    margin-left: 1rem;
+    margin-left: calc(2rem / 2);
+    margin-left: calc(var(--timeline-icon-width--medium)/2);
+    margin-left: calc(var(--timeline-icon-width--medium) / 2);
+    padding-left: 2rem;
+    padding-left: calc(2rem / 2 + 1rem);
+    padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
+    padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
+  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+    margin-left: 1rem;
+    margin-left: var(--timeline-border-spacing);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis); }
+  .dnb-timeline__item--current .dnb-timeline__item__label__icon {
+    width: 2rem;
+    width: var(--timeline-icon-width--medium);
+    line-height: 2rem;
+    line-height: var(--timeline-icon-height--medium);
+    border-radius: 1rem;
+    border-radius: calc(
+    2rem / 2
+  );
+    border-radius: var(--timeline-icon-border-radius--medium); }
+  .dnb-timeline__item--current {
+    margin-left: 0; }
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+    font-weight: normal;
+    font-weight: var(--font-weight-basis);
+    color: #737373;
+    color: var(--color-black-55); }
+  .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+    color: #737373;
+    color: var(--color-black-55);
+    background-color: #f8f8f8;
+    background-color: var(--color-black-3);
+    --border-color: var(--color-black-3);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
+        -webkit-box-shadow: inset 0 0 0 1px #f8f8f8;
+                box-shadow: inset 0 0 0 1px #f8f8f8;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-3);
+                box-shadow: inset 0 0 0 1px var(--color-black-3); } }
+  .dnb-timeline__item:only-child {
+    margin-left: 0; }
+  .dnb-timeline__item:last-child .dnb-timeline__item__content {
+    border-left: none; }
+
+.dnb-timeline {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column; }
+  .dnb-timeline__item__label {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: left;
+    padding: 0; }
+    .dnb-timeline__item__label__icon {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      height: auto;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      padding: 0; }
+    .dnb-timeline__item__label__name {
+      cursor: text; }
+  .dnb-timeline__item__content {
+    padding-bottom: 1rem;
+    padding-bottom: var(--spacing-small); }
+    .dnb-timeline__item__content__date {
+      cursor: text;
+      font-size: 0.875rem;
+      font-size: var(--font-size-x-small);
+      font-weight: normal;
+      font-weight: var(--font-weight-basis);
+      color: #737373;
+      color: var(--color-black-55); }
+    .dnb-timeline__item__content__info {
+      padding-top: 0.5rem;
+      padding-top: var(--spacing-x-small); }
+
 /*
 * ToggleButton component
 *