diff --git a/web_widget_numeric_step/README.rst b/web_widget_numeric_step/README.rst
index eed8b55a3..74be0bce2 100644
--- a/web_widget_numeric_step/README.rst
+++ b/web_widget_numeric_step/README.rst
@@ -2,10 +2,13 @@
 Web Widget Numeric Step
 =======================
 
-.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+.. 
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+   !! source digest: sha256:ed5b95972503b3ab497d91d69e432b90c9aff241888b2525cb6d8648a7e7fe5f
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
     :target: https://odoo-community.org/page/development-status
@@ -14,16 +17,16 @@ Web Widget Numeric Step
     :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
     :alt: License: AGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
-    :target: https://github.com/OCA/web/tree/15.0/web_widget_numeric_step
+    :target: https://github.com/OCA/web/tree/16.0/web_widget_numeric_step
     :alt: OCA/web
 .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
-    :target: https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_numeric_step
+    :target: https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_widget_numeric_step
     :alt: Translate me on Weblate
-.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
-    :target: https://runbot.odoo-community.org/runbot/162/15.0
-    :alt: Try me on Runbot
+.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png
+    :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=16.0
+    :alt: Try me on Runboat
 
-|badge1| |badge2| |badge3| |badge4| |badge5| 
+|badge1| |badge2| |badge3| |badge4| |badge5|
 
 This widget changes input number field and make it easier to increment the number thanks to 2 buttons (+ and -).
 Use JS native logic for input number, so you can use the options ``min``, ``max``, ``step``, ``placeholder``.
@@ -42,7 +45,7 @@ In your xml view, add ``widget="numeric_step"``
 This will add the 2 buttons "+" and "-" just next to the input field in edit mode.
 Iteration step by default is 1.
 
-.. figure:: https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/add_two_buttons.png
+.. figure:: https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/add_two_buttons.png
 
 
 **Optional**
@@ -69,19 +72,19 @@ Iteration with 0.25 step, min to -1 and max to 10.
 
 Start to increment with button, continue incrementing with scrolling mouse.
 
-.. figure:: https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/step0,25andlimits.gif
+.. figure:: https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/step0,25andlimits.gif
 
 Iteration with 10 step, max limit 15, placeholder with onchange
 
-.. figure:: https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif
+.. figure:: https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif
 
 Bug Tracker
 ===========
 
 Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
 In case of trouble, please check there if your issue has already been reported.
-If you spotted it first, help us smashing it by providing a detailed and welcomed
-`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+If you spotted it first, help us to smash it by providing a detailed and welcomed
+`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2016.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
 
 Do not contact contributors directly about support or help with technical issues.
 
@@ -108,6 +111,7 @@ Contributors
 
 * Helly kapatel <helly.kapatel@initos.com>
 * Thanakrit Pintana <thanakrit.p39@gmail.com>
+* Dhara Solanki <dhara.solanki@initos.com>
 
 Maintainers
 ~~~~~~~~~~~
@@ -122,6 +126,6 @@ OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.
 
-This module is part of the `OCA/web <https://github.com/OCA/web/tree/15.0/web_widget_numeric_step>`_ project on GitHub.
+This module is part of the `OCA/web <https://github.com/OCA/web/tree/16.0/web_widget_numeric_step>`_ project on GitHub.
 
 You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
diff --git a/web_widget_numeric_step/__manifest__.py b/web_widget_numeric_step/__manifest__.py
index 1e07c05de..48eea0bfd 100644
--- a/web_widget_numeric_step/__manifest__.py
+++ b/web_widget_numeric_step/__manifest__.py
@@ -10,14 +10,10 @@
     "license": "AGPL-3",
     "website": "https://github.com/OCA/web",
     "depends": ["web"],
-    "demo": ["demo/res_users_view.xml"],
     "assets": {
         "web.assets_backend": [
-            "web_widget_numeric_step/static/src/js/numeric_step.js",
-            "web_widget_numeric_step/static/src/css/numeric_step.scss",
-        ],
-        "web.assets_qweb": [
             "web_widget_numeric_step/static/src/xml/numeric_step.xml",
+            "web_widget_numeric_step/static/src/js/numeric_step.esm.js",
         ],
     },
     "auto_install": False,
