@dnb/eufemia 9.16.2 → 9.16.3

package/components/tabs/style/dnb-tabs.css

@@ -211,7 +211,7 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
        user-select: none;
   -webkit-user-select: none;
   margin: 0;
-  padding: 0.25rem 0.125rem;
+  padding: 0 0.125rem;
   /* 1/16*4 */
   background-color: transparent;
   border-bottom: 1px solid transparent;
@@ -242,6 +242,9 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
     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: '';

package/components/tabs/style/dnb-tabs.min.css

@@ -1 +1 @@
-.dnb-tabs{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tabs *,.dnb-tabs :after,.dnb-tabs :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tabs :after,.dnb-tabs :before{text-decoration:inherit;vertical-align:inherit}.dnb-tabs__tabs{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-box-flex:0;-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;margin:0 -.5rem;overflow-x:auto;overscroll-behavior:contain;padding:0 .5rem;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow: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;-webkit-box-pack:end;-ms-flex-pack:end;flex-grow:1;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{bottom:0;content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-tabs:not(.dnb-tabs--has-scrollbar) .dnb-tabs__tabs__tablist{margin-left:-.5rem;padding-left:.5rem}.dnb-tabs__scroll-nav-button{display:none;opacity:0;position:absolute;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out;z-index:2}.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{opacity:0!important;pointer-events:none}.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:.5rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type{padding-right:1.5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;outline:none;padding:.25rem .125rem;position:relative;text-decoration:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:1rem;font-size:var(--font-size-small);-webkit-transform:translateY(-.125rem);transform:translateY(-.125rem)}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:0;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-tabs__content--spacing{padding-top:2rem}
+.dnb-tabs{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tabs *,.dnb-tabs :after,.dnb-tabs :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tabs :after,.dnb-tabs :before{text-decoration:inherit;vertical-align:inherit}.dnb-tabs__tabs{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-box-flex:0;-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;margin:0 -.5rem;overflow-x:auto;overscroll-behavior:contain;padding:0 .5rem;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow: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;-webkit-box-pack:end;-ms-flex-pack:end;flex-grow:1;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{bottom:0;content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-tabs:not(.dnb-tabs--has-scrollbar) .dnb-tabs__tabs__tablist{margin-left:-.5rem;padding-left:.5rem}.dnb-tabs__scroll-nav-button{display:none;opacity:0;position:absolute;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out;z-index:2}.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{opacity:0!important;pointer-events:none}.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:.5rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type{padding-right:1.5rem}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;text-decoration:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:1rem;font-size:var(--font-size-small);-webkit-transform:translateY(-.125rem);transform:translateY(-.125rem)}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-tabs__content--spacing{padding-top:2rem}

package/components/tabs/style/themes/dnb-tabs-theme-ui.css

@@ -65,8 +65,10 @@
   font-size: 1.125rem;
   font-size: var(--font-size-basis);
   text-align: center;
+  display: block;
   color: #007272;
-  color: var(--color-sea-green); }
+  color: var(--color-sea-green);
+  padding: 0.5rem 0 0.25rem 0; }
 
 html:not([data-whatintent='touch']) .dnb-tabs__button:hover[disabled] {
   cursor: not-allowed; }
@@ -75,48 +77,49 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
   background-color: #d2f0e9;
   background-color: var(--color-mint-green-50); }
   html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled])::after {
-    height: 3px;
-    border-radius: 1.5px;
+    height: 2px;
+    border-radius: 2px;
     background-color: #007272;
     background-color: var(--color-sea-green); }
 
