From 7ae779d9f9133d7afd28eb9221c75d3fab837726 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Mon, 21 Oct 2024 23:31:09 +0200
Subject: [PATCH] Send the value instead of the checked status. Fix some
 styling.

---
 package.json |  2 +-
 tp-radio.js  | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 39e64b3..1a1ab0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-radio",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "tp-radio.js",
   "scripts": {
diff --git a/tp-radio.js b/tp-radio.js
index a8f9b55..686d859 100644
--- a/tp-radio.js
+++ b/tp-radio.js
@@ -18,10 +18,6 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
           cursor: pointer;
         }
 
-        [hidden] {
-          display: none;
-        }
-
         .circle {
           display: flex;
           align-items: center;
@@ -38,6 +34,11 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
           background: var(--tp-radio-dot-color, var(--tp-radio-color, #000));
           width: calc(var(--tp-radio-width, 18px) - 4px);
           height: calc(var(--tp-radio-height, 18px) - 4px);
+          opacity: 0;
+        }
+
+        .dot[visible] {
+          opacity: 1;
         }
 
         .wrap {
@@ -58,7 +59,7 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
     return html`
       <div class="wrap" part="wrap" @click=${this.check}>
         <div class="circle" part="circle">
-          <div class="dot" ?hidden=${!checked}></div>
+          <div class="dot" ?visible=${checked}></div>
         </div>
         <div class="label" part="label"><slot></slot></div>
       </div>
@@ -87,17 +88,17 @@ class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
 
   check() {
     this.checked = true;
-    this.dispatchEvent(new CustomEvent('checked', { detail: this.checked, bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent('checked', { detail: this.value, bubbles: true, composed: true }));
   }
 
   updated(changes) {
     if (changes.has('checked')) {
-      this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.checked, bubbles: true, composed: true }));
+      this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.value, bubbles: true, composed: true }));
     }
   }
 
   get value() {
-    if (this._value !== '') {
+    if (!this._value !== '') {
       return this._value;
     }
     return this.checked;