diff --git a/web_widget_numeric_step/demo/res_users_view.xml b/web_widget_numeric_step/demo/res_users_view.xml
deleted file mode 100644
index c57e1c7a9..000000000
--- a/web_widget_numeric_step/demo/res_users_view.xml
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<!-- Copyright 2020 Tecnativa - Alexandre Díaz
-     License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). -->
-<odoo>
-    <record id="view_users_form" model="ir.ui.view">
-        <field name="model">res.users</field>
-        <field name="inherit_id" ref="base.view_users_form" />
-        <field name="arch" type="xml">
-            <xpath expr="//div[hasclass('oe_title')]" position="after">
-                <group>
-                    <field
-                        name="credit_limit"
-                        widget="numeric_step"
-                        options="{'step': 3, 'min': -10, 'max': 130}"
-                    />
-                </group>
-            </xpath>
-        </field>
-    </record>
-</odoo>
diff --git a/web_widget_numeric_step/i18n/de.po b/web_widget_numeric_step/i18n/de.po
index c040360ba..2726362d4 100644
--- a/web_widget_numeric_step/i18n/de.po
+++ b/web_widget_numeric_step/i18n/de.po
@@ -17,24 +17,26 @@ msgstr ""
 "X-Generator: Weblate 4.3.2\n"
 
 #. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
+#. odoo-javascript
 #: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Minus"
 msgstr "Minus"
 
 #. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/js/numeric_step.esm.js:0
+#, python-format
+msgid "Numeric Step"
+msgstr ""
+
+#. module: web_widget_numeric_step
+#. odoo-javascript
 #: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Plus"
 msgstr "Plus"
 
-#. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
-msgid "Value"
-msgstr "Wert"
+#~ msgid "Value"
+#~ msgstr "Wert"
diff --git a/web_widget_numeric_step/i18n/es.po b/web_widget_numeric_step/i18n/es.po
index c577c7fac..309d506e6 100644
--- a/web_widget_numeric_step/i18n/es.po
+++ b/web_widget_numeric_step/i18n/es.po
@@ -1,6 +1,6 @@
 # Translation of Odoo Server.
 # This file contains the translation of the following modules:
-#	* web_widget_numeric_step
+# 	* web_widget_numeric_step
 #
 msgid ""
 msgstr ""
@@ -17,22 +17,26 @@ msgstr ""
 "X-Generator: Weblate 3.10\n"
 
 #. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:14
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Minus"
 msgstr "Menos"
 
 #. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:19
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/js/numeric_step.esm.js:0
+#, python-format
+msgid "Numeric Step"
+msgstr ""
+
+#. module: web_widget_numeric_step
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Plus"
 msgstr "Más"
 
-#. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:16
 #, python-format
-msgid "Value"
-msgstr "Valor"
+#~ msgid "Value"
+#~ msgstr "Valor"
diff --git a/web_widget_numeric_step/i18n/fr.po b/web_widget_numeric_step/i18n/fr.po
index 5108f7da6..969a859c8 100644
--- a/web_widget_numeric_step/i18n/fr.po
+++ b/web_widget_numeric_step/i18n/fr.po
@@ -17,22 +17,22 @@ msgstr ""
 "Plural-Forms: \n"
 
 #. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:14
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Minus"
 msgstr "Moins"
 
 #. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:19
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/js/numeric_step.esm.js:0
+#, python-format
+msgid "Numeric Step"
+msgstr ""
+
+#. module: web_widget_numeric_step
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Plus"
 msgstr "Plus"
-
-#. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:16
-#, python-format
-msgid "Value"
-msgstr ""
diff --git a/web_widget_numeric_step/i18n/it.po b/web_widget_numeric_step/i18n/it.po
index 5b8f6d8cd..efa4cd848 100644
--- a/web_widget_numeric_step/i18n/it.po
+++ b/web_widget_numeric_step/i18n/it.po
@@ -17,22 +17,26 @@ msgstr ""
 "X-Generator: Weblate 4.3.2\n"
 
 #. module: web_widget_numeric_step
-#. openerp-web
+#. odoo-javascript
 #: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Minus"
 msgstr "Meno"
 
 #. module: web_widget_numeric_step
-#. openerp-web
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/js/numeric_step.esm.js:0
+#, python-format
+msgid "Numeric Step"
+msgstr ""
+
+#. module: web_widget_numeric_step
+#. odoo-javascript
 #: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Plus"
 msgstr "Più"
 
