@dnb/eufemia 9.23.0-beta.4 → 9.24.0

package/es/components/number-format/NumberFormat.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["id", "value", "prefix", "suffix", "children", "currency", "currency_display", "currency_position", "ban", "nin", "phone", "org", "percent", "link", "tooltip", "skeleton", "options", "locale", "decimals", "omit_rounding", "clean", "selectall", "copy_selection", "clean_copy_value", "element", "class", "className"];
+const _excluded = ["id", "value", "prefix", "suffix", "children", "currency", "currency_display", "currency_position", "compact", "ban", "nin", "phone", "org", "percent", "link", "tooltip", "skeleton", "options", "locale", "decimals", "omit_rounding", "clean", "selectall", "copy_selection", "clean_copy_value", "element", "class", "className"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -129,6 +129,7 @@ export default class NumberFormat extends React.PureComponent {
       currency,
       currency_display,
       currency_position,
+      compact,
       ban,
       nin,
       phone,
@@ -165,6 +166,7 @@ export default class NumberFormat extends React.PureComponent {
       currency_display,
       currency_position,
       omit_currency_sign: this.state.omitCurrencySign,
+      compact,
       ban,
       nin,
       phone,
@@ -280,6 +282,7 @@ _defineProperty(NumberFormat, "defaultProps", {
   currency: null,
   currency_display: null,
   currency_position: null,
+  compact: null,
   ban: null,
   nin: null,
   phone: null,
@@ -311,6 +314,7 @@ process.env.NODE_ENV !== "production" ? NumberFormat.propTypes = _objectSpread(_
   currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   currency_display: PropTypes.string,
   currency_position: PropTypes.oneOf(['auto', 'before', 'after']),
+  compact: PropTypes.oneOfType([PropTypes.oneOf(['short', 'long']), PropTypes.bool]),
   ban: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   nin: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   phone: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

package/es/components/number-format/NumberUtils.d.ts

@@ -34,6 +34,9 @@ export interface formatOptionParams {
   /** Should the number be cleaned */
   clean?: boolean;
 
+  /** shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either a boolean, or a string with "short" or "long" */
+  compact?: boolean | 'short' | 'long';
+
   /** How many decimals */
   decimals?: number;
 
@@ -53,13 +56,19 @@ export interface formatOptionParams {
   /** Currency code (ISO 4217) or `true` to use the default, `NOK`. */
   currency?: string | boolean;
 
-  /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name */
-  currency_display?: string | boolean;
+  /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name. Defaults to narrowSymbol when the locale is no else we default to code. */
+  currency_display?:
+    | boolean
+    | ''
+    | 'code'
+    | 'name'
+    | 'symbol'
+    | 'narrowSymbol';
   /** currency option */
   currency_position?: formatCurrencyPosition;
   /** hides the currency sign */
   omit_currency_sign?: boolean;
-  /** will remove all extra signs,like a currency sign or percent sign for the cleanedValue return when returnAria is true */
+  /** will remove all extra signs, like a currency sign or percent sign for the cleanedValue return when returnAria is true */
   clean_copy_value?: boolean;
 
   /** Intl.NumberFormat options (NumberFormatOptions) */

package/es/components/number-format/NumberUtils.js

@@ -13,6 +13,7 @@ const NUMBER_CHARS = '\\-0-9,.';
 export const format = (value, {
   locale = null,
   clean = false,
+  compact = null,
   phone = null,
   org = null,
   ban = null,
@@ -50,7 +51,7 @@ export const format = (value, {
 
   if (parseFloat(decimals) >= 0) {
     value = formatDecimals(value, decimals, omit_rounding, opts);
-  } else {
+  } else if (typeof opts.maximumFractionDigits === 'undefined') {
     opts.maximumFractionDigits = 20;
   }
 
@@ -105,6 +106,13 @@ export const format = (value, {
   } else if (isTrue(currency) || typeof currency === 'string') {
     type = 'currency';
     opts.currency = opts.currency || (isTrue(currency) ? CURRENCY : currency);
+    handleCompactBeforeDisplay({
+      value,
+      locale,
+      compact,
+      decimals,
+      opts
+    });
 
     if (decimals === null) {
       decimals = 2;
@@ -118,7 +126,7 @@ export const format = (value, {
     }
 
     opts.style = 'currency';
-    opts.currencyDisplay = getFallbackCurrencyDisplay(locale, opts.currency_display || currency_display);
+    opts.currencyDisplay = getFallbackCurrencyDisplay(locale, opts.currencyDisplay || currency_display);
 
     if (typeof opts.minimumFractionDigits === 'undefined' && String(value).indexOf('.') === -1 && cleanedNumber % 1 === 0) {
       opts.minimumFractionDigits = 0;
@@ -166,6 +174,11 @@ export const format = (value, {
       }
     }
 
+    handleCompactBeforeAria({
+      value,
+      compact,
+      opts
+    });
     aria = formatNumber(cleanedNumber, locale, _objectSpread(_objectSpread({
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
@@ -181,12 +194,21 @@ export const format = (value, {
       aria = prepareMinus(aria, locale);
     }
   } else {
+    handleCompactBeforeDisplay({
+      value,
+      locale,
+      compact,
+      decimals,
+      opts
+    });
     display = formatNumber(value, locale, opts);
     display = prepareMinus(display, locale);
-    aria = formatNumber(value, locale, _objectSpread(_objectSpread({}, opts), {}, {
-      minimumFractionDigits: 1,
-      maximumFractionDigits: 20
-    }));
+    handleCompactBeforeAria({
+      value,
+      compact,
+      opts
+    });
+    aria = formatNumber(value, locale, opts);
     aria = enhanceSR(value, aria, locale);
   }
 
@@ -213,7 +235,7 @@ export const format = (value, {
       });
     } else {
       const thousandsSeparator = getThousandsSeparator(locale);
-      cleanedValue = display.replace(new RegExp(`${thousandsSeparator}(?=\\d{3})`, 'g'), '');
+      cleanedValue = String(display).replace(new RegExp(`${thousandsSeparator}(?=\\d{3})`, 'g'), '');
     }
 
     return {
@@ -732,4 +754,76 @@ function formatToParts({
   return [{
     value: number
   }];
+}
+
+function handleCompactBeforeDisplay({
+  value,
+  locale,
+  compact,
+  decimals = 0,
+  opts
+} = {}) {
+  if (!canHandleCompact({
+    value,
+    compact
+  })) {
+    return;
+  }
+
+  value = parseInt(Math.abs(value));
+  opts.notation = 'compact';
+
+  if (isTrue(compact) && locale && /(no|nb|nn)$/i.test(locale)) {
+    opts.compactDisplay = Math.abs(value) < 1000000 ? 'long' : 'short';
+  } else {
+    opts.compactDisplay = !isTrue(compact) ? compact : 'short';
+  }
+
+  if (typeof opts.maximumSignificantDigits === 'undefined') {
+    if (isNaN(parseFloat(decimals))) {
+      decimals = 0;
+    } else {
+      decimals = parseFloat(decimals);
+    }
+
+    const ref = String(value).length % 3;
+
+    if (ref === 2) {
+      decimals += 1;
+    } else if (ref === 0) {
+      decimals += 2;
+    }
+
+    opts.maximumSignificantDigits = decimals + 1;
+  }
+}
+
+function handleCompactBeforeAria({
+  value,
+  compact,
+  opts
+}) {
+  if (!canHandleCompact({
+    value,
+    compact
+  })) {
+    return;
+  }
+
+  opts.compactDisplay = 'long';
+}
+
+function canHandleCompact({
+  value,
+  compact
+}) {
+  if (IS_IE11) {
+    return false;
+  }
+
+  if (compact && Math.abs(value) >= 1000) {
+    return true;
+  }
+
+  return false;
 }

package/es/components/tabs/Tabs.js

@@ -134,36 +134,46 @@ export default class Tabs extends React.PureComponent {
     _defineProperty(this, "init", () => {
       if (this._isMounted) {
         this.addScrollBehaviour();
-        this.setScrollbarState();
-        this.scrollToTab({
-          type: 'focus',
-          behavior: 'auto'
-        });
-        this.scrollToTab({
-          type: 'selected',
-          behavior: 'auto'
+        const hasScrollbar = this.hasScrollbar();
+        const hasLastPosition = this.hasLastPosition();
+        this.setScrollbarState({
+          hasScrollbar
         });
 
+        if (hasLastPosition) {
+          this.setLeftPosition(this.state.lastPosition);
+        }
+
+        if (hasScrollbar) {
+          this.scrollToTab({
+            type: 'selected',
+            behavior: hasLastPosition ? 'smooth' : 'auto'
+          });
+        }
+
         if (this.hasLastUsedTab() !== null) {
           this.setState(null, this.setFocusOnTabButton);
         }
       }
     });
 
-    _defineProperty(this, "setScrollbarState", () => {
-      const hasScrollbar = this.hasScrollbar();
-
+    _defineProperty(this, "setScrollbarState", ({
+      hasScrollbar = this.hasScrollbar()
+    } = {}) => {
       if (hasScrollbar !== this.state.hasScrollbar) {
         this.setState({
           hasScrollbar
         });
       }
-
-      return hasScrollbar;
     });
 
     _defineProperty(this, "onResizeHandler", () => {
-      if (this.setScrollbarState()) {
+      const hasScrollbar = this.hasScrollbar();
+      this.setScrollbarState({
+        hasScrollbar
+      });
+
+      if (hasScrollbar) {
         this.scrollToTab({
           type: 'selected'
         });
@@ -482,11 +492,11 @@ export default class Tabs extends React.PureComponent {
       }, rest), React.createElement(ScrollNavButton, {
         onMouseDown: this.openPrevTab,
         icon: "chevron_left",
-        className: classnames(hasScrollbar && typeof this.state.isFirst !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
+        className: classnames(hasScrollbar && (typeof this.state.isFirst !== 'undefined' || this.hasLastPosition()) && 'dnb-tabs__scroll-nav-button--visible', this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
       }), children, React.createElement(ScrollNavButton, {
         onMouseDown: this.openNextTab,
         icon: "chevron_right",
-        className: classnames(hasScrollbar && typeof this.state.isLast !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
+        className: classnames(hasScrollbar && (typeof this.state.isLast !== 'undefined' || this.hasLastPosition()) && 'dnb-tabs__scroll-nav-button--visible', this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
       }));
     });
 
@@ -607,6 +617,7 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
       selected_key: _selected_key,
       focus_key: _selected_key,
       atEdge: false,
+      lastPosition,
       hasScrollbar: lastPosition > -1,
       _selected_key: _selected_key,
       _data: _props.data || _props.children,
@@ -664,12 +675,16 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
     }
   }
 
+  hasLastPosition() {
+    return this.state.lastPosition > -1;
+  }
+
   getLastPosition() {
     if (typeof window !== 'undefined') {
       try {
-        const pos = parseFloat(window.localStorage.getItem(`tabs-pos-${this._id}`)) || -1;
+        const pos = parseFloat(window.localStorage.getItem(`tabs-pos-${this._id}`));
         window.localStorage.removeItem(`tabs-pos-${this._id}`);
-        return pos;
+        return isNaN(pos) ? -1 : pos;
       } catch (e) {
         warn(e);
       }
@@ -702,10 +717,10 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
     }
   }
 
-  saveLastPosition(pos = this._tablistRef.current.scrollLeft) {
+  saveLastPosition(position = this._tablistRef.current.scrollLeft) {
     if (typeof window !== 'undefined') {
       try {
-        window.localStorage.setItem(`tabs-pos-${this._id}`, pos);
+        window.localStorage.setItem(`tabs-pos-${this._id}`, position);
       } catch (e) {
         warn(e);
       }
@@ -722,6 +737,14 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
     }
   }
 
+  setLeftPosition(scrollLeft) {
+    try {
+      this._tablistRef.current.style.scrollBehavior = 'auto';
+      this._tablistRef.current.scrollLeft = scrollLeft;
+      this._tablistRef.current.style.scrollBehavior = 'smooth';
+    } catch (e) {}
+  }
+
   scrollToTab({
     type,
     behavior = 'smooth'
@@ -750,7 +773,15 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
           const style = window.getComputedStyle(this._tabsRef.current);
           const margin = parseFloat(style.marginLeft);
           let padding = margin < 0 ? parseFloat(style.paddingLeft) : 0;
-          const leftPadding = (margin < 0 ? Math.abs(margin) : 0) + padding + parseFloat(window.getComputedStyle(first).paddingLeft);
+
+          if (!isFirst && !isLast && parseFloat(style.paddingLeft) < 16) {
+            const navButton = this._tabsRef.current.querySelector('.dnb-tabs__scroll-nav-button:first-of-type');
+
+            const additionalSpace = parseFloat(window.getComputedStyle(navButton).width) * 1.5;
+            padding += additionalSpace;
+          }
+
+          let leftPadding = (margin < 0 ? Math.abs(margin) : 0) + padding + parseFloat(window.getComputedStyle(first).paddingLeft);
           const offsetLeft = elem.offsetLeft;
           const left = elem && !isFirst ? offsetLeft - leftPadding : 0;
 
@@ -1022,8 +1053,7 @@ const ScrollNavButton = props => {
     variant: "primary",
     tabIndex: "-1",
     bounding: true,
-    "aria-hidden": true,
-    icon_size: "medium"
+    "aria-hidden": true
   }, props, {
     className: classnames('dnb-tabs__scroll-nav-button', props.className)
   }));

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

@@ -58,11 +58,13 @@
   }
 
   &__scroll-nav-button {
-    position: relative;
+    position: absolute;
     z-index: 2;
 
-    &.dnb-button--primary {
-      background-color: var(--color-emerald-green);
+    right: -2px;
+    &:first-of-type {
+      left: -2px;
+      right: auto;
     }
 
     display: none; // use "none" to remove it from markup by default
@@ -155,39 +157,19 @@
       padding-right: 0.5rem;
     }
 
-    // Make the transition smooth when its the first or last item
-    // keep focus and selected separate
-    &:first-of-type.selected.focus,
-    &:last-of-type.focus,
-    &:last-of-type.selected {
-      transition: padding 1s #{$defaultEasing} 10ms;
-    }
+    will-change: padding;
+    transition: padding 1s #{$defaultEasing};
   }
 
-  &--has-scrollbar &__button__snap {
-    &:first-of-type {
-      margin-left: -3rem;
-      padding-left: 3rem;
-    }
-    &:last-of-type {
-      margin-right: -3rem;
-      padding-right: 3rem;
-    }
-
-    &:first-of-type.focus,
-    &:first-of-type.selected.focus {
-      padding-left: 0;
-
+  html[data-whatinput='keyboard'] &__button__snap {
+    &:first-of-type.focus {
       // add space so the focus ring is visible within our overflow
       .dnb-tabs__button:focus {
         margin-left: 0.5rem;
       }
     }
 
-    &:last-of-type.focus,
-    &:last-of-type.selected.focus {
-      padding-right: 0;
-
+    &:last-of-type.focus {
       // add space so the focus ring is visible within our overflow
       /* stylelint-disable */
       .dnb-tabs__button:focus {
@@ -197,13 +179,6 @@
     }
   }
 
-  // Do this in order to have the selected tab to be nice aligned during scrollTo
-  &--has-scrollbar &__tabs__tablist {
-    margin: 0 -2rem; // The width of the nav-button
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   /* stylelint-disable */
   html[data-visual-test] & &__button,
   html[data-visual-test] & &__button__snap,

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

@@ -152,16 +152,17 @@
     .dnb-tabs__tabs--no-border::before {
       content: none; }
   .dnb-tabs__scroll-nav-button {
-    position: relative;
+    position: absolute;
     z-index: 2;
+    right: -2px;
     display: none;
     opacity: 0;
     pointer-events: none;
     -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: -2px;
+      right: auto; }
     .dnb-tabs__scroll-nav-button--visible {
       display: -webkit-box;
       display: -ms-flexbox;
@@ -230,7 +231,10 @@
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    padding: 0 1rem 0 1.5rem; }
+    padding: 0 1rem 0 1.5rem;
+    will-change: padding;
+    -webkit-transition: padding 1s cubic-bezier(0.42, 0, 0, 1);
+    transition: padding 1s cubic-bezier(0.42, 0, 0, 1); }
     @media screen and (max-width: 40em) {
       .dnb-tabs__button__snap {
         padding: 0 1rem; } }
@@ -238,29 +242,13 @@
       padding-left: 0; }
     .dnb-tabs__button__snap:last-of-type {
       padding-right: 0.5rem; }
-    .dnb-tabs__button__snap:first-of-type.selected.focus, .dnb-tabs__button__snap:last-of-type.focus, .dnb-tabs__button__snap:last-of-type.selected {
-      -webkit-transition: padding 1s cubic-bezier(0.42, 0, 0, 1) 10ms;
-      transition: padding 1s cubic-bezier(0.42, 0, 0, 1) 10ms; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type {
-    margin-left: -3rem;
-    padding-left: 3rem; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type {
-    margin-right: -3rem;
-    padding-right: 3rem; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus {
-    padding-left: 0; }
-    .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus .dnb-tabs__button:focus {
-      margin-left: 0.5rem; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus {
-    padding-right: 0;
+  html[data-whatinput='keyboard'] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus {
+    margin-left: 0.5rem; }
+  html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus {
     /* stylelint-disable */
     /* stylelint-enable */ }
-    .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus .dnb-tabs__button:focus {
+    html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus {
       margin-right: 0.5rem; }
-  .dnb-tabs--has-scrollbar .dnb-tabs__tabs__tablist {
-    margin: 0 -2rem;
-    padding-left: 3rem;
-    padding-right: 3rem; }
   html[data-visual-test] .dnb-tabs .dnb-tabs__button,
   html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,
   html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {

package/es/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;overflow-x:auto;overscroll-behavior:contain;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;-webkit-box-pack:end;-ms-flex-pack:end;-ms-flex:1;flex: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__tabs--no-border:before{content:none}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:relative;-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--visible{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.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;-webkit-transition:margin .4s ease-out;transition:margin .4s ease-out;-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__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__button__snap:first-of-type.selected.focus,.dnb-tabs__button__snap:last-of-type.focus,.dnb-tabs__button__snap:last-of-type.selected{-webkit-transition:padding 1s cubic-bezier(.42,0,0,1) 10ms;transition:padding 1s cubic-bezier(.42,0,0,1) 10ms}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type{margin-left:-3rem;padding-left:3rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type{margin-right:-3rem;padding-right:3rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus,.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus{padding-left:0}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus,.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus .dnb-tabs__button:focus{margin-left:.5rem}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus,.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus{padding-right:0}.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus,.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs--has-scrollbar .dnb-tabs__tabs__tablist{margin:0 -2rem;padding-left:3rem;padding-right:3rem}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{-webkit-transition:none!important;transition:none!important}.dnb-tabs__content--spacing{padding-top:2rem}
+.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;overflow-x:auto;overscroll-behavior:contain;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;-webkit-box-pack:end;-ms-flex-pack:end;-ms-flex:1;flex: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__tabs--no-border:before{content:none}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.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;-webkit-transition:margin .4s ease-out;transition:margin .4s ease-out;-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__button__snap{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 1rem 0 1.5rem;-webkit-transition:padding 1s cubic-bezier(.42,0,0,1);transition:padding 1s cubic-bezier(.42,0,0,1);will-change:padding}@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}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{-webkit-transition:none!important;transition:none!important}.dnb-tabs__content--spacing{padding-top:2rem}

package/es/components/tag/Tag.d.ts

@@ -13,6 +13,11 @@ export interface TagProps {
      * Default: null
      */
     icon?: IconPrimaryIcon;
+    /**
+     * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.
+     * Default: null
+     */
+    hasLabel?: boolean;
     /**
      * Custom className on the component root
      * Default: null
@@ -45,13 +50,7 @@ export interface TagProps {
     omitOnKeyUpDeleteEvent?: boolean;
 }
 export declare const defaultProps: {
-    className: any;
     skeleton: boolean;
-    text: any;
-    children: any;
-    icon: any;
-    onClick: any;
-    onDelete: any;
     omitOnKeyUpDeleteEvent: boolean;
 };
 declare const Tag: {

package/es/components/tag/Tag.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 
 var _IconPrimary;
 
-const _excluded = ["className", "skeleton", "children", "text", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
+const _excluded = ["className", "skeleton", "children", "text", "hasLabel", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
 import React from 'react';
 import classnames from 'classnames';
 import IconPrimary from '../icon-primary/IconPrimary';
@@ -14,13 +14,7 @@ import { usePropsWithContext } from '../../shared/hooks';
 import TagGroup from './TagGroup';
 import { TagGroupContext } from './TagContext';
 export const defaultProps = {
-  className: null,
   skeleton: false,
-  text: null,
-  children: null,
-  icon: null,
-  onClick: null,
-  onDelete: null,
   omitOnKeyUpDeleteEvent: false
 };
 
@@ -36,6 +30,7 @@ const Tag = localProps => {
     skeleton,
     children,
     text,
+    hasLabel,
     onClick,
     onDelete,
     omitOnKeyUpDeleteEvent
@@ -69,7 +64,7 @@ const Tag = localProps => {
     buttonAttr.icon = getDeleteIcon();
   }
 
-  if (!tagGroupContext) {
+  if (!tagGroupContext && !hasLabel) {
     warn(`Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
   }
 

package/es/components/tag/style/_tag.scss

@@ -90,12 +90,16 @@
 
   // Default space between tags
   &__group {
-    .dnb-button:not([class*='dnb-space']) {
-      &:not(:last-of-type) {
-        margin-right: 0.25rem;
-      }
-      &:not(:first-of-type) {
-        margin-left: 0.25rem;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    @include IS_IE {
+      .dnb-button:not([class*='dnb-space']) {
+        margin-bottom: 0.5rem;
+        &:not(:last-of-type) {
+          margin-right: 0.5rem;
+        }
       }
     }
   }

package/es/components/tag/style/dnb-tag.css

@@ -1116,8 +1116,16 @@ button.dnb-button::-moz-focus-inner {
 .dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
   padding-right: 0; }
 
-.dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:last-of-type) {
-  margin-right: 0.25rem; }
-
-.dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:first-of-type) {
-  margin-left: 0.25rem; }
+.dnb-tag__group {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  grid-gap: 0.5rem;
+  gap: 0.5rem; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-tag__group .dnb-button:not([class*='dnb-space']) {
+      margin-bottom: 0.5rem; }
+      .dnb-tag__group .dnb-button:not([class*='dnb-space']):not(:last-of-type) {
+        margin-right: 0.5rem; } }