@dnb/eufemia 9.39.0 → 9.40.0

package/style/dnb-ui-components.css

@@ -750,9 +750,9 @@
           right: 0;
           width: 60%; } }
   .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon,
-  html[data-visual-test] .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon {
-    -webkit-transition-duration: 1ms !important;
-            transition-duration: 1ms !important; }
+  html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon {
+    -webkit-transition: none;
+    transition: none; }
 
 /*
 * Autocomplete component
@@ -2561,10 +2561,10 @@ button.dnb-button::-moz-focus-inner {
     width: 100%;
     height: 100%; }
   .dnb-dialog--information {
-    min-width: 320px;
-    min-width: var(--dialog-min-width);
     width: 60vw;
     width: var(--dialog-avg-width);
+    min-width: 320px;
+    min-width: var(--dialog-min-width);
     max-width: 49rem;
     max-width: var(--dialog-max-width); }
   .dnb-dialog--confirmation {
@@ -2665,6 +2665,10 @@ button.dnb-button::-moz-focus-inner {
     width: 100%; }
     .dnb-dialog__actions > :not(:last-child) {
       margin-right: 1rem; }
+  .dnb-dialog--information .dnb-dialog__actions {
+    -webkit-box-pack: left;
+        -ms-flex-pack: left;
+            justify-content: left; }
   .dnb-dialog__align--center .dnb-dialog__content {
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2710,26 +2714,6 @@ button.dnb-button::-moz-focus-inner {
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between; }
-  .dnb-dialog__icon__primary.dnb-icon--border::after {
-    left: -50%;
-    right: -50%;
-    top: -50%;
-    bottom: -50%;
-    border: none;
-    background-color: currentColor;
-    opacity: 0.1; }
-  .dnb-dialog__icon__primary.dnb-dialog__icon--warning {
-    color: #dc2a2a;
-    color: var(--color-fire-red); }
-    .dnb-dialog__icon__primary.dnb-dialog__icon--warning ::after {
-      background-color: #fdeeee;
-      background-color: var(--color-fire-red-8); }
-  .dnb-dialog__icon__primary.dnb-dialog__icon--info {
-    color: #14555a;
-    color: var(--color-emerald-green); }
-    .dnb-dialog__icon__primary.dnb-dialog__icon--info ::after {
-      background-color: #f2f4ec;
-      background-color: var(--color-pistachio); }
   html:not([data-visual-test]) .dnb-dialog {
     -webkit-animation: show-modal 300ms ease-out;
             animation: show-modal 300ms ease-out;
@@ -2770,6 +2754,10 @@ button.dnb-button::-moz-focus-inner {
       margin-bottom: 0; }
   .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs {
     margin-top: 3.5rem; }
+  .dnb-dialog__icon {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
   .dnb-dialog__icon ~ .dnb-dialog__header {
     margin-top: 1.5rem; }
   @supports (-webkit-touch-callout: none) {
@@ -3039,6 +3027,7 @@ button.dnb-button::-moz-focus-inner {
   .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
     position: sticky;
     top: 0;
+    left: 0;
     z-index: 99;
     margin: 2rem 0;
     margin: var(--drawer-spacing) 0;
@@ -7265,89 +7254,133 @@ span.dnb-space--no-collapse > span {
       -ms-flex-align: end;
           align-items: flex-end; }
 
+.dnb-table--outline thead .dnb-table__th::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-top: var(--outline); }
+
+.dnb-table--outline thead .dnb-table__th:first-of-type::after {
+  border-left: var(--outline); }
+
+.dnb-table--outline thead .dnb-table__th:last-of-type::after {
+  border-right: var(--outline); }
+
+.dnb-table--outline thead .dnb-table__th:first-of-type, .dnb-table--outline thead .dnb-table__th:first-of-type::after {
+  border-radius: 0.5rem 0 0 0; }
+
+.dnb-table--outline thead .dnb-table__th:last-of-type, .dnb-table--outline thead .dnb-table__th:last-of-type::after {
+  border-radius: 0 0.5rem 0 0; }
+
+.dnb-table--outline tbody .dnb-table__th:first-of-type::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-left: var(--outline); }
+
+.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-bottom: var(--outline); }
+
+.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th:first-of-type::after {
+  border-radius: 0 0 0 0.5rem; }
+
 /*
 * Table component
 *
 */