-#. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
-msgid "Value"
-msgstr "Valore"
+#~ msgid "Value"
+#~ msgstr "Valore"
diff --git a/web_widget_numeric_step/i18n/web_widget_numeric_step.pot b/web_widget_numeric_step/i18n/web_widget_numeric_step.pot
index 835b3d94d..7ede8cbe3 100644
--- a/web_widget_numeric_step/i18n/web_widget_numeric_step.pot
+++ b/web_widget_numeric_step/i18n/web_widget_numeric_step.pot
@@ -4,7 +4,7 @@
 #
 msgid ""
 msgstr ""
-"Project-Id-Version: Odoo Server 15.0\n"
+"Project-Id-Version: Odoo Server 16.0\n"
 "Report-Msgid-Bugs-To: \n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -14,7 +14,7 @@ msgstr ""
 "Plural-Forms: \n"
 
 #. module: web_widget_numeric_step
-#. openerp-web
+#. odoo-javascript
 #: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
@@ -22,16 +22,16 @@ msgid "Minus"
 msgstr ""
 
 #. module: web_widget_numeric_step
-#. openerp-web
+#. odoo-javascript
+#: code:addons/web_widget_numeric_step/static/src/js/numeric_step.esm.js:0
+#, python-format
+msgid "Numeric Step"
+msgstr ""
+
+#. module: web_widget_numeric_step
+#. odoo-javascript
 #: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
 #, python-format
 msgid "Plus"
 msgstr ""
-
-#. module: web_widget_numeric_step
-#. openerp-web
-#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:0
-#, python-format
-msgid "Value"
-msgstr ""
diff --git a/web_widget_numeric_step/readme/CONTRIBUTORS.rst b/web_widget_numeric_step/readme/CONTRIBUTORS.rst
index 31329b39f..3af1d6666 100644
--- a/web_widget_numeric_step/readme/CONTRIBUTORS.rst
+++ b/web_widget_numeric_step/readme/CONTRIBUTORS.rst
@@ -9,3 +9,4 @@
 
 * Helly kapatel <helly.kapatel@initos.com>
 * Thanakrit Pintana <thanakrit.p39@gmail.com>
+* Dhara Solanki <dhara.solanki@initos.com>
diff --git a/web_widget_numeric_step/static/description/add_two_buttons.png b/web_widget_numeric_step/static/description/add_two_buttons.png
index 2670f06ec..7a60f2dea 100644
Binary files a/web_widget_numeric_step/static/description/add_two_buttons.png and b/web_widget_numeric_step/static/description/add_two_buttons.png differ
diff --git a/web_widget_numeric_step/static/description/index.html b/web_widget_numeric_step/static/description/index.html
index 3ddd75ad5..695cf92a9 100644
--- a/web_widget_numeric_step/static/description/index.html
+++ b/web_widget_numeric_step/static/description/index.html
@@ -1,20 +1,20 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
+<meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
 <title>Web Widget Numeric Step</title>
 <style type="text/css">
 
 /*
 :Author: David Goodger (goodger@python.org)
-:Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $
+:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
 :Copyright: This stylesheet has been placed in the public domain.
 
 Default cascading style sheet for the HTML output of Docutils.
 
-See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
+See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
 customize this style sheet.
 */
 
