states + rename

app/assets/javascripts/discourse/app/components/composer/toggle-switch.gjs

@@ -11,7 +11,7 @@ const ComposerToggleSwitch = <template>
 
     {{! template-lint-disable no-redundant-role }}
     <button
-      class="composer-toggle-switch__checkbox"
+      class="composer-toggle-switch__button"
       type="button"
       role="switch"
       aria-pressed={{if @state "true" "false"}}
@@ -19,7 +19,7 @@ const ComposerToggleSwitch = <template>
     >
       {{! template-lint-enable no-redundant-role }}
 
-      <span class="composer-toggle-switch__checkbox-slider">
+      <span class="composer-toggle-switch__slider" focusable="false">
         <span
           class={{concatClass
             "composer-toggle-switch__left-icon"

app/assets/stylesheets/common/components/composer-toggle-switch.scss

@@ -7,80 +7,61 @@
   height: 100%;
   grid-column: span 2;
   justify-content: center;
-
-  &:focus {
-    &__checkbox-slider {
-      outline: 2px solid var(--tertiary);
-      outline-offset: 2px;
-    }
-  }
-
-  &:hover {
-    // &__checkbox-slider {
-    //   background-color: var(--primary-high);
-    // }
-
-    &__checkbox[aria-pressed="true"]:not([disabled])
-      + #{$root}__checkbox-slider {
-      background-color: var(--tertiary-hover);
-    }
-  }
-
   display: flex;
   align-items: center;
-  gap: 0.5rem;
 
-  label {
+  &__button {
-    // position: relative;
-    // display: inline-block;
-    // cursor: pointer;
-    margin: 0;
-  }
-
-  &__checkbox {
-    // position: absolute;
     border: 0;
     padding: 0;
     background: transparent;
 
-    &:focus {
+    &:focus-visible {
-      + #{$root}__checkbox-slider {
+      outline: none;
-        outline: 2px solid var(--tertiary);
-        outline-offset: 2px;
-      }
-
-      // Outline should show only when tabbing, not clicking
-      &:not(:focus-visible) {
-        + #{$root}__checkbox-slider {
-          outline: none;
-        }
-      }
     }
-  }
+    &[disabled] {
-
+      opacity: 0.5;
-  &__checkbox[aria-pressed="true"] + &__checkbox-slider::before {
-    left: calc(var(--toggle-switch-width) - var(--toggle-switch-height));
-  }
-
-  &__checkbox[disabled] + &__checkbox-slider {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    &::before {
       cursor: not-allowed;
     }
   }
 
-  &__checkbox-slider {
+  &__slider {
     display: inline-block;
-    cursor: pointer;
     background: var(--primary-low);
     width: var(--toggle-switch-width);
     height: var(--toggle-switch-height);
     position: relative;
     vertical-align: middle;
-    transition: background 0.25s;
     border-radius: 0.25em;
+
+    :focus-visible & {
+      outline: 2px solid var(--tertiary);
+      outline-offset: 2px;
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      background-color: var(--tertiary-low);
+      width: calc(var(--toggle-switch-height) - 2px);
+      height: calc(var(--toggle-switch-height) - 4px);
+      top: 2px;
+      transition: left 0.25s, right 0.25s;
+      border-radius: 0.25em;
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+
+      .--markdown & {
+        left: 2px;
+      }
+
+      .--rte & {
+        right: 2px;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition-duration: 0ms;
+      }
+    }
   }
 
   &__left-icon,
@@ -88,7 +69,7 @@
     display: inline-block;
     position: absolute;
     opacity: 0;
-    transition: opacity 0.15s;
+    transition: opacity 0.25s left 0.25s, right 0.25s;
     height: 100%;
     width: calc(var(--toggle-switch-height) - 2px);
 
@@ -96,37 +77,6 @@
       transition-duration: 0ms;
     }
 
-    &.--active {
-      opacity: 1;
-    }
-
-    & .d-icon {
-      font-size: var(--font-down-1);
-      color: var(--primary);
-      vertical-align: text-bottom;
-    }
-  }
-
-  &__left-icon {
-    left: 2px;
-  }
-  &__right-icon {
-    right: 2px;
-  }
-
-  &__checkbox-slider::before {
-    content: "";
-    display: block;
-    position: absolute;
-    cursor: pointer;
-    background-color: var(--tertiary-low);
-    width: calc(var(--toggle-switch-height) - 2px);
-    height: calc(var(--toggle-switch-height) - 4px);
-    top: 2px;
-    transition: left 0.25s, right 0.25s;
-    border-radius: 0.25em;
-    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
-
     .--markdown & {
       left: 2px;
     }
@@ -135,8 +85,14 @@
       right: 2px;
     }
 
-    @media (prefers-reduced-motion: reduce) {
+    &.--active {
-      transition-duration: 0ms;
+      opacity: 1;
+    }
+
+    .d-icon {
+      font-size: var(--font-down-1);
+      color: var(--primary);
+      vertical-align: text-bottom;
     }
   }
 }