@dnb/eufemia 9.23.0-beta.3 → 9.23.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnb/eufemia",
-  "version": "9.23.0-beta.3",
+  "version": "9.23.0-beta.4",
   "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.0-beta.4';
         }
       }]);
 

package/style/dnb-ui-components.css

@@ -6926,194 +6926,202 @@ 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 {
-    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: '';
-    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 {
+.dnb-tabs {
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-tabs__tabs {
+    position: relative;
+    z-index: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    opacity: 1; }
-  .dnb-tabs__scroll-nav-button--hide {
+    -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: relative;
+    z-index: 2;
+    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.dnb-button--primary {
+      background-color: #14555a;
+      background-color: var(--color-emerald-green); }
+    .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; }
+    @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__button__snap:first-of-type.selected.focus, .dnb-tabs__button__snap:last-of-type.focus, .dnb-tabs__button__snap:last-of-type.selected {
+      -webkit-transition: padding 1s cubic-bezier(0.42, 0, 0, 1) 10ms;
+      transition: padding 1s cubic-bezier(0.42, 0, 0, 1) 10ms; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type {
+    margin-left: -3rem;
+    padding-left: 3rem; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type {
+    margin-right: -3rem;
+    padding-right: 3rem; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus {
+    padding-left: 0; }
+    .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus .dnb-tabs__button:focus {
+      margin-left: 0.5rem; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus {
+    padding-right: 0;
+    /* stylelint-disable */
+    /* stylelint-enable */ }
+    .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus .dnb-tabs__button:focus {
+      margin-right: 0.5rem; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__tabs__tablist {
+    margin: 0 -2rem;
+    padding-left: 3rem;
+    padding-right: 3rem; }
+  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