@dnb/eufemia 9.15.2 → 9.16.3

package/cjs/components/tabs/Tabs.js

@@ -8,8 +8,6 @@ require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
 
-require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.symbol.iterator.js");
 
 require("core-js/modules/es.array.iterator.js");
@@ -45,6 +43,8 @@ require("core-js/modules/es.parse-float.js");
 
 require("core-js/modules/es.array.filter.js");
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/es.array.reduce.js");
 
 require("core-js/modules/es.array.map.js");
@@ -86,7 +86,8 @@ var _TabsContentWrapper = _interopRequireDefault(require("./TabsContentWrapper")
 var _EventEmitter = _interopRequireDefault(require("../../shared/EventEmitter"));
 
 var _excluded = ["children"],
-    _excluded2 = ["title", "key", "hash"];
+    _excluded2 = ["children", "className"],
+    _excluded3 = ["title", "key", "hash"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -141,12 +142,12 @@ var Tabs = function (_React$PureComponent) {
 
   var _super = _createSuper(Tabs);
 
-  function Tabs(props) {
+  function Tabs(_props) {
     var _this;
 
     _classCallCheck(this, Tabs);
 
-    _this = _super.call(this, props);
+    _this = _super.call(this, _props);
 
     _defineProperty(_assertThisInitialized(_this), "init", function () {
       if (_this._isMounted) {
@@ -508,7 +509,9 @@ var Tabs = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "TabsListHandler", function (_ref5) {
       var children = _ref5.children,
-          className = _ref5.className;
+          className = _ref5.className,
+          rest = _objectWithoutProperties(_ref5, _excluded2);
+
       var _this$props3 = _this.props,
           align = _this$props3.align,
           tabs_style = _this$props3.tabs_style,
@@ -516,10 +519,10 @@ var Tabs = function (_React$PureComponent) {
       var _this$state = _this.state,
           hasScrollbar = _this$state.hasScrollbar,
           atEdge = _this$state.atEdge;
-      return _react.default.createElement("div", {
+      return _react.default.createElement("div", _extends({
         className: (0, _classnames.default)('dnb-tabs__tabs', className, align && "dnb-tabs__tabs--".concat(align), tabs_style && "dnb-section dnb-section--".concat(tabs_style), tabs_spacing && "dnb-section--spacing-".concat((0, _componentHelper.isTrue)(tabs_spacing) ? 'default' : tabs_spacing), hasScrollbar && 'dnb-tabs--has-scrollbar', atEdge && 'dnb-tabs--at-edge'),
         ref: _this._tabsRef
-      }, _react.default.createElement(ScrollNavButton, {
+      }, rest), _react.default.createElement(ScrollNavButton, {
         onMouseDown: _this.openPrevTab,
         icon: "chevron_left",
         className: (0, _classnames.default)(hasScrollbar && 'dnb-tabs__scroll-nav-button--visible', _this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
@@ -547,18 +550,26 @@ var Tabs = function (_React$PureComponent) {
       }, content);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "TabsHandler", function () {
-      var _this$_props = _this._props,
-          label = _this$_props.label,
-          skeleton = _this$_props.skeleton;
+    _defineProperty(_assertThisInitialized(_this), "TabsHandler", function (props) {
+      var _this$_props$props = _objectSpread(_objectSpread({}, _this._props), props),
+          label = _this$_props$props.label,
+          skeleton = _this$_props$props.skeleton,
+          tab_element = _this$_props$props.tab_element;
+
       var selected_key = _this.state.selected_key;
+      var TabElement = tab_element || 'button';
 
       var tabs = _this.state.data.map(function (_ref6) {
         var title = _ref6.title,
             key = _ref6.key,
             _ref6$disabled = _ref6.disabled,
-            disabled = _ref6$disabled === void 0 ? false : _ref6$disabled;
-        var itemParams = {};
+            disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+            to = _ref6.to,
+            href = _ref6.href;
+        var itemParams = {
+          to: to,
+          href: href
+        };
 
         var isFocus = _this.isFocus(key);
 
@@ -573,12 +584,15 @@ var Tabs = function (_React$PureComponent) {
           itemParams['aria-disabled'] = true;
         }
 
+        if (TabElement === 'button') {
+          itemParams.type = 'button';
+        }
+
         (0, _SkeletonHelper.skeletonDOMAttributes)(itemParams, skeleton, _this.context);
         return _react.default.createElement("div", {
           className: (0, _classnames.default)('dnb-tabs__button__snap', isFocus && 'focus', isSelected && 'selected'),
           key: "tab-".concat(key)
-        }, _react.default.createElement("button", _extends({
-          type: "button",
+        }, _react.default.createElement(TabElement, _extends({
           role: "tab",
           tabIndex: "-1",
           id: "".concat(_this._id, "-tab-").concat(key),
@@ -612,12 +626,12 @@ var Tabs = function (_React$PureComponent) {
       }, params), tabs);
     });
 
-    _this._id = props.id || (0, _componentHelper.makeUniqueId)();
-    var data = Tabs.getData(props);
+    _this._id = _props.id || (0, _componentHelper.makeUniqueId)();
+    var data = Tabs.getData(_props);
 
-    var _selected_key = Tabs.getSelectedKeyOrFallback(props.selected_key, data);
+    var _selected_key = Tabs.getSelectedKeyOrFallback(_props.selected_key, data);
 
-    if (props.use_hash && typeof window !== 'undefined') {
+    if (_props.use_hash && typeof window !== 'undefined') {
       try {
         var useHashKey = String(window.location.hash).replace('#', '');
 
@@ -637,14 +651,14 @@ var Tabs = function (_React$PureComponent) {
       atEdge: false,
       hasScrollbar: lastPosition > -1,
       _selected_key: _selected_key,
-      _data: props.data || props.children,
+      _data: _props.data || _props.children,
       _listenForPropChanges: true
     };
     _this._tabsRef = _react.default.createRef();
     _this._tablistRef = _react.default.createRef();
 
-    if (props.id) {
-      _this._eventEmitter = _EventEmitter.default.createInstance(props.id);
+    if (_props.id) {
+      _this._eventEmitter = _EventEmitter.default.createInstance(_props.id);
 
       _this._eventEmitter.set(_this.getEventArgs({
         selected_key: _selected_key
@@ -1067,7 +1081,7 @@ var Tabs = function (_React$PureComponent) {
                 title = _dataProps$componentP.title,
                 _key = _dataProps$componentP.key,
                 hash = _dataProps$componentP.hash,
-                rest = _objectWithoutProperties(_dataProps$componentP, _excluded2);
+                rest = _objectWithoutProperties(_dataProps$componentP, _excluded3);
 
             acc.push(_objectSpread({
               title: title,
@@ -1121,6 +1135,7 @@ _defineProperty(Tabs, "defaultProps", {
   content_style: null,
   content_spacing: true,
   label: null,
+  tab_element: 'button',
   selected_key: null,
   align: 'left',
   tabs_style: null,
@@ -1160,6 +1175,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   content_style: _propTypes.default.string,
   content_spacing: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   label: _propTypes.default.string,
+  tab_element: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.node, _propTypes.default.func]),
   selected_key: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   align: _propTypes.default.oneOf(['left', 'center', 'right']),
   tabs_style: _propTypes.default.string,

package/cjs/components/tabs/TabsContentWrapper.js

@@ -4,6 +4,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 require("core-js/modules/es.object.get-prototype-of.js");
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/es.reflect.construct.js");
 
 require("core-js/modules/es.object.keys.js");
@@ -16,8 +18,6 @@ require("core-js/modules/es.object.assign.js");
 
 require("core-js/modules/es.symbol.description.js");
 
-require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.symbol.iterator.js");
 
 require("core-js/modules/es.array.iterator.js");

package/cjs/components/tabs/TabsCustomContent.js

@@ -4,6 +4,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 require("core-js/modules/es.object.get-prototype-of.js");
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/es.reflect.construct.js");
 
 require("core-js/modules/es.object.keys.js");
@@ -22,8 +24,6 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 
 require("core-js/modules/es.symbol.description.js");
 
-require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.symbol.iterator.js");
 
 require("core-js/modules/es.array.iterator.js");

package/cjs/components/tabs/style/_tabs.scss

@@ -139,7 +139,7 @@
     -webkit-user-select: none; // Safari / Touch fix
 
     margin: 0;
-    padding: 0.25rem 0.125rem; /* 1/16*4 */
+    padding: 0 0.125rem; /* 1/16*4 */
 
     background-color: transparent;
     border-bottom: 1px solid transparent;
@@ -151,6 +151,8 @@
     font-size: var(--font-size-basis);
     line-height: var(--line-height-basis);
 
+    text-decoration: none;
+
     white-space: nowrap;
 
     // should be same as .lead small
@@ -165,6 +167,10 @@
 
     @include dummySpacing();
 
+    & .dnb-dummy {
+      margin-top: 0.25rem;
+    }
+
     &::after {
       content: '';
       position: absolute;

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

@@ -0,0 +1,260 @@
+/*
+* DNB Tabs
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-tabs {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-tabs *,
+  .dnb-tabs ::before,
+  .dnb-tabs ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tabs ::before,
+  .dnb-tabs ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+ * 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: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 {
+    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 {
+    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; }

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

@@ -0,0 +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: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/cjs/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/cjs/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/cjs/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);
       }
     }