diff --git a/CHANGELOG.md b/CHANGELOG.md
index f347ba1a..3845fd7b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,8 @@
 - [breaking] Rebuild Assembly's CSS pipeline on [UnoCSS](https://unocss.dev/). Class names and `buildUserAssets` stay compatible; the generated stylesheet's formatting, comments, and source maps may differ. Node.js 24+ is required.
 - [add] Export `presetAssembly()` for on-demand UnoCSS builds that keep Assembly class names. Pass `{ safelist: true }` only when you want the full prebuilt utility set.
 - [add] `examples/jit` — a sample app that generates only the utilities used in its markup (no reset or component preflight).
+- [style change] Toggle groups are restyled as segmented controls. `toggle` is now 24px tall.
+- [add] `toggle--l` (36px).
 - [internal] Assembly utilities are UnoCSS rules in `src/preset/`. Reset and component CSS live in `src/preset/base.css`. The package build is `src/build-*.js`. The documentation site is VitePress under `docs/`.
 
 ## 1.16.0
diff --git a/docs/.vitepress/theme/catalog/Toggles.vue b/docs/.vitepress/theme/catalog/Toggles.vue
index 61ad2038..451656da 100644
--- a/docs/.vitepress/theme/catalog/Toggles.vue
+++ b/docs/.vitepress/theme/catalog/Toggles.vue
@@ -9,19 +9,18 @@ const colors = [null].concat(formColors.filter(color => !isLight(color)));
 const lightenColors = formColors.filter(isLight);
 const animals = ['cow', 'horse', 'pig'];
 