@@ -366,37 +366,39 @@ ul.auto-toc {
 <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+!! source digest: sha256:ed5b95972503b3ab497d91d69e432b90c9aff241888b2525cb6d8648a7e7fe5f
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_widget_numeric_step"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_widget_numeric_step"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/15.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/16.0/web_widget_numeric_step"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_widget_numeric_step"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>This widget changes input number field and make it easier to increment the number thanks to 2 buttons (+ and -).
 Use JS native logic for input number, so you can use the options <tt class="docutils literal">min</tt>, <tt class="docutils literal">max</tt>, <tt class="docutils literal">step</tt>, <tt class="docutils literal">placeholder</tt>.</p>
 <p>Demo available at <cite>Settings &gt; Users &amp; Companies &gt; Users &gt; *Select One* &gt; See ‘Credit Limit’ field</cite></p>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
-<li><a class="reference internal" href="#usage" id="id1">Usage</a></li>
-<li><a class="reference internal" href="#bug-tracker" id="id2">Bug Tracker</a></li>
-<li><a class="reference internal" href="#credits" id="id3">Credits</a><ul>
-<li><a class="reference internal" href="#authors" id="id4">Authors</a></li>
-<li><a class="reference internal" href="#contributors" id="id5">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="id6">Maintainers</a></li>
+<li><a class="reference internal" href="#usage" id="toc-entry-1">Usage</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="toc-entry-2">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="toc-entry-3">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="toc-entry-4">Authors</a></li>
+<li><a class="reference internal" href="#contributors" id="toc-entry-5">Contributors</a></li>
+<li><a class="reference internal" href="#maintainers" id="toc-entry-6">Maintainers</a></li>
 </ul>
 </li>
 </ul>
 </div>
 <div class="section" id="usage">
-<h1><a class="toc-backref" href="#id1">Usage</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-1">Usage</a></h1>
 <p>In your xml view, add <tt class="docutils literal"><span class="pre">widget=&quot;numeric_step&quot;</span></tt>
 This will add the 2 buttons “+” and “-” just next to the input field in edit mode.
 Iteration step by default is 1.</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/add_two_buttons.png" src="https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/add_two_buttons.png" />
+<img alt="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/add_two_buttons.png" src="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/add_two_buttons.png" />
 </div>
 <p><strong>Optional</strong></p>
 <p>Add an option to choose the step iteration and limits (min and max values).</p>
 <p>Example for an 0.25 step, min to -1 and max to 10 :</p>
 <pre class="code xml literal-block">
-<span class="nt">&lt;field</span> <span class="na">name=</span><span class="s">&quot;sale_delay&quot;</span> <span class="na">widget=</span><span class="s">&quot;numeric_step&quot;</span> <span class="na">options=</span><span class="s">&quot;{'step': 0.25, 'min': -1, 'max': 10}&quot;</span> <span class="nt">/&gt;</span> days
+<span class="nt">&lt;field</span><span class="w"> </span><span class="na">name=</span><span class="s">&quot;sale_delay&quot;</span><span class="w"> </span><span class="na">widget=</span><span class="s">&quot;numeric_step&quot;</span><span class="w"> </span><span class="na">options=</span><span class="s">&quot;{'step': 0.25, 'min': -1, 'max': 10}&quot;</span><span class="w"> </span><span class="nt">/&gt;</span><span class="w"> </span>days
 </pre>
 <p><strong>Available Options</strong></p>
 <ul class="simple">
@@ -410,32 +412,32 @@ Iteration step by default is 1.</p>
 <p>Iteration with 0.25 step, min to -1 and max to 10.</p>
 <p>Start to increment with button, continue incrementing with scrolling mouse.</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/step0,25andlimits.gif" src="https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/step0,25andlimits.gif" />
+<img alt="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/step0,25andlimits.gif" src="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/step0,25andlimits.gif" />
 </div>
 <p>Iteration with 10 step, max limit 15, placeholder with onchange</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" src="https://raw.githubusercontent.com/OCA/web/15.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" />
+<img alt="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" src="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" />
 </div>
 </div>
 <div class="section" id="bug-tracker">
-<h1><a class="toc-backref" href="#id2">Bug Tracker</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-2">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
-If you spotted it first, help us smashing it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+If you spotted it first, help us to smash it by providing a detailed and welcomed
+<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2016.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h1><a class="toc-backref" href="#id3">Credits</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-3">Credits</a></h1>
 <div class="section" id="authors">
-<h2><a class="toc-backref" href="#id4">Authors</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-4">Authors</a></h2>
 <ul class="simple">
 <li>GRAP</li>
 <li>Tecnativa</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h2><a class="toc-backref" href="#id5">Contributors</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-5">Contributors</a></h2>
 <ul class="simple">
 <li><a class="reference external" href="http://www.grap.coop">GRAP</a>:<ul>
 <li>Quentin DUPONT &lt;<a class="reference external" href="mailto:quentin.dupont&#64;grap.coop">quentin.dupont&#64;grap.coop</a>&gt;</li>
@@ -448,16 +450,17 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 </li>
 <li>Helly kapatel &lt;<a class="reference external" href="mailto:helly.kapatel&#64;initos.com">helly.kapatel&#64;initos.com</a>&gt;</li>
 <li>Thanakrit Pintana &lt;<a class="reference external" href="mailto:thanakrit.p39&#64;gmail.com">thanakrit.p39&#64;gmail.com</a>&gt;</li>
+<li>Dhara Solanki &lt;<a class="reference external" href="mailto:dhara.solanki&#64;initos.com">dhara.solanki&#64;initos.com</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h2><a class="toc-backref" href="#id6">Maintainers</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-6">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.</p>
-<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_widget_numeric_step">OCA/web</a> project on GitHub.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/16.0/web_widget_numeric_step">OCA/web</a> project on GitHub.</p>
 <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
 </div>
 </div>
diff --git a/web_widget_numeric_step/static/description/step0,25andlimits.gif b/web_widget_numeric_step/static/description/step0,25andlimits.gif
index 1e5827236..ce6780e1b 100644
Binary files a/web_widget_numeric_step/static/description/step0,25andlimits.gif and b/web_widget_numeric_step/static/description/step0,25andlimits.gif differ
diff --git a/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif b/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif
index eb0b6e815..709498e3c 100644
Binary files a/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif and b/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif differ
diff --git a/web_widget_numeric_step/static/src/css/numeric_step.scss b/web_widget_numeric_step/static/src/css/numeric_step.scss
deleted file mode 100644
index 7ca8bb842..000000000
--- a/web_widget_numeric_step/static/src/css/numeric_step.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.widget_numeric_step {
-    display: inline-flex;
-}
-
-.numeric_step_editing_cell {
-    min-width: 120px;
-
-    .input_numeric_step {
-        height: auto;
-    }
-}
diff --git a/web_widget_numeric_step/static/src/js/numeric_step.esm.js b/web_widget_numeric_step/static/src/js/numeric_step.esm.js
new file mode 100644
index 000000000..dcd6f233e
--- /dev/null
+++ b/web_widget_numeric_step/static/src/js/numeric_step.esm.js
@@ -0,0 +1,92 @@
+/** @odoo-module */
+
+import {registry} from "@web/core/registry";
+import {standardFieldProps} from "@web/views/fields/standard_field_props";
+import {_lt} from "@web/core/l10n/translation";
+import {FloatField} from "@web/views/fields/float/float_field";
+
+export class NumericStep extends FloatField {
+    setup() {
+        super.setup();
+    }
+    _onFocusInput(ev) {
+        const $el = $(ev.target).parent().find(".widget_numeric_step_btn");
+        $el.removeClass("d-none");
+    }
+    _onFocusOutInput(ev) {
+        const $el = $(ev.target).find(".widget_numeric_step_btn");
+        $el.addClass("d-none");
+    }
+    _onStepClick(ev) {
+        const $el = $(ev.target).parent().parent().find("input");
+        $el.focus();
+        const mode = $(ev.target).data("mode");
+        this._doStep(mode);
+    }
+    _onKeyDown(ev) {
+        if (ev.keyCode === $.ui.keyCode.UP) {
+            this._doStep("plus");
+        } else if (ev.keyCode === $.ui.keyCode.DOWN) {
+            this._doStep("minus");
+        }
+    }
+    _onWheel(ev) {
+        ev.preventDefault();
+        if (ev.deltaY > 0) {
+            this._doStep("minus");
+        } else {
+            this._doStep("plus");
+        }
+    }
+    updateField(val) {
+        return Promise.resolve(this.props.update(val));
+    }
+    _doStep(mode) {
+        let cval = this.props.value;
+        if (mode === "plus") {
+            cval += this.props.step;
+        } else if (mode === "minus") {
+            cval -= this.props.step;
+        }
+        if (cval < this.props.min) {
+            cval = this.props.min;
+        } else if (cval > this.props.max) {
+            cval = this.props.max;
+        }
+        this.updateField(cval);
+        this.props.setDirty(this._isSetDirty(cval));
+        this.props.setDirty(false);
+    }
+    _isSetDirty(val) {
+        return this.props.value != val;
+    }
+}
+
+NumericStep.template = "web_widget_numeric_step";
+NumericStep.props = {
+    ...standardFieldProps,
+    name: {type: String, optional: true},
+    inputType: {type: String, optional: true},
+    step: {type: Number, optional: true},
+    min: {type: Number, optional: true},
+    max: {type: Number, optional: true},
+    placeholder: {type: String, optional: true},
+};
+
+NumericStep.displayName = _lt("Numeric Step");
+NumericStep.supportedTypes = ["float"];
+NumericStep.defaultProps = {
+    inputType: "text",
+};
+NumericStep.extractProps = ({attrs}) => {
+    return {
+        name: attrs.name,
+        inputType: attrs.options.type,
+        step: attrs.options.step || 1,
+        min: attrs.options.min,
+        max: attrs.options.max,
+        placeholder: attrs.options.placeholder,
+    };
+};
+
+registry.category("fields").add("numeric_step", NumericStep);
diff --git a/web_widget_numeric_step/static/src/js/numeric_step.js b/web_widget_numeric_step/static/src/js/numeric_step.js
deleted file mode 100644
index 8c166fe7a..000000000
--- a/web_widget_numeric_step/static/src/js/numeric_step.js
+++ /dev/null
@@ -1,336 +0,0 @@
-/* Copyright 2019 GRAP - Quentin DUPONT
- * Copyright 2020 Tecnativa - Alexandre Díaz
- * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) */
-
-odoo.define("web_widget_numeric_step.field", function (require) {
-    "use strict";
-
-    const field_utils = require("web.field_utils");
-    const Registry = require("web.field_registry");
-    const FieldFloat = require("web.basic_fields").FieldFloat;
-
-    const NumericStep = FieldFloat.extend({
-        template: "web_widget_numeric_step",
-        className: "o_field_numeric_step o_field_number",
-        events: _.extend({}, _.omit(FieldFloat.prototype.events, ["change", "input"]), {
-            "mousedown .btn_numeric_step": "_onStepMouseDown",
-            "touchstart .btn_numeric_step": "_onStepMouseDown",
-            "click .btn_numeric_step": "_onStepClick",
-            "wheel .input_numeric_step": "_onWheel",
-            "keydown .input_numeric_step": "_onKeyDown",
-            "change .input_numeric_step": "_onChange",
-            "input .input_numeric_step": "_onInput",
-            "focusin .input_numeric_step": "_onFocusIn",
-            "focusout .widget_numeric_step": "_onFocusOut",
-        }),
-        supportedFieldTypes: ["float", "integer"],
-
-        // Values in milliseconds used for mouse down smooth speed feature
-        DEF_CLICK_DELAY: 400,
-        MIN_DELAY: 50,
-        SUBSTRACT_DELAY_STEP: 25,
-
-        DELAY_THROTTLE_CHANGE: 200,
-
-        /**
-         * @override
-         */
-        init: function () {
-            this._super.apply(this, arguments);
-
-            // Widget config
-            let max_val = this.nodeOptions.max;
-            let min_val = this.nodeOptions.min;
-            if (
-                !_.isUndefined(min_val) &&
-                !_.isUndefined(max_val) &&
-                min_val > max_val
-            ) {
-                min_val = this.nodeOptions.max;
-                max_val = this.nodeOptions.min;
-            }
-
-            this._config = {
-                step: Number(this.nodeOptions.step) || 1,
-                min: Number(min_val),
-                max: Number(max_val),
-                autoSelect: this.nodeOptions.auto_select,
-            };
-
-            this._lazyOnChangeTrigger = _.debounce(
-                () => this.$input.trigger("change"),
-                this.DELAY_THROTTLE_CHANGE
-            );
-            this._auto_step_interval = false;
-        },
-
-        /**
-         * Add global events listeners
-         *
-         * @override
-         */
-        start: function () {
-            this._click_delay = this.DEF_CLICK_DELAY;
-            this._autoStep = false;
-            return this._super.apply(this, arguments).then(() => {
-                document.addEventListener("mouseup", this._onMouseUp.bind(this), false);
-                document.addEventListener(
-                    "touchend",
-                    this._onMouseUp.bind(this),
-                    false
-                );
-            });
-        },
-
-        /**
-         * Transform database value to usable widget value
-         *
-         * @override
-         */
-        _formatValue: function (value) {
-            if (this.mode === "edit") {
-                return this._sanitizeNumberValue(value);
-            }
-            return this._super.apply(this, arguments);
-        },
-
-        /**
-         * Transform widget value to usable database value
-         *
-         * @override
-         */
-        _parseValue: function () {
-            const parsedVal = this._super.apply(this, arguments);
-            if (this.mode === "edit") {
-                return Number(parsedVal) || 0;
-            }
-            return parsedVal;
-        },
-
-        /**
-         * Adds HTML attributes to the input
-         *
-         * @override
-         */
-        _prepareInput: function () {
-            const result = this._super.apply(this, arguments);
-            this.$input.attr(_.pick(this.nodeOptions, ["placeholder"]));
-            // InputField hard set the input type to 'text' or 'password',
-            // we force it again to be 'tel'.
-            // The widget uses 'tel' type because offers a good layout on
-            // mobiles and can accept alphanumeric characters.
-            // The bad news is that require implement all good 'number' type
-            // features like the minus and plus buttons, steps, min and max...
-            // Perhaps in a near future this can be improved to have the best of
-            // two types without hacky developments.
-            this.$input.attr("type", "tel");
-            return result;
-        },
-
-        /**
-         * Select the proper widget input
-         *
-         * @override
-         */
-        _renderEdit: function () {
-            _.defer(() =>
-                this.$el
-                    .parents("td.o_numeric_step_cell")
-                    .addClass("numeric_step_editing_cell")
-            );
-            this._prepareInput(this.$el.find("input.input_numeric_step"));
-        },
-
-        /**
-         * Resets the content to the formated value in readonly mode.
-         *
-         * @override
-         */
-        _renderReadonly: function () {
-            this.$el
-                .parents("td.numeric_step_editing_cell")
-                .removeClass("numeric_step_editing_cell");
-            this._super.apply(this, arguments);
-        },
-
-        /**
-         * Increase/Decrease widget input value
-         *
-         * @param {String} mode can be "plus" or "minus"
-         */
-        _doStep: function (mode) {
-            let cval = 0;
-            try {
-                const field = this.record.fields[this.name];
-                cval = field_utils.parse[field.type](this.$input.val());
-            } catch (e) {
-                cval = this.value;
-                mode = false; // Only set the value in this case
-            }
-            if (mode === "plus") {
-                cval += this._config.step;
-            } else if (mode === "minus") {
-                cval -= this._config.step;
-            }
-            const nval = this._sanitizeNumberValue(cval);
-            if (nval !== this.lastSetValue || !mode) {
-                this.$input.val(nval);
-                // Every time that user update the value we must trigger an
-                // onchange method.
-                this._lazyOnChangeTrigger();
-            }
-        },
-
-        /**
-         * @private
-         */
-        _clearStepInterval: function () {
-            clearTimeout(this._auto_step_interval);
-            this._auto_step_interval = false;
-            this._click_delay = this.DEF_CLICK_DELAY;
-        },
-
-        // Handle Events
-
-        /**
-         * @private
-         * @param {MouseClickEvent} ev
-         */
-        _onStepClick: function (ev) {
-            if (!this._autoStep) {
-                const mode = ev.target.dataset.mode;
-                this._doStep(mode);
-            }
-            this._autoStep = false;
-        },
-
-        /**
-         * @private
-         * @param {MouseClickEvent} ev
-         */
-        _onStepMouseDown: function (ev) {
-            if (ev.button === 0 && !this._auto_step_interval) {
-                this._auto_step_interval = setTimeout(
-                    this._whileMouseDown.bind(this, ev),
-                    this._click_delay
-                );
-            }
-        },
-
-        /**
-         * Auto select all content when user enters into fields with this
-         * widget.
-         *
-         * @private
-         */
-        _onFocusIn: function () {
-            if (this._config.autoSelect) {
-                this.$input.select();
-            }
-        },
-
-        /**
-         * @private
-         * @param {FocusoutEvent} ev
-         */
-        _onFocusOut: function () {
-            if (this._auto_step_interval) {
-                this._clearStepInterval();
-            }
-        },
-
-        /**
-         * @private
-         */
-        _onMouseUp: function () {
-            this._clearStepInterval();
-        },
-
-        /**
-         * @private
-         * @param {MouseClickEvent} ev
-         */
-        _whileMouseDown: function (ev) {
-            this._autoStep = true;
-            const mode = ev.target.dataset.mode;
-            this._doStep(mode);
-            if (this._click_delay > this.MIN_DELAY) {
-                this._click_delay -= this.SUBSTRACT_DELAY_STEP;
-            }
-
-            this._auto_step_interval = false;
-            this._onStepMouseDown(ev);
-        },
-
-        /**
-         * Enable mouse wheel support
-         *
-         * @param {WheelEvent} ev
-         */
-        _onWheel: function (ev) {
-            ev.preventDefault();
-            if (ev.originalEvent.deltaY > 0) {
-                this._doStep("minus");
-            } else {
-                this._doStep("plus");
-            }
-        },
-
-        /**
-         * Enable keyboard arrows support
-         *
-         * @param {KeyEvent} ev
-         */
-        _onKeyDown: function (ev) {
-            if (ev.keyCode === $.ui.keyCode.UP) {
-                this._doStep("plus");
-            } else if (ev.keyCode === $.ui.keyCode.DOWN) {
-                this._doStep("minus");
-            }
-        },
-
-        /**
-         * Sanitize user input value
-         *
-         * @override
-         */
-        _onChange: function (ev) {
-            ev.target.value = this._sanitizeNumberValue(ev.target.value);
-            return this._super.apply(this, arguments);
-        },
-
-        // Helper Functions
-        /**
-         * Check limits and precision of the value.
-         * If the value 'is not a number', the function does nothing to
-         * be good with other possible modules.
-         *
-         * @param {Number} value
-         * @returns {Number}
-         */
-        _sanitizeNumberValue: function (value) {
-            let cval = Number(value);
-            if (_.isNaN(cval)) {
-                return value;
-            }
-            if (!_.isNaN(this._config.min) && cval < this._config.min) {
-                cval = this._config.min;
-            } else if (!_.isNaN(this._config.max) && cval > this._config.max) {
-                cval = this._config.max;
-            }
-
-            const field = this.record.fields[this.name];
-            // Formatted value
-            return field_utils.format[field.type](cval, field, {
-                data: this.record.data,
-                escape: true,
-                isPassword: false,
-                digits: field.digits,
-            });
-        },
-    });
-
-    Registry.add("numeric_step", NumericStep);
-
-    return NumericStep;
-});
diff --git a/web_widget_numeric_step/static/src/xml/numeric_step.xml b/web_widget_numeric_step/static/src/xml/numeric_step.xml
index b184d2e95..e645a3923 100644
--- a/web_widget_numeric_step/static/src/xml/numeric_step.xml
+++ b/web_widget_numeric_step/static/src/xml/numeric_step.xml
@@ -4,37 +4,43 @@ Copyright 2019 GRAP - Quentin DUPONT
 Copyright 2020 Tecnativa - Alexandre Díaz
 License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
 -->
-<templates>
-    <t t-name="web_widget_numeric_step">
-        <t t-if="widget.mode != 'readonly'">
-            <div class="input-group widget_numeric_step">
-                <div class="input-group-prepend">
-                    <button
-                        class="fa fa-minus btn btn-default btn_numeric_step"
-                        aria-label="Minus"
-                        title="Minus"
-                        type="button"
-                        data-mode="minus"
-                    />
-                </div>
-                <input
-                    type="tel"
-                    class="form-control input_numeric_step"
-                    aria-label="Value"
+<template>
+    <t t-name="web_widget_numeric_step" owl="1">
+        <div
+            class="d-flex widget_numeric_step"
+            t-on-mouseleave="_onFocusOutInput"
+            t-on-mouseenter="_onFocusInput"
+        >
+            <div class="input-group-prepend d-none widget_numeric_step_btn">
+                <button
+                    class="fa fa-minus btn btn-default btn_numeric_step"
+                    aria-label="Minus"
+                    title="Minus"
+                    type="button"
+                    data-mode="minus"
+                    t-on-click="_onStepClick"
                 />
-                <div class="input-group-append">
-                    <button
-                        class="fa fa-plus btn btn-default btn_numeric_step"
-                        aria-label="Plus"
-                        title="Plus"
-                        type="button"
-                        data-mode="plus"
-                    />
-                </div>
             </div>
-        </t>
-        <t t-else="">
-            <field />
-        </t>
+            <input
+                t-att-id="props.id"
+                t-ref="numpadDecimal"
+                t-att-placeholder="props.placeholder"
+                t-att-type="props.inputType"
+                class="o_input input_numeric_step"
+                t-att-step="props.step"
+                t-on-keydown="_onKeyDown"
+                t-on-wheel="_onWheel"
+            />
+            <div class="input-group-append d-none widget_numeric_step_btn">
+                <button
+                    class="fa fa-plus btn btn-default btn_numeric_step"
+                    aria-label="Plus"
+                    title="Plus"
+                    type="button"
+                    data-mode="plus"
+                    t-on-click="_onStepClick"
+                />
+            </div>
+        </div>
     </t>
-</templates>
+</template>