feat: add better provider support, icons, regen, and a lot more

app/components/Slider.vue

@@ -25,15 +25,18 @@ watch(() => props.checked, (newValue) => {
 </script>
 
 <template>
-    <button role="switch" class="vl-toggle-switch" :aria-disabled="(props.disabled === true) ? 'true' : 'false'"
-        :aria-label="label" :aria-labelledby="id" :tabindex="(disabled) ? '-1' : '0'" @click="(e) => $emit('click', e)"
-        :aria-checked="active" :data-state="(active) ? 'checked' : 'unchecked'">
+    <button :id="id" role="switch" class="vl-toggle-switch"
+        :aria-disabled="(props.disabled === true) ? 'true' : 'false'" :aria-label="label" :aria-labelledby="id"
+        :tabindex="(disabled) ? '-1' : '0'" @click="(e) => $emit('click', e)" :aria-checked="active"
+        :data-state="(active) ? 'checked' : 'unchecked'">
         <div></div>
     </button>
 </template>
 
 <style scoped>
 .vl-toggle-switch {
+    display: flex;
+    align-items: center;
     font-size: inherit;
     border: 0;
     cursor: pointer;
@@ -52,12 +55,14 @@ watch(() => props.checked, (newValue) => {
 }
 
 .vl-toggle-switch div {
+    transform-origin: center left;
+    will-change: transform;
     position: relative;
     left: 0;
     width: 1em;
     height: 1em;
     background: #f7f7f7;
-    border-radius: 90px;
+    border-radius: 9999px;
     pointer-events: none;
     transition: all 0.3s;
 }
@@ -67,11 +72,15 @@ watch(() => props.checked, (newValue) => {
 }
 
 .vl-toggle-switch[data-state="checked"] div {
-    left: 100%;
-    transform: translateX(-100%);
+    transform-origin: center right;
+    transform: translateX(calc(2.5em - 1em - 0.5rem));
 }
 
 .vl-toggle-switch:active div {
     width: 1.3em;
 }
+
+.vl-toggle-switch[data-state="checked"]:active div {
+    transform: translateX(calc(2.5em - 1.3em - 0.5rem));
+}
 </style>