Update docs

Author: NullVoxPopuli

docs-app/public/docs/3-ui/switch.md

@@ -30,7 +30,7 @@ import { Switch, Shadowed } from 'ember-primitives';
 
 </details>
 
-<details><summary><h3>Dark/Light Theme Switch</h3></summary>
+<details open><summary><h3>Dark/Light Theme Switch</h3></summary>
 
 CSS inspired/taken from [this Codepen](https://codepen.io/Umer_Farooq/pen/eYJgKGN?editors=1100)
 
@@ -47,9 +47,13 @@ const toggleTheme = (e) =>
       <s.Control {{on 'change' toggleTheme}} />
       <s.Label>
         <span class="sr-only">Toggle between light and dark mode</span>
-        <Moon />
-        <Sun />
-        <span class="ball"></span>
+        <span class="ball" data-state={{if s.isChecked "on" "off"}}>
+          {{#if s.isChecked}}
+            <Moon />
+          {{else}}
+            <Sun />
+          {{/if}}
+      </span>
       </s.Label>
     </Switch>
 
@@ -69,6 +73,7 @@ const toggleTheme = (e) =>
         text-align: center;
         margin: 0;
         transition: background 0.2s linear;
+        width: 100%;
       }
 
       div.dark {background-color: #292c35;}
@@ -90,9 +95,10 @@ const toggleTheme = (e) =>
       }
 
       label {
-        background-color: #111;
-        width: 50px;
-        height: 26px;
+        background-color: #aaaaff;
+        border: 1px solid;
+        width: 60px;
+        height: 32px;
         border-radius: 50px;
         position: relative;
         padding: 5px;
@@ -103,23 +109,30 @@ const toggleTheme = (e) =>
         gap: 0.5rem;
       }
 
-      svg { fill: currentColor; }
+      svg { fill: currentColor; position: absolute; top: 3px; left: 3px; }
       .fa-moon { color: #f1c40f; }
-      .fa-sun { color: #f39c12; }
+      .sun { color: #f39c12; }
 
       label .ball {
-        background-color: #fff;
-        width: 22px;
-        height: 22px;
+        background-color: #111;
+        width: 26px;
+        height: 26px;
         position: absolute;
         left: 2px;
         top: 2px;
         border-radius: 50%;
-        transition: transform 0.2s linear;
+        transition-property: transform;
+        transition-duration: 0.2s;
+        transition-timing-function: linear(0, 0.1, 0.25, 0.5, 0.68, 0.8, 0.88, 0.94, 0.98, 0.995, 1);;
+        border: 2px solid #f1c40f;
+
+        &[data-state="on"] {
+          border: 2px solid purple;
+        }
       }
 
       input[type='checkbox'][role='switch']:checked + label .ball {
-        transform: translateX(24px);
+        transform: translateX(28px);
       }
 
     </style>
@@ -129,11 +142,50 @@ const toggleTheme = (e) =>
 // 🎵 It's raining, it's pouring, ... 🎵
 // https://www.youtube.com/watch?v=ll5ykbAumD4
 const Sun = <template>
-  <svg class="fa-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">{{!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --}}<path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
+  <svg
+    class="sun"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="8" cy="8" r="3.25" />
+    <line x1="8" y1="1" x2="8" y2="3" />
+    <line x1="8" y1="13" x2="8" y2="15" />
+    <line x1="1" y1="8" x2="3" y2="8" />
+    <line x1="13" y1="8" x2="15" y2="8" />
+    <line x1="3.05" y1="3.05" x2="4.47" y2="4.47" />
+    <line x1="11.53" y1="11.53" x2="12.95" y2="12.95" />
+    <line x1="11.53" y1="4.47" x2="12.95" y2="3.05" />
+    <line x1="3.05" y1="12.95" x2="4.47" y2="11.53" />
+  </svg>
 </template>;
 
 const Moon = <template>
-  <svg class="fa-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">{{!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --}}<path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="moon"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <path
+    transform="translate(-1 0)"
+    d="M11.5 2a5.5 5.5 0 1 0 2 9.5 4.5 4.5 0 0 1 -2 -9.5z"
+  />
+</svg>
 </template>;
 ```