@dnb/eufemia 9.29.0 → 9.31.0

package/components/slider/SliderTrack.js

@@ -8,10 +8,10 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.sort.js";
 import "core-js/modules/es.array.reverse.js";
 import React from 'react';
-import { dispatchCustomElementEvent, validateDOMAttributes } from '../../shared/component-helper';
+import { dispatchCustomElementEvent } from '../../shared/component-helper';
 import { useSliderEvents } from './hooks/useSliderEvents';
 import { useSliderProps } from './hooks/useSliderProps';
-import { clamp, formatNumber } from './SliderHelpers';
+import { clamp, getFormattedNumber } from './SliderHelpers';
 export function SliderMainTrack(_ref) {
   var children = _ref.children;
 
@@ -20,15 +20,14 @@ export function SliderMainTrack(_ref) {
       value = _useSliderProps.value,
       allProps = _useSliderProps.allProps,
       trackRef = _useSliderProps.trackRef,
-      jumpedTimeout = _useSliderProps.jumpedTimeout,
-      thumbState = _useSliderProps.thumbState;
+      animationTimeout = _useSliderProps.animationTimeout;
 
   var id = allProps.id,
       numberFormat = allProps.numberFormat,
       onInit = allProps.onInit;
 
   var _useSliderEvents = useSliderEvents(),
-      onTrackClickHandler = _useSliderEvents.onTrackClickHandler,
+      onTrackMouseUpHandler = _useSliderEvents.onTrackMouseUpHandler,
       onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
       removeEvents = _useSliderEvents.removeEvents;
 
@@ -40,7 +39,7 @@ export function SliderMainTrack(_ref) {
       };
 
       if (numberFormat) {
-        obj.number = formatNumber(value, numberFormat);
+        obj.number = getFormattedNumber(value, numberFormat);
       }
 
       dispatchCustomElementEvent(allProps, 'onInit', obj);
@@ -48,20 +47,19 @@ export function SliderMainTrack(_ref) {
 
     return function () {
       removeEvents();
-      clearTimeout(jumpedTimeout.current);
+      clearTimeout(animationTimeout.current);
     };
   }, []);
   var trackParams = {
-    className: 'dnb-slider__track' + (thumbState ? " dnb-slider__state--".concat(thumbState) : ""),
-    onTouchStart: onTrackClickHandler,
+    onTouchStart: onTrackMouseUpHandler,
     onTouchStartCapture: onThumbMouseDownHandler,
-    onMouseDown: onTrackClickHandler,
+    onMouseDown: onTrackMouseUpHandler,
     onMouseDownCapture: onThumbMouseDownHandler
   };
-  validateDOMAttributes(null, trackParams);
   return React.createElement("span", _extends({
     id: id,
-    ref: trackRef
+    ref: trackRef,
+    className: "dnb-slider__track"
   }, trackParams), children);
 }
 var trackObj = [['right', 'left'], ['bottom', 'top']];