-.dnb-tabs__button:focus::before {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: -0.5rem;
-  bottom: 0;
-  right: -0.5rem;
-  height: inherit;
-  border-radius: inherit;
-  outline: none; }
-  html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
-    --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__button:focus::before {
-        -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); } }
-
-.dnb-tabs__button:focus::before {
-  top: 2px;
-  bottom: 2px;
-  right: 0;
-  left: 0;
-  border-radius: 0.25rem; }
+.dnb-tabs__button:focus {
+  overflow: visible; }
+  .dnb-tabs__button:focus::before {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: -0.5rem;
+    bottom: 0;
+    right: -0.5rem;
+    height: inherit;
+    border-radius: inherit;
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
+      --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__button:focus::before {
+          -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); } }
+  .dnb-tabs__button:focus::before {
+    top: 0.5rem;
+    left: -0.375rem;
+    right: -0.375rem;
+    bottom: 0.5rem;
+    border-radius: 1.5rem; }
 
 .dnb-tabs__button[disabled] .dnb-tabs__button__title {
   color: #b3dada;
   color: var(--color-sea-green-30); }
 
 .dnb-tabs__button:not([disabled]):active::after, .dnb-tabs__button:not([disabled]).selected::after {
-  height: 3px;
-  border-radius: 1.5px;
+  height: 2px;
+  border-radius: 2px;
   background-color: #007272;
   background-color: var(--color-sea-green); }
 

package/components/tabs/style/themes/dnb-tabs-theme-ui.min.css

