From 82dee6361c8ee4c213990c646a0d2100a9fd4644 Mon Sep 17 00:00:00 2001
From: Geoffrey Eisenbarth <geoffrey.eisenbarth@gmail.com>
Date: Wed, 11 Dec 2024 13:19:08 -0600
Subject: Clean up.

---
 src/aria.css        |  94 ++++++++++++++++++-------------
 www/docs/40-aria.md | 157 +++++++++++++++-------------------------------------
 2 files changed, 99 insertions(+), 152 deletions(-)

diff --git a/src/aria.css b/src/aria.css
index 82b69a0..ed12c76 100644
--- a/src/aria.css
+++ b/src/aria.css
@@ -117,62 +117,76 @@
     text-align: center;
 }
 
-label:has([role=switch]:last-child) {
-  display: flex;
-  gap: var(--gap);
-  justify-content: space-between;
-}
-
-label[for]:has(+ [role=switch]),
-label[for] + [role=switch],
-[role=switch]:has(+ label[for]),
-[role=switch] + label[for] {
-  display: inline-block;
-  padding-block: calc(var(--gap) / 4);
-}
 
-[role=switch], [aria-pressed] {
-  --toggle-border-width: 0.15em;
+input[type=checkbox][role=switch] {
   all: unset;
   appearance: none;
-  cursor: pointer;
-  display: grid !important;
-  grid-gap: 0;
-  transition: all 0.25s ease-in-out;
-  vertical-align: bottom;
+
+  display: inline-grid;
+  vertical-align: middle;
+  grid-template-columns: repeat(2, 1rem);
+  aspect-ratio: 2 / 1;
+  margin-block: auto;
 
   &::before, &::after {
     content: '';
     display: inline-block;
-    height: var(--rhythm);
-    border: var(--toggle-border-width) solid var(--graphical-fg);
+
+    transition: transform .2s ease-in-out, background-color .2s ease-in-out, background-color .2s ease-in-out;
   }
+
   &::before {
-    width: calc(2 * var(--rhythm));
-    background-color: var(--bg);
-    border-radius: var(--rhythm);
+    grid-column: 1 / span 2;
     grid-row: 1;
-    grid-column: 1 / 3;
+    border: 1px solid var(--graphical-fg);
+    background: var(--bg);
+    border-radius: 9999rem;
   }
+
   &::after {
-    width: var(--rhythm);
-    background-color: var(--interactive-bg);
-    border-radius: 50%;
+    --toggle-nub-margin: 2px;
+    grid-column: 1;
     grid-row: 1;
-    grid-column: 1 / 2;
+    margin: var(--toggle-nub-margin);
+    border-radius: 99999rem;
+    background: var(--graphical-fg);
+  }
+
+  &:checked {
+    &::before {
+      border-color: var(--accent);
+      background: var(--accent);
+    }
+    &::after {
+      transform: translateX(calc(100% + 2 * var(--toggle-nub-margin)));
+      background: var(--bg);
+    }
   }
-  &:is(:checked, [aria-pressed=true]) {
-    &::before { background-color: var(--accent); }
-    &::after  { grid-column: 2 / 3; }
+
+  &:indeterminate {
+    &::after {
+      transform: translateX(calc(50% + var(--toggle-nub-margin)));
+      background: var(--bg);
+      border: 1px solid var(--graphical-fg);
+    }
   }
 
-  &:is(:hover, :focus-visible) {
-    /* Reset button styles */
-    filter: unset;
-    box-shadow: none;
+  &:is(label > *):not(#specificity-hack) {
+    margin-block-end: auto;
   }
-  &:active {
-    box-shadow: none;
-    color: inherit;
+  &:not(label > *) {
+    padding-block: calc(var(--gap) / 4 + (var(--rhythm) - 1em) / 2);
   }
+
+  :is(label:has(> &)) {
+    /* Lightning CSS requires :is() when nested selector doesn't start with & */
+    display: flex;
+    gap: var(--gap);
+    flex-direction: row;
+  }
+  :is(label:has(+ &)) {
+    /* Lightning CSS requires :is() when nested selector doesn't start with & */
+    width: 100%;
+  }
+
 }
diff --git a/www/docs/40-aria.md b/www/docs/40-aria.md
index 3a21af4..396837f 100644
--- a/www/docs/40-aria.md
+++ b/www/docs/40-aria.md
@@ -203,11 +203,7 @@ To get the actual behavior of an accessible feed, you can use [Missing.js &sect;
 
 ## Toggle Switch
 
-Use `switch` role with `<input type="checkbox">` or `aria-pressed` with `<button>`.
-
-If using `<button>`, you must provide the JavaScript to toggle `[aria-pressed]`.
-
-Using `<input>` degrades nicely in the absense of JavaScript and also allows for an "indeterminate" state.
+Use `switch` role with `<input type="checkbox">`. The indeterminate state is supported, but it must be set with JavaScript.
 
 <figure>
 <figcaption>Code: Toggle Switches</figcaption>
@@ -216,174 +212,111 @@ Using `<input>` degrades nicely in the absense of JavaScript and also allows for
   <div class="f-switch">
     <fieldset class="f-col">
       <legend>Toggles inside labels</legend>
-      <label>
-        <input type="checkbox" role="switch"> Toggle me
-      </label>
-      <label>
-        <input type="checkbox" role="switch" checked> But not me
-      </label>
-      <label>
-        <input type="checkbox" role="switch"> I'm not sure
-      </label>
+      <label><input type="checkbox" role="switch">Toggle me</label>
+      <label><input type="checkbox" role="switch" checked>But not me</label>
+      <label><input type="checkbox" role="switch" class="indeterminate">I'm not sure</label>
     </fieldset>
     <fieldset class="f-col">
       <legend>Toggles inside labels, flipped</legend>
-      <label>
-        Toggle me <input type="checkbox" role="switch">
-      </label>
-      <label>
-        But not me <input type="checkbox" role="switch" checked>
-      </label>
-      <label>
-        I'm not sure <input type="checkbox" role="switch">
-      </label>
+      <label class="justify-content:space-between">Toggle me<input type="checkbox" role="switch"></label>
+      <label class="justify-content:space-between">But not me <input type="checkbox" role="switch" checked></label>
+      <label class="justify-content:space-between">I'm not sure <input type="checkbox" role="switch" class="indeterminate"></label>
     </fieldset>
+    <script>
+      document.querySelectorAll('.indeterminate').forEach(
+        el => {el.indeterminate = true;}
+      )
+    </script>
   </div>
   ~~~
 
   <div class="f-switch">
     <fieldset class="f-col">
       <legend>Toggles inside labels</legend>
-      <label>
-        <input type="checkbox" role="switch"> Toggle me
-      </label>
-      <label>
-        <input type="checkbox" role="switch" checked> But not me
-      </label>
-      <label>
-        <input type="checkbox" role="switch"> I'm not sure
-      </label>
+      <label><input type="checkbox" role="switch">Toggle me</label>
+      <label><input type="checkbox" role="switch" checked>But not me</label>
+      <label><input type="checkbox" role="switch" class="indeterminate">I'm not sure</label>
     </fieldset>
     <fieldset class="f-col">
       <legend>Toggles inside labels, flipped</legend>
-      <label>
-        Toggle me <input type="checkbox" role="switch">
-      </label>
-      <label>
-        But not me <input type="checkbox" role="switch" checked>
-      </label>
-      <label>
-        I'm not sure <input type="checkbox" role="switch">
-      </label>
+      <label class="justify-content:space-between">Toggle me<input type="checkbox" role="switch"></label>
+      <label class="justify-content:space-between">But not me <input type="checkbox" role="switch" checked></label>
+      <label class="justify-content:space-between">I'm not sure <input type="checkbox" role="switch" class="indeterminate"></label>
     </fieldset>
   </div>
 
   ~~~ html
   <div class="f-switch">
-    <fieldset class="f-col">
+    <fieldset class="table rows">
       <legend>Toggles before labels</legend>
-      <div class="f-row">
+      <div>
         <input id="toggle-1" type="checkbox" role="switch">
         <label for="toggle-1">Toggle me</label>
       </div>
-      <div class="f-row">
+      <div>
         <input id="toggle-2"type="checkbox" role="switch" checked>
         <label for="toggle-2">But not me</label>
       </div>
-      <div class="f-row">
-        <input if="toggle-3" type="checkbox" role="switch">
+      <div>
+        <input id="toggle-3" type="checkbox" role="switch" class="indeterminate">
         <label for="toggle-3">I'm not sure</label>
       </div>
     </fieldset>
-    <fieldset class="f-col">
+    <fieldset class="table rows">
       <legend>Toggles after labels</legend>
-      <div class="f-row justify-content:space-between">
+      <div>
         <label for="toggle-4">Toggle me</label>
         <input id="toggle-4" type="checkbox" role="switch">
       </div>
-      <div class="f-row justify-content:space-between">
+      <div>
         <label for="toggle-5">But not me</label>
         <input id="toggle-5" type="checkbox" role="switch" checked>
       </div>
-      <div class="f-row justify-content:space-between">
+      <div>
         <label for="toggle-6">I'm not sure</label>
-        <input id="toggle-6" type="checkbox" role="switch">
+        <input id="toggle-6" type="checkbox" role="switch" class="indeterminate">
       </div>
     </fieldset>
+    <script>
+      document.querySelectorAll('.indeterminate').forEach(
+        el => {el.indeterminate = true;}
+      )
+    </script>
   </div>
   ~~~
 
   <div class="f-switch">
-    <fieldset class="f-col">
+    <fieldset class="table rows">
       <legend>Toggles before labels</legend>
-      <div class="f-row">
+      <div>
         <input id="toggle-1" type="checkbox" role="switch">
         <label for="toggle-1">Toggle me</label>
       </div>
-      <div class="f-row">
+      <div>
         <input id="toggle-2"type="checkbox" role="switch" checked>
         <label for="toggle-2">But not me</label>
       </div>
-      <div class="f-row">
-        <input if="toggle-3" type="checkbox" role="switch">
+      <div>
+        <input id="toggle-3" type="checkbox" role="switch" class="indeterminate">
         <label for="toggle-3">I'm not sure</label>
       </div>
     </fieldset>
-    <fieldset class="f-col">
+    <fieldset class="table rows">
       <legend>Toggles after labels</legend>
-      <div class="f-row justify-content:space-between">
+      <div>
         <label for="toggle-4">Toggle me</label>
         <input id="toggle-4" type="checkbox" role="switch">
       </div>
-      <div class="f-row justify-content:space-between">
+      <div>
         <label for="toggle-5">But not me</label>
         <input id="toggle-5" type="checkbox" role="switch" checked>
       </div>
-      <div class="f-row justify-content:space-between">
+      <div>
         <label for="toggle-6">I'm not sure</label>
-        <input id="toggle-6" type="checkbox" role="switch">
+        <input id="toggle-6" type="checkbox" role="switch" class="indeterminate">
       </div>
     </fieldset>
   </div>
 
-
-  ~~~ html
-  <div class="f-switch">
-    <fieldset class="f-col">
-      <legend>Button toggles</legend>
-      <button type="button" aria-pressed="false">
-        Toggle me
-      </button>
-      <button type="button" aria-pressed="true">
-        But not me
-      </button>
-    </fieldset>
-    <fieldset class="f-col">
-      <legend>Button toggles, flipped</legend>
-      <button type="button" aria-pressed="false" onclick="this.ariaPressed = this.ariaPressed != 'true'">
-        Toggle me
-      </button>
-      <button type="button" aria-pressed="true" onclick="this.ariaPressed = this.ariaPressed != 'true'">
-        But not me
-      </button>
-    </fieldset>
-  </div>
-  ~~~
-
-  <div class="f-switch">
-    <fieldset class="f-col">
-      <legend>Button toggles</legend>
-      <button type="button" aria-pressed="false">
-        Toggle me
-      </button>
-      <button type="button" aria-pressed="true">
-        But not me
-      </button>
-    </fieldset>
-    <fieldset class="f-col">
-      <legend>Button toggles, flipped</legend>
-      <button type="button" aria-pressed="false" onclick="this.ariaPressed = this.ariaPressed != 'true'">
-        Toggle me
-      </button>
-      <button type="button" aria-pressed="true" onclick="this.ariaPressed = this.ariaPressed != 'true'">
-        But not me
-      </button>
-    </fieldset>
-  </div>
-
-  <strong>TODO</strong>
-  <ul>
-  <li>RTL
-  <li>Indeterminate state
-  </ul>
-</figure>
\ No newline at end of file
+  <script>document.querySelectorAll('.indeterminate').forEach(el => {el.indeterminate = true;})</script>
+</figure>
-- 
cgit v1.2.3