[Bug Fix] Theme toggle: skip initial dispatch + use setAttribute for double-hyphen data key

Author: djalmaaraujo

docs/app/javascript/controllers/ruby_ui/theme_toggle_controller.js

@@ -33,6 +33,6 @@ export default class extends Controller {
     const dark = theme === "dark"
     this.element.setAttribute("aria-pressed", dark ? "true" : "false")
     this.element.dataset.state = dark ? "on" : "off"
-    this.element.dataset["rubyUi--TogglePressedValue"] = dark ? "true" : "false"
+    this.element.setAttribute("data-ruby-ui--toggle-pressed-value", dark ? "true" : "false")
   }
 }

docs/app/javascript/controllers/ruby_ui/toggle_controller.js

@@ -14,14 +14,16 @@ export default class extends Controller {
     this.pressedValue = !this.pressedValue
   }
 
-  pressedValueChanged(current) {
+  pressedValueChanged(current, previous) {
     this.element.setAttribute("aria-pressed", current ? "true" : "false")
     this.element.dataset.state = current ? "on" : "off"
 
     if (this.hasInputTarget) {
       this.inputTarget.value = current ? this.valueValue : this.unpressedValueValue
     }
 
-    this.dispatch("change", { detail: { pressed: current }, bubbles: true })
+    if (previous !== undefined) {
+      this.dispatch("change", { detail: { pressed: current }, bubbles: true })
+    }
   }
 }

gem/lib/ruby_ui/theme_toggle/theme_toggle_controller.js

@@ -33,6 +33,6 @@ export default class extends Controller {
     const dark = theme === "dark"
     this.element.setAttribute("aria-pressed", dark ? "true" : "false")
     this.element.dataset.state = dark ? "on" : "off"
-    this.element.dataset["rubyUi--TogglePressedValue"] = dark ? "true" : "false"
+    this.element.setAttribute("data-ruby-ui--toggle-pressed-value", dark ? "true" : "false")
   }
 }

gem/lib/ruby_ui/toggle/toggle_controller.js

@@ -14,14 +14,16 @@ export default class extends Controller {
     this.pressedValue = !this.pressedValue
   }
 
-  pressedValueChanged(current) {
+  pressedValueChanged(current, previous) {
     this.element.setAttribute("aria-pressed", current ? "true" : "false")
     this.element.dataset.state = current ? "on" : "off"
 
     if (this.hasInputTarget) {
       this.inputTarget.value = current ? this.valueValue : this.unpressedValueValue
     }
 
-    this.dispatch("change", { detail: { pressed: current }, bubbles: true })
+    if (previous !== undefined) {
+      this.dispatch("change", { detail: { pressed: current }, bubbles: true })
+    }
   }
 }