fix(theme): switch thumb travels inside the track, toggle scene for the preview

preview/entry.ts

@@ -25,6 +25,7 @@ function press(element: Element | null | undefined): void {
 
 // Scenes for screenshots: open the page with a hash to land in a state.
 // Width comes from the window (``--window-size``), the state from here.
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one flat scene list
 async function main(): Promise<void> {
   const client = new FakeClient();
   const state = new PanelState();
@@ -33,7 +34,7 @@ async function main(): Promise<void> {
   if (scene === "empty") {
     state.selected = null;
   }
-  if (scene === "question") {
+  if (scene === "question" || scene === "toggle") {
     state.selected = BRANCH_BLASTER;
   }
   if (scene === "deep") {
@@ -95,6 +96,9 @@ async function main(): Promise<void> {
       })
     );
   }
+  if (scene.startsWith("toggle")) {
+    press(document.querySelector('[data-slot="switch"]'));
+  }
   if (scene.startsWith("actions")) {
     press(document.querySelector('[aria-label="Conversation actions"]'));
   }

src/tailwind.css

@@ -360,18 +360,23 @@
   .beaver-root [data-slot="select-content"]::before {
     display: none !important;
   }
-  /* Obsidian's own toggle: border-hover track, accent when on, a white thumb. */
-  .beaver-root [data-slot="switch"] {
+  /* Obsidian's own toggle: border-hover track, accent when on, a white thumb.
+     Tripled class: luma's group/data variants carry three classes' worth of
+     specificity, and the utilities are all !important. */
+  .beaver-root.beaver-root.beaver-root [data-slot="switch"] {
+    justify-content: flex-start !important;
     width: 40px !important;
     height: 20px !important;
+    padding: 0 !important;
     background: var(--background-modifier-border-hover) !important;
     border: 0 !important;
     border-radius: var(--toggle-radius, 18px) !important;
   }
-  .beaver-root [data-slot="switch"][data-state="checked"] {
+  .beaver-root.beaver-root.beaver-root
+    [data-slot="switch"][data-state="checked"] {
     background: var(--interactive-accent) !important;
   }
-  .beaver-root [data-slot="switch-thumb"] {
+  .beaver-root.beaver-root.beaver-root [data-slot="switch-thumb"] {
     display: block !important;
     width: 16px !important;
     height: 16px !important;
@@ -380,8 +385,12 @@
     border-radius: 50% !important;
     box-shadow: var(--shadow-s) !important;
   }
-  .beaver-root [data-slot="switch-thumb"][data-state="checked"] {
-    transform: translateX(20px) !important;
+  .beaver-root.beaver-root.beaver-root [data-slot="switch-thumb"] {
+    translate: 0 !important;
+  }
+  .beaver-root.beaver-root.beaver-root
+    [data-slot="switch-thumb"][data-state="checked"] {
+    translate: 20px 0 !important;
   }
   .beaver-root [data-slot="button"][data-variant="default"],
   .beaver-root [data-slot="button"]:not([class*="bg-"]) {