@@ -1 +1 @@
-.dnb-tabs__tabs:not(.dnb-section):before{background-color:#ebebeb;background-color:var(--color-black-8);-webkit-box-shadow:100vw 0 0 0 #ebebeb;box-shadow:100vw 0 0 0 #ebebeb;-webkit-box-shadow:100vw 0 0 0 var(--color-black-8);box-shadow:100vw 0 0 0 var(--color-black-8)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:after{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button__title{color:#007272;color:var(--color-sea-green);font-size:1.125rem;font-size:var(--font-size-basis);font-weight:400;font-weight:var(--font-weight-regular);text-align:center}html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:#007272;background-color:var(--color-sea-green);border-radius:1.5px;height:3px}.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button:focus:before{border-radius:.25rem;bottom:2px;left:0;right:0;top:2px}.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:#b3dada;color:var(--color-sea-green-30)}.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:#007272;background-color:var(--color-sea-green);border-radius:1.5px;height:3px}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:#14555a;color:var(--color-emerald-green)}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}
+.dnb-tabs__tabs:not(.dnb-section):before{background-color:#ebebeb;background-color:var(--color-black-8);-webkit-box-shadow:100vw 0 0 0 #ebebeb;box-shadow:100vw 0 0 0 #ebebeb;-webkit-box-shadow:100vw 0 0 0 var(--color-black-8);box-shadow:100vw 0 0 0 var(--color-black-8)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:after{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button__title{color:#007272;color:var(--color-sea-green);display:block;font-size:1.125rem;font-size:var(--font-size-basis);font-weight:400;font-weight:var(--font-weight-regular);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:focus{overflow:visible}.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button:focus:before{border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:#b3dada;color:var(--color-sea-green-30)}.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:#14555a;color:var(--color-emerald-green)}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}

package/components/tabs/style/themes/dnb-tabs-theme-ui.scss

@@ -62,27 +62,30 @@
       font-size: var(--font-size-basis);
       text-align: center;
 
+      display: block;
       color: var(--color-sea-green);
+      padding: 0.5rem 0 0.25rem 0;
     }
 
     // hover
     @include hover() {
       background-color: var(--color-mint-green-50);
       &::after {
-        height: 3px;
-        border-radius: 1.5px;
+        height: 2px;
+        border-radius: 2px;
         background-color: var(--color-sea-green);
       }
     }
 
     &:focus {
       @include buttonFocusRing();
+      overflow: visible;
       &::before {
-        top: 2px;
-        bottom: 2px;
-        right: 0;
-        left: 0;
-        border-radius: 0.25rem;
+        top: 0.5rem;
+        left: -0.375rem; // For overflow purposes
+        right: -0.375rem; // For overflow purposes
+        bottom: 0.5rem;
+        border-radius: 1.5rem;
       }
     }
 
@@ -95,8 +98,8 @@
     &:not([disabled]):active,
     &:not([disabled]).selected {
       &::after {
-        height: 3px;
-        border-radius: 1.5px;
+        height: 2px;
+        border-radius: 2px;
         background-color: var(--color-sea-green);
       }
     }

package/es/components/input-masked/InputMaskedHooks.js

@@ -232,8 +232,9 @@ const useCallEvent = ({
     value = value || event.target.value;
     const keyCode = keycode(event);
     const selStart = event.target.selectionStart;
+    const isUnidentified = event.which === 229 || keyCode === undefined;
 
-    if (name === 'on_key_down' && !(maskParams !== null && maskParams !== void 0 && maskParams.allowLeadingZeroes) && (keyCode === '0' || value.replace(/[^\d]/g, '') === '' && decimalSeparators.test(keyCode))) {
+    if (name === 'on_key_down' && !isUnidentified && !(maskParams !== null && maskParams !== void 0 && maskParams.allowLeadingZeroes) && (keyCode === '0' || value.replace(/[^\d]/g, '') === '' && decimalSeparators.test(keyCode))) {
       const testValue = (value.slice(0, selStart) + '0' + value.slice(selStart + 1, value.length)).replace(/[^\d]/g, '');
 
       if (/^0/.test(testValue)) {
@@ -242,7 +243,7 @@ const useCallEvent = ({
       }
     }
 
-    if (name === 'on_key_down' && maskParams !== null && maskParams !== void 0 && maskParams.decimalSymbol) {
+    if (name === 'on_key_down' && !isUnidentified && maskParams !== null && maskParams !== void 0 && maskParams.decimalSymbol) {
       const hasDecimalSymbol = value.includes(maskParams.decimalSymbol);
       const allowedDecimals = maskParams.decimalLimit > 0 || maskParams.allowDecimal !== false;
 

package/es/components/input-masked/InputMaskedUtils.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { format, getDecimalSeparator, getThousandsSeparator } from '../number-format/NumberUtils';
 import { warn } from '../../shared/component-helper';
-import { IS_IE11 } from '../../shared/helpers';
+import { IS_IE11, IS_ANDROID } from '../../shared/helpers';
 const enableLocaleSupportWhen = ['as_number', 'as_percent', 'as_currency'];
 const enableNumberMaskWhen = ['as_number', 'as_percent', 'as_currency', 'number_mask', 'currency_mask'];
 export const invisibleSpace = '\u200B';
@@ -67,7 +67,7 @@ export const correctNumberValue = ({
 
     if (endsWithDecimal) {
       value = `${value}${decimalSymbol}`;
-    } else if (endsWithZeroAndDecimal) {
+    } else if (endsWithZeroAndDecimal && !numberValue.endsWith(`${decimalSymbol}0`)) {
       value = `${value}${decimalSymbol}0`;
     }
 
@@ -187,7 +187,7 @@ export const handleNumberMask = ({
 export function getInputModeFromMask(mask) {
   const maskParams = mask === null || mask === void 0 ? void 0 : mask.maskParams;
 
-  if (maskParams && (mask === null || mask === void 0 ? void 0 : mask.instanceOf) === 'createNumberMask') {
+  if (!IS_ANDROID && maskParams && (mask === null || mask === void 0 ? void 0 : mask.instanceOf) === 'createNumberMask') {
     return maskParams.allowDecimal && maskParams.decimalLimit !== 0 ? 'decimal' : 'numeric';
   }
 

package/es/components/pagination/Pagination.d.ts

@@ -80,6 +80,8 @@ export type PaginationChildren =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 export interface PaginationProps extends React.HTMLProps<HTMLElement> {
+  debug?: boolean;
+
   /**
    * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
@@ -356,6 +358,8 @@ export type PaginationInstanceChildren =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 export interface PaginationInstanceProps {
+  debug?: boolean;
+
   /**
    * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
@@ -634,6 +638,8 @@ export type InfinityMarkerChildren =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 export interface InfinityMarkerProps {
+  debug?: boolean;
+
   /**
    * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */

package/es/components/pagination/Pagination.js

@@ -23,6 +23,7 @@ import { PaginationIndicator } from './PaginationHelpers';
 import InfinityScroller from './PaginationInfinity';
 import PaginationBar from './PaginationBar';
 const paginationPropTypes = process.env.NODE_ENV !== "production" ? _objectSpread(_objectSpread({
+  debug: PropTypes.bool,
   startup_page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   current_page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   page_count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -61,6 +62,7 @@ const paginationPropTypes = process.env.NODE_ENV !== "production" ? _objectSprea
   on_end: PropTypes.func
 }) : {};
 const paginationDefaultProps = {
+  debug: null,
   startup_page: null,
   current_page: null,
   page_count: null,

package/es/components/pagination/PaginationBar.js

@@ -50,7 +50,7 @@ export default class PaginationBar extends React.PureComponent {
 
   componentDidMount() {
     const context = this.context.pagination;
-    const currentPage = context.startupPage || context.currentPage;
+    const currentPage = context.startupPage || context.currentPage || 1;
     const items = context.prefillItems(currentPage, {
       skipObserver: true
     });

package/es/components/pagination/PaginationInfinity.js

@@ -10,7 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { warn, isTrue, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { warn, isTrue, dispatchCustomElementEvent, getPreviousSibling } from '../../shared/component-helper';
 import Context from '../../shared/Context';
 import Button from '../button/Button';
 import { preparePageElement, isTrElement, PaginationIndicator } from './PaginationHelpers';
@@ -25,20 +25,26 @@ export default class InfinityScroller extends React.PureComponent {
         startup_count
       } = this.context.pagination;
       const startupCount = parseFloat(startup_count);
+      let newPageNo, skipObserver, callStartupEvent, preventWaitForDelay;
 
-      for (let i = 0, newPageNo; i < startupCount; ++i) {
+      for (let i = 0; i < startupCount; ++i) {
         newPageNo = startupPage + i;
+        skipObserver = newPageNo < startupCount;
+        callStartupEvent = i === 0;
+        preventWaitForDelay = i <= startupCount - 1;
         this.getNewContent(newPageNo, {
           position: 'after',
-          skipObserver: newPageNo < startupCount
+          skipObserver
         }, {
-          isStartup: i === 0
+          callStartupEvent,
+          preventWaitForDelay
         });
       }
     });
 
     _defineProperty(this, "getNewContent", (newPageNo, props = {}, {
-      isStartup = false
+      callStartupEvent = false,
+      preventWaitForDelay = false
     } = {}) => {
       const {
         pageCount,
@@ -58,9 +64,12 @@ export default class InfinityScroller extends React.PureComponent {
       }
 
       const items = this.context.pagination.prefillItems(newPageNo, props);
-      this.context.pagination.setItems(items, () => this.callEventHandler(newPageNo, {
-        isStartup
-      }));
+      this.context.pagination.setItems(items, () => {
+        this.callEventHandler(newPageNo, {
+          callStartupEvent,
+          preventWaitForDelay
+        });
+      });
     });
 
     this.hideIndicator = isTrue(context.pagination.hide_progress_indicator);
@@ -75,47 +84,66 @@ export default class InfinityScroller extends React.PureComponent {
     this.callOnUnmount.forEach(f => typeof f === 'function' && f());
   }
 
-  waitForReachedTime(fn, ...props) {
+  waitForReachedTime(fn, params) {
     this.callbackBuffer = this.callbackBuffer || [];
     this.callbackBuffer.push({
       fn,
-      props
+      params
+    });
+    this.callBuffer({
+      minTime: params.preventWaitForDelay ? -1 : this.context.pagination.minTime
     });
-    this.callBuffer();
   }
 
-  callBuffer() {
-    const {
-      minTime
-    } = this.context.pagination;
+  callBuffer({
+    minTime = this.context.pagination.minTime
+  } = {}) {
+    if (this.callbackBuffer.length === 0) {
+      return;
+    }
+
     const diff = this._lastCall > 0 ? new Date().getTime() - this._lastCall : 0;
     const waitTime = diff < minTime ? minTime : 0;
-    clearTimeout(this._bufferTimeout);
-    this._bufferTimeout = setTimeout(() => {
+
+    const nextTick = () => {
       if (this.callbackBuffer.length > 0) {
         this._lastCall = new Date().getTime();
         const {
           fn,
-          props
+          params
         } = this.callbackBuffer.shift();
-        fn(...props);
-        this.callBuffer();
+        fn(params);
+        this.callBuffer({
+          minTime: params.preventWaitForDelay ? -1 : minTime
+        });
       }
-    }, waitTime);
+    };
+
+    if (minTime > 0) {
+      clearTimeout(this._bufferTimeout);
+      this._bufferTimeout = setTimeout(nextTick, waitTime);
+    } else {
+      nextTick();
+    }
   }
 
   callEventHandler(pageNumber, {
-    isStartup = false,
+    callStartupEvent = false,
+    preventWaitForDelay = false,
     callOnEnd = false,
     onDispatch = null
   } = {}) {
     this.waitForReachedTime(({
       pageNumber,
-      isStartup
+      callStartupEvent
     }) => {
       const context = this.context.pagination;
 
       const createEvent = eventName => {
+        if (isNaN(pageNumber)) {
+          pageNumber = 1;
+        }
+
         const ret = dispatchCustomElementEvent(context, eventName, _objectSpread({
           page: pageNumber,
           pageNo: pageNumber,
@@ -134,7 +162,7 @@ export default class InfinityScroller extends React.PureComponent {
       if (callOnEnd) {
         createEvent('on_end');
       } else {
-        if (isStartup) {
+        if (callStartupEvent) {
           createEvent('on_startup');
         } else {
           createEvent('on_change');
@@ -144,7 +172,8 @@ export default class InfinityScroller extends React.PureComponent {
       }
     }, {
       pageNumber,
-      isStartup
+      callStartupEvent,
+      preventWaitForDelay
     });
   }
 
@@ -155,19 +184,41 @@ export default class InfinityScroller extends React.PureComponent {
     const {
       lowerPage,
       upperPage,
+      currentPage,
       pageCount,
       hasEndedInfinity,
       parallelLoadCount,
+      debug,
+      current_page,
       fallback_element,
       marker_element,
       indicator_element
     } = this.context.pagination;
 
+    if (debug) {
+      console.info('PaginationInfinity.render', {
+        current_page,
+        lowerPage,
+        upperPage,
+        currentPage,
+        pageCount
+      });
+    }
+
     const Marker = () => React.createElement(InteractionMarker, {
+      debug: debug,
       pageNumber: upperPage,
       markerElement: marker_element || fallback_element,
       onVisible: pageNumber => {
-        for (let i = 0, newPageNo; i < parallelLoadCount; ++i) {
+        if (debug) {
+          console.info('PaginationInfinity.onVisible', {
+            pageNumber
+          });
+        }
+
+        let newPageNo;
+
+        for (let i = 0; i < parallelLoadCount; ++i) {
           newPageNo = pageNumber + 1 + i;
           this.context.pagination.onPageUpdate(() => {
             this.context.pagination.setState({
@@ -197,7 +248,7 @@ export default class InfinityScroller extends React.PureComponent {
       }
     });
 
-    return React.createElement(React.Fragment, null, lowerPage > 1 && React.createElement(LoadButton, null), children, !hasEndedInfinity && (typeof pageCount === 'undefined' || upperPage < pageCount) && React.createElement(Marker, null), !hasEndedInfinity && !this.hideIndicator && (typeof pageCount === 'undefined' || upperPage < pageCount) && React.createElement(PaginationIndicator, {
+    return React.createElement(React.Fragment, null, parseFloat(current_page) > 0 && lowerPage > 1 && React.createElement(LoadButton, null), children, !hasEndedInfinity && parseFloat(current_page) > 0 && (typeof pageCount === 'undefined' || upperPage < pageCount) && React.createElement(Marker, null), !hasEndedInfinity && !this.hideIndicator && (typeof pageCount === 'undefined' || upperPage < pageCount) && React.createElement(PaginationIndicator, {
       indicator_element: indicator_element || fallback_element
     }));
   }
@@ -216,16 +267,16 @@ export default class InfinityScroller extends React.PureComponent {
       indicator_element
     } = this.context.pagination;
 
-    if (this.context.pagination.useMarkerOnly) {
-      return this.handleInfinityMarker();
-    }
-
     if (!(items && items.length > 0)) {
       clearTimeout(this._startupTimeout);
       this._startupTimeout = setTimeout(this.startup, 1);
       return null;
     }
 
+    if (this.context.pagination.useMarkerOnly) {
+      return this.handleInfinityMarker();
+    }
+
     const Element = preparePageElement(page_element || React.Fragment);
     return items.map(({
       pageNumber,
@@ -241,7 +292,9 @@ export default class InfinityScroller extends React.PureComponent {
         pageNumber: pageNumber,
         markerElement: marker_element || fallback_element,
         onVisible: pageNumber => {
-          for (let i = 0, newPageNo; i < parallelLoadCount; ++i) {
+          let newPageNo;
+
+          for (let i = 0; i < parallelLoadCount; ++i) {
             newPageNo = pageNumber + 1 + i;
             this.getNewContent(newPageNo, {
               position: 'after',
@@ -250,6 +303,7 @@ export default class InfinityScroller extends React.PureComponent {
           }
         }
       });
+      const showIndicator = (parallelLoadCount > 1 && idx > 0 ? isLastItem : true) && !hasContent && !this.hideIndicator;
       return React.createElement(Elem, {
         key: pageNumber,
         ref: ref
@@ -261,7 +315,7 @@ export default class InfinityScroller extends React.PureComponent {
           skipObserver: true,
           event
         })
-      }), placeMakerBeforeContent && marker, content, !placeMakerBeforeContent && marker, (parallelLoadCount > 1 && idx > 0 ? isLastItem : true) && !hasContent && !this.hideIndicator && React.createElement(PaginationIndicator, {
+      }), placeMakerBeforeContent && marker, content, !placeMakerBeforeContent && marker, showIndicator && React.createElement(PaginationIndicator, {
         indicator_element: indicator_element || fallback_element
       }), hasContent && this.useLoadButton && isLastItem && (typeof pageCount === 'undefined' || pageNumber < pageCount) && React.createElement(InfinityLoadButton, {
         element: fallback_element,
@@ -343,14 +397,31 @@ class InteractionMarker extends React.PureComponent {
       this._isMounted = true;
       (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.observe(this._ref.current);
     }
+
+    if (this.props.debug) {
+      const height = this.getContentHeight();
+      console.info('PaginationInfinity.getContentHeight', height);
+    }
   }
 
   componentWillUnmount() {
-    var _this$intersectionObs3;
-
     this._isMounted = false;
-    clearTimeout(this._readyTimeout);
-    (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.disconnect();
+
+    if (this.intersectionObserver) {
+      clearTimeout(this._readyTimeout);
+      this.intersectionObserver.disconnect();
+    }
+  }
+
+  getContentHeight() {
+    let height = 0;
+
+    try {
+      const sibling = getPreviousSibling('dnb-table', this._ref.current);
+      height = parseFloat(window.getComputedStyle(sibling.querySelector('tbody')).height);
+    } catch (e) {}
+
+    return height;
   }
 
   render() {
@@ -375,10 +446,12 @@ class InteractionMarker extends React.PureComponent {
 }
 
 _defineProperty(InteractionMarker, "defaultProps", {
+  debug: null,
   markerElement: null
 });
 
 process.env.NODE_ENV !== "production" ? InteractionMarker.propTypes = {
+  debug: PropTypes.bool,
   pageNumber: PropTypes.number.isRequired,
   onVisible: PropTypes.func.isRequired,
   markerElement: PropTypes.oneOfType([PropTypes.object, PropTypes.node, PropTypes.func, PropTypes.string])