-.dnb-table {
-  --border: 0.0625rem solid var(--color-black-8);
-  --outline: 0.0625rem solid var(--color-black-8); }
-  .dnb-table--border tbody .dnb-table__td {
-    z-index: 2; }
-    .dnb-table--border tbody .dnb-table__td::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: -1;
-      pointer-events: none;
-      border: var(--border);
-      border-right: none;
-      border-bottom: none; }
-    .dnb-table--border tbody .dnb-table__td:first-of-type::after {
-      border-left: none; }
-  .dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
-    border-bottom: var(--border); }
-  .dnb-table--outline thead .dnb-table__th {
-    z-index: 2; }
-    .dnb-table--outline thead .dnb-table__th::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: -1;
-      pointer-events: none;
-      border-top: var(--outline); }
-    .dnb-table--outline thead .dnb-table__th:first-of-type::after {
-      border-left: var(--outline); }
-    .dnb-table--outline thead .dnb-table__th:last-of-type::after {
-      border-right: var(--outline); }
-  .dnb-table--outline tbody .dnb-table__td {
-    z-index: 2; }
-    .dnb-table--outline tbody .dnb-table__td:first-of-type::after, .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: -1;
-      pointer-events: none; }
-    .dnb-table--outline tbody .dnb-table__td:first-of-type::after {
-      border-left: var(--outline); }
-    .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
-      border-right: var(--outline); }
-  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td {
-    z-index: 2; }
-    .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: -1;
-      pointer-events: none;
-      border-bottom: var(--outline); }
-  .dnb-table--outline thead .dnb-table__th:first-of-type, .dnb-table--outline thead .dnb-table__th:first-of-type::after {
-    border-radius: 0.5rem 0 0 0; }
-  .dnb-table--outline thead .dnb-table__th:last-of-type, .dnb-table--outline thead .dnb-table__th:last-of-type::after {
-    border-radius: 0 0.5rem 0 0; }
-  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::after {
-    border-radius: 0 0 0 0.5rem; }
-  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after {
-    border-radius: 0 0 0.5rem 0; }
-  .dnb-table__td--no-spacing,
-  .dnb-table td.dnb-table__td--no-spacing {
-    padding: 0; }
-  .dnb-table__td--spacing-horizontal,
-  .dnb-table td.dnb-table__td--spacing-horizontal {
-    padding-top: 0;
-    padding-bottom: 0; }
+.dnb-table--border tbody .dnb-table__td::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border: var(--border);
+  border-right: none;
+  border-bottom: none; }
+
+.dnb-table--border tbody .dnb-table__td:first-of-type::after {
+  border-left: none; }
+
+.dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
+  border-bottom: var(--border); }
+
+.dnb-table--outline tbody .dnb-table__td {
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-table--outline tbody .dnb-table__td:first-of-type::after, .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    pointer-events: none; }
+  .dnb-table--outline tbody .dnb-table__td:first-of-type::after {
+    border-left: var(--outline); }
+  .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
+    border-right: var(--outline); }
+  .dnb-table--outline tbody .dnb-table__td, .dnb-table--outline tbody .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__td::after {
+    -webkit-transition: border-radius 400ms cubic-bezier(0.42, 0, 0, 1);
+    transition: border-radius 400ms cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: border-radius 400ms var(--easing-default);
+    transition: border-radius 400ms var(--easing-default); }
+
+.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-bottom: var(--outline); }
+
+.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::after {
+  border-radius: 0 0 0 0.5rem; }
+
+.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after {
+  border-radius: 0 0 0.5rem 0; }
+
+.dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
+  border-left: none; }
+
+.dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
+  border-left: var(--border); }
+
+.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::after {
+  border-radius: 0 0 0 0; }
+
+.dnb-table__td--no-spacing,
+.dnb-table td.dnb-table__td--no-spacing {
+  padding: 0; }
+
+.dnb-table__td--spacing-horizontal,
+.dnb-table td.dnb-table__td--spacing-horizontal {
+  padding-top: 0;
+  padding-bottom: 0; }
 
 /*
 * Table component
@@ -7395,43 +7428,41 @@ span.dnb-space--no-collapse > span {
   padding: 0 !important;
   height: 0; }
 
-.dnb-table tr.sticky th {
+.dnb-table tr.sticky:not(.css-position) th {
+  position: relative;
+  z-index: 3;
+  will-change: transform;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, var(--table-offset, 0), 0);
+          transform: translate3d(0, var(--table-offset, 0), 0); }
+
+.dnb-table tr.sticky.css-position {
   position: sticky;
+  z-index: 3;
   top: 0;
-  top: var(--table-top, 0);
-  z-index: 2; }
-  .dnb-table tr.sticky th::before {
-    content: '';
-    position: absolute;
-    opacity: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 6px;
-    -webkit-box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
-            box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
-    -webkit-box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
-            box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
-    -webkit-clip-path: inset(6px 0 -48px 0);
-            clip-path: inset(6px 0 -48px 0);
-    -webkit-transition: opacity 300ms ease-out;
-    transition: opacity 300ms ease-out; }
-    [data-visual-test-wrapper] .dnb-table tr.sticky th::before {
-      -webkit-transition: none;
-      transition: none; }
-
-.dnb-table tr.sticky.show-shadow th::before {
-  opacity: 1; }
+  top: var(--table-top, 0); }
+
+.dnb-table tr.sticky.is-sticky th::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 6px;
+  -webkit-box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+          box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+  -webkit-box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+          box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+  -webkit-clip-path: inset(6px 0 -48px 0);
+          clip-path: inset(6px 0 -48px 0); }
 
 /*
 * Table component
 *
 */
 .dnb-table__container {
-  position: relative;
-  --border: 0.0625rem solid var(--color-black-8);
-  background-color: #fff;
-  background-color: var(--color-white); }
+  position: relative; }
   .dnb-table__container::after {
     content: '';
     position: absolute;
@@ -7441,7 +7472,8 @@ span.dnb-space--no-collapse > span {
     bottom: 0;
     z-index: 1;
     pointer-events: none;
-    border: var(--border); }
+    z-index: 3;
+    border: var(--outline); }
   .dnb-table__container, .dnb-table__container::after {
     border-radius: 0.5rem; }
   .dnb-table__container, .dnb-table__container__body, .dnb-table__container__head, .dnb-table__container__foot {
@@ -7460,34 +7492,21 @@ span.dnb-space--no-collapse > span {
       margin: 0; }
   .dnb-table__container__foot {
     padding: 0.5rem 1rem 2rem; }
+  .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
+    overflow: visible; }
 
