diff --git a/scss/bitstyles/atoms/badge/_index.scss b/scss/bitstyles/atoms/badge/_index.scss
index 0604b6826..84757ac91 100644
--- a/scss/bitstyles/atoms/badge/_index.scss
+++ b/scss/bitstyles/atoms/badge/_index.scss
@@ -13,19 +13,19 @@
 /* stylelint-disable scss/dollar-variable-default */
 
 /* prettier-ignore */
-$padding-horizontal-property: custom-property.get($items: ('badge', 'padding-horizontal'), $layer: 'atom');
+$padding-horizontal-property: custom-property.get($items: ('badge', 'padding-horizontal'));
 
 /* prettier-ignore */
-$padding-vertical-property: custom-property.get($items: ('badge', 'padding-vertical'),  $layer: 'atom');
+$padding-vertical-property: custom-property.get($items: ('badge', 'padding-vertical'));
 
 /* prettier-ignore */
-$gap-property: custom-property.get($items: ('badge', 'gap'), $layer: 'atom');
+$gap-property: custom-property.get($items: ('badge', 'gap'));
 
 /* prettier-ignore */
-$prepend-spacing-property: custom-property.get($items: ('badge', 'prepend', 'spacing'), $layer: 'atom');
+$prepend-spacing-property: custom-property.get($items: ('badge', 'prepend', 'spacing'));
 
 /* prettier-ignore */
-$shadow-property: custom-property.get($items: ('badge', 'shadow'), $layer: 'atom');
+$shadow-property: custom-property.get($items: ('badge', 'shadow'));
 /* stylelint-enable scss/dollar-variable-default */
 
 #{classname.get($classname-items: 'badge', $layer: 'atom')} {
diff --git a/scss/bitstyles/atoms/button/_index.scss b/scss/bitstyles/atoms/button/_index.scss
index b779d17ff..c09fef12b 100644
--- a/scss/bitstyles/atoms/button/_index.scss
+++ b/scss/bitstyles/atoms/button/_index.scss
@@ -6,12 +6,12 @@
 /* prettier-ignore */
 
 #{classname.get($classname-items: 'button', $layer: 'atom')} {
