From 91ac5cb1db5a1fd7a4c0e29ecbe09902c6950512 Mon Sep 17 00:00:00 2001
From: Brian Talbot <hi.talbs@gmail.com>
Date: Wed, 14 Oct 2026 21:59:03 -0400
Subject: [PATCH] stacking every segmented toggle into a grid on small screens

---
 tools/site/css/components.css | 38 +++++++++++++++++++++++++++++++++++
 tools/site/css/docs.css       | 15 --------------
 tools/site/css/landing.css    | 37 +---------------------------------
 tools/site/docs.html          |  2 +-
 tools/site/landing.html       |  8 ++++----
 5 files changed, 44 insertions(+), 56 deletions(-)

diff --git a/tools/site/css/components.css b/tools/site/css/components.css
index 92573ea..e2ba376 100644
--- a/tools/site/css/components.css
+++ b/tools/site/css/components.css
@@ -368,6 +368,44 @@
       block-size var(--wa-transition-slow) var(--ease-move),
       border-radius var(--wa-transition-slow) var(--ease-move);
   }
+  @media (width < 600px) {
+    .seg-grid {
+      inline-size: 100%;
+    }
+    .seg-grid::part(form-control-input) {
+      display: grid;
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .seg-grid > wa-radio {
+      grid-column: span 2;
+      justify-content: center;
+      white-space: nowrap;
+      border-radius: 0;
+      &:first-of-type {
+        border-start-start-radius: var(--wa-border-radius-m);
+      }
+      &:nth-of-type(3) {
+        border-start-end-radius: var(--wa-border-radius-m);
+      }
+      &:first-of-type:nth-last-of-type(-n + 3),
+      &:nth-of-type(4) {
+        border-end-start-radius: var(--wa-border-radius-m);
+      }
+      &:nth-of-type(4) {
+        margin-inline-start: 0;
+      }
+      &:nth-of-type(n + 4) {
+        margin-block-start: calc(-1 * var(--wa-form-control-border-width));
+      }
+      &:nth-of-type(4):nth-last-of-type(2),
+      &:nth-of-type(5):last-of-type {
+        grid-column: span 3;
+      }
+      &:last-of-type {
+        border-end-end-radius: var(--wa-border-radius-m);
+      }
+    }
+  }
   wa-switch::part(thumb) {
     transition:
       translate var(--wa-transition-slow) var(--ease-detent),
diff --git a/tools/site/css/docs.css b/tools/site/css/docs.css
index a14c089..45bd235 100644
--- a/tools/site/css/docs.css
+++ b/tools/site/css/docs.css
@@ -483,21 +483,6 @@
       flex-basis: 100%;
     }
   }
-  @container (width <= 23rem) {
-    .handoff-state {
-      inline-size: 100%;
-    }
-    .handoff-state::part(form-control-input) {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: var(--wa-space-2xs);
-    }
-    .handoff-state wa-radio {
-      justify-content: center;
-      margin: 0;
-      border-radius: var(--wa-form-control-border-radius);
-    }
-  }
   .label-cases {
     inline-size: 100%;
     border-collapse: collapse;
diff --git a/tools/site/css/landing.css b/tools/site/css/landing.css
index b06d635..8804fec 100644
--- a/tools/site/css/landing.css
+++ b/tools/site/css/landing.css
@@ -58,7 +58,7 @@
       align-items: start;
     }
   }
-  .builder-controls :where(wa-radio-group)::part(form-control-input) {
+  .builder-controls :where(wa-radio-group:not(.seg-grid))::part(form-control-input) {
     display: flex;
     flex-wrap: nowrap;
   }
@@ -67,31 +67,6 @@
     justify-content: center;
     white-space: nowrap;
   }
-  @media (width < 600px) {
-    .builder-tell::part(form-control-input) {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .builder-tell wa-radio {
-      border-radius: 0;
-      &:nth-of-type(1) {
-        border-start-start-radius: var(--wa-border-radius-m);
-      }
-      &:nth-of-type(3) {
-        border-start-end-radius: var(--wa-border-radius-m);
-      }
-      &:nth-of-type(4) {
-        margin-inline-start: 0;
-        border-end-start-radius: var(--wa-border-radius-m);
-      }
-      &:nth-of-type(n + 4) {
-        margin-block-start: calc(-1 * var(--wa-form-control-border-width));
-      }
-      &:nth-of-type(6) {
-        border-end-end-radius: var(--wa-border-radius-m);
-      }
-    }
-  }
   .steps pre,
   .color-body pre,
   .play-copy pre {
@@ -414,16 +389,6 @@
     align-items: flex-start;
     gap: var(--wa-space-2xs);
   }
-  @media (width < 600px) {
-    :is(.wild-state, .builder-state)::part(form-control-input) {
-      display: grid;
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-    :is(.wild-state, .builder-state) wa-radio {
-      justify-content: center;
-      padding-inline: var(--wa-space-2xs);
-    }
-  }
   .palette-tabs::part(form-control-input) {
     display: flex;
     flex-wrap: wrap;
diff --git a/tools/site/docs.html b/tools/site/docs.html
index e4079aa..4495a5d 100644
--- a/tools/site/docs.html
+++ b/tools/site/docs.html
@@ -1846,7 +1846,7 @@ <h3 id="handoffs">Handoffs</h3>
             <span>Switch mid-move and watch the right one.</span>
             <wa-radio-group
               id="handoff-state"
-              class="handoff-state wa-visually-hidden-label"
+              class="seg-grid wa-visually-hidden-label"
               label="State for both tells"
               orientation="horizontal"
               size="s"
diff --git a/tools/site/landing.html b/tools/site/landing.html
index 0fa2bdf..d6ce35e 100644
--- a/tools/site/landing.html
+++ b/tools/site/landing.html
@@ -464,7 +464,7 @@ <h3 class="subhead">Add Some Play</h3>
         </div>
         <wa-radio-group
           id="wild-state"
-          class="wild-state wa-visually-hidden-label"
+          class="seg-grid wa-visually-hidden-label"
           label="State for every example"
           orientation="horizontal"
           size="s"
@@ -502,7 +502,7 @@ <h3 class="subhead">Add Some Play</h3>
             <h3 class="subhead">Install</h3>
             <wa-radio-group
               id="b-method"
-              class="wa-visually-hidden-label"
+              class="seg-grid wa-visually-hidden-label"
               label="Install with"
               orientation="horizontal"
               size="s"
@@ -536,7 +536,7 @@ <h3 class="subhead">Drop One In</h3>
           <div class="step-body builder">
             <div class="builder-controls wa-stack wa-gap-l">
               <wa-radio-group
-                class="builder-tell"
+                class="seg-grid"
                 id="b-tell"
                 label="Tell"
                 orientation="horizontal"
@@ -599,7 +599,7 @@ <h3 class="subhead">Drop One In</h3>
                 </wa-random-content>
               </div>
               <wa-radio-group
-                class="builder-state"
+                class="seg-grid"
                 id="b-state"
                 label="State"
                 orientation="horizontal"