+/*
+* Table deprecated parts
+*
+*/
 .dnb-table {
-  display: table;
-  table-layout: auto;
-  width: 100%;
-  overflow: auto;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  border-spacing: 0;
-  border-collapse: collapse;
-  /* stylelint-disable */
-  /* stylelint-enable */ }
-  .dnb-table--fixed {
-    table-layout: fixed;
-    width: auto; }
-  .dnb-table--no-wrap {
-    white-space: nowrap; }
+  /* stylelint-disable */ }
   .dnb-table, .dnb-table--left {
     text-align: left; }
   .dnb-table--right {
     text-align: right; }
   .dnb-table--center {
     text-align: center; }
-  .dnb-table > caption {
-    caption-side: bottom;
-    margin-top: 0.5rem;
-    font-size: 1.125rem;
-    font-size: var(--font-size-basis); }
   .dnb-table--small,
   .dnb-table--small > tr > th,
   .dnb-table--small > tr > td,
@@ -7526,6 +7545,25 @@ span.dnb-space--no-collapse > span {
   .dnb-table > tbody > tr > td.dnb-table--x-small, .dnb-table__th.dnb-table--x-small, .dnb-table__td.dnb-table--x-small {
     font-size: 0.875rem;
     font-size: var(--font-size-x-small); }
+
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  border-spacing: 0;
+  border-collapse: collapse; }
+  .dnb-table--fixed {
+    table-layout: fixed;
+    width: auto; }
+  .dnb-table--no-wrap {
+    white-space: nowrap; }
+  .dnb-table > caption {
+    caption-side: bottom;
+    margin-top: 0.5rem;
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis); }
   .dnb-table.dnb-skeleton > * {
     -webkit-text-fill-color: #ebebeb;
     -webkit-text-fill-color: var(--skeleton-color); }
@@ -7542,8 +7580,7 @@ span.dnb-space--no-collapse > span {
               align-items: flex-end;
       -webkit-box-shadow: none;
               box-shadow: none;
-      line-height: 1.5rem;
-      line-height: var(--line-height-basis);
+      line-height: inherit;
       margin: 0;
       padding: 0;
       padding-right: 0.5rem;
@@ -7566,7 +7603,8 @@ span.dnb-space--no-collapse > span {
       .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text,
       .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text {
         margin: 0;
-        font-size: inherit; }
+        font-size: inherit;
+        line-height: inherit; }
         .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after,
         .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
           right: 1rem; }
@@ -9230,39 +9268,6 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
 * VisuallyHidden component
 *
 */
-.dnb-visually-hidden--default {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  -webkit-touch-callout: none;
-  pointer-events: none;
-  position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  white-space: nowrap;
-  height: 1px;
-  width: 1px;
-  margin: -1px 0 0 -1px;
-  padding: 0;
-  border: 0; }
-  .dnb-visually-hidden--default:not(:focus):not(:active) {
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    -webkit-touch-callout: none;
-    pointer-events: none;
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px);
-    overflow: hidden;
-    white-space: nowrap;
-    height: 1px;
-    width: 1px;
-    margin: -1px 0 0 -1px;
-    padding: 0;
-    border: 0; }
-
 .dnb-visually-hidden--focusable:not(:focus):not([focus-within]) {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -9271,15 +9276,15 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   -webkit-touch-callout: none;
   pointer-events: none;
   position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  max-width: 1px;
+  max-height: 1px;
   overflow: hidden;
   white-space: nowrap;
-  height: 1px;
-  width: 1px;
-  margin: -1px 0 0 -1px;
   padding: 0;
+  margin: 0;
   border: 0; }
-
 .dnb-visually-hidden--focusable:not(:focus):not(:focus-within) {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -9288,11 +9293,12 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   -webkit-touch-callout: none;
   pointer-events: none;
   position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  max-width: 1px;
+  max-height: 1px;
   overflow: hidden;
   white-space: nowrap;
-  height: 1px;
-  width: 1px;
-  margin: -1px 0 0 -1px;
   padding: 0;
+  margin: 0;
   border: 0; }