@dnb/eufemia 9.16.2 → 9.16.3

package/esm/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/esm/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/esm/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/esm/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/esm/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);
       }
     }