From c49828961ae4c7d5989a63e2b1c67d3fb3386908 Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Thu, 5 Feb 2026 16:05:07 -0500
Subject: [PATCH 01/28] fix: settings toggle should use input

---
 app/components/Settings/Toggle.client.vue | 146 +++++++++++++++++-----
 1 file changed, 113 insertions(+), 33 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 4a5905e1e..461efaddd 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-defineProps<{
-  label?: string
+const props = defineProps<{
+  label: string
   description?: string
   class?: string
 }>()
@@ -8,47 +8,127 @@ defineProps<{
 const checked = defineModel<boolean>({
   default: false,
 })
+const id = 'toggle-' + props.label
 </script>
 
 <template>
-  <button
-    type="button"
-    class="w-full flex items-center justify-between gap-4 group focus-visible:outline-none py-1 -my-1"
-    role="switch"
-    :aria-checked="checked"
-    @click="checked = !checked"
-    :class="class"
-  >
-    <span v-if="label" class="text-sm text-fg font-medium text-start">
-      {{ label }}
-    </span>
-    <span
-      class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
-      :class="
-        checked
-          ? 'bg-accent border-accent group-hover:bg-accent/80'
-          : 'bg-fg/50 border-fg/50 group-hover:bg-fg/70'
-      "
-      aria-hidden="true"
-    >
-      <span
-        class="block h-5 w-5 rounded-full bg-bg shadow-sm transition-transform duration-200 ease-in-out motion-reduce:transition-none"
-      />
-    </span>
-  </button>
+  <label :for="id">
+    <span class="toggle--label-text">{{ label }}</span>
+    <input
+      role="switch"
+      type="checkbox"
+      :id
+      class="toggle--checkbox"
+      :aria-checked="checked"
+      :checked="checked"
+      @click="checked = !checked"
+    />
+    <span class="toggle--background"></span>
+  </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}
   </p>
 </template>
 
 <style scoped>
-button[aria-checked='false'] > span:last-of-type > span {
-  translate: 0;
+@keyframes reverse {
+  0% {
+    left: 20px;
+    width: 20px;
+  }
+  60% {
+    left: 3px;
+    width: 40px;
+  }
+  100% {
+    left: 3px;
+  }
 }
-button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(100%);
+
+@keyframes switch {
+  0% {
+    left: 3px;
+  }
+  60% {
+    left: 3px;
+    width: 40px;
+  }
+  100% {
+    left: 20px;
+    width: 20px;
+  }
+}
+
+.toggle--label-text {
+  grid-area: label-text;
+}
+
+.toggle--background {
+  grid-area: toggle-background;
+  justify-self: end;
+}
+
+.toggle--checkbox {
+  opacity: 0;
+}
+
+label {
+  display: grid;
+  grid-template-areas: 'label-text . toggle-background';
+}
+
+input {
+  grid-row: 1;
+  grid-column: 3;
+  justify-self: end;
 }
-html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
-  translate: calc(-100%);
+
+label:has(input:focus) .toggle--background {
+  outline: solid 1px #030712;
+  outline-offset: 2px;
+  transition: outline 100ms ease-in;
+}
+label:has(input:hover) .toggle--background {
+  background: #6b7280;
+}
+
+/* background */
+.toggle--background {
+  width: 44px;
+  height: 24px;
+  background: #9ca3af;
+  border-radius: 100px;
+  border: 1px solid #030712;
+  display: flex;
+  position: relative;
+  transition: all 350ms ease-in;
+}
+
+label:has(input:checked) .toggle--background {
+  background: #030712;
+  border-color: #030712;
+}
+
+/* Circle that moves */
+.toggle--checkbox:checked + .toggle--background:before {
+  animation-name: reverse;
+  animation-duration: 350ms;
+  animation-fill-mode: forwards;
+  transition: all 360ms ease-in;
+  background: #f9fafb;
+}
+
+.toggle--background:before {
+  animation-name: switch;
+  animation-duration: 350ms;
+  animation-fill-mode: forwards;
+  content: '';
+  width: 20px;
+  height: 20px;
+  top: 1px;
+  left: 3px;
+  position: absolute;
+  border-radius: 20px;
+  background: #f9fafb;
 }
 </style>

From 439a09ebcaeaf7cd7ed6795d60d75dc1e4735e4c Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Mon, 9 Feb 2026 18:49:51 -0500
Subject: [PATCH 02/28] fixes: animation, reacty code, and styling

---
 app/components/Settings/Toggle.client.vue | 79 ++++++-----------------
 1 file changed, 21 insertions(+), 58 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 461efaddd..c50fe1cf9 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -4,9 +4,9 @@ const props = defineProps<{
   description?: string
   class?: string
 }>()
-
+defineEmits(['update:modelValue'])
 const checked = defineModel<boolean>({
-  default: false,
+  required: true,
 })
 const id = 'toggle-' + props.label
 </script>
@@ -14,15 +14,7 @@ const id = 'toggle-' + props.label
 <template>
   <label :for="id">
     <span class="toggle--label-text">{{ label }}</span>
-    <input
-      role="switch"
-      type="checkbox"
-      :id
-      class="toggle--checkbox"
-      :aria-checked="checked"
-      :checked="checked"
-      @click="checked = !checked"
-    />
+    <input role="switch" type="checkbox" :id class="toggle--checkbox" v-model="checked" />
     <span class="toggle--background"></span>
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
@@ -31,34 +23,6 @@ const id = 'toggle-' + props.label
 </template>
 
 <style scoped>
-@keyframes reverse {
-  0% {
-    left: 20px;
-    width: 20px;
-  }
-  60% {
-    left: 3px;
-    width: 40px;
-  }
-  100% {
-    left: 3px;
-  }
-}
-
-@keyframes switch {
-  0% {
-    left: 3px;
-  }
-  60% {
-    left: 3px;
-    width: 40px;
-  }
-  100% {
-    left: 20px;
-    width: 20px;
-  }
-}
-
 .toggle--label-text {
   grid-area: label-text;
 }
@@ -84,51 +48,50 @@ input {
 }
 
 label:has(input:focus) .toggle--background {
-  outline: solid 1px #030712;
+  outline: solid 2px #030712;
   outline-offset: 2px;
-  transition: outline 100ms ease-in;
 }
+
+label:has(input:checked) .toggle--background {
+  background: #030712;
+  border-color: #030712;
+}
+
 label:has(input:hover) .toggle--background {
   background: #6b7280;
 }
 
 /* background */
 .toggle--background {
-  width: 44px;
-  height: 24px;
+  width: 46px;
+  height: 26px;
   background: #9ca3af;
-  border-radius: 100px;
+  border-radius: 9999px;
   border: 1px solid #030712;
   display: flex;
   position: relative;
-  transition: all 350ms ease-in;
-}
-
-label:has(input:checked) .toggle--background {
-  background: #030712;
-  border-color: #030712;
 }
 
 /* Circle that moves */
 .toggle--checkbox:checked + .toggle--background:before {
-  animation-name: reverse;
-  animation-duration: 350ms;
+  animation-name: switch;
   animation-fill-mode: forwards;
-  transition: all 360ms ease-in;
+  transform: translate(21px);
+  transition: transform 200ms ease-in-out;
   background: #f9fafb;
 }
 
 .toggle--background:before {
-  animation-name: switch;
-  animation-duration: 350ms;
+  animation-name: reverse;
   animation-fill-mode: forwards;
+  transition: transform 200ms ease-in-out;
   content: '';
   width: 20px;
   height: 20px;
-  top: 1px;
-  left: 3px;
+  left: 2px;
+  top: 2px;
   position: absolute;
-  border-radius: 20px;
+  border-radius: 9999px;
   background: #f9fafb;
 }
 </style>

From a6a084fcae171a673a9e0db2fa5b853112511725 Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Tue, 10 Feb 2026 17:50:25 -0500
Subject: [PATCH 03/28] fix: support rtl

---
 app/components/Settings/Toggle.client.vue | 28 +++++++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index c50fe1cf9..e858c677c 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -9,12 +9,24 @@ const checked = defineModel<boolean>({
   required: true,
 })
 const id = 'toggle-' + props.label
+const { locale, locales } = useI18n()
+const dir = computed(() => {
+  const localeObj = locales.value.find(item => item.code === locale.value)
+  return localeObj?.dir ?? 'ltr'
+})
 </script>
 
 <template>
   <label :for="id">
     <span class="toggle--label-text">{{ label }}</span>
-    <input role="switch" type="checkbox" :id class="toggle--checkbox" v-model="checked" />
+    <input
+      role="switch"
+      type="checkbox"
+      :id
+      class="toggle--checkbox"
+      :class="dir"
+      v-model="checked"
+    />
     <span class="toggle--background"></span>
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
@@ -72,23 +84,29 @@ label:has(input:hover) .toggle--background {
   position: relative;
 }
 
+.toggle--checkbox:checked.ltr + .toggle--background:before {
+  transform: translate(21px);
+  left: 2px;
+}
+
+.toggle--checkbox:checked.rtl + .toggle--background:before {
+  transform: translate(-21px);
+  right: 2px;
+}
+
 /* Circle that moves */
 .toggle--checkbox:checked + .toggle--background:before {
-  animation-name: switch;
   animation-fill-mode: forwards;
-  transform: translate(21px);
   transition: transform 200ms ease-in-out;
   background: #f9fafb;
 }
 
 .toggle--background:before {
-  animation-name: reverse;
   animation-fill-mode: forwards;
   transition: transform 200ms ease-in-out;
   content: '';
   width: 20px;
   height: 20px;
-  left: 2px;
   top: 2px;
   position: absolute;
   border-radius: 9999px;

From 0db4fda16046fd9707fff6be4ea21351759c8fb9 Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Tue, 10 Feb 2026 18:28:17 -0500
Subject: [PATCH 04/28] Fix: use theme colors, toggle size

---
 app/components/Settings/Toggle.client.vue | 60 +++++++++++++----------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index e858c677c..974a136ba 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -59,46 +59,35 @@ input {
   justify-self: end;
 }
 
-label:has(input:focus) .toggle--background {
-  outline: solid 2px #030712;
-  outline-offset: 2px;
-}
-
-label:has(input:checked) .toggle--background {
-  background: #030712;
-  border-color: #030712;
-}
-
-label:has(input:hover) .toggle--background {
-  background: #6b7280;
-}
-
 /* background */
 .toggle--background {
-  width: 46px;
-  height: 26px;
-  background: #9ca3af;
+  width: 44px;
+  height: 24px;
+  background: var(--fg-subtle);
   border-radius: 9999px;
-  border: 1px solid #030712;
+  border: 1px solid var(--fg);
   display: flex;
   position: relative;
 }
 
-.toggle--checkbox:checked.ltr + .toggle--background:before {
-  transform: translate(21px);
-  left: 2px;
+label:has(input:focus) .toggle--background {
+  outline: solid 2px var(--fg);
+  outline-offset: 2px;
 }
 
-.toggle--checkbox:checked.rtl + .toggle--background:before {
-  transform: translate(-21px);
-  right: 2px;
+label:has(input:checked) .toggle--background {
+  background: var(--fg);
+  border-color: var(--fg);
+}
+
+label:has(input:hover) .toggle--background {
+  background: var(--fg-muted);
 }
 
 /* Circle that moves */
 .toggle--checkbox:checked + .toggle--background:before {
   animation-fill-mode: forwards;
   transition: transform 200ms ease-in-out;
-  background: #f9fafb;
 }
 
 .toggle--background:before {
@@ -107,9 +96,26 @@ label:has(input:hover) .toggle--background {
   content: '';
   width: 20px;
   height: 20px;
-  top: 2px;
+  top: 1px;
   position: absolute;
   border-radius: 9999px;
-  background: #f9fafb;
+  background: var(--bg);
+}
+
+/* Support rtl locales */
+.toggle--checkbox.ltr + .toggle--background:before {
+  left: 3px;
+}
+
+.toggle--checkbox.rtl + .toggle--background:before {
+  right: 3px;
+}
+
+.toggle--checkbox:checked.ltr + .toggle--background:before {
+  transform: translate(17px);
+}
+
+.toggle--checkbox:checked.rtl + .toggle--background:before {
+  transform: translate(-17px);
 }
 </style>

From 19c31f29ce9b5dd9e2b0638d4181c9f61aa19256 Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Tue, 10 Feb 2026 18:36:44 -0500
Subject: [PATCH 05/28] fix: unneeded code, tests

---
 app/components/Settings/Toggle.client.vue | 27 -----------------------
 test/nuxt/a11y.spec.ts                    |  5 +++--
 2 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 45ab82f13..974a136ba 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -118,31 +118,4 @@ label:has(input:hover) .toggle--background {
 .toggle--checkbox:checked.rtl + .toggle--background:before {
   transform: translate(-17px);
 }
-
-@media (forced-colors: active) {
-  /* make toggle tracks and thumb visible in forced colors. */
-  button[role='switch'] {
-    & > span:last-of-type {
-      forced-color-adjust: none;
-    }
-
-    &[aria-checked='false'] > span:last-of-type {
-      background: Canvas;
-      border-color: CanvasText;
-
-      & > span {
-        background: CanvasText;
-      }
-    }
-
-    &[aria-checked='true'] > span:last-of-type {
-      background: Highlight;
-      border-color: Highlight;
-
-      & > span {
-        background: HighlightText;
-      }
-    }
-  }
-}
 </style>
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 2a9f1cbd6..07e28ca75 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -2390,7 +2390,7 @@ describe('component accessibility audits', () => {
   describe('Toggle', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(SettingsToggle, {
-        props: { label: 'Enable feature' },
+        props: { label: 'Enable feature', modelValue: false },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
@@ -2401,6 +2401,7 @@ describe('component accessibility audits', () => {
         props: {
           label: 'Enable feature',
           description: 'This enables the feature',
+          modelValue: false,
         },
       })
       const results = await runAxe(component)
@@ -2538,7 +2539,7 @@ describe('background theme accessibility', () => {
       name: 'SettingsToggle',
       mount: () =>
         mountSuspended(SettingsToggle, {
-          props: { label: 'Feature', description: 'Desc' },
+          props: { label: 'Feature', description: 'Desc', modelValue: false },
         }),
     },
     {

From 4bcbce989706500a29c8649c27f8b26cb809db52 Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Tue, 10 Feb 2026 18:50:54 -0500
Subject: [PATCH 06/28] fix: use useID instead of adding label to "toggle"

---
 app/components/Settings/Toggle.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 974a136ba..4f742418c 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -8,7 +8,7 @@ defineEmits(['update:modelValue'])
 const checked = defineModel<boolean>({
   required: true,
 })
-const id = 'toggle-' + props.label
+const id = useId()
 const { locale, locales } = useI18n()
 const dir = computed(() => {
   const localeObj = locales.value.find(item => item.code === locale.value)

From bac8f7b874e10970b788f5b61f170e79940d2d3e Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Tue, 10 Feb 2026 19:14:00 -0500
Subject: [PATCH 07/28] fix: dot position

---
 app/components/Settings/Toggle.client.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 4f742418c..259d2052c 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -104,18 +104,18 @@ label:has(input:hover) .toggle--background {
 
 /* Support rtl locales */
 .toggle--checkbox.ltr + .toggle--background:before {
-  left: 3px;
+  left: 1px;
 }
 
 .toggle--checkbox.rtl + .toggle--background:before {
-  right: 3px;
+  right: 1px;
 }
 
 .toggle--checkbox:checked.ltr + .toggle--background:before {
-  transform: translate(17px);
+  transform: translate(19px);
 }
 
 .toggle--checkbox:checked.rtl + .toggle--background:before {
-  transform: translate(-17px);
+  transform: translate(-19px);
 }
 </style>

From 4182e9f64a6630176a610b719f711e6f548b78f9 Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:15:13 -0500
Subject: [PATCH 08/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 259d2052c..132cb7843 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -91,7 +91,6 @@ label:has(input:hover) .toggle--background {
 }
 
 .toggle--background:before {
-  animation-fill-mode: forwards;
   transition: transform 200ms ease-in-out;
   content: '';
   width: 20px;

From 6528caa2acd7ab7d9935277fece10c717659373b Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:16:45 -0500
Subject: [PATCH 09/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 132cb7843..0a293ebd1 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -86,7 +86,6 @@ label:has(input:hover) .toggle--background {
 
 /* Circle that moves */
 .toggle--checkbox:checked + .toggle--background:before {
-  animation-fill-mode: forwards;
   transition: transform 200ms ease-in-out;
 }
 

From e82dccd7012c514cdb3af1cd8deccd62e3546893 Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:17:17 -0500
Subject: [PATCH 10/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 0a293ebd1..a90911851 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -89,7 +89,7 @@ label:has(input:hover) .toggle--background {
   transition: transform 200ms ease-in-out;
 }
 
-.toggle--background:before {
+.toggle--background::before {
   transition: transform 200ms ease-in-out;
   content: '';
   width: 20px;

From a36bd5587500f147b09279f2b3370a424f7297a7 Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:17:34 -0500
Subject: [PATCH 11/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index a90911851..4bbf764ac 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -113,7 +113,7 @@ label:has(input:hover) .toggle--background {
   transform: translate(19px);
 }
 
-.toggle--checkbox:checked.rtl + .toggle--background:before {
+.toggle--checkbox:checked.rtl + .toggle--background::before {
   transform: translate(-19px);
 }
 </style>

From ef96b930f0c5c89d903d2141390a01e464bd724c Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:17:42 -0500
Subject: [PATCH 12/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 4bbf764ac..c104acfd1 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -109,7 +109,7 @@ label:has(input:hover) .toggle--background {
   right: 1px;
 }
 
-.toggle--checkbox:checked.ltr + .toggle--background:before {
+.toggle--checkbox:checked.ltr + .toggle--background::before {
   transform: translate(19px);
 }
 

From df6a9d043cd2d1c4729a40be0c182eae844f1758 Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:17:55 -0500
Subject: [PATCH 13/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index c104acfd1..16252e062 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -85,7 +85,7 @@ label:has(input:hover) .toggle--background {
 }
 
 /* Circle that moves */
-.toggle--checkbox:checked + .toggle--background:before {
+.toggle--checkbox:checked + .toggle--background::before {
   transition: transform 200ms ease-in-out;
 }
 

From e1887e27e21c986ab315db12269c6e780f83ea1d Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:18:47 -0500
Subject: [PATCH 14/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 16252e062..4295b4499 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -101,12 +101,8 @@ label:has(input:hover) .toggle--background {
 }
 
 /* Support rtl locales */
-.toggle--checkbox.ltr + .toggle--background:before {
-  left: 1px;
-}
-
-.toggle--checkbox.rtl + .toggle--background:before {
-  right: 1px;
+.toggle--checkbox + .toggle--background::before {
+  inset-inline-start: 3px;
 }
 
 .toggle--checkbox:checked.ltr + .toggle--background::before {

From 177d4cc86297855505c74c08d4b7d511f10fc8bd Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Tue, 10 Feb 2026 19:30:02 -0500
Subject: [PATCH 15/28] fix: css instead of js for dir, unneeded code

---
 app/components/Settings/Toggle.client.vue | 27 +++++------------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 4295b4499..6e0d5b711 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -9,24 +9,12 @@ const checked = defineModel<boolean>({
   required: true,
 })
 const id = useId()
-const { locale, locales } = useI18n()
-const dir = computed(() => {
-  const localeObj = locales.value.find(item => item.code === locale.value)
-  return localeObj?.dir ?? 'ltr'
-})
 </script>
 
 <template>
   <label :for="id">
     <span class="toggle--label-text">{{ label }}</span>
-    <input
-      role="switch"
-      type="checkbox"
-      :id
-      class="toggle--checkbox"
-      :class="dir"
-      v-model="checked"
-    />
+    <input role="switch" type="checkbox" :id class="toggle--checkbox" v-model="checked" />
     <span class="toggle--background"></span>
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
@@ -95,21 +83,18 @@ label:has(input:hover) .toggle--background {
   width: 20px;
   height: 20px;
   top: 1px;
+  inset-inline-start: 1px;
   position: absolute;
   border-radius: 9999px;
   background: var(--bg);
 }
 
 /* Support rtl locales */
-.toggle--checkbox + .toggle--background::before {
-  inset-inline-start: 3px;
-}
-
-.toggle--checkbox:checked.ltr + .toggle--background::before {
-  transform: translate(19px);
+:dir(ltr) .toggle--checkbox:checked + .toggle--background::before {
+  transform: translate(20px);
 }
 
-.toggle--checkbox:checked.rtl + .toggle--background::before {
-  transform: translate(-19px);
+:dir(rtl) .toggle--checkbox:checked + .toggle--background::before {
+  transform: translate(-20px);
 }
 </style>

From 9d39717ac485e6ab2a0638f88adfe5f5a283df1d Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 20:08:37 -0500
Subject: [PATCH 16/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 6e0d5b711..3c636ccea 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -73,10 +73,6 @@ label:has(input:hover) .toggle--background {
 }
 
 /* Circle that moves */
-.toggle--checkbox:checked + .toggle--background::before {
-  transition: transform 200ms ease-in-out;
-}
-
 .toggle--background::before {
   transition: transform 200ms ease-in-out;
   content: '';

From d02f0115ed4fc6b4a90680663796140b21296e1c Mon Sep 17 00:00:00 2001
From: Abbey Perini <68071056+abbeyperini@users.noreply.github.com>
Date: Tue, 10 Feb 2026 20:08:49 -0500
Subject: [PATCH 17/28] Update app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>
---
 app/components/Settings/Toggle.client.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 3c636ccea..88a32c633 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -58,7 +58,7 @@ input {
   position: relative;
 }
 
-label:has(input:focus) .toggle--background {
+label:has(input:focus-visible) .toggle--background {
   outline: solid 2px var(--fg);
   outline-offset: 2px;
 }

From cfed8ca6f90b4034fb7c1926ac85c8af09b09e5c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 01:37:49 +0000
Subject: [PATCH 18/28] chore: clean up slightly

---
 app/components/Settings/Toggle.client.vue | 28 +++++++++++------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 88a32c633..227455383 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -2,9 +2,7 @@
 const props = defineProps<{
   label: string
   description?: string
-  class?: string
 }>()
-defineEmits(['update:modelValue'])
 const checked = defineModel<boolean>({
   required: true,
 })
@@ -13,9 +11,9 @@ const id = useId()
 
 <template>
   <label :for="id">
-    <span class="toggle--label-text">{{ label }}</span>
-    <input role="switch" type="checkbox" :id class="toggle--checkbox" v-model="checked" />
-    <span class="toggle--background"></span>
+    <span class="label-text">{{ label }}</span>
+    <input role="switch" type="checkbox" :id class="checkbox" v-model="checked" />
+    <span class="background"></span>
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}
@@ -23,16 +21,16 @@ const id = useId()
 </template>
 
 <style scoped>
-.toggle--label-text {
+.label-text {
   grid-area: label-text;
 }
 
-.toggle--background {
+.background {
   grid-area: toggle-background;
   justify-self: end;
 }
 
-.toggle--checkbox {
+.checkbox {
   opacity: 0;
 }
 
@@ -48,7 +46,7 @@ input {
 }
 
 /* background */
-.toggle--background {
+.background {
   width: 44px;
   height: 24px;
   background: var(--fg-subtle);
@@ -58,22 +56,22 @@ input {
   position: relative;
 }
 
-label:has(input:focus-visible) .toggle--background {
+label:has(input:focus-visible) .background {
   outline: solid 2px var(--fg);
   outline-offset: 2px;
 }
 
-label:has(input:checked) .toggle--background {
+label:has(input:checked) .background {
   background: var(--fg);
   border-color: var(--fg);
 }
 
-label:has(input:hover) .toggle--background {
+label:has(input:hover) .background {
   background: var(--fg-muted);
 }
 
 /* Circle that moves */
-.toggle--background::before {
+.background::before {
   transition: transform 200ms ease-in-out;
   content: '';
   width: 20px;
@@ -86,11 +84,11 @@ label:has(input:hover) .toggle--background {
 }
 
 /* Support rtl locales */
-:dir(ltr) .toggle--checkbox:checked + .toggle--background::before {
+:dir(ltr) .checkbox:checked + .background::before {
   transform: translate(20px);
 }
 
-:dir(rtl) .toggle--checkbox:checked + .toggle--background::before {
+:dir(rtl) .checkbox:checked + .background::before {
   transform: translate(-20px);
 }
 </style>

From 96afb3c08c98bee1592756a4adb881dafbde30a0 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 01:47:22 +0000
Subject: [PATCH 19/28] chore: move into atomic css, respect
 `prefers-reduced-motion: reduce`, update server component

---
 app/components/Settings/Toggle.client.vue | 92 ++++++++++++-----------
 app/components/Settings/Toggle.server.vue |  9 ++-
 2 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 227455383..67ca24fa6 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   label: string
   description?: string
 }>()
@@ -10,10 +10,22 @@ const id = useId()
 </script>
 
 <template>
-  <label :for="id">
-    <span class="label-text">{{ label }}</span>
-    <input role="switch" type="checkbox" :id class="checkbox" v-model="checked" />
-    <span class="background"></span>
+  <label :for="id" class="grid" style="grid-template-areas: 'label-text . toggle-background'">
+    <span class="text-sm text-fg font-medium text-start" style="grid-area: label-text">{{
+      label
+    }}</span>
+    <input
+      role="switch"
+      type="checkbox"
+      :id
+      class="opacity-0"
+      style="grid-row: 1; grid-column: 3; justify-self: end"
+      v-model="checked"
+    />
+    <span
+      class="toggle-background h-6 w-11 rounded-full border border-fg relative flex"
+      style="grid-area: toggle-background; justify-self: end"
+    ></span>
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}
@@ -21,58 +33,42 @@ const id = useId()
 </template>
 
 <style scoped>
-.label-text {
-  grid-area: label-text;
-}
-
-.background {
-  grid-area: toggle-background;
-  justify-self: end;
-}
-
-.checkbox {
-  opacity: 0;
-}
-
-label {
-  display: grid;
-  grid-template-areas: 'label-text . toggle-background';
-}
-
-input {
-  grid-row: 1;
-  grid-column: 3;
-  justify-self: end;
+/* Track background */
+.toggle-background {
+  background: var(--fg-subtle);
+  transition:
+    background-color 100ms ease-in,
+    border-color 100ms ease-in;
 }
 
-/* background */
-.background {
-  width: 44px;
-  height: 24px;
-  background: var(--fg-subtle);
-  border-radius: 9999px;
-  border: 1px solid var(--fg);
-  display: flex;
-  position: relative;
+@media (prefers-reduced-motion: reduce) {
+  .toggle-background {
+    transition: none;
+  }
 }
 
-label:has(input:focus-visible) .background {
+label:has(input:focus-visible) .toggle-background {
   outline: solid 2px var(--fg);
   outline-offset: 2px;
 }
 
-label:has(input:checked) .background {
+label:has(input:checked) .toggle-background {
   background: var(--fg);
   border-color: var(--fg);
 }
 
-label:has(input:hover) .background {
+label:has(input:hover:not(:checked)) .toggle-background {
+  background: var(--fg-muted);
+}
+
+label:has(input:checked:hover) .toggle-background {
   background: var(--fg-muted);
+  border-color: var(--fg-muted);
 }
 
 /* Circle that moves */
-.background::before {
-  transition: transform 200ms ease-in-out;
+.toggle-background::before {
+  transition: translate 200ms ease-in-out;
   content: '';
   width: 20px;
   height: 20px;
@@ -83,12 +79,18 @@ label:has(input:hover) .background {
   background: var(--bg);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .toggle-background::before {
+    transition: none;
+  }
+}
+
 /* Support rtl locales */
-:dir(ltr) .checkbox:checked + .background::before {
-  transform: translate(20px);
+:dir(ltr) input:checked + .toggle-background::before {
+  translate: 20px;
 }
 
-:dir(rtl) .checkbox:checked + .background::before {
-  transform: translate(-20px);
+:dir(rtl) input:checked + .toggle-background::before {
+  translate: -20px;
 }
 </style>
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index 102a15c1c..c8df01270 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/app/components/Settings/Toggle.server.vue
@@ -6,11 +6,14 @@ defineProps<{
 </script>
 
 <template>
-  <div class="w-full flex items-center justify-between gap-4 py-1 -my-1">
-    <span v-if="label" class="text-sm text-fg font-medium text-start">
+  <div class="grid" style="grid-template-areas: 'label-text . toggle-background'">
+    <span v-if="label" class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
       {{ label }}
     </span>
-    <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" />
+    <SkeletonBlock
+      class="h-6 w-11 shrink-0 rounded-full"
+      style="grid-area: toggle-background; justify-self: end"
+    />
   </div>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
     {{ description }}

From 383cfc0cca3a7789cae5700988bfe12d097a1eda Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 11 Feb 2026 01:59:21 +0000
Subject: [PATCH 20/28] [autofix.ci] apply automated fixes

---
 app/components/Settings/Toggle.client.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index e14223b68..c9ca10399 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -29,7 +29,11 @@ const id = useId()
   <label
     :for="id"
     class="grid items-center gap-4 py-1 -my-1"
-    :class="[justify === 'start' ? 'justify-start' : '', props.reverseOrder ? 'toggle-reverse' : 'toggle-default', $props.class]"
+    :class="[
+      justify === 'start' ? 'justify-start' : '',
+      props.reverseOrder ? 'toggle-reverse' : 'toggle-default',
+      $props.class,
+    ]"
   >
     <template v-if="props.reverseOrder">
       <input
@@ -108,7 +112,9 @@ const id = useId()
 /* Track background */
 .toggle-background {
   background: var(--fg-subtle);
-  transition: background-color 100ms ease-in, border-color 100ms ease-in;
+  transition:
+    background-color 100ms ease-in,
+    border-color 100ms ease-in;
 }
 
 @media (prefers-reduced-motion: reduce) {

From ee9b8d5ddece144b1b52ca9571e4ee5af437ea8a Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 01:59:11 +0000
Subject: [PATCH 21/28] chore: remove class prop

---
 app/components/Settings/Toggle.client.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index c9ca10399..6395e5939 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -5,7 +5,6 @@ const props = withDefaults(
   defineProps<{
     label?: string
     description?: string
-    class?: string
     justify?: 'between' | 'start'
     tooltip?: string
     tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
@@ -32,7 +31,6 @@ const id = useId()
     :class="[
       justify === 'start' ? 'justify-start' : '',
       props.reverseOrder ? 'toggle-reverse' : 'toggle-default',
-      $props.class,
     ]"
   >
     <template v-if="props.reverseOrder">

From ea8723ff44f2f33900cc938cd9873c2bf42213e9 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 02:00:24 +0000
Subject: [PATCH 22/28] chore: update server equivalent following merge

---
 app/components/Settings/Toggle.server.vue | 66 ++++++++++++++++++-----
 1 file changed, 54 insertions(+), 12 deletions(-)

diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index c8df01270..fd853c0e7 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/app/components/Settings/Toggle.server.vue
@@ -1,21 +1,63 @@
 <script setup lang="ts">
-defineProps<{
-  label?: string
-  description?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    description?: string
+    justify?: 'between' | 'start'
+    reverseOrder?: boolean
+  }>(),
+  {
+    justify: 'between',
+    reverseOrder: false,
+  },
+)
 </script>
 
 <template>
-  <div class="grid" style="grid-template-areas: 'label-text . toggle-background'">
-    <span v-if="label" class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
-      {{ label }}
-    </span>
-    <SkeletonBlock
-      class="h-6 w-11 shrink-0 rounded-full"
-      style="grid-area: toggle-background; justify-self: end"
-    />
+  <div
+    class="grid items-center gap-4 py-1 -my-1"
+    :class="[
+      justify === 'start' ? 'justify-start' : '',
+      props.reverseOrder ? 'toggle-reverse' : 'toggle-default',
+    ]"
+  >
+    <template v-if="props.reverseOrder">
+      <SkeletonBlock class="h-6 w-11 shrink-0 rounded-full" style="grid-area: toggle-background" />
+      <span
+        v-if="label"
+        class="text-sm text-fg font-medium text-start"
+        style="grid-area: label-text"
+      >
+        {{ label }}
+      </span>
+    </template>
+    <template v-else>
+      <span
+        v-if="label"
+        class="text-sm text-fg font-medium text-start"
+        style="grid-area: label-text"
+      >
+        {{ label }}
+      </span>
+      <SkeletonBlock
+        class="h-6 w-11 shrink-0 rounded-full"
+        style="grid-area: toggle-background; 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>

From 4bf293495150b1dbe4f219b0b3b071925ed76bfc Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 08:41:10 +0000
Subject: [PATCH 23/28] refactor: rewrite without extra element

---
 app/components/Settings/Toggle.client.vue | 112 ++++++++--------------
 app/components/Settings/Toggle.server.vue |  28 ++----
 2 files changed, 51 insertions(+), 89 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 6395e5939..355e18a65 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -27,24 +27,23 @@ 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"
@@ -52,11 +51,15 @@ 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>
     </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>
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index fd853c0e7..8e348c585 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/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,7 +43,7 @@ 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>
@@ -49,15 +51,3 @@ const props = withDefaults(
     {{ 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>

From ab071363c042329db9b0beb61c2253a63ddfe5d4 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Feb 2026 08:55:40 +0000
Subject: [PATCH 24/28] chore: remove cursor-pointer

---
 app/components/Settings/Toggle.client.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 355e18a65..ea1d50896 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -41,7 +41,7 @@ const id = useId()
         type="checkbox"
         :id
         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"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 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"
       />
       <TooltipApp
@@ -87,7 +87,7 @@ const id = useId()
         type="checkbox"
         :id
         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"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 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"
       />
     </template>

From 837bc10915c27e0713b8ef165c859c788339b442 Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Wed, 11 Feb 2026 12:43:23 -0500
Subject: [PATCH 25/28] fix: forced contrast mode styling, server style tag

---
 app/components/Settings/Toggle.client.vue | 53 ++++++++++++-
 app/components/Settings/Toggle.server.vue | 97 ++++++++++++++++++++++-
 2 files changed, 148 insertions(+), 2 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index ea1d50896..b514bf278 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -3,7 +3,7 @@ import TooltipApp from '~/components/Tooltip/App.vue'
 
 const props = withDefaults(
   defineProps<{
-    label?: string
+    label: string
     description?: string
     justify?: 'between' | 'start'
     tooltip?: string
@@ -139,4 +139,55 @@ const id = useId()
     transition: none;
   }
 }
+
+/* Support forced colors */
+@media (forced-colors: active) {
+  label > span {
+    background: Canvas;
+    color: var(--bg);
+    forced-color-adjust: none;
+  }
+
+  label:has(.toggle:checked) > span {
+    background: Highlight;
+    color: var(--fg);
+  }
+
+  .toggle::before {
+    forced-color-adjust: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .toggle::before {
+      background-color: Highlight;
+    }
+
+    label > span {
+      background: Canvas;
+      color: var(--fg);
+      forced-color-adjust: none;
+    }
+
+    label:has(.toggle:checked) > span {
+      background: Highlight;
+      color: var(--bg);
+    }
+  }
+
+  .toggle,
+  .toggle:hover {
+    background: Canvas;
+    border-color: CanvasText;
+  }
+
+  .toggle:checked,
+  .toggle:checked:hover {
+    background: Highlight;
+    border-color: HighlightText;
+  }
+
+  .toggle:checked::before {
+    background: Canvas;
+  }
+}
 </style>
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index 8e348c585..d9bfe76bc 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/app/components/Settings/Toggle.server.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    label?: string
+    label: string
     description?: string
     justify?: 'between' | 'start'
     reverseOrder?: boolean
@@ -51,3 +51,98 @@ const props = withDefaults(
     {{ description }}
   </p>
 </template>
+
+<style scoped>
+/* Thumb position: logical property for RTL support */
+.toggle::before {
+  inset-inline-start: 1px;
+}
+
+/* Track transition */
+.toggle {
+  transition:
+    background-color 100ms ease-in,
+    border-color 100ms ease-in;
+}
+
+.toggle::before {
+  transition: translate 200ms ease-in-out;
+}
+
+/* Hover states */
+.toggle:hover:not(:checked) {
+  background: var(--fg-muted);
+}
+
+.toggle:checked:hover {
+  background: var(--fg-muted);
+  border-color: var(--fg-muted);
+}
+
+/* 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,
+  .toggle::before {
+    transition: none;
+  }
+}
+
+/* Support forced colors */
+@media (forced-colors: active) {
+  label > span {
+    background: Canvas;
+    color: var(--bg);
+    forced-color-adjust: none;
+  }
+
+  label:has(.toggle:checked) > span {
+    background: Highlight;
+    color: var(--fg);
+  }
+
+  .toggle::before {
+    forced-color-adjust: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .toggle::before {
+      background-color: Highlight;
+    }
+
+    label > span {
+      background: Canvas;
+      color: var(--fg);
+      forced-color-adjust: none;
+    }
+
+    label:has(.toggle:checked) > span {
+      background: Highlight;
+      color: var(--bg);
+    }
+  }
+
+  .toggle,
+  .toggle:hover {
+    background: Canvas;
+    border-color: CanvasText;
+  }
+
+  .toggle:checked,
+  .toggle:checked:hover {
+    background: Highlight;
+    border-color: HighlightText;
+  }
+
+  .toggle:checked::before {
+    background: Canvas;
+  }
+}
+</style>

From 61a0040c6ec2b332fb631781ed32fe3127bdf150 Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Wed, 11 Feb 2026 12:49:21 -0500
Subject: [PATCH 26/28] fix: forced contrast colors are hard

---
 app/components/Settings/Toggle.client.vue | 13 +++++--------
 app/components/Settings/Toggle.server.vue | 13 +++++--------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index b514bf278..dbe620f64 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -144,33 +144,30 @@ const id = useId()
 @media (forced-colors: active) {
   label > span {
     background: Canvas;
-    color: var(--bg);
+    color: var(--fg);
     forced-color-adjust: none;
   }
 
   label:has(.toggle:checked) > span {
     background: Highlight;
-    color: var(--fg);
+    color: var(--bg);
   }
 
   .toggle::before {
     forced-color-adjust: none;
+    background-color: Highlight;
   }
 
   @media (prefers-color-scheme: dark) {
-    .toggle::before {
-      background-color: Highlight;
-    }
-
     label > span {
       background: Canvas;
-      color: var(--fg);
+      color: var(--bg);
       forced-color-adjust: none;
     }
 
     label:has(.toggle:checked) > span {
       background: Highlight;
-      color: var(--bg);
+      color: var(--fg);
     }
   }
 
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index d9bfe76bc..3a2838275 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/app/components/Settings/Toggle.server.vue
@@ -99,33 +99,30 @@ const props = withDefaults(
 @media (forced-colors: active) {
   label > span {
     background: Canvas;
-    color: var(--bg);
+    color: var(--fg);
     forced-color-adjust: none;
   }
 
   label:has(.toggle:checked) > span {
     background: Highlight;
-    color: var(--fg);
+    color: var(--bg);
   }
 
   .toggle::before {
     forced-color-adjust: none;
+    background-color: Highlight;
   }
 
   @media (prefers-color-scheme: dark) {
-    .toggle::before {
-      background-color: Highlight;
-    }
-
     label > span {
       background: Canvas;
-      color: var(--fg);
+      color: var(--bg);
       forced-color-adjust: none;
     }
 
     label:has(.toggle:checked) > span {
       background: Highlight;
-      color: var(--bg);
+      color: var(--fg);
     }
   }
 

From a5cdb7615b6c1a42efc4998fa443d86e2ec6f84f Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Wed, 11 Feb 2026 13:59:23 -0500
Subject: [PATCH 27/28] fix: force colors are really hard, for real

---
 app/components/Settings/Toggle.client.vue | 27 +++++++----------------
 app/components/Settings/Toggle.server.vue | 27 +++++++----------------
 2 files changed, 16 insertions(+), 38 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index dbe620f64..c754488a5 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -106,12 +106,14 @@ const id = useId()
 /* Track transition */
 .toggle {
   transition:
-    background-color 100ms ease-in,
-    border-color 100ms ease-in;
+    background-color 100ms ease-in-out,
+    border-color 100ms ease-in-out;
 }
 
 .toggle::before {
-  transition: translate 200ms ease-in-out;
+  transition:
+    background-color 50ms ease-in-out,
+    translate 200ms ease-in-out;
 }
 
 /* Hover states */
@@ -144,13 +146,13 @@ const id = useId()
 @media (forced-colors: active) {
   label > span {
     background: Canvas;
-    color: var(--fg);
+    color: Highlight;
     forced-color-adjust: none;
   }
 
   label:has(.toggle:checked) > span {
     background: Highlight;
-    color: var(--bg);
+    color: Canvas;
   }
 
   .toggle::before {
@@ -158,19 +160,6 @@ const id = useId()
     background-color: Highlight;
   }
 
-  @media (prefers-color-scheme: dark) {
-    label > span {
-      background: Canvas;
-      color: var(--bg);
-      forced-color-adjust: none;
-    }
-
-    label:has(.toggle:checked) > span {
-      background: Highlight;
-      color: var(--fg);
-    }
-  }
-
   .toggle,
   .toggle:hover {
     background: Canvas;
@@ -180,7 +169,7 @@ const id = useId()
   .toggle:checked,
   .toggle:checked:hover {
     background: Highlight;
-    border-color: HighlightText;
+    border-color: CanvasText;
   }
 
   .toggle:checked::before {
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index 3a2838275..e0baec8ac 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/app/components/Settings/Toggle.server.vue
@@ -61,12 +61,14 @@ const props = withDefaults(
 /* Track transition */
 .toggle {
   transition:
-    background-color 100ms ease-in,
-    border-color 100ms ease-in;
+    background-color 100ms ease-in-out,
+    border-color 100ms ease-in-out;
 }
 
 .toggle::before {
-  transition: translate 200ms ease-in-out;
+  transition:
+    background-color 50ms ease-in-out,
+    translate 200ms ease-in-out;
 }
 
 /* Hover states */
@@ -99,13 +101,13 @@ const props = withDefaults(
 @media (forced-colors: active) {
   label > span {
     background: Canvas;
-    color: var(--fg);
+    color: Highlight;
     forced-color-adjust: none;
   }
 
   label:has(.toggle:checked) > span {
     background: Highlight;
-    color: var(--bg);
+    color: Canvas;
   }
 
   .toggle::before {
@@ -113,19 +115,6 @@ const props = withDefaults(
     background-color: Highlight;
   }
 
-  @media (prefers-color-scheme: dark) {
-    label > span {
-      background: Canvas;
-      color: var(--bg);
-      forced-color-adjust: none;
-    }
-
-    label:has(.toggle:checked) > span {
-      background: Highlight;
-      color: var(--fg);
-    }
-  }
-
   .toggle,
   .toggle:hover {
     background: Canvas;
@@ -135,7 +124,7 @@ const props = withDefaults(
   .toggle:checked,
   .toggle:checked:hover {
     background: Highlight;
-    border-color: HighlightText;
+    border-color: CanvasText;
   }
 
   .toggle:checked::before {

From 8c140aaf37d3568a2c728c833bb28d46ef723953 Mon Sep 17 00:00:00 2001
From: AbbeyPerini <abbeyperini@gmail.com>
Date: Wed, 11 Feb 2026 14:22:51 -0500
Subject: [PATCH 28/28] fix: animation flash

---
 app/components/Settings/Toggle.client.vue | 4 ++--
 app/components/Settings/Toggle.server.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index c754488a5..90580d197 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -106,13 +106,13 @@ const id = useId()
 /* Track transition */
 .toggle {
   transition:
-    background-color 100ms ease-in-out,
+    background-color 200ms ease-in-out,
     border-color 100ms ease-in-out;
 }
 
 .toggle::before {
   transition:
-    background-color 50ms ease-in-out,
+    background-color 200ms ease-in-out,
     translate 200ms ease-in-out;
 }
 
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index e0baec8ac..b5f2105a1 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/app/components/Settings/Toggle.server.vue
@@ -61,13 +61,13 @@ const props = withDefaults(
 /* Track transition */
 .toggle {
   transition:
-    background-color 100ms ease-in-out,
+    background-color 200ms ease-in-out,
     border-color 100ms ease-in-out;
 }
 
 .toggle::before {
   transition:
-    background-color 50ms ease-in-out,
+    background-color 200ms ease-in-out,
     translate 200ms ease-in-out;
 }