refactor: rewrite without extra element

Author: danielroe

app/components/Settings/Toggle.client.vue

@@ -27,36 +27,39 @@ const id = useId()
 <template>
   <label
     :for="id"
-    class="grid items-center gap-4 py-1 -my-1"
-    :class="[
-      justify === 'start' ? 'justify-start' : '',
-      props.reverseOrder ? 'toggle-reverse' : 'toggle-default',
-    ]"
+    class="grid items-center gap-4 py-1 -my-1 grid-cols-[auto_1fr_auto]"
+    :class="[justify === 'start' ? 'justify-start' : '']"
+    :style="
+      props.reverseOrder
+        ? 'grid-template-areas: \'toggle . label-text\''
+        : 'grid-template-areas: \'label-text . toggle\''
+    "
   >
     <template v-if="props.reverseOrder">
       <input
         role="switch"
         type="checkbox"
         :id
-        class="toggle-checkbox opacity-0"
-        style="grid-row: 1; grid-column: 1; justify-self: start"
         v-model="checked"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 cursor-pointer bg-fg-subtle checked:bg-fg checked:border-fg focus-visible:(outline-2 outline-fg outline-offset-2) before:content-[''] before:absolute before:h-5 before:w-5 before:top-1px before:rounded-full before:bg-bg"
+        style="grid-area: toggle"
       />
-      <span
-        class="toggle-background h-6 w-11 rounded-full border border-fg relative flex shrink-0"
-      ></span>
       <TooltipApp
         v-if="tooltip && label"
         :text="tooltip"
         :position="tooltipPosition ?? 'top'"
         :to="tooltipTo"
         :offset="tooltipOffset"
       >
-        <span class="text-sm text-fg font-medium text-start">
+        <span class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
           {{ label }}
         </span>
       </TooltipApp>
-      <span v-else-if="label" class="text-sm text-fg font-medium text-start">
+      <span
+        v-else-if="label"
+        class="text-sm text-fg font-medium text-start"
+        style="grid-area: label-text"
+      >
         {{ label }}
       </span>
     </template>
@@ -68,25 +71,25 @@ const id = useId()
         :to="tooltipTo"
         :offset="tooltipOffset"
       >
-        <span class="text-sm text-fg font-medium text-start">
+        <span class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
           {{ label }}
         </span>
       </TooltipApp>
-      <span v-else-if="label" class="text-sm text-fg font-medium text-start">
+      <span
+        v-else-if="label"
+        class="text-sm text-fg font-medium text-start"
+        style="grid-area: label-text"
+      >
         {{ label }}
       </span>
       <input
         role="switch"
         type="checkbox"
         :id
-        class="toggle-checkbox opacity-0"
-        style="grid-row: 1; grid-column: 3; justify-self: end"
         v-model="checked"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 cursor-pointer bg-fg-subtle checked:bg-fg checked:border-fg focus-visible:(outline-2 outline-fg outline-offset-2) before:content-[''] before:absolute before:h-5 before:w-5 before:top-1px before:rounded-full before:bg-bg"
+        style="grid-area: toggle; justify-self: end"
       />
-      <span
-        class="toggle-background h-6 w-11 rounded-full border border-fg relative flex shrink-0"
-        style="grid-area: toggle-background; justify-self: end"
-      ></span>
     </template>
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
@@ -95,76 +98,45 @@ const id = useId()
 </template>
 
 <style scoped>
-/* Layout: default order (label first, toggle last) */
-.toggle-default {
-  grid-template-areas: 'label-text . toggle-background';
-  grid-template-columns: auto 1fr auto;
-}
-
-/* Layout: reverse order (toggle first, label last) */
-.toggle-reverse {
-  grid-template-areas: 'toggle-background . label-text';
-  grid-template-columns: auto 1fr auto;
+/* Thumb position: logical property for RTL support */
+.toggle::before {
+  inset-inline-start: 1px;
 }
 
-/* Track background */
-.toggle-background {
-  background: var(--fg-subtle);
+/* Track transition */
+.toggle {
   transition:
     background-color 100ms ease-in,
     border-color 100ms ease-in;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .toggle-background {
-    transition: none;
-  }
-}
-
-label:has(input:focus-visible) .toggle-background {
-  outline: solid 2px var(--fg);
-  outline-offset: 2px;
-}
-
-label:has(input:checked) .toggle-background {
-  background: var(--fg);
-  border-color: var(--fg);
+.toggle::before {
+  transition: translate 200ms ease-in-out;
 }
 
-label:has(input:hover:not(:checked)) .toggle-background {
+/* Hover states */
+.toggle:hover:not(:checked) {
   background: var(--fg-muted);
 }
 
-label:has(input:checked:hover) .toggle-background {
+.toggle:checked:hover {
   background: var(--fg-muted);
   border-color: var(--fg-muted);
 }
 
-/* Circle that moves */
-.toggle-background::before {
-  transition: translate 200ms ease-in-out;
-  content: '';
-  width: 20px;
-  height: 20px;
-  top: 1px;
-  inset-inline-start: 1px;
-  position: absolute;
-  border-radius: 9999px;
-  background: var(--bg);
+/* RTL-aware checked thumb position */
+:dir(ltr) .toggle:checked::before {
+  translate: 20px;
+}
+
+:dir(rtl) .toggle:checked::before {
+  translate: -20px;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .toggle-background::before {
+  .toggle,
+  .toggle::before {
     transition: none;
   }
 }
-
-/* Support rtl locales */
-:dir(ltr) input:checked + .toggle-background::before {
-  translate: 20px;
-}
-
-:dir(rtl) input:checked + .toggle-background::before {
-  translate: -20px;
-}
 </style>

app/components/Settings/Toggle.server.vue

@@ -15,14 +15,16 @@ const props = withDefaults(
 
 <template>
   <div
-    class="grid items-center gap-4 py-1 -my-1"
-    :class="[
-      justify === 'start' ? 'justify-start' : '',
-      props.reverseOrder ? 'toggle-reverse' : 'toggle-default',
-    ]"
+    class="grid items-center gap-4 py-1 -my-1 grid-cols-[auto_1fr_auto]"
+    :class="[justify === 'start' ? 'justify-start' : '']"
+    :style="
+      props.reverseOrder
+        ? 'grid-template-areas: \'toggle . label-text\''
+        : 'grid-template-areas: \'label-text . toggle\''
+    "
   >
     <template v-if="props.reverseOrder">
-      <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" style="grid-area: toggle-background" />
+      <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" style="grid-area: toggle" />
       <span
         v-if="label"
         class="text-sm text-fg font-medium text-start"
@@ -41,23 +43,11 @@ const props = withDefaults(
       </span>
       <SkeletonBlock
         class="h-6 w-11 shrink-0 rounded-full"
-        style="grid-area: toggle-background; justify-self: end"
+        style="grid-area: toggle; justify-self: end"
       />
     </template>
   </div>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}
   </p>
 </template>
-
-<style scoped>
-.toggle-default {
-  grid-template-areas: 'label-text . toggle-background';
-  grid-template-columns: auto 1fr auto;
-}
-
-.toggle-reverse {
-  grid-template-areas: 'toggle-background . label-text';
-  grid-template-columns: auto 1fr auto;
-}
-</style>