@dnb/eufemia 9.23.0-beta.3 → 9.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnb/eufemia",
-  "version": "9.23.0-beta.3",
+  "version": "9.23.1",
   "description": "DNB Eufemia Design System UI Library",
   "license": "SEE LICENSE IN LICENSE FILE",
   "author": "DNB Team & Tobias Høegh",

package/shared/Eufemia.js

@@ -10,7 +10,7 @@ export function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.23.0-beta.3';
+          return '9.23.1';
         }
       }]);
 

package/shared/hooks/usePropsWithContext.js

@@ -35,7 +35,7 @@ function usePropsWithContext(props) {
         key = _ref2[0],
         value = _ref2[1];
 
-    if (typeof props[key] !== 'undefined' && props[key] === defaults[key]) {
+    if (props[key] === defaults[key]) {
       acc[key] = value;
     }
 

package/style/dnb-ui-components.css

@@ -3659,6 +3659,7 @@ html[data-visual-test] .dnb-global-status__shell {
   border: 1px solid var(--color-black-8);
   border-radius: 0.25rem;
   padding: 1rem;
+  overflow: hidden;
   -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);
@@ -3697,7 +3698,9 @@ html[data-visual-test] .dnb-global-status__shell {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
-            flex-direction: row; }
+            flex-direction: row;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; }
     .dnb-info-card--buttons-centered {
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
@@ -4221,14 +4224,27 @@ html[data-dnb-modal-active] {
               justify-content: flex-start; }
     .dnb-modal__content--fullscreen .dnb-modal__content__content {
       height: auto; }
+    .dnb-modal__content--left {
+      -webkit-box-align: start;
+          -ms-flex-align: start;
+              align-items: flex-start;
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start; }
     .dnb-modal__content--right {
+      -webkit-box-align: start;
+          -ms-flex-align: start;
+              align-items: flex-start;
       -webkit-box-pack: end;
           -ms-flex-pack: end;
               justify-content: flex-end; }
     .dnb-modal__content--bottom {
       -webkit-box-align: end;
           -ms-flex-align: end;
-              align-items: flex-end; }
+              align-items: flex-end;
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start; }
   .dnb-modal__overlay {
     position: fixed;
     z-index: 3000;
@@ -6926,194 +6942,190 @@ span.dnb-space--no-collapse > span {
  * Tabs component
  *
  */
-.dnb-tabs__tabs {
-  position: relative;
-  z-index: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center; }
-  .dnb-tabs__tabs, .dnb-tabs__tabs.dnb-section--spacing {
-    padding-bottom: 0; }
-  .dnb-tabs__tabs__tablist {
+.dnb-tabs {
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-tabs__tabs {
+    position: relative;
+    z-index: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-flex: 0;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
-    padding: 0 0.5rem;
-    margin: 0 -0.5rem;
-    overflow-x: auto;
-    -ms-scroll-chaining: none;
-        overscroll-behavior: contain;
-    scrollbar-width: thin;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: auto;
-    scrollbar-color: #14555a transparent;
-    scrollbar-color: var(--color-emerald-green) transparent;
-    /* Hide scrollbar for Chrome, Safari */
-    /* stylelint-disable-next-line */
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */ }
-    .dnb-tabs__tabs__tablist:focus {
-      outline: none; }
-      html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
-        --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[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
-            -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); } }
-    html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
-      scroll-behavior: smooth; }
-    html[data-visual-test] .dnb-tabs__tabs__tablist {
-      scroll-behavior: auto !important; }
-    .dnb-tabs__tabs__tablist::-webkit-scrollbar {
-      display: none; }
-  .dnb-tabs__tabs--left .dnb-tabs__tabs__tablist {
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start; }
-  .dnb-tabs__tabs--right .dnb-tabs__tabs__tablist {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -webkit-box-pack: end;
-        -ms-flex-pack: end;
-            justify-content: flex-end; }
-  .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center; }
-  .dnb-tabs__tabs::before {
-    content: '';
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+    .dnb-tabs__tabs, .dnb-tabs__tabs.dnb-section--spacing {
+      padding-bottom: 0; }
+    .dnb-tabs__tabs__tablist {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-flex: 0;
+          -ms-flex: 0 1 auto;
+              flex: 0 1 auto;
+      overflow-x: auto;
+      -ms-scroll-chaining: none;
+          overscroll-behavior: contain;
+      scrollbar-width: thin;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: auto;
+      scrollbar-color: #14555a transparent;
+      scrollbar-color: var(--color-emerald-green) transparent;
+      /* Hide scrollbar for Chrome, Safari */
+      /* stylelint-disable-next-line */
+      -ms-overflow-style: none;
+      /* IE and Edge */
+      scrollbar-width: none;
+      /* Firefox */ }
+      .dnb-tabs__tabs__tablist:focus {
+        outline: none; }
+        html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
+          --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[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {
+              -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); } }
+      html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
+        scroll-behavior: smooth; }
+      html[data-visual-test] .dnb-tabs__tabs__tablist {
+        scroll-behavior: auto !important; }
+      .dnb-tabs__tabs__tablist::-webkit-scrollbar {
+        display: none; }
+    .dnb-tabs__tabs--left .dnb-tabs__tabs__tablist {
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start; }
+    .dnb-tabs__tabs--right .dnb-tabs__tabs__tablist {
+      -webkit-box-flex: 1;
+          -ms-flex: 1;
+              flex: 1;
+      -webkit-box-pack: end;
+          -ms-flex-pack: end;
+              justify-content: flex-end; }
+    .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center; }
+    .dnb-tabs__tabs::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: -100vw;
+      bottom: 0;
+      width: 100vw;
+      height: 1px; }
+    .dnb-tabs__tabs--no-border::before {
+      content: none; }
+  .dnb-tabs__scroll-nav-button {
     position: absolute;
-    z-index: -1;
-    left: -100vw;
-    bottom: 0;
-    width: 100vw;
-    height: 1px; }
-  .dnb-tabs__tabs--no-border::before {
-    content: none; }
-
-.dnb-tabs:not(.dnb-tabs--has-scrollbar) .dnb-tabs__tabs__tablist {
-  margin-left: -0.5rem;
-  padding-left: 0.5rem; }
-
-.dnb-tabs__scroll-nav-button {
-  position: absolute;
-  z-index: 2;
-  display: none;
-  opacity: 0;
-  -webkit-transition: opacity 600ms ease-out;
-  transition: opacity 600ms ease-out; }
-  .dnb-tabs__scroll-nav-button.dnb-button--primary {
-    background-color: #14555a;
-    background-color: var(--color-emerald-green); }
-  .dnb-tabs__scroll-nav-button:first-of-type {
-    left: -2.5rem; }
-  .dnb-tabs__scroll-nav-button:last-of-type {
-    right: -2.5rem; }
-  .dnb-tabs__scroll-nav-button--visible {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    opacity: 1; }
-  .dnb-tabs__scroll-nav-button--hide {
+    z-index: 2;
+    right: -2px;
+    display: none;
+    opacity: 0;
     pointer-events: none;
-    opacity: 0 !important; }
-
-.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type {
-  left: 0; }
-
-.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type {
-  right: 0; }
-
-html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
-  -webkit-transition: none;
-  transition: none; }
-
-.dnb-tabs__button__snap {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 0 1rem 0 1.5rem; }
-  @media screen and (max-width: 40em) {
-    .dnb-tabs__button__snap {
-      padding: 0 1rem; } }
-  .dnb-tabs__button__snap:first-of-type {
-    padding-left: 0; }
-  .dnb-tabs__button__snap:last-of-type {
-    padding-right: 0.5rem; }
-
-.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type {
-  padding-right: 1.5rem; }
-
-.dnb-tabs__button,
-.dnb-core-style .dnb-tabs .dnb-tabs__button {
-  position: relative;
-  z-index: 1;
-  -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
-  -webkit-user-select: none;
-  margin: 0;
-  padding: 0 0.125rem;
-  /* 1/16*4 */
-  background-color: transparent;
-  border-bottom: 1px solid transparent;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  font-size: 1.125rem;
-  font-size: var(--font-size-basis);
-  line-height: 1.5rem;
-  line-height: var(--line-height-basis);
-  text-decoration: none;
-  white-space: nowrap; }
-  .dnb-tabs__button__title .dnb-icon,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon {
-    font-size: 1rem;
-    font-size: var(--font-size-small);
-    -webkit-transform: translateY(-0.125rem);
-            transform: translateY(-0.125rem); }
-  .dnb-tabs__button .dnb-dummy,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+    -webkit-transition: opacity 600ms ease-out;
+    transition: opacity 600ms ease-out; }
+    .dnb-tabs__scroll-nav-button:first-of-type {
+      left: -2px;
+      right: auto; }
+    .dnb-tabs__scroll-nav-button--visible {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      pointer-events: initial;
+      opacity: 1; }
+    .dnb-tabs__scroll-nav-button--hide {
+      pointer-events: none;
+      opacity: 0 !important; }
+  .dnb-tabs__button,
+  .dnb-core-style .dnb-tabs .dnb-tabs__button {
+    position: relative;
+    z-index: 1;
+    -moz-user-select: none;
+     -ms-user-select: none;
+         user-select: none;
+    -webkit-user-select: none;
+    margin: 0;
+    padding: 0 0.125rem;
+    /* 1/16*4 */
+    background-color: transparent;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    text-decoration: none;
+    white-space: nowrap;
+    -webkit-transition: margin 400ms ease-out;
+    transition: margin 400ms ease-out; }
+    .dnb-tabs__button__title .dnb-icon,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon {
+      font-size: 1rem;
+      font-size: var(--font-size-small);
+      -webkit-transform: translateY(-0.125rem);
+              transform: translateY(-0.125rem); }
+    .dnb-tabs__button .dnb-dummy,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      height: 0;
+      visibility: hidden;
+      overflow: hidden; }
+    .dnb-tabs__button .dnb-dummy,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+      margin-top: 0.25rem; }
+    .dnb-tabs__button::after,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px; }
+  .dnb-tabs__button__snap {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    height: 0;
-    visibility: hidden;
-    overflow: hidden; }
-  .dnb-tabs__button .dnb-dummy,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
-    margin-top: 0.25rem; }
-  .dnb-tabs__button::after,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1px; }
-
-.dnb-tabs__content--spacing {
-  padding-top: 2rem; }
+    padding: 0 1rem 0 1.5rem;
+    will-change: padding;
+    -webkit-transition: padding 1s cubic-bezier(0.42, 0, 0, 1);
+    transition: padding 1s cubic-bezier(0.42, 0, 0, 1); }
+    @media screen and (max-width: 40em) {
+      .dnb-tabs__button__snap {
+        padding: 0 1rem; } }
+    .dnb-tabs__button__snap:first-of-type {
+      padding-left: 0; }
+    .dnb-tabs__button__snap:last-of-type {
+      padding-right: 0.5rem; }
+  html[data-whatinput='keyboard'] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus {
+    margin-left: 0.5rem; }
+  html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus {
+    /* stylelint-disable */
+    /* stylelint-enable */ }
+    html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus {
+      margin-right: 0.5rem; }
+  html[data-visual-test] .dnb-tabs .dnb-tabs__button,
+  html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,
+  html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
+    -webkit-transition: none !important;
+    transition: none !important; }
+  .dnb-tabs__content--spacing {
+    padding-top: 2rem; }
 
 /*
 * Tag component
@@ -7390,11 +7402,19 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
 .dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
   padding-right: 0; }
 
-.dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:last-of-type) {
-  margin-right: 0.25rem; }
-
-.dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:first-of-type) {
-  margin-left: 0.25rem; }
+.dnb-tag__group {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  grid-gap: 0.5rem;
+  gap: 0.5rem; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-tag__group .dnb-button:not([class*='dnb-space']) {
+      margin-bottom: 0.5rem; }
+      .dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:last-of-type) {
+        margin-right: 0.5rem; } }
 
 /*
 * Textarea component