Added radio, toggle and button tab support & more improvements

index.html

@@ -74,12 +74,12 @@
 
 					<div class="radio-row">
 						<label class="radio">
-							<input type="radio" name="radio-button" value="css" checked />
+							<input type="radio" name="radio-button" checked>
 							<span>Radio 1</span>
 						</label>
 	
 						<label class="radio">
-							<input type="radio" name="radio-button" value="acs" />
+							<input type="radio" name="radio-button">
 							<span>Radio 2</span>
 						</label>
 					</div>

src/_config.css

@@ -7,6 +7,8 @@
 	--synergy-border-width: 2px;
 	--synergy-border-radius: 0.375rem;
 
+	--synergy-focus-highlight: rgba(134, 94, 60, 0.25);
+
 	--synergy-label: rgba(134, 94, 60, 0.8);
 	--synergy-label-active: rgba(134, 94, 60, 1);
 

src/button.css

@@ -15,6 +15,8 @@
 	border-radius: var(--synergy-border-radius);
 	transition: .2s background-color;
 	cursor: pointer;
+	outline: none;
+	transition: box-shadow .2s;
 }
 
 .btn:hover {
@@ -31,3 +33,11 @@
 	--synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover);
 	--synergy-btn-bg-active: var(--synergy-btn-primary-bg-active);
 }
+
+.btn:focus-visible {
+	box-shadow: 0 0 0 5px var(--synergy-btn-bg);
+}
+
+.btn.btn-primary:focus-visible {
+	box-shadow: 0 0 0 5px var(--synergy-focus-highlight);
+}

src/radio.css

@@ -1,5 +1,16 @@
+label.radio {position: relative;}
+
 label.radio > input[type="radio"] {
-	display: none;
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+	z-index: 100;
+	margin: 0;
+	pointer-events: none;
 }
 
 label.radio > input[type="radio"] + * {
@@ -18,7 +29,7 @@ label.radio > input[type="radio"] + *::before {
 	border-radius: 50%;
 	aspect-ratio: 1 / 1;
 	border: 2px solid var(--synergy-border);
-	transition: background .2s;
+	transition: background .1s, box-shadow .2s;
 	background: var(--synergy-bg);
 	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
 }
@@ -27,6 +38,10 @@ label.radio > input[type="radio"]:checked + *::before {
 	background: var(--synergy-border-active);
 }
 
+label.radio > input[type="radio"]:focus-visible  + *::before {
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 0 0 8px var(--synergy-focus-highlight);
+}
+
 .radio-row {
 	display: flex; gap: 25px; flex-wrap: wrap;
 }

src/toggle.css

@@ -20,6 +20,7 @@
 	height: 100%;
 	cursor: pointer;
 	z-index: 100;
+	margin: 0;
 }
 
 .toggle .indicator {
@@ -44,9 +45,14 @@
 }
 
 .toggle input:checked + .indicator::after {
-	background-color: var(--synergy-border-active);
+	background: var(--synergy-border-active);
 }
 
+.toggle input:focus-visible + .indicator::after {
+	box-shadow: 0 0 10px 0 var(--synergy-bg), 0 0 0 10px var(--synergy-focus-highlight);
+}
+
+
 /* Toggle with label */
 
 .toggle-text {

web/demo.js

@@ -144,6 +144,8 @@ class Theme {
 	
 		variables.push(this.var("border", this.cArgb(this.main, .4)));
 		variables.push(this.var("border-active", this.cArgb(this.main)));
+
+		variables.push(this.var("focus-highlight", this.cArgb(this.main, .25)));
 	
 		variables.push(this.var("label", this.cArgb(this.main, .8)));
 		variables.push(this.var("label-active", this.cArgb(this.main)));