Update control CSS vars (#42113)

* Update input vars to be control vars

* Update radio, check, and switch to use new control vars

* bump bundle

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 40a006a1c2a06f0c909da3219cfb9dfdd28ea24d..c781a9bb45f3ef9ba1a0a61acae688ca4137391f 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "40.75 kB"
+      "maxSize": "41.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",

diff --git a/scss/_root.scss b/scss/_root.scss
index 09101cdbbc94f16404bfa669b9a6b2813ab5296e..f8748bf69272414aca7cc2bfbcc561218916d185 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -102,8 +102,14 @@ $root-tokens: defaults(
     // scss-docs-end root-focus-variables
 
     // scss-docs-start root-form-variables
-    --input-bg: var(--bg-body),
-    --input-color: var(--fg-body),
+    --control-bg: var(--bg-body),
+    --control-fg: var(--fg-body),
+    --control-checked-bg: var(--primary-base),
+    --control-checked-border-color: var(--control-checked-bg),
+    --control-active-bg: var(--primary-base),
+    --control-active-border-color: var(--control-active-bg),
+    --control-disabled-bg: var(--bg-3),
+    --control-disabled-opacity: .65,
 
     --btn-input-min-height: 2.375rem,
     --btn-input-padding-y: .375rem,

diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss
index 3b86bf26c3cb012eaddaead811be9c13a607e4a5..0614af4aff1d978aca6201a52818a979b7ef9d81 100644 (file)
--- a/scss/forms/_check.scss
+++ b/scss/forms/_check.scss
@@ -17,14 +17,17 @@ $check-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $check-tokens: defaults(
   (
+    --check-size: 1rem,
     --check-bg: transparent,
     --check-border-color: var(--border-color),
-    --check-checked-bg: var(--primary-base),
-    --check-checked-border-color: var(--primary-base),
-    --check-indeterminate-bg: var(--primary-base),
-    --check-indeterminate-border-color: var(--primary-base),
-    --check-disabled-bg: var(--bg-3),
-    --check-disabled-opacity: .65,
+    --check-checked-bg: var(--control-checked-bg),
+    --check-checked-border-color: var(--control-checked-border-color),
+    --check-indeterminate-bg: var(--control-checked-bg),
+    --check-indeterminate-border-color: var(--control-checked-border-color),
+    --check-active-bg: var(--control-active-bg),
+    --check-active-border-color: var(--control-active-border-color),
+    --check-disabled-bg: var(--control-disabled-bg),
+    --check-disabled-opacity: var(--control-disabled-opacity),
   ),
   $check-tokens
 );
@@ -32,7 +35,7 @@ $check-tokens: defaults(
 // stylelint-enable custom-property-no-missing-var-function
 
 @layer forms {
-  b-checkgroup {
+  .checkgroup {
     display: flex;
     gap: var(--gap, .5rem);
     align-items: var(--align-items, start);
@@ -53,8 +56,8 @@ $check-tokens: defaults(
       flex-shrink: 0;
       grid-row-start: 1;
       grid-column-start: 1;
-      width: 1rem;
-      height: 1rem;
+      width: var(--check-size);
+      height: var(--check-size);
     }
 
     :where(input) {
@@ -63,7 +66,7 @@ $check-tokens: defaults(
       background-color: var(--theme-bg, var(--check-bg));
       border: 1px solid var(--theme-bg, var(--check-border-color));
       // stylelint-disable-next-line property-disallowed-list
-      border-radius: .25em;
+      border-radius: .3em;
     }
 
     :where(input:checked, input:indeterminate) {
@@ -78,7 +81,7 @@ $check-tokens: defaults(
     &:has(input:checked) .checked,
     &:has(input:indeterminate) .indeterminate {
       display: block;
-      color: var(--primary-contrast);
+      color: var(--theme-contrast, var(--primary-contrast));
       stroke: currentcolor;
     }
 
@@ -86,7 +89,7 @@ $check-tokens: defaults(
       --check-bg: var(--check-disabled-bg);
 
       ~ label {
-        color: var(--secondary-text);
+        color: var(--fg-3);
         cursor: default;
       }
     }

diff --git a/scss/forms/_chip-input.scss b/scss/forms/_chip-input.scss
index cc8371462689b33eb72d52ac2369cce1203d8d84..c53f084da79fa44ea570a87b0fdabe3c19ec937c 100644 (file)
--- a/scss/forms/_chip-input.scss
+++ b/scss/forms/_chip-input.scss
@@ -67,7 +67,7 @@ $chip-input-tokens: defaults(
       opacity: 1;
 
       > .chip {
-        opacity: .65;
+        opacity: var(--control-disabled-opacity);
 
         .chip-dismiss {
           pointer-events: none;

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 2ba5f23530a65fc0653925dce75f4fb2e80f2793..b562e3fc6682292d99ab734d868201b4e3bad8f2 100644 (file)
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -105,7 +105,7 @@ $form-floating-tokens: defaults(
         z-index: -1;
         height: var(--form-floating-label-height);
         content: "";
-        background-color: var(--input-bg);
+        background-color: var(--control-bg);
         @include border-radius(var(--btn-input-border-radius));
       }
     }

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 74696c36094331974220956a61601034da40bde6..5c73b380c18aa0150e116556098f7e32781c6ed6 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -24,8 +24,8 @@ $form-control-tokens: defaults(
     --control-padding-x: var(--btn-input-padding-x),
     --control-font-size: var(--btn-input-font-size),
     --control-line-height: var(--btn-input-line-height),
-    --control-color: var(--input-color),
-    --control-bg: var(--input-bg),
+    --control-color: var(--control-fg),
+    --control-bg: var(--control-bg),
     --control-border-width: var(--border-width),
     --control-border-color: var(--border-color),
     --control-border-radius: var(--border-radius),

diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss
index 52cbc9325e922d7cca9c7cda1f2172eb3b1bc948..403f5e462cb5d990b459c937ceb4e58869ea38c5 100644 (file)
--- a/scss/forms/_radio.scss
+++ b/scss/forms/_radio.scss
@@ -17,12 +17,13 @@ $radio-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $radio-tokens: defaults(
   (
+    --radio-size: 1rem,
     --radio-bg: transparent,
     --radio-border-color: var(--border-color),
-    --radio-checked-bg: var(--primary-base),
-    --radio-checked-border-color: var(--primary-base),
-    --radio-disabled-bg: var(--bg-3),
-    --radio-disabled-opacity: .65,
+    --radio-checked-bg: var(--control-checked-bg),
+    --radio-checked-border-color: var(--control-checked-border-color),
+    --radio-disabled-bg: var(--control-disabled-bg),
+    --radio-disabled-opacity: var(--control-disabled-opacity),
   ),
   $radio-tokens
 );
@@ -30,7 +31,7 @@ $radio-tokens: defaults(
 // stylelint-enable custom-property-no-missing-var-function
 
 @layer forms {
-  b-radiogroup {
+  .radiogroup {
     display: flex;
     gap: var(--gap, .5rem);
     align-items: var(--align-items, start);
@@ -45,8 +46,8 @@ $radio-tokens: defaults(
 
     position: relative;
     flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
+    width: var(--radio-size);
+    height: var(--radio-size);
     margin-block: .125rem;
     appearance: none;
     background-color: var(--theme-bg, var(--radio-bg));

diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss
index 683195012fd6c1313159faf284634b0903304065..cfd306d63eb7f643e6f88bdf44e225f91380b684 100644 (file)
--- a/scss/forms/_switch.scss
+++ b/scss/forms/_switch.scss
@@ -25,10 +25,10 @@ $switch-tokens: defaults(
     --switch-border-width: var(--border-width),
     --switch-border-color: var(--border-color),
     --switch-indicator-bg: var(--white),
-    --switch-checked-bg: var(--primary-base),
+    --switch-checked-bg: var(--control-checked-bg),
     --switch-checked-border-color: var(--switch-checked-bg),
     --switch-checked-indicator-bg: var(--white),
-    --switch-disabled-bg: var(--bg-3),
+    --switch-disabled-bg: var(--control-disabled-bg),
     --switch-disabled-indicator-bg: var(--fg-3),
   ),
   $switch-tokens
@@ -62,7 +62,7 @@ $switch-tokens: defaults(
       width: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2);
       height: calc(var(--switch-height) - calc(var(--switch-padding) * 2) - var(--switch-border-width) * 2);
       content: "";
-      background-color: var(--switch-indicator-bg);
+      background-color: var(--theme-contrast, var(--switch-indicator-bg));
       // stylelint-disable-next-line property-disallowed-list
       border-radius: 50%;
       box-shadow: 0 1px 2px rgba($black, .1);

diff --git a/site/src/components/shortcodes/StepperPlayground.astro b/site/src/components/shortcodes/StepperPlayground.astro
index e9b952af317474bb141d6467aaa984bdae6a2292..effb951a4059fd67a3a5211a28ef9b0f7e91dd3b 100644 (file)
--- a/site/src/components/shortcodes/StepperPlayground.astro
+++ b/site/src/components/shortcodes/StepperPlayground.astro
@@ -132,12 +132,12 @@ const stepCounts = [3, 4, 5, 6]
 
     <div class="vstack gap-1">
       <label class="form-label fw-semibold mb-0 user-select-none">&nbsp;</label>
-      <b-checkgroup class="py-2">
+      <div class="checkgroup py-2">
         <div class="switch">
           <input type="checkbox" value="" id="stepper-fullwidth" role="switch" switch>
         </div>
         <label for="stepper-fullwidth">Full width</label>
-      </b-checkgroup>
+      </div>
     </div>
   </div>
 </div>

diff --git a/site/src/content/docs/components/dropdown.mdx b/site/src/content/docs/components/dropdown.mdx
index af8ad428c9a799d28eac03b5bdef0a592c065cd7..d90616851b107e1d15175a32ecca93b542fd8ba4 100644 (file)
--- a/site/src/content/docs/components/dropdown.mdx
+++ b/site/src/content/docs/components/dropdown.mdx
@@ -273,16 +273,16 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
         <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
         <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
       </div>
-      <b-checkgroup>
+      <div class="checkgroup">
         <div class="check">
           <input type="checkbox" id="checkLabel" />
-          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+            <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 8 3 3 5-5'/>
+            <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/>
           </svg>
         </div>
         <label for="checkLabel">Example new checkbox</label>
-      </b-checkgroup>
+      </div>
       <div class="vstack gap-2">
         <button type="submit" class="btn-solid theme-primary">Sign in</button>
         <a class="btn-ghost theme-secondary" href="#">New around here? Sign up</a>

diff --git a/site/src/content/docs/forms/checkbox.mdx b/site/src/content/docs/forms/checkbox.mdx
index af1f9c7c5f37cde69fa664a90d6411ae2cbb3590..1fc561acfbf778ab6f25e4676da5ac25edf68ecc 100644 (file)
--- a/site/src/content/docs/forms/checkbox.mdx
+++ b/site/src/content/docs/forms/checkbox.mdx
@@ -6,13 +6,6 @@ toc: true
 
 import { getData } from '@libs/data'
 
-**Trialing new components with the following rules:**
-
-- New components are purely components, they don't assume layout of any kind.
-- New options for form layout:
-  - Use new form groups to lay out your forms: `.control-group`, `.check-group`, `.radio-group`.
-  - Use helpers to lay out your forms—`.hstack` and `.vstack`—with utilities.
-
 ## Basic checkbox
 
 All checkbox styling is contained to a wrapper class, `.check`. This does the following:
@@ -27,9 +20,9 @@ Checkbox layout and labels are handled with additional HTML and CSS.
 
 <Example code={`<div class="check">
     <input type="checkbox" id="check" checked />
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
     </svg>
   </div>`} />
 
@@ -39,87 +32,89 @@ Checkboxes can utilize the indeterminate pseudo class when manually set via Java
 
 <Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="check">
     <input type="checkbox" id="checkIndeterminate" />
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
     </svg>
   </div>`} />
 
 ## Label
 
-Wrap the `.check` in a `<b-checkgroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.
+Wrap the `.check` in a `.checkgroup` layout wrapper and add your label. This sets some basic flexbox styling.
 
 Consider margin utilities for additional spacing, and flex utilities for alignment.
 
-<Example code={`<b-checkgroup>
+<Example code={`<div class="checkgroup">
     <div class="check">
       <input type="checkbox" id="checkLabel" />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <label for="checkLabel">Example new checkbox</label>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## Theme colors
 
 Modify the appearance of checked checkboxes by adding the `.theme-{color}` class to the `.check` element. This will set the checked background and border color to the theme color.
 
-<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-checkgroup>
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<div class="checkgroup">
     <div class="check theme-${themeColor.name}">
       <input type="checkbox" id="check${themeColor.name}" checked />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <label for="check${themeColor.name}">Example ${themeColor.name} checkbox</label>
-  </b-checkgroup>`)} />
+  </div>`)} />
 
 ## Description
 
 With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
 
-<Example code={`<b-checkgroup>
+<Example code={`<div class="checkgroup">
     <div class="check">
       <input type="checkbox" id="checkDescription" />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <b-vstack>
       <label for="checkDescription">Example new checkbox</label>
       <small class="description">Supporting description for the above label.</small>
     </b-vstack>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
 
-<Example code={`<b-checkgroup>
+<Example code={`<div class="checkgroup">
     <div class="check">
       <input type="checkbox" id="checkDisabled" disabled />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <label for="checkDisabled">Example new checkbox</label>
-  </b-checkgroup>`} />
+  </div>`} />
+
+Applies to checked states, too.
 
-<Example code={`<b-checkgroup>
+<Example code={`<div class="checkgroup">
     <div class="check">
       <input type="checkbox" id="checkDisabledChecked" checked disabled />
-      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
-        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
-        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
       </svg>
     </div>
     <label for="checkDisabledChecked">Example new checkbox</label>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## CSS
 

diff --git a/site/src/content/docs/forms/radio.mdx b/site/src/content/docs/forms/radio.mdx
index 623800563a3ad060c37a45720ebc1fdadfd87a8a..90ea4ea319f9f70d1a5faeb7d892bc8a7d187db3 100644 (file)
--- a/site/src/content/docs/forms/radio.mdx
+++ b/site/src/content/docs/forms/radio.mdx
@@ -14,43 +14,43 @@ Similar to checkboxes, radios are styled with the `.radio` class. However, there
 
 ## Label
 
-Wrap the `.radio` in a `<b-radiogroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.
+Wrap the `.radio` in a `.radiogroup` layout wrapper and add your label. This sets some basic flexbox styling.
 
-<Example code={`<b-radiogroup>
+<Example code={`<div class="radiogroup">
     <input type="radio" id="radioLabel" class="radio" />
     <label for="radioLabel">Example new radio</label>
-  </b-radiogroup>`} />
+  </div>`} />
 
 ## Theme colors
 
 Modify the appearance of checked checkboxes by adding the `.theme-{color}` class to the `.radio` element. This will set the checked background and border color to the theme color.
 
-<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-radiogroup>
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<div class="radiogroup">
     <input type="radio" id="radio${themeColor.name}" class="radio theme-${themeColor.name}" checked />
     <label for="radio${themeColor.name}">Example ${themeColor.name} radio</label>
-  </b-radiogroup>`)} />
+  </div>`)} />
 
 ## Description
 
 With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
 
-<Example code={`<b-radiogroup>
+<Example code={`<div class="radiogroup">
     <input type="radio" id="radioLabelDescription" class="radio" />
     <b-vstack>
       <label for="radioLabelDescription">Example new radio</label>
       <small class="description">Supporting description for the above label.</small>
     </b-vstack>
-  </b-radiogroup>
+  </div>
   `} />
 
 ## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
 
-<Example code={`<b-radiogroup>
+<Example code={`<div class="radiogroup">
     <input type="radio" id="radioDisabled" class="radio" disabled />
     <label for="radioDisabled">Example new radio</label>
-  </b-radiogroup>
+  </div>
   `} />
 
 ## CSS

diff --git a/site/src/content/docs/forms/switch.mdx b/site/src/content/docs/forms/switch.mdx
index ffd8f5671fb7d92ccfa255aef3389bfd3ea5c255..b25000601a63d671b24740dc1d893ab3f3a3deaf 100644 (file)
--- a/site/src/content/docs/forms/switch.mdx
+++ b/site/src/content/docs/forms/switch.mdx
@@ -20,45 +20,45 @@ Switches also include the `switch` attribute for browsers that support it. This
 
 ## Label
 
-Wrap the `.switch` in a `<b-checkgroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling. Switches are checkboxes under the hood, so we reused the same custom element here.
+Wrap the `.switch` in a `.checkgroup` layout wrapper and add your label. This sets some basic flexbox styling. Switches are checkboxes under the hood, so we reuse the same layout class here.
 
 Consider margin utilities for additional spacing, and flex utilities for alignment, especially when using small or large switches.
 
-<Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
+<Example class="d-flex flex-column gap-3" code={`<div class="checkgroup">
     <div class="switch switch-sm mt-1">
       <input type="checkbox" value="" id="switchSmLabel" role="switch" switch>
     </div>
     <label for="switchSmLabel">Small switch</label>
-  </b-checkgroup>
+  </div>
 
-  <b-checkgroup>
+  <div class="checkgroup">
     <div class="switch">
       <input type="checkbox" value="" id="switchMdLabel" role="switch" switch>
     </div>
     <label for="switchMdLabel">Default switch</label>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## Theme colors
 
 Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.switch` element. This will set the checked background and border color to the theme color.
 
-<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => ` <b-checkgroup>
-    <div class="switch switch-sm mt-1 checked-${themeColor.name}">
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => ` <div class="checkgroup">
+    <div class="switch switch-sm mt-1 theme-${themeColor.name}">
       <input type="checkbox" value="" id="switch${themeColor.name}" role="switch" switch checked>
     </div>
     <label for="switch${themeColor.name}">Example ${themeColor.name} switch</label>
-  </b-checkgroup>`)} />
+  </div>`)} />
 
 ## Disabled
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
 
-<Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
+<Example class="d-flex flex-column gap-3" code={`<div class="checkgroup">
     <div class="switch">
       <input type="checkbox" value="" id="switchDisabledLabel" role="switch" switch disabled>
     </div>
     <label for="switchDisabledLabel">Disabled switch</label>
-  </b-checkgroup>`} />
+  </div>`} />
 
 ## Sizes
 

diff --git a/site/src/content/docs/getting-started/rtl.mdx b/site/src/content/docs/getting-started/rtl.mdx
index d81e5badc12a8cf0f37b830d2f0d3418b67b3446..61db735a711e073c35f19d17a15da14286542a6b 100644 (file)
--- a/site/src/content/docs/getting-started/rtl.mdx
+++ b/site/src/content/docs/getting-started/rtl.mdx
@@ -35,12 +35,12 @@ One line of changes to your HTML is all it takes to enable RTL. Bootstrap will t
 Toggle between LTR and RTL on this page to see Bootstrap's logical properties in action:
 
 <div class="bd-example">
-  <b-checkgroup>
+  <div class="checkgroup">
     <div class="switch">
       <input type="checkbox" value="" id="rtlSwitch" role="switch" switch />
     </div>
     <label for="rtlSwitch">Enable RTL mode</label>
-  </b-checkgroup>
+  </div>
 </div>
 
 <script>