radio styles

Author: Templarian

src/components/pg/inputRadio/inputRadio.css

@@ -0,0 +1,4 @@
+[part=items] {
+  display: flex;
+  flex-direction: column;
+}

src/components/pg/inputRadioItem/inputRadioItem.css

@@ -0,0 +1,26 @@
+svg:hover [part="path"] {
+  fill: #4f8ff9;
+}
+
+label {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+[part="input"] {
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+[part="input"]:not(:checked) + svg [part="check"] {
+  display: none;
+}
+
+svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}

src/components/pg/inputRadioItem/inputRadioItem.html

@@ -1 +1,8 @@
-<label><input part="input" type="radio" /> <span part="label"></span></label>
+<label>
+  <input part="input" type="radio" />
+  <svg viewBox="0 0 24 24">
+    <path part="path" d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path>
+    <path part="check" d="M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z"></path>
+  </svg>
+  <span part="label"></span>
+</label>

src/components/pg/inputRadioItem/inputRadioItem.ts

@@ -19,5 +19,8 @@ export default class PgInputRadioItem extends HTMLElement {
     if (changes.label) {
       this.$label.textContent = this.label;
     }
+    if (changes.value) {
+      this.$input.textContent = this.label;
+    }
   }
 }