@dnb/eufemia 10.28.0 → 10.30.0

package/components/progress-indicator/ProgressIndicatorDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicatorDocs.js","names":["ProgressIndicatorProperties","progress","doc","type","defaultValue","status","visible","noAnimation","size","label","labelDirection","showDefaultLabel","indicator_label","title","ProgressIndicatorDeprecatedProperties","no_animation","label_direction","show_label","children","ProgressIndicatorEvents","onComplete","ProgressIndicatorDeprecatedEvents","on_complete"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ProgressIndicatorProperties: PropertiesTableProps = {\n  progress: {\n    doc: 'A number between 0-100, if not supplied a continous loading-type animation will be used.',\n    type: ['string', 'number'],\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  type: {\n    doc: 'Defines the type.',\n    type: [`'circular'`, `'linear'`],\n    defaultValue: `'circular'`,\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'Disables the fade-in and fade-out animation.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Defines the size.',\n    type: [`'default'`, `'small'`, `'medium'`, `'large'`, `'huge'`],\n    defaultValue: `'default'`,\n    status: 'optional',\n  },\n  label: {\n    doc: 'Show a custom label to the right or under the indicator.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: 'Sets the position of the label.',\n    type: [`'horizontal'`, '`vertical`'],\n    defaultValue: `'horizontal'`,\n    status: 'optional',\n  },\n  showDefaultLabel: {\n    doc: 'If set to `true` a default label (from text locales) will be shown.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Use this to override the default label from text locales.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const ProgressIndicatorDeprecatedProperties: PropertiesTableProps =\n  {\n    no_animation: {\n      doc: 'use `noAnimation`.',\n      type: ' boolean',\n      status: 'deprecated',\n    },\n    label_direction: {\n      doc: 'use `labelDirection`.',\n      type: 'string',\n      status: 'deprecated',\n    },\n    show_label: {\n      doc: 'use `showDefaultLabel`.',\n      type: 'boolean',\n      status: 'deprecated',\n    },\n    children: {\n      doc: 'use the `label` prop instead.',\n      type: 'React.ReactNode',\n      status: 'deprecated',\n    },\n  }\n\nexport const ProgressIndicatorEvents: PropertiesTableProps = {\n  onComplete: {\n    doc: \"Will be called once it's no longer `visible`.\",\n    type: 'function',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\nexport const ProgressIndicatorDeprecatedEvents: PropertiesTableProps = {\n  on_complete: {\n    doc: 'use `onComplete`.',\n    type: 'function',\n    status: 'deprecated',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProgressIndicatorDocs.js","names":["ProgressIndicatorProperties","progress","doc","type","defaultValue","status","visible","noAnimation","size","label","children","labelDirection","showDefaultLabel","indicator_label","title","customCircleWidth","CustomColorsData","line","shaft","background","ProgressIndicatorDeprecatedProperties","no_animation","label_direction","show_label","ProgressIndicatorEvents","onComplete","ProgressIndicatorDeprecatedEvents","on_complete"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ProgressIndicatorProperties: PropertiesTableProps = {\n  progress: {\n    doc: 'A number between 0-100, if not supplied a continous loading-type animation will be used.',\n    type: ['string', 'number'],\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  type: {\n    doc: 'Defines the type.',\n    type: [`'circular'`, `'linear'`, `'countdown'`],\n    defaultValue: `'circular'`,\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'Disables the fade-in and fade-out animation.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Defines the size.',\n    type: [\n      `'default'`,\n      `'small'`,\n      `'medium'`,\n      `'large'`,\n      `'huge'`,\n      'string',\n    ],\n    defaultValue: `'default'`,\n    status: 'optional',\n  },\n  label: {\n    doc: 'Content of a custom label. (Overrides `indicator_label` and `showDefaultLabel`)',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Same as `label` prop (`label` prop has priority)',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: \"Sets the position of the label. `'inside'` only works with `type='circular'.\",\n    type: [`'horizontal'`, `'vertical'`, `'inside'`],\n    defaultValue: `'horizontal'`,\n    status: 'optional',\n  },\n  showDefaultLabel: {\n    doc: 'If set to `true` a default label (from text locales) will be shown.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  indicator_label: {\n    doc: 'Use this to override the default label from text locales.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[customColors](/uilib/components/progress-indicator/properties/#data-object-customcolors)':\n    {\n      doc: 'Send in custom css colors that overrides any css. See below for data structure.',\n      type: 'object',\n      defaultValue: 'undefined',\n      status: 'optional',\n    },\n  customCircleWidth: {\n    doc: 'Send in custom css width for circle progress line. (`undefined` defaults to one eighth of the size).',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const CustomColorsData: PropertiesTableProps = {\n  line: {\n    doc: 'Override the moving line color.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  shaft: {\n    doc: 'Override the background line color.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  background: {\n    doc: 'Set a background color for the center of the circle.',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const ProgressIndicatorDeprecatedProperties: PropertiesTableProps =\n  {\n    no_animation: {\n      doc: 'use `noAnimation`.',\n      type: ' boolean',\n      status: 'deprecated',\n    },\n    label_direction: {\n      doc: 'use `labelDirection`.',\n      type: 'string',\n      status: 'deprecated',\n    },\n    show_label: {\n      doc: 'use `showDefaultLabel`.',\n      type: 'boolean',\n      status: 'deprecated',\n    },\n  }\n\nexport const ProgressIndicatorEvents: PropertiesTableProps = {\n  onComplete: {\n    doc: \"Will be called once it's no longer `visible`.\",\n    type: 'function',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\nexport const ProgressIndicatorDeprecatedEvents: PropertiesTableProps = {\n  on_complete: {\n    doc: 'use `onComplete`.',\n    type: 'function',\n    status: 'deprecated',\n  },\n}\n"],"mappings":"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"}

package/components/progress-indicator/ProgressIndicatorLinear.d.ts

@@ -2,26 +2,6 @@
  * Web ProgressIndicator Component
  *
  */
-import React from 'react';
-type ProgressIndicatorLinearProps = {
-    /**
-     * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.
-     */
-    size?: string;
-    /**
-     * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
-     */
-    visible?: boolean;
-    /**
-     * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`.
-     */
-    progress?: number;
-    onComplete?: (...args: any[]) => any;
-    callOnCompleteHandler?: (...args: any[]) => any;
-    /**
-     * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
-     */
-    title?: string;
-};
-declare function ProgressIndicatorLine(props: ProgressIndicatorLinearProps & Omit<React.HTMLProps<HTMLElement>, 'size'>): import("react/jsx-runtime").JSX.Element;
+import { ProgressIndicatorLinearAllProps } from './types';
+declare function ProgressIndicatorLine(props: ProgressIndicatorLinearAllProps): import("react/jsx-runtime").JSX.Element;
 export default ProgressIndicatorLine;

package/components/progress-indicator/ProgressIndicatorLinear.js

@@ -3,8 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _span;
-const _excluded = ["size", "title", "progress", "visible", "onComplete", "callOnCompleteHandler"];
+const _excluded = ["size", "title", "progress", "visible", "onComplete", "callOnCompleteHandler", "customColors", "style"];
 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; }
 import React, { useRef, useEffect } from 'react';
@@ -23,7 +22,9 @@ function ProgressIndicatorLine(props) {
       progress,
       visible,
       onComplete,
-      callOnCompleteHandler
+      callOnCompleteHandler,
+      customColors,
+      style
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const onCompleteIsFn = typeof onComplete === 'function' && typeof callOnCompleteHandler === 'function';
@@ -43,15 +44,22 @@ function ProgressIndicatorLine(props) {
   }
   const remainingDOMAttributes = validateDOMAttributes(props, _objectSpread({}, rest));
   return React.createElement("span", _extends({
-    className: 'dnb-progress-indicator__linear' + (size ? ` dnb-progress-indicator__linear--${size}` : "")
+    className: 'dnb-progress-indicator__linear' + (size ? ` dnb-progress-indicator__linear--${size}` : ""),
+    style: _objectSpread(_objectSpread({}, style), (customColors === null || customColors === void 0 ? void 0 : customColors.shaft) && {
+      backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.shaft
+    })
   }, remainingDOMAttributes), 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 && (_span || (_span = React.createElement("span", {
-    className: "dnb-progress-indicator__linear__bar dnb-progress-indicator__linear__bar2-animation"
-  }))));
+    style: {
+      backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.line,
+      transform: hasProgressValue ? transform : undefined
+    }
+  }), !hasProgressValue && React.createElement("span", {
+    className: "dnb-progress-indicator__linear__bar dnb-progress-indicator__linear__bar2-animation",
+    style: {
+      backgroundColor: customColors === null || customColors === void 0 ? void 0 : customColors.line
+    }
+  }));
 }
 export default ProgressIndicatorLine;
 //# sourceMappingURL=ProgressIndicatorLinear.js.map

package/components/progress-indicator/ProgressIndicatorLinear.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicatorLinear.js","names":["React","useRef","useEffect","validateDOMAttributes","usePrevious","value","ref","current","ProgressIndicatorLine","props","size","title","progress","visible","onComplete","callOnCompleteHandler","rest","_objectWithoutProperties","_excluded","onCompleteIsFn","visibleCurrent","visiblePrev","hasProgressValue","transform","role","remainingDOMAttributes","_objectSpread","createElement","_extends","className","style","_span"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorLinear.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, { useRef, useEffect } from 'react'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\ntype ProgressIndicatorLinearProps = {\n  /**\n   * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.\n   */\n  size?: string\n  /**\n   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.\n   */\n  visible?: boolean\n  /**\n   * To visualize a static \"percentage\" (0-100) as a progress state. Defaults to `null`.\n   */\n  progress?: number\n  onComplete?: (...args: any[]) => any\n  callOnCompleteHandler?: (...args: any[]) => any\n  /**\n   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.\n   */\n  title?: string\n}\n\nfunction usePrevious<P>(value: P): [P, P] {\n  const ref = useRef<P>()\n  useEffect(() => {\n    ref.current = value\n  }, [value])\n  return [ref.current, value]\n}\n\nfunction ProgressIndicatorLine(\n  props: ProgressIndicatorLinearProps &\n    Omit<React.HTMLProps<HTMLElement>, 'size'>\n) {\n  const {\n    size,\n    title,\n    progress,\n    visible,\n    onComplete,\n    callOnCompleteHandler,\n    ...rest\n  } = props\n\n  const onCompleteIsFn =\n    typeof onComplete === 'function' &&\n    typeof callOnCompleteHandler === 'function'\n\n  const [visibleCurrent, visiblePrev] = usePrevious(visible)\n\n  if (onCompleteIsFn && !visibleCurrent && visiblePrev) {\n    callOnCompleteHandler()\n  }\n\n  const hasProgressValue = progress > -1\n\n  const transform = `translateX(${(progress || 0) - 100}%)`\n\n  if (hasProgressValue) {\n    rest.role = 'progressbar'\n    rest['aria-label'] = title\n    rest['title'] = title\n  } else {\n    rest.role = 'alert'\n    rest['aria-busy'] = true\n  }\n\n  const remainingDOMAttributes = validateDOMAttributes(props, { ...rest })\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator__linear',\n        size && `dnb-progress-indicator__linear--${size}`\n      )}\n      {...remainingDOMAttributes}\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\nexport default ProgressIndicatorLine\n"],"mappings":";;;;;;;;;AAKA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAEhD,SAASC,qBAAqB,QAAQ,+BAA+B;AAsBrE,SAASC,WAAWA,CAAIC,KAAQ,EAAU;EACxC,MAAMC,GAAG,GAAGL,MAAM,CAAI,CAAC;EACvBC,SAAS,CAAC,MAAM;IACdI,GAAG,CAACC,OAAO,GAAGF,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACX,OAAO,CAACC,GAAG,CAACC,OAAO,EAAEF,KAAK,CAAC;AAC7B;AAEA,SAASG,qBAAqBA,CAC5BC,KAC4C,EAC5C;EACA,MAAM;MACJC,IAAI;MACJC,KAAK;MACLC,QAAQ;MACRC,OAAO;MACPC,UAAU;MACVC;IAEF,CAAC,GAAGN,KAAK;IADJO,IAAI,GAAAC,wBAAA,CACLR,KAAK,EAAAS,SAAA;EAET,MAAMC,cAAc,GAClB,OAAOL,UAAU,KAAK,UAAU,IAChC,OAAOC,qBAAqB,KAAK,UAAU;EAE7C,MAAM,CAACK,cAAc,EAAEC,WAAW,CAAC,GAAGjB,WAAW,CAACS,OAAO,CAAC;EAE1D,IAAIM,cAAc,IAAI,CAACC,cAAc,IAAIC,WAAW,EAAE;IACpDN,qBAAqB,CAAC,CAAC;EACzB;EAEA,MAAMO,gBAAgB,GAAGV,QAAQ,GAAG,CAAC,CAAC;EAEtC,MAAMW,SAAS,GAAI,cAAa,CAACX,QAAQ,IAAI,CAAC,IAAI,GAAI,IAAG;EAEzD,IAAIU,gBAAgB,EAAE;IACpBN,IAAI,CAACQ,IAAI,GAAG,aAAa;IACzBR,IAAI,CAAC,YAAY,CAAC,GAAGL,KAAK;IAC1BK,IAAI,CAAC,OAAO,CAAC,GAAGL,KAAK;EACvB,CAAC,MAAM;IACLK,IAAI,CAACQ,IAAI,GAAG,OAAO;IACnBR,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI;EAC1B;EAEA,MAAMS,sBAAsB,GAAGtB,qBAAqB,CAACM,KAAK,EAAAiB,aAAA,KAAOV,IAAI,CAAE,CAAC;EAExE,OACEhB,KAAA,CAAA2B,aAAA,SAAAC,QAAA;IACEC,SAAS,EACP,gCAAgC,IAChCnB,IAAI,uCAAuCA,IAAK;EAChD,GACEe,sBAAsB,GAE1BzB,KAAA,CAAA2B,aAAA;IACEE,SAAS,4CAEPP,gBAAgB,GACd,gDAAgD,GAEhD,gDAAgD,CAClD;IACFQ,KAAK,EAAER,gBAAgB,GAAG;MAAEC;IAAU,CAAC,GAAG,CAAC;EAAE,CAC9C,CAAC,EACD,CAACD,gBAAgB,KAAAS,KAAA,KAAAA,KAAA,GAChB/B,KAAA,CAAA2B,aAAA;IACEE,SAAS;EAGP,CACH,CAAC,EAEA,CAAC;AAEX;AAEA,eAAerB,qBAAqB"}
+{"version":3,"file":"ProgressIndicatorLinear.js","names":["React","useRef","useEffect","validateDOMAttributes","usePrevious","value","ref","current","ProgressIndicatorLine","props","size","title","progress","visible","onComplete","callOnCompleteHandler","customColors","style","rest","_objectWithoutProperties","_excluded","onCompleteIsFn","visibleCurrent","visiblePrev","hasProgressValue","transform","role","remainingDOMAttributes","_objectSpread","createElement","_extends","className","shaft","backgroundColor","line","undefined"],"sources":["../../../../src/components/progress-indicator/ProgressIndicatorLinear.tsx"],"sourcesContent":["/**\n * Web ProgressIndicator Component\n *\n */\n\nimport React, { useRef, useEffect } from 'react'\nimport classnames from 'classnames'\nimport { validateDOMAttributes } from '../../shared/component-helper'\nimport { ProgressIndicatorLinearAllProps } from './types'\n\nfunction usePrevious<P>(value: P): [P, P] {\n  const ref = useRef<P>()\n  useEffect(() => {\n    ref.current = value\n  }, [value])\n  return [ref.current, value]\n}\n\nfunction ProgressIndicatorLine(props: ProgressIndicatorLinearAllProps) {\n  const {\n    size,\n    title,\n    progress,\n    visible,\n    onComplete,\n    callOnCompleteHandler,\n    customColors,\n    style,\n    ...rest\n  } = props\n\n  const onCompleteIsFn =\n    typeof onComplete === 'function' &&\n    typeof callOnCompleteHandler === 'function'\n\n  const [visibleCurrent, visiblePrev] = usePrevious(visible)\n\n  if (onCompleteIsFn && !visibleCurrent && visiblePrev) {\n    callOnCompleteHandler()\n  }\n\n  const hasProgressValue = progress > -1\n\n  const transform = `translateX(${(progress || 0) - 100}%)`\n\n  if (hasProgressValue) {\n    rest.role = 'progressbar'\n    rest['aria-label'] = title\n    rest['title'] = title\n  } else {\n    rest.role = 'alert'\n    rest['aria-busy'] = true\n  }\n\n  const remainingDOMAttributes = validateDOMAttributes(props, { ...rest })\n\n  return (\n    <span\n      className={classnames(\n        'dnb-progress-indicator__linear',\n        size && `dnb-progress-indicator__linear--${size}`\n      )}\n      style={{\n        ...style,\n        ...(customColors?.shaft && {\n          backgroundColor: customColors?.shaft,\n        }),\n      }}\n      {...remainingDOMAttributes}\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={{\n          backgroundColor: customColors?.line,\n          transform: hasProgressValue ? transform : undefined,\n        }}\n      />\n      {!hasProgressValue && (\n        <span\n          className={classnames(\n            'dnb-progress-indicator__linear__bar',\n            'dnb-progress-indicator__linear__bar2-animation'\n          )}\n          style={{\n            backgroundColor: customColors?.line,\n          }}\n        />\n      )}\n    </span>\n  )\n}\n\nexport default ProgressIndicatorLine\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,SAAS,QAAQ,OAAO;AAEhD,SAASC,qBAAqB,QAAQ,+BAA+B;AAGrE,SAASC,WAAWA,CAAIC,KAAQ,EAAU;EACxC,MAAMC,GAAG,GAAGL,MAAM,CAAI,CAAC;EACvBC,SAAS,CAAC,MAAM;IACdI,GAAG,CAACC,OAAO,GAAGF,KAAK;EACrB,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACX,OAAO,CAACC,GAAG,CAACC,OAAO,EAAEF,KAAK,CAAC;AAC7B;AAEA,SAASG,qBAAqBA,CAACC,KAAsC,EAAE;EACrE,MAAM;MACJC,IAAI;MACJC,KAAK;MACLC,QAAQ;MACRC,OAAO;MACPC,UAAU;MACVC,qBAAqB;MACrBC,YAAY;MACZC;IAEF,CAAC,GAAGR,KAAK;IADJS,IAAI,GAAAC,wBAAA,CACLV,KAAK,EAAAW,SAAA;EAET,MAAMC,cAAc,GAClB,OAAOP,UAAU,KAAK,UAAU,IAChC,OAAOC,qBAAqB,KAAK,UAAU;EAE7C,MAAM,CAACO,cAAc,EAAEC,WAAW,CAAC,GAAGnB,WAAW,CAACS,OAAO,CAAC;EAE1D,IAAIQ,cAAc,IAAI,CAACC,cAAc,IAAIC,WAAW,EAAE;IACpDR,qBAAqB,CAAC,CAAC;EACzB;EAEA,MAAMS,gBAAgB,GAAGZ,QAAQ,GAAG,CAAC,CAAC;EAEtC,MAAMa,SAAS,GAAI,cAAa,CAACb,QAAQ,IAAI,CAAC,IAAI,GAAI,IAAG;EAEzD,IAAIY,gBAAgB,EAAE;IACpBN,IAAI,CAACQ,IAAI,GAAG,aAAa;IACzBR,IAAI,CAAC,YAAY,CAAC,GAAGP,KAAK;IAC1BO,IAAI,CAAC,OAAO,CAAC,GAAGP,KAAK;EACvB,CAAC,MAAM;IACLO,IAAI,CAACQ,IAAI,GAAG,OAAO;IACnBR,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI;EAC1B;EAEA,MAAMS,sBAAsB,GAAGxB,qBAAqB,CAACM,KAAK,EAAAmB,aAAA,KAAOV,IAAI,CAAE,CAAC;EAExE,OACElB,KAAA,CAAA6B,aAAA,SAAAC,QAAA;IACEC,SAAS,EACP,gCAAgC,IAChCrB,IAAI,uCAAuCA,IAAK,QAChD;IACFO,KAAK,EAAAW,aAAA,CAAAA,aAAA,KACAX,KAAK,GACJ,CAAAD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEgB,KAAK,KAAI;MACzBC,eAAe,EAAEjB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEgB;IACjC,CAAC;EACD,GACEL,sBAAsB,GAE1B3B,KAAA,CAAA6B,aAAA;IACEE,SAAS,4CAEPP,gBAAgB,GACd,gDAAgD,GAEhD,gDAAgD,CAClD;IACFP,KAAK,EAAE;MACLgB,eAAe,EAAEjB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEkB,IAAI;MACnCT,SAAS,EAAED,gBAAgB,GAAGC,SAAS,GAAGU;IAC5C;EAAE,CACH,CAAC,EACD,CAACX,gBAAgB,IAChBxB,KAAA,CAAA6B,aAAA;IACEE,SAAS,sFAGP;IACFd,KAAK,EAAE;MACLgB,eAAe,EAAEjB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEkB;IACjC;EAAE,CACH,CAEC,CAAC;AAEX;AAEA,eAAe1B,qBAAqB"}

package/components/progress-indicator/style/dnb-progress-indicator.css

@@ -7,11 +7,16 @@
  */
 .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-circle: 314.159265359%;
+  --progress-indicator-circular-circle-offset--min: 314.159265359%;
+  --progress-indicator-circular-circle-offset--max: 1%;
+  --progress-indicator-circular-size: 2rem;
+  --progress-indicator-circular-stroke-width: calc(
+    var(--progress-indicator-circular-size) / 8
+  );
   --progress-indicator-circular-background-color: grey;
   --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-size: 0.5rem;
   --progress-indicator-linear-background-color: grey;
   --progress-indicator-linear-bar-color: var(--color-black);
   position: relative;
@@ -44,10 +49,32 @@
 .dnb-progress-indicator--vertical .dnb-progress-indicator__label {
   padding-top: 0.5rem;
 }
+.dnb-progress-indicator--inside .dnb-progress-indicator__label {
+  position: absolute;
+  width: 100%;
+  justify-content: center;
+  padding: var(--progress-indicator-circular-stroke-width);
+}
+.dnb-progress-indicator--small {
+  --progress-indicator-circular-size: 1rem;
+  --progress-indicator-linear-size: 0.25rem;
+}
+.dnb-progress-indicator--medium {
+  --progress-indicator-circular-size: 1.5rem;
+  --progress-indicator-linear-size: 1rem;
+}
+.dnb-progress-indicator--large {
+  --progress-indicator-circular-size: 3.5rem;
+  --progress-indicator-linear-size: 1.5rem;
+}
+.dnb-progress-indicator--huge {
+  --progress-indicator-circular-size: 20rem;
+  --progress-indicator-linear-size: 2rem;
+}
 .dnb-progress-indicator__circular {
   position: relative;
-  width: 2rem;
-  height: 2rem;
+  width: var(--progress-indicator-circular-size);
+  height: var(--progress-indicator-circular-size);
   transform: rotate(-90deg);
 }
 .dnb-progress-indicator__circular svg {
@@ -55,6 +82,21 @@
   inset: 0;
   width: 100%;
   height: 100%;
+  padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+}
+.dnb-progress-indicator__circular svg:not(:root) {
+  overflow: visible;
+}
+.dnb-progress-indicator__circular__background-padding {
+  display: block;
+  height: 100%;
+  padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+}
+.dnb-progress-indicator__circular__background {
+  display: block;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 50%;
 }
 .dnb-progress-indicator__circular__line {
   animation-duration: 2s;
@@ -83,43 +125,14 @@
 }
 .dnb-progress-indicator__circular__circle {
   stroke-linecap: round;
+  stroke-width: var(--progress-indicator-circular-stroke-width);
 }
 .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 {
-  width: 1rem;
-  height: 1rem;
-}
-.dnb-progress-indicator__circular--medium {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.dnb-progress-indicator__circular--large {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-.dnb-progress-indicator__circular--huge {
-  width: 20rem;
-  height: 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;
+  stroke-width: calc(var(--progress-indicator-circular-stroke-width) - 0.5px);
 }
 .dnb-progress-indicator__linear {
   background-color: var(--progress-indicator-linear-background-color);
@@ -127,8 +140,8 @@
   overflow: hidden;
   width: 100%;
   will-change: transform;
-  height: 0.5rem;
-  border-radius: 0.25rem;
+  height: var(--progress-indicator-linear-size);
+  border-radius: calc(var(--progress-indicator-linear-size) / 2);
 }
 .dnb-progress-indicator__linear__bar {
   background-color: var(--progress-indicator-linear-bar-color);
@@ -151,22 +164,6 @@
   width: auto;
   animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
-.dnb-progress-indicator__linear--small {
-  height: 0.25rem;
-  border-radius: 0.125rem;
-}
-.dnb-progress-indicator__linear--medium {
-  height: 1rem;
-  border-radius: 0.5rem;
-}
-.dnb-progress-indicator__linear--large {
-  height: 1.5rem;
-  border-radius: 0.75rem;
-}
-.dnb-progress-indicator__linear--huge {
-  height: 2rem;
-  border-radius: 1rem;
-}
 html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation {
   left: -35%;
   right: 100%;
@@ -190,7 +187,7 @@ html[data-visual-test] .dnb-progress-indicator {
   opacity: 1;
   animation-duration: 0ms;
 }
-.dnb-progress-indicator--no-animation {
+.dnb-progress-indicator--no-animation, .dnb-progress-indicator--no-animation.dnb-progress-indicator--complete {
   animation-duration: 0ms;
 }
 html[data-visual-test] .dnb-progress-indicator__bar-transition {

package/components/progress-indicator/style/dnb-progress-indicator.min.css

@@ -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{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%}}
+.dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:314.159265359%;--progress-indicator-circular-circle-offset--min:314.159265359%;--progress-indicator-circular-circle-offset--max:1%;--progress-indicator-circular-size:2rem;--progress-indicator-circular-stroke-width:calc(var(--progress-indicator-circular-size)/8);--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-size:0.5rem;--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--inside .dnb-progress-indicator__label{justify-content:center;padding:var(--progress-indicator-circular-stroke-width);position:absolute;width:100%}.dnb-progress-indicator--small{--progress-indicator-circular-size:1rem;--progress-indicator-linear-size:0.25rem}.dnb-progress-indicator--medium{--progress-indicator-circular-size:1.5rem;--progress-indicator-linear-size:1rem}.dnb-progress-indicator--large{--progress-indicator-circular-size:3.5rem;--progress-indicator-linear-size:1.5rem}.dnb-progress-indicator--huge{--progress-indicator-circular-size:20rem;--progress-indicator-linear-size:2rem}.dnb-progress-indicator__circular{height:var(--progress-indicator-circular-size);position:relative;transform:rotate(-90deg);width:var(--progress-indicator-circular-size)}.dnb-progress-indicator__circular svg{height:100%;inset:0;padding:calc(var(--progress-indicator-circular-stroke-width)/2);position:absolute;width:100%}.dnb-progress-indicator__circular svg:not(:root){overflow:visible}.dnb-progress-indicator__circular__background-padding{display:block;height:100%;padding:calc(var(--progress-indicator-circular-stroke-width)/2)}.dnb-progress-indicator__circular__background{background-color:transparent;border-radius:50%;display:block;height: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;stroke-width:var(--progress-indicator-circular-stroke-width)}.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);stroke-width:calc(var(--progress-indicator-circular-stroke-width) - .5px)}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:calc(var(--progress-indicator-linear-size)/2);height:var(--progress-indicator-linear-size);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}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,.dnb-progress-indicator--no-animation.dnb-progress-indicator--complete{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/components/progress-indicator/style/dnb-progress-indicator.scss

@@ -7,11 +7,17 @@
 
 .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;
+  // 314.159...% is the full circumference of a circle (2πr). The radius is 50%, so the circumference is π * 100%
+  --progress-indicator-circular-circle: 314.159265359%;
+  --progress-indicator-circular-circle-offset--min: 314.159265359%;
+  --progress-indicator-circular-circle-offset--max: 1%;
+  --progress-indicator-circular-size: 2rem;
+  --progress-indicator-circular-stroke-width: calc(
+    var(--progress-indicator-circular-size) / 8
+  );
   --progress-indicator-circular-background-color: grey;
   --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-size: 0.5rem;
   --progress-indicator-linear-background-color: grey;
   --progress-indicator-linear-bar-color: var(--color-black);
 
@@ -54,13 +60,40 @@
     padding-top: 0.5rem;
   }
 
+  &--inside &__label {
+    position: absolute;
+    width: 100%;
+    justify-content: center;
+    padding: var(--progress-indicator-circular-stroke-width);
+  }
+
+  &--small {
+    --progress-indicator-circular-size: 1rem;
+    --progress-indicator-linear-size: 0.25rem;
+  }
+
+  &--medium {
+    --progress-indicator-circular-size: 1.5rem;
+    --progress-indicator-linear-size: 1rem;
+  }
+
+  &--large {
+    --progress-indicator-circular-size: 3.5rem;
+    --progress-indicator-linear-size: 1.5rem;
+  }
+
+  &--huge {
+    --progress-indicator-circular-size: 20rem;
+    --progress-indicator-linear-size: 2rem;
+  }
+
   // circular variant
   &__circular {
     position: relative;
 
     // default/basis size
-    width: 2rem;
-    height: 2rem;
+    width: var(--progress-indicator-circular-size);
+    height: var(--progress-indicator-circular-size);
 
     // since SVG is starting 90deg from top
     transform: rotate(-90deg);
@@ -70,6 +103,24 @@
       inset: 0;
       width: 100%;
       height: 100%;
+      padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+
+      &:not(:root) {
+        overflow: visible;
+      }
+    }
+
+    &__background-padding {
+      display: block;
+      height: 100%;
+      padding: calc(var(--progress-indicator-circular-stroke-width) / 2);
+    }
+
+    &__background {
+      display: block;
+      height: 100%;
+      background-color: transparent;
+      border-radius: 50%;
     }
 
     &__line {
@@ -114,6 +165,7 @@
 
     &__circle {
       stroke-linecap: round;
+      stroke-width: var(--progress-indicator-circular-stroke-width);
     }
 
     &__line.light &__circle {
@@ -122,47 +174,10 @@
 
     &__line.dark &__circle {
       stroke: var(--progress-indicator-circular-bar-color);
-    }
-
-    &--small {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    &--medium {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    &--large {
-      width: 3.5rem;
-      height: 3.5rem;
-    }
-
-    &--huge {
-      width: 20rem;
-      height: 20rem;
-    }
-
-    // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
-    &--small &__line.dark &__circle {
-      stroke-width: 3.1;
-    }
-
-    &--medium &__line.dark &__circle {
-      stroke-width: 3.3;
-    }
-
-    &--default &__line.dark &__circle {
-      stroke-width: 3.5;
-    }
-
-    &--large &__line.dark &__circle {
-      stroke-width: 3.7;
-    }
-
-    &--huge &__line.dark &__circle {
-      stroke-width: 3.9;
+      // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
+      stroke-width: calc(
+        var(--progress-indicator-circular-stroke-width) - 0.5px
+      );
     }
   }
 
@@ -175,8 +190,8 @@
     will-change: transform;
 
     // default/basis size
-    height: 0.5rem;
-    border-radius: 0.25rem;
+    height: var(--progress-indicator-linear-size);
+    border-radius: calc(var(--progress-indicator-linear-size) / 2);
 
     &__bar {
       background-color: var(--progress-indicator-linear-bar-color);
@@ -205,26 +220,6 @@
         cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
     }
 
-    &--small {
-      height: 0.25rem;
-      border-radius: 0.125rem;
-    }
-
-    &--medium {
-      height: 1rem;
-      border-radius: 0.5rem;
-    }
-
-    &--large {
-      height: 1.5rem;
-      border-radius: 0.75rem;
-    }
-
-    &--huge {
-      height: 2rem;
-      border-radius: 1rem;
-    }
-
     html[data-visual-test] &__bar1-animation {
       left: -35%;
       right: 100%;
@@ -254,7 +249,8 @@
     animation-duration: 0ms;
   }
 
-  &--no-animation {
+  &--no-animation,
+  &--no-animation#{&}--complete {
     animation-duration: 0ms;
   }
 

package/components/progress-indicator/types.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import CSS from 'csstype';
+import { SpacingProps } from '../space/types';
+declare const validSizes: readonly ["default", "small", "medium", "large", "huge"];
+export type ValidSizes = (typeof validSizes)[number];
+export type CustomSize = CSS.Property.Width;
+export declare function isValidSize(size: ProgressIndicatorProps['size']): size is ValidSizes;
+export type ProgressIndicatorProps = {
+    /**
+     * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.
+     */
+    visible?: boolean;
+    /**
+     * Defines the type. Defaults to `circular`.
+     */
+    type?: 'circular' | 'linear' | 'countdown';
+    /**
+     * Disables the fade-in and fade-out animation. Defaults to `false`.
+     */
+    noAnimation?: boolean;
+    /**
+     * Defines the size. Defaults to `default`.
+     */
+    size?: ValidSizes | CustomSize;
+    /**
+     * A number between 0-100, if not supplied a continous loading-type animation will be used. Defaults to `undefined`
+     */
+    progress?: string | number;
+    /**
+     * Content of a custom label. (Overrides `indicator_label` and `showDefaultLabel`)
+     */
+    label?: React.ReactNode;
+    /**
+     * Same as `label` prop (`label` prop has priority)
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets the position of the label. `'inside'` only works with `type='circular'. Defaults to `horizontal`.
+     */
+    labelDirection?: 'horizontal' | 'vertical' | 'inside';
+    /**
+     * If set to `true` a default label (from text locales) will be shown.
+     */
+    showDefaultLabel?: boolean;
+    /**
+     * Use this to override the default label from text locales.
+     */
+    indicator_label?: string;
+    /**
+     * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.
+     */
+    title?: string;
+    /**
+     * Will be called once it's no longer `visible`.
+     */
+    onComplete?: (...args: any[]) => any;
+    /**
+     * Send in custom css colors that overrides any css. Default is `undefined`.
+     */
+    customColors?: {
+        /**
+         * Override the moving line color.
+         */
+        line?: CSS.Property.BackgroundColor;
+        /**
+         * Override the background line color.
+         */
+        shaft?: CSS.Property.BackgroundColor;
+        /**
+         * Set a background color for the center of the circle.
+         */
+        background?: CSS.Property.BackgroundColor;
+    };
+    /**
+     * Send in custom css width for circle progress line. Default is `undefined`. (`undefined` defaults to one eighth of the size).
+     */
+    customCircleWidth?: CSS.Property.StrokeWidth;
+};
+export type ProgressIndicatorAnimationProps = Pick<ProgressIndicatorProps, 'size' | 'visible' | 'progress' | 'onComplete' | 'customColors' | 'customCircleWidth'> & {
+    size?: ValidSizes | 'custom-size';
+    progress?: number;
+    /**
+     * Callback when animation ends because `visible` is set to false
+     */
+    callOnCompleteHandler?: (...args: any[]) => any;
+};
+export type ProgressIndicatorAllProps = Omit<React.HTMLProps<HTMLSpanElement>, 'ref' | 'label' | 'size'> & SpacingProps & ProgressIndicatorProps;
+export type ProgressIndicatorCircularAllProps = Omit<React.HTMLProps<HTMLElement>, 'size'> & ProgressIndicatorAnimationProps & {
+    /**
+     * Reverse the direction of the progress bar. Defaults to `false`.
+     */
+    counterClockwise?: boolean;
+};
+export type ProgressIndicatorLinearAllProps = Omit<React.HTMLProps<HTMLElement>, 'size'> & Omit<ProgressIndicatorAnimationProps, 'customCircleWidth'>;
+export {};

package/components/progress-indicator/types.js

@@ -0,0 +1,5 @@
+const validSizes = ['default', 'small', 'medium', 'large', 'huge'];
+export function isValidSize(size) {
+  return validSizes.some(validSize => validSize === size);
+}
+//# sourceMappingURL=types.js.map

package/components/progress-indicator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["validSizes","isValidSize","size","some","validSize"],"sources":["../../../../src/components/progress-indicator/types.ts"],"sourcesContent":["import * as React from 'react'\nimport CSS from 'csstype'\nimport { SpacingProps } from '../space/types'\n\nconst validSizes = ['default', 'small', 'medium', 'large', 'huge'] as const\n\nexport type ValidSizes = (typeof validSizes)[number]\nexport type CustomSize = CSS.Property.Width\n\nexport function isValidSize(\n  size: ProgressIndicatorProps['size']\n): size is ValidSizes {\n  return validSizes.some((validSize) => validSize === size)\n}\n\nexport type ProgressIndicatorProps = {\n  /**\n   * Defines the visibility of the progress. Toggling the `visible` property to `false` will force a fade-out animation. Defaults to `true`.\n   */\n  visible?: boolean\n  /**\n   * Defines the type. Defaults to `circular`.\n   */\n  type?: 'circular' | 'linear' | 'countdown'\n  /**\n   * Disables the fade-in and fade-out animation. Defaults to `false`.\n   */\n  noAnimation?: boolean\n  /**\n   * Defines the size. Defaults to `default`.\n   */\n  size?: ValidSizes | CustomSize\n  /**\n   * A number between 0-100, if not supplied a continous loading-type animation will be used. Defaults to `undefined`\n   */\n  progress?: string | number\n  /**\n   * Content of a custom label. (Overrides `indicator_label` and `showDefaultLabel`)\n   */\n  label?: React.ReactNode\n  /**\n   * Same as `label` prop (`label` prop has priority)\n   */\n  children?: React.ReactNode\n  /**\n   * Sets the position of the label. `'inside'` only works with `type='circular'. Defaults to `horizontal`.\n   */\n  labelDirection?: 'horizontal' | 'vertical' | 'inside'\n  /**\n   * If set to `true` a default label (from text locales) will be shown.\n   */\n  showDefaultLabel?: boolean\n  /**\n   * Use this to override the default label from text locales.\n   */\n  indicator_label?: string\n  /**\n   * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent.\n   */\n  title?: string\n  /**\n   * Will be called once it's no longer `visible`.\n   */\n  onComplete?: (...args: any[]) => any\n  /**\n   * Send in custom css colors that overrides any css. Default is `undefined`.\n   */\n  customColors?: {\n    /**\n     * Override the moving line color.\n     */\n    line?: CSS.Property.BackgroundColor\n    /**\n     * Override the background line color.\n     */\n    shaft?: CSS.Property.BackgroundColor\n    /**\n     * Set a background color for the center of the circle.\n     */\n    background?: CSS.Property.BackgroundColor\n  }\n  /**\n   * Send in custom css width for circle progress line. Default is `undefined`. (`undefined` defaults to one eighth of the size).\n   */\n  customCircleWidth?: CSS.Property.StrokeWidth\n}\n\nexport type ProgressIndicatorAnimationProps = Pick<\n  ProgressIndicatorProps,\n  | 'size'\n  | 'visible'\n  | 'progress'\n  | 'onComplete'\n  | 'customColors'\n  | 'customCircleWidth'\n> & {\n  size?: ValidSizes | 'custom-size'\n  progress?: number\n  /**\n   * Callback when animation ends because `visible` is set to false\n   */\n  callOnCompleteHandler?: (...args: any[]) => any\n}\n\nexport type ProgressIndicatorAllProps = Omit<\n  React.HTMLProps<HTMLSpanElement>,\n  'ref' | 'label' | 'size'\n> &\n  SpacingProps &\n  ProgressIndicatorProps\n\nexport type ProgressIndicatorCircularAllProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'size'\n> &\n  ProgressIndicatorAnimationProps & {\n    /**\n     * Reverse the direction of the progress bar. Defaults to `false`.\n     */\n    counterClockwise?: boolean\n  }\n\nexport type ProgressIndicatorLinearAllProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'size'\n> &\n  Omit<ProgressIndicatorAnimationProps, 'customCircleWidth'>\n"],"mappings":"AAIA,MAAMA,UAAU,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAU;AAK3E,OAAO,SAASC,WAAWA,CACzBC,IAAoC,EAChB;EACpB,OAAOF,UAAU,CAACG,IAAI,CAAEC,SAAS,IAAKA,SAAS,KAAKF,IAAI,CAAC;AAC3D"}