npm - @dnb/eufemia - Versions diffs - 10.21.0 → 10.23.0 - Mend

@dnb/eufemia 10.21.0 → 10.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1269) hide show

package/es/components/progress-indicator/ProgressIndicatorCircular.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressIndicatorCircular.js","names":["React","PropTypes","classnames","validateDOMAttributes","IS_EDGE","ProgressIndicatorCircular","PureComponent","getDerivedStateFromProps","props","state","progress","parseFloat","visible","complete","constructor","useAnimationFrame","onComplete","_refDark","createRef","_refLight","animate","componentDidMount","startAnimationFirstTime","componentWillUnmount","stopAnimation","setState","startupTimeout","clearTimeout","setTimeout","startAnimation","current","callOnCompleteHandler","element","animateOnStart","callback","min","max","start","ms","prog","setProg","completeCalled","stopNextRound","step","timestamp","style","Math","round","ceil","window","requestAnimationFrame","render","_this$props","size","maxOffset","title","_progress","rest","_objectWithoutProperties","_excluded","strokeDashoffset","hasProgressValue","params","_objectSpread","role","createElement","_extends","className","_Circle","Circle","ref","_defineProperty","process","env","NODE_ENV","propTypes","string","bool","oneOfType","number","func","forwardRef","_ref","_excluded2","viewBox","shapeRendering","_circle","fill","strokeWidth","cx","cy","r","isRequired"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorCircular.js"],"sourcesContent":["/*\n Web ProgressIndicator Component\n \n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\nimport { IS_EDGE } from '../../shared/helpers'\n\nexport default class ProgressIndicatorCircular extends React.PureComponent {\n static propTypes = {\n size: PropTypes.string,\n visible: PropTypes.bool,\n complete: PropTypes.bool,\n progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n maxOffset: PropTypes.number,\n onComplete: PropTypes.func,\n callOnCompleteHandler: PropTypes.func,\n title: PropTypes.string,\n }\n static defaultProps = {\n size: null,\n visible: true,\n complete: false,\n progress: null,\n maxOffset: 88,\n onComplete: null,\n callOnCompleteHandler: null,\n title: null,\n }\n static getDerivedStateFromProps(props, state) {\n state.progress = parseFloat(props.progress)\n state.visible = props.visible\n state.complete = props.complete\n return state\n }\n constructor(props) {\n super(props)\n this.useAnimationFrame =\n typeof props.onComplete === 'function' \|\| IS_EDGE\n this._refDark = React.createRef()\n this._refLight = React.createRef()\n this.state = { animate: false }\n }\n componentDidMount() {\n if (this.useAnimationFrame) {\n this.startAnimationFirstTime()\n }\n }\n componentWillUnmount() {\n this.stopAnimation()\n }\n stopAnimation() {\n this.setState({ animate: false })\n if (this.startupTimeout) {\n clearTimeout(this.startupTimeout)\n }\n }\n startAnimationFirstTime() {\n this.setState({ animate: false })\n this.startupTimeout = setTimeout(() => this.startAnimation(), 300)\n }\n startAnimation() {\n this.setState({ animate: true }, () => {\n if (this._refDark.current) {\n this.animate(\n this._refDark.current,\n true,\n this.props.callOnCompleteHandler\n )\n }\n if (this._refLight.current) {\n this.animate(this._refLight.current, false)\n }\n })\n }\n animate(element, animateOnStart = true, callback = null) {\n const min = 1\n const max = 88\n let start = 0,\n ms = 0,\n prog = max,\n setProg = animateOnStart,\n animate = true,\n completeCalled = false,\n stopNextRound = false\n\n const step = (timestamp) => {\n if (!start) {\n start = timestamp\n }\n\n // milliseconds\n ms = timestamp - start\n\n if (animate) {\n if (!this.state.visible && prog < 5) {\n prog = min\n }\n if (setProg) {\n element.style['stroke-dashoffset'] = prog\n } else if (!animateOnStart) {\n element.style['stroke-dashoffset'] = max\n }\n }\n\n // if complete\n if (stopNextRound) {\n animate = false\n if (!completeCalled) {\n completeCalled = true\n if (animateOnStart && typeof callback === 'function') {\n callback()\n }\n } else if (this.state.visible && ms % 1e3 > 950) {\n // this.startAnimationFirstTime() // will not start completely from scratch\n stopNextRound = false\n }\n } else {\n // make sure we stop next round\n stopNextRound = !this.state.visible && prog === min\n animate = true\n completeCalled = false\n }\n\n // since we have 1sec as duration, and we want always a max of 1000ms\n prog = Math.round(max - (max / 1e3) * (ms % 1e3))\n\n // calc if we want to animate\n setProg = animateOnStart\n ? Math.ceil(ms / 1e3) % 2 === 1 \|\| ms === 0\n : Math.ceil(ms / 1e3) % 2 === 0 && ms !== 0\n\n if (this.state.animate) {\n window.requestAnimationFrame(step)\n }\n }\n if (typeof window !== 'undefined' && window.requestAnimationFrame) {\n window.requestAnimationFrame(step)\n }\n }\n render() {\n const {\n size,\n maxOffset,\n title,\n progress: _progress, // eslint-disable-line\n visible, // eslint-disable-line\n complete, // eslint-disable-line\n onComplete, // eslint-disable-line\n callOnCompleteHandler, // eslint-disable-line\n\n ...rest\n } = this.props\n\n const { progress } = this.state\n\n const strokeDashoffset = maxOffset - (maxOffset / 100) * progress\n const hasProgressValue = parseFloat(progress) > -1\n\n const params = { ...rest }\n\n if (hasProgressValue) {\n params.role = 'progressbar'\n params['aria-label'] = title\n params['title'] = title\n } else {\n params.role = 'alert'\n params['aria-busy'] = true\n }\n\n validateDOMAttributes(this.props, params)\n\n return (\n <div\n className={classnames(\n 'dnb-progress-indicator__circular',\n size && `dnb-progress-indicator__circular--${size}`,\n hasProgressValue &&\n 'dnb-progress-indicator__circular--has-progress-value'\n )}\n {...params}\n >\n {/* The first one is the background line */}\n <Circle\n className={classnames(\n 'dnb-progress-indicator__circular__line',\n 'light',\n 'paused'\n )}\n />\n <Circle\n className={classnames(\n 'dnb-progress-indicator__circular__line',\n 'dark',\n 'dark',\n hasProgressValue \|\| this.useAnimationFrame ? 'paused' : null\n )}\n style={hasProgressValue ? { strokeDashoffset } : {}}\n ref={this._refDark}\n />\n {!hasProgressValue && (\n <Circle\n className={classnames(\n 'dnb-progress-indicator__circular__line',\n 'light',\n this.useAnimationFrame ? 'paused' : null\n )}\n ref={this._refLight}\n />\n )}\n </div>\n )\n }\n}\n\nconst Circle = React.forwardRef(({ className, ...rest }, ref) => {\n return (\n <svg\n className={className}\n viewBox=\"0 0 32 32\"\n shapeRendering=\"geometricPrecision\"\n ref={ref}\n {...rest}\n >\n <circle\n className=\"dnb-progress-indicator__circular__circle\"\n fill=\"none\"\n strokeWidth=\"4\"\n cx=\"16\"\n cy=\"16\"\n r=\"14\"\n />\n </svg>\n )\n})\nCircle.propTypes = {\n className: PropTypes.string.isRequired,\n}\n// Circle.defaultProps = {\n// }\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,qBAAqB,QAAQ,+BAA+B;AACrE,SAASC,OAAO,QAAQ,sBAAsB;AAE9C,eAAe,MAAMC,yBAAyB,SAASL,KAAK,CAACM,aAAa,CAAC;EAqBzE,OAAOC,wBAAwBA,CAACC,KAAK,EAAEC,KAAK,EAAE;IAC5CA,KAAK,CAACC,QAAQ,GAAGC,UAAU,CAACH,KAAK,CAACE,QAAQ,CAAC;IAC3CD,KAAK,CAACG,OAAO,GAAGJ,KAAK,CAACI,OAAO;IAC7BH,KAAK,CAACI,QAAQ,GAAGL,KAAK,CAACK,QAAQ;IAC/B,OAAOJ,KAAK;EACd;EACAK,WAAWA,CAACN,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACO,iBAAiB,GACpB,OAAOP,KAAK,CAACQ,UAAU,KAAK,UAAU,IAAIZ,OAAO;IACnD,IAAI,CAACa,QAAQ,GAAGjB,KAAK,CAACkB,SAAS,CAAC,CAAC;IACjC,IAAI,CAACC,SAAS,GAAGnB,KAAK,CAACkB,SAAS,CAAC,CAAC;IAClC,IAAI,CAACT,KAAK,GAAG;MAAEW,OAAO,EAAE;IAAM,CAAC;EACjC;EACAC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,IAAI,CAACN,iBAAiB,EAAE;MAC1B,IAAI,CAACO,uBAAuB,CAAC,CAAC;IAChC;EACF;EACAC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACC,aAAa,CAAC,CAAC;EACtB;EACAA,aAAaA,CAAA,EAAG;IACd,IAAI,CAACC,QAAQ,CAAC;MAAEL,OAAO,EAAE;IAAM,CAAC,CAAC;IACjC,IAAI,IAAI,CAACM,cAAc,EAAE;MACvBC,YAAY,CAAC,IAAI,CAACD,cAAc,CAAC;IACnC;EACF;EACAJ,uBAAuBA,CAAA,EAAG;IACxB,IAAI,CAACG,QAAQ,CAAC;MAAEL,OAAO,EAAE;IAAM,CAAC,CAAC;IACjC,IAAI,CAACM,cAAc,GAAGE,UAAU,CAAC,MAAM,IAAI,CAACC,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC;EACpE;EACAA,cAAcA,CAAA,EAAG;IACf,IAAI,CAACJ,QAAQ,CAAC;MAAEL,OAAO,EAAE;IAAK,CAAC,EAAE,MAAM;MACrC,IAAI,IAAI,CAACH,QAAQ,CAACa,OAAO,EAAE;QACzB,IAAI,CAACV,OAAO,CACV,IAAI,CAACH,QAAQ,CAACa,OAAO,EACrB,IAAI,EACJ,IAAI,CAACtB,KAAK,CAACuB,qBACb,CAAC;MACH;MACA,IAAI,IAAI,CAACZ,SAAS,CAACW,OAAO,EAAE;QAC1B,IAAI,CAACV,OAAO,CAAC,IAAI,CAACD,SAAS,CAACW,OAAO,EAAE,KAAK,CAAC;MAC7C;IACF,CAAC,CAAC;EACJ;EACAV,OAAOA,CAACY,OAAO,EAAEC,cAAc,GAAG,IAAI,EAAEC,QAAQ,GAAG,IAAI,EAAE;IACvD,MAAMC,GAAG,GAAG,CAAC;IACb,MAAMC,GAAG,GAAG,EAAE;IACd,IAAIC,KAAK,GAAG,CAAC;MACXC,EAAE,GAAG,CAAC;MACNC,IAAI,GAAGH,GAAG;MACVI,OAAO,GAAGP,cAAc;MACxBb,OAAO,GAAG,IAAI;MACdqB,cAAc,GAAG,KAAK;MACtBC,aAAa,GAAG,KAAK;IAEvB,MAAMC,IAAI,GAAIC,SAAS,IAAK;MAC1B,IAAI,CAACP,KAAK,EAAE;QACVA,KAAK,GAAGO,SAAS;MACnB;MAGAN,EAAE,GAAGM,SAAS,GAAGP,KAAK;MAEtB,IAAIjB,OAAO,EAAE;QACX,IAAI,CAAC,IAAI,CAACX,KAAK,CAACG,OAAO,IAAI2B,IAAI,GAAG,CAAC,EAAE;UACnCA,IAAI,GAAGJ,GAAG;QACZ;QACA,IAAIK,OAAO,EAAE;UACXR,OAAO,CAACa,KAAK,CAAC,mBAAmB,CAAC,GAAGN,IAAI;QAC3C,CAAC,MAAM,IAAI,CAACN,cAAc,EAAE;UAC1BD,OAAO,CAACa,KAAK,CAAC,mBAAmB,CAAC,GAAGT,GAAG;QAC1C;MACF;MAGA,IAAIM,aAAa,EAAE;QACjBtB,OAAO,GAAG,KAAK;QACf,IAAI,CAACqB,cAAc,EAAE;UACnBA,cAAc,GAAG,IAAI;UACrB,IAAIR,cAAc,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;YACpDA,QAAQ,CAAC,CAAC;UACZ;QACF,CAAC,MAAM,IAAI,IAAI,CAACzB,KAAK,CAACG,OAAO,IAAI0B,EAAE,GAAG,GAAG,GAAG,GAAG,EAAE;UAE/CI,aAAa,GAAG,KAAK;QACvB;MACF,CAAC,MAAM;QAELA,aAAa,GAAG,CAAC,IAAI,CAACjC,KAAK,CAACG,OAAO,IAAI2B,IAAI,KAAKJ,GAAG;QACnDf,OAAO,GAAG,IAAI;QACdqB,cAAc,GAAG,KAAK;MACxB;MAGAF,IAAI,GAAGO,IAAI,CAACC,KAAK,CAACX,GAAG,GAAIA,GAAG,GAAG,GAAG,IAAKE,EAAE,GAAG,GAAG,CAAC,CAAC;MAGjDE,OAAO,GAAGP,cAAc,GACpBa,IAAI,CAACE,IAAI,CAACV,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAIA,EAAE,KAAK,CAAC,GACzCQ,IAAI,CAACE,IAAI,CAACV,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,IAAIA,EAAE,KAAK,CAAC;MAE7C,IAAI,IAAI,CAAC7B,KAAK,CAACW,OAAO,EAAE;QACtB6B,MAAM,CAACC,qBAAqB,CAACP,IAAI,CAAC;MACpC;IACF,CAAC;IACD,IAAI,OAAOM,MAAM,KAAK,WAAW,IAAIA,MAAM,CAACC,qBAAqB,EAAE;MACjED,MAAM,CAACC,qBAAqB,CAACP,IAAI,CAAC;IACpC;EACF;EACAQ,MAAMA,CAAA,EAAG;IACP,MAAAC,WAAA,GAWI,IAAI,CAAC5C,KAAK;MAXR;QACJ6C,IAAI;QACJC,SAAS;QACTC,KAAK;QACL7C,QAAQ,EAAE8C,SAAS;QACnB5C,OAAO;QACPC,QAAQ;QACRG,UAAU;QACVe;MAGF,CAAC,GAAAqB,WAAA;MADIK,IAAI,GAAAC,wBAAA,CAAAN,WAAA,EAAAO,SAAA;IAGT,MAAM;MAAEjD;IAAS,CAAC,GAAG,IAAI,CAACD,KAAK;IAE/B,MAAMmD,gBAAgB,GAAGN,SAAS,GAAIA,SAAS,GAAG,GAAG,GAAI5C,QAAQ;IACjE,MAAMmD,gBAAgB,GAAGlD,UAAU,CAACD,QAAQ,CAAC,GAAG,CAAC,CAAC;IAElD,MAAMoD,MAAM,GAAAC,aAAA,KAAQN,IAAI,CAAE;IAE1B,IAAII,gBAAgB,EAAE;MACpBC,MAAM,CAACE,IAAI,GAAG,aAAa;MAC3BF,MAAM,CAAC,YAAY,CAAC,GAAGP,KAAK;MAC5BO,MAAM,CAAC,OAAO,CAAC,GAAGP,KAAK;IACzB,CAAC,MAAM;MACLO,MAAM,CAACE,IAAI,GAAG,OAAO;MACrBF,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;IAC5B;IAEA3D,qBAAqB,CAAC,IAAI,CAACK,KAAK,EAAEsD,MAAM,CAAC;IAEzC,OACE9D,KAAA,CAAAiE,aAAA,QAAAC,QAAA;MACEC,SAAS,EAAEjE,UAAU,CACnB,kCAAkC,EAClCmD,IAAI,IAAK,qCAAoCA,IAAK,EAAC,EACnDQ,gBAAgB,IACd,sDACJ;IAAE,GACEC,MAAM,GAAAM,OAAA,KAAAA,OAAA,GAGVpE,KAAA,CAAAiE,aAAA,CAACI,MAAM;MACLF,SAAS;IAIP,CACH,CAAC,GACFnE,KAAA,CAAAiE,aAAA,CAACI,MAAM;MACLF,SAAS,wDAIPN,gBAAgB,IAAI,IAAI,CAAC9C,iBAAiB,kBAC1C;MACF8B,KAAK,EAAEgB,gBAAgB,GAAG;QAAED;MAAiB,CAAC,GAAG,CAAC,CAAE;MACpDU,GAAG,EAAE,IAAI,CAACrD;IAAS,CACpB,CAAC,EACD,CAAC4C,gBAAgB,IAChB7D,KAAA,CAAAiE,aAAA,CAACI,MAAM;MACLF,SAAS,oDAGP,IAAI,CAACpD,iBAAiB,kBACtB;MACFuD,GAAG,EAAE,IAAI,CAACnD;IAAU,CACrB,CAEA,CAAC;EAEV;AACF;AAACoD,eAAA,CA7MoBlE,yBAAyB,kBAWtB;EACpBgD,IAAI,EAAE,IAAI;EACVzC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE,KAAK;EACfH,QAAQ,EAAE,IAAI;EACd4C,SAAS,EAAE,EAAE;EACbtC,UAAU,EAAE,IAAI;EAChBe,qBAAqB,EAAE,IAAI;EAC3BwB,KAAK,EAAE;AACT,CAAC;AAAAiB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBApBkBrE,yBAAyB,CACrCsE,SAAS,GAAG;EACjBtB,IAAI,EAAEpD,SAAS,CAAC2E,MAAM;EACtBhE,OAAO,EAAEX,SAAS,CAAC4E,IAAI;EACvBhE,QAAQ,EAAEZ,SAAS,CAAC4E,IAAI;EACxBnE,QAAQ,EAAET,SAAS,CAAC6E,SAAS,CAAC,CAAC7E,SAAS,CAAC2E,MAAM,EAAE3E,SAAS,CAAC8E,MAAM,CAAC,CAAC;EACnEzB,SAAS,EAAErD,SAAS,CAAC8E,MAAM;EAC3B/D,UAAU,EAAEf,SAAS,CAAC+E,IAAI;EAC1BjD,qBAAqB,EAAE9B,SAAS,CAAC+E,IAAI;EACrCzB,KAAK,EAAEtD,SAAS,CAAC2E;AACnB,CAAC;AAqMH,MAAMP,MAAM,GAAGrE,KAAK,CAACiF,UAAU,CAAC,CAAAC,IAAA,EAAyBZ,GAAG,KAAK;EAAA,IAAhC;MAAEH;IAAmB,CAAC,GAAAe,IAAA;IAANzB,IAAI,GAAAC,wBAAA,CAAAwB,IAAA,EAAAC,UAAA;EACnD,OACEnF,KAAA,CAAAiE,aAAA,QAAAC,QAAA;IACEC,SAAS,EAAEA,SAAU;IACrBiB,OAAO,EAAC,WAAW;IACnBC,cAAc,EAAC,oBAAoB;IACnCf,GAAG,EAAEA;EAAI,GACLb,IAAI,GAAA6B,OAAA,KAAAA,OAAA,GAERtF,KAAA,CAAAiE,aAAA;IACEE,SAAS,EAAC,0CAA0C;IACpDoB,IAAI,EAAC,MAAM;IACXC,WAAW,EAAC,GAAG;IACfC,EAAE,EAAC,IAAI;IACPC,EAAE,EAAC,IAAI;IACPC,CAAC,EAAC;EAAI,CACP,CAAC,CACC,CAAC;AAEV,CAAC,CAAC;AACFnB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAAL,MAAM,CAACM,SAAS,GAAG;EACjBR,SAAS,EAAElE,SAAS,CAAC2E,MAAM,CAACgB;AAC9B,CAAC"}
1	+ {"version":3,"file":"ProgressIndicatorCircular.js","names":["React","PropTypes","classnames","validateDOMAttributes","IS_EDGE","ProgressIndicatorCircular","PureComponent","getDerivedStateFromProps","props","state","progress","parseFloat","visible","complete","constructor","useAnimationFrame","onComplete","_refDark","createRef","_refLight","animate","componentDidMount","startAnimationFirstTime","componentWillUnmount","stopAnimation","setState","startupTimeout","clearTimeout","setTimeout","startAnimation","current","callOnCompleteHandler","element","animateOnStart","callback","min","max","start","ms","prog","setProg","completeCalled","stopNextRound","step","timestamp","style","Math","round","ceil","window","requestAnimationFrame","render","_this$props","size","maxOffset","title","_progress","rest","_objectWithoutProperties","_excluded","strokeDashoffset","hasProgressValue","params","_objectSpread","role","createElement","_extends","className","_Circle","Circle","ref","_defineProperty","process","env","NODE_ENV","propTypes","string","bool","oneOfType","number","func","forwardRef","_ref","_excluded2","viewBox","shapeRendering","_circle","fill","strokeWidth","cx","cy","r","isRequired"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorCircular.js"],"sourcesContent":["/*\n Web ProgressIndicator Component\n \n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\nimport { IS_EDGE } from '../../shared/helpers'\n\nexport default class ProgressIndicatorCircular extends React.PureComponent {\n static propTypes = {\n size: PropTypes.string,\n visible: PropTypes.bool,\n complete: PropTypes.bool,\n progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n maxOffset: PropTypes.number,\n onComplete: PropTypes.func,\n callOnCompleteHandler: PropTypes.func,\n title: PropTypes.string,\n }\n static defaultProps = {\n size: null,\n visible: true,\n complete: false,\n progress: null,\n maxOffset: 88,\n onComplete: null,\n callOnCompleteHandler: null,\n title: null,\n }\n static getDerivedStateFromProps(props, state) {\n state.progress = parseFloat(props.progress)\n state.visible = props.visible\n state.complete = props.complete\n return state\n }\n constructor(props) {\n super(props)\n this.useAnimationFrame =\n typeof props.onComplete === 'function' \|\| IS_EDGE\n this._refDark = React.createRef()\n this._refLight = React.createRef()\n this.state = { animate: false }\n }\n componentDidMount() {\n if (this.useAnimationFrame) {\n this.startAnimationFirstTime()\n }\n }\n componentWillUnmount() {\n this.stopAnimation()\n }\n stopAnimation() {\n this.setState({ animate: false })\n if (this.startupTimeout) {\n clearTimeout(this.startupTimeout)\n }\n }\n startAnimationFirstTime() {\n this.setState({ animate: false })\n this.startupTimeout = setTimeout(() => this.startAnimation(), 300)\n }\n startAnimation() {\n this.setState({ animate: true }, () => {\n if (this._refDark.current) {\n this.animate(\n this._refDark.current,\n true,\n this.props.callOnCompleteHandler\n )\n }\n if (this._refLight.current) {\n this.animate(this._refLight.current, false)\n }\n })\n }\n animate(element, animateOnStart = true, callback = null) {\n const min = 1\n const max = 88\n let start = 0,\n ms = 0,\n prog = max,\n setProg = animateOnStart,\n animate = true,\n completeCalled = false,\n stopNextRound = false\n\n const step = (timestamp) => {\n if (!start) {\n start = timestamp\n }\n\n // milliseconds\n ms = timestamp - start\n\n if (animate) {\n if (!this.state.visible && prog < 5) {\n prog = min\n }\n if (setProg) {\n element.style['stroke-dashoffset'] = prog\n } else if (!animateOnStart) {\n element.style['stroke-dashoffset'] = max\n }\n }\n\n // if complete\n if (stopNextRound) {\n animate = false\n if (!completeCalled) {\n completeCalled = true\n if (animateOnStart && typeof callback === 'function') {\n callback()\n }\n } else if (this.state.visible && ms % 1e3 > 950) {\n // this.startAnimationFirstTime() // will not start completely from scratch\n stopNextRound = false\n }\n } else {\n // make sure we stop next round\n stopNextRound = !this.state.visible && prog === min\n animate = true\n completeCalled = false\n }\n\n // since we have 1sec as duration, and we want always a max of 1000ms\n prog = Math.round(max - (max / 1e3) * (ms % 1e3))\n\n // calc if we want to animate\n setProg = animateOnStart\n ? Math.ceil(ms / 1e3) % 2 === 1 \|\| ms === 0\n : Math.ceil(ms / 1e3) % 2 === 0 && ms !== 0\n\n if (this.state.animate) {\n window.requestAnimationFrame(step)\n }\n }\n if (typeof window !== 'undefined' && window.requestAnimationFrame) {\n window.requestAnimationFrame(step)\n }\n }\n render() {\n const {\n size,\n maxOffset,\n title,\n progress: _progress, // eslint-disable-line\n visible, // eslint-disable-line\n complete, // eslint-disable-line\n onComplete, // eslint-disable-line\n callOnCompleteHandler, // eslint-disable-line\n\n ...rest\n } = this.props\n\n const { progress } = this.state\n\n const strokeDashoffset = maxOffset - (maxOffset / 100) * progress\n const hasProgressValue = parseFloat(progress) > -1\n\n const params = { ...rest }\n\n if (hasProgressValue) {\n params.role = 'progressbar'\n params['aria-label'] = title\n params['title'] = title\n } else {\n params.role = 'alert'\n params['aria-busy'] = true\n }\n\n validateDOMAttributes(this.props, params)\n\n return (\n <span\n className={classnames(\n 'dnb-progress-indicator__circular',\n size && `dnb-progress-indicator__circular--${size}`,\n hasProgressValue &&\n 'dnb-progress-indicator__circular--has-progress-value'\n )}\n {...params}\n >\n {/* The first one is the background line */}\n <Circle\n className={classnames(\n 'dnb-progress-indicator__circular__line',\n 'light',\n 'paused'\n )}\n />\n <Circle\n className={classnames(\n 'dnb-progress-indicator__circular__line',\n 'dark',\n 'dark',\n hasProgressValue \|\| this.useAnimationFrame ? 'paused' : null\n )}\n style={hasProgressValue ? { strokeDashoffset } : {}}\n ref={this._refDark}\n />\n {!hasProgressValue && (\n <Circle\n className={classnames(\n 'dnb-progress-indicator__circular__line',\n 'light',\n this.useAnimationFrame ? 'paused' : null\n )}\n ref={this._refLight}\n />\n )}\n </span>\n )\n }\n}\n\nconst Circle = React.forwardRef(({ className, ...rest }, ref) => {\n return (\n <svg\n className={className}\n viewBox=\"0 0 32 32\"\n shapeRendering=\"geometricPrecision\"\n ref={ref}\n {...rest}\n >\n <circle\n className=\"dnb-progress-indicator__circular__circle\"\n fill=\"none\"\n strokeWidth=\"4\"\n cx=\"16\"\n cy=\"16\"\n r=\"14\"\n />\n </svg>\n )\n})\nCircle.propTypes = {\n className: PropTypes.string.isRequired,\n}\n// Circle.defaultProps = {\n// }\n"],"mappings":"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"}

package/es/components/progress-indicator/ProgressIndicatorLinear.js CHANGED Viewed

@@ -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";
-var _div;
+var _span;
 const _excluded = ["size", "title", "progress", "visible", "complete", "onComplete", "callOnCompleteHandler"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -55,14 +55,14 @@ export default class ProgressIndicatorLinear extends React.PureComponent {
       params['aria-busy'] = true;
     }
     validateDOMAttributes(this.props, params);
-    return React.createElement("div", _extends({
+    return React.createElement("span", _extends({
       className: 'dnb-progress-indicator__linear' + (size ? ` dnb-progress-indicator__linear--${size}` : "")
-    }, params), React.createElement("div", {
+    }, params), React.createElement("span", {
       className: "dnb-progress-indicator__linear__bar " + (hasProgressValue ? 'dnb-progress-indicator__linear__bar-transition' : 'dnb-progress-indicator__linear__bar1-animation'),
       style: hasProgressValue ? {
         transform
       } : {}
-    }), !hasProgressValue && (_div || (_div = React.createElement("div", {
+    }), !hasProgressValue && (_span || (_span = React.createElement("span", {
       className: "dnb-progress-indicator__linear__bar dnb-progress-indicator__linear__bar2-animation"
     }))));
   }

package/es/components/progress-indicator/ProgressIndicatorLinear.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressIndicatorLinear.js","names":["React","PropTypes","validateDOMAttributes","isFn","func","ProgressIndicatorLinear","PureComponent","getDerivedStateFromProps","props","state","progress","parseFloat","visible","complete","constructor","onCompleteIsFn","onComplete","callOnCompleteHandler","componentDidUpdate","prevProps","render","_this$props","size","title","_progress","rest","_objectWithoutProperties","_excluded","hasProgressValue","transform","params","_objectSpread","role","createElement","_extends","className","style","~~_div~~","_defineProperty","process","env","NODE_ENV","propTypes","string","bool","oneOfType","number"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorLinear.js"],"sourcesContent":["/*\n Web ProgressIndicator Component\n \n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\n\nconst isFn = (func) => {\n return typeof func === 'function'\n}\n\nexport default class ProgressIndicatorLinear extends React.PureComponent {\n static propTypes = {\n size: PropTypes.string,\n visible: PropTypes.bool,\n complete: PropTypes.bool,\n progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onComplete: PropTypes.func,\n callOnCompleteHandler: PropTypes.func,\n title: PropTypes.string,\n }\n static defaultProps = {\n size: null,\n visible: true,\n complete: false,\n progress: null,\n onComplete: null,\n callOnCompleteHandler: null,\n title: null,\n }\n static getDerivedStateFromProps(props, state) {\n state.progress = parseFloat(props.progress)\n state.visible = props.visible\n state.complete = props.complete\n return state\n }\n constructor(props) {\n super(props)\n this.onCompleteIsFn =\n isFn(this.props.onComplete) && isFn(this.props.callOnCompleteHandler)\n this.state = {}\n }\n\n componentDidUpdate(prevProps) {\n if (\n this.onCompleteIsFn &&\n !this.props.visible &&\n this.props.visible !== prevProps.visible\n ) {\n this.props.callOnCompleteHandler()\n }\n }\n\n render() {\n const {\n size,\n title,\n progress: _progress, // eslint-disable-line\n visible, // eslint-disable-line\n complete, // eslint-disable-line\n onComplete, // eslint-disable-line\n callOnCompleteHandler, // eslint-disable-line\n\n ...rest\n } = this.props\n\n const { progress } = this.state\n\n const hasProgressValue = parseFloat(progress) > -1\n\n const transform = `translateX(${(progress \|\| 0) - 100}%)`\n\n const params = { ...rest }\n\n if (hasProgressValue) {\n params.role = 'progressbar'\n params['aria-label'] = title\n params['title'] = title\n } else {\n params.role = 'alert'\n params['aria-busy'] = true\n }\n\n validateDOMAttributes(this.props, params)\n\n return (\n <~~div~~\n className={classnames(\n 'dnb-progress-indicator__linear',\n size && `dnb-progress-indicator__linear--${size}`\n )}\n {...params}\n >\n <~~div~~\n className={classnames(\n 'dnb-progress-indicator__linear__bar',\n hasProgressValue &&\n 'dnb-progress-indicator__linear__bar-transition',\n !hasProgressValue &&\n 'dnb-progress-indicator__linear__bar1-animation'\n )}\n style={hasProgressValue ? { transform } : {}}\n />\n {!hasProgressValue && (\n <~~div~~\n className={classnames(\n 'dnb-progress-indicator__linear__bar',\n 'dnb-progress-indicator__linear__bar2-animation'\n )}\n />\n )}\n </~~div~~>\n )\n }\n}\n"],"mappings":";;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,qBAAqB,QAAQ,+BAA+B;AAErE,MAAMC,IAAI,GAAIC,IAAI,IAAK;EACrB,OAAO,OAAOA,IAAI,KAAK,UAAU;AACnC,CAAC;AAED,eAAe,MAAMC,uBAAuB,SAASL,KAAK,CAACM,aAAa,CAAC;EAmBvE,OAAOC,wBAAwBA,CAACC,KAAK,EAAEC,KAAK,EAAE;IAC5CA,KAAK,CAACC,QAAQ,GAAGC,UAAU,CAACH,KAAK,CAACE,QAAQ,CAAC;IAC3CD,KAAK,CAACG,OAAO,GAAGJ,KAAK,CAACI,OAAO;IAC7BH,KAAK,CAACI,QAAQ,GAAGL,KAAK,CAACK,QAAQ;IAC/B,OAAOJ,KAAK;EACd;EACAK,WAAWA,CAACN,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACO,cAAc,GACjBZ,IAAI,CAAC,IAAI,CAACK,KAAK,CAACQ,UAAU,CAAC,IAAIb,IAAI,CAAC,IAAI,CAACK,KAAK,CAACS,qBAAqB,CAAC;IACvE,IAAI,CAACR,KAAK,GAAG,CAAC,CAAC;EACjB;EAEAS,kBAAkBA,CAACC,SAAS,EAAE;IAC5B,IACE,IAAI,CAACJ,cAAc,IACnB,CAAC,IAAI,CAACP,KAAK,CAACI,OAAO,IACnB,IAAI,CAACJ,KAAK,CAACI,OAAO,KAAKO,SAAS,CAACP,OAAO,EACxC;MACA,IAAI,CAACJ,KAAK,CAACS,qBAAqB,CAAC,CAAC;IACpC;EACF;EAEAG,MAAMA,CAAA,EAAG;IACP,MAAAC,WAAA,GAUI,IAAI,CAACb,KAAK;MAVR;QACJc,IAAI;QACJC,KAAK;QACLb,QAAQ,EAAEc,SAAS;QACnBZ,OAAO;QACPC,QAAQ;QACRG,UAAU;QACVC;MAGF,CAAC,GAAAI,WAAA;MADII,IAAI,GAAAC,wBAAA,CAAAL,WAAA,EAAAM,SAAA;IAGT,MAAM;MAAEjB;IAAS,CAAC,GAAG,IAAI,CAACD,KAAK;IAE/B,MAAMmB,gBAAgB,GAAGjB,UAAU,CAACD,QAAQ,CAAC,GAAG,CAAC,CAAC;IAElD,MAAMmB,SAAS,GAAI,cAAa,CAACnB,QAAQ,IAAI,CAAC,IAAI,GAAI,IAAG;IAEzD,MAAMoB,MAAM,GAAAC,aAAA,KAAQN,IAAI,CAAE;IAE1B,IAAIG,gBAAgB,EAAE;MACpBE,MAAM,CAACE,IAAI,GAAG,aAAa;MAC3BF,MAAM,CAAC,YAAY,CAAC,GAAGP,KAAK;MAC5BO,MAAM,CAAC,OAAO,CAAC,GAAGP,KAAK;IACzB,CAAC,MAAM;MACLO,MAAM,CAACE,IAAI,GAAG,OAAO;MACrBF,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;IAC5B;IAEA5B,qBAAqB,CAAC,IAAI,CAACM,KAAK,EAAEsB,MAAM,CAAC;IAEzC,OACE9B,KAAA,CAAAiC,aAAA,~~QAAAC~~,QAAA;MACEC,SAAS,EACP,gCAAgC,IAChCb,IAAI,uCAAuCA,IAAK;IAChD,GACEQ,MAAM,GAEV9B,KAAA,CAAAiC,aAAA;MACEE,SAAS,4CAEPP,gBAAgB,GACd,gDAAgD,GAEhD,gDAAgD,CAClD;MACFQ,KAAK,EAAER,gBAAgB,GAAG;QAAEC;MAAU,CAAC,GAAG,CAAC;IAAE,CAC9C,CAAC,EACD,CAACD,gBAAgB,KAAAS,~~IAAA~~,KAAAA,~~IAAA~~,GAChBrC,KAAA,CAAAiC,aAAA;MACEE,SAAS;IAGP,CACH,CAAC,~~EAED~~,CAAC;~~EAEV~~;AACF;AAACG,eAAA,CAvGoBjC,uBAAuB,kBAUpB;EACpBiB,IAAI,EAAE,IAAI;EACVV,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE,KAAK;EACfH,QAAQ,EAAE,IAAI;EACdM,UAAU,EAAE,IAAI;EAChBC,qBAAqB,EAAE,IAAI;EAC3BM,KAAK,EAAE;AACT,CAAC;AAAAgB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAlBkBpC,uBAAuB,CACnCqC,SAAS,GAAG;EACjBpB,IAAI,EAAErB,SAAS,CAAC0C,MAAM;EACtB/B,OAAO,EAAEX,SAAS,CAAC2C,IAAI;EACvB/B,QAAQ,EAAEZ,SAAS,CAAC2C,IAAI;EACxBlC,QAAQ,EAAET,SAAS,CAAC4C,SAAS,CAAC,CAAC5C,SAAS,CAAC0C,MAAM,EAAE1C,SAAS,CAAC6C,MAAM,CAAC,CAAC;EACnE9B,UAAU,EAAEf,SAAS,CAACG,IAAI;EAC1Ba,qBAAqB,EAAEhB,SAAS,CAACG,IAAI;EACrCmB,KAAK,EAAEtB,SAAS,CAAC0C;AACnB,CAAC"}
1	+ {"version":3,"file":"ProgressIndicatorLinear.js","names":["React","PropTypes","validateDOMAttributes","isFn","func","ProgressIndicatorLinear","PureComponent","getDerivedStateFromProps","props","state","progress","parseFloat","visible","complete","constructor","onCompleteIsFn","onComplete","callOnCompleteHandler","componentDidUpdate","prevProps","render","_this$props","size","title","_progress","rest","_objectWithoutProperties","_excluded","hasProgressValue","transform","params","_objectSpread","role","createElement","_extends","className","style","_span","_defineProperty","process","env","NODE_ENV","propTypes","string","bool","oneOfType","number"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorLinear.js"],"sourcesContent":["/*\n Web ProgressIndicator Component\n \n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\n\nconst isFn = (func) => {\n return typeof func === 'function'\n}\n\nexport default class ProgressIndicatorLinear extends React.PureComponent {\n static propTypes = {\n size: PropTypes.string,\n visible: PropTypes.bool,\n complete: PropTypes.bool,\n progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onComplete: PropTypes.func,\n callOnCompleteHandler: PropTypes.func,\n title: PropTypes.string,\n }\n static defaultProps = {\n size: null,\n visible: true,\n complete: false,\n progress: null,\n onComplete: null,\n callOnCompleteHandler: null,\n title: null,\n }\n static getDerivedStateFromProps(props, state) {\n state.progress = parseFloat(props.progress)\n state.visible = props.visible\n state.complete = props.complete\n return state\n }\n constructor(props) {\n super(props)\n this.onCompleteIsFn =\n isFn(this.props.onComplete) && isFn(this.props.callOnCompleteHandler)\n this.state = {}\n }\n\n componentDidUpdate(prevProps) {\n if (\n this.onCompleteIsFn &&\n !this.props.visible &&\n this.props.visible !== prevProps.visible\n ) {\n this.props.callOnCompleteHandler()\n }\n }\n\n render() {\n const {\n size,\n title,\n progress: _progress, // eslint-disable-line\n visible, // eslint-disable-line\n complete, // eslint-disable-line\n onComplete, // eslint-disable-line\n callOnCompleteHandler, // eslint-disable-line\n\n ...rest\n } = this.props\n\n const { progress } = this.state\n\n const hasProgressValue = parseFloat(progress) > -1\n\n const transform = `translateX(${(progress \|\| 0) - 100}%)`\n\n const params = { ...rest }\n\n if (hasProgressValue) {\n params.role = 'progressbar'\n params['aria-label'] = title\n params['title'] = title\n } else {\n params.role = 'alert'\n params['aria-busy'] = true\n }\n\n validateDOMAttributes(this.props, params)\n\n return (\n <span\n className={classnames(\n 'dnb-progress-indicator__linear',\n size && `dnb-progress-indicator__linear--${size}`\n )}\n {...params}\n >\n <span\n className={classnames(\n 'dnb-progress-indicator__linear__bar',\n hasProgressValue &&\n 'dnb-progress-indicator__linear__bar-transition',\n !hasProgressValue &&\n 'dnb-progress-indicator__linear__bar1-animation'\n )}\n style={hasProgressValue ? { transform } : {}}\n />\n {!hasProgressValue && (\n <span\n className={classnames(\n 'dnb-progress-indicator__linear__bar',\n 'dnb-progress-indicator__linear__bar2-animation'\n )}\n />\n )}\n </span>\n )\n }\n}\n"],"mappings":"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"}

package/es/components/progress-indicator/style/dnb-progress-indicator.css CHANGED Viewed

@@ -36,10 +36,13 @@
 }
 .dnb-progress-indicator--horizontal .dnb-progress-indicator__label {
-  margin: 0 1rem;
+  padding-left: 1rem;
+}
+.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label {
+  padding-left: 0.5rem;
 }
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
-  margin-top: 0.5rem;
+  padding-top: 0.5rem;
 }
 .dnb-progress-indicator__circular {
   position: relative;

package/es/components/progress-indicator/style/dnb-progress-indicator.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{~~margin~~:0 1rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{~~margin~~-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{height:100%;inset:0;position:absolute;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color)}.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}
1	+ .dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{padding-left:1rem}.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label{padding-left:.5rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{padding-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{height:100%;inset:0;position:absolute;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color)}.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}

package/es/components/progress-indicator/style/dnb-progress-indicator.scss CHANGED Viewed

@@ -44,11 +44,14 @@
   }
   &--horizontal &__label {
-    margin: 0 1rem;
+    padding-left: 1rem;
+  }
+  &--horizontal#{&}--small &__label {
+    padding-left: 0.5rem;
   }
   &--vertical &__label {
-    margin-top: 0.5rem;
+    padding-top: 0.5rem;
   }
   // circular variant

package/es/components/radio/style/dnb-radio.css CHANGED Viewed

@@ -39,6 +39,8 @@
   --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
   --radio-focus-ring-width--error: var(--focus-ring-width);
+  --radio-bounding--medium: 1.75, 1.5;
+  --radio-bounding--large: 1.25, 1.12;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -117,10 +119,12 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin: 0;
   padding: 0;
   border: 0;
+  transform: scale(var(--radio-bounding--medium));
 }
 .dnb-radio--large .dnb-radio__input {
   width: var(--radio-width--large);
   height: var(--radio-height--large);
+  transform: scale(var(--radio-bounding--large));
 }
 .dnb-radio__input:not([disabled]) {
   cursor: pointer;

package/es/components/radio/style/dnb-radio.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.125rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:calc(var(--radio-height--large) - .125rem);width:calc(var(--radio-width--large) - .125rem)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:calc(var(--radio-height--medium) - .75rem);transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--radio-width--medium) - .75rem)}.dnb-radio--large .dnb-radio__dot{height:calc(var(--radio-height--large) - .875rem);width:calc(var(--radio-width--large) - .875rem)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex;flex-direction:row}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group .dnb-radio{margin-bottom:var(--radio-group-margin-bottom);margin-right:var(--radio-group-margin-right)}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{display:block}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio-group .dnb-flex-container{margin-bottom:calc(0px - var(--radio-group-margin-bottom))}.dnb-radio-group .dnb-flex-container:before{font-size:var(--font-size-basis)}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}
1	+ :root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.125rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:calc(var(--radio-height--large) - .125rem);width:calc(var(--radio-width--large) - .125rem)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:calc(var(--radio-height--medium) - .75rem);transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--radio-width--medium) - .75rem)}.dnb-radio--large .dnb-radio__dot{height:calc(var(--radio-height--large) - .875rem);width:calc(var(--radio-width--large) - .875rem)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex;flex-direction:row}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group .dnb-radio{margin-bottom:var(--radio-group-margin-bottom);margin-right:var(--radio-group-margin-right)}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{display:block}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio-group .dnb-flex-container{margin-bottom:calc(0px - var(--radio-group-margin-bottom))}.dnb-radio-group .dnb-flex-container:before{font-size:var(--font-size-basis)}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}

package/es/components/radio/style/dnb-radio.scss CHANGED Viewed

@@ -45,6 +45,9 @@
   --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
   --radio-focus-ring-width--error: var(--focus-ring-width);
+  // Bounding box
+  --radio-bounding--medium: 1.75, 1.5;
+  --radio-bounding--large: 1.25, 1.12;
   display: inline-flex;
   flex-direction: column;
@@ -130,11 +133,17 @@
     padding: 0;
     border: 0;
+    // Larger bounding box
+    transform: scale(var(--radio-bounding--medium));
   }
   &--large &__input {
     width: var(--radio-width--large);
     height: var(--radio-height--large);
+    // Larger bounding box
+    transform: scale(var(--radio-bounding--large));
   }
   &__input:not([disabled]) {

package/es/components/section/style/themes/dnb-section-theme-ui.css CHANGED Viewed

@@ -92,8 +92,7 @@
 }
 .dnb-section--fire-red .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--emerald-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--sea-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section--success .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   color: var(--anchor-color--contrast);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
 }
 .dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -101,15 +100,13 @@
 @supports not (selector(*:where(*))) {
   .dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
   }
 }
 .dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active, .dnb-section--success .dnb-anchor:active {
   color: var(--color-white);
   background-color: transparent;
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
 }
 .dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible, .dnb-section--success .dnb-anchor:focus-visible {
   color: var(--color-white);

package/es/components/section/style/themes/dnb-section-theme-ui.min.css CHANGED Viewed

@@ -1,3 +1,3 @@
 .dnb-section{--background-color:var(--color-white);--outline-color--value:var(--color-black-8)}.dnb-section--divider{--text-color:var(--color-black-80);--background-color:var(--color-white);--sc:var(--color-mint-green-50);z-index:0}.dnb-section--divider:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor,0 0.0625rem 0 0 var(--sc),99vw 0.0625rem 0 0 var(--sc),0 -0.0625rem 0 0 var(--sc),99vw -0.0625rem 0 0 var(--sc),198vw 0.0625rem 0 0 var(--sc),198vw -0.0625rem 0 0 var(--sc)}.dnb-section--transparent{--background-color:transparent}.dnb-section--default,.dnb-section--mint-green-12{--text-color:var(--text-color--value,var(--color-black-80));--background-color:var(
     --background-color--value,var(--color-mint-green-12)
-  )}.dnb-section--white{--text-color:var(--color-black-80);--background-color:var(--color-white)}.dnb-section--mint-green{--text-color:var(--color-black-80);--background-color:var(--color-mint-green)}.dnb-section--lavender{--text-color:var(--color-black-80);--background-color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{--text-color:var(--color-black-80);--background-color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{--text-color:var(--color-black-80);--background-color:var(--color-pistachio)}.dnb-section--black-3{--text-color:var(--color-black-80);--background-color:var(--color-black-3)}.dnb-section--emerald-green{--text-color:var(--color-mint-green);--background-color:var(--color-emerald-green)}.dnb-section--sea-green{--text-color:var(--color-white);--background-color:var(--color-sea-green)}.dnb-section--fire-red{--text-color:var(--color-white);--background-color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{--text-color:var(--color-black-80);--background-color:var(--color-fire-red-8)}.dnb-section--success{--text-color:var(--color-white);--background-color:var(--color-success-green)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor,.dnb-section--success .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--fire-red .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--sea-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--success .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){.dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--success .dnb-anchor:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible,.dnb-section--success .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{--text-color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{--text-color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{--text-color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}
+  )}.dnb-section--white{--text-color:var(--color-black-80);--background-color:var(--color-white)}.dnb-section--mint-green{--text-color:var(--color-black-80);--background-color:var(--color-mint-green)}.dnb-section--lavender{--text-color:var(--color-black-80);--background-color:var(--color-lavender)}.dnb-section--sand-yellow,.dnb-section--warning{--text-color:var(--color-black-80);--background-color:var(--color-sand-yellow)}.dnb-section--info,.dnb-section--pistachio{--text-color:var(--color-black-80);--background-color:var(--color-pistachio)}.dnb-section--black-3{--text-color:var(--color-black-80);--background-color:var(--color-black-3)}.dnb-section--emerald-green{--text-color:var(--color-mint-green);--background-color:var(--color-emerald-green)}.dnb-section--sea-green{--text-color:var(--color-white);--background-color:var(--color-sea-green)}.dnb-section--fire-red{--text-color:var(--color-white);--background-color:var(--color-fire-red)}.dnb-section--error,.dnb-section--fire-red-8{--text-color:var(--color-black-80);--background-color:var(--color-fire-red-8)}.dnb-section--success{--text-color:var(--color-white);--background-color:var(--color-success-green)}.dnb-section--emerald-green .dnb-anchor,.dnb-section--fire-red .dnb-anchor,.dnb-section--sea-green .dnb-anchor,.dnb-section--success .dnb-anchor{color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--fire-red .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--sea-green .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)),.dnb-section--success .dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){.dnb-section--emerald-green .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--fire-red .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--sea-green .dnb-anchor:hover:not(.dnb-anchor--no-hover),.dnb-section--success .dnb-anchor:hover:not(.dnb-anchor--no-hover){box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}.dnb-section--emerald-green .dnb-anchor:active,.dnb-section--fire-red .dnb-anchor:active,.dnb-section--sea-green .dnb-anchor:active,.dnb-section--success .dnb-anchor:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 transparent,var(--anchor-background-gutter-right,.125rem) 0 0 0 transparent;color:var(--color-white)}.dnb-section--emerald-green .dnb-anchor:focus-visible,.dnb-section--fire-red .dnb-anchor:focus-visible,.dnb-section--sea-green .dnb-anchor:focus-visible,.dnb-section--success .dnb-anchor:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-section--emerald-green .dnb-button--tertiary,.dnb-section--emerald-green .dnb-button--tertiary:hover,.dnb-section--fire-red .dnb-button--tertiary,.dnb-section--fire-red .dnb-button--tertiary:hover,.dnb-section--sea-green .dnb-button--tertiary,.dnb-section--sea-green .dnb-button--tertiary:hover{--text-color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text:after,.dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text:after{--text-color:var(--color-white)!important}.dnb-section--emerald-green .dnb-button--tertiary:focus,.dnb-section--fire-red .dnb-button--tertiary:focus,.dnb-section--sea-green .dnb-button--tertiary:focus{--text-color:var(--color-white)}.dnb-section--emerald-green .dnb-button--tertiary:focus:before,.dnb-section--fire-red .dnb-button--tertiary:focus:before,.dnb-section--sea-green .dnb-button--tertiary:focus:before{outline:none}html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-button--tertiary:focus:before,html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-button--tertiary:focus:before{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-section--fire-red ::selection,.dnb-section--mint-green ::selection{background-color:var(--color-white)}

package/es/components/skeleton/SkeletonHelper.d.ts CHANGED Viewed

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { SkeletonShow } from './Skeleton';
-export interface AutoSizeProps {
+export type AutoSizeProps = {
   __element?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-}
+};
 export class AutoSize extends React.Component<AutoSizeProps, any> {
   render(): JSX.Element;
 }
-export interface SkeletonContextProps {
+export type SkeletonContextProps = ContextProps & {
   translation?: {
     Skeleton?: {
       /**
@@ -18,14 +18,14 @@ export interface SkeletonContextProps {
       aria_busy: string;
     };
   };
-}
+};
 export type SkeletonMethods = 'shape' | 'font' | 'code';
 export declare const createSkeletonClass: (
   method: SkeletonMethods,
   skeleton: SkeletonShow,
   context?: SkeletonContextProps
 ) => string;
-export interface skeletonDOMAttributesContext {
+export type skeletonDOMAttributesContext = {
   translation?: {
     Skeleton: {
       /**
@@ -34,7 +34,7 @@ export interface skeletonDOMAttributesContext {
       aria_busy: string;
     };
   };
-}
+};
 export declare const skeletonDOMAttributes: (
   params: React.HTMLProps<HTMLElement>,
   skeleton: SkeletonShow,

package/es/components/skeleton/style/dnb-skeleton.css CHANGED Viewed

@@ -68,6 +68,7 @@
   --font-family-monospace: "DNBMonoSkeleton" !important;
   font-family: var(--font-family-monospace) !important;
   font-style: unset !important;
+  box-shadow: none !important;
 }
 .dnb-skeleton--font-only, .dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p {
   pointer-events: none;

package/es/components/skeleton/style/dnb-skeleton.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code ,.dnb-skeleton--code pre,.dnb-skeleton--code pre ,.dnb-skeleton--font code,.dnb-skeleton--font code ,.dnb-skeleton--font pre,.dnb-skeleton--font pre {--font-family-monospace:"DNBMonoSkeleton"!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}
1	+ .dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code ,.dnb-skeleton--code pre,.dnb-skeleton--code pre ,.dnb-skeleton--font code,.dnb-skeleton--font code ,.dnb-skeleton--font pre,.dnb-skeleton--font pre {--font-family-monospace:"DNBMonoSkeleton"!important;box-shadow:none!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}

package/es/components/skeleton/style/dnb-skeleton.scss CHANGED Viewed

@@ -87,6 +87,7 @@
       --font-family-monospace: 'DNBMonoSkeleton' !important;
       font-family: var(--font-family-monospace) !important;
       font-style: unset !important;
+      box-shadow: none !important;
     }
   }

package/es/components/slider/SliderInstance.js CHANGED Viewed

@@ -52,6 +52,7 @@ export function SliderInstance() {
   const addButton = showButtons ? _AddButton || (_AddButton = React.createElement(AddButton, null)) : null;
   skeletonDOMAttributes(mainParams, skeleton, context);
   return React.createElement("span", mainParams, label && React.createElement(FormLabel, {
+    forId: `${id}-thumb-0`,
     id: id + '-label',
     text: label,
     disabled: disabled,

package/es/components/slider/SliderInstance.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderInstance.js","names":["React","classnames","isTrue","AlignmentHelper","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","Context","Suffix","Button","FormLabel","FormStatus","SliderMainTrack","SliderTrackBefore","SliderTrackAfter","SliderThumb","useSliderProps","clamp","getFormattedNumber","SliderInstance","context","useContext","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","text","srOnly","_AlignmentHelper","_extends","show","text_id","state","no_animation","Object","entries","map","key","_ref","instance","options","_objectWithoutProperties","_excluded","Element","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","subtractParams","humanNumber","variant","icon","size","replace","aria","String","on_click","addTitle","onAddClickHandler","addParams"],"sources":["../../../../src/components/slider/SliderInstance.tsx"],"sourcesContent":["/*\n Web Slider Component\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { isTrue } from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n createSkeletonClass,\n skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport Button from '../button/Button'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\nimport {\n SliderMainTrack,\n SliderTrackBefore,\n SliderTrackAfter,\n} from './SliderTrack'\nimport { SliderThumb } from './SliderThumb'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderInstance() {\n const context = React.useContext(Context)\n\n const {\n isReverse,\n isVertical,\n showButtons,\n showStatus,\n shouldAnimate,\n allProps,\n } = useSliderProps()\n\n const {\n id,\n label,\n labelSrOnly,\n labelDirection,\n status,\n statusProps,\n statusState,\n statusNoAnimation,\n globalStatus,\n stretch,\n skeleton,\n disabled,\n className,\n extensions,\n } = allProps\n\n const mainParams = {\n className: classnames(\n 'dnb-slider',\n isVertical && 'dnb-slider--vertical',\n disabled && 'dnb-slider__state--disabled',\n shouldAnimate && 'dnb-slider__state--animate',\n !showButtons && 'dnb-slider--no-buttons',\n isTrue(stretch) && 'dnb-slider--stretch',\n label && labelDirection && `dnb-slider__label--${labelDirection}`,\n showStatus && 'dnb-slider__form-status',\n status && `dnb-slider__status--${statusState}`,\n 'dnb-form-component',\n createSkeletonClass(null, skeleton),\n createSpacingClasses(allProps),\n className\n ),\n }\n\n const subtractButton = showButtons ? <SubtractButton /> : null\n const addButton = showButtons ? <AddButton /> : null\n\n skeletonDOMAttributes(mainParams, skeleton, context)\n\n return (\n <span {...mainParams}>\n {label && (\n // do not use \"for_id\" as the ID element is not a fo\n <FormLabel\n id={id + '-label'}\n text={label}\n disabled={disabled}\n skeleton={skeleton}\n labelDirection={labelDirection}\n srOnly={labelSrOnly}\n />\n )}\n\n <span className=\"dnb-slider__wrapper\">\n <AlignmentHelper />\n\n <FormStatus\n show={showStatus}\n id={id + '-form-status'}\n globalStatus={globalStatus}\n text_id={id + '-status'} // used for \"aria-describedby\"\n text={status}\n state={statusState}\n no_animation={statusNoAnimation}\n skeleton={skeleton}\n {...statusProps}\n />\n\n <span className=\"dnb-slider__inner\">\n {showButtons && (isReverse ? addButton : subtractButton)}\n\n <SliderMainTrack>\n {extensions &&\n Object.entries(extensions).map(\n ([key, { instance, ...options }]) => {\n const Element = instance as React.ElementType\n return <Element key={key} {...options} />\n }\n )}\n <SliderThumb />\n <SliderTrackBefore />\n <SliderTrackAfter />\n </SliderMainTrack>\n\n {showButtons && (isReverse ? subtractButton : addButton)}\n\n <SliderSuffix />\n </span>\n </span>\n </span>\n )\n}\n\nfunction SliderSuffix() {\n const { allProps } = useSliderProps()\n const { id, suffix } = allProps\n\n return suffix ? (\n <Suffix\n className=\"dnb-slider__suffix\"\n id={id + '-suffix'} // used for \"aria-describedby\"\n context={allProps}\n >\n {suffix}\n </Suffix>\n ) : null\n}\n\nfunction SubtractButton() {\n const { emitChange, value, attributes, allProps } = useSliderProps()\n const {\n step,\n min,\n max,\n disabled,\n skeleton,\n subtractTitle,\n numberFormat,\n } = allProps\n\n const onSubtractClickHandler = (event: MouseEvent \| TouchEvent) => {\n emitChange(event, clamp((value as number) - (step \|\| 1), min, max))\n }\n\n const subtractParams = {}\n\n if (typeof attributes['aria-hidden'] !== 'undefined') {\n subtractParams['aria-hidden'] = attributes['aria-hidden']\n }\n\n const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n return (\n <Button\n className=\"dnb-slider__button dnb-slider__button--subtract\"\n variant=\"secondary\"\n icon=\"subtract\"\n size=\"small\"\n aria-label={subtractTitle?.replace(\n '%s',\n humanNumber.aria \|\| String(value)\n )}\n on_click={onSubtractClickHandler}\n disabled={disabled}\n skeleton={skeleton}\n {...subtractParams}\n />\n )\n}\n\nfunction AddButton() {\n const { emitChange, value, attributes, allProps } = useSliderProps()\n const { step, min, max, disabled, skeleton, addTitle, numberFormat } =\n allProps\n\n const onAddClickHandler = (event: MouseEvent \| TouchEvent) => {\n emitChange(event, clamp((value as number) + (step \|\| 1), min, max))\n }\n\n const addParams = {}\n\n if (typeof attributes['aria-hidden'] !== 'undefined') {\n addParams['aria-hidden'] = attributes['aria-hidden']\n }\n\n const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n return (\n <Button\n className=\"dnb-slider__button dnb-slider__button--add\"\n variant=\"secondary\"\n icon=\"add\"\n size=\"small\"\n aria-label={addTitle?.replace(\n '%s',\n humanNumber.aria \|\| String(value)\n )}\n on_click={onAddClickHandler}\n disabled={disabled}\n skeleton={skeleton}\n {...addParams}\n />\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"SliderInstance.js","names":["React","classnames","isTrue","AlignmentHelper","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","Context","Suffix","Button","FormLabel","FormStatus","SliderMainTrack","SliderTrackBefore","SliderTrackAfter","SliderThumb","useSliderProps","clamp","getFormattedNumber","SliderInstance","context","useContext","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","forId","text","srOnly","_AlignmentHelper","_extends","show","text_id","state","no_animation","Object","entries","map","key","_ref","instance","options","_objectWithoutProperties","_excluded","Element","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","subtractParams","humanNumber","variant","icon","size","replace","aria","String","on_click","addTitle","onAddClickHandler","addParams"],"sources":["../../../../src/components/slider/SliderInstance.tsx"],"sourcesContent":["/*\n Web Slider Component\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { isTrue } from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n createSkeletonClass,\n skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport Button from '../button/Button'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\nimport {\n SliderMainTrack,\n SliderTrackBefore,\n SliderTrackAfter,\n} from './SliderTrack'\nimport { SliderThumb } from './SliderThumb'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderInstance() {\n const context = React.useContext(Context)\n\n const {\n isReverse,\n isVertical,\n showButtons,\n showStatus,\n shouldAnimate,\n allProps,\n } = useSliderProps()\n\n const {\n id,\n label,\n labelSrOnly,\n labelDirection,\n status,\n statusProps,\n statusState,\n statusNoAnimation,\n globalStatus,\n stretch,\n skeleton,\n disabled,\n className,\n extensions,\n } = allProps\n\n const mainParams = {\n className: classnames(\n 'dnb-slider',\n isVertical && 'dnb-slider--vertical',\n disabled && 'dnb-slider__state--disabled',\n shouldAnimate && 'dnb-slider__state--animate',\n !showButtons && 'dnb-slider--no-buttons',\n isTrue(stretch) && 'dnb-slider--stretch',\n label && labelDirection && `dnb-slider__label--${labelDirection}`,\n showStatus && 'dnb-slider__form-status',\n status && `dnb-slider__status--${statusState}`,\n 'dnb-form-component',\n createSkeletonClass(null, skeleton),\n createSpacingClasses(allProps),\n className\n ),\n }\n\n const subtractButton = showButtons ? <SubtractButton /> : null\n const addButton = showButtons ? <AddButton /> : null\n\n skeletonDOMAttributes(mainParams, skeleton, context)\n\n return (\n <span {...mainParams}>\n {label && (\n <FormLabel\n forId={`${id}-thumb-0`}\n id={id + '-label'}\n text={label}\n disabled={disabled}\n skeleton={skeleton}\n labelDirection={labelDirection}\n srOnly={labelSrOnly}\n />\n )}\n\n <span className=\"dnb-slider__wrapper\">\n <AlignmentHelper />\n\n <FormStatus\n show={showStatus}\n id={id + '-form-status'}\n globalStatus={globalStatus}\n text_id={id + '-status'} // used for \"aria-describedby\"\n text={status}\n state={statusState}\n no_animation={statusNoAnimation}\n skeleton={skeleton}\n {...statusProps}\n />\n\n <span className=\"dnb-slider__inner\">\n {showButtons && (isReverse ? addButton : subtractButton)}\n\n <SliderMainTrack>\n {extensions &&\n Object.entries(extensions).map(\n ([key, { instance, ...options }]) => {\n const Element = instance as React.ElementType\n return <Element key={key} {...options} />\n }\n )}\n <SliderThumb />\n <SliderTrackBefore />\n <SliderTrackAfter />\n </SliderMainTrack>\n\n {showButtons && (isReverse ? subtractButton : addButton)}\n\n <SliderSuffix />\n </span>\n </span>\n </span>\n )\n}\n\nfunction SliderSuffix() {\n const { allProps } = useSliderProps()\n const { id, suffix } = allProps\n\n return suffix ? (\n <Suffix\n className=\"dnb-slider__suffix\"\n id={id + '-suffix'} // used for \"aria-describedby\"\n context={allProps}\n >\n {suffix}\n </Suffix>\n ) : null\n}\n\nfunction SubtractButton() {\n const { emitChange, value, attributes, allProps } = useSliderProps()\n const {\n step,\n min,\n max,\n disabled,\n skeleton,\n subtractTitle,\n numberFormat,\n } = allProps\n\n const onSubtractClickHandler = (event: MouseEvent \| TouchEvent) => {\n emitChange(event, clamp((value as number) - (step \|\| 1), min, max))\n }\n\n const subtractParams = {}\n\n if (typeof attributes['aria-hidden'] !== 'undefined') {\n subtractParams['aria-hidden'] = attributes['aria-hidden']\n }\n\n const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n return (\n <Button\n className=\"dnb-slider__button dnb-slider__button--subtract\"\n variant=\"secondary\"\n icon=\"subtract\"\n size=\"small\"\n aria-label={subtractTitle?.replace(\n '%s',\n humanNumber.aria \|\| String(value)\n )}\n on_click={onSubtractClickHandler}\n disabled={disabled}\n skeleton={skeleton}\n {...subtractParams}\n />\n )\n}\n\nfunction AddButton() {\n const { emitChange, value, attributes, allProps } = useSliderProps()\n const { step, min, max, disabled, skeleton, addTitle, numberFormat } =\n allProps\n\n const onAddClickHandler = (event: MouseEvent \| TouchEvent) => {\n emitChange(event, clamp((value as number) + (step \|\| 1), min, max))\n }\n\n const addParams = {}\n\n if (typeof attributes['aria-hidden'] !== 'undefined') {\n addParams['aria-hidden'] = attributes['aria-hidden']\n }\n\n const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n return (\n <Button\n className=\"dnb-slider__button dnb-slider__button--add\"\n variant=\"secondary\"\n icon=\"add\"\n size=\"small\"\n aria-label={addTitle?.replace(\n '%s',\n humanNumber.aria \|\| String(value)\n )}\n on_click={onAddClickHandler}\n disabled={disabled}\n skeleton={skeleton}\n {...addParams}\n />\n )\n}\n"],"mappings":"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"}

package/es/components/slider/SliderThumb.js CHANGED Viewed

@@ -101,10 +101,11 @@ function Thumb({
   }
   validateDOMAttributes(allProps, thumbParams);
   const elemRef = React.useRef();
-  return React.createElement(React.Fragment, null, React.createElement("span", {
+  return React.createElement("span", {
     className: "dnb-slider__thumb",
     style: style
   }, React.createElement("input", _extends({
+    id: `${id}-thumb-${currentIndex}`,
     type: "range",
     className: "dnb-slider__button-helper",
     min: min,
@@ -123,6 +124,7 @@ function Thumb({
     "aria-orientation": isVertical ? 'vertical' : 'horizontal',
     "data-index": currentIndex
   }, helperParams)), React.createElement(Button, _extends({
+    id: `${id}-button-${currentIndex}`,
     element: "span",
     type: "",
     variant: "secondary",
@@ -135,6 +137,6 @@ function Thumb({
     active: Boolean(showTooltip || alwaysShowTooltip),
     showDelay: 1,
     hideDelay: 300
-  }, number || value, shouldAnimate)));
+  }, number || value, shouldAnimate));
 }
 //# sourceMappingURL=SliderThumb.js.map