@@ -69,6 +67,7 @@ export function SliderTrackBefore() {
   var _useSliderProps2 = useSliderProps(),
       origValues = _useSliderProps2.values,
       isVertical = _useSliderProps2.isVertical,
+      isReverse = _useSliderProps2.isReverse,
       thumbIndex = _useSliderProps2.thumbIndex,
       _useSliderProps2$allP = _useSliderProps2.allProps,
       min = _useSliderProps2$allP.min,
@@ -90,8 +89,8 @@ export function SliderTrackBefore() {
   var lowerPercent = 100 - clamp((lowerValue - min) * 100 / (max - min));
   var units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
   var style = {};
-  style[units[0]] = "".concat(lowerPercent, "%");
-  style[units[1]] = "".concat(upperPercent, "%");
+  style[units[isReverse ? 1 : 0]] = "".concat(lowerPercent, "%");
+  style[units[isReverse ? 0 : 1]] = "".concat(upperPercent, "%");
   return React.createElement("span", {
     className: "dnb-slider__line dnb-slider__line__before",
     style: style

package/components/slider/hooks/useSliderEvents.d.ts

@@ -2,9 +2,7 @@ import React from 'react';
 export declare function useSliderEvents(): {
     onThumbMouseDownHandler: (event: React.SyntheticEvent) => void;
     onThumbMouseUpHandler: () => void;
-    onTrackClickHandler: (event: MouseEvent | TouchEvent) => void;
-    onThumbFocusHandler: () => void;
-    onThumbBlurHandler: () => void;
+    onTrackMouseUpHandler: (event: MouseEvent | TouchEvent) => void;
     onHelperChangeHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     onHelperFocusHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     removeEvents: () => void;

package/components/slider/hooks/useSliderEvents.js

@@ -5,11 +5,11 @@ import { calculatePercent, createMockDiv, percentToValue } from '../SliderHelper
 import { SliderContext } from '../SliderProvider';
 export function useSliderEvents() {
   var _React$useContext = React.useContext(SliderContext),
+      isReverse = _React$useContext.isReverse,
       emitChange = _React$useContext.emitChange,
       trackRef = _React$useContext.trackRef,
       isVertical = _React$useContext.isVertical,
-      isReverse = _React$useContext.isReverse,
-      setJumpedState = _React$useContext.setJumpedState,
+      setShouldAnimate = _React$useContext.setShouldAnimate,
       setThumbState = _React$useContext.setThumbState,
       setThumbIndex = _React$useContext.setThumbIndex,
       allProps = _React$useContext.allProps;
@@ -19,16 +19,16 @@ export function useSliderEvents() {
       onDragStart = allProps.onDragStart,
       onDragEnd = allProps.onDragEnd;
 
-  var onTrackClickHandler = function onTrackClickHandler(event) {
-    var percent = calculatePercent(trackRef.current, event, isVertical, isReverse);
-    emitChange(event, percentToValue(percent, min, max));
-    setJumpedState();
+  var onTrackMouseUpHandler = function onTrackMouseUpHandler(event) {
+    var percent = calculatePercent(trackRef.current, event, isVertical);
+    emitChange(event, percentToValue(percent, min, max, isReverse));
+    setShouldAnimate(true);
   };
 
   var onThumbMouseDownHandler = function onThumbMouseDownHandler(event) {
     var target = event.target;
     setThumbIndex(parseFloat(target.dataset.index));
-    setThumbState('released');
+    setThumbState('activated');
 
     if (typeof onDragStart === 'function') {
       dispatchCustomElementEvent(allProps, 'onDragStart', {
@@ -38,10 +38,10 @@ export function useSliderEvents() {
 
     if (typeof document !== 'undefined') {
       try {
-        document.body.addEventListener('touchmove', onTrackTouchMoveHandler);
-        document.body.addEventListener('touchend', onTrackTouchEndHandler);
-        document.body.addEventListener('mousemove', onTrackMouseMoveHandler);
-        document.body.addEventListener('mouseup', onTrackMouseUpHandler);
+        document.body.addEventListener('touchmove', onBodyMouseMoveHandler);
+        document.body.addEventListener('touchend', onBodyMouseUpHandler);
+        document.body.addEventListener('mousemove', onBodyMouseMoveHandler);
+        document.body.addEventListener('mouseup', onBodyMouseUpHandler);
       } catch (e) {
         warn(e);
       }
@@ -49,27 +49,23 @@ export function useSliderEvents() {
   };
 
   var onThumbMouseUpHandler = function onThumbMouseUpHandler() {
-    setThumbState('activated');
-  };
-
-  var onTrackTouchEndHandler = function onTrackTouchEndHandler(event) {
-    return onTrackMouseUpHandler(event);
+    setThumbState('released');
   };
 
   var removeEvents = function removeEvents() {
     if (typeof document !== 'undefined') {
       try {
-        document.body.removeEventListener('touchmove', onTrackTouchMoveHandler);
-        document.body.removeEventListener('touchend', onTrackTouchEndHandler);
-        document.body.removeEventListener('mousemove', onTrackMouseMoveHandler);
-        document.body.removeEventListener('mouseup', onTrackMouseUpHandler);
+        document.body.removeEventListener('touchmove', onBodyMouseMoveHandler);
+        document.body.removeEventListener('touchend', onBodyMouseUpHandler);
+        document.body.removeEventListener('mousemove', onBodyMouseMoveHandler);
+        document.body.removeEventListener('mouseup', onBodyMouseUpHandler);
       } catch (e) {
         warn(e);
       }
     }
   };
 
-  var onTrackMouseUpHandler = function onTrackMouseUpHandler(event) {
+  var onBodyMouseUpHandler = function onBodyMouseUpHandler(event) {
     removeEvents();
     setThumbIndex(-1);
     setThumbState('normal');
@@ -81,32 +77,21 @@ export function useSliderEvents() {
     }
   };
 
-  var onTrackTouchMoveHandler = function onTrackTouchMoveHandler(event) {
-    return onTrackMouseMoveHandler(event);
-  };
-
-  var onTrackMouseMoveHandler = function onTrackMouseMoveHandler(event) {
-    var _event, _event$detail;
-
+  var onBodyMouseMoveHandler = function onBodyMouseMoveHandler(event) {
+    event.preventDefault();
     var elem = trackRef.current;
 
-    if (typeof ((_event = event) === null || _event === void 0 ? void 0 : (_event$detail = _event.detail) === null || _event$detail === void 0 ? void 0 : _event$detail.height) !== 'undefined') {
+    if (process.env.NODE_ENV === 'test') {
       elem = createMockDiv(event.detail);
       event = event.detail;
     }
 
     if (elem) {
-      var percent = calculatePercent(elem, event, isVertical, isReverse);
-      emitChange(event, percentToValue(percent, min, max));
+      var percent = calculatePercent(elem, event, isVertical);
+      emitChange(event, percentToValue(percent, min, max, isReverse));
     }
-  };
-
-  var onThumbFocusHandler = function onThumbFocusHandler() {
-    setThumbState('focused');
-  };
 
-  var onThumbBlurHandler = function onThumbBlurHandler() {
-    setThumbState('normal');
+    setShouldAnimate(false);
   };
 
   var onHelperChangeHandler = function onHelperChangeHandler(event) {
@@ -122,9 +107,7 @@ export function useSliderEvents() {
   return {
     onThumbMouseDownHandler: onThumbMouseDownHandler,
     onThumbMouseUpHandler: onThumbMouseUpHandler,
-    onTrackClickHandler: onTrackClickHandler,
-    onThumbFocusHandler: onThumbFocusHandler,
-    onThumbBlurHandler: onThumbBlurHandler,
+    onTrackMouseUpHandler: onTrackMouseUpHandler,
     onHelperChangeHandler: onHelperChangeHandler,
     onHelperFocusHandler: onHelperFocusHandler,
     removeEvents: removeEvents

package/components/slider/hooks/useSliderProps.d.ts

@@ -1 +1 @@
-export declare function useSliderProps(): import("../types").SliderContextTypes;
+export declare function useSliderProps(): import("..").SliderContextTypes;

package/components/slider/style/_range.scss

@@ -2,6 +2,12 @@
 * Range input
 */
 
+/*
+* Deprecated
+* Will be removed in v10
+*
+*/
+
 :root {
   --range-track-height: 0.25rem;
   --range-thumb-dimension: 2rem;

package/components/slider/style/_slider.scss

@@ -13,6 +13,7 @@
 .dnb-slider {
   user-select: none;
   -webkit-user-select: none; // Safari / Touch fix
+  -webkit-touch-callout: none; // Safari / Touch fix
 
   // use flex to make sure we have the whole space available
   display: flex;
@@ -101,12 +102,6 @@
     min-width: inherit;
     min-height: inherit;
   }
-  &--reverse &__track {
-    transform: scaleX(-1);
-  }
-  &--reverse#{&}--vertical &__track {
-    transform: scaleY(-1);
-  }
 
   &__line {
     position: absolute;
@@ -157,7 +152,8 @@
     top: 0;
     z-index: 3;
 
-    display: block;
+    display: flex;
+    justify-content: center;
     transform: translate3d(-50%, 0, 0);
 
     // Because of the DropShadow
@@ -180,16 +176,17 @@
     line-height: var(--slider-button-size);
     transform: translateY(0.25rem);
 
-    z-index: 5;
+    z-index: 2;
   }
   &--vertical &__button.dnb-button--size-small {
     transform: translateX(0.25rem);
   }
 
-  &__state--jumped &__thumb,
-  &__state--jumped &__line {
-    transition: left 250ms ease, top 250ms ease, bottom 250ms ease,
-      right 250ms ease, box-shadow 250ms ease;
+  &__state--animate &__thumb,
+  &__state--animate &__line {
+    transition: left 250ms #{$defaultEasing}, top 250ms #{$defaultEasing},
+      bottom 250ms #{$defaultEasing}, right 250ms #{$defaultEasing},
+      box-shadow 250ms #{$defaultEasing};
   }
 
   &__state--disabled &__track,

package/components/slider/style/dnb-range.css

@@ -2,6 +2,11 @@
 * DNB Input
 *
 */
+/*
+* Deprecated
+* Will be removed in v10
+*
+*/
 /**
  * This file is only used to make components independent
  * so that they can get imported individually, without the core styles
@@ -71,6 +76,11 @@
 /*
 * Range input
 */
+/*
+* Deprecated
+* Will be removed in v10
+*
+*/
 :root {
   --range-track-height: 0.25rem;
   --range-thumb-dimension: 2rem; }

package/components/slider/style/dnb-range.scss

@@ -3,6 +3,12 @@
 *
 */
 
+/*
+* Deprecated
+* Will be removed in v10
+*
+*/
+
 @import '../../../style/components/imports.scss';
 
 .dnb-range {

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

@@ -223,36 +223,36 @@
   padding: 0 1rem;
   opacity: 0;
   visibility: hidden;
-  -webkit-transition: opacity 200ms ease-out;
-  transition: opacity 200ms ease-out; }
+  -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
   .dnb-tooltip--large {
     padding: 0.25rem 1rem; }
   .dnb-tooltip--animate_position {
-    -webkit-transition: all 300ms ease-in-out, opacity 200ms ease-out;
-    transition: all 300ms ease-in-out, opacity 200ms ease-out; }
+    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
   .dnb-tooltip--active {
     visibility: visible;
     /*
       because of the first "show" we also use animation
       also, use forwards because of the usage of visibility
     */
-    -webkit-animation: show-tooltip 200ms ease-out forwards;
-            animation: show-tooltip 200ms ease-out forwards; }
+    -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
   html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
-    -webkit-animation: show-tooltip 1ms ease-out forwards;
-            animation: show-tooltip 1ms ease-out forwards; }
+    -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
   .dnb-tooltip--hide {
     visibility: visible;
-    -webkit-animation: hide-tooltip 200ms ease-in-out forwards;
-            animation: hide-tooltip 200ms ease-in-out forwards; }
+    -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
   .dnb-tooltip--hide.dnb-tooltip--no-animation {
-    -webkit-animation: hide-tooltip 1ms ease-out forwards;
-            animation: hide-tooltip 1ms ease-out forwards; }
+    -webkit-animation: hide-tooltip 1ms linear forwards;
+            animation: hide-tooltip 1ms linear forwards; }
   .dnb-tooltip--fixed {
     position: fixed; }
   html[data-visual-test] .dnb-tooltip--hide {
-    -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
-            animation: hide-tooltip 1ms ease-out 1s forwards; }
+    -webkit-animation: hide-tooltip 1ms linear 1s forwards;
+            animation: hide-tooltip 1ms linear 1s forwards; }
   .dnb-tooltip__portal {
     position: absolute;
     top: 0;
@@ -797,6 +797,190 @@
 button.dnb-button::-moz-focus-inner {
   border: none; }
 
+/*
+* DNB Tooltip
+*
+*/
+/**
+ * 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-tooltip {
+  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-tooltip *,
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tooltip ::before,
+  .dnb-tooltip ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Tooltip component
+*
+*/
+.dnb-tooltip {
+  position: absolute;
+  z-index: 3100;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 1rem;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+  transition: opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  .dnb-tooltip--large {
+    padding: 0.25rem 1rem; }
+  .dnb-tooltip--animate_position {
+    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1);
+    transition: all 200ms cubic-bezier(0.42, 0, 0, 1), opacity 200ms cubic-bezier(0.42, 0, 0, 1); }
+  .dnb-tooltip--active {
+    visibility: visible;
+    /*
+      because of the first "show" we also use animation
+      also, use forwards because of the usage of visibility
+    */
+    -webkit-animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: show-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+  html[data-visual-test] .dnb-tooltip--active, .dnb-tooltip--active.dnb-tooltip--no-animation {
+    -webkit-animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: show-tooltip 1ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+  .dnb-tooltip--hide {
+    visibility: visible;
+    -webkit-animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards;
+            animation: hide-tooltip 200ms cubic-bezier(0.42, 0, 0, 1) forwards; }
+  .dnb-tooltip--hide.dnb-tooltip--no-animation {
+    -webkit-animation: hide-tooltip 1ms linear forwards;
+            animation: hide-tooltip 1ms linear forwards; }
+  .dnb-tooltip--fixed {
+    position: fixed; }
+  html[data-visual-test] .dnb-tooltip--hide {
+    -webkit-animation: hide-tooltip 1ms linear 1s forwards;
+            animation: hide-tooltip 1ms linear 1s forwards; }
+  .dnb-tooltip__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0; }
+  .dnb-tooltip__content {
+    min-width: 2rem;
+    min-height: 1.5rem;
+    padding: 0; }
+  .dnb-tooltip__arrow {
+    position: absolute;
+    pointer-events: none;
+    margin: 0;
+    width: 1rem;
+    height: 0.5rem;
+    overflow: hidden; }
+    .dnb-tooltip__arrow::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 1rem;
+      height: 1rem;
+      -webkit-transform: translateY(70%) rotate(45deg);
+              transform: translateY(70%) rotate(45deg); }
+    .dnb-tooltip__arrow__position--bottom {
+      top: -0.5rem; }
+    .dnb-tooltip__arrow__position--top {
+      bottom: -0.5rem;
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg); }
+    .dnb-tooltip__arrow__position--left {
+      right: -0.75rem;
+      margin-right: 3px;
+      -webkit-transform: rotate(90deg);
+              transform: rotate(90deg); }
+    .dnb-tooltip__arrow__position--right {
+      left: -0.75rem;
+      margin-left: 3px;
+      -webkit-transform: rotate(270deg);
+              transform: rotate(270deg); }
+    .dnb-tooltip__arrow__arrow--left {
+      -ms-flex-item-align: start;
+          align-self: flex-start; }
+    .dnb-tooltip__arrow__arrow--right {
+      -ms-flex-item-align: end;
+          align-self: flex-end; }
+
+@keyframes show-tooltip {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
+@keyframes hide-tooltip {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0;
+    visibility: hidden; } }
+
 /*
 * DNB FormLabel
 *
@@ -1132,6 +1316,7 @@ legend.dnb-form-label {
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
+  -webkit-touch-callout: none;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1217,12 +1402,6 @@ legend.dnb-form-label {
     height: inherit;
     min-width: inherit;
     min-height: inherit; }
-  .dnb-slider--reverse .dnb-slider__track {
-    -webkit-transform: scaleX(-1);
-            transform: scaleX(-1); }
-  .dnb-slider--reverse.dnb-slider--vertical .dnb-slider__track {
-    -webkit-transform: scaleY(-1);
-            transform: scaleY(-1); }
   .dnb-slider__line {
     position: absolute;
     left: 0;
@@ -1266,7 +1445,12 @@ legend.dnb-form-label {
     left: 0;
     top: 0;
     z-index: 3;
-    display: block;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
     -webkit-transform: translate3d(-50%, 0, 0);
             transform: translate3d(-50%, 0, 0);
     border-radius: 50%; }
@@ -1289,16 +1473,16 @@ legend.dnb-form-label {
     line-height: var(--slider-button-size);
     -webkit-transform: translateY(0.25rem);
             transform: translateY(0.25rem);
-    z-index: 5; }
+    z-index: 2; }
   .dnb-slider--vertical .dnb-slider__button.dnb-button--size-small {
     -webkit-transform: translateX(0.25rem);
             transform: translateX(0.25rem); }
-  .dnb-slider__state--jumped .dnb-slider__thumb,
-  .dnb-slider__state--jumped .dnb-slider__line {
-    -webkit-transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, -webkit-box-shadow 250ms ease;
-    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, -webkit-box-shadow 250ms ease;
-    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, box-shadow 250ms ease;
-    transition: left 250ms ease, top 250ms ease, bottom 250ms ease, right 250ms ease, box-shadow 250ms ease, -webkit-box-shadow 250ms ease; }
+  .dnb-slider__state--animate .dnb-slider__thumb,
+  .dnb-slider__state--animate .dnb-slider__line {
+    -webkit-transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), -webkit-box-shadow 250ms cubic-bezier(0.42, 0, 0, 1);
+    transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), -webkit-box-shadow 250ms cubic-bezier(0.42, 0, 0, 1);
+    transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), box-shadow 250ms cubic-bezier(0.42, 0, 0, 1);
+    transition: left 250ms cubic-bezier(0.42, 0, 0, 1), top 250ms cubic-bezier(0.42, 0, 0, 1), bottom 250ms cubic-bezier(0.42, 0, 0, 1), right 250ms cubic-bezier(0.42, 0, 0, 1), box-shadow 250ms cubic-bezier(0.42, 0, 0, 1), -webkit-box-shadow 250ms cubic-bezier(0.42, 0, 0, 1); }
   .dnb-slider__state--disabled .dnb-slider__track,
   .dnb-slider__state--disabled .dnb-slider__thumb,
   .dnb-slider__state--disabled .dnb-slider__line {