values-hello-values-api.diff

diff --git a/assets/controllers/color-square_controller.js b/assets/controllers/color-square_controller.js
index d367d92..342733f 100644
--- a/assets/controllers/color-square_controller.js
+++ b/assets/controllers/color-square_controller.js
@@ -4,11 +4,14 @@ export default class extends Controller {
     selectedColorId = null;
 
     static targets = ['colorSquare', 'select']
+    static values = {
+        colorId: Number
+    }
 
     connect() {
         this.selectTarget.classList.add('d-none');
 
-        console.log(this.element.dataset.colorId);
+        console.log(this.colorIdValue);
     }
 
     selectColor(event) {
diff --git a/templates/product/_cart_add_controls.html.twig b/templates/product/_cart_add_controls.html.twig
index 5addac0..781e52c 100644
--- a/templates/product/_cart_add_controls.html.twig
+++ b/templates/product/_cart_add_controls.html.twig
@@ -4,7 +4,7 @@
     {% if addToCartForm.color is defined %}
         <div
             data-controller="color-square"
-            data-color-id="{{ addToCartForm.vars.data.product.colors[1].id }}"
+            data-color-square-color-id-value="{{ addToCartForm.vars.data.product.colors[1].id }}"
         >
             {{ form_widget(addToCartForm.color, {
                 attr: { 'data-color-square-target': 'select' }