-  #{custom-property.get('button', 'border-top-right-radius')}: var(custom-property.get($items: ('button', 'border-radius')));
-  #{custom-property.get('button', 'border-bottom-right-radius')}: var(custom-property.get($items: ('button', 'border-radius')));
-  #{custom-property.get('button', 'border-bottom-left-radius')}: var(custom-property.get($items: ('button', 'border-radius')));
-  #{custom-property.get('button', 'border-top-left-radius')}: var(custom-property.get($items: ('button', 'border-radius')));
-  #{custom-property.get('button', 'transition')}: settings.$transition;
-  #{custom-property.get('button', 'justify-content')}: settings.$justify-content;
+  #{custom-property.get($items: ('button', 'border-top-right-radius'))}: var(custom-property.get($items: ('button', 'border-radius')));
+  #{custom-property.get($items: ('button', 'border-bottom-right-radius'))}: var(custom-property.get($items: ('button', 'border-radius')));
+  #{custom-property.get($items: ('button', 'border-bottom-left-radius'))}: var(custom-property.get($items: ('button', 'border-radius')));
+  #{custom-property.get($items: ('button', 'border-top-left-radius'))}: var(custom-property.get($items: ('button', 'border-radius')));
+  #{custom-property.get($items: ('button', 'transition'))}: settings.$transition;
+  #{custom-property.get($items: ('button', 'justify-content'))}: settings.$justify-content;
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -19,10 +19,10 @@
   justify-content: var(#{custom-property.get($items: ('button', 'justify-content'))});
   min-width: var(#{custom-property.get($items: ('button', 'min-width'))});
   max-width: 100%;
-  min-height: var(custom-property.get('button', 'min-height'));
+  min-height: var(custom-property.get($items: ('button', 'min-height')));
   padding:
-    calc(var(custom-property.get('button', 'padding-vertical')) - var(custom-property.get('button', 'border-width'), 0rem))
-    calc(var(custom-property.get('button','padding-horizontal')) - var(custom-property.get('button', 'border-width'), 0rem));
+    calc(var(custom-property.get($items: ('button', 'padding-vertical'))) - var(custom-property.get($items: ('button', 'border-width')), 0rem))
+    calc(var(custom-property.get($items: ('button','padding-horizontal'))) - var(custom-property.get($items: ('button', 'border-width')), 0rem));
   overflow: visible;
   transition: var(#{custom-property.get($items: ('button', 'transition'))});
   border-width: var(#{custom-property.get($items: ('button', 'border-width'))});
diff --git a/scss/bitstyles/base/forms/_settings.scss b/scss/bitstyles/base/forms/_settings.scss
index 42ae20e77..3020659b6 100644
--- a/scss/bitstyles/base/forms/_settings.scss
+++ b/scss/bitstyles/base/forms/_settings.scss
@@ -1,4 +1,4 @@
-@use '../../settings/typography';
+@use '../../design-tokens/typography';
 @use '../../tools/palette';
 @use '../../tools/size';
 
diff --git a/scss/bitstyles/base/forms/input-checkbox.stories.js b/scss/bitstyles/base/forms/input-checkbox.stories.js
index 280f221e5..b06778257 100644
--- a/scss/bitstyles/base/forms/input-checkbox.stories.js
+++ b/scss/bitstyles/base/forms/input-checkbox.stories.js
@@ -4,7 +4,7 @@ import Label from './Label';
 export default {
   title: 'Base/Forms/Input checkbox',
   component: Input,
-  subcomponents: [Label],
+  subcomponents: { Label },
   argTypes: {},
 };
 
diff --git a/scss/bitstyles/base/forms/input-radio.stories.js b/scss/bitstyles/base/forms/input-radio.stories.js
index 3d3d480f1..389de436e 100644
--- a/scss/bitstyles/base/forms/input-radio.stories.js
+++ b/scss/bitstyles/base/forms/input-radio.stories.js
@@ -4,7 +4,7 @@ import Label from './Label';
 export default {
   title: 'Base/Forms/Input radio',
   component: Input,
-  subcomponents: [Label],
+  subcomponents: { Label },
   argTypes: {},
 };
 
diff --git a/scss/bitstyles/base/forms/input-text.stories.js b/scss/bitstyles/base/forms/input-text.stories.js
index f575b3dee..4014b034d 100644
--- a/scss/bitstyles/base/forms/input-text.stories.js
+++ b/scss/bitstyles/base/forms/input-text.stories.js
@@ -4,7 +4,7 @@ import Label from './Label';
 export default {
   title: 'Base/Forms/Input text',
   component: Input,
-  subcomponents: [Label],
+  subcomponents: { Label },
   argTypes: {},
 };
 
diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
index 3572598bf..8bdd3dee0 100644
--- a/scss/bitstyles/base/input-text/_index.scss
+++ b/scss/bitstyles/base/input-text/_index.scss
@@ -45,8 +45,8 @@ textarea {
   #{custom-property.get($items: ('input-text', 'padding-vertical'))}: settings.$padding-vertical;
   #{custom-property.get($items: ('input-text', 'padding-horizontal'))}: settings.$padding-horizontal;
   #{custom-property.get($items: ('input-text', 'border-width'))}: settings.$border-width;
-  display: block;
-  width: 100%;
+  display: flex;
+  flex-grow: 1;
   padding:
       calc(var(#{custom-property.get($items: ('input-text', 'padding-vertical'))}) - var(#{custom-property.get($items: ('input-text', 'border-width'))}, 0rem))
       calc(var(#{custom-property.get($items: ('input-text','padding-horizontal'))}) - var(#{custom-property.get($items: ('input-text', 'border-width'))}, 0rem));
@@ -74,6 +74,7 @@ textarea {
   }
 
   &:focus-visible {
+    z-index: 3;
     outline: focus.$outline-color solid focus.$outline-width;
     outline-offset: focus.$outline-offset;
   }
diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
index 6afb36945..8c35a4ca7 100644
--- a/scss/bitstyles/base/select/_index.scss
+++ b/scss/bitstyles/base/select/_index.scss
@@ -4,6 +4,7 @@
 @use '../../design-tokens/focus';
 @use '../../tools/custom-property';
 
+/* prettier-ignore */
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
   (appearance: none) {
   /* stylelint-disable selector-max-type */
@@ -11,8 +12,11 @@
     #{custom-property.get($items: ('select', 'padding-vertical'))}: settings.$padding-vertical;
     #{custom-property.get($items: ('select', 'padding-horizontal'))}: settings.$padding-horizontal;
     #{custom-property.get($items: ('select', 'border-width'))}: settings.$border-width;
-    display: block;
-    width: 100%;
+    #{custom-property.get($items: ('select', 'border-top-right-radius'))}: settings.$border-radius;
+    #{custom-property.get($items: ('select', 'border-bottom-right-radius'))}: settings.$border-radius;
+    #{custom-property.get($items: ('select', 'border-bottom-left-radius'))}: settings.$border-radius;
+    #{custom-property.get($items: ('select', 'border-top-left-radius'))}: settings.$border-radius;
+    display: flex;
     padding:
       calc(var(#{custom-property.get($items: ('select', 'padding-vertical'))}) - var(#{custom-property.get($items: ('select', 'border-width'))}, 0rem))
       calc(var(#{custom-property.get($items: ('select','padding-horizontal'))}) - var(#{custom-property.get($items: ('select', 'border-width'))}, 0rem));
@@ -23,7 +27,11 @@
         animation.$transition-easing,
       border animation.$transition-duration animation.$transition-easing;
     border: settings.$border-width solid settings.$border-color;
-    border-radius: settings.$border-radius;
+    border-radius:
+      var(#{custom-property.get($items: ('select', 'border-top-left-radius'))})
+      var(#{custom-property.get($items: ('select', 'border-top-right-radius'))})
+      var(#{custom-property.get($items: ('select', 'border-bottom-right-radius'))})
+      var(#{custom-property.get($items: ('select', 'border-bottom-left-radius'))});
     outline-offset: 0;
     background-color: settings.$background-color;
     background-image: settings.$background-image;
@@ -32,6 +40,7 @@
     background-size: 1em;
     box-shadow: settings.$box-shadow;
     color: settings.$color;
+    font: settings.$font;
     font-weight: settings.$font-weight;
     text-overflow: ellipsis;
     cursor: pointer;
diff --git a/scss/bitstyles/base/select/_settings.scss b/scss/bitstyles/base/select/_settings.scss
index e6715de61..860c302bc 100644
--- a/scss/bitstyles/base/select/_settings.scss
+++ b/scss/bitstyles/base/select/_settings.scss
@@ -1,4 +1,4 @@
-@use '../../settings/typography';
+@use '../../design-tokens/typography';
 @use '../../tools/size';
 @use '../../tools/color';
 @use '../../tools/palette';
@@ -10,7 +10,8 @@ $padding-vertical: size.get('s2') !default;
 $padding-horizontal: size.get('l1') !default;
 $border-radius: size.get('s4') !default;
 $border-width: 0.1875rem !default;
-$font-weight: typography.$font-weight-normal !default;
+$font: inherit !default;
+$font-weight: typography.$font-weight-bold !default;
 
 //
 // Base appearance ////////////////////////////////////////
diff --git a/scss/bitstyles/settings/_focus.scss b/scss/bitstyles/design-tokens/_focus.scss
similarity index 100%
rename from scss/bitstyles/settings/_focus.scss
rename to scss/bitstyles/design-tokens/_focus.scss
diff --git a/scss/bitstyles/organisms/joined-ui/JoinedUI.js b/scss/bitstyles/organisms/joined-ui/JoinedUI.js
index 575cf2867..d525199cf 100644
--- a/scss/bitstyles/organisms/joined-ui/JoinedUI.js
+++ b/scss/bitstyles/organisms/joined-ui/JoinedUI.js
@@ -1,11 +1,6 @@
-export default ({ children }) => {
+export default ({ children, classname }) => {
   const list = document.createElement('ul');
-  list.classList.add(
-    'u-list-none',
-    'u-inline-flex',
-    'u-items-stretch',
-    'o-joined-ui'
-  );
+  list.classList.add('u-list-none', 'o-joined-ui', classname);
 
   children.forEach((child) => {
     const listItem = document.createElement('li');
diff --git a/scss/bitstyles/organisms/joined-ui/_index.scss b/scss/bitstyles/organisms/joined-ui/_index.scss
index 42331fae3..30856e463 100644
--- a/scss/bitstyles/organisms/joined-ui/_index.scss
+++ b/scss/bitstyles/organisms/joined-ui/_index.scss
@@ -23,9 +23,23 @@
   $input-text-border-width-name: custom-property.get($items: ('input-text', 'border', 'width'));
   $input-text-box-shadow-name: custom-property.get($items: ('input-text', 'box-shadow'));
 
+  /* Selects */
+  $select-border-top-left-radius-name: custom-property.get($items: ('select', 'border', 'top', 'left', 'radius'));
+  $select-border-top-right-radius-name: custom-property.get($items: ('select', 'border', 'top', 'right', 'radius'));
+  $select-border-bottom-right-radius-name: custom-property.get($items: ('select', 'border', 'bottom', 'right', 'radius'));
+  $select-border-bottom-left-radius-name: custom-property.get($items: ('select', 'border', 'bottom', 'left', 'radius'));
+  $select-border-width-name: custom-property.get($items: ('select', 'border', 'width'));
+  $select-box-shadow-name: custom-property.get($items: ('select', 'box-shadow'));
+
+  display: inline-flex;
+  align-items: stretch;
   border-radius: settings.$border-radius;
   box-shadow: settings.$box-shadow;
 
+  > * {
+    display: flex;
+  }
+
   > :first-child #{$button-classname},
   > #{$button-classname}:first-child {
     #{$button-box-shadow-name}: none;
@@ -42,6 +56,14 @@
     margin-right: calc(var(#{$input-text-border-width-name}) * -1);
   }
 
+  > :first-child select,
+  > select:first-child {
+    #{$select-box-shadow-name}: none;
+    #{$select-border-top-right-radius-name}: #{0};
+    #{$select-border-bottom-right-radius-name}: #{0};
+    margin-right: calc(var(#{$select-border-width-name}) * -1);
+  }
+
   > :last-child #{$button-classname},
   > #{$button-classname}:last-child {
     #{$button-box-shadow-name}: none;
@@ -58,6 +80,14 @@
     margin-right: 0;
   }
 
+  > :last-child select,
+  > select:last-child {
+    #{$select-box-shadow-name}: none;
+    #{$select-border-top-left-radius-name}: #{0};
+    #{$select-border-bottom-left-radius-name}: #{0};
+    margin-right: 0;
+  }
+
   > :not(:first-child):not(:last-child) #{$button-classname},
   > #{$button-classname}:not(:first-child):not(:last-child) {
     #{$button-border-top-left-radius-name}: #{0};
@@ -75,4 +105,13 @@
     #{$input-text-border-bottom-left-radius-name}: #{0};
     margin-right: calc(var(#{$input-text-border-width-name}) * -1);
   }
+
+  > :not(:first-child):not(:last-child) select,
+  > select:not(:first-child):not(:last-child) {
+    #{$select-border-top-left-radius-name}: #{0};
+    #{$select-border-top-right-radius-name}: #{0};
+    #{$select-border-bottom-right-radius-name}: #{0};
+    #{$select-border-bottom-left-radius-name}: #{0};
+    margin-right: calc(var(#{$select-border-width-name}) * -1);
+  }
 }
diff --git a/scss/bitstyles/ui/forms.stories.js b/scss/bitstyles/ui/forms.stories.js
new file mode 100644
index 000000000..2a462897e
--- /dev/null
+++ b/scss/bitstyles/ui/forms.stories.js
@@ -0,0 +1,106 @@
+import Input from '../base/forms/Input';
+import Label from '../base/forms/Label';
+import Select from '../base/forms/Select';
+import Button from '../atoms/button/Button';
+import JoinedUI from '../organisms/joined-ui/JoinedUI';
+import icons from '../../../assets/images/icons.svg';
+
+export default {
+  title: 'UI/Data/Forms',
+  subcomponents: { Input, Label, Select, Button, JoinedUI },
+};
+
+// ***** Default size, each shape & color ****************** //
+
+export const SearchFormWithButton = () => {
+  const form = document.createElement('form');
+  form.setAttribute('action', '');
+  form.setAttribute('role', 'search');
+  form.setAttribute('method', 'post');
+  form.append(Label({ for: 'text-search', children: ['Search users'] }));
+  form.append(
+    JoinedUI({
+      children: [
+        Input({
+          type: 'text',
+          placeholder: 'Username or email',
+        }),
+        Button({
+          colorVariant: ['outline'],
+          children: 'Search',
+          type: 'submit',
+        }),
+      ],
+    })
+  );
+  return form;
+};
+
+export const SearchFormWithIconButton = () => {
+  const form = document.createElement('form');
+  form.setAttribute('action', '');
+  form.setAttribute('role', 'search');
+  form.setAttribute('method', 'post');
+  form.append(Label({ for: 'text-search', children: ['Search users'] }));
+  form.append(
+    JoinedUI({
+      children: [
+        Input({
+          type: 'text',
+          placeholder: 'Username or email',
+        }),
+        Button({
+          colorVariant: ['outline'],
+          children: `<svg width="20" height="20" class="a-icon a-icon--m" aria-hidden="true" focusable="false"><use xlink:href="${icons}#icon-search"></use></svg><span class="u-sr-only">Search</span>`,
+          type: 'submit',
+        }),
+      ],
+    })
+  );
+  return form;
+};
+
+export const SearchFormWithSelectAndButton = () => {
+  const form = document.createElement('form');
+  form.setAttribute('action', '');
+  form.setAttribute('role', 'search');
+  form.setAttribute('method', 'post');
+  form.append(Label({ for: 'text-search', children: ['Search users'] }));
+  const wrapper = document.createElement('div');
+  wrapper.setAttribute('class', 'u-flex u-gap-s5');
+  wrapper.append(
+    JoinedUI({
+      children: [
+        Input({
+          type: 'text',
+          placeholder: 'Username or email',
+        }),
+        Select({
+          options: [
+            {
+              value: 'user',
+              label: 'User',
+            },
+            {
+              value: 'admin',
+              label: 'Admin',
+            },
+            {
+              value: 'superuser',
+              label: 'Superuser',
+            },
+          ],
+        }),
+      ],
+    })
+  );
+  wrapper.append(
+    Button({
+      colorVariant: ['outline'],
+      children: 'Search',
+      type: 'submit',
+    })
+  );
+  form.append(wrapper);
+  return form;
+};
diff --git a/scss/bitstyles/ui/forms.stories.mdx b/scss/bitstyles/ui/forms.stories.mdx
index f91cc7549..ab369fb5c 100644
--- a/scss/bitstyles/ui/forms.stories.mdx
+++ b/scss/bitstyles/ui/forms.stories.mdx
@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import icons from '../../../assets/images/icons.svg';
 
-<Meta title="UI/Data/Forms" />
+<Meta title="UI/Data/Forms/Overview" />
 
 # Forms
 
@@ -64,7 +64,7 @@ Here are some examples using the grid utility classes to create common form layo
         <form class="a-card-l@m u-bg-white" method="POST" action="">
           <h2>Login</h2>
           <ul class="u-list-none u-margin-l3-bottom">
-            <li class="u-margin-m-bottom">
+            <li class="u-margin-m-bottom u-flex u-flex-col">
               <label for="email">Email</label>
               <input id="email" type="email" autocomplete="email" />
             </li>
@@ -115,7 +115,7 @@ The `aria-describedby` attribute accepts a space-separated list of IDs, so if an
           </div>
           <h2>Login</h2>
           <ul class="u-list-none u-margin-l3-bottom">
-            <li class="u-margin-m-bottom">
+            <li class="u-margin-m-bottom u-flex u-flex-col">
               <label for="email">Email</label>
               <input id="email" type="email" autocomplete="email" aria-invalid="true" aria-describedby="email-help-text" />
               <span id="email-help-text" class="u-fg-warning u-margin-s4-top">Missing email address</span>
@@ -153,15 +153,15 @@ This form has the commonly-required fields for creating an account. Note the wor
         <form class="a-card-l@m u-bg-white" method="POST" action="">
           <h2>Create an account</h2>
           <ul class="u-list-none u-margin-l3-bottom">
-            <li class="u-margin-m-bottom">
+            <li class="u-margin-m-bottom u-flex u-flex-col">
               <label for="email">Email</label>
               <input id="email" type="email" autocomplete="email" />
             </li>
-            <li class="u-margin-m-bottom">
+            <li class="u-margin-m-bottom u-flex u-flex-col">
               <label for="password">Password</label>
               <input id="new-password" type="password" autocomplete="new-password" />
             </li>
-            <li class="u-margin-m-bottom">
+            <li class="u-margin-m-bottom u-flex u-flex-col">
               <label for="confirm_password">Confirm password</label>
               <input id="confirm_password" type="password" autocomplete="new-password" />
             </li>
@@ -195,15 +195,15 @@ For a more complex form, `.u-grid-cols-6@m` allows for fields of different sizes
           </div>
           <div class="u-grid u-gap-m u-grid-cols-6@l">
             <ul class="u-list-none u-col-start-3@l u-grid u-gap-m u-grid-cols-6@m u-col-span-4@l">
-              <li class="u-col-span-4@m u-col-start-1@m u-col-span-3@l">
+              <li class="u-col-span-4@m u-col-start-1@m u-col-span-3@l u-flex u-flex-col">
                 <label for="name">Name</label>
                 <input id="name" type="text" autocomplete="name" value="Jon Doe" />
               </li>
-              <li class="u-col-span-4@m u-col-start-1@m u-col-span-3@l">
+              <li class="u-col-span-4@m u-col-start-1@m u-col-span-3@l u-flex u-flex-col">
                 <label for="email">Email</label>
                 <input id="email" type="text" autocomplete="email" value="jon.doe@gmx.de" />
               </li>
-              <li class="u-col-start-1@m u-col-span-2@m">
+              <li class="u-col-start-1@m u-col-span-2@m u-flex u-flex-col">
                 <label for="type">Account type</label>
                 <select id="type">
                   <option value="user">User</option>
@@ -222,23 +222,23 @@ For a more complex form, `.u-grid-cols-6@m` allows for fields of different sizes
               <p class="u-h6 u-fg-grayscale-light-1 u-padding-l2-y@l u-padding-l3-right@m">Some intro text can go here, to describe this section</p>
             </div>
             <ul class="u-list-none u-col-start-3@l u-col-span-4@l u-grid u-gap-m u-grid-cols-6@m">
-              <li class="u-col-span-4@m u-col-span-3@l">
+              <li class="u-col-span-4@m u-col-span-3@l u-flex u-flex-col">
                 <label for="street">Street</label>
                 <input id="street" type="text" autocomplete="address-line1" />
               </li>
-              <li class="u-col-span-2@m u-col-span-1@l">
+              <li class="u-col-span-2@m u-col-span-1@l u-flex u-flex-col">
                 <label for="house">House Nr.</label>
                 <input id="house" type="text" />
               </li>
-              <li class="u-col-start-1@m u-col-start-1@l u-col-span-3@m">
+              <li class="u-col-start-1@m u-col-start-1@l u-col-span-3@m u-flex u-flex-col">
                 <label for="city">City</label>
                 <input id="city" type="text" autocomplete="address-line2" />
               </li>
-              <li class="u-col-span-3@m">
+              <li class="u-col-span-3@m u-flex u-flex-col">
                 <label for="country">Country</label>
                 <input id="country" type="text" autocomplete="country-name" />
               </li>
-              <li class="u-col-span-2@m">
+              <li class="u-col-span-2@m u-flex u-flex-col">
                 <label for="postal-code">Postal code</label>
                 <input id="postal-code" type="text" autocomplete="postal-code" />
               </li>
@@ -301,36 +301,11 @@ Some forms are always going to be small and simple, with just a few text inputs
 The `role="search"` attribute highlights this functionality for screenreader users. The label element is present, but visually hidden using `.u-sr-only`.
 
 <Canvas>
-  <Story name="Search form">
-    {`
-    <form role="search" action="" method="POST">
-      <label for="search" class="u-sr-only">Search users</label>
-      <div class="u-flex o-joined-ui">
-        <input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
-        <button type="submit" class="a-button a-button--outline">Search</button>
-      </div>
-    </form>
-    `}
-  </Story>
+  <Story id="ui-data-forms--search-form-with-button" />
 </Canvas>
 
 <Canvas>
-  <Story name="Search form with icon button">
-    {`
-    <form role="search" action="" method="POST">
-      <label for="search" class="u-sr-only">Search users</label>
-      <div class="u-flex o-joined-ui">
-        <input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
-        <button type="submit" class="a-button a-button--outline" title="Search users">
-          <svg width="18" height="18" class="a-icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-            <use xlink:href="${icons}#icon-search"></use>
-          </svg>
-          <span class="u-sr-only">Search</span>
-        </button>
-      </div>
-    </form>
-    `}
-  </Story>
+  <Story id="ui-data-forms--search-form-with-icon-button" />
 </Canvas>
 
 ## Form with select, input, & button
@@ -338,25 +313,5 @@ The `role="search"` attribute highlights this functionality for screenreader use
 The heights of selects, inputs, and buttons should all match, allowing them to be placed side by side.
 
 <Canvas>
-  <Story name="Select input and button">
-    {`
-    <form role="search" action="" method="POST" class="u-flex">
-      <ul class="u-list-none u-flex u-items-end">
-        <li class="u-margin-s4-right">
-          <label for="filter">Search users</label>
-          <input type="search" id="filter" placeholder="Username or email…" />
-        </li>
-        <li class="u-margin-s4-right">
-          <select id="type">
-            <option value="user">User</option>
-            <option value="admin">Admin</option>
-          </select>
-        </li>
-        <li>
-          <button type="submit" class="a-button a-button--outline">Search</button>
-        </li>
-      </ul>
-    </form>
-    `}
-  </Story>
+  <Story id="ui-data-forms--search-form-with-select-and-button" />
 </Canvas>
diff --git a/scss/bitstyles/ui/joined-buttons.stories.js b/scss/bitstyles/ui/joined-buttons.stories.js
index 6ce52debd..b0033969b 100644
--- a/scss/bitstyles/ui/joined-buttons.stories.js
+++ b/scss/bitstyles/ui/joined-buttons.stories.js
@@ -5,7 +5,7 @@ import icons from '../../../assets/images/icons.svg';
 export default {
   title: 'UI/Buttons/Joined',
   component: JoinedUI,
-  subcomponents: Button,
+  subcomponents: { Button },
 };
 
 // ***** Default size, each shape & color ****************** //
diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css
index 911c371c8..4539711b5 100644
--- a/test/scss/fixtures/bitstyles.css
+++ b/test/scss/fixtures/bitstyles.css
@@ -1146,61 +1146,60 @@ table {
 .a-badge {
   align-items: center;
   border-radius: 9999rem;
-  box-shadow: var(--bs-a-badge-shadow);
+  box-shadow: var(--bs-badge-shadow);
   display: inline-flex;
-  gap: var(--bs-a-badge-gap);
-  padding: var(--bs-a-badge-padding-vertical)
-    var(--bs-a-badge-padding-horizontal);
+  gap: var(--bs-badge-gap);
+  padding: var(--bs-badge-padding-vertical) var(--bs-badge-padding-horizontal);
   white-space: nowrap;
 }
 .a-badge__prepend {
   margin-bottom: calc(
-    var(--bs-a-badge-prepend-spacing) - var(--bs-a-badge-padding-vertical)
+    var(--bs-badge-prepend-spacing) - var(--bs-badge-padding-vertical)
   );
   margin-left: calc(
-    var(--bs-a-badge-prepend-spacing) - var(--bs-a-badge-padding-horizontal)
+    var(--bs-badge-prepend-spacing) - var(--bs-badge-padding-horizontal)
   );
   margin-top: calc(
-    var(--bs-a-badge-prepend-spacing) - var(--bs-a-badge-padding-vertical)
+    var(--bs-badge-prepend-spacing) - var(--bs-badge-padding-vertical)
   );
 }
 :root,
 [data-theme='default'] {
-  --bs-a-badge-shadow: var(--bs-shadow-gray-box);
+  --bs-badge-shadow: var(--bs-shadow-gray-box);
 }
 [data-theme='brand-1'] {
-  --bs-a-badge-shadow: var(--bs-shadow-brand-1-box);
+  --bs-badge-shadow: var(--bs-shadow-brand-1-box);
 }
 [data-theme='brand-2'] {
-  --bs-a-badge-shadow: var(--bs-shadow-brand-2-box);
+  --bs-badge-shadow: var(--bs-shadow-brand-2-box);
 }
 [data-theme='positive'] {
-  --bs-a-badge-shadow: var(--bs-shadow-positive-box);
+  --bs-badge-shadow: var(--bs-shadow-positive-box);
 }
 [data-theme='warning'] {
-  --bs-a-badge-shadow: var(--bs-shadow-warning-box);
+  --bs-badge-shadow: var(--bs-shadow-warning-box);
 }
 [data-theme='danger'] {
-  --bs-a-badge-shadow: var(--bs-shadow-danger-box);
+  --bs-badge-shadow: var(--bs-shadow-danger-box);
 }
 .a-badge {
-  --bs-a-badge-padding-horizontal: var(--bs-size-l1);
-  --bs-a-badge-padding-vertical: var(--bs-size-s6);
-  --bs-a-badge-prepend-spacing: 0rem;
-  --bs-a-badge-gap: var(--bs-size-s6);
+  --bs-badge-padding-horizontal: var(--bs-size-l1);
+  --bs-badge-padding-vertical: var(--bs-size-s6);
+  --bs-badge-prepend-spacing: 0rem;
+  --bs-badge-gap: var(--bs-size-s6);
 }
 @media screen and (min-width: 30em) {
   .a-badge {
-    --bs-a-badge-padding-horizontal: var(--bs-size-l1);
-    --bs-a-badge-padding-vertical: var(--bs-size-s4);
-    --bs-a-badge-prepend-spacing: var(--bs-size-s6);
-    --bs-a-badge-gap: var(--bs-size-s4);
+    --bs-badge-padding-horizontal: var(--bs-size-l1);
+    --bs-badge-padding-vertical: var(--bs-size-s4);
+    --bs-badge-prepend-spacing: var(--bs-size-s6);
+    --bs-badge-gap: var(--bs-size-s4);
   }
   .a-badge--small {
-    --bs-a-badge-padding-horizontal: var(--bs-size-l1);
-    --bs-a-badge-padding-vertical: var(--bs-size-s6);
-    --bs-a-badge-prepend-spacing: 0rem;
-    --bs-a-badge-gap: var(--bs-size-s6);
+    --bs-badge-padding-horizontal: var(--bs-size-l1);
+    --bs-badge-padding-vertical: var(--bs-size-s6);
+    --bs-badge-prepend-spacing: 0rem;
+    --bs-badge-gap: var(--bs-size-s6);
   }
 }
 .a-bordered-header {
@@ -1215,47 +1214,45 @@ table {
   content: '';
 }
 .a-button {
-  --bs-a-button-border-top-right-radius: var(--bs-a-button-border-radius);
-  --bs-a-button-border-bottom-right-radius: var(--bs-a-button-border-radius);
-  --bs-a-button-border-bottom-left-radius: var(--bs-a-button-border-radius);
-  --bs-a-button-border-top-left-radius: var(--bs-a-button-border-radius);
-  --bs-a-button-transition: color 0.075s ease-in-out,
+  --bs-button-border-top-right-radius: var(--bs-button-border-radius);
+  --bs-button-border-bottom-right-radius: var(--bs-button-border-radius);
+  --bs-button-border-bottom-left-radius: var(--bs-button-border-radius);
+  --bs-button-border-top-left-radius: var(--bs-button-border-radius);
+  --bs-button-transition: color 0.075s ease-in-out,
     background-color 0.075s ease-in-out, border 0.075s ease-in-out,
     box-shadow 0.075s ease-in-out, outline-offset 0.075s ease-in-out;
-  --bs-a-button-justify-content: center;
+  --bs-button-justify-content: center;
   align-items: center;
   -webkit-appearance: none;
-  border-radius: var(--bs-a-button-border-top-left-radius)
-    var(--bs-a-button-border-top-right-radius)
-    var(--bs-a-button-border-bottom-right-radius)
-    var(--bs-a-button-border-bottom-left-radius);
+  border-radius: var(--bs-button-border-top-left-radius)
+    var(--bs-button-border-top-right-radius)
+    var(--bs-button-border-bottom-right-radius)
+    var(--bs-button-border-bottom-left-radius);
   border-style: solid;
-  border-width: var(--bs-a-button-border-width);
+  border-width: var(--bs-button-border-width);
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
   font-family: inherit;
-  font-size: var(--bs-a-button-font-size);
-  font-weight: var(--bs-a-button-font-weight);
-  justify-content: var(--bs-a-button-justify-content);
+  font-size: var(--bs-button-font-size);
+  font-weight: var(--bs-button-font-weight);
+  justify-content: var(--bs-button-justify-content);
   max-width: 100%;
-  min-height: var(--bs-a-button-min-height);
-  min-width: var(--bs-a-button-min-width);
+  min-height: var(--bs-button-min-height);
+  min-width: var(--bs-button-min-width);
   outline-offset: 0;
   overflow: visible;
   padding: calc(
-      var(--bs-a-button-padding-vertical) -
-        var(--bs-a-button-border-width, 0rem)
+      var(--bs-button-padding-vertical) - var(--bs-button-border-width, 0rem)
     )
     calc(
-      var(--bs-a-button-padding-horizontal) -
-        var(--bs-a-button-border-width, 0rem)
+      var(--bs-button-padding-horizontal) - var(--bs-button-border-width, 0rem)
     );
   position: relative;
   text-align: center;
   text-decoration: none;
   touch-action: manipulation;
-  transition: var(--bs-a-button-transition);
+  transition: var(--bs-button-transition);
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -1299,32 +1296,32 @@ table {
 }
 .a-button,
 .a-button:visited {
-  background-color: var(--bs-a-button-background-color);
-  border-color: var(--bs-a-button-border-color);
-  box-shadow: var(--bs-a-button-box-shadow);
-  color: var(--bs-a-button-color);
+  background-color: var(--bs-button-background-color);
+  border-color: var(--bs-button-border-color);
+  box-shadow: var(--bs-button-box-shadow);
+  color: var(--bs-button-color);
 }
 .a-button:focus,
 .a-button:hover {
-  background-color: var(--bs-a-button-hover-background-color);
-  border-color: var(--bs-a-button-hover-border-color);
-  box-shadow: var(--bs-a-button-hover-box-shadow);
-  color: var(--bs-a-button-hover-color);
+  background-color: var(--bs-button-hover-background-color);
+  border-color: var(--bs-button-hover-border-color);
+  box-shadow: var(--bs-button-hover-box-shadow);
+  color: var(--bs-button-hover-color);
 }
 .a-button:active {
-  background-color: var(--bs-a-button-active-background-color);
-  border-color: var(--bs-a-button-active-border-color);
-  box-shadow: var(--bs-a-button-active-box-shadow);
-  color: var(--bs-a-button-active-color);
+  background-color: var(--bs-button-active-background-color);
+  border-color: var(--bs-button-active-border-color);
+  box-shadow: var(--bs-button-active-box-shadow);
+  color: var(--bs-button-active-color);
 }
 .a-button[aria-current],
 .a-button[aria-expanded='true'],
 .a-button[aria-pressed='true'],
 .a-button[aria-selected='true'] {
-  background-color: var(--bs-a-button-pressed-background-color);
-  border-color: var(--bs-a-button-pressed-border-color);
-  box-shadow: var(--bs-a-button-pressed-box-shadow);
-  color: var(--bs-a-button-pressed-color);
+  background-color: var(--bs-button-pressed-background-color);
+  border-color: var(--bs-button-pressed-border-color);
+  box-shadow: var(--bs-button-pressed-box-shadow);
+  color: var(--bs-button-pressed-color);
 }
 .a-button:disabled,
 .a-button:disabled:focus,
@@ -1332,114 +1329,114 @@ table {
 .a-button[aria-disabled='true'],
 .a-button[aria-disabled='true']:focus,
 .a-button[aria-disabled='true']:hover {
-  background-color: var(--bs-a-button-disabled-background-color);
-  border-color: var(--bs-a-button-disabled-border-color);
-  box-shadow: var(--bs-a-button-disabled-box-shadow);
-  color: var(--bs-a-button-disabled-color);
+  background-color: var(--bs-button-disabled-background-color);
+  border-color: var(--bs-button-disabled-border-color);
+  box-shadow: var(--bs-button-disabled-box-shadow);
+  color: var(--bs-button-disabled-color);
 }
 :root,
 [data-theme='default'] {
-  --bs-a-button-color: var(--bs-color-grayscale-white);
-  --bs-a-button-background-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button-box-shadow: none;
-  --bs-a-button-hover-color: var(--bs-color-brand-1-dark-2);
-  --bs-a-button-hover-background-color: var(--bs-color-brand-1-light-2);
-  --bs-a-button-active-color: var(--bs-color-grayscale-white);
-  --bs-a-button-active-background-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button-pressed-color: var(--bs-color-grayscale-white);
-  --bs-a-button-pressed-background-color: var(--bs-color-brand-1-dark-2);
-  --bs-a-button-disabled-color: var(--bs-color-grayscale-base);
-  --bs-a-button-disabled-background-color: var(--bs-color-grayscale-light-3);
+  --bs-button-color: var(--bs-color-grayscale-white);
+  --bs-button-background-color: var(--bs-color-brand-1-dark-1);
+  --bs-button-box-shadow: none;
+  --bs-button-hover-color: var(--bs-color-brand-1-dark-2);
+  --bs-button-hover-background-color: var(--bs-color-brand-1-light-2);
+  --bs-button-active-color: var(--bs-color-grayscale-white);
+  --bs-button-active-background-color: var(--bs-color-brand-1-dark-1);
+  --bs-button-pressed-color: var(--bs-color-grayscale-white);
+  --bs-button-pressed-background-color: var(--bs-color-brand-1-dark-2);
+  --bs-button-disabled-color: var(--bs-color-grayscale-base);
+  --bs-button-disabled-background-color: var(--bs-color-grayscale-light-3);
 }
 [data-theme='dark'] {
-  --bs-a-button-color: var(--bs-color-brand-1-base);
-  --bs-a-button-background-color: var(--bs-color-grayscale-light-2);
-  --bs-a-button-box-shadow: none;
-  --bs-a-button-hover-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button-hover-background-color: var(--bs-color-brand-1-light-1);
-  --bs-a-button-active-color: var(--bs-color-brand-1-base);
-  --bs-a-button-active-background-color: var(--bs-color-grayscale-light-2);
-  --bs-a-button-pressed-color: var(--bs-color-grayscale-white);
-  --bs-a-button-pressed-background-color: var(--bs-color-brand-1-base);
-  --bs-a-button-disabled-color: var(--bs-color-grayscale-light-1);
-  --bs-a-button-disabled-background-color: var(--bs-color-grayscale-dark-2);
+  --bs-button-color: var(--bs-color-brand-1-base);
+  --bs-button-background-color: var(--bs-color-grayscale-light-2);
+  --bs-button-box-shadow: none;
+  --bs-button-hover-color: var(--bs-color-brand-1-dark-1);
+  --bs-button-hover-background-color: var(--bs-color-brand-1-light-1);
+  --bs-button-active-color: var(--bs-color-brand-1-base);
+  --bs-button-active-background-color: var(--bs-color-grayscale-light-2);
+  --bs-button-pressed-color: var(--bs-color-grayscale-white);
+  --bs-button-pressed-background-color: var(--bs-color-brand-1-base);
+  --bs-button-disabled-color: var(--bs-color-grayscale-light-1);
+  --bs-button-disabled-background-color: var(--bs-color-grayscale-dark-2);
 }
 [data-theme='brand-1'] {
-  --bs-a-button-color: var(--bs-color-brand-1-dark-2);
-  --bs-a-button-background-color: transparent;
-  --bs-a-button-hover-color: var(--bs-color-brand-1-dark-3);
-  --bs-a-button-hover-background-color: var(--bs-color-brand-1-light-2);
-  --bs-a-button-active-color: var(--bs-color-grayscale-white);
-  --bs-a-button-active-background-color: var(--bs-color-brand-1-dark-2);
+  --bs-button-color: var(--bs-color-brand-1-dark-2);
+  --bs-button-background-color: transparent;
+  --bs-button-hover-color: var(--bs-color-brand-1-dark-3);
+  --bs-button-hover-background-color: var(--bs-color-brand-1-light-2);
+  --bs-button-active-color: var(--bs-color-grayscale-white);
+  --bs-button-active-background-color: var(--bs-color-brand-1-dark-2);
 }
 [data-theme='brand-2'] {
-  --bs-a-button-color: var(--bs-color-brand-2-dark-2);
-  --bs-a-button-background-color: transparent;
-  --bs-a-button-hover-color: var(--bs-color-grayscale-dark-3);
-  --bs-a-button-hover-background-color: var(--bs-color-brand-2-light-2);
-  --bs-a-button-active-color: var(--bs-color-grayscale-white);
-  --bs-a-button-active-background-color: var(--bs-color-brand-2-dark-2);
+  --bs-button-color: var(--bs-color-brand-2-dark-2);
+  --bs-button-background-color: transparent;
+  --bs-button-hover-color: var(--bs-color-grayscale-dark-3);
+  --bs-button-hover-background-color: var(--bs-color-brand-2-light-2);
+  --bs-button-active-color: var(--bs-color-grayscale-white);
+  --bs-button-active-background-color: var(--bs-color-brand-2-dark-2);
 }
 [data-theme='positive'] {
-  --bs-a-button-color: var(--bs-color-positive-dark-2);
-  --bs-a-button-background-color: transparent;
-  --bs-a-button-hover-color: var(--bs-color-positive-dark-3);
-  --bs-a-button-hover-background-color: var(--bs-color-positive-light-2);
-  --bs-a-button-active-color: var(--bs-color-grayscale-white);
-  --bs-a-button-active-background-color: var(--bs-color-positive-dark-2);
+  --bs-button-color: var(--bs-color-positive-dark-2);
+  --bs-button-background-color: transparent;
+  --bs-button-hover-color: var(--bs-color-positive-dark-3);
+  --bs-button-hover-background-color: var(--bs-color-positive-light-2);
+  --bs-button-active-color: var(--bs-color-grayscale-white);
+  --bs-button-active-background-color: var(--bs-color-positive-dark-2);
 }
 [data-theme='warning'] {
-  --bs-a-button-color: var(--bs-color-warning-dark-2);
-  --bs-a-button-background-color: transparent;
-  --bs-a-button-hover-color: var(--bs-color-warning-dark-3);
-  --bs-a-button-hover-background-color: var(--bs-color-warning-light-2);
-  --bs-a-button-active-color: var(--bs-color-grayscale-white);
-  --bs-a-button-active-background-color: var(--bs-color-warning-dark-2);
+  --bs-button-color: var(--bs-color-warning-dark-2);
+  --bs-button-background-color: transparent;
+  --bs-button-hover-color: var(--bs-color-warning-dark-3);
+  --bs-button-hover-background-color: var(--bs-color-warning-light-2);
+  --bs-button-active-color: var(--bs-color-grayscale-white);
+  --bs-button-active-background-color: var(--bs-color-warning-dark-2);
 }
 [data-theme='danger'] {
-  --bs-a-button-color: var(--bs-color-danger-dark-1);
-  --bs-a-button-background-color: transparent;
-  --bs-a-button-hover-color: var(--bs-color-danger-dark-2);
-  --bs-a-button-hover-background-color: var(--bs-color-danger-light-2);
-  --bs-a-button-active-color: var(--bs-color-grayscale-white);
-  --bs-a-button-active-background-color: var(--bs-color-danger-dark-1);
+  --bs-button-color: var(--bs-color-danger-dark-1);
+  --bs-button-background-color: transparent;
+  --bs-button-hover-color: var(--bs-color-danger-dark-2);
+  --bs-button-hover-background-color: var(--bs-color-danger-light-2);
+  --bs-button-active-color: var(--bs-color-grayscale-white);
+  --bs-button-active-background-color: var(--bs-color-danger-dark-1);
 }
 [data-theme='grayscale'] {
-  --bs-a-button-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button-background-color: transparent;
-  --bs-a-button-hover-color: var(--bs-color-grayscale-dark-3);
-  --bs-a-button-hover-background-color: var(--bs-color-grayscale-light-2);
-  --bs-a-button-active-color: var(--bs-color-grayscale-white);
-  --bs-a-button-active-background-color: var(--bs-color-grayscale-dark-2);
+  --bs-button-color: var(--bs-color-grayscale-dark-2);
+  --bs-button-background-color: transparent;
+  --bs-button-hover-color: var(--bs-color-grayscale-dark-3);
+  --bs-button-hover-background-color: var(--bs-color-grayscale-light-2);
+  --bs-button-active-color: var(--bs-color-grayscale-white);
+  --bs-button-active-background-color: var(--bs-color-grayscale-dark-2);
 }
 .a-button--secondary,
 .a-button--secondary:visited {
-  background-color: var(--bs-a-button--secondary-background-color);
-  border-color: var(--bs-a-button--secondary-border-color);
-  box-shadow: var(--bs-a-button--secondary-box-shadow);
-  color: var(--bs-a-button--secondary-color);
+  background-color: var(--bs-button--secondary-background-color);
+  border-color: var(--bs-button--secondary-border-color);
+  box-shadow: var(--bs-button--secondary-box-shadow);
+  color: var(--bs-button--secondary-color);
 }
 .a-button--secondary:focus,
 .a-button--secondary:hover {
-  background-color: var(--bs-a-button--secondary-hover-background-color);
-  border-color: var(--bs-a-button--secondary-hover-border-color);
-  box-shadow: var(--bs-a-button--secondary-hover-box-shadow);
-  color: var(--bs-a-button--secondary-hover-color);
+  background-color: var(--bs-button--secondary-hover-background-color);
+  border-color: var(--bs-button--secondary-hover-border-color);
+  box-shadow: var(--bs-button--secondary-hover-box-shadow);
+  color: var(--bs-button--secondary-hover-color);
 }
 .a-button--secondary:active {
-  background-color: var(--bs-a-button--secondary-active-background-color);
-  border-color: var(--bs-a-button--secondary-active-border-color);
-  box-shadow: var(--bs-a-button--secondary-active-box-shadow);
-  color: var(--bs-a-button--secondary-active-color);
+  background-color: var(--bs-button--secondary-active-background-color);
+  border-color: var(--bs-button--secondary-active-border-color);
+  box-shadow: var(--bs-button--secondary-active-box-shadow);
+  color: var(--bs-button--secondary-active-color);
 }
 .a-button--secondary[aria-current],
 .a-button--secondary[aria-expanded='true'],
 .a-button--secondary[aria-pressed='true'],
 .a-button--secondary[aria-selected='true'] {
-  background-color: var(--bs-a-button--secondary-pressed-background-color);
-  border-color: var(--bs-a-button--secondary-pressed-border-color);
-  box-shadow: var(--bs-a-button--secondary-pressed-box-shadow);
-  color: var(--bs-a-button--secondary-pressed-color);
+  background-color: var(--bs-button--secondary-pressed-background-color);
+  border-color: var(--bs-button--secondary-pressed-border-color);
+  box-shadow: var(--bs-button--secondary-pressed-box-shadow);
+  color: var(--bs-button--secondary-pressed-color);
 }
 .a-button--secondary:disabled,
 .a-button--secondary:disabled:focus,
@@ -1447,31 +1444,31 @@ table {
 .a-button--secondary[aria-disabled='true'],
 .a-button--secondary[aria-disabled='true']:focus,
 .a-button--secondary[aria-disabled='true']:hover {
-  background-color: var(--bs-a-button--secondary-disabled-background-color);
-  border-color: var(--bs-a-button--secondary-disabled-border-color);
-  box-shadow: var(--bs-a-button--secondary-disabled-box-shadow);
-  color: var(--bs-a-button--secondary-disabled-color);
+  background-color: var(--bs-button--secondary-disabled-background-color);
+  border-color: var(--bs-button--secondary-disabled-border-color);
+  box-shadow: var(--bs-button--secondary-disabled-box-shadow);
+  color: var(--bs-button--secondary-disabled-color);
 }
 :root,
 [data-theme='default'] {
-  --bs-a-button--secondary-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--secondary-background-color: var(--bs-color-grayscale-light-3);
-  --bs-a-button--secondary-box-shadow: none;
-  --bs-a-button--secondary-hover-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--secondary-hover-background-color: var(
+  --bs-button--secondary-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--secondary-background-color: var(--bs-color-grayscale-light-3);
+  --bs-button--secondary-box-shadow: none;
+  --bs-button--secondary-hover-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--secondary-hover-background-color: var(
     --bs-color-brand-1-light-2
   );
-  --bs-a-button--secondary-hover-box-shadow: none;
-  --bs-a-button--secondary-active-color: var(--bs-color-brand-1-dark-2);
-  --bs-a-button--secondary-active-background-color: var(
+  --bs-button--secondary-hover-box-shadow: none;
+  --bs-button--secondary-active-color: var(--bs-color-brand-1-dark-2);
+  --bs-button--secondary-active-background-color: var(
     --bs-color-brand-1-light-2
   );
-  --bs-a-button--secondary-active-box-shadow: none;
-  --bs-a-button--secondary-pressed-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--secondary-pressed-background-color: var(
+  --bs-button--secondary-active-box-shadow: none;
+  --bs-button--secondary-pressed-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--secondary-pressed-background-color: var(
     --bs-color-brand-1-light-2
   );
-  --bs-a-button--secondary-pressed-box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
+  --bs-button--secondary-pressed-box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
     0 0 calc(var(--bs-size-s4) / 3)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
@@ -1479,31 +1476,31 @@ table {
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
     0 0 calc(var(--bs-size-s4) / 1)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.075);
-  --bs-a-button--secondary-disabled-color: var(--bs-color-grayscale-base);
-  --bs-a-button--secondary-disabled-background-color: var(
+  --bs-button--secondary-disabled-color: var(--bs-color-grayscale-base);
+  --bs-button--secondary-disabled-background-color: var(
     --bs-color-grayscale-light-3
   );
-  --bs-a-button--secondary-disabled-box-shadow: none;
+  --bs-button--secondary-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
-  --bs-a-button--secondary-color: var(--bs-color-grayscale-light-2);
-  --bs-a-button--secondary-background-color: var(--bs-color-grayscale-dark-1);
-  --bs-a-button--secondary-box-shadow: none;
-  --bs-a-button--secondary-hover-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--secondary-hover-background-color: var(
+  --bs-button--secondary-color: var(--bs-color-grayscale-light-2);
+  --bs-button--secondary-background-color: var(--bs-color-grayscale-dark-1);
+  --bs-button--secondary-box-shadow: none;
+  --bs-button--secondary-hover-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--secondary-hover-background-color: var(
     --bs-color-brand-1-light-1
   );
-  --bs-a-button--secondary-hover-box-shadow: none;
-  --bs-a-button--secondary-active-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--secondary-active-background-color: var(
+  --bs-button--secondary-hover-box-shadow: none;
+  --bs-button--secondary-active-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--secondary-active-background-color: var(
     --bs-color-brand-1-light-1
   );
-  --bs-a-button--secondary-active-box-shadow: none;
-  --bs-a-button--secondary-pressed-color: var(--bs-color-brand-1-base);
-  --bs-a-button--secondary-pressed-background-color: var(
+  --bs-button--secondary-active-box-shadow: none;
+  --bs-button--secondary-pressed-color: var(--bs-color-brand-1-base);
+  --bs-button--secondary-pressed-background-color: var(
     --bs-color-brand-1-light-1
   );
-  --bs-a-button--secondary-pressed-box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
+  --bs-button--secondary-pressed-box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
     0 0 calc(var(--bs-size-s4) / 3)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
@@ -1511,40 +1508,40 @@ table {
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
     0 0 calc(var(--bs-size-s4) / 1)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.075);
-  --bs-a-button--secondary-disabled-color: var(--bs-color-grayscale-light-1);
-  --bs-a-button--secondary-disabled-background-color: var(
+  --bs-button--secondary-disabled-color: var(--bs-color-grayscale-light-1);
+  --bs-button--secondary-disabled-background-color: var(
     --bs-color-grayscale-dark-2
   );
-  --bs-a-button--secondary-disabled-box-shadow: none;
+  --bs-button--secondary-disabled-box-shadow: none;
 }
 .a-button--outline,
 .a-button--outline:visited {
-  background-color: var(--bs-a-button--outline-background-color);
-  border-color: var(--bs-a-button--outline-border-color);
-  box-shadow: var(--bs-a-button--outline-box-shadow);
-  color: var(--bs-a-button--outline-color);
+  background-color: var(--bs-button--outline-background-color);
+  border-color: var(--bs-button--outline-border-color);
+  box-shadow: var(--bs-button--outline-box-shadow);
+  color: var(--bs-button--outline-color);
 }
 .a-button--outline:focus,
 .a-button--outline:hover {
-  background-color: var(--bs-a-button--outline-hover-background-color);
-  border-color: var(--bs-a-button--outline-hover-border-color);
-  box-shadow: var(--bs-a-button--outline-hover-box-shadow);
-  color: var(--bs-a-button--outline-hover-color);
+  background-color: var(--bs-button--outline-hover-background-color);
+  border-color: var(--bs-button--outline-hover-border-color);
+  box-shadow: var(--bs-button--outline-hover-box-shadow);
+  color: var(--bs-button--outline-hover-color);
 }
 .a-button--outline:active {
-  background-color: var(--bs-a-button--outline-active-background-color);
-  border-color: var(--bs-a-button--outline-active-border-color);
-  box-shadow: var(--bs-a-button--outline-active-box-shadow);
-  color: var(--bs-a-button--outline-active-color);
+  background-color: var(--bs-button--outline-active-background-color);
+  border-color: var(--bs-button--outline-active-border-color);
+  box-shadow: var(--bs-button--outline-active-box-shadow);
+  color: var(--bs-button--outline-active-color);
 }
 .a-button--outline[aria-current],
 .a-button--outline[aria-expanded='true'],
 .a-button--outline[aria-pressed='true'],
 .a-button--outline[aria-selected='true'] {
-  background-color: var(--bs-a-button--outline-pressed-background-color);
-  border-color: var(--bs-a-button--outline-pressed-border-color);
-  box-shadow: var(--bs-a-button--outline-pressed-box-shadow);
-  color: var(--bs-a-button--outline-pressed-color);
+  background-color: var(--bs-button--outline-pressed-background-color);
+  border-color: var(--bs-button--outline-pressed-border-color);
+  box-shadow: var(--bs-button--outline-pressed-box-shadow);
+  color: var(--bs-button--outline-pressed-color);
 }
 .a-button--outline:disabled,
 .a-button--outline:disabled:focus,
@@ -1552,35 +1549,31 @@ table {
 .a-button--outline[aria-disabled='true'],
 .a-button--outline[aria-disabled='true']:focus,
 .a-button--outline[aria-disabled='true']:hover {
-  background-color: var(--bs-a-button--outline-disabled-background-color);
-  border-color: var(--bs-a-button--outline-disabled-border-color);
-  box-shadow: var(--bs-a-button--outline-disabled-box-shadow);
-  color: var(--bs-a-button--outline-disabled-color);
+  background-color: var(--bs-button--outline-disabled-background-color);
+  border-color: var(--bs-button--outline-disabled-border-color);
+  box-shadow: var(--bs-button--outline-disabled-box-shadow);
+  color: var(--bs-button--outline-disabled-color);
 }
 :root,
 [data-theme='default'] {
-  --bs-a-button--outline-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--outline-background-color: var(--bs-color-grayscale-white);
-  --bs-a-button--outline-border-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--outline-box-shadow: none;
-  --bs-a-button--outline-hover-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--outline-hover-background-color: var(
-    --bs-color-brand-1-light-4
-  );
-  --bs-a-button--outline-hover-border-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--outline-hover-box-shadow: none;
-  --bs-a-button--outline-active-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--outline-active-background-color: var(
-    --bs-color-brand-1-light-4
-  );
-  --bs-a-button--outline-active-border-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--outline-active-box-shadow: none;
-  --bs-a-button--outline-pressed-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--outline-pressed-background-color: var(
+  --bs-button--outline-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--outline-background-color: var(--bs-color-grayscale-white);
+  --bs-button--outline-border-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--outline-box-shadow: none;
+  --bs-button--outline-hover-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--outline-hover-background-color: var(--bs-color-brand-1-light-4);
+  --bs-button--outline-hover-border-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--outline-hover-box-shadow: none;
+  --bs-button--outline-active-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--outline-active-background-color: var(--bs-color-brand-1-light-4);
+  --bs-button--outline-active-border-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--outline-active-box-shadow: none;
+  --bs-button--outline-pressed-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--outline-pressed-background-color: var(
     --bs-color-grayscale-white
   );
-  --bs-a-button--outline-pressed-border-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--outline-pressed-box-shadow: 0 0 calc(var(--bs-size-m) / 4)
+  --bs-button--outline-pressed-border-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--outline-pressed-box-shadow: 0 0 calc(var(--bs-size-m) / 4)
       rgba(var(--bs-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bs-size-m) / 3)
       rgba(var(--bs-color-brand-1-dark-1-rgb), 0.125),
@@ -1588,34 +1581,30 @@ table {
       rgba(var(--bs-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bs-size-m) / 1)
       rgba(var(--bs-color-brand-1-dark-1-rgb), 0.125);
-  --bs-a-button--outline-disabled-color: var(--bs-color-grayscale-base);
-  --bs-a-button--outline-disabled-background-color: transparent;
-  --bs-a-button--outline-disabled-border-color: var(--bs-color-grayscale-base);
-  --bs-a-button--outline-disabled-box-shadow: none;
+  --bs-button--outline-disabled-color: var(--bs-color-grayscale-base);
+  --bs-button--outline-disabled-background-color: transparent;
+  --bs-button--outline-disabled-border-color: var(--bs-color-grayscale-base);
+  --bs-button--outline-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
-  --bs-a-button--outline-color: var(--bs-color-grayscale-light-2);
-  --bs-a-button--outline-background-color: var(--bs-color-grayscale-dark-1);
-  --bs-a-button--outline-border-color: var(--bs-color-grayscale-dark-1);
-  --bs-a-button--outline-box-shadow: none;
-  --bs-a-button--outline-hover-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--outline-hover-background-color: var(
+  --bs-button--outline-color: var(--bs-color-grayscale-light-2);
+  --bs-button--outline-background-color: var(--bs-color-grayscale-dark-1);
+  --bs-button--outline-border-color: var(--bs-color-grayscale-dark-1);
+  --bs-button--outline-box-shadow: none;
+  --bs-button--outline-hover-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--outline-hover-background-color: var(--bs-color-brand-1-light-1);
+  --bs-button--outline-hover-border-color: var(--bs-color-brand-1-light-1);
+  --bs-button--outline-hover-box-shadow: none;
+  --bs-button--outline-active-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--outline-active-background-color: var(--bs-color-brand-1-light-1);
+  --bs-button--outline-active-border-color: var(--bs-color-brand-1-light-1);
+  --bs-button--outline-active-box-shadow: none;
+  --bs-button--outline-pressed-color: var(--bs-color-brand-1-base);
+  --bs-button--outline-pressed-background-color: var(
     --bs-color-brand-1-light-1
   );
-  --bs-a-button--outline-hover-border-color: var(--bs-color-brand-1-light-1);
-  --bs-a-button--outline-hover-box-shadow: none;
-  --bs-a-button--outline-active-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--outline-active-background-color: var(
-    --bs-color-brand-1-light-1
-  );
-  --bs-a-button--outline-active-border-color: var(--bs-color-brand-1-light-1);
-  --bs-a-button--outline-active-box-shadow: none;
-  --bs-a-button--outline-pressed-color: var(--bs-color-brand-1-base);
-  --bs-a-button--outline-pressed-background-color: var(
-    --bs-color-brand-1-light-1
-  );
-  --bs-a-button--outline-pressed-border-color: var(--bs-color-brand-1-light-1);
-  --bs-a-button--outline-pressed-box-shadow: 0 0 calc(var(--bs-size-m) / 4)
+  --bs-button--outline-pressed-border-color: var(--bs-color-brand-1-light-1);
+  --bs-button--outline-pressed-box-shadow: 0 0 calc(var(--bs-size-m) / 4)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.125),
     0 0 calc(var(--bs-size-m) / 3)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.125),
@@ -1623,43 +1612,41 @@ table {
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.125),
     0 0 calc(var(--bs-size-m) / 1)
       rgba(var(--bs-color-brand-1-light-1-rgb), 0.125);
-  --bs-a-button--outline-disabled-color: var(--bs-color-grayscale-light-1);
-  --bs-a-button--outline-disabled-background-color: var(
-    --bs-color-grayscale-dark-2
-  );
-  --bs-a-button--outline-disabled-border-color: var(
+  --bs-button--outline-disabled-color: var(--bs-color-grayscale-light-1);
+  --bs-button--outline-disabled-background-color: var(
     --bs-color-grayscale-dark-2
   );
-  --bs-a-button--outline-disabled-box-shadow: none;
+  --bs-button--outline-disabled-border-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--outline-disabled-box-shadow: none;
 }
 .a-button--transparent,
 .a-button--transparent:visited {
-  background-color: var(--bs-a-button--transparent-background-color);
-  border-color: var(--bs-a-button--transparent-border-color);
-  box-shadow: var(--bs-a-button--transparent-box-shadow);
-  color: var(--bs-a-button--transparent-color);
+  background-color: var(--bs-button--transparent-background-color);
+  border-color: var(--bs-button--transparent-border-color);
+  box-shadow: var(--bs-button--transparent-box-shadow);
+  color: var(--bs-button--transparent-color);
 }
 .a-button--transparent:focus,
 .a-button--transparent:hover {
-  background-color: var(--bs-a-button--transparent-hover-background-color);
-  border-color: var(--bs-a-button--transparent-hover-border-color);
-  box-shadow: var(--bs-a-button--transparent-hover-box-shadow);
-  color: var(--bs-a-button--transparent-hover-color);
+  background-color: var(--bs-button--transparent-hover-background-color);
+  border-color: var(--bs-button--transparent-hover-border-color);
+  box-shadow: var(--bs-button--transparent-hover-box-shadow);
+  color: var(--bs-button--transparent-hover-color);
 }
 .a-button--transparent:active {
-  background-color: var(--bs-a-button--transparent-active-background-color);
-  border-color: var(--bs-a-button--transparent-active-border-color);
-  box-shadow: var(--bs-a-button--transparent-active-box-shadow);
-  color: var(--bs-a-button--transparent-active-color);
+  background-color: var(--bs-button--transparent-active-background-color);
+  border-color: var(--bs-button--transparent-active-border-color);
+  box-shadow: var(--bs-button--transparent-active-box-shadow);
+  color: var(--bs-button--transparent-active-color);
 }
 .a-button--transparent[aria-current],
 .a-button--transparent[aria-expanded='true'],
 .a-button--transparent[aria-pressed='true'],
 .a-button--transparent[aria-selected='true'] {
-  background-color: var(--bs-a-button--transparent-pressed-background-color);
-  border-color: var(--bs-a-button--transparent-pressed-border-color);
-  box-shadow: var(--bs-a-button--transparent-pressed-box-shadow);
-  color: var(--bs-a-button--transparent-pressed-color);
+  background-color: var(--bs-button--transparent-pressed-background-color);
+  border-color: var(--bs-button--transparent-pressed-border-color);
+  box-shadow: var(--bs-button--transparent-pressed-box-shadow);
+  color: var(--bs-button--transparent-pressed-color);
 }
 .a-button--transparent:disabled,
 .a-button--transparent:disabled:focus,
@@ -1667,39 +1654,35 @@ table {
 .a-button--transparent[aria-disabled='true'],
 .a-button--transparent[aria-disabled='true']:focus,
 .a-button--transparent[aria-disabled='true']:hover {
-  background-color: var(--bs-a-button--transparent-disabled-background-color);
-  border-color: var(--bs-a-button--transparent-disabled-border-color);
-  box-shadow: var(--bs-a-button--transparent-disabled-box-shadow);
-  color: var(--bs-a-button--transparent-disabled-color);
+  background-color: var(--bs-button--transparent-disabled-background-color);
+  border-color: var(--bs-button--transparent-disabled-border-color);
+  box-shadow: var(--bs-button--transparent-disabled-box-shadow);
+  color: var(--bs-button--transparent-disabled-color);
 }
 :root,
 [data-theme='default'] {
-  --bs-a-button--transparent-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--transparent-background-color: transparent;
-  --bs-a-button--transparent-border-color: transparent;
-  --bs-a-button--transparent-box-shadow: none;
-  --bs-a-button--transparent-hover-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--transparent-hover-background-color: var(
+  --bs-button--transparent-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--transparent-background-color: transparent;
+  --bs-button--transparent-border-color: transparent;
+  --bs-button--transparent-box-shadow: none;
+  --bs-button--transparent-hover-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--transparent-hover-background-color: var(
     --bs-color-brand-1-light-4
   );
-  --bs-a-button--transparent-hover-border-color: transparent;
-  --bs-a-button--transparent-hover-box-shadow: none;
-  --bs-a-button--transparent-active-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--transparent-active-background-color: var(
+  --bs-button--transparent-hover-border-color: transparent;
+  --bs-button--transparent-hover-box-shadow: none;
+  --bs-button--transparent-active-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--transparent-active-background-color: var(
     --bs-color-brand-1-light-4
   );
-  --bs-a-button--transparent-active-border-color: var(
-    --bs-color-brand-1-dark-1
-  );
-  --bs-a-button--transparent-active-box-shadow: none;
-  --bs-a-button--transparent-pressed-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--transparent-pressed-background-color: var(
+  --bs-button--transparent-active-border-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--transparent-active-box-shadow: none;
+  --bs-button--transparent-pressed-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--transparent-pressed-background-color: var(
     --bs-color-grayscale-white
   );
-  --bs-a-button--transparent-pressed-border-color: var(
-    --bs-color-brand-1-dark-1
-  );
-  --bs-a-button--transparent-pressed-box-shadow: 0 0 calc(var(--bs-size-m) / 4)
+  --bs-button--transparent-pressed-border-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--transparent-pressed-box-shadow: 0 0 calc(var(--bs-size-m) / 4)
       rgba(var(--bs-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bs-size-m) / 3)
       rgba(var(--bs-color-brand-1-dark-1-rgb), 0.125),
@@ -1707,40 +1690,40 @@ table {
       rgba(var(--bs-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bs-size-m) / 1)
       rgba(var(--bs-color-brand-1-dark-1-rgb), 0.125);
-  --bs-a-button--transparent-disabled-color: var(--bs-color-grayscale-base);
-  --bs-a-button--transparent-disabled-background-color: var(
+  --bs-button--transparent-disabled-color: var(--bs-color-grayscale-base);
+  --bs-button--transparent-disabled-background-color: var(
     --bs-color-grayscale-light-3
   );
-  --bs-a-button--transparent-disabled-border-color: var(
+  --bs-button--transparent-disabled-border-color: var(
     --bs-color-grayscale-light-3
   );
-  --bs-a-button--transparent-disabled-box-shadow: none;
+  --bs-button--transparent-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
-  --bs-a-button--transparent-color: var(--bs-color-grayscale-light-1);
-  --bs-a-button--transparent-background-color: transparent;
-  --bs-a-button--transparent-border-color: transparent;
-  --bs-a-button--transparent-box-shadow: none;
-  --bs-a-button--transparent-hover-color: var(--bs-color-brand-1-light-1);
-  --bs-a-button--transparent-hover-background-color: transparent;
-  --bs-a-button--transparent-hover-border-color: transparent;
-  --bs-a-button--transparent-hover-box-shadow: none;
-  --bs-a-button--transparent-active-color: var(--bs-color-brand-1-light-1);
-  --bs-a-button--transparent-active-background-color: var(
+  --bs-button--transparent-color: var(--bs-color-grayscale-light-1);
+  --bs-button--transparent-background-color: transparent;
+  --bs-button--transparent-border-color: transparent;
+  --bs-button--transparent-box-shadow: none;
+  --bs-button--transparent-hover-color: var(--bs-color-brand-1-light-1);
+  --bs-button--transparent-hover-background-color: transparent;
+  --bs-button--transparent-hover-border-color: transparent;
+  --bs-button--transparent-hover-box-shadow: none;
+  --bs-button--transparent-active-color: var(--bs-color-brand-1-light-1);
+  --bs-button--transparent-active-background-color: var(
     --bs-color-grayscale-dark-2
   );
-  --bs-a-button--transparent-active-border-color: var(
+  --bs-button--transparent-active-border-color: var(
     --bs-color-grayscale-dark-2
   );
-  --bs-a-button--transparent-active-box-shadow: none;
-  --bs-a-button--transparent-pressed-color: var(--bs-color-grayscale-white);
-  --bs-a-button--transparent-pressed-background-color: var(
+  --bs-button--transparent-active-box-shadow: none;
+  --bs-button--transparent-pressed-color: var(--bs-color-grayscale-white);
+  --bs-button--transparent-pressed-background-color: var(
     --bs-color-grayscale-dark-2
   );
-  --bs-a-button--transparent-pressed-border-color: var(
+  --bs-button--transparent-pressed-border-color: var(
     --bs-color-grayscale-dark-2
   );
-  --bs-a-button--transparent-pressed-box-shadow: 0 0 calc(var(--bs-size-m) / 4)
+  --bs-button--transparent-pressed-box-shadow: 0 0 calc(var(--bs-size-m) / 4)
       rgba(var(--bs-color-grayscale-dark-2-rgb), 0.125),
     0 0 calc(var(--bs-size-m) / 3)
       rgba(var(--bs-color-grayscale-dark-2-rgb), 0.125),
@@ -1748,43 +1731,43 @@ table {
       rgba(var(--bs-color-grayscale-dark-2-rgb), 0.125),
     0 0 calc(var(--bs-size-m) / 1)
       rgba(var(--bs-color-grayscale-dark-2-rgb), 0.125);
-  --bs-a-button--transparent-disabled-color: var(--bs-color-grayscale-light-1);
-  --bs-a-button--transparent-disabled-background-color: var(
+  --bs-button--transparent-disabled-color: var(--bs-color-grayscale-light-1);
+  --bs-button--transparent-disabled-background-color: var(
     --bs-color-grayscale-dark-2
   );
-  --bs-a-button--transparent-disabled-border-color: var(
+  --bs-button--transparent-disabled-border-color: var(
     --bs-color-grayscale-dark-2
   );
-  --bs-a-button--transparent-disabled-box-shadow: none;
+  --bs-button--transparent-disabled-box-shadow: none;
 }
 .a-button--tab,
 .a-button--tab:visited {
-  background-color: var(--bs-a-button--tab-background-color);
-  border-color: var(--bs-a-button--tab-border-color);
-  box-shadow: var(--bs-a-button--tab-box-shadow);
-  color: var(--bs-a-button--tab-color);
+  background-color: var(--bs-button--tab-background-color);
+  border-color: var(--bs-button--tab-border-color);
+  box-shadow: var(--bs-button--tab-box-shadow);
+  color: var(--bs-button--tab-color);
 }
 .a-button--tab:focus,
 .a-button--tab:hover {
-  background-color: var(--bs-a-button--tab-hover-background-color);
-  border-color: var(--bs-a-button--tab-hover-border-color);
-  box-shadow: var(--bs-a-button--tab-hover-box-shadow);
-  color: var(--bs-a-button--tab-hover-color);
+  background-color: var(--bs-button--tab-hover-background-color);
+  border-color: var(--bs-button--tab-hover-border-color);
+  box-shadow: var(--bs-button--tab-hover-box-shadow);
+  color: var(--bs-button--tab-hover-color);
 }
 .a-button--tab:active {
-  background-color: var(--bs-a-button--tab-active-background-color);
-  border-color: var(--bs-a-button--tab-active-border-color);
-  box-shadow: var(--bs-a-button--tab-active-box-shadow);
-  color: var(--bs-a-button--tab-active-color);
+  background-color: var(--bs-button--tab-active-background-color);
+  border-color: var(--bs-button--tab-active-border-color);
+  box-shadow: var(--bs-button--tab-active-box-shadow);
+  color: var(--bs-button--tab-active-color);
 }
 .a-button--tab[aria-current],
 .a-button--tab[aria-expanded='true'],
 .a-button--tab[aria-pressed='true'],
 .a-button--tab[aria-selected='true'] {
-  background-color: var(--bs-a-button--tab-pressed-background-color);
-  border-color: var(--bs-a-button--tab-pressed-border-color);
-  box-shadow: var(--bs-a-button--tab-pressed-box-shadow);
-  color: var(--bs-a-button--tab-pressed-color);
+  background-color: var(--bs-button--tab-pressed-background-color);
+  border-color: var(--bs-button--tab-pressed-border-color);
+  box-shadow: var(--bs-button--tab-pressed-box-shadow);
+  color: var(--bs-button--tab-pressed-color);
 }
 .a-button--tab:disabled,
 .a-button--tab:disabled:focus,
@@ -1792,160 +1775,158 @@ table {
 .a-button--tab[aria-disabled='true'],
 .a-button--tab[aria-disabled='true']:focus,
 .a-button--tab[aria-disabled='true']:hover {
-  background-color: var(--bs-a-button--tab-disabled-background-color);
-  border-color: var(--bs-a-button--tab-disabled-border-color);
-  box-shadow: var(--bs-a-button--tab-disabled-box-shadow);
-  color: var(--bs-a-button--tab-disabled-color);
+  background-color: var(--bs-button--tab-disabled-background-color);
+  border-color: var(--bs-button--tab-disabled-border-color);
+  box-shadow: var(--bs-button--tab-disabled-box-shadow);
+  color: var(--bs-button--tab-disabled-color);
 }
 :root,
 [data-theme='default'] {
-  --bs-a-button--tab-color: var(--bs-color-grayscale-dark-1);
-  --bs-a-button--tab-background-color: transparent;
-  --bs-a-button--tab-box-shadow: none;
-  --bs-a-button--tab-icon-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--tab-hover-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--tab-hover-background-color: transparent;
-  --bs-a-button--tab-hover-box-shadow: none;
-  --bs-a-button--tab-active-color: var(--bs-color-brand-1-dark-1);
-  --bs-a-button--tab-active-background-color: transparent;
-  --bs-a-button--tab-active-box-shadow: none;
-  --bs-a-button--tab-pressed-color: var(--bs-color-brand-1-dark-2);
-  --bs-a-button--tab-pressed-background-color: transparent;
-  --bs-a-button--tab-pressed-box-shadow: none;
-  --bs-a-button--tab-disabled-color: var(--bs-color-grayscale-base);
-  --bs-a-button--tab-disabled-background-color: transparent;
-  --bs-a-button--tab-disabled-box-shadow: none;
+  --bs-button--tab-color: var(--bs-color-grayscale-dark-1);
+  --bs-button--tab-background-color: transparent;
+  --bs-button--tab-box-shadow: none;
+  --bs-button--tab-icon-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--tab-hover-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--tab-hover-background-color: transparent;
+  --bs-button--tab-hover-box-shadow: none;
+  --bs-button--tab-active-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--tab-active-background-color: transparent;
+  --bs-button--tab-active-box-shadow: none;
+  --bs-button--tab-pressed-color: var(--bs-color-brand-1-dark-2);
+  --bs-button--tab-pressed-background-color: transparent;
+  --bs-button--tab-pressed-box-shadow: none;
+  --bs-button--tab-disabled-color: var(--bs-color-grayscale-base);
+  --bs-button--tab-disabled-background-color: transparent;
+  --bs-button--tab-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
-  --bs-a-button--tab-color: var(--bs-color-grayscale-light-2);
-  --bs-a-button--tab-background-color: transparent;
-  --bs-a-button--tab-box-shadow: none;
-  --bs-a-button--tab-hover-color: var(--bs-color-brand-1-light-2);
-  --bs-a-button--tab-hover-background-color: transparent;
-  --bs-a-button--tab-hover-box-shadow: none;
-  --bs-a-button--tab-active-color: var(--bs-color-brand-1-light-3);
-  --bs-a-button--tab-active-background-color: transparent;
-  --bs-a-button--tab-active-box-shadow: none;
-  --bs-a-button--tab-pressed-color: var(--bs-color-grayscale-light-1);
-  --bs-a-button--tab-pressed-background-color: transparent;
-  --bs-a-button--tab-pressed-box-shadow: none;
-  --bs-a-button--tab-disabled-color: var(--bs-color-grayscale-dark-2);
-  --bs-a-button--tab-disabled-background-color: transparent;
-  --bs-a-button--tab-disabled-box-shadow: none;
+  --bs-button--tab-color: var(--bs-color-grayscale-light-2);
+  --bs-button--tab-background-color: transparent;
+  --bs-button--tab-box-shadow: none;
+  --bs-button--tab-hover-color: var(--bs-color-brand-1-light-2);
+  --bs-button--tab-hover-background-color: transparent;
+  --bs-button--tab-hover-box-shadow: none;
+  --bs-button--tab-active-color: var(--bs-color-brand-1-light-3);
+  --bs-button--tab-active-background-color: transparent;
+  --bs-button--tab-active-box-shadow: none;
+  --bs-button--tab-pressed-color: var(--bs-color-grayscale-light-1);
+  --bs-button--tab-pressed-background-color: transparent;
+  --bs-button--tab-pressed-box-shadow: none;
+  --bs-button--tab-disabled-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--tab-disabled-background-color: transparent;
+  --bs-button--tab-disabled-box-shadow: none;
 }
 .a-button--danger:focus,
 .a-button--danger:hover {
-  background-color: var(--bs-a-button--danger-hover-background-color);
-  border-color: var(--bs-a-button--danger-hover-border-color);
-  box-shadow: var(--bs-a-button--danger-hover-box-shadow);
-  color: var(--bs-a-button--danger-hover-color);
+  background-color: var(--bs-button--danger-hover-background-color);
+  border-color: var(--bs-button--danger-hover-border-color);
+  box-shadow: var(--bs-button--danger-hover-box-shadow);
+  color: var(--bs-button--danger-hover-color);
 }
 .a-button--danger:active {
-  background-color: var(--bs-a-button--danger-active-background-color);
-  border-color: var(--bs-a-button--danger-active-border-color);
-  box-shadow: var(--bs-a-button--danger-active-box-shadow);
-  color: var(--bs-a-button--danger-active-color);
+  background-color: var(--bs-button--danger-active-background-color);
+  border-color: var(--bs-button--danger-active-border-color);
+  box-shadow: var(--bs-button--danger-active-box-shadow);
+  color: var(--bs-button--danger-active-color);
 }
 .a-button--danger[aria-current],
 .a-button--danger[aria-expanded='true'],
 .a-button--danger[aria-pressed='true'],
 .a-button--danger[aria-selected='true'] {
-  background-color: var(--bs-a-button--danger-pressed-background-color);
-  border-color: var(--bs-a-button--danger-pressed-border-color);
-  box-shadow: var(--bs-a-button--danger-pressed-box-shadow);
-  color: var(--bs-a-button--danger-pressed-color);
+  background-color: var(--bs-button--danger-pressed-background-color);
+  border-color: var(--bs-button--danger-pressed-border-color);
+  box-shadow: var(--bs-button--danger-pressed-box-shadow);
+  color: var(--bs-button--danger-pressed-color);
 }
 :root,
 [data-theme='default'] {
-  --bs-a-button--danger-hover-color: var(--bs-color-grayscale-white);
-  --bs-a-button--danger-hover-background-color: var(--bs-color-danger-dark-1);
-  --bs-a-button--danger-hover-border-color: var(--bs-color-danger-dark-1);
-  --bs-a-button--danger-hover-box-shadow: none;
-  --bs-a-button--danger-active-color: var(--bs-color-danger-dark-1);
-  --bs-a-button--danger-active-background-color: var(--bs-color-danger-light-2);
-  --bs-a-button--danger-active-border-color: var(--bs-color-danger-light-2);
-  --bs-a-button--danger-active-box-shadow: none;
-  --bs-a-button--danger-pressed-color: var(--bs-color-danger-dark-2);
-  --bs-a-button--danger-pressed-background-color: var(
-    --bs-color-danger-light-2
-  );
-  --bs-a-button--danger-pressed-border-color: var(--bs-color-danger-light-2);
-  --bs-a-button--danger-pressed-box-shadow: none;
+  --bs-button--danger-hover-color: var(--bs-color-grayscale-white);
+  --bs-button--danger-hover-background-color: var(--bs-color-danger-dark-1);
+  --bs-button--danger-hover-border-color: var(--bs-color-danger-dark-1);
+  --bs-button--danger-hover-box-shadow: none;
+  --bs-button--danger-active-color: var(--bs-color-danger-dark-1);
+  --bs-button--danger-active-background-color: var(--bs-color-danger-light-2);
+  --bs-button--danger-active-border-color: var(--bs-color-danger-light-2);
+  --bs-button--danger-active-box-shadow: none;
+  --bs-button--danger-pressed-color: var(--bs-color-danger-dark-2);
+  --bs-button--danger-pressed-background-color: var(--bs-color-danger-light-2);
+  --bs-button--danger-pressed-border-color: var(--bs-color-danger-light-2);
+  --bs-button--danger-pressed-box-shadow: none;
 }
 .a-button {
-  --bs-a-button-padding-vertical: var(--bs-size-s2);
-  --bs-a-button-padding-horizontal: var(--bs-size-l1);
-  --bs-a-button-border-width: 0rem;
-  --bs-a-button-border-radius: var(--bs-size-s4);
-  --bs-a-button-min-height: 1em;
-  --bs-a-button-min-width: 0;
-  --bs-a-button-font-size: var(--bs-font-size-2);
-  --bs-a-button-font-weight: 600;
+  --bs-button-padding-vertical: var(--bs-size-s2);
+  --bs-button-padding-horizontal: var(--bs-size-l1);
+  --bs-button-border-width: 0rem;
+  --bs-button-border-radius: var(--bs-size-s4);
+  --bs-button-min-height: 1em;
+  --bs-button-min-width: 0;
+  --bs-button-font-size: var(--bs-font-size-2);
+  --bs-button-font-weight: 600;
 }
 .a-button.a-button--square {
-  --bs-a-button-min-width: calc(
+  --bs-button-min-width: calc(
     1em * var(--bs-line-height-5) + var(--bs-size-s2) * 2
   );
-  --bs-a-button-min-height: calc(
+  --bs-button-min-height: calc(
     1em * var(--bs-line-height-5) + var(--bs-size-s2) * 2
   );
-  --bs-a-button-padding-horizontal: var(--bs-size-s2);
-  --bs-a-button-padding-vertical: var(--bs-size-s2);
+  --bs-button-padding-horizontal: var(--bs-size-s2);
+  --bs-button-padding-vertical: var(--bs-size-s2);
 }
 .a-button--small {
-  --bs-a-button-padding-vertical: var(--bs-size-s4);
-  --bs-a-button-padding-horizontal: var(--bs-size-m);
-  --bs-a-button-min-height: var(--bs-size-l1);
-  --bs-a-button-min-width: var(--bs-size-l2);
-  --bs-a-button-font-weight: 500;
+  --bs-button-padding-vertical: var(--bs-size-s4);
+  --bs-button-padding-horizontal: var(--bs-size-m);
+  --bs-button-min-height: var(--bs-size-l1);
+  --bs-button-min-width: var(--bs-size-l2);
+  --bs-button-font-weight: 500;
 }
 .a-button--small.a-button--square {
-  --bs-a-button-min-width: calc(
+  --bs-button-min-width: calc(
     1em * var(--bs-line-height-5) + var(--bs-size-s4) * 2
   );
-  --bs-a-button-min-height: calc(
+  --bs-button-min-height: calc(
     1em * var(--bs-line-height-5) + var(--bs-size-s4) * 2
   );
-  --bs-a-button-padding-horizontal: var(--bs-size-s4);
-  --bs-a-button-padding-vertical: var(--bs-size-s4);
+  --bs-button-padding-horizontal: var(--bs-size-s4);
+  --bs-button-padding-vertical: var(--bs-size-s4);
 }
 .a-button--x-small {
-  --bs-a-button-padding-vertical: var(--bs-size-s6);
-  --bs-a-button-padding-horizontal: var(--bs-size-s2);
-  --bs-a-button-font-weight: 500;
+  --bs-button-padding-vertical: var(--bs-size-s6);
+  --bs-button-padding-horizontal: var(--bs-size-s2);
+  --bs-button-font-weight: 500;
 }
 .a-button--x-small.a-button--square {
-  --bs-a-button-min-width: calc(
+  --bs-button-min-width: calc(
     1em * var(--bs-line-height-5) + var(--bs-size-s6) * 2
   );
-  --bs-a-button-min-height: calc(
+  --bs-button-min-height: calc(
     1em * var(--bs-line-height-5) + var(--bs-size-s6) * 2
   );
-  --bs-a-button-padding-horizontal: var(--bs-size-s6);
-  --bs-a-button-padding-vertical: var(--bs-size-s6);
+  --bs-button-padding-horizontal: var(--bs-size-s6);
+  --bs-button-padding-vertical: var(--bs-size-s6);
 }
 .a-button--transparent {
-  --bs-a-button-border-width: 0.1875rem;
+  --bs-button-border-width: 0.1875rem;
 }
 .a-button--outline {
-  --bs-a-button-border-width: 0.1875rem;
+  --bs-button-border-width: 0.1875rem;
 }
 .a-button--menu {
-  --bs-a-button-border-radius: 0;
-  --bs-a-button-justify-content: flex-start;
+  --bs-button-border-radius: 0;
+  --bs-button-justify-content: flex-start;
 }
 .a-button--tab {
-  --bs-a-button-border-radius: 0;
+  --bs-button-border-radius: 0;
 }
 .a-button--square {
-  --bs-a-button-padding-vertical: calc(var(--bs-size-s2) + var(--bs-size-s7));
-  --bs-a-button-padding-horizontal: calc(var(--bs-size-s2) + var(--bs-size-s7));
+  --bs-button-padding-vertical: calc(var(--bs-size-s2) + var(--bs-size-s7));
+  --bs-button-padding-horizontal: calc(var(--bs-size-s2) + var(--bs-size-s7));
 }
 .a-button--round {
-  --bs-a-button-border-radius: 9999rem;
+  --bs-button-border-radius: 9999rem;
 }
 .a-button--tab-container > :first-child {
-  margin-left: calc(var(--bs-a-button-padding-horizontal) * -1);
+  margin-left: calc(var(--bs-button-padding-horizontal) * -1);
 }
 .a-button--tab {
   position: relative;
@@ -1982,7 +1963,7 @@ table {
   background-color: var(--bs-color-grayscale-base);
 }
 .a-button--tab .a-icon {
-  color: var(--bs-a-button--tab-icon-color, currentcolor);
+  color: var(--bs-button--tab-icon-color, currentcolor);
 }
 .a-card {
   border-radius: var(--bs-size-s1);
@@ -2520,25 +2501,25 @@ table {
 }
 .o-joined-ui > .a-button:first-child,
 .o-joined-ui > :first-child .a-button {
-  --bs-a-button-box-shadow: none;
-  --bs-a-button-border-top-right-radius: 0;
-  --bs-a-button-border-bottom-right-radius: 0;
-  margin-right: calc(var(--bs-a-button-border-width) * -1);
+  --bs-button-box-shadow: none;
+  --bs-button-border-top-right-radius: 0;
+  --bs-button-border-bottom-right-radius: 0;
+  margin-right: calc(var(--bs-button-border-width) * -1);
 }
 .o-joined-ui > .a-button:last-child,
 .o-joined-ui > :last-child .a-button {
-  --bs-a-button-box-shadow: none;
-  --bs-a-button-border-top-left-radius: 0;
-  --bs-a-button-border-bottom-left-radius: 0;
+  --bs-button-box-shadow: none;
+  --bs-button-border-top-left-radius: 0;
+  --bs-button-border-bottom-left-radius: 0;
   margin-right: 0;
 }
 .o-joined-ui > .a-button:not(:first-child):not(:last-child),
 .o-joined-ui > :not(:first-child):not(:last-child) .a-button {
-  --bs-a-button-border-top-left-radius: 0;
-  --bs-a-button-border-top-right-radius: 0;
-  --bs-a-button-border-bottom-right-radius: 0;
-  --bs-a-button-border-bottom-left-radius: 0;
-  margin-right: calc(var(--bs-a-button-border-width) * -1);
+  --bs-button-border-top-left-radius: 0;
+  --bs-button-border-top-right-radius: 0;
+  --bs-button-border-bottom-right-radius: 0;
+  --bs-button-border-bottom-left-radius: 0;
+  margin-right: calc(var(--bs-button-border-width) * -1);
 }
 .u-aspect-ratio-1-1 {
   aspect-ratio: 1/1;