-function toggleClass(color, activeColor) {
+function toggleClass(color, activeColor, size) {
   return [
     'toggle',
     color ? `toggle--${color}` : '',
-    activeColor ? `toggle--active-${activeColor}` : ''
+    activeColor ? `toggle--active-${activeColor}` : '',
+    size ? `toggle--${size}` : ''
   ]
     .filter(Boolean)
     .join(' ');
 }
 
-function groupClass(small) {
-  return small ? 'mb12 mr12 toggle-group toggle-group--s txt-s' : 'mb12 mr12 toggle-group';
-}
+const groupClass = 'mb12 mr12 toggle-group';
 
 function groupName(prefix, color, extra) {
   return `${prefix}-${color || 'default'}-${extra || 'on'}`;
@@ -41,7 +40,7 @@ function groupName(prefix, color, extra) {
         <div
           v-for="color in colors"
           :key="`a-${active}-${color}`"
-          :class="groupClass(false)"
+          :class="groupClass"
         >
           <label v-for="(label, index) in animals" :key="label" class="toggle-container">
             <input
@@ -57,7 +56,7 @@ function groupName(prefix, color, extra) {
     </div>
     <div class="mb12 txt-bold color-darken50 txt-uppercase txt-s">Disabled</div>
     <div class="mb24">
-      <div v-for="color in colors" :key="`d-${color}`" :class="groupClass(false)">
+      <div v-for="color in colors" :key="`d-${color}`" :class="groupClass">
         <label v-for="(label, index) in animals" :key="label" class="toggle-container">
           <input
             disabled
@@ -69,10 +68,22 @@ function groupName(prefix, color, extra) {
           <div :class="toggleClass(color)">{{ label }}</div>
         </label>
       </div>
+      <div :class="groupClass">
+        <label v-for="(label, index) in animals" :key="label" class="toggle-container">
+          <input
+            disabled
+            :name="groupName('disabled', 'active', 'blue')"
+            :value="label"
+            :checked="index === 1"
+            type="radio"
+          />
+          <div :class="toggleClass(null, 'blue')">{{ label }}</div>
+        </label>
+      </div>
     </div>
     <div class="mb12 txt-bold color-darken50 txt-uppercase txt-s">Small</div>
     <div class="mb24">
-      <div v-for="color in colors" :key="`s-${color}`" :class="groupClass(true)">
+      <div v-for="color in colors" :key="`s-${color}`" :class="groupClass">
         <label v-for="(label, index) in animals" :key="label" class="toggle-container">
           <input
             :name="groupName('small', color)"
@@ -80,13 +91,27 @@ function groupName(prefix, color, extra) {
             :checked="index === 1"
             type="radio"
           />
-          <div :class="toggleClass(color)">{{ label }}</div>
+          <div :class="toggleClass(color, null, 's')">{{ label }}</div>
+        </label>
+      </div>
+    </div>
+    <div class="mb12 txt-bold color-darken50 txt-uppercase txt-s">Large</div>
+    <div class="mb24">
+      <div v-for="color in colors" :key="`lg-${color}`" :class="groupClass">
+        <label v-for="(label, index) in animals" :key="label" class="toggle-container">
+          <input
+            :name="groupName('large', color)"
+            :value="label"
+            :checked="index === 1"
+            type="radio"
+          />
+          <div :class="toggleClass(color, null, 'l')">{{ label }}</div>
         </label>
       </div>
     </div>
     <div class="mb12 txt-bold color-darken50 txt-uppercase txt-s">Light variations</div>
     <div class="bg-gray round px12 py12 mt12">
-      <div v-for="color in lightenColors" :key="`l-${color}`" :class="groupClass(false)">
+      <div v-for="color in lightenColors" :key="`l-${color}`" :class="groupClass">
         <label v-for="(label, index) in animals" :key="label" class="toggle-container">
           <input
             :name="groupName('light', color)"
@@ -102,7 +127,7 @@ function groupName(prefix, color, extra) {
       Disabled and light
     </div>
     <div class="bg-gray round px12 py12 mt12">
-      <div v-for="color in lightenColors" :key="`ld-${color}`" :class="groupClass(false)">
+      <div v-for="color in lightenColors" :key="`ld-${color}`" :class="groupClass">
         <label v-for="(label, index) in animals" :key="label" class="toggle-container">
           <input
             disabled
diff --git a/docs/documentation/forms.md b/docs/documentation/forms.md
index 49f802a7..4b6c5797 100644
--- a/docs/documentation/forms.md
+++ b/docs/documentation/forms.md
@@ -393,10 +393,9 @@ The toggle group component styles a set of `<input type=radio'>` elements. The m
 .toggle
 ```
 
-Style a toggle group.
+Style a toggle group. Toggles within a group share an equal width, set by the widest toggle.
 Change the inactive toggle text color and the active toggle background color with a `toggle--{color}` modifier (`*-dark` colors are not available).
 Change the active label color with a `toggle--active-{color}` modifier (`*-dark` colors are not available).
-Change the border radiuses of toggle groups inside small text with `toggle-group--s` on the `toggle-container` element.
 
 ```example
 <div class='toggle-group mr18'>
@@ -413,12 +412,13 @@ Change the border radiuses of toggle groups inside small text with `toggle-group
 
 ```selectors
 .toggle--s
+.toggle--l
 ```
 
-Make a toggle small.
+Change the toggle height. `toggle--s` is 18px tall, the default `toggle` is 24px to match `input--s`, and `toggle--l` is 36px to match `input`.
 
 ```example
-<div class='toggle-group'>
+<div class='toggle-group mr18'>
   <label class='toggle-container'>
     <input checked name='toggle-small' type='radio' />
     <div class='toggle toggle--s'>mouse</div>
@@ -428,6 +428,16 @@ Make a toggle small.
     <div class='toggle toggle--s'>cricket</div>
   </label>
 </div>
+<div class='toggle-group'>
+  <label class='toggle-container'>
+    <input checked name='toggle-large' type='radio' />
+    <div class='toggle toggle--l'>horse</div>
+  </label>
+  <label class='toggle-container'>
+    <input name='toggle-large' type='radio' />
+    <div class='toggle toggle--l'>ox</div>
+  </label>
+</div>
 ```
 
 ```selectors
diff --git a/src/preset/base.css b/src/preset/base.css
index a8149fa7..83faa560 100644
--- a/src/preset/base.css
+++ b/src/preset/base.css
@@ -800,17 +800,15 @@ input:checked + .switch {
   background-color: var(--gray);
 }
 input:checked + .toggle {
-  background: var(--gray);
+  background: var(--gray-deep);
   color: var(--white);
 }
 input:disabled + .toggle {
   pointer-events: none;
   color: var(--darken25);
-  border-color: var(--transparent);
 }
 input:checked:disabled + .toggle {
   background-color: var(--disabled25);
-  color: var(--darken25);
 }
 body,
 input,
diff --git a/src/preset/colors.js b/src/preset/colors.js
index a505500b..7b947ebe 100644
--- a/src/preset/colors.js
+++ b/src/preset/colors.js
@@ -110,12 +110,30 @@ function colorRules(config) {
       [s => s, { color: `var(--${color})` }],
       [s => `input:checked + ${s}`, { background: `var(--${color})` }]
     ]);
+    if (color === 'white' || color.startsWith('lighten')) {
+      append(`toggle--${color}`, [
+        [
+          s => `.toggle-group:has(${s})`,
+          { 'background-color': 'var(--lighten10)' }
+        ],
+        [s => `input:checked + ${s}`, { color: 'var(--gray-dark)' }],
+        // `.toggle` outranks the checked color above for checked + disabled.
+        [s => `input:disabled + .toggle${s}`, { color: 'var(--lighten25)' }]
+      ]);
+    } else if (color.startsWith('darken')) {
+      append(`toggle--${color}`, [
+        [
+          s => `.toggle-group:has(${s})`,
+          { 'background-color': 'var(--darken5)' }
+        ]
+      ]);
+    }
   });
 
   colorsFor(resolved, 'toggleActive').forEach(color => {
     if (isNotAccessibleForForms(color)) return;
     append(`toggle--active-${color}`, [
-      [s => `input:checked + ${s}`, { color: `var(--${color})` }]
+      [s => `input:checked:enabled + ${s}`, { color: `var(--${color})` }]
     ]);
   });
 
diff --git a/src/preset/utilities.js b/src/preset/utilities.js
index 8368a0e3..265730e5 100644
--- a/src/preset/utilities.js
+++ b/src/preset/utilities.js
@@ -149,18 +149,28 @@ const UTILITY_RULES = [
   ['switch--l', { width: '40px', height: '24px', top: '0' }],
   [
     'toggle-group',
-    { display: 'inline-flex', 'text-align': 'center', 'border-radius': '18px' }
+    {
+      display: 'inline-grid',
+      'grid-auto-flow': 'column',
+      'grid-auto-columns': '1fr',
+      'background-color': 'var(--gray-faint)',
+      'border-radius': 'var(--border-radius)'
+    }
   ],
-  ['toggle-container', { 'max-width': '100%' }],
   [
     'toggle',
     {
-      'flex-shrink': '0',
+      display: 'flex',
+      'align-items': 'center',
+      'justify-content': 'center',
+      height: '24px',
+      padding: '0 18px',
       cursor: 'pointer',
-      color: 'var(--gray)',
+      color: 'var(--gray-deep)',
       'font-size': 'var(--font-size-s)',
-      padding: '3px 18px',
-      'border-radius': '15px',
+      'line-height': 'var(--line-height-s)',
+      'white-space': 'nowrap',
+      'border-radius': 'var(--border-radius)',
       'background-color': 'var(--transparent)',
       transition:
         'color var(--transition),\n    background-color var(--transition)'
@@ -169,9 +179,19 @@ const UTILITY_RULES = [
   [
     'toggle--s',
     {
+      height: '18px',
+      padding: '0 12px',
       'font-size': 'var(--font-size-xs)',
-      'line-height': 'var(--line-height-s)',
-      padding: '0 12px'
+      'line-height': 'var(--line-height-xs)'
+    }
+  ],
+  [
+    'toggle--l',
+    {
+      height: '36px',
+      padding: '0 24px',
+      'font-size': 'var(--font-size-m)',
+      'line-height': 'var(--line-height-m)'
     }
   ],
   ['txt-mono', { 'font-family': 'var(--font-stack-mono)', 'font-size': '90%' }],
diff --git a/test/__snapshots__/build-css.jest.js.snap b/test/__snapshots__/build-css.jest.js.snap
index ad4808d1..65c1fcc2 100644
--- a/test/__snapshots__/build-css.jest.js.snap
+++ b/test/__snapshots__/build-css.jest.js.snap
@@ -792,17 +792,15 @@ input:checked + .switch{
   background-color:#757D82;
 }
 input:checked + .toggle{
-  background:#757D82;
+  background:#4D5255;
   color:#fff;
 }
 input:disabled + .toggle{
   pointer-events:none;
   color:rgba(26, 34, 36, 0.25);
-  border-color:transparent;
 }
 input:checked:disabled + .toggle{
   background-color:rgba(158, 163, 167, 0.25);
-  color:rgba(26, 34, 36, 0.25);
 }
 body,
 input,
@@ -1179,10 +1177,10 @@ textarea{
 .radio{border-radius:50%;color:#757D82;border-color:currentColor;}
 .switch{cursor:pointer;top:3px;flex-shrink:0;position:relative;width:30px;height:18px;border-radius:9999px;border-width:1px;border-style:solid;border-color:currentColor;color:#757D82;transition:color 0.125s, background-color 0.125s, border-color 0.125s;}
 .switch--l{width:40px;height:24px;top:0;}
-.toggle-group{display:inline-flex;text-align:center;border-radius:18px;}
-.toggle-container{max-width:100%;}
-.toggle{flex-shrink:0;cursor:pointer;color:#757D82;font-size:12px;padding:3px 18px;border-radius:15px;background-color:transparent;transition:color 0.125s, background-color 0.125s;}
-.toggle--s{font-size:10px;line-height:18px;padding:0 12px;}
+.toggle-group{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background-color:#F7F8F8;border-radius:4px;}
+.toggle{display:flex;align-items:center;justify-content:center;height:24px;padding:0 18px;cursor:pointer;color:#4D5255;font-size:12px;line-height:18px;white-space:nowrap;border-radius:4px;background-color:transparent;transition:color 0.125s, background-color 0.125s;}
+.toggle--s{height:18px;padding:0 12px;font-size:10px;line-height:15px;}
+.toggle--l{height:36px;padding:0 24px;font-size:16px;line-height:24px;}
 .txt-mono{font-family:'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;font-size:90%;}
 .txt-bold{font-weight:bold !important;}
 .txt-h1{font-size:36px;line-height:45px;}
@@ -3469,7 +3467,7 @@ input:checked + .switch--gray{background-color:#757D82;}
 .select--gray,
 .switch--gray,
 .toggle--gray,
-input:checked + .toggle--active-gray{color:#757D82;}
+input:checked:enabled + .toggle--active-gray{color:#757D82;}
 .btn--stroke.btn--gray:hover, .btn--stroke.btn--gray.is-active,
 .link--gray:hover, .link--gray.is-active,
 .select--gray:focus,
@@ -3487,7 +3485,7 @@ input:checked + .switch--pink{background-color:#FA428F;}
 .select--pink,
 .switch--pink,
 .toggle--pink,
-input:checked + .toggle--active-pink{color:#FA428F;}
+input:checked:enabled + .toggle--active-pink{color:#FA428F;}
 .btn--stroke.btn--pink:hover, .btn--stroke.btn--pink.is-active,
 .link--pink:hover, .link--pink.is-active,
 .select--pink:focus,
@@ -3505,7 +3503,7 @@ input:checked + .switch--red{background-color:#EB3814;}
 .select--red,
 .switch--red,
 .toggle--red,
-input:checked + .toggle--active-red{color:#EB3814;}
+input:checked:enabled + .toggle--active-red{color:#EB3814;}
 .btn--stroke.btn--red:hover, .btn--stroke.btn--red.is-active,
 .link--red:hover, .link--red.is-active,
 .select--red:focus,
@@ -3523,7 +3521,7 @@ input:checked + .switch--orange{background-color:#E46707;}
 .select--orange,
 .switch--orange,
 .toggle--orange,
-input:checked + .toggle--active-orange{color:#E46707;}
+input:checked:enabled + .toggle--active-orange{color:#E46707;}
 .btn--stroke.btn--orange:hover, .btn--stroke.btn--orange.is-active,
 .link--orange:hover, .link--orange.is-active,
 .select--orange:focus,
@@ -3535,7 +3533,7 @@ input:checked + .toggle--active-orange{color:#E46707;}
 .select--yellow,
 .switch--yellow,
 .toggle--yellow,
-input:checked + .toggle--active-yellow{color:#F3E444;}
+input:checked:enabled + .toggle--active-yellow{color:#F3E444;}
 .btn--stroke.btn--yellow:hover, .btn--stroke.btn--yellow.is-active,
 .link--yellow:hover, .link--yellow.is-active,
 .select--yellow:focus,
@@ -3559,7 +3557,7 @@ input:checked + .switch--green{background-color:#2AA75C;}
 .select--green,
 .switch--green,
 .toggle--green,
-input:checked + .toggle--active-green{color:#2AA75C;}
+input:checked:enabled + .toggle--active-green{color:#2AA75C;}
 .btn--stroke.btn--green:hover, .btn--stroke.btn--green.is-active,
 .link--green:hover, .link--green.is-active,
 .select--green:focus,
@@ -3577,7 +3575,7 @@ input:checked + .switch--dot-blue::after{background-color:#3887BE;}
 .select--blue,
 .switch--blue,
 .toggle--blue,
-input:checked + .toggle--active-blue{color:#3887BE;}
+input:checked:enabled + .toggle--active-blue{color:#3887BE;}
 .btn--stroke.btn--blue:hover, .btn--stroke.btn--blue.is-active,
 .link--blue:hover, .link--blue.is-active,
 .select--blue:focus,
@@ -3595,7 +3593,7 @@ input:checked + .switch--purple{background-color:#9669D5;}
 .select--purple,
 .switch--purple,
 .toggle--purple,
-input:checked + .toggle--active-purple{color:#9669D5;}
+input:checked:enabled + .toggle--active-purple{color:#9669D5;}
 .btn--stroke.btn--purple:hover, .btn--stroke.btn--purple.is-active,
 .link--purple:hover, .link--purple.is-active,
 .select--purple:focus,
@@ -3619,7 +3617,7 @@ input:checked + .switch--dot-darken50::after{background-color:rgba(26, 34, 36, 0
 .select--darken25,
 .switch--darken25,
 .toggle--darken25,
-input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
+input:checked:enabled + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
 .btn--stroke.btn--darken25:hover, .btn--stroke.btn--darken25.is-active,
 .btn--stroke.btn--darken50,
 .link--darken25:hover, .link--darken25.is-active,
@@ -3630,7 +3628,7 @@ input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
 .select--darken50,
 .switch--darken50,
 .toggle--darken50,
-input:checked + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);}
+input:checked:enabled + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);}
 .btn--darken50:hover, .btn--darken50.is-active,
 .btn--darken75,
 input:checked + .checkbox--darken75,
@@ -3646,13 +3644,17 @@ input:checked + .switch--dot-darken75::after{background-color:rgba(26, 34, 36, 0
 .select--darken75,
 .switch--darken75,
 .toggle--darken75,
-input:checked + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);}
+input:checked:enabled + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);}
 .btn--darken75:hover, .btn--darken75.is-active{background-color:#000;}
 .btn--stroke.btn--darken75:hover, .btn--stroke.btn--darken75.is-active,
 .link--darken75:hover, .link--darken75.is-active,
 .select--darken75:focus,
 .select--darken75:hover{color:#000;}
-.btn--lighten10{background-color:rgba(255, 255, 255, 0.1);}
+.btn--lighten10,
+.toggle-group:has(.toggle--lighten25),
+.toggle-group:has(.toggle--lighten50),
+.toggle-group:has(.toggle--lighten75),
+.toggle-group:has(.toggle--white){background-color:rgba(255, 255, 255, 0.1);}
 .btn--lighten10:hover, .btn--lighten10.is-active,
 .btn--lighten25,
 input:checked + .checkbox--lighten25,
@@ -3669,7 +3671,11 @@ input:checked + .switch--lighten50{background-color:rgba(255, 255, 255, 0.5);}
 .select--lighten25,
 .switch--lighten25,
 .toggle--lighten25,
-input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);}
+input:checked:enabled + .toggle--active-lighten25,
+input:disabled + .toggle.toggle--lighten25,
+input:disabled + .toggle.toggle--lighten50,
+input:disabled + .toggle.toggle--lighten75,
+input:disabled + .toggle.toggle--white{color:rgba(255, 255, 255, 0.25);}
 .btn--stroke.btn--lighten25:hover, .btn--stroke.btn--lighten25.is-active,
 .btn--stroke.btn--lighten50,
 .link--lighten25:hover, .link--lighten25.is-active,
@@ -3680,7 +3686,7 @@ input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);}
 .select--lighten50,
 .switch--lighten50,
 .toggle--lighten50,
-input:checked + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);}
+input:checked:enabled + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);}
 .btn--lighten50:hover, .btn--lighten50.is-active,
 .btn--lighten75,
 .btn--white:hover, .btn--white.is-active,
@@ -3701,7 +3707,7 @@ input:checked + .switch--lighten75{background-color:rgba(255, 255, 255, 0.75);}
 .select--white:hover,
 .switch--lighten75,
 .toggle--lighten75,
-input:checked + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);}
+input:checked:enabled + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);}
 .btn--lighten75:hover, .btn--lighten75.is-active,
 .btn--white,
 input:checked + .checkbox--white,
@@ -3717,14 +3723,14 @@ input:checked + .switch--white{background-color:#fff;}
 .select--white,
 .switch--white,
 .toggle--white,
-input:checked + .toggle--active-white{color:#fff;}
+input:checked:enabled + .toggle--active-white{color:#fff;}
 .btn--stroke.btn--transparent,
 .link--transparent,
 .radio--transparent, input:checked + .radio--transparent,
 .select--transparent,
 .switch--transparent,
 .toggle--transparent,
-input:checked + .toggle--active-transparent{color:transparent;}
+input:checked:enabled + .toggle--active-transparent{color:transparent;}
 .btn--stroke.btn--transparent:hover, .btn--stroke.btn--transparent.is-active,
 .link--transparent:hover, .link--transparent.is-active,
 .select--transparent:focus,
@@ -3885,10 +3891,17 @@ input:checked + .toggle--yellow{background:#F3E444;}
 input:checked + .toggle--green{background:#2AA75C;}
 input:checked + .toggle--blue{background:#3887BE;}
 input:checked + .toggle--purple{background:#9669D5;}
+.toggle-group:has(.toggle--darken25),
+.toggle-group:has(.toggle--darken50),
+.toggle-group:has(.toggle--darken75){background-color:rgba(26, 34, 36, 0.05);}
 input:checked + .toggle--darken25{background:rgba(26, 34, 36, 0.25);}
 input:checked + .toggle--darken50{background:rgba(26, 34, 36, 0.5);}
 input:checked + .toggle--darken75{background:rgba(26, 34, 36, 0.75);}
 input:checked + .toggle--lighten25{background:rgba(255, 255, 255, 0.25);}
+input:checked + .toggle--lighten25,
+input:checked + .toggle--lighten50,
+input:checked + .toggle--lighten75,
+input:checked + .toggle--white{color:#1a2224;}
 input:checked + .toggle--lighten50{background:rgba(255, 255, 255, 0.5);}
 input:checked + .toggle--lighten75{background:rgba(255, 255, 255, 0.75);}
 input:checked + .toggle--white{background:#fff;}
@@ -5286,17 +5299,15 @@ input:checked + .switch{
   background-color:#757D82;
 }
 input:checked + .toggle{
-  background:#757D82;
+  background:#4D5255;
   color:#fff;
 }
 input:disabled + .toggle{
   pointer-events:none;
   color:rgba(26, 34, 36, 0.25);
-  border-color:transparent;
 }
 input:checked:disabled + .toggle{
   background-color:rgba(158, 163, 167, 0.25);
-  color:rgba(26, 34, 36, 0.25);
 }
 body,
 input,
@@ -5673,10 +5684,10 @@ textarea{
 .radio{border-radius:50%;color:#757D82;border-color:currentColor;}
 .switch{cursor:pointer;top:3px;flex-shrink:0;position:relative;width:30px;height:18px;border-radius:9999px;border-width:1px;border-style:solid;border-color:currentColor;color:#757D82;transition:color 0.125s, background-color 0.125s, border-color 0.125s;}
 .switch--l{width:40px;height:24px;top:0;}
-.toggle-group{display:inline-flex;text-align:center;border-radius:18px;}
-.toggle-container{max-width:100%;}
-.toggle{flex-shrink:0;cursor:pointer;color:#757D82;font-size:12px;padding:3px 18px;border-radius:15px;background-color:transparent;transition:color 0.125s, background-color 0.125s;}
-.toggle--s{font-size:10px;line-height:18px;padding:0 12px;}
+.toggle-group{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background-color:#F7F8F8;border-radius:4px;}
+.toggle{display:flex;align-items:center;justify-content:center;height:24px;padding:0 18px;cursor:pointer;color:#4D5255;font-size:12px;line-height:18px;white-space:nowrap;border-radius:4px;background-color:transparent;transition:color 0.125s, background-color 0.125s;}
+.toggle--s{height:18px;padding:0 12px;font-size:10px;line-height:15px;}
+.toggle--l{height:36px;padding:0 24px;font-size:16px;line-height:24px;}
 .txt-mono{font-family:'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;font-size:90%;}
 .txt-bold{font-weight:bold !important;}
 .txt-h1{font-size:36px;line-height:45px;}
@@ -7964,7 +7975,7 @@ input:checked + .switch--gray{background-color:#757D82;}
 .select--gray,
 .switch--gray,
 .toggle--gray,
-input:checked + .toggle--active-gray{color:#757D82;}
+input:checked:enabled + .toggle--active-gray{color:#757D82;}
 .btn--stroke.btn--gray:hover, .btn--stroke.btn--gray.is-active,
 .link--gray:hover, .link--gray.is-active,
 .select--gray:focus,
@@ -7983,7 +7994,7 @@ input:checked + .switch--pink{background-color:#FA428F;}
 .select--pink,
 .switch--pink,
 .toggle--pink,
-input:checked + .toggle--active-pink{color:#FA428F;}
+input:checked:enabled + .toggle--active-pink{color:#FA428F;}
 .btn--stroke.btn--pink:hover, .btn--stroke.btn--pink.is-active,
 .link--pink:hover, .link--pink.is-active,
 .select--pink:focus,
@@ -8002,7 +8013,7 @@ input:checked + .switch--red{background-color:#EB3814;}
 .select--red,
 .switch--red,
 .toggle--red,
-input:checked + .toggle--active-red{color:#EB3814;}
+input:checked:enabled + .toggle--active-red{color:#EB3814;}
 .btn--stroke.btn--red:hover, .btn--stroke.btn--red.is-active,
 .link--red:hover, .link--red.is-active,
 .select--red:focus,
@@ -8021,7 +8032,7 @@ input:checked + .switch--orange{background-color:#E46707;}
 .select--orange,
 .switch--orange,
 .toggle--orange,
-input:checked + .toggle--active-orange{color:#E46707;}
+input:checked:enabled + .toggle--active-orange{color:#E46707;}
 .btn--stroke.btn--orange:hover, .btn--stroke.btn--orange.is-active,
 .link--orange:hover, .link--orange.is-active,
 .select--orange:focus,
@@ -8034,7 +8045,7 @@ input:checked + .toggle--active-orange{color:#E46707;}
 .select--yellow,
 .switch--yellow,
 .toggle--yellow,
-input:checked + .toggle--active-yellow{color:#F3E444;}
+input:checked:enabled + .toggle--active-yellow{color:#F3E444;}
 .btn--stroke.btn--yellow:hover, .btn--stroke.btn--yellow.is-active,
 .link--yellow:hover, .link--yellow.is-active,
 .select--yellow:focus,
@@ -8059,7 +8070,7 @@ input:checked + .switch--green{background-color:#2AA75C;}
 .select--green,
 .switch--green,
 .toggle--green,
-input:checked + .toggle--active-green{color:#2AA75C;}
+input:checked:enabled + .toggle--active-green{color:#2AA75C;}
 .btn--stroke.btn--green:hover, .btn--stroke.btn--green.is-active,
 .link--green:hover, .link--green.is-active,
 .select--green:focus,
@@ -8078,7 +8089,7 @@ input:checked + .switch--dot-blue::after{background-color:#0F71FA;}
 .select--blue,
 .switch--blue,
 .toggle--blue,
-input:checked + .toggle--active-blue{color:#0F71FA;}
+input:checked:enabled + .toggle--active-blue{color:#0F71FA;}
 .btn--stroke.btn--blue:hover, .btn--stroke.btn--blue.is-active,
 .link--blue:hover, .link--blue.is-active,
 .select--blue:focus,
@@ -8097,7 +8108,7 @@ input:checked + .switch--purple{background-color:#9669D5;}
 .select--purple,
 .switch--purple,
 .toggle--purple,
-input:checked + .toggle--active-purple{color:#9669D5;}
+input:checked:enabled + .toggle--active-purple{color:#9669D5;}
 .btn--stroke.btn--purple:hover, .btn--stroke.btn--purple.is-active,
 .link--purple:hover, .link--purple.is-active,
 .select--purple:focus,
@@ -8122,7 +8133,7 @@ input:checked + .switch--dot-darken50::after{background-color:rgba(26, 34, 36, 0
 .select--darken25,
 .switch--darken25,
 .toggle--darken25,
-input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
+input:checked:enabled + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
 .btn--stroke.btn--darken25:hover, .btn--stroke.btn--darken25.is-active,
 .btn--stroke.btn--darken50,
 .link--darken25:hover, .link--darken25.is-active,
@@ -8134,7 +8145,7 @@ input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
 .select--darken50,
 .switch--darken50,
 .toggle--darken50,
-input:checked + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);}
+input:checked:enabled + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);}
 .btn--darken50:hover, .btn--darken50.is-active,
 .btn--darken75,
 input:checked + .checkbox--darken75,
@@ -8151,13 +8162,17 @@ input:checked + .switch--dot-darken75::after{background-color:rgba(26, 34, 36, 0
 .select--darken75,
 .switch--darken75,
 .toggle--darken75,
-input:checked + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);}
+input:checked:enabled + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);}
 .btn--darken75:hover, .btn--darken75.is-active{background-color:#000;}
 .btn--stroke.btn--darken75:hover, .btn--stroke.btn--darken75.is-active,
 .link--darken75:hover, .link--darken75.is-active,
 .select--darken75:focus,
 .select--darken75:hover{color:#000;}
-.btn--lighten10{background-color:rgba(255, 255, 255, 0.1);}
+.btn--lighten10,
+.toggle-group:has(.toggle--lighten25),
+.toggle-group:has(.toggle--lighten50),
+.toggle-group:has(.toggle--lighten75),
+.toggle-group:has(.toggle--white){background-color:rgba(255, 255, 255, 0.1);}
 .btn--lighten10:hover, .btn--lighten10.is-active,
 .btn--lighten25,
 input:checked + .checkbox--lighten25,
@@ -8175,7 +8190,11 @@ input:checked + .switch--lighten50{background-color:rgba(255, 255, 255, 0.5);}
 .select--lighten25,
 .switch--lighten25,
 .toggle--lighten25,
-input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);}
+input:checked:enabled + .toggle--active-lighten25,
+input:disabled + .toggle.toggle--lighten25,
+input:disabled + .toggle.toggle--lighten50,
+input:disabled + .toggle.toggle--lighten75,
+input:disabled + .toggle.toggle--white{color:rgba(255, 255, 255, 0.25);}
 .btn--stroke.btn--lighten25:hover, .btn--stroke.btn--lighten25.is-active,
 .btn--stroke.btn--lighten50,
 .link--lighten25:hover, .link--lighten25.is-active,
@@ -8187,7 +8206,7 @@ input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);}
 .select--lighten50,
 .switch--lighten50,
 .toggle--lighten50,
-input:checked + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);}
+input:checked:enabled + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);}
 .btn--lighten50:hover, .btn--lighten50.is-active,
 .btn--lighten75,
 .btn--white:hover, .btn--white.is-active,
@@ -8209,7 +8228,7 @@ input:checked + .switch--lighten75{background-color:rgba(255, 255, 255, 0.75);}
 .select--white:hover,
 .switch--lighten75,
 .toggle--lighten75,
-input:checked + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);}
+input:checked:enabled + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);}
 .btn--lighten75:hover, .btn--lighten75.is-active,
 .btn--white,
 input:checked + .checkbox--white,
@@ -8226,7 +8245,7 @@ input:checked + .switch--white{background-color:#fff;}
 .select--white,
 .switch--white,
 .toggle--white,
-input:checked + .toggle--active-white{color:#fff;}
+input:checked:enabled + .toggle--active-white{color:#fff;}
 .btn--stroke.btn--transparent,
 .link--transparent,
 .radio--transparent, input:checked + .radio--transparent,
@@ -8234,7 +8253,7 @@ input:checked + .toggle--active-white{color:#fff;}
 .select--transparent,
 .switch--transparent,
 .toggle--transparent,
-input:checked + .toggle--active-transparent{color:transparent;}
+input:checked:enabled + .toggle--active-transparent{color:transparent;}
 .btn--stroke.btn--transparent:hover, .btn--stroke.btn--transparent.is-active,
 .link--transparent:hover, .link--transparent.is-active,
 .select--transparent:focus,
@@ -8395,10 +8414,17 @@ input:checked + .toggle--yellow{background:#F3E444;}
 input:checked + .toggle--green{background:#2AA75C;}
 input:checked + .toggle--blue{background:#0F71FA;}
 input:checked + .toggle--purple{background:#9669D5;}
+.toggle-group:has(.toggle--darken25),
+.toggle-group:has(.toggle--darken50),
+.toggle-group:has(.toggle--darken75){background-color:rgba(26, 34, 36, 0.05);}
 input:checked + .toggle--darken25{background:rgba(26, 34, 36, 0.25);}
 input:checked + .toggle--darken50{background:rgba(26, 34, 36, 0.5);}
 input:checked + .toggle--darken75{background:rgba(26, 34, 36, 0.75);}
 input:checked + .toggle--lighten25{background:rgba(255, 255, 255, 0.25);}
+input:checked + .toggle--lighten25,
+input:checked + .toggle--lighten50,
+input:checked + .toggle--lighten75,
+input:checked + .toggle--white{color:#1a2224;}
 input:checked + .toggle--lighten50{background:rgba(255, 255, 255, 0.5);}
 input:checked + .toggle--lighten75{background:rgba(255, 255, 255, 0.75);}
 input:checked + .toggle--white{background:#fff;}