From 9fead7e0c6b2661f3895f81430aad74487f99d5d Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Wed, 12 Apr 2023 12:04:33 +0200
Subject: [PATCH 01/21] [#762] Inputs

https://github.com/bitcrowd/bitstyles/issues/762

From b90c34bd84bcd8f95aef542489211d94f53b93e2 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Wed, 12 Apr 2023 17:00:59 +0200
Subject: [PATCH 02/21] - Structuring the button custom properties to make
 variants work better, and to be more usable in situations like joined-ui -
 turning off prettier in more files, as it makes the Sass unreadable

---
 .../bitstyles/atoms/button-colors/_index.scss | 30 ++++++----
 scss/bitstyles/atoms/button/_index.scss       | 18 +++++-
 scss/bitstyles/base/input-text/_index.scss    | 15 +++--
 scss/bitstyles/tools/_button.scss             | 47 +++++----------
 scss/bitstyles/tools/_custom-property.scss    |  2 +-
 scss/bitstyles/ui/buttons.stories.mdx         | 57 +++++++++++++++++++
 6 files changed, 118 insertions(+), 51 deletions(-)

diff --git a/scss/bitstyles/atoms/button-colors/_index.scss b/scss/bitstyles/atoms/button-colors/_index.scss
index b5a0fd322..93f7a8793 100644
--- a/scss/bitstyles/atoms/button-colors/_index.scss
+++ b/scss/bitstyles/atoms/button-colors/_index.scss
@@ -7,8 +7,16 @@
 @use '../../tools/themes';
 @use 'sass:map';
 
+/* prettier-ignore */
+
 @each $variant-name, $variant-themes in settings.$variants {
   $variant-default-theme: map.get($variant-themes, 'default');
+  $button-name: '';
+  @if $variant-name == '' {
+    $button-name: 'button--primary';
+  } @else {
+    $button-name: 'button#{$variant-name}';
+  }
 
   /* stylelint-disable custom-property-pattern, max-nesting-depth */
   #{classname.get($classname-items: 'button#{$variant-name}', $layer: 'atom')} {
@@ -16,8 +24,8 @@
       &,
       &:visited {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', $property)
+          #{design-token.get('button', $property)}: var(
+            design-token.get($button-name, $property)
           );
         }
       }
@@ -27,8 +35,8 @@
       &:hover,
       &:focus {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', 'hover', $property)
+          #{design-token.get('button', 'hover', $property)}: var(
+            design-token.get($button-name, 'hover', $property)
           );
         }
       }
@@ -37,8 +45,8 @@
     @if map.has-key($variant-default-theme, 'active') {
       &:active {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', 'active', $property)
+          #{design-token.get('button', 'active', $property)}: var(
+            design-token.get($button-name, 'active', $property)
           );
         }
       }
@@ -50,8 +58,8 @@
       &[aria-selected='true'],
       &[aria-current] {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', 'pressed', $property)
+          #{design-token.get('button', 'pressed', $property)}: var(
+            design-token.get($button-name, 'pressed', $property)
           );
         }
       }
@@ -65,8 +73,8 @@
       &:disabled:focus,
       &[aria-disabled='true']:focus {
         @each $property in button-settings.$allowed-color-properties {
-          #{$property}: var(
-            design-token.get('button#{$variant-name}', 'disabled', $property)
+          #{design-token.get('button', 'disabled', $property)}: var(
+            design-token.get($button-name, 'disabled', $property)
           );
         }
       }
@@ -76,7 +84,7 @@
 
   @each $theme-name, $theme in $variant-themes {
     @include themes.get($theme-name) {
-      @include button.colors($colors: $theme, $variant-name: $variant-name);
+      @include button.colors($colors: $theme, $variant-name: $button-name);
     }
   }
 }
diff --git a/scss/bitstyles/atoms/button/_index.scss b/scss/bitstyles/atoms/button/_index.scss
index 9a54be28d..bfa862c68 100644
--- a/scss/bitstyles/atoms/button/_index.scss
+++ b/scss/bitstyles/atoms/button/_index.scss
@@ -13,8 +13,6 @@
   #{design-token.get('button', 'border-top-left-radius')}: var(design-token.get('button', 'border-radius'));
   #{design-token.get('button', 'transition')}: settings.$transition;
   #{design-token.get('button', 'justify-content')}: settings.$justify-content;
-  #{design-token.get('button', 'transition')}: settings.$transition;
-  #{design-token.get('button', 'justify-content')}: settings.$justify-content;
   display: flex;
   position: relative;
   flex-shrink: 0;
@@ -36,7 +34,11 @@
     var(design-token.get('button', 'border-top-right-radius'))
     var(design-token.get('button', 'border-bottom-right-radius'))
     var(design-token.get('button', 'border-bottom-left-radius'));
+  border-color: var(#{design-token.get($items: ('button', 'border-color'))});
   outline-offset: 0;
+  background-color: var(#{custom-property.get($items: ('button', 'background-color'))});
+  box-shadow: var(#{custom-property.get($items: ('button', 'box-shadow'))});
+  color: var(#{custom-property.get($items: ('button', 'color'))});
   font-family: settings.$font-family;
   font-size: var(design-token.get('button', 'font-size'));
   font-weight: var(design-token.get('button', 'font-weight'));
@@ -51,7 +53,11 @@
   &:hover,
   &:focus {
     z-index: 1;
+    border-color: var(#{custom-property.get($items: ('button', 'hover', 'border-color'))});
     outline-width: 0;
+    background-color: var(#{custom-property.get($items: ('button', 'hover', 'background-color'))});
+    box-shadow: var(#{custom-property.get($items: ('button', 'hover', 'box-shadow'))});
+    color: var(#{custom-property.get($items: ('button', 'hover', 'color'))});
     text-decoration: none;
   }
 
@@ -66,6 +72,10 @@
   &[aria-selected='true'],
   &[aria-current] {
     z-index: 2;
+    border-color: var(#{custom-property.get($items: ('button', 'pressed', 'border-color'))});
+    background-color: var(#{custom-property.get($items: ('button', 'pressed', 'background-color'))});
+    box-shadow: var(#{custom-property.get($items: ('button', 'pressed', 'box-shadow'))});
+    color: var(#{custom-property.get($items: ('button', 'pressed', 'color'))});
   }
 
   &:disabled,
@@ -74,6 +84,10 @@
   &[aria-disabled='true']:hover,
   &:disabled:focus,
   &[aria-disabled='true']:focus {
+    border-color: var(#{custom-property.get($items: ('button', 'disabled', 'border-color'))});
+    background-color: var(#{custom-property.get($items: ('button', 'disabled', 'background-color'))});
+    box-shadow: var(#{custom-property.get($items: ('button', 'disabled', 'box-shadow'))});
+    color: var(#{custom-property.get($items: ('button', 'disabled', 'color'))});
     cursor: not-allowed;
   }
 }
diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
index 576de4f44..278a8f91e 100644
--- a/scss/bitstyles/base/input-text/_index.scss
+++ b/scss/bitstyles/base/input-text/_index.scss
@@ -21,9 +21,8 @@ input {
   }
 }
 
-/*
- * Selects all the text-like input types. We’re avoiding using e.g. `input[type="text"]` as it means we cannot use a single class later on
- */
+/* prettier-ignore */
+
 [type='text'],
 [type='email'],
 [type='number'],
@@ -37,11 +36,19 @@ input {
 [type='time'],
 [type='url'],
 textarea {
+  #{custom-property.get($items: ('input-text', 'border-top-right-radius'))}: settings.$border-radius;
+  #{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))}: settings.$border-radius;
+  #{custom-property.get($items: ('input-text', 'border-bottom-left-radius'))}: settings.$border-radius;
+  #{custom-property.get($items: ('input-text', 'border-top-left-radius'))}: settings.$border-radius;
   display: block;
   width: 100%;
   padding: settings.$padding-vertical settings.$padding-horizontal;
   border: settings.$border-width solid settings.$border-color;
-  border-radius: settings.$border-radius;
+  border-radius:
+    var(#{custom-property.get($items: ('input-text', 'border-top-left-radius'))})
+    var(#{custom-property.get($items: ('input-text', 'border-top-right-radius'))})
+    var(#{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))})
+    var(#{custom-property.get($items: ('input-text', 'border-bottom-left-radius'))});
   background-color: settings.$background;
   box-shadow: settings.$box-shadow;
   color: settings.$color;
diff --git a/scss/bitstyles/tools/_button.scss b/scss/bitstyles/tools/_button.scss
index 7610b7a11..4ce9db2d2 100644
--- a/scss/bitstyles/tools/_button.scss
+++ b/scss/bitstyles/tools/_button.scss
@@ -6,8 +6,9 @@
 @use './design-token';
 @use './custom-properties';
 
+/* prettier-ignore */
+
 @mixin colors($colors, $variant-name) {
-  $button-name: 'button#{$variant-name}';
   $allow-list: list.join(
     settings.$allowed-color-properties,
     settings.$extra-color-properties
@@ -17,9 +18,7 @@
     @include custom-properties.output-filtered(
       $properties: map.get($colors, 'default'),
       $allow-list: $allow-list,
-      $module-name: (
-        $button-name,
-      )
+      $module-name: ($variant-name)
     );
   }
 
@@ -27,10 +26,7 @@
     @include custom-properties.output-filtered(
       $properties: map.get($colors, 'hover'),
       $allow-list: $allow-list,
-      $module-name: (
-        $button-name,
-        'hover',
-      )
+      $module-name: ($variant-name, 'hover')
     );
   }
 
@@ -38,10 +34,7 @@
     @include custom-properties.output-filtered(
       $properties: map.get($colors, 'active'),
       $allow-list: $allow-list,
-      $module-name: (
-        $button-name,
-        'active',
-      )
+      $module-name: ($variant-name, 'active')
     );
   }
 
@@ -49,10 +42,7 @@
     @include custom-properties.output-filtered(
       $properties: map.get($colors, 'pressed'),
       $allow-list: $allow-list,
-      $module-name: (
-        $button-name,
-        'pressed',
-      )
+      $module-name: ($variant-name, 'pressed')
     );
   }
 
@@ -60,19 +50,18 @@
     @include custom-properties.output-filtered(
       $properties: map.get($colors, 'disabled'),
       $allow-list: $allow-list,
-      $module-name: (
-        $button-name,
-        'disabled',
-      )
+      $module-name: ($variant-name, 'disabled')
     );
   }
 }
 
+/* prettier-ignore */
+
 @mixin sizes($sizes, $with-square-variant: true) {
   @include custom-properties.output-filtered(
     $properties: $sizes,
     $allow-list: settings.$allowed-shape-properties,
-    $module-name: 'button'
+    $module-name: 'button',
   );
 
   @each $property-name in (settings.$allowed-shape-properties) {
@@ -88,18 +77,8 @@
     $min-height-property: design-token.get('button', 'min-height');
 
     &#{classname.get($classname-items: 'button--square', $layer: 'atom')} {
-      #{$min-width-property}: calc(
-        1em *
-          var(#{$line-height-property}) +
-          2 *
-          #{map.get($sizes, 'padding-vertical')}
-      );
-      #{$min-height-property}: calc(
-        1em *
-          var(#{$line-height-property}) +
-          2 *
-          #{map.get($sizes, 'padding-vertical')}
-      );
+      #{$min-width-property}: #{calc(1em * var(#{$line-height-property}) + 2 * #{map.get($sizes, 'padding-vertical')})};
+      #{$min-height-property}: #{calc(1em * var(#{$line-height}) + 2 * #{map.get($sizes, 'padding-vertical')})};
 
       @if map.has-key($sizes, 'padding-vertical') {
         #{design-token.get('button', 'padding-horizontal')}: map.get(
@@ -110,6 +89,8 @@
           $sizes,
           'padding-vertical'
         );
+        #{design-token.get('button', 'padding-horizontal')}: #{map.get($sizes, 'padding-vertical')};
+        #{design-token.get('button', 'padding-vertical')}: #{map.get($sizes, 'padding-vertical')};
       }
     }
   }
diff --git a/scss/bitstyles/tools/_custom-property.scss b/scss/bitstyles/tools/_custom-property.scss
index 8b0ed43a3..bf0dd7eb4 100644
--- a/scss/bitstyles/tools/_custom-property.scss
+++ b/scss/bitstyles/tools/_custom-property.scss
@@ -3,7 +3,7 @@
 @use 'sass:list';
 
 @function name($items...) {
-  $string-items: list.join((setup.$custom-property-namespace), $items);
+  $string-items: list.join(setup.$custom-property-namespace, $items);
   $custom-property-name: string.join-with-dashes(
     $string-items: $string-items,
   );
diff --git a/scss/bitstyles/ui/buttons.stories.mdx b/scss/bitstyles/ui/buttons.stories.mdx
index f9fbaf2a1..5719cb61d 100644
--- a/scss/bitstyles/ui/buttons.stories.mdx
+++ b/scss/bitstyles/ui/buttons.stories.mdx
@@ -3,6 +3,63 @@ import icons from '../../../assets/images/icons.svg';
 
 <Meta title="UI/Buttons/Overview" />
 
+<div class="u-grid u-grid-cols-1 u-gap-m u-overflow-x-auto u-padding-l5-bottom">
+  <div class="u-flex u-items-center u-gap-m">
+    <Story id="atoms-button--x-small-primary" />
+    <Story id="atoms-button--x-small-secondary" />
+    <Story id="atoms-button--x-small-transparent" />
+    <Story id="atoms-button--x-small-outline" />
+    <Story id="atoms-button--x-small-danger-primary" />
+    <Story id="atoms-button--x-small-danger-secondary" />
+    <Story id="atoms-button--x-small-danger-transparent" />
+    <Story id="atoms-button--x-small-danger-outline" />
+    <Story id="atoms-button--x-small-square-primary" />
+    <Story id="atoms-button--x-small-square-secondary" />
+    <Story id="atoms-button--x-small-square-transparent" />
+    <Story id="atoms-button--x-small-square-outline" />
+    <Story id="atoms-button--x-small-round-primary" />
+    <Story id="atoms-button--x-small-round-secondary" />
+    <Story id="atoms-button--x-small-round-transparent" />
+    <Story id="atoms-button--x-small-round-outline" />
+  </div>
+  <div class="u-flex u-items-center u-gap-m">
+    <Story id="atoms-button--small-primary" />
+    <Story id="atoms-button--small-secondary" />
+    <Story id="atoms-button--small-transparent" />
+    <Story id="atoms-button--small-outline" />
+    <Story id="atoms-button--small-danger-primary" />
+    <Story id="atoms-button--small-danger-secondary" />
+    <Story id="atoms-button--small-danger-transparent" />
+    <Story id="atoms-button--small-danger-outline" />
+    <Story id="atoms-button--small-square-primary" />
+    <Story id="atoms-button--small-square-secondary" />
+    <Story id="atoms-button--small-square-transparent" />
+    <Story id="atoms-button--small-square-outline" />
+    <Story id="atoms-button--small-round-primary" />
+    <Story id="atoms-button--small-round-secondary" />
+    <Story id="atoms-button--small-round-transparent" />
+    <Story id="atoms-button--small-round-outline" />
+  </div>
+  <div class="u-flex u-items-center u-gap-m">
+    <Story id="atoms-button--default-primary" />
+    <Story id="atoms-button--default-secondary" />
+    <Story id="atoms-button--default-transparent" />
+    <Story id="atoms-button--default-outline" />
+    <Story id="atoms-button--default-danger-primary" />
+    <Story id="atoms-button--default-danger-secondary" />
+    <Story id="atoms-button--default-danger-transparent" />
+    <Story id="atoms-button--default-danger-outline" />
+    <Story id="atoms-button--default-square-primary" />
+    <Story id="atoms-button--default-square-secondary" />
+    <Story id="atoms-button--default-square-transparent" />
+    <Story id="atoms-button--default-square-outline" />
+    <Story id="atoms-button--default-round-primary" />
+    <Story id="atoms-button--default-round-secondary" />
+    <Story id="atoms-button--default-round-transparent" />
+    <Story id="atoms-button--default-round-outline" />
+  </div>
+</div>
+
 # Buttons
 
 See [Atoms/Button](/docs/atoms-button-overview--page) for general information on buttons.

From 2c791d1b6c6dc999728b14b03fc643578ebd28df Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Thu, 13 Apr 2023 12:12:46 +0200
Subject: [PATCH 03/21] - Text input styles - stories and a component for
 inputs

---
 .storybook/helpers.js                         |   4 +-
 scss/bitstyles/base/input-text/Input.js       |  15 +
 scss/bitstyles/base/input-text/Textarea.js    |  15 +
 .../base/input-text/Textarea.stories.js       |  54 ++++
 scss/bitstyles/base/input-text/_index.scss    |  16 ++
 scss/bitstyles/base/input-text/_settings.scss |  58 ++--
 .../base/input-text/input-text.stories.mdx    |  87 +++---
 .../base/input-text/input.stories.js          | 262 ++++++++++++++++++
 8 files changed, 424 insertions(+), 87 deletions(-)
 create mode 100644 scss/bitstyles/base/input-text/Input.js
 create mode 100644 scss/bitstyles/base/input-text/Textarea.js
 create mode 100644 scss/bitstyles/base/input-text/Textarea.stories.js
 create mode 100644 scss/bitstyles/base/input-text/input.stories.js

diff --git a/.storybook/helpers.js b/.storybook/helpers.js
index 4f76fc66f..ea71430c2 100644
--- a/.storybook/helpers.js
+++ b/.storybook/helpers.js
@@ -13,12 +13,12 @@ function capitalizeFirstLetter(string) {
 
 export const generateLabel = (items) => capitalizeFirstLetter(items.join(' '));
 
-export const generateButtonLabel = (
+export const generateButtonLabel = ({
   shapeVariant = [],
   colorVariant = [],
   disabled = false,
   pressed = false
-) =>
+}) =>
   capitalizeFirstLetter(
     [
       shapeVariant.length === 0 ? 'default' : shapeVariant.join(' '),
diff --git a/scss/bitstyles/base/input-text/Input.js b/scss/bitstyles/base/input-text/Input.js
new file mode 100644
index 000000000..57503adff
--- /dev/null
+++ b/scss/bitstyles/base/input-text/Input.js
@@ -0,0 +1,15 @@
+export default ({
+  value = '',
+  placeholder = '',
+  disabled = false,
+  ariaInvalid = false,
+  type = 'text',
+}) => {
+  const input = document.createElement('input');
+  input.type = type;
+  input.value = value;
+  input.placeholder = placeholder;
+  if (disabled) input.setAttribute('disabled', disabled);
+  if (ariaInvalid) input.setAttribute('aria-invalid', ariaInvalid);
+  return input;
+};
diff --git a/scss/bitstyles/base/input-text/Textarea.js b/scss/bitstyles/base/input-text/Textarea.js
new file mode 100644
index 000000000..90864da8a
--- /dev/null
+++ b/scss/bitstyles/base/input-text/Textarea.js
@@ -0,0 +1,15 @@
+export default ({
+  value = '',
+  placeholder = '',
+  disabled = false,
+  ariaInvalid = false,
+}) => {
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.placeholder = placeholder;
+  textarea.setAttribute('rows', '5');
+  textarea.setAttribute('cols', '30');
+  if (disabled) textarea.setAttribute('disabled', disabled);
+  if (ariaInvalid) textarea.setAttribute('aria-invalid', ariaInvalid);
+  return textarea;
+};
diff --git a/scss/bitstyles/base/input-text/Textarea.stories.js b/scss/bitstyles/base/input-text/Textarea.stories.js
new file mode 100644
index 000000000..5d1c3ecac
--- /dev/null
+++ b/scss/bitstyles/base/input-text/Textarea.stories.js
@@ -0,0 +1,54 @@
+import Textarea from './Textarea';
+import { generateLabel } from '../../../../.storybook/helpers';
+
+export default {
+  title: 'Base/Textarea',
+  component: Textarea,
+  argTypes: {},
+};
+
+const Template = (args) => Textarea(args);
+
+// ***** Textareas with values ****************** //
+
+export const Base = Template.bind({});
+Base.args = {
+  value: generateLabel(['textarea']),
+  placeholder: generateLabel(['textarea', 'placeholder']),
+};
+
+export const Invalid = Template.bind({});
+Invalid.args = {
+  value: generateLabel(['textarea']),
+  ariaInvalid: true,
+  placeholder: generateLabel(['textarea', 'invalid', 'placeholder']),
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  value: generateLabel(['textarea']),
+  disabled: true,
+  placeholder: generateLabel(['textarea', 'invalid', 'placeholder']),
+};
+
+// ***** Textareas without values ****************** //
+
+export const Empty = Template.bind({});
+Empty.args = {
+  value: '',
+  placeholder: generateLabel(['textarea', 'empty', 'placeholder']),
+};
+
+export const InvalidEmpty = Template.bind({});
+InvalidEmpty.args = {
+  value: '',
+  ariaInvalid: true,
+  placeholder: generateLabel(['textarea', 'empty', 'placeholder']),
+};
+
+export const DisabledEmpty = Template.bind({});
+DisabledEmpty.args = {
+  value: '',
+  disabled: true,
+  placeholder: generateLabel(['textarea', 'empty', 'placeholder']),
+};
diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
index 278a8f91e..24760eacd 100644
--- a/scss/bitstyles/base/input-text/_index.scss
+++ b/scss/bitstyles/base/input-text/_index.scss
@@ -59,6 +59,10 @@ textarea {
     background-color: settings.$background-hover;
     box-shadow: settings.$box-shadow-hover;
     color: settings.$color-hover;
+
+    &::placeholder {
+      color: settings.$placeholder-color-hover;
+    }
   }
 
   &:active,
@@ -68,6 +72,10 @@ textarea {
     background-color: settings.$background-active;
     box-shadow: settings.$box-shadow-active;
     color: settings.$color-active;
+
+    &::placeholder {
+      color: settings.$placeholder-color-active;
+    }
   }
 
   &:invalid,
@@ -76,6 +84,10 @@ textarea {
     background-color: settings.$background-color-invalid;
     box-shadow: settings.$box-shadow-invalid;
     color: settings.$color-invalid;
+
+    &::placeholder {
+      color: settings.$placeholder-color-invalid;
+    }
   }
 
   &:disabled {
@@ -84,6 +96,10 @@ textarea {
     box-shadow: settings.$box-shadow-disabled;
     color: settings.$color-disabled;
     cursor: default;
+
+    &::placeholder {
+      color: settings.$placeholder-color-disabled;
+    }
   }
 }
 /* stylelint-enable selector-max-type */
diff --git a/scss/bitstyles/base/input-text/_settings.scss b/scss/bitstyles/base/input-text/_settings.scss
index 1b0454d5e..4b49dfd04 100644
--- a/scss/bitstyles/base/input-text/_settings.scss
+++ b/scss/bitstyles/base/input-text/_settings.scss
@@ -4,10 +4,10 @@
 //
 // Base styles ////////////////////////////////////////
 
-$padding-vertical: var(design-token.get('size', 's5')) !default;
-$padding-horizontal: var(design-token.get('size', 's5')) !default;
-$border-radius: var(design-token.get('size', 's5')) !default;
-$border-width: var(design-token.get('size', 's7')) !default;
+$padding-vertical: var(design-token.get('size', 's3')) !default;
+$padding-horizontal: var(design-token.get('size', 'm')) !default;
+$border-radius: var(design-token.get('size', 's4')) !default;
+$border-width: 0.1875rem !default;
 $font: inherit !default;
 $placeholder-font-style: italic !default;
 $placeholder-font-weight: var(
@@ -20,74 +20,68 @@ $placeholder-color: var(
 //
 // Base colors ////////////////////////////////////////
 
-$color: var(design-token.get('color', 'grayscale')) !default;
-$border-color: var(design-token.get('color', 'grayscale')) !default;
+$color: var(design-token.get('color', 'grayscale', 'dark-4')) !default;
+$border-color: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
 $background: var(design-token.get('color', 'grayscale', 'white')) !default;
-$box-shadow: shadow.to-box-shadow(
-  shadow.generate(
-    $color:
-      rgba(var(design-token.get('color', 'grayscale', 'light-1-rgb')), 0.025),
-    $blur-radius: var(design-token.get('size', 's5')),
-  )
-) !default;
+$box-shadow: none !default;
+$placeholder-color: palette.get('grayscale') !default;
 
 //
 // Hover colors ////////////////////////////////////////
 
-$color-hover: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
-$background-hover: var(design-token.get('color', 'grayscale')) !default;
+$color-hover: var(design-token.get('color', 'grayscale', 'dark-4')) !default;
+$background-hover: var(design-token.get('color', 'grayscale', 'white')) !default;
 $border-color-hover: var(
-  design-token.get('color', 'grayscale', 'dark-1')
+  design-token.get('color', 'grayscale', 'dark-2')
 ) !default;
 $box-shadow-hover: shadow.to-box-shadow(
   shadow.generate(
     $color:
-      rgba(var(design-token.get('color', 'brand-1', 'light-1-rgb')), 0.025),
-    $blur-radius: var(design-token.get('size', 's2')),
+      rgba(var(design-token.get('color', 'brand-1', 'dark-2-rgb')), 0.025),
+    $blur-radius: var(design-token.get('size', 's4')),
   )
 ) !default;
+$placeholder-color-hover: palette.get('grayscale', 'dark-1') !default;
 
 //
 // Active colors ////////////////////////////////////////
 
-$color-active: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
+$color-active: var(design-token.get('color', 'grayscale', 'dark-4')) !default;
 $background-active: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-active: var(
-  design-token.get('color', 'grayscale', 'dark-1')
+  design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
 $box-shadow-active: shadow.to-box-shadow(
   shadow.generate(
     $color:
-      rgba(var(design-token.get('color', 'brand-1', 'light-1-rgb')), 0.075),
-    $blur-radius: var(design-token.get('size', 's6')),
+      rgba(var(design-token.get('color', 'brand-1', 'dark-2-rgb')), 0.075),
+    $blur-radius: var(design-token.get('size', 's4')),
   )
 ) !default;
+$placeholder-color-active: palette.get('brand-1') !default;
 
 //
 // Disabled colors ////////////////////////////////////////
 
 $color-disabled: var(design-token.get('color', 'grayscale')) !default;
 $background-disabled: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale', 'light-4')
 ) !default;
 $border-color-disabled: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale', 'light-1')
 ) !default;
 $box-shadow-disabled: none !default;
+$placeholder-color-disabled: palette.get('grayscale', 'light-1') !default;
 
 //
 // Invalid colors ////////////////////////////////////////
 
-$color-invalid: var(design-token.get('color', 'warning')) !default;
+$color-invalid: var(design-token.get('color', 'warning', 'dark-4')) !default;
 $background-color-invalid: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
-$border-color-invalid: var(design-token.get('color', 'warning')) !default;
-$box-shadow-invalid: shadow.to-box-shadow(
-  shadow.generate(
-    $color: rgba(var(design-token.get('color', 'warning', 'rgb')), 0.05),
-    $blur-radius: var(design-token.get('size', 's4')),
-  )
-) !default;
+$border-color-invalid: var(design-token.get('color', 'warning', 'dark-1')) !default;
+$box-shadow-invalid: none !default;
+$placeholder-color-invalid: palette.get('brand-1', 'light-1') !default;
diff --git a/scss/bitstyles/base/input-text/input-text.stories.mdx b/scss/bitstyles/base/input-text/input-text.stories.mdx
index 8dfe8398d..396a608f6 100644
--- a/scss/bitstyles/base/input-text/input-text.stories.mdx
+++ b/scss/bitstyles/base/input-text/input-text.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-<Meta title="Base/Text inputs" />
+<Meta title="Base/Text inputs/Overview" />
 
 # Base input types
 
@@ -11,74 +11,55 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 ## Input - text
 
 <Canvas isColumn>
-  <Story name="Input - text">
-    {`
-      <input type="text" placeholder="Jelly cake marshmallow">
-    `}
-  </Story>
-  <Story name="Input - text (disabled)">
-    {`
-      <input type="text" placeholder="Jelly cake marshmallow" disabled>
-    `}
-  </Story>
+  <Story id="base-input--text" />
+  <Story id="base-input--text-invalid" />
+  <Story id="base-input--text-disabled" />
+</Canvas>
+
+<Canvas isColumn>
+  <Story id="base-input--text-empty" />
+  <Story id="base-input--text-invalid-empty" />
+  <Story id="base-input--text-disabled-empty" />
 </Canvas>
 
 ## Input - email
 
 <Canvas isColumn>
-  <Story name="Input - email">
-    {`
-      <input type="email" placeholder="jellycake@marshmallow.com">
-    `}
-  </Story>
-  <Story name="Input - email (disabled)">
-    {`
-      <input type="email" placeholder="jellycake@marshmallow.com" disabled>
-    `}
-  </Story>
+  <Story id="base-input--email" />
+  <Story id="base-input--email-invalid" />
+  <Story id="base-input--email-disabled" />
+</Canvas>
+
+<Canvas isColumn>
+  <Story id="base-input--email-empty" />
+  <Story id="base-input--email-invalid-empty" />
+  <Story id="base-input--email-disabled-empty" />
 </Canvas>
 
 ## Input - number
 
 <Canvas isColumn>
-  <Story name="Input - number">
-    {`
-      <input type="number" placeholder="123456789">
-    `}
-  </Story>
-  <Story name="Input - number (disabled)">
-    {`
-      <input type="number" placeholder="123456789" disabled>
-    `}
-  </Story>
+  <Story id="base-input--number" />
+  <Story id="base-input--number-invalid" />
+  <Story id="base-input--number-disabled" />
 </Canvas>
 
-## Input - range
-
 <Canvas isColumn>
-  <Story name="Input - range">
-    {`
-      <input type="range" min="0" max="10" step="1">
-    `}
-  </Story>
-  <Story name="Input - range (disabled)">
-    {`
-      <input type="range" min="0" max="10" step="1" disabled>
-    `}
-  </Story>
+  <Story id="base-input--number-empty" />
+  <Story id="base-input--number-invalid-empty" />
+  <Story id="base-input--number-disabled-empty" />
 </Canvas>
 
 ## Textarea
 
 <Canvas isColumn>
-  <Story name="Textarea">
-    {`
-      <textarea rows="5" cols="30" placeholder="Placeholder text">Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
-    `}
-  </Story>
-  <Story name="Textarea (disabled)">
-    {`
-      <textarea rows="5" cols="30" placeholder="Placeholder text" disabled>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
-    `}
-  </Story>
+  <Story id="base-textarea--base" />
+  <Story id="base-textarea--invalid" />
+  <Story id="base-textarea--disabled" />
+</Canvas>
+
+<Canvas isColumn>
+  <Story id="base-textarea--empty" />
+  <Story id="base-textarea--invalid-empty" />
+  <Story id="base-textarea--disabled-empty" />
 </Canvas>
diff --git a/scss/bitstyles/base/input-text/input.stories.js b/scss/bitstyles/base/input-text/input.stories.js
new file mode 100644
index 000000000..831fbdca8
--- /dev/null
+++ b/scss/bitstyles/base/input-text/input.stories.js
@@ -0,0 +1,262 @@
+import Input from './Input';
+import { generateLabel } from '../../../../.storybook/helpers';
+
+export default {
+  title: 'Base/Input',
+  component: Input,
+  argTypes: {},
+};
+
+const Template = (args) => Input(args);
+
+// ***** Text inputs with values ****************** //
+
+export const Text = Template.bind({});
+Text.args = {
+  value: generateLabel(['input', 'text']),
+  placeholder: generateLabel(['input', 'text', 'placeholder']),
+};
+Text.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
+
+export const TextInvalid = Template.bind({});
+TextInvalid.args = {
+  value: generateLabel(['input', 'text', 'invalid']),
+  placeholder: generateLabel(['input', 'text', 'invalid', 'placeholder']),
+  ariaInvalid: true,
+};
+TextInvalid.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+};
+
+export const TextDisabled = Template.bind({});
+TextDisabled.args = {
+  value: generateLabel(['input', 'text', 'disabled']),
+  placeholder: generateLabel(['input', 'text', 'disabled', 'placeholder']),
+  disabled: true,
+};
+TextDisabled.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+};
+
+// ***** Text inputs without values ****************** //
+
+export const TextEmpty = Template.bind({});
+TextEmpty.args = {
+  value: '',
+  placeholder: generateLabel(['input', 'text', 'empty', 'placeholder']),
+};
+TextEmpty.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
+
+export const TextInvalidEmpty = Template.bind({});
+TextInvalidEmpty.args = {
+  value: '',
+  placeholder: generateLabel([
+    'input',
+    'text',
+    'invalid',
+    'empty',
+    'placeholder',
+  ]),
+  ariaInvalid: true,
+};
+TextInvalidEmpty.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+};
+
+export const TextDisabledEmpty = Template.bind({});
+TextDisabledEmpty.args = {
+  disabled: true,
+  value: '',
+  placeholder: generateLabel([
+    'input',
+    'text',
+    'disabled',
+    'empty',
+    'placeholder',
+  ]),
+};
+TextDisabledEmpty.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+};
+
+// ***** Email inputs with values ****************** //
+
+export const Email = Template.bind({});
+Email.args = {
+  type: 'email',
+  value: generateLabel(['input', 'email']),
+  placeholder: generateLabel(['input', 'email', 'placeholder']),
+};
+Email.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
+
+export const EmailInvalid = Template.bind({});
+EmailInvalid.args = {
+  type: 'email',
+  value: generateLabel(['input', 'email', 'invalid']),
+  placeholder: generateLabel(['input', 'email', 'invalid', 'placeholder']),
+  ariaInvalid: true,
+};
+EmailInvalid.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+};
+
+export const EmailDisabled = Template.bind({});
+EmailDisabled.args = {
+  type: 'email',
+  value: generateLabel(['input', 'email', 'disabled']),
+  placeholder: generateLabel(['input', 'email', 'disabled', 'placeholder']),
+  disabled: true,
+};
+EmailDisabled.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+};
+
+// ***** Email inputs without values ****************** //
+
+export const EmailEmpty = Template.bind({});
+EmailEmpty.args = {
+  type: 'email',
+  value: '',
+  placeholder: generateLabel(['input', 'email', 'placeholder']),
+};
+EmailEmpty.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
+
+export const EmailInvalidEmpty = Template.bind({});
+EmailInvalidEmpty.args = {
+  type: 'email',
+  value: '',
+  placeholder: generateLabel(['input', 'email', 'invalid', 'placeholder']),
+  ariaInvalid: true,
+};
+EmailInvalidEmpty.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+};
+
+export const EmailDisabledEmpty = Template.bind({});
+EmailDisabledEmpty.args = {
+  type: 'email',
+  value: '',
+  placeholder: generateLabel(['input', 'email', 'disabled', 'placeholder']),
+  disabled: true,
+};
+EmailDisabledEmpty.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+};
+
+// ***** Number inputs with values ****************** //
+
+export const Number = Template.bind({});
+Number.args = {
+  type: 'number',
+  value: '012345',
+  placeholder: generateLabel(['input', 'number', 'placeholder']),
+};
+
+export const NumberInvalid = Template.bind({});
+NumberInvalid.args = {
+  type: 'number',
+  value: generateLabel(['input', 'email', 'invalid']),
+  placeholder: generateLabel(['input', 'number', 'invalid', 'placeholder']),
+  ariaInvalid: true,
+};
+
+export const NumberDisabled = Template.bind({});
+NumberDisabled.args = {
+  type: 'number',
+  value: '012345',
+  placeholder: generateLabel(['input', 'number', 'disabled', 'placeholder']),
+  disabled: true,
+};
+
+// ***** Number inputs without values ****************** //
+
+export const NumberEmpty = Template.bind({});
+NumberEmpty.args = {
+  type: 'number',
+  value: '',
+  placeholder: generateLabel(['input', 'number', 'placeholder']),
+};
+
+export const NumberInvalidEmpty = Template.bind({});
+NumberInvalidEmpty.args = {
+  type: 'number',
+  value: '',
+  placeholder: generateLabel(['input', 'number', 'invalid', 'placeholder']),
+  ariaInvalid: true,
+};
+
+export const NumberDisabledEmpty = Template.bind({});
+NumberDisabledEmpty.args = {
+  type: 'number',
+  value: '',
+  placeholder: generateLabel(['input', 'number', 'disabled', 'placeholder']),
+  disabled: true,
+};

From c91d35160c4398b82bcc19a3ee60eb3b65bf993b Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Thu, 13 Apr 2023 12:13:07 +0200
Subject: [PATCH 04/21] - Adds a label component - updates radio & checkbox
 stories

---
 scss/bitstyles/base/forms/Label.js            |  9 ++
 scss/bitstyles/base/forms/forms.stories.js    | 93 +++++++++++++++++++
 .../input-checkbox/input-checkbox.stories.js  | 26 ++++++
 .../input-checkbox/input-checkbox.stories.mdx | 27 ++----
 .../base/input-radio/input-radio.stories.js   | 26 ++++++
 .../base/input-radio/input-radio.stories.mdx  | 27 ++----
 scss/bitstyles/base/input-text/Input.js       |  4 +
 scss/bitstyles/base/input-text/Textarea.js    |  2 +
 8 files changed, 172 insertions(+), 42 deletions(-)
 create mode 100644 scss/bitstyles/base/forms/Label.js
 create mode 100644 scss/bitstyles/base/forms/forms.stories.js
 create mode 100644 scss/bitstyles/base/input-checkbox/input-checkbox.stories.js
 create mode 100644 scss/bitstyles/base/input-radio/input-radio.stories.js

diff --git a/scss/bitstyles/base/forms/Label.js b/scss/bitstyles/base/forms/Label.js
new file mode 100644
index 000000000..401221430
--- /dev/null
+++ b/scss/bitstyles/base/forms/Label.js
@@ -0,0 +1,9 @@
+export default ({ children, htmlFor, ariaInvalid = false }) => {
+  const label = document.createElement('label');
+  children.forEach((child) => {
+    label.append(child);
+  });
+  if (ariaInvalid) label.setAttribute('aria-invalid', ariaInvalid);
+  label.setAttribute('for', htmlFor);
+  return label;
+};
diff --git a/scss/bitstyles/base/forms/forms.stories.js b/scss/bitstyles/base/forms/forms.stories.js
new file mode 100644
index 000000000..6de23aed0
--- /dev/null
+++ b/scss/bitstyles/base/forms/forms.stories.js
@@ -0,0 +1,93 @@
+import Input from '../input-text/Input';
+import Label from './Label';
+import { generateLabel } from '../../../../.storybook/helpers';
+
+export default {
+  title: 'Base/Forms',
+  component: Input,
+  subcomponents: [Label],
+  argTypes: {},
+};
+
+const Template = (args) =>
+  Label({
+    htmlFor: args.id,
+    ariaInvalid: args.ariaInvalid,
+    children: [args.label, Input(args)],
+  });
+
+// ***** Text inputs with labels ****************** //
+
+export const TextInput = Template.bind({});
+TextInput.args = {
+  id: 'input-text',
+  label: 'Delivery address',
+  value: generateLabel(['input', 'text']),
+  placeholder: generateLabel(['input', 'text', 'placeholder']),
+};
+TextInput.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
+
+export const TextInputInvalid = Template.bind({});
+TextInputInvalid.args = {
+  id: 'input-text',
+  label: 'Telephone number',
+  value: generateLabel(['input', 'text']),
+  placeholder: generateLabel(['input', 'text', 'placeholder']),
+  ariaInvalid: true,
+};
+TextInputInvalid.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
+
+export const TextInputDisabled = Template.bind({});
+TextInputDisabled.args = {
+  id: 'input-text',
+  label: 'Full name',
+  value: generateLabel(['input', 'text']),
+  placeholder: generateLabel(['input', 'text', 'placeholder']),
+  disabled: true,
+};
+TextInputDisabled.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
diff --git a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.js b/scss/bitstyles/base/input-checkbox/input-checkbox.stories.js
new file mode 100644
index 000000000..c8590369e
--- /dev/null
+++ b/scss/bitstyles/base/input-checkbox/input-checkbox.stories.js
@@ -0,0 +1,26 @@
+import Input from '../input-text/Input';
+
+export default {
+  title: 'Base/Input checkbox',
+  component: Input,
+  argTypes: {},
+};
+
+const Template = (args) => Input(args);
+
+// ***** Text inputs with values ****************** //
+
+export const Base = Template.bind({});
+Base.args = { type: 'checkbox' };
+
+export const Invalid = Template.bind({});
+Invalid.args = { type: 'checkbox', ariaInvalid: true };
+
+export const Disabled = Template.bind({});
+Disabled.args = { type: 'checkbox', disabled: true };
+
+export const Checked = Template.bind({});
+Checked.args = { type: 'checkbox', checked: true };
+
+export const CheckedDisabled = Template.bind({});
+CheckedDisabled.args = { type: 'checkbox', checked: true, disabled: true };
diff --git a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx b/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
index e941b8d7c..6cfbf1983 100644
--- a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
+++ b/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
@@ -1,28 +1,13 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-<Meta title="Base/Checkbox input" />
+<Meta title="Base/Checkbox input/Overview" />
 
 # Input - checkbox
 
 <Canvas isColumn>
-  <Story name="Input - checkbox">
-    {`
-      <input type="checkbox">
-    `}
-  </Story>
-  <Story name="Input - checkbox (disabled)">
-    {`
-      <input type="checkbox" disabled>
-    `}
-  </Story>
-  <Story name="Input - checkbox (checked)">
-    {`
-      <input type="checkbox" checked>
-    `}
-  </Story>
-  <Story name="Input - checkbox (checked, disabled">
-    {`
-      <input type="checkbox" checked disabled>
-    `}
-  </Story>
+  <Story id="base-input-checkbox--base" />
+  <Story id="base-input-checkbox--invalid" />
+  <Story id="base-input-checkbox--disabled" />
+  <Story id="base-input-checkbox--checked" />
+  <Story id="base-input-checkbox--checked-disabled" />
 </Canvas>
diff --git a/scss/bitstyles/base/input-radio/input-radio.stories.js b/scss/bitstyles/base/input-radio/input-radio.stories.js
new file mode 100644
index 000000000..0d60a04a8
--- /dev/null
+++ b/scss/bitstyles/base/input-radio/input-radio.stories.js
@@ -0,0 +1,26 @@
+import Input from '../input-text/Input';
+
+export default {
+  title: 'Base/Input radio',
+  component: Input,
+  argTypes: {},
+};
+
+const Template = (args) => Input(args);
+
+// ***** Text inputs with values ****************** //
+
+export const Base = Template.bind({});
+Base.args = { type: 'radio' };
+
+export const Invalid = Template.bind({});
+Invalid.args = { type: 'radio', ariaInvalid: true };
+
+export const Disabled = Template.bind({});
+Disabled.args = { type: 'radio', disabled: true };
+
+export const Checked = Template.bind({});
+Checked.args = { type: 'radio', checked: true };
+
+export const CheckedDisabled = Template.bind({});
+CheckedDisabled.args = { type: 'radio', checked: true, disabled: true };
diff --git a/scss/bitstyles/base/input-radio/input-radio.stories.mdx b/scss/bitstyles/base/input-radio/input-radio.stories.mdx
index fa9b1855e..00d7aa80e 100644
--- a/scss/bitstyles/base/input-radio/input-radio.stories.mdx
+++ b/scss/bitstyles/base/input-radio/input-radio.stories.mdx
@@ -1,28 +1,13 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-<Meta title="Base/Radio input" />
+<Meta title="Base/Input radio/Overview" />
 
 # Input - radio
 
 <Canvas isColumn>
-  <Story name="Input - radio">
-    {`
-      <input type="radio">
-    `}
-  </Story>
-  <Story name="Input - radio (disabled)">
-    {`
-      <input type="radio" disabled>
-    `}
-  </Story>
-  <Story name="Input - radio (checked)">
-    {`
-      <input type="radio" checked>
-    `}
-  </Story>
-  <Story name="Input - radio (checked, disabled)">
-    {`
-      <input type="radio" checked disabled>
-    `}
-  </Story>
+  <Story id="base-input-radio--base" />
+  <Story id="base-input-radio--invalid" />
+  <Story id="base-input-radio--disabled" />
+  <Story id="base-input-radio--checked" />
+  <Story id="base-input-radio--checked-disabled" />
 </Canvas>
diff --git a/scss/bitstyles/base/input-text/Input.js b/scss/bitstyles/base/input-text/Input.js
index 57503adff..26eba0c74 100644
--- a/scss/bitstyles/base/input-text/Input.js
+++ b/scss/bitstyles/base/input-text/Input.js
@@ -4,6 +4,8 @@ export default ({
   disabled = false,
   ariaInvalid = false,
   type = 'text',
+  checked = false,
+  id,
 }) => {
   const input = document.createElement('input');
   input.type = type;
@@ -11,5 +13,7 @@ export default ({
   input.placeholder = placeholder;
   if (disabled) input.setAttribute('disabled', disabled);
   if (ariaInvalid) input.setAttribute('aria-invalid', ariaInvalid);
+  if (id) input.setAttribute('id', id);
+  if (checked) input.setAttribute('checked', checked);
   return input;
 };
diff --git a/scss/bitstyles/base/input-text/Textarea.js b/scss/bitstyles/base/input-text/Textarea.js
index 90864da8a..a661f7035 100644
--- a/scss/bitstyles/base/input-text/Textarea.js
+++ b/scss/bitstyles/base/input-text/Textarea.js
@@ -3,6 +3,7 @@ export default ({
   placeholder = '',
   disabled = false,
   ariaInvalid = false,
+  id,
 }) => {
   const textarea = document.createElement('textarea');
   textarea.value = value;
@@ -11,5 +12,6 @@ export default ({
   textarea.setAttribute('cols', '30');
   if (disabled) textarea.setAttribute('disabled', disabled);
   if (ariaInvalid) textarea.setAttribute('aria-invalid', ariaInvalid);
+  if (id) textarea.setAttribute('id', id);
   return textarea;
 };

From 2df4cd6db3850275489040218f63dcd6b8478963 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Thu, 13 Apr 2023 14:35:09 +0200
Subject: [PATCH 05/21] - Moves all the components & associated low-level
 stories to the `forms` folder - Documentation is now all in `Base/Forms`,
 where the examples are of real usage instead of for testing purposes

---
 .../base/{input-text => forms}/Input.js       |   0
 scss/bitstyles/base/forms/Label.js            |   4 +-
 scss/bitstyles/base/forms/Select.js           |   7 +
 .../base/{input-text => forms}/Textarea.js    |   0
 scss/bitstyles/base/forms/forms.stories.js    | 142 ++++++++++-
 scss/bitstyles/base/forms/forms.stories.mdx   | 167 ++----------
 .../input-checkbox.stories.js                 |   4 +-
 .../base/forms/input-other.stories.js         | 105 ++++++++
 .../input-radio.stories.js                    |   4 +-
 .../input-text.stories.js}                    |   2 +-
 scss/bitstyles/base/forms/inputs.stories.mdx  | 238 ------------------
 scss/bitstyles/base/forms/label.stories.js    |  36 +++
 scss/bitstyles/base/forms/select.stories.js   |  32 +++
 .../textarea.stories.js}                      |   2 +-
 .../input-checkbox/input-checkbox.stories.mdx |  13 -
 .../base/input-radio/input-radio.stories.mdx  |  13 -
 .../base/input-text/input-text.stories.mdx    |  65 -----
 17 files changed, 346 insertions(+), 488 deletions(-)
 rename scss/bitstyles/base/{input-text => forms}/Input.js (100%)
 create mode 100644 scss/bitstyles/base/forms/Select.js
 rename scss/bitstyles/base/{input-text => forms}/Textarea.js (100%)
 rename scss/bitstyles/base/{input-checkbox => forms}/input-checkbox.stories.js (89%)
 create mode 100644 scss/bitstyles/base/forms/input-other.stories.js
 rename scss/bitstyles/base/{input-radio => forms}/input-radio.stories.js (90%)
 rename scss/bitstyles/base/{input-text/input.stories.js => forms/input-text.stories.js} (99%)
 delete mode 100644 scss/bitstyles/base/forms/inputs.stories.mdx
 create mode 100644 scss/bitstyles/base/forms/label.stories.js
 create mode 100644 scss/bitstyles/base/forms/select.stories.js
 rename scss/bitstyles/base/{input-text/Textarea.stories.js => forms/textarea.stories.js} (97%)
 delete mode 100644 scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
 delete mode 100644 scss/bitstyles/base/input-radio/input-radio.stories.mdx
 delete mode 100644 scss/bitstyles/base/input-text/input-text.stories.mdx

diff --git a/scss/bitstyles/base/input-text/Input.js b/scss/bitstyles/base/forms/Input.js
similarity index 100%
rename from scss/bitstyles/base/input-text/Input.js
rename to scss/bitstyles/base/forms/Input.js
diff --git a/scss/bitstyles/base/forms/Label.js b/scss/bitstyles/base/forms/Label.js
index 401221430..44aa97e46 100644
--- a/scss/bitstyles/base/forms/Label.js
+++ b/scss/bitstyles/base/forms/Label.js
@@ -1,9 +1,9 @@
-export default ({ children, htmlFor, ariaInvalid = false }) => {
+export default ({ children, htmlFor = null, ariaInvalid = false }) => {
   const label = document.createElement('label');
   children.forEach((child) => {
     label.append(child);
   });
   if (ariaInvalid) label.setAttribute('aria-invalid', ariaInvalid);
-  label.setAttribute('for', htmlFor);
+  if (htmlFor) label.setAttribute('for', htmlFor);
   return label;
 };
diff --git a/scss/bitstyles/base/forms/Select.js b/scss/bitstyles/base/forms/Select.js
new file mode 100644
index 000000000..7a44f58cd
--- /dev/null
+++ b/scss/bitstyles/base/forms/Select.js
@@ -0,0 +1,7 @@
+export default ({ disabled = false, ariaInvalid = false, id }) => {
+  const select = document.createElement('select');
+  if (disabled) select.setAttribute('disabled', disabled);
+  if (ariaInvalid) select.setAttribute('aria-invalid', ariaInvalid);
+  if (id) select.setAttribute('id', id);
+  return select;
+};
diff --git a/scss/bitstyles/base/input-text/Textarea.js b/scss/bitstyles/base/forms/Textarea.js
similarity index 100%
rename from scss/bitstyles/base/input-text/Textarea.js
rename to scss/bitstyles/base/forms/Textarea.js
diff --git a/scss/bitstyles/base/forms/forms.stories.js b/scss/bitstyles/base/forms/forms.stories.js
index 6de23aed0..143ca7b7c 100644
--- a/scss/bitstyles/base/forms/forms.stories.js
+++ b/scss/bitstyles/base/forms/forms.stories.js
@@ -1,24 +1,48 @@
-import Input from '../input-text/Input';
+import Input from './Input';
 import Label from './Label';
+import Textarea from './Textarea';
+import Select from './Select';
 import { generateLabel } from '../../../../.storybook/helpers';
 
 export default {
   title: 'Base/Forms',
   component: Input,
-  subcomponents: [Label],
+  subcomponents: [Label, Select],
   argTypes: {},
 };
 
-const Template = (args) =>
+const InputTemplate = (args) => {
+  let children;
+  if (args.type && (args.type === 'checkbox' || args.type === 'radio')) {
+    children = [Input(args), args.label];
+  } else {
+    children = [args.label, Input(args)];
+  }
+
+  return Label({
+    htmlFor: args.id,
+    ariaInvalid: args.ariaInvalid,
+    children,
+  });
+};
+
+const SelectTemplate = (args) =>
   Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
-    children: [args.label, Input(args)],
+    children: [args.label, Select(args)],
+  });
+
+const TextareaTemplate = (args) =>
+  Label({
+    htmlFor: args.id,
+    ariaInvalid: args.ariaInvalid,
+    children: [args.label, Textarea(args)],
   });
 
 // ***** Text inputs with labels ****************** //
 
-export const TextInput = Template.bind({});
+export const TextInput = InputTemplate.bind({});
 TextInput.args = {
   id: 'input-text',
   label: 'Delivery address',
@@ -42,7 +66,7 @@ TextInput.parameters = {
   ],
 };
 
-export const TextInputInvalid = Template.bind({});
+export const TextInputInvalid = InputTemplate.bind({});
 TextInputInvalid.args = {
   id: 'input-text',
   label: 'Telephone number',
@@ -67,7 +91,7 @@ TextInputInvalid.parameters = {
   ],
 };
 
-export const TextInputDisabled = Template.bind({});
+export const TextInputDisabled = InputTemplate.bind({});
 TextInputDisabled.args = {
   id: 'input-text',
   label: 'Full name',
@@ -91,3 +115,107 @@ TextInputDisabled.parameters = {
     },
   ],
 };
+
+// ***** Radio inputs with labels ****************** //
+
+export const RadioInput = InputTemplate.bind({});
+RadioInput.args = {
+  id: 'input-radio',
+  type: 'radio',
+  label: 'X-Large',
+};
+
+export const RadioInputChecked = InputTemplate.bind({});
+RadioInputChecked.args = {
+  id: 'input-radio',
+  type: 'radio',
+  label: 'Large',
+  checked: true,
+};
+
+export const RadioInputInvalid = InputTemplate.bind({});
+RadioInputInvalid.args = {
+  id: 'input-radio',
+  type: 'radio',
+  label: 'Medium',
+  ariaInvalid: true,
+};
+
+export const RadioInputDisabled = InputTemplate.bind({});
+RadioInputDisabled.args = {
+  id: 'input-radio',
+  type: 'radio',
+  label: 'Small',
+  disabled: true,
+};
+
+// ***** Radio inputs with labels ****************** //
+
+export const CheckboxInput = InputTemplate.bind({});
+CheckboxInput.args = {
+  id: 'input-checkbox',
+  type: 'checkbox',
+  label: 'X-Large',
+};
+
+export const CheckboxInputChecked = InputTemplate.bind({});
+CheckboxInputChecked.args = {
+  id: 'input-checkbox',
+  type: 'checkbox',
+  label: 'Large',
+  checked: true,
+};
+
+export const CheckboxInputInvalid = InputTemplate.bind({});
+CheckboxInputInvalid.args = {
+  id: 'input-checkbox',
+  type: 'checkbox',
+  label: 'Medium',
+  ariaInvalid: true,
+};
+
+export const CheckboxInputDisabled = InputTemplate.bind({});
+CheckboxInputDisabled.args = {
+  id: 'input-checkbox',
+  type: 'checkbox',
+  label: 'Small',
+  disabled: true,
+};
+
+// ***** Selects with labels ****************** //
+
+export const SelectBase = SelectTemplate.bind({});
+SelectBase.args = {
+  label: 'Delivery method',
+};
+
+export const SelectInvalid = SelectTemplate.bind({});
+SelectInvalid.args = {
+  label: 'Delivery method',
+  ariaInvalid: true,
+};
+
+export const SelectDisabled = SelectTemplate.bind({});
+SelectDisabled.args = {
+  label: 'Delivery method',
+  disabled: true,
+};
+
+// ***** Selects with labels ****************** //
+
+export const TextareaBase = TextareaTemplate.bind({});
+TextareaBase.args = {
+  label: 'Extra comments',
+};
+
+export const TextareaInvalid = TextareaTemplate.bind({});
+TextareaInvalid.args = {
+  label: 'Extra comments',
+  ariaInvalid: true,
+};
+
+export const TextareaDisabled = TextareaTemplate.bind({});
+TextareaDisabled.args = {
+  label: 'Extra comments',
+  disabled: true,
+};
diff --git a/scss/bitstyles/base/forms/forms.stories.mdx b/scss/bitstyles/base/forms/forms.stories.mdx
index 455a6696e..08895a7fb 100644
--- a/scss/bitstyles/base/forms/forms.stories.mdx
+++ b/scss/bitstyles/base/forms/forms.stories.mdx
@@ -1,174 +1,53 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-<Meta title="Base/Forms" />
+<Meta title="Base/Forms/Overview" />
 
 # Forms
 
-## Fieldset
-
-<Canvas>
-  <Story name="Fieldset">
-    {`
-      <fieldset><legend>Fieldset</legend></fieldset>
-    `}
-  </Story>
-</Canvas>
-
 ## Inputs and labels
 
 Inputs can be siblings or children of their associated label, as you prefer. Different frameworks may favor different styles, but for most inputs it makes little difference in terms of semantics & usability.
 
-The exception is for radios & checkboxes (see below), which should always be a child of their label to make the click/tap target larger. It’s therefore common practice to wrap all inputs this way, for consistsency.
-
-Take a look at [Base/Inputs](/docs/base-inputs--input-text) for a complete list of inputs.
+The exception is for radios & checkboxes (see below), which should always be a child of their label to make the click/tap target larger. It’s therefore common practice to wrap all inputs this way, for consistency.
 
 ### Text inputs
 
-This includes all standard `type="text"` inputs, plus all the text-based inputs such as `email`, and inputs which do not have a different representation on the current OS/browser combination. Right now that includes `tel` on desktop environments, but not mobile, and `date` on some desktop browsers but not others (and no mobile).
+This includes all standard `type="text"` inputs, plus all the text-based inputs such as `email`, `password`, `tel` — take a look at the other stories in the forms section for examples of the other input types.
 
 <Canvas isColumn>
-  <Story name="Input and label (siblings)">
-    {`
-      <label for="input_a1">This is labeling text</label>
-      <input type="text" placeholder="Placeholder text" id="input_a1" />
-    `}
-  </Story>
-  <Story name="Input and label (wrapped)">
-    {`
-      <label for="input_a2">
-        This is labeling text
-        <input type="text" placeholder="Placeholder text" id="input_a2" />
-      </label>
-    `}
-  </Story>
-  <Story name="Input and label (wrapped, disabled)">
-    {`
-      <label for="input_a3">
-        This is labeling text
-        <input disabled type="text" placeholder="Placeholder text" id="input_a3" />
-      </label>
-    `}
-  </Story>
-  <Story name="Input and label (wrapped, invalid)">
-    {`
-      <label for="input_a4">
-        <span>This is labeling text for an invalid input (once you enter invalid data)</span>
-        <input type="number" id="input_a4" placeholder="Enter some text into this number input" />
-      </label>
-    `}
-  </Story>
+  <Story id="base-forms--text-input" />
+  <Story id="base-forms--text-input-invalid" />
+  <Story id="base-forms--text-input-disabled" />
 </Canvas>
 
-## Checkboxes
+## Textareas
 
 <Canvas isColumn>
-  <Story name="Checkbox and label">
-    {`
-      <label for="input_b1" class="u-flex u-items-center">
-        <input type="checkbox" id="input_b1" />
-        <span>This is labeling text</span>
-      </label>
-      <label for="input_b2" class="u-flex u-items-center">
-        <input type="checkbox" id="input_b2" checked />
-        <span>This is labeling text</span>
-      </label>
-    `}
-  </Story>
-  <Story name="Checkbox and label (disabled)">
-    {`
-      <label for="input_b3" class="u-flex u-items-center">
-        <input type="checkbox" id="input_b3" disabled />
-        <span>This is labeling text</span>
-      </label>
-      <label for="input_b4" class="u-flex u-items-center">
-        <input type="checkbox" id="input_b4" checked disabled />
-        <span>This is labeling text</span>
-      </label>
-    `}
-  </Story>
+  <Story id="base-forms--textarea-base" />
+  <Story id="base-forms--textarea-invalid" />
+  <Story id="base-forms--textarea-disabled" />
 </Canvas>
 
-## Radios
+## Checkboxes and Radios
 
 <Canvas isColumn>
-  <Story name="Radio and label">
-    {`
-      <label for="input_c1" class="u-flex u-items-center">
-        <input type="radio" id="input_c1" name="radio-group_c1" value="true" />
-        <span>This is labeling text</span>
-      </label>
-      <label for="input_c2" class="u-flex u-items-center">
-        <input type="radio" id="input_c2" name="radio-group_c1" value="false" checked />
-        <span>This is labeling text</span>
-      </label>
-    `}
-  </Story>
-  <Story name="Radio and label (disabled)">
-    {`
-      <label for="input_c3" class="u-flex u-items-center">
-        <input type="radio" id="input_c3" name="radio-group_c2" value="true" disabled />
-        <span>This is labeling text</span>
-      </label>
-      <label for="input_c4" class="u-flex u-items-center">
-        <input type="radio" id="input_c4" name="radio-group_c2" value="false" checked disabled />
-        <span>This is labeling text</span>
-      </label>
-    `}
-  </Story>
+  <Story id="base-forms--checkbox-input" />
+  <Story id="base-forms--checkbox-input-checked" />
+  <Story id="base-forms--checkbox-input-invalid" />
+  <Story id="base-forms--checkbox-input-disabled" />
 </Canvas>
 
-## Selects
-
 <Canvas isColumn>
-  <Story name="Select and label">
-    {`
-      <label for="input_d1">Select</label>
-      <select id="input_d1">
-        <option value="value1" selected>Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-    `}
-  </Story>
-  <Story name="Select and label (disabled)">
-    {`
-      <label for="input_d2">Disabled select</label>
-      <select id="input_d2" disabled>
-        <option value="value1" selected>Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-    `}
-  </Story>
-  <Story name="Select and label (invalid)">
-    {`
-      <label for="input_d2">Invalid select</label>
-      <select required>
-        <option value="" disabled hidden selected>Please select</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-    `}
-  </Story>
+  <Story id="base-forms--radio-input" />
+  <Story id="base-forms--radio-input-checked" />
+  <Story id="base-forms--radio-input-invalid" />
+  <Story id="base-forms--radio-input-disabled" />
 </Canvas>
 
-## Textareas
+## Selects
 
 <Canvas isColumn>
-  <Story name="Textarea and label">
-    {`
-      <label for="input_e1">
-        This is labeling text
-        <textarea rows="5" cols="30" placeholder="Placeholder text" id="input_e1">Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
-      </label>
-    `}
-  </Story>
-  <Story name="Textarea and label (disabled)">
-    {`
-      <label for="input_e2">
-        This is labeling text
-        <textarea id="input_e2" rows="5" cols="30" placeholder="Placeholder text" disabled>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
-      </label>
-    `}
-  </Story>
+  <Story id="base-forms--select-base" />
+  <Story id="base-forms--select-invalid" />
+  <Story id="base-forms--select-disabled" />
 </Canvas>
diff --git a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.js b/scss/bitstyles/base/forms/input-checkbox.stories.js
similarity index 89%
rename from scss/bitstyles/base/input-checkbox/input-checkbox.stories.js
rename to scss/bitstyles/base/forms/input-checkbox.stories.js
index c8590369e..f9b8acdcb 100644
--- a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.js
+++ b/scss/bitstyles/base/forms/input-checkbox.stories.js
@@ -1,7 +1,7 @@
-import Input from '../input-text/Input';
+import Input from './Input';
 
 export default {
-  title: 'Base/Input checkbox',
+  title: 'Base/Forms/Input checkbox',
   component: Input,
   argTypes: {},
 };
diff --git a/scss/bitstyles/base/forms/input-other.stories.js b/scss/bitstyles/base/forms/input-other.stories.js
new file mode 100644
index 000000000..d52fbcc72
--- /dev/null
+++ b/scss/bitstyles/base/forms/input-other.stories.js
@@ -0,0 +1,105 @@
+import Input from './Input';
+
+export default {
+  title: 'Base/Forms/Input other',
+  component: Input,
+  argTypes: {},
+};
+
+const Template = (args) => Input(args);
+
+// ***** Text inputs with values ****************** //
+
+export const Button = Template.bind({});
+Button.args = { type: 'button', value: 'Button input' };
+
+export const ButtonDisabled = Template.bind({});
+ButtonDisabled.args = {
+  type: 'button',
+  value: 'Button input disabled',
+  disabled: true,
+};
+
+export const Color = Template.bind({});
+Color.args = { type: 'color' };
+
+export const ColorDisabled = Template.bind({});
+ColorDisabled.args = { type: 'color', disabled: true };
+
+export const Date = Template.bind({});
+Date.args = { type: 'date' };
+
+export const DateDisabled = Template.bind({});
+DateDisabled.args = { type: 'date', disabled: true };
+
+export const DatetimeLocal = Template.bind({});
+DatetimeLocal.args = { type: 'datetime-local' };
+
+export const DatetimeLocalDisabled = Template.bind({});
+DatetimeLocalDisabled.args = { type: 'datetime-local', disabled: true };
+
+export const File = Template.bind({});
+File.args = { type: 'file' };
+
+export const FileDisabled = Template.bind({});
+FileDisabled.args = { type: 'file', disabled: true };
+
+export const Image = Template.bind({});
+Image.args = { type: 'image' };
+
+export const ImageDisabled = Template.bind({});
+ImageDisabled.args = { type: 'image', disabled: true };
+
+export const Month = Template.bind({});
+Month.args = { type: 'month' };
+
+export const MonthDisabled = Template.bind({});
+MonthDisabled.args = { type: 'month', disabled: true };
+
+export const Week = Template.bind({});
+Week.args = { type: 'week' };
+
+export const WeekDisabled = Template.bind({});
+WeekDisabled.args = { type: 'week', disabled: true };
+
+export const Password = Template.bind({});
+Password.args = { type: 'password' };
+
+export const PasswordDisabled = Template.bind({});
+PasswordDisabled.args = { type: 'password', disabled: true };
+
+export const Reset = Template.bind({});
+Reset.args = { type: 'reset' };
+
+export const ResetDisabled = Template.bind({});
+ResetDisabled.args = { type: 'reset', disabled: true };
+
+export const Search = Template.bind({});
+Search.args = { type: 'search' };
+
+export const SearchDisabled = Template.bind({});
+SearchDisabled.args = { type: 'search', disabled: true };
+
+export const Submit = Template.bind({});
+Submit.args = { type: 'submit', value: 'Submit input' };
+
+export const SubmitDisabled = Template.bind({});
+SubmitDisabled.args = { type: 'submit', value: 'Submit input', disabled: true };
+
+export const Tel = Template.bind({});
+Tel.args = { type: 'tel' };
+
+export const TelDisabled = Template.bind({});
+TelDisabled.args = { type: 'tel', disabled: true };
+
+export const Time = Template.bind({});
+Time.args = { type: 'time' };
+
+export const TimeDisabled = Template.bind({});
+TimeDisabled.args = { type: 'time', disabled: true };
+
+export const Url = Template.bind({});
+Url.args = { type: 'url' };
+
+export const UrlDisabled = Template.bind({});
+UrlDisabled.args = { type: 'url', disabled: true };
diff --git a/scss/bitstyles/base/input-radio/input-radio.stories.js b/scss/bitstyles/base/forms/input-radio.stories.js
similarity index 90%
rename from scss/bitstyles/base/input-radio/input-radio.stories.js
rename to scss/bitstyles/base/forms/input-radio.stories.js
index 0d60a04a8..33c1ef4f3 100644
--- a/scss/bitstyles/base/input-radio/input-radio.stories.js
+++ b/scss/bitstyles/base/forms/input-radio.stories.js
@@ -1,7 +1,7 @@
-import Input from '../input-text/Input';
+import Input from './Input';
 
 export default {
-  title: 'Base/Input radio',
+  title: 'Base/Forms/Input radio',
   component: Input,
   argTypes: {},
 };
diff --git a/scss/bitstyles/base/input-text/input.stories.js b/scss/bitstyles/base/forms/input-text.stories.js
similarity index 99%
rename from scss/bitstyles/base/input-text/input.stories.js
rename to scss/bitstyles/base/forms/input-text.stories.js
index 831fbdca8..6b82551d1 100644
--- a/scss/bitstyles/base/input-text/input.stories.js
+++ b/scss/bitstyles/base/forms/input-text.stories.js
@@ -2,7 +2,7 @@ import Input from './Input';
 import { generateLabel } from '../../../../.storybook/helpers';
 
 export default {
-  title: 'Base/Input',
+  title: 'Base/Forms/Input text',
   component: Input,
   argTypes: {},
 };
diff --git a/scss/bitstyles/base/forms/inputs.stories.mdx b/scss/bitstyles/base/forms/inputs.stories.mdx
deleted file mode 100644
index af09c8afb..000000000
--- a/scss/bitstyles/base/forms/inputs.stories.mdx
+++ /dev/null
@@ -1,238 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-<Meta title="Base/Inputs" />
-
-## Label
-
-<Canvas isColumn>
-  <Story name="Label">
-    {`
-      <label for="input">This is label text</label>
-    `}
-  </Story>
-</Canvas>
-
-## Input - button
-
-<Canvas isColumn>
-  <Story name="Input - button">
-    {`
-      <input type="button" value="Button">
-    `}
-  </Story>
-  <Story name="Input - button (disabled)">
-    {`
-      <input type="button" value="Button" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - color
-
-<Canvas isColumn>
-  <Story name="Input - color">
-    {`
-      <input type="color">
-    `}
-  </Story>
-  <Story name="Input - color (disabled)">
-    {`
-      <input type="color" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - date
-
-<Canvas isColumn>
-  <Story name="Input - date">
-    {`
-      <input type="date">
-    `}
-  </Story>
-  <Story name="Input - date (disabled)">
-    {`
-      <input type="date" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - datetime-local
-
-<Canvas isColumn>
-  <Story name="Input - datetime-local">
-    {`
-      <input type="datetime-local">
-    `}
-  </Story>
-  <Story name="Input - datetime-local (disabled)">
-    {`
-      <input type="datetime-local" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - file
-
-<Canvas isColumn>
-  <Story name="Input - file">
-    {`
-      <input type="file">
-    `}
-  </Story>
-  <Story name="Input - file (disabled)">
-    {`
-      <input type="file" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - image
-
-<Canvas isColumn>
-  <Story name="Input - image">
-    {`
-      <input type="image" src="https://placekitten.com/100/100" alt="Image">
-    `}
-  </Story>
-  <Story name="Input - image (disabled)">
-    {`
-      <input type="image" src="https://placekitten.com/100/100" alt="Image" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - month
-
-<Canvas isColumn>
-  <Story name="Input - month">
-    {`
-      <input type="month">
-    `}
-  </Story>
-  <Story name="Input - month (disabled)">
-    {`
-      <input type="month" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - week
-
-<Canvas isColumn>
-  <Story name="Input - week">
-    {`
-      <input type="week">
-    `}
-  </Story>
-  <Story name="Input - week (disabled)">
-    {`
-      <input type="week" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - password
-
-<Canvas isColumn>
-  <Story name="Input - password">
-    {`
-      <input type="password" value="Password">
-    `}
-  </Story>
-  <Story name="Input - password (disabled)">
-    {`
-      <input type="password" value="Password" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - reset
-
-<Canvas isColumn>
-  <Story name="Input - reset">
-    {`
-      <input type="reset">
-    `}
-  </Story>
-  <Story name="Input - reset (disabled)">
-    {`
-      <input type="reset" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - search
-
-<Canvas isColumn>
-  <Story name="Input - search">
-    {`
-      <input type="search">
-    `}
-  </Story>
-  <Story name="Input - search (disabled)">
-    {`
-      <input type="search" (disabled)>
-    `}
-  </Story>
-</Canvas>
-
-## Input - submit
-
-<Canvas isColumn>
-  <Story name="Input - submit">
-    {`
-      <input type="submit" value="Submit">
-    `}
-  </Story>
-  <Story name="Input - submit (disabled)">
-    {`
-      <input type="submit" value="Submit" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - tel
-
-<Canvas isColumn>
-  <Story name="Input - tel">
-    {`
-      <input type="tel">
-    `}
-  </Story>
-  <Story name="Input - tel (disabled)">
-    {`
-      <input type="tel" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - time
-
-<Canvas isColumn>
-  <Story name="Input - time">
-    {`
-      <input type="time">
-    `}
-  </Story>
-  <Story name="Input - time (disabled)">
-    {`
-      <input type="time" disabled>
-    `}
-  </Story>
-</Canvas>
-
-## Input - url
-
-<Canvas isColumn>
-  <Story name="Input - url">
-    {`
-      <input type="url">
-    `}
-  </Story>
-  <Story name="Input - url (disabled)">
-    {`
-      <input type="url" disabled>
-    `}
-  </Story>
-</Canvas>
diff --git a/scss/bitstyles/base/forms/label.stories.js b/scss/bitstyles/base/forms/label.stories.js
new file mode 100644
index 000000000..ea0257940
--- /dev/null
+++ b/scss/bitstyles/base/forms/label.stories.js
@@ -0,0 +1,36 @@
+import Label from './Label';
+
+export default {
+  title: 'Base/Forms/Label',
+  component: Label,
+  argTypes: {},
+};
+
+const Template = (args) => Label(args);
+
+const Link = () => {
+  const link = document.createElement('a');
+  link.href = '#dummy-link';
+  link.innerHTML = 'a link';
+  return link;
+};
+
+// ***** Labels ****************** //
+
+export const Base = Template.bind({});
+Base.args = { children: ['Simple text label'] };
+
+export const Invalid = Template.bind({});
+Invalid.args = {
+  children: ['Simple text label for an invalid input'],
+  ariaInvalid: true,
+};
+
+export const WithFor = Template.bind({});
+WithFor.args = {
+  children: ['Simple text label with a for attribute'],
+  htmlFor: 'input-id',
+};
+
+export const WithLink = Template.bind({});
+WithLink.args = { children: ['Text label with ', Link(), ' as content.'] };
diff --git a/scss/bitstyles/base/forms/select.stories.js b/scss/bitstyles/base/forms/select.stories.js
new file mode 100644
index 000000000..5d1f1bc72
--- /dev/null
+++ b/scss/bitstyles/base/forms/select.stories.js
@@ -0,0 +1,32 @@
+import Select from './Select';
+import { generateLabel } from '../../../../.storybook/helpers';
+
+export default {
+  title: 'Base/Forms/Select',
+  component: Select,
+  argTypes: {},
+};
+
+const Template = (args) => Select(args);
+
+// ***** Selects with values ****************** //
+
+export const Base = Template.bind({});
+Base.args = {
+  value: generateLabel(['textarea']),
+  placeholder: generateLabel(['textarea', 'placeholder']),
+};
+
+export const Invalid = Template.bind({});
+Invalid.args = {
+  value: generateLabel(['textarea']),
+  ariaInvalid: true,
+  placeholder: generateLabel(['textarea', 'invalid', 'placeholder']),
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  value: generateLabel(['textarea']),
+  disabled: true,
+  placeholder: generateLabel(['textarea', 'invalid', 'placeholder']),
+};
diff --git a/scss/bitstyles/base/input-text/Textarea.stories.js b/scss/bitstyles/base/forms/textarea.stories.js
similarity index 97%
rename from scss/bitstyles/base/input-text/Textarea.stories.js
rename to scss/bitstyles/base/forms/textarea.stories.js
index 5d1c3ecac..9502bad72 100644
--- a/scss/bitstyles/base/input-text/Textarea.stories.js
+++ b/scss/bitstyles/base/forms/textarea.stories.js
@@ -2,7 +2,7 @@ import Textarea from './Textarea';
 import { generateLabel } from '../../../../.storybook/helpers';
 
 export default {
-  title: 'Base/Textarea',
+  title: 'Base/Forms/Textarea',
   component: Textarea,
   argTypes: {},
 };
diff --git a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx b/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
deleted file mode 100644
index 6cfbf1983..000000000
--- a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-<Meta title="Base/Checkbox input/Overview" />
-
-# Input - checkbox
-
-<Canvas isColumn>
-  <Story id="base-input-checkbox--base" />
-  <Story id="base-input-checkbox--invalid" />
-  <Story id="base-input-checkbox--disabled" />
-  <Story id="base-input-checkbox--checked" />
-  <Story id="base-input-checkbox--checked-disabled" />
-</Canvas>
diff --git a/scss/bitstyles/base/input-radio/input-radio.stories.mdx b/scss/bitstyles/base/input-radio/input-radio.stories.mdx
deleted file mode 100644
index 00d7aa80e..000000000
--- a/scss/bitstyles/base/input-radio/input-radio.stories.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-<Meta title="Base/Input radio/Overview" />
-
-# Input - radio
-
-<Canvas isColumn>
-  <Story id="base-input-radio--base" />
-  <Story id="base-input-radio--invalid" />
-  <Story id="base-input-radio--disabled" />
-  <Story id="base-input-radio--checked" />
-  <Story id="base-input-radio--checked-disabled" />
-</Canvas>
diff --git a/scss/bitstyles/base/input-text/input-text.stories.mdx b/scss/bitstyles/base/input-text/input-text.stories.mdx
deleted file mode 100644
index 396a608f6..000000000
--- a/scss/bitstyles/base/input-text/input-text.stories.mdx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-<Meta title="Base/Text inputs/Overview" />
-
-# Base input types
-
-Here are the various inputs, textareas & selects. They’re presented here for completeness, and so they’re available for testing purposes.
-
-You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
-
-## Input - text
-
-<Canvas isColumn>
-  <Story id="base-input--text" />
-  <Story id="base-input--text-invalid" />
-  <Story id="base-input--text-disabled" />
-</Canvas>
-
-<Canvas isColumn>
-  <Story id="base-input--text-empty" />
-  <Story id="base-input--text-invalid-empty" />
-  <Story id="base-input--text-disabled-empty" />
-</Canvas>
-
-## Input - email
-
-<Canvas isColumn>
-  <Story id="base-input--email" />
-  <Story id="base-input--email-invalid" />
-  <Story id="base-input--email-disabled" />
-</Canvas>
-
-<Canvas isColumn>
-  <Story id="base-input--email-empty" />
-  <Story id="base-input--email-invalid-empty" />
-  <Story id="base-input--email-disabled-empty" />
-</Canvas>
-
-## Input - number
-
-<Canvas isColumn>
-  <Story id="base-input--number" />
-  <Story id="base-input--number-invalid" />
-  <Story id="base-input--number-disabled" />
-</Canvas>
-
-<Canvas isColumn>
-  <Story id="base-input--number-empty" />
-  <Story id="base-input--number-invalid-empty" />
-  <Story id="base-input--number-disabled-empty" />
-</Canvas>
-
-## Textarea
-
-<Canvas isColumn>
-  <Story id="base-textarea--base" />
-  <Story id="base-textarea--invalid" />
-  <Story id="base-textarea--disabled" />
-</Canvas>
-
-<Canvas isColumn>
-  <Story id="base-textarea--empty" />
-  <Story id="base-textarea--invalid-empty" />
-  <Story id="base-textarea--disabled-empty" />
-</Canvas>

From 67a6e193780010de134d701d8f868acd07f540b4 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Thu, 13 Apr 2023 17:43:41 +0200
Subject: [PATCH 06/21] - Select component now has options - checkboxes &
 radios now can have box-shadows in each state - adds an invalid state for
 radios & checkboxes

---
 scss/bitstyles/base/forms/Select.js           | 29 ++++++++++++++-
 .../bitstyles/base/input-checkbox/_index.scss | 13 +++++++
 .../base/input-checkbox/_settings.scss        | 21 +++++++++++
 scss/bitstyles/base/input-radio/_index.scss   |  5 +++
 .../bitstyles/base/input-radio/_settings.scss | 13 +++++++
 scss/bitstyles/base/select/_index.scss        |  3 +-
 scss/bitstyles/base/select/select.stories.mdx | 35 -------------------
 7 files changed, 82 insertions(+), 37 deletions(-)
 delete mode 100644 scss/bitstyles/base/select/select.stories.mdx

diff --git a/scss/bitstyles/base/forms/Select.js b/scss/bitstyles/base/forms/Select.js
index 7a44f58cd..78f9d526c 100644
--- a/scss/bitstyles/base/forms/Select.js
+++ b/scss/bitstyles/base/forms/Select.js
@@ -1,7 +1,34 @@
-export default ({ disabled = false, ariaInvalid = false, id }) => {
+const defaultOptions = [
+  {
+    value: 'blue',
+    label: 'Blue',
+  },
+  {
+    value: 'red',
+    label: 'Red',
+  },
+  {
+    value: 'green',
+    label: 'Green',
+  },
+  {
+    value: 'pink',
+    label: 'Pink',
+  },
+];
+
+export default ({ disabled = false, ariaInvalid = false, id, options }) => {
   const select = document.createElement('select');
   if (disabled) select.setAttribute('disabled', disabled);
   if (ariaInvalid) select.setAttribute('aria-invalid', ariaInvalid);
   if (id) select.setAttribute('id', id);
+
+  const opts = options || defaultOptions;
+  opts.forEach((option) => {
+    const opt = document.createElement('option');
+    opt.value = option.value;
+    opt.append(option.label);
+    select.appendChild(opt);
+  });
   return select;
 };
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index 16cee3d0c..16049e58e 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -22,6 +22,7 @@
     border-radius: settings.$border-radius;
     background-color: settings.$background-color;
     color: settings.$color;
+    box-shadow: settings.$box-shadow;
 
     &:hover,
     &:focus {
@@ -29,6 +30,7 @@
       outline: none;
       background-color: settings.$background-color-hover;
       color: settings.$color-hover;
+      box-shadow: settings.$box-shadow-hover;
     }
 
     &::after {
@@ -56,6 +58,7 @@
       border-color: settings.$border-color-checked;
       background-color: settings.$background-color-checked;
       color: settings.$color-checked;
+      box-shadow: settings.$box-shadow-checked;
 
       &::after {
         transform: scale(1);
@@ -63,15 +66,25 @@
       }
     }
 
+    &:invalid,
+    &[aria-invalid='true'] {
+      border-color: settings.$border-color-invalid;
+      background-color: settings.$background-color-invalid;
+      color: settings.$color-invalid;
+      box-shadow: settings.$box-shadow-invalid;
+    }
+
     &[disabled] {
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
       color: settings.$color-disabled;
+      box-shadow: settings.$box-shadow-disabled;
 
       &:checked {
         border-color: settings.$border-color-disabled-checked;
         background-color: settings.$background-color-disabled-checked;
         color: settings.$color-disabled-checked;
+        box-shadow: settings.$box-shadow-disabled-checked;
       }
     }
   }
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index 1c853a135..70764c76e 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -15,6 +15,7 @@ $background-color: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color: var(design-token.get('color', 'grayscale')) !default;
+$box-shadow: none !default;
 
 //
 // Hover colors ////////////////////////////////////////
@@ -23,6 +24,7 @@ $background-color-hover: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-hover: var(design-token.get('color', 'brand-1')) !default;
+$box-shadow-hover: none !default;
 
 //
 // Checked colors ////////////////////////////////////////
@@ -30,6 +32,23 @@ $color-checked: var(design-token.get('color', 'grayscale', 'white')) !default;
 $background-color-checked: var(design-token.get('color', 'brand-1')) !default;
 $border-color-checked: var(design-token.get('color', 'brand-1')) !default;
 $background-image-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
+$box-shadow-checked: none !default;
+
+//
+// Invalid colors ////////////////////////////////////////
+$color-invalid: var(design-token.get('color', 'grayscale', 'white')) !default;
+$background-color-invalid: var(design-token.get('color', 'brand-1')) !default;
+$border-color-invalid: var(design-token.get('color', 'brand-1')) !default;
+$background-image-invalid: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
+$box-shadow-invalid: none !default;
+
+//
+// Invalid checked colors ////////////////////////////////////////
+$color-invalid-checked: var(design-token.get('color', 'grayscale', 'white')) !default;
+$background-color-invalid-checked: var(design-token.get('color', 'brand-1')) !default;
+$border-color-invalid-checked: var(design-token.get('color', 'brand-1')) !default;
+$background-image-invalid-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
+$box-shadow-invalid-checked: none !default;
 
 //
 // Disabled colors ////////////////////////////////////////
@@ -42,6 +61,7 @@ $background-color-disabled: var(
 $border-color-disabled: var(
   design-token.get('color', 'grayscale', 'light-2')
 ) !default;
+$box-shadow-disabled: none !default;
 
 //
 // Disabled-checked colors ////////////////////////////////////////
@@ -54,3 +74,4 @@ $background-color-disabled-checked: var(
 $border-color-disabled-checked: var(
   design-token.get('color', 'grayscale', 'light-1')
 ) !default;
+$box-shadow-disabled-checked: none !default;
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index c8378a8c8..06c4068ea 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -22,6 +22,7 @@
     border-radius: settings.$border-radius;
     background-color: settings.$background-color;
     color: settings.$color;
+    box-shadow: settings.$box-shadow;
 
     &::after {
       content: '';
@@ -45,12 +46,14 @@
       outline: none;
       background-color: settings.$background-color-hover;
       color: settings.$color-hover;
+      box-shadow: settings.$box-shadow-hover;
     }
 
     &:checked {
       border-color: settings.$border-color-checked;
       background-color: settings.$background-color-checked;
       color: settings.$color-checked;
+      box-shadow: settings.$box-shadow-checked;
 
       &::after {
         transform: scale(0.7);
@@ -62,11 +65,13 @@
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
       color: settings.$color-disabled;
+      box-shadow: settings.$box-shadow-disabled;
 
       &:checked {
         border-color: settings.$border-color-disabled-checked;
         background-color: settings.$background-color-disabled-checked;
         color: settings.$color-disabled-checked;
+        box-shadow: settings.$box-shadow-disabled-checked;
       }
 
       &::after {
diff --git a/scss/bitstyles/base/input-radio/_settings.scss b/scss/bitstyles/base/input-radio/_settings.scss
index 09dd019da..53d84a98b 100644
--- a/scss/bitstyles/base/input-radio/_settings.scss
+++ b/scss/bitstyles/base/input-radio/_settings.scss
@@ -15,6 +15,7 @@ $background-color: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color: var(design-token.get('color', 'grayscale')) !default;
+$box-shadow: none !default;
 
 //
 // Hover colors ////////////////////////////////////////
@@ -23,6 +24,7 @@ $background-color-hover: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-hover: var(design-token.get('color', 'brand-1')) !default;
+$box-shadow-hover: none !default;
 
 //
 // Checked colors ////////////////////////////////////////
@@ -31,6 +33,15 @@ $background-color-checked: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-checked: var(design-token.get('color', 'brand-1')) !default;
+$box-shadow-checked: none !default;
+
+//
+// Invalid colors ////////////////////////////////////////
+
+$color-invalid: var(design-token.get('color', 'warning', 'dark-4')) !default;
+$background-color-invalid: var(design-token.get('color', 'grayscale', 'white')) !default;
+$border-color-invalid: var(design-token.get('color', 'warning', 'dark-1')) !default;
+$box-shadow-invalid: none !default;
 
 //
 // Disabled colors ////////////////////////////////////////
@@ -43,6 +54,7 @@ $background-color-disabled: var(
 $border-color-disabled: var(
   design-token.get('color', 'grayscale', 'light-1')
 ) !default;
+$box-shadow-disabled: none !default;
 
 //
 // Disabled-checked colors ////////////////////////////////////////
@@ -55,3 +67,4 @@ $background-color-disabled-checked: var(
 $border-color-disabled-checked: var(
   design-token.get('color', 'grayscale', 'light-1')
 ) !default;
+$box-shadow-disabled-checked: none !default;
diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
index 09321cc54..dd7b4b05a 100644
--- a/scss/bitstyles/base/select/_index.scss
+++ b/scss/bitstyles/base/select/_index.scss
@@ -51,7 +51,8 @@
       color: settings.$color-active;
     }
 
-    &:invalid {
+    &:invalid,
+    &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
       background-color: settings.$background-color-invalid;
       background-image: settings.$background-image-invalid;
diff --git a/scss/bitstyles/base/select/select.stories.mdx b/scss/bitstyles/base/select/select.stories.mdx
deleted file mode 100644
index 49a2b47f7..000000000
--- a/scss/bitstyles/base/select/select.stories.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-<Meta title="Base/Select" />
-
-# Select
-
-<Canvas isColumn>
-  <Story name="Select">
-    {`
-      <select>
-        <option value="value1" selected>Long option text to see some truncation especially in smaller viewports</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-    `}
-  </Story>
-  <Story name="Select (disabled)">
-    {`
-      <select disabled>
-        <option value="value1" selected>Long option text to see some truncation especially in smaller viewports</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-    `}
-  </Story>
-  <Story name="Select (invalid)">
-    {`
-      <select required>
-        <option value="" disabled hidden selected>Please select</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-    `}
-  </Story>
-</Canvas>

From 6c4ccc3bc95f6885f47d4a98514be49b8e39509e Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Tue, 25 Apr 2023 14:47:37 +0200
Subject: [PATCH 07/21] WIP form stories

---
 .storybook/helpers.js                         |  2 +-
 scss/bitstyles/base/forms/_index.scss         |  4 ++-
 scss/bitstyles/base/forms/_settings.scss      |  7 ++++++
 scss/bitstyles/base/forms/forms.stories.js    | 25 +++++++++++++++++++
 .../bitstyles/base/input-checkbox/_index.scss | 12 ++++-----
 scss/bitstyles/base/input-radio/_index.scss   | 10 ++++----
 6 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/.storybook/helpers.js b/.storybook/helpers.js
index ea71430c2..f84347051 100644
--- a/.storybook/helpers.js
+++ b/.storybook/helpers.js
@@ -17,7 +17,7 @@ export const generateButtonLabel = ({
   shapeVariant = [],
   colorVariant = [],
   disabled = false,
-  pressed = false
+  pressed = false,
 }) =>
   capitalizeFirstLetter(
     [
diff --git a/scss/bitstyles/base/forms/_index.scss b/scss/bitstyles/base/forms/_index.scss
index 556d95c6f..720f17f12 100644
--- a/scss/bitstyles/base/forms/_index.scss
+++ b/scss/bitstyles/base/forms/_index.scss
@@ -20,7 +20,9 @@ legend {
 }
 
 label {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: settings.$label-gap;
   margin-bottom: 0;
   cursor: pointer;
 }
diff --git a/scss/bitstyles/base/forms/_settings.scss b/scss/bitstyles/base/forms/_settings.scss
index aada9c136..4d226d036 100644
--- a/scss/bitstyles/base/forms/_settings.scss
+++ b/scss/bitstyles/base/forms/_settings.scss
@@ -1,3 +1,5 @@
+@use '../../tools/size';
+
 //
 // Fieldset ////////////////////////////////////////
 
@@ -14,3 +16,8 @@ $legend-background-color: transparent !default;
 $legend-border: 0 !default;
 $legend-border-radius: 0 !default;
 $legend-color: inherit !default;
+
+//
+// Label ////////////////////////////////////////
+
+$label-gap: size.get('s7');
diff --git a/scss/bitstyles/base/forms/forms.stories.js b/scss/bitstyles/base/forms/forms.stories.js
index 143ca7b7c..3e2e9de93 100644
--- a/scss/bitstyles/base/forms/forms.stories.js
+++ b/scss/bitstyles/base/forms/forms.stories.js
@@ -91,6 +91,31 @@ TextInputInvalid.parameters = {
   ],
 };
 
+export const TextInputInvalidWith = InputTemplate.bind({});
+TextInputInvalid.args = {
+  id: 'input-text',
+  label: 'Telephone number',
+  value: generateLabel(['input', 'text']),
+  placeholder: generateLabel(['input', 'text', 'placeholder']),
+  ariaInvalid: true,
+};
+TextInputInvalid.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+    },
+  ],
+};
+
 export const TextInputDisabled = InputTemplate.bind({});
 TextInputDisabled.args = {
   id: 'input-text',
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index 16049e58e..2693e35af 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -21,16 +21,16 @@
     border: settings.$border-width solid settings.$border-color;
     border-radius: settings.$border-radius;
     background-color: settings.$background-color;
-    color: settings.$color;
     box-shadow: settings.$box-shadow;
+    color: settings.$color;
 
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
       outline: none;
       background-color: settings.$background-color-hover;
-      color: settings.$color-hover;
       box-shadow: settings.$box-shadow-hover;
+      color: settings.$color-hover;
     }
 
     &::after {
@@ -57,8 +57,8 @@
     &:checked {
       border-color: settings.$border-color-checked;
       background-color: settings.$background-color-checked;
-      color: settings.$color-checked;
       box-shadow: settings.$box-shadow-checked;
+      color: settings.$color-checked;
 
       &::after {
         transform: scale(1);
@@ -70,21 +70,21 @@
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
       background-color: settings.$background-color-invalid;
-      color: settings.$color-invalid;
       box-shadow: settings.$box-shadow-invalid;
+      color: settings.$color-invalid;
     }
 
     &[disabled] {
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
-      color: settings.$color-disabled;
       box-shadow: settings.$box-shadow-disabled;
+      color: settings.$color-disabled;
 
       &:checked {
         border-color: settings.$border-color-disabled-checked;
         background-color: settings.$background-color-disabled-checked;
-        color: settings.$color-disabled-checked;
         box-shadow: settings.$box-shadow-disabled-checked;
+        color: settings.$color-disabled-checked;
       }
     }
   }
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index 06c4068ea..ab36e950d 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -21,8 +21,8 @@
     border: settings.$border-width solid settings.$border-color;
     border-radius: settings.$border-radius;
     background-color: settings.$background-color;
-    color: settings.$color;
     box-shadow: settings.$box-shadow;
+    color: settings.$color;
 
     &::after {
       content: '';
@@ -45,15 +45,15 @@
       border-color: settings.$border-color-hover;
       outline: none;
       background-color: settings.$background-color-hover;
-      color: settings.$color-hover;
       box-shadow: settings.$box-shadow-hover;
+      color: settings.$color-hover;
     }
 
     &:checked {
       border-color: settings.$border-color-checked;
       background-color: settings.$background-color-checked;
-      color: settings.$color-checked;
       box-shadow: settings.$box-shadow-checked;
+      color: settings.$color-checked;
 
       &::after {
         transform: scale(0.7);
@@ -64,14 +64,14 @@
     &[disabled] {
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
-      color: settings.$color-disabled;
       box-shadow: settings.$box-shadow-disabled;
+      color: settings.$color-disabled;
 
       &:checked {
         border-color: settings.$border-color-disabled-checked;
         background-color: settings.$background-color-disabled-checked;
-        color: settings.$color-disabled-checked;
         box-shadow: settings.$box-shadow-disabled-checked;
+        color: settings.$color-disabled-checked;
       }
 
       &::after {

From eca6b5de6899edfd4e930c7a782aefe38427ac68 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Thu, 27 Apr 2023 17:40:06 +0200
Subject: [PATCH 08/21] WIP - added select styles - adding radio & checkbox
 styles - Text inputs no lopnger wrapped with labels

TODO:
- apply the focus styles from feature/757-update-link-component
- apply the shadows from feature/749-update-badge-components
- update stories
- add all the extra checked/unchecked versions of states
---
 scss/bitstyles/base/forms/_index.scss         |  4 +-
 scss/bitstyles/base/forms/forms.stories.js    | 76 +++++++++++--------
 scss/bitstyles/base/forms/select.stories.js   | 20 +++++
 .../bitstyles/base/input-checkbox/_index.scss |  3 +-
 .../base/input-checkbox/_settings.scss        |  4 +-
 scss/bitstyles/base/input-radio/_index.scss   |  3 +-
 .../bitstyles/base/input-radio/_settings.scss |  2 +-
 scss/bitstyles/base/select/_index.scss        |  2 +-
 scss/bitstyles/base/select/_settings.scss     | 32 ++++----
 9 files changed, 93 insertions(+), 53 deletions(-)

diff --git a/scss/bitstyles/base/forms/_index.scss b/scss/bitstyles/base/forms/_index.scss
index 720f17f12..dad85dbf8 100644
--- a/scss/bitstyles/base/forms/_index.scss
+++ b/scss/bitstyles/base/forms/_index.scss
@@ -21,9 +21,9 @@ legend {
 
 label {
   display: flex;
-  flex-direction: column;
   gap: settings.$label-gap;
-  margin-bottom: 0;
+  align-items: baseline;
+  margin-bottom: settings.$label-gap;
   cursor: pointer;
 }
 
diff --git a/scss/bitstyles/base/forms/forms.stories.js b/scss/bitstyles/base/forms/forms.stories.js
index 3e2e9de93..67ee9da8b 100644
--- a/scss/bitstyles/base/forms/forms.stories.js
+++ b/scss/bitstyles/base/forms/forms.stories.js
@@ -11,38 +11,50 @@ export default {
   argTypes: {},
 };
 
-const InputTemplate = (args) => {
-  let children;
-  if (args.type && (args.type === 'checkbox' || args.type === 'radio')) {
-    children = [Input(args), args.label];
-  } else {
-    children = [args.label, Input(args)];
-  }
-
-  return Label({
-    htmlFor: args.id,
-    ariaInvalid: args.ariaInvalid,
-    children,
-  });
-};
-
-const SelectTemplate = (args) =>
+const TextInputTemplate = (args) =>
   Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
-    children: [args.label, Select(args)],
+    children: [args.label, Input(args)],
   });
 
-const TextareaTemplate = (args) =>
-  Label({
+const CheckboxTemplate = (args) => {
+  return Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
-    children: [args.label, Textarea(args)],
+    children: [Input(args), args.label],
   });
+};
+
+const SelectTemplate = (args) => {
+  const wrapper = document.createElement('div');
+  wrapper.appendChild(
+    Label({
+      htmlFor: args.id,
+      ariaInvalid: args.ariaInvalid,
+      children: [args.label],
+    })
+  );
+  wrapper.appendChild(Select(args));
+  return wrapper;
+};
+
+const TextareaTemplate = (args) => {
+  const wrapper = document.createElement('div');
+  wrapper.appendChild(
+    Label({
+      htmlFor: args.id,
+      ariaInvalid: args.ariaInvalid,
+      children: [args.label],
+    })
+  );
+  wrapper.appendChild(Textarea(args));
+  return wrapper;
+};
 
 // ***** Text inputs with labels ****************** //
 
-export const TextInput = InputTemplate.bind({});
+export const TextInput = TextInputTemplate.bind({});
 TextInput.args = {
   id: 'input-text',
   label: 'Delivery address',
@@ -66,7 +78,7 @@ TextInput.parameters = {
   ],
 };
 
-export const TextInputInvalid = InputTemplate.bind({});
+export const TextInputInvalid = TextInputTemplate.bind({});
 TextInputInvalid.args = {
   id: 'input-text',
   label: 'Telephone number',
@@ -91,7 +103,7 @@ TextInputInvalid.parameters = {
   ],
 };
 
-export const TextInputInvalidWith = InputTemplate.bind({});
+export const TextInputInvalidWith = TextInputTemplate.bind({});
 TextInputInvalid.args = {
   id: 'input-text',
   label: 'Telephone number',
@@ -116,7 +128,7 @@ TextInputInvalid.parameters = {
   ],
 };
 
-export const TextInputDisabled = InputTemplate.bind({});
+export const TextInputDisabled = TextInputTemplate.bind({});
 TextInputDisabled.args = {
   id: 'input-text',
   label: 'Full name',
@@ -143,14 +155,14 @@ TextInputDisabled.parameters = {
 
 // ***** Radio inputs with labels ****************** //
 
-export const RadioInput = InputTemplate.bind({});
+export const RadioInput = CheckboxTemplate.bind({});
 RadioInput.args = {
   id: 'input-radio',
   type: 'radio',
   label: 'X-Large',
 };
 
-export const RadioInputChecked = InputTemplate.bind({});
+export const RadioInputChecked = CheckboxTemplate.bind({});
 RadioInputChecked.args = {
   id: 'input-radio',
   type: 'radio',
@@ -158,7 +170,7 @@ RadioInputChecked.args = {
   checked: true,
 };
 
-export const RadioInputInvalid = InputTemplate.bind({});
+export const RadioInputInvalid = CheckboxTemplate.bind({});
 RadioInputInvalid.args = {
   id: 'input-radio',
   type: 'radio',
@@ -166,7 +178,7 @@ RadioInputInvalid.args = {
   ariaInvalid: true,
 };
 
-export const RadioInputDisabled = InputTemplate.bind({});
+export const RadioInputDisabled = CheckboxTemplate.bind({});
 RadioInputDisabled.args = {
   id: 'input-radio',
   type: 'radio',
@@ -176,14 +188,14 @@ RadioInputDisabled.args = {
 
 // ***** Radio inputs with labels ****************** //
 
-export const CheckboxInput = InputTemplate.bind({});
+export const CheckboxInput = CheckboxTemplate.bind({});
 CheckboxInput.args = {
   id: 'input-checkbox',
   type: 'checkbox',
   label: 'X-Large',
 };
 
-export const CheckboxInputChecked = InputTemplate.bind({});
+export const CheckboxInputChecked = CheckboxTemplate.bind({});
 CheckboxInputChecked.args = {
   id: 'input-checkbox',
   type: 'checkbox',
@@ -191,7 +203,7 @@ CheckboxInputChecked.args = {
   checked: true,
 };
 
-export const CheckboxInputInvalid = InputTemplate.bind({});
+export const CheckboxInputInvalid = CheckboxTemplate.bind({});
 CheckboxInputInvalid.args = {
   id: 'input-checkbox',
   type: 'checkbox',
@@ -199,7 +211,7 @@ CheckboxInputInvalid.args = {
   ariaInvalid: true,
 };
 
-export const CheckboxInputDisabled = InputTemplate.bind({});
+export const CheckboxInputDisabled = CheckboxTemplate.bind({});
 CheckboxInputDisabled.args = {
   id: 'input-checkbox',
   type: 'checkbox',
diff --git a/scss/bitstyles/base/forms/select.stories.js b/scss/bitstyles/base/forms/select.stories.js
index 5d1f1bc72..7a4b03455 100644
--- a/scss/bitstyles/base/forms/select.stories.js
+++ b/scss/bitstyles/base/forms/select.stories.js
@@ -16,6 +16,26 @@ Base.args = {
   value: generateLabel(['textarea']),
   placeholder: generateLabel(['textarea', 'placeholder']),
 };
+Base.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447aae722a9183fc59d4449',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447aae838a4ce3f997a0b0b',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447aaeae8e2b0449814cad5',
+    },
+  ],
+};
+Base.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447aae722a9183fc59d4449',
+};
 
 export const Invalid = Template.bind({});
 Invalid.args = {
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index 2693e35af..fde6a8422 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -8,11 +8,12 @@
   flex-shrink: 0;
   width: 1em;
   height: 1em;
-  margin-right: settings.$gap;
+  margin: settings.$gap;
   font-size: settings.$size;
   vertical-align: middle;
   cursor: pointer;
   appearance: none;
+  top: calc(settings.$gap / 2);
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index 70764c76e..aeedc839d 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -1,12 +1,12 @@
-@use '../../tools/design-token';
 @use '../../tools/color';
+@use '../../tools/design-token';
 
 //
 // Base styles ////////////////////////////////////////
 $border-radius: var(design-token.get('size', 's6')) !default;
 $gap: var(design-token.get('size', 's4')) !default;
 $border-width: var(design-token.get('size', 's7')) !default;
-$size: var(design-token.get('size', 'm')) !default;
+$size: var(design-token.get('size', 'l1')) !default;
 
 //
 // Base colors ////////////////////////////////////////
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index ab36e950d..66fe383d6 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -8,11 +8,12 @@
   flex-shrink: 0;
   width: 1em;
   height: 1em;
-  margin-right: settings.$gap;
+  margin: settings.$gap;
   font-size: settings.$size;
   vertical-align: middle;
   cursor: pointer;
   appearance: none;
+  top: calc(settings.$gap / 2);
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
diff --git a/scss/bitstyles/base/input-radio/_settings.scss b/scss/bitstyles/base/input-radio/_settings.scss
index 53d84a98b..5ea05e951 100644
--- a/scss/bitstyles/base/input-radio/_settings.scss
+++ b/scss/bitstyles/base/input-radio/_settings.scss
@@ -6,7 +6,7 @@
 $border-radius: layout.$border-radius-round !default;
 $gap: var(design-token.get('size', 's4')) !default;
 $border-width: var(design-token.get('size', 's7')) !default;
-$size: var(design-token.get('size', 'm')) !default;
+$size: var(design-token.get('size', 'l2')) !default;
 
 //
 // Base colors ////////////////////////////////////////
diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
index dd7b4b05a..4064486b7 100644
--- a/scss/bitstyles/base/select/_index.scss
+++ b/scss/bitstyles/base/select/_index.scss
@@ -26,7 +26,7 @@
     background-position: right 0.75em top 50%;
     background-size: 1em;
     color: settings.$color;
-    font: settings.$font;
+    font-weight: settings.$font-weight;
     text-overflow: ellipsis;
     cursor: pointer;
     appearance: none;
diff --git a/scss/bitstyles/base/select/_settings.scss b/scss/bitstyles/base/select/_settings.scss
index 116e83224..f14533a0d 100644
--- a/scss/bitstyles/base/select/_settings.scss
+++ b/scss/bitstyles/base/select/_settings.scss
@@ -1,38 +1,44 @@
 @use '../../tools/design-token';
 @use '../../tools/color';
+@use '../../tools/palette';
+@use '../../tools/shadows';
 
 //
 // Base styles ////////////////////////////////////////
-$padding-vertical: var(design-token.get('size', 's5')) !default;
-$padding-horizontal: var(design-token.get('size', 's1')) !default;
-$border-radius: var(design-token.get('size', 's5')) !default;
-$border-width: var(design-token.get('size', 's7')) !default;
+$padding-vertical: var(design-token.get('size', 's2')) !default;
+$padding-horizontal: var(design-token.get('size', 'l1')) !default;
+$border-radius: var(design-token.get('size', 's4')) !default;
+$border-width: 0.1875rem !default;
 $font: inherit !default;
+$font-weight: var(design-token.get('font-weight', 'normal'));
 
 //
 // Base appearance ////////////////////////////////////////
-$color: var(design-token.get('color', 'grayscale')) !default;
-$border-color: var(design-token.get('color', 'grayscale')) !default;
+$color: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
+$border-color: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
 $background-color: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(var(design-token.get('color', 'grayscale', 'light-1')))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
+$box-shadow: none;
 
 //
 // Hover styles ////////////////////////////////////////
 $color-hover: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
-$border-color-hover: var(design-token.get('color', 'grayscale')) !default;
-$background-color-hover: var(design-token.get('color', 'grayscale')) !default;
+$border-color-hover: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
+$background-color-hover: var(design-token.get('color', 'brand-1', 'light-4')) !default;
 $background-image-hover: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color($color-hover)}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
+$box-shadow: none;
 
 //
 // Active styles ////////////////////////////////////////
-$color-active: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
+$color-active: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
 $border-color-active: var(
-  design-token.get('color', 'grayscale', 'dark-1')
+  design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
-$background-color-active: transparent !default;
+$background-color-active: var(design-token.get('color', 'grayscale', 'white')) !default;
 $background-image-active: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(var(design-token.get('color', 'grayscale', 'light-1')))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
+$box-shadow: shadows.get('default');
 
 //
 // Invalid styles ////////////////////////////////////////
@@ -47,9 +53,9 @@ $background-image-invalid: url("data:image/svg+xml,%3Csvg width='20' height='20'
 // Disabled styles ////////////////////////////////////////
 $color-disabled: var(design-token.get('color', 'grayscale')) !default;
 $border-color-disabled: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale')
 ) !default;
 $background-color-disabled: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale', 'light-3')
 ) !default;
 $background-image-disabled: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(var(design-token.get('color', 'grayscale', 'light-1')))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;

From 8a2f1b892223e9101bb7490912d0e7ef01ce760e Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Wed, 3 May 2023 12:59:15 +0200
Subject: [PATCH 09/21] - Updates stories to cover all states - Adds sass
 variables for the extra states on checkboxes & radios - All stories now
 include labels

---
 scss/bitstyles/base/forms/Label.js            |   8 +-
 scss/bitstyles/base/forms/forms.stories.js    | 258 ------------------
 scss/bitstyles/base/forms/forms.stories.mdx   |  44 +--
 .../base/forms/input-checkbox.stories.js      |  86 +++++-
 .../base/forms/input-radio.stories.js         |  66 ++++-
 .../base/forms/input-text.stories.js          | 168 +++++++-----
 scss/bitstyles/base/forms/label.stories.js    |   3 -
 scss/bitstyles/base/forms/select.stories.js   |  23 +-
 scss/bitstyles/base/forms/textarea.stories.js |  59 ++--
 .../bitstyles/base/input-checkbox/_index.scss |  20 ++
 .../base/input-checkbox/_settings.scss        |  18 +-
 scss/bitstyles/base/input-radio/_index.scss   |  37 ++-
 .../bitstyles/base/input-radio/_settings.scss |  21 ++
 scss/bitstyles/settings/_focus.scss           |   6 +
 14 files changed, 421 insertions(+), 396 deletions(-)
 delete mode 100644 scss/bitstyles/base/forms/forms.stories.js
 create mode 100644 scss/bitstyles/settings/_focus.scss

diff --git a/scss/bitstyles/base/forms/Label.js b/scss/bitstyles/base/forms/Label.js
index 44aa97e46..8c87b5809 100644
--- a/scss/bitstyles/base/forms/Label.js
+++ b/scss/bitstyles/base/forms/Label.js
@@ -1,9 +1,15 @@
-export default ({ children, htmlFor = null, ariaInvalid = false }) => {
+export default ({
+  children,
+  htmlFor = null,
+  ariaInvalid = false,
+  classnames = [],
+}) => {
   const label = document.createElement('label');
   children.forEach((child) => {
     label.append(child);
   });
   if (ariaInvalid) label.setAttribute('aria-invalid', ariaInvalid);
   if (htmlFor) label.setAttribute('for', htmlFor);
+  classnames.forEach((classname) => label.classList.add(classname));
   return label;
 };
diff --git a/scss/bitstyles/base/forms/forms.stories.js b/scss/bitstyles/base/forms/forms.stories.js
deleted file mode 100644
index 67ee9da8b..000000000
--- a/scss/bitstyles/base/forms/forms.stories.js
+++ /dev/null
@@ -1,258 +0,0 @@
-import Input from './Input';
-import Label from './Label';
-import Textarea from './Textarea';
-import Select from './Select';
-import { generateLabel } from '../../../../.storybook/helpers';
-
-export default {
-  title: 'Base/Forms',
-  component: Input,
-  subcomponents: [Label, Select],
-  argTypes: {},
-};
-
-const TextInputTemplate = (args) =>
-  Label({
-    htmlFor: args.id,
-    ariaInvalid: args.ariaInvalid,
-    children: [args.label, Input(args)],
-  });
-
-const CheckboxTemplate = (args) => {
-  return Label({
-    htmlFor: args.id,
-    ariaInvalid: args.ariaInvalid,
-    children: [Input(args), args.label],
-  });
-};
-
-const SelectTemplate = (args) => {
-  const wrapper = document.createElement('div');
-  wrapper.appendChild(
-    Label({
-      htmlFor: args.id,
-      ariaInvalid: args.ariaInvalid,
-      children: [args.label],
-    })
-  );
-  wrapper.appendChild(Select(args));
-  return wrapper;
-};
-
-const TextareaTemplate = (args) => {
-  const wrapper = document.createElement('div');
-  wrapper.appendChild(
-    Label({
-      htmlFor: args.id,
-      ariaInvalid: args.ariaInvalid,
-      children: [args.label],
-    })
-  );
-  wrapper.appendChild(Textarea(args));
-  return wrapper;
-};
-
-// ***** Text inputs with labels ****************** //
-
-export const TextInput = TextInputTemplate.bind({});
-TextInput.args = {
-  id: 'input-text',
-  label: 'Delivery address',
-  value: generateLabel(['input', 'text']),
-  placeholder: generateLabel(['input', 'text', 'placeholder']),
-};
-TextInput.parameters = {
-  zeplinLink: [
-    {
-      name: 'base',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
-    },
-    {
-      name: 'hover',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
-    },
-    {
-      name: 'active',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
-    },
-  ],
-};
-
-export const TextInputInvalid = TextInputTemplate.bind({});
-TextInputInvalid.args = {
-  id: 'input-text',
-  label: 'Telephone number',
-  value: generateLabel(['input', 'text']),
-  placeholder: generateLabel(['input', 'text', 'placeholder']),
-  ariaInvalid: true,
-};
-TextInputInvalid.parameters = {
-  zeplinLink: [
-    {
-      name: 'base',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
-    },
-    {
-      name: 'hover',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
-    },
-    {
-      name: 'active',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
-    },
-  ],
-};
-
-export const TextInputInvalidWith = TextInputTemplate.bind({});
-TextInputInvalid.args = {
-  id: 'input-text',
-  label: 'Telephone number',
-  value: generateLabel(['input', 'text']),
-  placeholder: generateLabel(['input', 'text', 'placeholder']),
-  ariaInvalid: true,
-};
-TextInputInvalid.parameters = {
-  zeplinLink: [
-    {
-      name: 'base',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
-    },
-    {
-      name: 'hover',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
-    },
-    {
-      name: 'active',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
-    },
-  ],
-};
-
-export const TextInputDisabled = TextInputTemplate.bind({});
-TextInputDisabled.args = {
-  id: 'input-text',
-  label: 'Full name',
-  value: generateLabel(['input', 'text']),
-  placeholder: generateLabel(['input', 'text', 'placeholder']),
-  disabled: true,
-};
-TextInputDisabled.parameters = {
-  zeplinLink: [
-    {
-      name: 'base',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
-    },
-    {
-      name: 'hover',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
-    },
-    {
-      name: 'active',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
-    },
-  ],
-};
-
-// ***** Radio inputs with labels ****************** //
-
-export const RadioInput = CheckboxTemplate.bind({});
-RadioInput.args = {
-  id: 'input-radio',
-  type: 'radio',
-  label: 'X-Large',
-};
-
-export const RadioInputChecked = CheckboxTemplate.bind({});
-RadioInputChecked.args = {
-  id: 'input-radio',
-  type: 'radio',
-  label: 'Large',
-  checked: true,
-};
-
-export const RadioInputInvalid = CheckboxTemplate.bind({});
-RadioInputInvalid.args = {
-  id: 'input-radio',
-  type: 'radio',
-  label: 'Medium',
-  ariaInvalid: true,
-};
-
-export const RadioInputDisabled = CheckboxTemplate.bind({});
-RadioInputDisabled.args = {
-  id: 'input-radio',
-  type: 'radio',
-  label: 'Small',
-  disabled: true,
-};
-
-// ***** Radio inputs with labels ****************** //
-
-export const CheckboxInput = CheckboxTemplate.bind({});
-CheckboxInput.args = {
-  id: 'input-checkbox',
-  type: 'checkbox',
-  label: 'X-Large',
-};
-
-export const CheckboxInputChecked = CheckboxTemplate.bind({});
-CheckboxInputChecked.args = {
-  id: 'input-checkbox',
-  type: 'checkbox',
-  label: 'Large',
-  checked: true,
-};
-
-export const CheckboxInputInvalid = CheckboxTemplate.bind({});
-CheckboxInputInvalid.args = {
-  id: 'input-checkbox',
-  type: 'checkbox',
-  label: 'Medium',
-  ariaInvalid: true,
-};
-
-export const CheckboxInputDisabled = CheckboxTemplate.bind({});
-CheckboxInputDisabled.args = {
-  id: 'input-checkbox',
-  type: 'checkbox',
-  label: 'Small',
-  disabled: true,
-};
-
-// ***** Selects with labels ****************** //
-
-export const SelectBase = SelectTemplate.bind({});
-SelectBase.args = {
-  label: 'Delivery method',
-};
-
-export const SelectInvalid = SelectTemplate.bind({});
-SelectInvalid.args = {
-  label: 'Delivery method',
-  ariaInvalid: true,
-};
-
-export const SelectDisabled = SelectTemplate.bind({});
-SelectDisabled.args = {
-  label: 'Delivery method',
-  disabled: true,
-};
-
-// ***** Selects with labels ****************** //
-
-export const TextareaBase = TextareaTemplate.bind({});
-TextareaBase.args = {
-  label: 'Extra comments',
-};
-
-export const TextareaInvalid = TextareaTemplate.bind({});
-TextareaInvalid.args = {
-  label: 'Extra comments',
-  ariaInvalid: true,
-};
-
-export const TextareaDisabled = TextareaTemplate.bind({});
-TextareaDisabled.args = {
-  label: 'Extra comments',
-  disabled: true,
-};
diff --git a/scss/bitstyles/base/forms/forms.stories.mdx b/scss/bitstyles/base/forms/forms.stories.mdx
index 08895a7fb..21a9e58f8 100644
--- a/scss/bitstyles/base/forms/forms.stories.mdx
+++ b/scss/bitstyles/base/forms/forms.stories.mdx
@@ -15,39 +15,49 @@ The exception is for radios & checkboxes (see below), which should always be a c
 This includes all standard `type="text"` inputs, plus all the text-based inputs such as `email`, `password`, `tel` — take a look at the other stories in the forms section for examples of the other input types.
 
 <Canvas isColumn>
-  <Story id="base-forms--text-input" />
-  <Story id="base-forms--text-input-invalid" />
-  <Story id="base-forms--text-input-disabled" />
+  <Story id="base-forms-input-text--text-with-value" />
+  <Story id="base-forms-input-text--text-with-value-invalid" />
+  <Story id="base-forms-input-text--text-with-value-disabled" />
+  <Story id="base-forms-input-text--text-empty" />
+  <Story id="base-forms-input-text--text-empty-invalid" />
+  <Story id="base-forms-input-text--text-empty-disabled" />
 </Canvas>
 
 ## Textareas
 
 <Canvas isColumn>
-  <Story id="base-forms--textarea-base" />
-  <Story id="base-forms--textarea-invalid" />
-  <Story id="base-forms--textarea-disabled" />
+  <Story id="base-forms-textarea--with-value" />
+  <Story id="base-forms-textarea--with-value-invalid" />
+  <Story id="base-forms-textarea--with-value-disabled" />
+  <Story id="base-forms-textarea--empty" />
+  <Story id="base-forms-textarea--empty-invalid" />
+  <Story id="base-forms-textarea--empty-disabled" />
 </Canvas>
 
 ## Checkboxes and Radios
 
 <Canvas isColumn>
-  <Story id="base-forms--checkbox-input" />
-  <Story id="base-forms--checkbox-input-checked" />
-  <Story id="base-forms--checkbox-input-invalid" />
-  <Story id="base-forms--checkbox-input-disabled" />
+  <Story id="base-forms-input-checkbox--base" />
+  <Story id="base-forms-input-checkbox--invalid" />
+  <Story id="base-forms-input-checkbox--disabled" />
+  <Story id="base-forms-input-checkbox--checked" />
+  <Story id="base-forms-input-checkbox--checked-invalid" />
+  <Story id="base-forms-input-checkbox--checked-disabled" />
 </Canvas>
 
 <Canvas isColumn>
-  <Story id="base-forms--radio-input" />
-  <Story id="base-forms--radio-input-checked" />
-  <Story id="base-forms--radio-input-invalid" />
-  <Story id="base-forms--radio-input-disabled" />
+  <Story id="base-forms-input-radio--base" />
+  <Story id="base-forms-input-radio--invalid" />
+  <Story id="base-forms-input-radio--disabled" />
+  <Story id="base-forms-input-radio--checked" />
+  <Story id="base-forms-input-radio--checked-invalid" />
+  <Story id="base-forms-input-radio--checked-disabled" />
 </Canvas>
 
 ## Selects
 
 <Canvas isColumn>
-  <Story id="base-forms--select-base" />
-  <Story id="base-forms--select-invalid" />
-  <Story id="base-forms--select-disabled" />
+  <Story id="base-forms-select--base" />
+  <Story id="base-forms-select--invalid" />
+  <Story id="base-forms-select--disabled" />
 </Canvas>
diff --git a/scss/bitstyles/base/forms/input-checkbox.stories.js b/scss/bitstyles/base/forms/input-checkbox.stories.js
index f9b8acdcb..6278b128d 100644
--- a/scss/bitstyles/base/forms/input-checkbox.stories.js
+++ b/scss/bitstyles/base/forms/input-checkbox.stories.js
@@ -1,26 +1,100 @@
 import Input from './Input';
+import Label from './Label';
 
 export default {
   title: 'Base/Forms/Input checkbox',
   component: Input,
+  subcomponents: [Label],
   argTypes: {},
 };
 
-const Template = (args) => Input(args);
+const Template = (args) => {
+  return Label({
+    htmlFor: args.id,
+    ariaInvalid: args.ariaInvalid,
+    children: [Input(args), args.label],
+    classname: 'u-items-baseline',
+  });
+};
 
 // ***** Text inputs with values ****************** //
 
 export const Base = Template.bind({});
-Base.args = { type: 'checkbox' };
+Base.args = { type: 'checkbox', label: 'Unchecked' };
+Base.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc96111d7d524003d54ff',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc97298cca5236f0332ce',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc97028fa4823ffce07c8',
+    },
+  ],
+};
 
 export const Invalid = Template.bind({});
-Invalid.args = { type: 'checkbox', ariaInvalid: true };
+Invalid.args = {
+  type: 'checkbox',
+  ariaInvalid: true,
+  label: 'Unchecked invalid',
+};
 
 export const Disabled = Template.bind({});
-Disabled.args = { type: 'checkbox', disabled: true };
+Disabled.args = {
+  type: 'checkbox',
+  disabled: true,
+  label: 'Unchecked disabled',
+};
+Disabled.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc971830548239007431f',
+};
 
 export const Checked = Template.bind({});
-Checked.args = { type: 'checkbox', checked: true };
+Checked.args = {
+  type: 'checkbox',
+  checked: true,
+  label: 'Checked',
+};
+Checked.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc96362f9d023b1e5d965',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc964d04e11239e10ece0',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc96842426023b99c98de',
+    },
+  ],
+};
+
+export const CheckedInvalid = Template.bind({});
+CheckedInvalid.args = {
+  type: 'checkbox',
+  checked: true,
+  ariaInvalid: true,
+  label: 'Checked invalid',
+};
 
 export const CheckedDisabled = Template.bind({});
-CheckedDisabled.args = { type: 'checkbox', checked: true, disabled: true };
+CheckedDisabled.args = {
+  type: 'checkbox',
+  checked: true,
+  disabled: true,
+  label: 'Checked disabled',
+};
+CheckedDisabled.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc96c28fa4823ffce078c',
+};
diff --git a/scss/bitstyles/base/forms/input-radio.stories.js b/scss/bitstyles/base/forms/input-radio.stories.js
index 33c1ef4f3..f9d83f6a1 100644
--- a/scss/bitstyles/base/forms/input-radio.stories.js
+++ b/scss/bitstyles/base/forms/input-radio.stories.js
@@ -1,26 +1,80 @@
 import Input from './Input';
+import Label from './Label';
 
 export default {
   title: 'Base/Forms/Input radio',
   component: Input,
+  subcomponents: [Label],
   argTypes: {},
 };
 
-const Template = (args) => Input(args);
+const Template = (args) => {
+  return Label({
+    htmlFor: args.id,
+    ariaInvalid: args.ariaInvalid,
+    children: [Input(args), args.label],
+    classname: 'u-items-baseline',
+  });
+};
 
 // ***** Text inputs with values ****************** //
 
 export const Base = Template.bind({});
-Base.args = { type: 'radio' };
+Base.args = { type: 'radio', label: 'Unchecked' };
+Base.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2b5d50be32376c68fcd',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2b95a65082385f940c1',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2bedf599923e9f4e22d',
+    },
+  ],
+};
 
 export const Invalid = Template.bind({});
-Invalid.args = { type: 'radio', ariaInvalid: true };
+Invalid.args = { type: 'radio', ariaInvalid: true, label: 'Unchecked invalid' };
 
 export const Disabled = Template.bind({});
-Disabled.args = { type: 'radio', disabled: true };
+Disabled.args = { type: 'radio', disabled: true, label: 'Unchecked disabled' };
 
 export const Checked = Template.bind({});
-Checked.args = { type: 'radio', checked: true };
+Checked.args = { type: 'radio', checked: true, label: 'Checked' };
+Checked.parameters = {
+  zeplinLink: [
+    {
+      name: 'base',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2bd35ff5623d67134f9',
+    },
+    {
+      name: 'hover',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2b76d8d3923c74e7dc1',
+    },
+    {
+      name: 'active',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2b628fa4823ffcd6e3f',
+    },
+  ],
+};
+
+export const CheckedInvalid = Template.bind({});
+CheckedInvalid.args = {
+  type: 'radio',
+  checked: true,
+  ariaInvalid: true,
+  label: 'Checked invalid',
+};
 
 export const CheckedDisabled = Template.bind({});
-CheckedDisabled.args = { type: 'radio', checked: true, disabled: true };
+CheckedDisabled.args = {
+  type: 'radio',
+  checked: true,
+  disabled: true,
+  label: 'Checked disabled',
+};
diff --git a/scss/bitstyles/base/forms/input-text.stories.js b/scss/bitstyles/base/forms/input-text.stories.js
index 6b82551d1..cab379ed9 100644
--- a/scss/bitstyles/base/forms/input-text.stories.js
+++ b/scss/bitstyles/base/forms/input-text.stories.js
@@ -1,22 +1,35 @@
 import Input from './Input';
-import { generateLabel } from '../../../../.storybook/helpers';
+import Label from './Label';
 
 export default {
   title: 'Base/Forms/Input text',
   component: Input,
+  subcomponents: [Label],
   argTypes: {},
 };
 
-const Template = (args) => Input(args);
+const Template = (args) => {
+  const wrapper = new DocumentFragment();
+  const label = Label({
+    htmlFor: args.id,
+    ariaInvalid: args.ariaInvalid,
+    children: [args.label],
+  });
+  const input = Input(args);
+  wrapper.append(label);
+  wrapper.append(input);
+  return wrapper;
+};
 
 // ***** Text inputs with values ****************** //
 
-export const Text = Template.bind({});
-Text.args = {
-  value: generateLabel(['input', 'text']),
-  placeholder: generateLabel(['input', 'text', 'placeholder']),
+export const TextWithValue = Template.bind({});
+TextWithValue.args = {
+  value: 'Input text with value',
+  placeholder: 'Input text placeholder',
+  label: 'Input text with value',
 };
-Text.parameters = {
+TextWithValue.parameters = {
   zeplinLink: [
     {
       name: 'base',
@@ -33,24 +46,26 @@ Text.parameters = {
   ],
 };
 
-export const TextInvalid = Template.bind({});
-TextInvalid.args = {
-  value: generateLabel(['input', 'text', 'invalid']),
-  placeholder: generateLabel(['input', 'text', 'invalid', 'placeholder']),
+export const TextWithValueInvalid = Template.bind({});
+TextWithValueInvalid.args = {
+  value: 'Input text with value invalid',
+  placeholder: 'Input text invalid placeholder',
   ariaInvalid: true,
+  label: 'Input text with value invalid',
 };
-TextInvalid.parameters = {
+TextWithValueInvalid.parameters = {
   zeplinLink:
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
 };
 
-export const TextDisabled = Template.bind({});
-TextDisabled.args = {
-  value: generateLabel(['input', 'text', 'disabled']),
-  placeholder: generateLabel(['input', 'text', 'disabled', 'placeholder']),
+export const TextWithValueDisabled = Template.bind({});
+TextWithValueDisabled.args = {
+  value: 'Input text with value disabled',
+  placeholder: 'Input text disabled placeholder',
   disabled: true,
+  label: 'Input text with value disabled',
 };
-TextDisabled.parameters = {
+TextWithValueDisabled.parameters = {
   zeplinLink:
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
 };
@@ -60,7 +75,8 @@ TextDisabled.parameters = {
 export const TextEmpty = Template.bind({});
 TextEmpty.args = {
   value: '',
-  placeholder: generateLabel(['input', 'text', 'empty', 'placeholder']),
+  placeholder: 'Input text empty',
+  label: 'Input text empty',
 };
 TextEmpty.parameters = {
   zeplinLink: [
@@ -79,49 +95,40 @@ TextEmpty.parameters = {
   ],
 };
 
-export const TextInvalidEmpty = Template.bind({});
-TextInvalidEmpty.args = {
+export const TextEmptyInvalid = Template.bind({});
+TextEmptyInvalid.args = {
   value: '',
-  placeholder: generateLabel([
-    'input',
-    'text',
-    'invalid',
-    'empty',
-    'placeholder',
-  ]),
+  placeholder: 'Input text empty invalid',
+  label: 'Input text empty invalid',
   ariaInvalid: true,
 };
-TextInvalidEmpty.parameters = {
+TextEmptyInvalid.parameters = {
   zeplinLink:
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
 };
 
-export const TextDisabledEmpty = Template.bind({});
-TextDisabledEmpty.args = {
-  disabled: true,
+export const TextEmptyDisabled = Template.bind({});
+TextEmptyDisabled.args = {
   value: '',
-  placeholder: generateLabel([
-    'input',
-    'text',
-    'disabled',
-    'empty',
-    'placeholder',
-  ]),
-};
-TextDisabledEmpty.parameters = {
+  placeholder: 'Input text empty disabled',
+  label: 'Input text empty disabled',
+  disabled: true,
+};
+TextEmptyDisabled.parameters = {
   zeplinLink:
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
 };
 
 // ***** Email inputs with values ****************** //
 
-export const Email = Template.bind({});
-Email.args = {
+export const EmailWithValue = Template.bind({});
+EmailWithValue.args = {
   type: 'email',
-  value: generateLabel(['input', 'email']),
-  placeholder: generateLabel(['input', 'email', 'placeholder']),
+  value: 'Input@email.base',
+  placeholder: 'Input email placeholder',
+  label: 'Input email with value',
 };
-Email.parameters = {
+EmailWithValue.parameters = {
   zeplinLink: [
     {
       name: 'base',
@@ -138,26 +145,28 @@ Email.parameters = {
   ],
 };
 
-export const EmailInvalid = Template.bind({});
-EmailInvalid.args = {
+export const EmailWithValueInvalid = Template.bind({});
+EmailWithValueInvalid.args = {
   type: 'email',
-  value: generateLabel(['input', 'email', 'invalid']),
-  placeholder: generateLabel(['input', 'email', 'invalid', 'placeholder']),
+  value: 'Input@email.invalid',
+  placeholder: 'Input email with value invalid placeholder',
+  label: 'Input email with value invalid',
   ariaInvalid: true,
 };
-EmailInvalid.parameters = {
+EmailWithValueInvalid.parameters = {
   zeplinLink:
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
 };
 
-export const EmailDisabled = Template.bind({});
-EmailDisabled.args = {
+export const EmailWithValueDisabled = Template.bind({});
+EmailWithValueDisabled.args = {
   type: 'email',
-  value: generateLabel(['input', 'email', 'disabled']),
-  placeholder: generateLabel(['input', 'email', 'disabled', 'placeholder']),
+  value: 'Input@email.disabled',
+  placeholder: 'Input email with value disabled placeholder',
+  label: 'Input email with value disabled',
   disabled: true,
 };
-EmailDisabled.parameters = {
+EmailWithValueDisabled.parameters = {
   zeplinLink:
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
 };
@@ -168,7 +177,8 @@ export const EmailEmpty = Template.bind({});
 EmailEmpty.args = {
   type: 'email',
   value: '',
-  placeholder: generateLabel(['input', 'email', 'placeholder']),
+  placeholder: 'Input email empty placeholder',
+  label: 'Input email empty',
 };
 EmailEmpty.parameters = {
   zeplinLink: [
@@ -191,7 +201,8 @@ export const EmailInvalidEmpty = Template.bind({});
 EmailInvalidEmpty.args = {
   type: 'email',
   value: '',
-  placeholder: generateLabel(['input', 'email', 'invalid', 'placeholder']),
+  placeholder: 'Input email empty invalid placeholder',
+  label: 'Input email empty invalid',
   ariaInvalid: true,
 };
 EmailInvalidEmpty.parameters = {
@@ -203,7 +214,8 @@ export const EmailDisabledEmpty = Template.bind({});
 EmailDisabledEmpty.args = {
   type: 'email',
   value: '',
-  placeholder: generateLabel(['input', 'email', 'disabled', 'placeholder']),
+  placeholder: 'Input email empty disabled placeholder',
+  label: 'Input email empty disabled',
   disabled: true,
 };
 EmailDisabledEmpty.parameters = {
@@ -213,26 +225,29 @@ EmailDisabledEmpty.parameters = {
 
 // ***** Number inputs with values ****************** //
 
-export const Number = Template.bind({});
-Number.args = {
+export const NumberWithValue = Template.bind({});
+NumberWithValue.args = {
   type: 'number',
   value: '012345',
-  placeholder: generateLabel(['input', 'number', 'placeholder']),
+  placeholder: 'Input number placeholder',
+  label: 'Input number with value',
 };
 
-export const NumberInvalid = Template.bind({});
-NumberInvalid.args = {
+export const NumberWithValueInvalid = Template.bind({});
+NumberWithValueInvalid.args = {
   type: 'number',
-  value: generateLabel(['input', 'email', 'invalid']),
-  placeholder: generateLabel(['input', 'number', 'invalid', 'placeholder']),
+  value: 'Input email invalid',
+  placeholder: 'Input number invalid placeholder',
+  label: 'Input number with value invalid',
   ariaInvalid: true,
 };
 
-export const NumberDisabled = Template.bind({});
-NumberDisabled.args = {
+export const NumberWithValueDisabled = Template.bind({});
+NumberWithValueDisabled.args = {
   type: 'number',
   value: '012345',
-  placeholder: generateLabel(['input', 'number', 'disabled', 'placeholder']),
+  placeholder: 'Input number disabled placeholder',
+  label: 'Input number with value disabled',
   disabled: true,
 };
 
@@ -242,21 +257,24 @@ export const NumberEmpty = Template.bind({});
 NumberEmpty.args = {
   type: 'number',
   value: '',
-  placeholder: generateLabel(['input', 'number', 'placeholder']),
+  placeholder: 'Input number placeholder',
+  label: 'Input number empty',
 };
 
-export const NumberInvalidEmpty = Template.bind({});
-NumberInvalidEmpty.args = {
+export const NumberEmptyInvalid = Template.bind({});
+NumberEmptyInvalid.args = {
   type: 'number',
   value: '',
-  placeholder: generateLabel(['input', 'number', 'invalid', 'placeholder']),
+  placeholder: 'Input number invalid placeholder',
+  label: 'Input number empty invalid',
   ariaInvalid: true,
 };
 
-export const NumberDisabledEmpty = Template.bind({});
-NumberDisabledEmpty.args = {
+export const NumberEmptyDisabled = Template.bind({});
+NumberEmptyDisabled.args = {
   type: 'number',
   value: '',
-  placeholder: generateLabel(['input', 'number', 'disabled', 'placeholder']),
+  placeholder: 'Input number disabled placeholder',
+  label: 'Input number empty disabled',
   disabled: true,
 };
diff --git a/scss/bitstyles/base/forms/label.stories.js b/scss/bitstyles/base/forms/label.stories.js
index ea0257940..57199a32e 100644
--- a/scss/bitstyles/base/forms/label.stories.js
+++ b/scss/bitstyles/base/forms/label.stories.js
@@ -17,9 +17,6 @@ const Link = () => {
 
 // ***** Labels ****************** //
 
-export const Base = Template.bind({});
-Base.args = { children: ['Simple text label'] };
-
 export const Invalid = Template.bind({});
 Invalid.args = {
   children: ['Simple text label for an invalid input'],
diff --git a/scss/bitstyles/base/forms/select.stories.js b/scss/bitstyles/base/forms/select.stories.js
index 7a4b03455..e2b91cc32 100644
--- a/scss/bitstyles/base/forms/select.stories.js
+++ b/scss/bitstyles/base/forms/select.stories.js
@@ -1,3 +1,4 @@
+import Label from './Label';
 import Select from './Select';
 import { generateLabel } from '../../../../.storybook/helpers';
 
@@ -7,14 +8,24 @@ export default {
   argTypes: {},
 };
 
-const Template = (args) => Select(args);
+const Template = (args) => {
+  const wrapper = new DocumentFragment();
+  wrapper.append(
+    Label({
+      htmlFor: args.id,
+      ariaInvalid: args.ariaInvalid,
+      children: [args.label],
+    })
+  );
+  wrapper.append(Select(args));
+  return wrapper;
+};
 
 // ***** Selects with values ****************** //
 
 export const Base = Template.bind({});
 Base.args = {
-  value: generateLabel(['textarea']),
-  placeholder: generateLabel(['textarea', 'placeholder']),
+  label: 'Select',
 };
 Base.parameters = {
   zeplinLink: [
@@ -39,14 +50,12 @@ Base.parameters = {
 
 export const Invalid = Template.bind({});
 Invalid.args = {
-  value: generateLabel(['textarea']),
+  label: 'Select invalid',
   ariaInvalid: true,
-  placeholder: generateLabel(['textarea', 'invalid', 'placeholder']),
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  value: generateLabel(['textarea']),
+  label: 'Select disabled',
   disabled: true,
-  placeholder: generateLabel(['textarea', 'invalid', 'placeholder']),
 };
diff --git a/scss/bitstyles/base/forms/textarea.stories.js b/scss/bitstyles/base/forms/textarea.stories.js
index 9502bad72..397e551b1 100644
--- a/scss/bitstyles/base/forms/textarea.stories.js
+++ b/scss/bitstyles/base/forms/textarea.stories.js
@@ -1,5 +1,5 @@
+import Label from './Label';
 import Textarea from './Textarea';
-import { generateLabel } from '../../../../.storybook/helpers';
 
 export default {
   title: 'Base/Forms/Textarea',
@@ -7,28 +7,42 @@ export default {
   argTypes: {},
 };
 
-const Template = (args) => Textarea(args);
+const Template = (args) => {
+  const wrapper = new DocumentFragment();
+  wrapper.append(
+    Label({
+      htmlFor: args.id,
+      ariaInvalid: args.ariaInvalid,
+      children: [args.label],
+    })
+  );
+  wrapper.append(Textarea(args));
+  return wrapper;
+};
 
 // ***** Textareas with values ****************** //
 
-export const Base = Template.bind({});
-Base.args = {
-  value: generateLabel(['textarea']),
-  placeholder: generateLabel(['textarea', 'placeholder']),
+export const WithValue = Template.bind({});
+WithValue.args = {
+  value: 'Textarea with value',
+  placeholder: 'Textarea with value placeholder',
+  label: 'Textarea with value',
 };
 
-export const Invalid = Template.bind({});
-Invalid.args = {
-  value: generateLabel(['textarea']),
+export const WithValueInvalid = Template.bind({});
+WithValueInvalid.args = {
+  value: 'Textarea',
   ariaInvalid: true,
-  placeholder: generateLabel(['textarea', 'invalid', 'placeholder']),
+  placeholder: 'Textarea with value invalid placeholder',
+  label: 'Textarea with value invalid',
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  value: generateLabel(['textarea']),
+export const WithValueDisabled = Template.bind({});
+WithValueDisabled.args = {
+  value: 'Textarea with value disabled',
   disabled: true,
-  placeholder: generateLabel(['textarea', 'invalid', 'placeholder']),
+  placeholder: 'Textarea with value disabled placeholder',
+  label: 'Textarea with value disabled',
 };
 
 // ***** Textareas without values ****************** //
@@ -36,19 +50,22 @@ Disabled.args = {
 export const Empty = Template.bind({});
 Empty.args = {
   value: '',
-  placeholder: generateLabel(['textarea', 'empty', 'placeholder']),
+  placeholder: 'Textarea empty placeholder',
+  label: 'Textarea empty',
 };
 
-export const InvalidEmpty = Template.bind({});
-InvalidEmpty.args = {
+export const EmptyInvalid = Template.bind({});
+EmptyInvalid.args = {
   value: '',
   ariaInvalid: true,
-  placeholder: generateLabel(['textarea', 'empty', 'placeholder']),
+  placeholder: 'Textarea empty invalid placeholder',
+  label: 'Textarea empty invalid',
 };
 
-export const DisabledEmpty = Template.bind({});
-DisabledEmpty.args = {
+export const EmptyDisabled = Template.bind({});
+EmptyDisabled.args = {
   value: '',
   disabled: true,
-  placeholder: generateLabel(['textarea', 'empty', 'placeholder']),
+  placeholder: 'Textarea empty disabled placeholder',
+  label: 'Textarea empty disabled',
 };
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index fde6a8422..19a52154f 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -14,6 +14,11 @@
   cursor: pointer;
   appearance: none;
   top: calc(settings.$gap / 2);
+
+  &:focus-visible {
+    outline: focus.$outline-color solid focus.$outline-width;
+    outline-offset: focus.$outline-offset;
+  }
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -67,6 +72,21 @@
       }
     }
 
+    &:checked:hover,
+    &:checked:focus {
+      border-color: settings.$border-color-checked-hover;
+      background-color: settings.$background-color-checked-hover;
+      box-shadow: settings.$box-shadow-checked-hover;
+      color: settings.$color-checked-hover;
+    }
+
+    &:checked:active {
+      border-color: settings.$border-color-checked-active;
+      background-color: settings.$background-color-checked-active;
+      box-shadow: settings.$box-shadow-checked-active;
+      color: settings.$color-checked-active;
+    }
+
     &:invalid,
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index aeedc839d..fd5a569bd 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -32,7 +32,23 @@ $color-checked: var(design-token.get('color', 'grayscale', 'white')) !default;
 $background-color-checked: var(design-token.get('color', 'brand-1')) !default;
 $border-color-checked: var(design-token.get('color', 'brand-1')) !default;
 $background-image-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-checked: none !default;
+$box-shadow-checked: shadows.get('default') !default;
+
+//
+// Checked hover colors ////////////////////////////////////////
+$color-checked-hover: palette.get('grayscale', 'white') !default;
+$background-color-checked-hover: palette.get('brand-1') !default;
+$border-color-checked-hover: palette.get('brand-1') !default;
+$background-image-checked-hover: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
+$box-shadow-checked-hover: none !default;
+
+//
+// Checked active colors ////////////////////////////////////////
+$color-checked-active: palette.get('grayscale', 'white') !default;
+$background-color-checked-active: palette.get('brand-1') !default;
+$border-color-checked-active: palette.get('brand-1') !default;
+$background-image-checked-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
+$box-shadow-checked-active: none !default;
 
 //
 // Invalid colors ////////////////////////////////////////
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index 66fe383d6..e0be3cd63 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use './settings';
 @use '../../tools/design-token';
+@use '../../design-tokens/focus';
 
 [type='radio'] {
   display: inline-block;
@@ -14,6 +15,11 @@
   cursor: pointer;
   appearance: none;
   top: calc(settings.$gap / 2);
+
+  &:focus-visible {
+    outline: focus.$outline-color solid focus.$outline-width;
+    outline-offset: focus.$outline-offset;
+  }
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -44,12 +50,18 @@
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
-      outline: none;
       background-color: settings.$background-color-hover;
       box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
+    &:active {
+      border-color: settings.$border-color-active;
+      background-color: settings.$background-color-active;
+      box-shadow: settings.$box-shadow-active;
+      color: settings.$color-active;
+    }
+
     &:checked {
       border-color: settings.$border-color-checked;
       background-color: settings.$background-color-checked;
@@ -62,6 +74,29 @@
       }
     }
 
+    &:checked:hover,
+    &:checked:focus {
+      border-color: settings.$border-color-checked-hover;
+      background-color: settings.$background-color-checked-hover;
+      box-shadow: settings.$box-shadow-checked-hover;
+      color: settings.$color-checked-hover;
+    }
+
+    &:checked:active {
+      border-color: settings.$border-color-checked-active;
+      background-color: settings.$background-color-checked-active;
+      box-shadow: settings.$box-shadow-checked-active;
+      color: settings.$color-checked-active;
+    }
+
+    &:invalid,
+    &[aria-invalid='true'] {
+      border-color: settings.$border-color-invalid;
+      background-color: settings.$background-color-invalid;
+      box-shadow: settings.$box-shadow-invalid;
+      color: settings.$color-invalid;
+    }
+
     &[disabled] {
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
diff --git a/scss/bitstyles/base/input-radio/_settings.scss b/scss/bitstyles/base/input-radio/_settings.scss
index 5ea05e951..dd64e094f 100644
--- a/scss/bitstyles/base/input-radio/_settings.scss
+++ b/scss/bitstyles/base/input-radio/_settings.scss
@@ -26,6 +26,13 @@ $background-color-hover: var(
 $border-color-hover: var(design-token.get('color', 'brand-1')) !default;
 $box-shadow-hover: none !default;
 
+//
+// Hover colors ////////////////////////////////////////
+$color-active: palette.get('brand-1') !default;
+$background-color-active: palette.get('grayscale', 'white') !default;
+$border-color-active: palette.get('brand-1') !default;
+$box-shadow-active: none !default;
+
 //
 // Checked colors ////////////////////////////////////////
 $color-checked: var(design-token.get('color', 'brand-1')) !default;
@@ -35,6 +42,20 @@ $background-color-checked: var(
 $border-color-checked: var(design-token.get('color', 'brand-1')) !default;
 $box-shadow-checked: none !default;
 
+//
+// Checked hover colors ////////////////////////////////////////
+$color-checked-hover: palette.get('brand-1') !default;
+$background-color-checked-hover: palette.get('grayscale', 'white') !default;
+$border-color-checked-hover: palette.get('brand-1') !default;
+$box-shadow-checked-hover: none !default;
+
+//
+// Checked active colors ////////////////////////////////////////
+$color-checked-active: palette.get('brand-1') !default;
+$background-color-checked-active: palette.get('grayscale', 'white') !default;
+$border-color-checked-active: palette.get('brand-1') !default;
+$box-shadow-checked-active: none !default;
+
 //
 // Invalid colors ////////////////////////////////////////
 
diff --git a/scss/bitstyles/settings/_focus.scss b/scss/bitstyles/settings/_focus.scss
new file mode 100644
index 000000000..50773ac65
--- /dev/null
+++ b/scss/bitstyles/settings/_focus.scss
@@ -0,0 +1,6 @@
+@use '../tools/palette';
+@use '../tools/size';
+
+$outline-color: palette.get('brand-2') !default;
+$outline-width: calc(size.get('s7') + size.get('s7') / 2) !default;
+$outline-offset: size.get('s7') !default;

From a62f1b2bd976b434b8907d9d52303309817f465f Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Thu, 4 May 2023 08:04:57 +0200
Subject: [PATCH 10/21] - Corrects colors - Cleanup stories - Adds zeplinLinks
 where available - Adds descriptive children/labels

---
 scss/bitstyles/base/forms/Label.js            |  2 ++
 scss/bitstyles/base/forms/_index.scss         |  5 +++
 scss/bitstyles/base/forms/_settings.scss      |  6 +++-
 scss/bitstyles/base/forms/forms.stories.mdx   | 36 ++++++++++++++++---
 .../base/forms/input-checkbox.stories.js      |  5 ++-
 .../base/forms/input-radio.stories.js         | 13 ++++++-
 .../base/forms/input-text.stories.js          |  7 ++--
 scss/bitstyles/base/forms/label.stories.js    |  6 ++++
 scss/bitstyles/base/forms/select.stories.js   |  3 --
 .../bitstyles/base/input-checkbox/_index.scss |  7 ++++
 .../base/input-checkbox/_settings.scss        | 27 ++++++++------
 scss/bitstyles/base/input-radio/_index.scss   |  2 --
 .../bitstyles/base/input-radio/_settings.scss | 18 +++++-----
 13 files changed, 103 insertions(+), 34 deletions(-)

diff --git a/scss/bitstyles/base/forms/Label.js b/scss/bitstyles/base/forms/Label.js
index 8c87b5809..26a0348eb 100644
--- a/scss/bitstyles/base/forms/Label.js
+++ b/scss/bitstyles/base/forms/Label.js
@@ -2,6 +2,7 @@ export default ({
   children,
   htmlFor = null,
   ariaInvalid = false,
+  ariaDisabled = false,
   classnames = [],
 }) => {
   const label = document.createElement('label');
@@ -9,6 +10,7 @@ export default ({
     label.append(child);
   });
   if (ariaInvalid) label.setAttribute('aria-invalid', ariaInvalid);
+  if (ariaDisabled) label.setAttribute('aria-disabled', ariaDisabled);
   if (htmlFor) label.setAttribute('for', htmlFor);
   classnames.forEach((classname) => label.classList.add(classname));
   return label;
diff --git a/scss/bitstyles/base/forms/_index.scss b/scss/bitstyles/base/forms/_index.scss
index dad85dbf8..05473156e 100644
--- a/scss/bitstyles/base/forms/_index.scss
+++ b/scss/bitstyles/base/forms/_index.scss
@@ -25,6 +25,11 @@ label {
   align-items: baseline;
   margin-bottom: settings.$label-gap;
   cursor: pointer;
+  font-weight: settings.$label-font-weight;
+
+  &[aria-disabled="true"] {
+    color: settings.$label-disabled-color;
+  }
 }
 
 [type='color'] {
diff --git a/scss/bitstyles/base/forms/_settings.scss b/scss/bitstyles/base/forms/_settings.scss
index 4d226d036..42ae20e77 100644
--- a/scss/bitstyles/base/forms/_settings.scss
+++ b/scss/bitstyles/base/forms/_settings.scss
@@ -1,3 +1,5 @@
+@use '../../settings/typography';
+@use '../../tools/palette';
 @use '../../tools/size';
 
 //
@@ -20,4 +22,6 @@ $legend-color: inherit !default;
 //
 // Label ////////////////////////////////////////
 
-$label-gap: size.get('s7');
+$label-gap: size.get('s7') !default;
+$label-font-weight: typography.$font-weight-medium !default;
+$label-disabled-color: palette.get('grayscale') !default;
diff --git a/scss/bitstyles/base/forms/forms.stories.mdx b/scss/bitstyles/base/forms/forms.stories.mdx
index 21a9e58f8..be006f090 100644
--- a/scss/bitstyles/base/forms/forms.stories.mdx
+++ b/scss/bitstyles/base/forms/forms.stories.mdx
@@ -2,6 +2,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Base/Forms/Overview" />
 
+<Story id="ui-data-forms--login-form-with-errors" />
+
 # Forms
 
 ## Inputs and labels
@@ -18,6 +20,9 @@ This includes all standard `type="text"` inputs, plus all the text-based inputs
   <Story id="base-forms-input-text--text-with-value" />
   <Story id="base-forms-input-text--text-with-value-invalid" />
   <Story id="base-forms-input-text--text-with-value-disabled" />
+</Canvas>
+
+<Canvas isColumn>
   <Story id="base-forms-input-text--text-empty" />
   <Story id="base-forms-input-text--text-empty-invalid" />
   <Story id="base-forms-input-text--text-empty-disabled" />
@@ -25,30 +30,53 @@ This includes all standard `type="text"` inputs, plus all the text-based inputs
 
 ## Textareas
 
+### No values
+
 <Canvas isColumn>
-  <Story id="base-forms-textarea--with-value" />
-  <Story id="base-forms-textarea--with-value-invalid" />
-  <Story id="base-forms-textarea--with-value-disabled" />
   <Story id="base-forms-textarea--empty" />
   <Story id="base-forms-textarea--empty-invalid" />
   <Story id="base-forms-textarea--empty-disabled" />
 </Canvas>
 
-## Checkboxes and Radios
+### With values
+
+<Canvas isColumn>
+  <Story id="base-forms-textarea--with-value" />
+  <Story id="base-forms-textarea--with-value-invalid" />
+  <Story id="base-forms-textarea--with-value-disabled" />
+</Canvas>
+
+## Checkboxes
+
+### Unchecked
 
 <Canvas isColumn>
   <Story id="base-forms-input-checkbox--base" />
   <Story id="base-forms-input-checkbox--invalid" />
   <Story id="base-forms-input-checkbox--disabled" />
+</Canvas>
+
+### Checked
+
+<Canvas isColumn>
   <Story id="base-forms-input-checkbox--checked" />
   <Story id="base-forms-input-checkbox--checked-invalid" />
   <Story id="base-forms-input-checkbox--checked-disabled" />
 </Canvas>
 
+## Radios
+
+### Unchecked
+
 <Canvas isColumn>
   <Story id="base-forms-input-radio--base" />
   <Story id="base-forms-input-radio--invalid" />
   <Story id="base-forms-input-radio--disabled" />
+</Canvas>
+
+### Checked
+
+<Canvas isColumn>
   <Story id="base-forms-input-radio--checked" />
   <Story id="base-forms-input-radio--checked-invalid" />
   <Story id="base-forms-input-radio--checked-disabled" />
diff --git a/scss/bitstyles/base/forms/input-checkbox.stories.js b/scss/bitstyles/base/forms/input-checkbox.stories.js
index 6278b128d..280f221e5 100644
--- a/scss/bitstyles/base/forms/input-checkbox.stories.js
+++ b/scss/bitstyles/base/forms/input-checkbox.stories.js
@@ -12,12 +12,13 @@ const Template = (args) => {
   return Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
+    ariaDisabled: args.disabled,
     children: [Input(args), args.label],
     classname: 'u-items-baseline',
   });
 };
 
-// ***** Text inputs with values ****************** //
+// ***** Unchecked radios ****************** //
 
 export const Base = Template.bind({});
 Base.args = { type: 'checkbox', label: 'Unchecked' };
@@ -56,6 +57,8 @@ Disabled.parameters = {
     'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc971830548239007431f',
 };
 
+// ***** Checked radios ****************** //
+
 export const Checked = Template.bind({});
 Checked.args = {
   type: 'checkbox',
diff --git a/scss/bitstyles/base/forms/input-radio.stories.js b/scss/bitstyles/base/forms/input-radio.stories.js
index f9d83f6a1..3d3d480f1 100644
--- a/scss/bitstyles/base/forms/input-radio.stories.js
+++ b/scss/bitstyles/base/forms/input-radio.stories.js
@@ -12,12 +12,13 @@ const Template = (args) => {
   return Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
+    ariaDisabled: args.disabled,
     children: [Input(args), args.label],
     classname: 'u-items-baseline',
   });
 };
 
-// ***** Text inputs with values ****************** //
+// ***** Unchecked radios ****************** //
 
 export const Base = Template.bind({});
 Base.args = { type: 'radio', label: 'Unchecked' };
@@ -43,6 +44,12 @@ Invalid.args = { type: 'radio', ariaInvalid: true, label: 'Unchecked invalid' };
 
 export const Disabled = Template.bind({});
 Disabled.args = { type: 'radio', disabled: true, label: 'Unchecked disabled' };
+Disabled.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2bfc40d7123d9858e06',
+};
+
+// ***** Checked radios ****************** //
 
 export const Checked = Template.bind({});
 Checked.args = { type: 'radio', checked: true, label: 'Checked' };
@@ -78,3 +85,7 @@ CheckedDisabled.args = {
   disabled: true,
   label: 'Checked disabled',
 };
+CheckedDisabled.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fc2ba62f9d023b1e53c19',
+};
diff --git a/scss/bitstyles/base/forms/input-text.stories.js b/scss/bitstyles/base/forms/input-text.stories.js
index cab379ed9..f575b3dee 100644
--- a/scss/bitstyles/base/forms/input-text.stories.js
+++ b/scss/bitstyles/base/forms/input-text.stories.js
@@ -13,6 +13,7 @@ const Template = (args) => {
   const label = Label({
     htmlFor: args.id,
     ariaInvalid: args.ariaInvalid,
+    ariaDisabled: args.disabled,
     children: [args.label],
   });
   const input = Input(args);
@@ -75,7 +76,7 @@ TextWithValueDisabled.parameters = {
 export const TextEmpty = Template.bind({});
 TextEmpty.args = {
   value: '',
-  placeholder: 'Input text empty',
+  placeholder: 'Input text empty placeholder',
   label: 'Input text empty',
 };
 TextEmpty.parameters = {
@@ -98,7 +99,7 @@ TextEmpty.parameters = {
 export const TextEmptyInvalid = Template.bind({});
 TextEmptyInvalid.args = {
   value: '',
-  placeholder: 'Input text empty invalid',
+  placeholder: 'Input text empty invalid placeholder',
   label: 'Input text empty invalid',
   ariaInvalid: true,
 };
@@ -110,7 +111,7 @@ TextEmptyInvalid.parameters = {
 export const TextEmptyDisabled = Template.bind({});
 TextEmptyDisabled.args = {
   value: '',
-  placeholder: 'Input text empty disabled',
+  placeholder: 'Input text empty disabled placeholder',
   label: 'Input text empty disabled',
   disabled: true,
 };
diff --git a/scss/bitstyles/base/forms/label.stories.js b/scss/bitstyles/base/forms/label.stories.js
index 57199a32e..0c8dfcb40 100644
--- a/scss/bitstyles/base/forms/label.stories.js
+++ b/scss/bitstyles/base/forms/label.stories.js
@@ -23,6 +23,12 @@ Invalid.args = {
   ariaInvalid: true,
 };
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: ['Simple text label for a disabled input'],
+  ariaDisabled: true,
+};
+
 export const WithFor = Template.bind({});
 WithFor.args = {
   children: ['Simple text label with a for attribute'],
diff --git a/scss/bitstyles/base/forms/select.stories.js b/scss/bitstyles/base/forms/select.stories.js
index e2b91cc32..e5302f28a 100644
--- a/scss/bitstyles/base/forms/select.stories.js
+++ b/scss/bitstyles/base/forms/select.stories.js
@@ -1,6 +1,5 @@
 import Label from './Label';
 import Select from './Select';
-import { generateLabel } from '../../../../.storybook/helpers';
 
 export default {
   title: 'Base/Forms/Select',
@@ -21,8 +20,6 @@ const Template = (args) => {
   return wrapper;
 };
 
-// ***** Selects with values ****************** //
-
 export const Base = Template.bind({});
 Base.args = {
   label: 'Select',
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index 19a52154f..fab509210 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -39,6 +39,13 @@
       color: settings.$color-hover;
     }
 
+    &:active {
+      border-color: settings.$border-color-active;
+      background-color: settings.$background-color-active;
+      box-shadow: settings.$box-shadow-active;
+      color: settings.$color-active;
+    }
+
     &::after {
       content: '';
       display: block;
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index fd5a569bd..aca54672f 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -5,8 +5,8 @@
 // Base styles ////////////////////////////////////////
 $border-radius: var(design-token.get('size', 's6')) !default;
 $gap: var(design-token.get('size', 's4')) !default;
-$border-width: var(design-token.get('size', 's7')) !default;
-$size: var(design-token.get('size', 'l1')) !default;
+$border-width: 0.1875rem !default;
+$size: var(design-token.get('size', 'l2')) !default;
 
 //
 // Base colors ////////////////////////////////////////
@@ -14,7 +14,7 @@ $color: var(design-token.get('color', 'grayscale')) !default;
 $background-color: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
-$border-color: var(design-token.get('color', 'grayscale')) !default;
+$border-color: var(design-token.get('color', 'grayscale', 'dark-2')) !default;
 $box-shadow: none !default;
 
 //
@@ -26,11 +26,18 @@ $background-color-hover: var(
 $border-color-hover: var(design-token.get('color', 'brand-1')) !default;
 $box-shadow-hover: none !default;
 
+//
+// Active colors ////////////////////////////////////////
+$color-active: palette.get('brand-1', 'dark-1') !default;
+$background-color-active: palette.get('grayscale', 'white') !default;
+$border-color-active: palette.get('brand-1', 'dark-1') !default;
+$box-shadow-active: none !default;
+
 //
 // Checked colors ////////////////////////////////////////
 $color-checked: var(design-token.get('color', 'grayscale', 'white')) !default;
-$background-color-checked: var(design-token.get('color', 'brand-1')) !default;
-$border-color-checked: var(design-token.get('color', 'brand-1')) !default;
+$background-color-checked: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
+$border-color-checked: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
 $background-image-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
 $box-shadow-checked: shadows.get('default') !default;
 
@@ -46,7 +53,7 @@ $box-shadow-checked-hover: none !default;
 // Checked active colors ////////////////////////////////////////
 $color-checked-active: palette.get('grayscale', 'white') !default;
 $background-color-checked-active: palette.get('brand-1') !default;
-$border-color-checked-active: palette.get('brand-1') !default;
+$border-color-checked-active: palette.get('brand-1', 'dark-1') !default;
 $background-image-checked-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
 $box-shadow-checked-active: none !default;
 
@@ -72,20 +79,20 @@ $color-disabled: var(
   design-token.get('color', 'grayscale', 'light-2')
 ) !default;
 $background-color-disabled: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-disabled: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale', 'light-1')
 ) !default;
 $box-shadow-disabled: none !default;
 
 //
 // Disabled-checked colors ////////////////////////////////////////
 $color-disabled-checked: var(
-  design-token.get('color', 'grayscale', 'light-1')
+  design-token.get('color', 'grayscale', 'white')
 ) !default;
 $background-color-disabled-checked: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale', 'light-1')
 ) !default;
 $border-color-disabled-checked: var(
   design-token.get('color', 'grayscale', 'light-1')
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index e0be3cd63..0d02754f1 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -4,14 +4,12 @@
 @use '../../design-tokens/focus';
 
 [type='radio'] {
-  display: inline-block;
   position: relative;
   flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin: settings.$gap;
   font-size: settings.$size;
-  vertical-align: middle;
   cursor: pointer;
   appearance: none;
   top: calc(settings.$gap / 2);
diff --git a/scss/bitstyles/base/input-radio/_settings.scss b/scss/bitstyles/base/input-radio/_settings.scss
index dd64e094f..ea442559d 100644
--- a/scss/bitstyles/base/input-radio/_settings.scss
+++ b/scss/bitstyles/base/input-radio/_settings.scss
@@ -5,7 +5,7 @@
 // Base styles ////////////////////////////////////////
 $border-radius: layout.$border-radius-round !default;
 $gap: var(design-token.get('size', 's4')) !default;
-$border-width: var(design-token.get('size', 's7')) !default;
+$border-width: 0.1875rem !default;
 $size: var(design-token.get('size', 'l2')) !default;
 
 //
@@ -14,7 +14,7 @@ $color: var(design-token.get('color', 'grayscale', 'light-1')) !default;
 $background-color: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
-$border-color: var(design-token.get('color', 'grayscale')) !default;
+$border-color: var(design-token.get('color', 'grayscale', 'dark-2')) !default;
 $box-shadow: none !default;
 
 //
@@ -27,20 +27,20 @@ $border-color-hover: var(design-token.get('color', 'brand-1')) !default;
 $box-shadow-hover: none !default;
 
 //
-// Hover colors ////////////////////////////////////////
+// Active colors ////////////////////////////////////////
 $color-active: palette.get('brand-1') !default;
 $background-color-active: palette.get('grayscale', 'white') !default;
-$border-color-active: palette.get('brand-1') !default;
+$border-color-active: palette.get('brand-1', 'dark-1') !default;
 $box-shadow-active: none !default;
 
 //
 // Checked colors ////////////////////////////////////////
-$color-checked: var(design-token.get('color', 'brand-1')) !default;
+$color-checked: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
 $background-color-checked: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
-$border-color-checked: var(design-token.get('color', 'brand-1')) !default;
-$box-shadow-checked: none !default;
+$border-color-checked: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
+$box-shadow-checked: var(design-token.get('shadow', 'default')) !default;
 
 //
 // Checked hover colors ////////////////////////////////////////
@@ -70,7 +70,7 @@ $color-disabled: var(
   design-token.get('color', 'grayscale', 'light-1')
 ) !default;
 $background-color-disabled: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-disabled: var(
   design-token.get('color', 'grayscale', 'light-1')
@@ -83,7 +83,7 @@ $color-disabled-checked: var(
   design-token.get('color', 'grayscale', 'light-1')
 ) !default;
 $background-color-disabled-checked: var(
-  design-token.get('color', 'grayscale', 'light-2')
+  design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-disabled-checked: var(
   design-token.get('color', 'grayscale', 'light-1')

From d927e0567db5ac9a988a55fdc17b38fabf31627f Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Thu, 4 May 2023 11:29:05 +0200
Subject: [PATCH 11/21] - Adds focus styles for all the inputs - linting

---
 scss/bitstyles/base/forms/_index.scss         |  4 +-
 .../bitstyles/base/input-checkbox/_index.scss | 54 ++++++++++---------
 scss/bitstyles/base/input-radio/_index.scss   | 53 ++++++++++--------
 scss/bitstyles/base/input-text/_index.scss    | 21 ++++++--
 scss/bitstyles/base/select/_index.scss        | 20 ++++++-
 scss/bitstyles/base/select/_settings.scss     |  8 +--
 6 files changed, 104 insertions(+), 56 deletions(-)

diff --git a/scss/bitstyles/base/forms/_index.scss b/scss/bitstyles/base/forms/_index.scss
index 05473156e..68a723758 100644
--- a/scss/bitstyles/base/forms/_index.scss
+++ b/scss/bitstyles/base/forms/_index.scss
@@ -24,10 +24,10 @@ label {
   gap: settings.$label-gap;
   align-items: baseline;
   margin-bottom: settings.$label-gap;
-  cursor: pointer;
   font-weight: settings.$label-font-weight;
+  cursor: pointer;
 
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     color: settings.$label-disabled-color;
   }
 }
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index fab509210..9b0ad8e3a 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -3,22 +3,16 @@
 @use '../../tools/design-token';
 
 [type='checkbox'] {
-  display: inline-block;
   position: relative;
+  top: calc(settings.$gap / 2);
   flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin: settings.$gap;
+  outline-offset: 0;
   font-size: settings.$size;
-  vertical-align: middle;
   cursor: pointer;
   appearance: none;
-  top: calc(settings.$gap / 2);
-
-  &:focus-visible {
-    outline: focus.$outline-color solid focus.$outline-width;
-    outline-offset: focus.$outline-offset;
-  }
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -33,12 +27,17 @@
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
-      outline: none;
+      outline-width: 0;
       background-color: settings.$background-color-hover;
       box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       background-color: settings.$background-color-active;
@@ -57,6 +56,10 @@
           var(design-token.get('transition', 'default', 'duration'))
           var(design-token.get('transition', 'default', 'easing')),
         transform
+          calc(var(design-token.get('transition', 'default', 'duration')) / 2)
+          var(design-token.get('transition', 'default', 'duration'))
+          var(design-token.get('transition', 'default', 'easing')),
+        outline-offset
           calc(var(design-token.get('transition', 'default', 'duration')) / 2)
           var(design-token.get('transition', 'default', 'duration'))
           var(design-token.get('transition', 'default', 'easing'));
@@ -79,21 +82,6 @@
       }
     }
 
-    &:checked:hover,
-    &:checked:focus {
-      border-color: settings.$border-color-checked-hover;
-      background-color: settings.$background-color-checked-hover;
-      box-shadow: settings.$box-shadow-checked-hover;
-      color: settings.$color-checked-hover;
-    }
-
-    &:checked:active {
-      border-color: settings.$border-color-checked-active;
-      background-color: settings.$background-color-checked-active;
-      box-shadow: settings.$box-shadow-checked-active;
-      color: settings.$color-checked-active;
-    }
-
     &:invalid,
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
@@ -115,5 +103,23 @@
         color: settings.$color-disabled-checked;
       }
     }
+
+    &:checked:hover:not(:invalid),
+    &:checked:focus:not(:invalid),
+    &:checked:hover:not([aria-invalid='true']),
+    &:checked:focus:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-hover;
+      background-color: settings.$background-color-checked-hover;
+      box-shadow: settings.$box-shadow-checked-hover;
+      color: settings.$color-checked-hover;
+    }
+
+    &:checked:active:not(:invalid),
+    &:checked:active:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-active;
+      background-color: settings.$background-color-checked-active;
+      box-shadow: settings.$box-shadow-checked-active;
+      color: settings.$color-checked-active;
+    }
   }
 }
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index 0d02754f1..0650aa206 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -5,19 +5,15 @@
 
 [type='radio'] {
   position: relative;
+  top: calc(settings.$gap / 2);
   flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin: settings.$gap;
+  outline-offset: 0;
   font-size: settings.$size;
   cursor: pointer;
   appearance: none;
-  top: calc(settings.$gap / 2);
-
-  &:focus-visible {
-    outline: focus.$outline-color solid focus.$outline-width;
-    outline-offset: focus.$outline-offset;
-  }
 }
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
@@ -39,6 +35,8 @@
           var(design-token.get('transition', 'default', 'duration'))
           var(design-token.get('transition', 'default', 'easing')),
         transform var(design-token.get('transition', 'default', 'duration'))
+          var(design-token.get('transition', 'default', 'easing')),
+        outline-offset var(design-token.get('transition', 'default', 'duration'))
           var(design-token.get('transition', 'default', 'easing'));
       border-radius: settings.$border-radius;
       opacity: 0;
@@ -48,11 +46,17 @@
     &:hover,
     &:focus {
       border-color: settings.$border-color-hover;
+      outline-width: 0;
       background-color: settings.$background-color-hover;
       box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       background-color: settings.$background-color-active;
@@ -72,21 +76,6 @@
       }
     }
 
-    &:checked:hover,
-    &:checked:focus {
-      border-color: settings.$border-color-checked-hover;
-      background-color: settings.$background-color-checked-hover;
-      box-shadow: settings.$box-shadow-checked-hover;
-      color: settings.$color-checked-hover;
-    }
-
-    &:checked:active {
-      border-color: settings.$border-color-checked-active;
-      background-color: settings.$background-color-checked-active;
-      box-shadow: settings.$box-shadow-checked-active;
-      color: settings.$color-checked-active;
-    }
-
     &:invalid,
     &[aria-invalid='true'] {
       border-color: settings.$border-color-invalid;
@@ -112,5 +101,27 @@
         background: settings.$color-disabled-checked;
       }
     }
+
+    &:focus:not(:focus-visible) {
+      outline-width: 0;
+    }
+
+    &:checked:hover:not(:invalid),
+    &:checked:focus:not(:invalid),
+    &:checked:hover:not([aria-invalid='true']),
+    &:checked:focus:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-hover;
+      background-color: settings.$background-color-checked-hover;
+      box-shadow: settings.$box-shadow-checked-hover;
+      color: settings.$color-checked-hover;
+    }
+
+    &:checked:active:not(:invalid),
+    &:checked:active:not([aria-invalid='true']) {
+      border-color: settings.$border-color-checked-active;
+      background-color: settings.$background-color-checked-active;
+      box-shadow: settings.$box-shadow-checked-active;
+      color: settings.$color-checked-active;
+    }
   }
 }
diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
index 24760eacd..e0a137c8a 100644
--- a/scss/bitstyles/base/input-text/_index.scss
+++ b/scss/bitstyles/base/input-text/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use './settings';
 @use '../../tools/design-token';
+@use '../../design-tokens/focus';
 
 /* stylelint-disable selector-max-type */
 textarea,
@@ -10,7 +11,10 @@ input {
     background-color var(design-token.get('transition', 'default', 'duration'))
       var(design-token.get('transition', 'default', 'easing')),
     border var(design-token.get('transition', 'default', 'duration'))
+      var(design-token.get('transition', 'default', 'easing')),
+    outline-offset var(design-token.get('transition', 'default', 'duration'))
       var(design-token.get('transition', 'default', 'easing'));
+  outline-offset: 0;
   resize: vertical;
 
   &::placeholder {
@@ -54,7 +58,8 @@ textarea {
   color: settings.$color;
   font: settings.$font;
 
-  &:hover {
+  &:hover,
+  &:focus {
     border-color: settings.$border-color-hover;
     background-color: settings.$background-hover;
     box-shadow: settings.$box-shadow-hover;
@@ -65,10 +70,14 @@ textarea {
     }
   }
 
-  &:active,
-  &:focus {
+  &:focus-visible {
+    outline: focus.$outline-color solid focus.$outline-width;
+    outline-offset: focus.$outline-offset;
+  }
+
+  &:active {
     border-color: settings.$border-color-active;
-    outline: none;
+    outline-width: 0;
     background-color: settings.$background-active;
     box-shadow: settings.$box-shadow-active;
     color: settings.$color-active;
@@ -101,5 +110,9 @@ textarea {
       color: settings.$placeholder-color-disabled;
     }
   }
+
+  &:focus:not(:focus-visible) {
+    outline-width: 0;
+  }
 }
 /* stylelint-enable selector-max-type */
diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
index 4064486b7..417166475 100644
--- a/scss/bitstyles/base/select/_index.scss
+++ b/scss/bitstyles/base/select/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use 'settings';
 @use '../../tools/design-token';
+@use '../../design-tokens/focus';
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
   (appearance: none) {
@@ -20,11 +21,13 @@
         var(design-token.get('transition', 'default', 'easing'));
     border: settings.$border-width solid settings.$border-color;
     border-radius: settings.$border-radius;
+    outline-offset: 0;
     background-color: settings.$background-color;
     background-image: settings.$background-image;
     background-repeat: no-repeat;
     background-position: right 0.75em top 50%;
     background-size: 1em;
+    box-shadow: settings.$box-shadow;
     color: settings.$color;
     font-weight: settings.$font-weight;
     text-overflow: ellipsis;
@@ -35,19 +38,26 @@
       display: none;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       border-color: settings.$border-color-hover;
       background-color: settings.$background-color-hover;
       background-image: settings.$background-image-hover;
+      box-shadow: settings.$box-shadow-hover;
       color: settings.$color-hover;
     }
 
-    &:focus,
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:active {
       border-color: settings.$border-color-active;
       outline: none;
       background-color: settings.$background-color-active;
       background-image: settings.$background-image-active;
+      box-shadow: settings.$box-shadow-active;
       color: settings.$color-active;
     }
 
@@ -56,6 +66,7 @@
       border-color: settings.$border-color-invalid;
       background-color: settings.$background-color-invalid;
       background-image: settings.$background-image-invalid;
+      box-shadow: settings.$box-shadow-invalid;
       color: settings.$color-invalid;
     }
 
@@ -63,9 +74,14 @@
       border-color: settings.$border-color-disabled;
       background-color: settings.$background-color-disabled;
       background-image: settings.$background-image-disabled;
+      box-shadow: settings.$box-shadow-disabled;
       color: settings.$color-disabled;
       cursor: default;
     }
+
+    &:focus:not(:focus-visible) {
+      outline-width: 0;
+    }
   }
   /* stylelint-enable selector-max-type */
 }
diff --git a/scss/bitstyles/base/select/_settings.scss b/scss/bitstyles/base/select/_settings.scss
index f14533a0d..afa0511e1 100644
--- a/scss/bitstyles/base/select/_settings.scss
+++ b/scss/bitstyles/base/select/_settings.scss
@@ -20,7 +20,7 @@ $background-color: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(var(design-token.get('color', 'grayscale', 'light-1')))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
-$box-shadow: none;
+$box-shadow: none !default;
 
 //
 // Hover styles ////////////////////////////////////////
@@ -28,7 +28,7 @@ $color-hover: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
 $border-color-hover: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
 $background-color-hover: var(design-token.get('color', 'brand-1', 'light-4')) !default;
 $background-image-hover: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color($color-hover)}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
-$box-shadow: none;
+$box-shadow-hover: none !default;
 
 //
 // Active styles ////////////////////////////////////////
@@ -38,7 +38,7 @@ $border-color-active: var(
 ) !default;
 $background-color-active: var(design-token.get('color', 'grayscale', 'white')) !default;
 $background-image-active: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(var(design-token.get('color', 'grayscale', 'light-1')))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
-$box-shadow: shadows.get('default');
+$box-shadow-active: var(design-token.get('shadow', 'default'));
 
 //
 // Invalid styles ////////////////////////////////////////
@@ -48,6 +48,7 @@ $background-color-invalid: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $background-image-invalid: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(var(design-token.get('color', 'warning')))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
+$box-shadow-invalid: none !default;
 
 //
 // Disabled styles ////////////////////////////////////////
@@ -59,3 +60,4 @@ $background-color-disabled: var(
   design-token.get('color', 'grayscale', 'light-3')
 ) !default;
 $background-image-disabled: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(var(design-token.get('color', 'grayscale', 'light-1')))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
+$box-shadow-disabled: none !default;

From 883bf80979edc3cad81bb475531c1c3037138d82 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Thu, 4 May 2023 14:02:17 +0200
Subject: [PATCH 12/21] - Buttons now have the correct line-height & font-size
 - Selects 7 inputs subtract their border from their height in order to match
 the designs - Input-texts inside an `o-joined-ui` now work properly
 (border-radiuses etc)

---
 .../atoms/button-shapes/_settings.scss        |  1 +
 scss/bitstyles/atoms/button/_index.scss       |  5 +-
 scss/bitstyles/atoms/button/_settings.scss    |  1 +
 scss/bitstyles/base/input-text/_index.scss    |  7 +-
 scss/bitstyles/base/input-text/_settings.scss |  2 +-
 scss/bitstyles/base/select/_index.scss        |  9 ++-
 .../bitstyles/organisms/joined-ui/_index.scss | 79 ++++++++++---------
 scss/bitstyles/ui/forms.stories.mdx           | 26 +++---
 8 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/scss/bitstyles/atoms/button-shapes/_settings.scss b/scss/bitstyles/atoms/button-shapes/_settings.scss
index 3a94abaae..839d9bb23 100644
--- a/scss/bitstyles/atoms/button-shapes/_settings.scss
+++ b/scss/bitstyles/atoms/button-shapes/_settings.scss
@@ -11,6 +11,7 @@ $default: (
   'min-width': 0,
   'font-size': var(design-token.get('font-size', '2')),
   'font-weight': var(design-token.get('font-weight', 'semibold')),
+  'line-height': var(design-token.get('line-height', '4')),
 ) !default;
 /* stylelint-enable length-zero-no-unit */
 $small: (
diff --git a/scss/bitstyles/atoms/button/_index.scss b/scss/bitstyles/atoms/button/_index.scss
index bfa862c68..e9211b8b6 100644
--- a/scss/bitstyles/atoms/button/_index.scss
+++ b/scss/bitstyles/atoms/button/_index.scss
@@ -40,8 +40,9 @@
   box-shadow: var(#{custom-property.get($items: ('button', 'box-shadow'))});
   color: var(#{custom-property.get($items: ('button', 'color'))});
   font-family: settings.$font-family;
-  font-size: var(design-token.get('button', 'font-size'));
-  font-weight: var(design-token.get('button', 'font-weight'));
+  font-size: var(design-token.get('button', 'font-size'), inherit);
+  font-weight: var(design-token.get('button', 'font-weight'), inherit);
+  line-height: var(design-token.get('button', 'line-height'), inherit);
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
diff --git a/scss/bitstyles/atoms/button/_settings.scss b/scss/bitstyles/atoms/button/_settings.scss
index e0269509f..d2d94e715 100644
--- a/scss/bitstyles/atoms/button/_settings.scss
+++ b/scss/bitstyles/atoms/button/_settings.scss
@@ -32,5 +32,6 @@ $allowed-shape-properties: (
   'min-width',
   'font-size',
   'font-weight',
+  'line-height',
   'justify-content'
 ) !default;
diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
index e0a137c8a..37218cfca 100644
--- a/scss/bitstyles/base/input-text/_index.scss
+++ b/scss/bitstyles/base/input-text/_index.scss
@@ -44,9 +44,14 @@ textarea {
   #{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))}: settings.$border-radius;
   #{custom-property.get($items: ('input-text', 'border-bottom-left-radius'))}: settings.$border-radius;
   #{custom-property.get($items: ('input-text', 'border-top-left-radius'))}: settings.$border-radius;
+  #{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%;
-  padding: settings.$padding-vertical settings.$padding-horizontal;
+  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));
   border: settings.$border-width solid settings.$border-color;
   border-radius:
     var(#{custom-property.get($items: ('input-text', 'border-top-left-radius'))})
diff --git a/scss/bitstyles/base/input-text/_settings.scss b/scss/bitstyles/base/input-text/_settings.scss
index 4b49dfd04..291b38f12 100644
--- a/scss/bitstyles/base/input-text/_settings.scss
+++ b/scss/bitstyles/base/input-text/_settings.scss
@@ -4,7 +4,7 @@
 //
 // Base styles ////////////////////////////////////////
 
-$padding-vertical: var(design-token.get('size', 's3')) !default;
+$padding-vertical: var(design-token.get('size', 's2')) !default;
 $padding-horizontal: var(design-token.get('size', 'm')) !default;
 $border-radius: var(design-token.get('size', 's4')) !default;
 $border-width: 0.1875rem !default;
diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
index 417166475..715196acb 100644
--- a/scss/bitstyles/base/select/_index.scss
+++ b/scss/bitstyles/base/select/_index.scss
@@ -2,15 +2,20 @@
 @use 'settings';
 @use '../../tools/design-token';
 @use '../../design-tokens/focus';
+@use '../../tools/custom-property';
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
   (appearance: none) {
   /* stylelint-disable selector-max-type */
   select {
+    #{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%;
-    padding: settings.$padding-vertical calc(settings.$padding-horizontal * 2)
-      settings.$padding-vertical settings.$padding-horizontal;
+    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));
     overflow: hidden;
     transition: color var(design-token.get('transition', 'default', 'duration'))
         var(design-token.get('transition', 'default', 'easing')),
diff --git a/scss/bitstyles/organisms/joined-ui/_index.scss b/scss/bitstyles/organisms/joined-ui/_index.scss
index 17ce3f7b2..0eeaaff21 100644
--- a/scss/bitstyles/organisms/joined-ui/_index.scss
+++ b/scss/bitstyles/organisms/joined-ui/_index.scss
@@ -3,46 +3,24 @@
 @use '../../tools/classname';
 @use '../../tools/design-token';
 
-/* stylelint-disable scss/dollar-variable-default */
-
-$button-classname: classname.get(
-  $classname-items: 'button',
-  $layer: 'atom',
-);
-$button-border-top-left-radius-name: design-token.get(
-  'button',
-  'border',
-  'top',
-  'left',
-  'radius'
-);
-$button-border-top-right-radius-name: design-token.get(
-  'button',
-  'border',
-  'top',
-  'right',
-  'radius'
-);
-$button-border-bottom-right-radius-name: design-token.get(
-  'button',
-  'border',
-  'bottom',
-  'right',
-  'radius'
-);
-$button-border-bottom-left-radius-name: design-token.get(
-  'button',
-  'border',
-  'bottom',
-  'left',
-  'radius'
-);
-$button-border-width-name: design-token.get('button', 'border', 'width');
-$button-box-shadow-name: design-token.get('button', 'box-shadow');
+#{classname.get($classname-items: 'joined-ui', $layer: 'organism')} {
+  /* Buttons */
+  $button-classname: classname.get($classname-items: 'button', $layer: 'atom');
+  $button-border-top-left-radius-name: design-token.get('button', 'border', 'top', 'left', 'radius');
+  $button-border-top-right-radius-name: design-token.get('button', 'border', 'top', 'right', 'radius');
+  $button-border-bottom-right-radius-name: design-token.get('button', 'border', 'bottom', 'right', 'radius');
+  $button-border-bottom-left-radius-name: design-token.get('button', 'border', 'bottom', 'left', 'radius');
+  $button-border-width-name: design-token.get('button', 'border', 'width');
+  $button-box-shadow-name: design-token.get('button', 'box-shadow');
 
-/* stylelint-enable scss/dollar-variable-default */
+  /* Text inputs */
+  $input-text-border-top-left-radius-name: design-token.get('input-text', 'border', 'top', 'left', 'radius');
+  $input-text-border-top-right-radius-name: design-token.get('input-text', 'border', 'top', 'right', 'radius');
+  $input-text-border-bottom-right-radius-name: design-token.get('input-text', 'border', 'bottom', 'right', 'radius');
+  $input-text-border-bottom-left-radius-name: design-token.get('input-text', 'border', 'bottom', 'left', 'radius');
+  $input-text-border-width-name: design-token.get('input-text', 'border', 'width');
+  $input-text-box-shadow-name: design-token.get('input-text', 'box-shadow');
 
-#{classname.get($classname-items: 'joined-ui', $layer: 'organism')} {
   border-radius: settings.$border-radius;
   box-shadow: settings.$box-shadow;
 
@@ -54,6 +32,14 @@ $button-box-shadow-name: design-token.get('button', 'box-shadow');
     margin-right: calc(var(#{$button-border-width-name}) * -1);
   }
 
+  > :first-child input,
+  > input:first-child {
+    #{$input-text-box-shadow-name}: none;
+    #{$input-text-border-top-right-radius-name}: #{0};
+    #{$input-text-border-bottom-right-radius-name}: #{0};
+    margin-right: calc(var(#{$input-text-border-width-name}) * -1);
+  }
+
   > :last-child #{$button-classname},
   > #{$button-classname}:last-child {
     #{$button-box-shadow-name}: none;
@@ -62,6 +48,14 @@ $button-box-shadow-name: design-token.get('button', 'box-shadow');
     margin-right: 0;
   }
 
+  > :last-child input,
+  > input:last-child {
+    #{$input-text-box-shadow-name}: none;
+    #{$input-text-border-top-left-radius-name}: #{0};
+    #{$input-text-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};
@@ -70,4 +64,13 @@ $button-box-shadow-name: design-token.get('button', 'box-shadow');
     #{$button-border-bottom-left-radius-name}: #{0};
     margin-right: calc(var(#{$button-border-width-name}) * -1);
   }
+
+  > :not(:first-child):not(:last-child) input,
+  > input:not(:first-child):not(:last-child) {
+    #{$input-text-border-top-left-radius-name}: #{0};
+    #{$input-text-border-top-right-radius-name}: #{0};
+    #{$input-text-border-bottom-right-radius-name}: #{0};
+    #{$input-text-border-bottom-left-radius-name}: #{0};
+    margin-right: calc(var(#{$input-text-border-width-name}) * -1);
+  }
 }
diff --git a/scss/bitstyles/ui/forms.stories.mdx b/scss/bitstyles/ui/forms.stories.mdx
index 84aa812c9..41a01ce3f 100644
--- a/scss/bitstyles/ui/forms.stories.mdx
+++ b/scss/bitstyles/ui/forms.stories.mdx
@@ -303,10 +303,12 @@ The `role="search"` attribute highlights this functionality for screenreader use
 <Canvas>
   <Story name="Search form">
     {`
-    <form role="search" action="" method="POST" class="u-flex o-joined-ui">
+    <form role="search" action="" method="POST">
       <label for="search" class="u-sr-only">Search users</label>
-      <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 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>
@@ -315,15 +317,17 @@ The `role="search"` attribute highlights this functionality for screenreader use
 <Canvas>
   <Story name="Search form with icon button">
     {`
-    <form role="search" action="" method="POST" class="u-flex o-joined-ui">
+    <form role="search" action="" method="POST">
       <label for="search" class="u-sr-only">Search users</label>
-      <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 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>

From b56db0fd87b567ebfe98e745a6dc049ec5a04c32 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Wed, 17 May 2023 12:22:39 +0200
Subject: [PATCH 13/21] - Selects, inputs, and buttons all now play well
 together in joined-ui - Moves some storties out of ui/forms.mdx, into a js
 file

---
 scss/bitstyles/base/forms/_settings.scss      |   2 +-
 .../base/forms/input-checkbox.stories.js      |   2 +-
 .../base/forms/input-radio.stories.js         |   2 +-
 .../base/forms/input-text.stories.js          |   2 +-
 scss/bitstyles/base/input-text/_index.scss    |   5 +-
 scss/bitstyles/base/select/_index.scss        |  15 ++-
 scss/bitstyles/base/select/_settings.scss     |   2 +-
 .../bitstyles/organisms/joined-ui/JoinedUI.js |   9 +-
 .../bitstyles/organisms/joined-ui/_index.scss |  39 +++++++
 scss/bitstyles/settings/_focus.scss           |   6 -
 scss/bitstyles/ui/forms.stories.js            | 106 ++++++++++++++++++
 scss/bitstyles/ui/forms.stories.mdx           |  79 +++----------
 scss/bitstyles/ui/joined-buttons.stories.js   |   2 +-
 13 files changed, 185 insertions(+), 86 deletions(-)
 delete mode 100644 scss/bitstyles/settings/_focus.scss
 create mode 100644 scss/bitstyles/ui/forms.stories.js

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 37218cfca..9990a7e7f 100644
--- a/scss/bitstyles/base/input-text/_index.scss
+++ b/scss/bitstyles/base/input-text/_index.scss
@@ -47,8 +47,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));
@@ -76,6 +76,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 715196acb..880caf663 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));
@@ -25,7 +29,11 @@
       border var(design-token.get('transition', 'default', 'duration'))
         var(design-token.get('transition', 'default', '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;
@@ -34,6 +42,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 afa0511e1..d725ba244 100644
--- a/scss/bitstyles/base/select/_settings.scss
+++ b/scss/bitstyles/base/select/_settings.scss
@@ -10,7 +10,7 @@ $padding-horizontal: var(design-token.get('size', 'l1')) !default;
 $border-radius: var(design-token.get('size', 's4')) !default;
 $border-width: 0.1875rem !default;
 $font: inherit !default;
-$font-weight: var(design-token.get('font-weight', 'normal'));
+$font-weight: var(design-token.get('font-weight', 'bold'));
 
 //
 // Base appearance ////////////////////////////////////////
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 0eeaaff21..8103aed46 100644
--- a/scss/bitstyles/organisms/joined-ui/_index.scss
+++ b/scss/bitstyles/organisms/joined-ui/_index.scss
@@ -21,9 +21,23 @@
   $input-text-border-width-name: design-token.get('input-text', 'border', 'width');
   $input-text-box-shadow-name: design-token.get('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;
@@ -40,6 +54,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;
@@ -56,6 +78,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};
@@ -73,4 +103,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/settings/_focus.scss b/scss/bitstyles/settings/_focus.scss
deleted file mode 100644
index 50773ac65..000000000
--- a/scss/bitstyles/settings/_focus.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use '../tools/palette';
-@use '../tools/size';
-
-$outline-color: palette.get('brand-2') !default;
-$outline-width: calc(size.get('s7') + size.get('s7') / 2) !default;
-$outline-offset: size.get('s7') !default;
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 41a01ce3f..75c22e30b 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 ****************** //

From a1436662b67f55ce6d7d33f1a665f7e4a2dc3966 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Wed, 17 May 2023 14:22:15 +0200
Subject: [PATCH 14/21] Update fixtures

---
 .storybook/helpers.js                         |    6 +-
 scss/bitstyles/atoms/button/_index.scss       |   42 +-
 scss/bitstyles/base/forms/_settings.scss      |   10 +-
 .../bitstyles/base/input-checkbox/_index.scss |    1 +
 .../base/input-checkbox/_settings.scss        |   54 +-
 scss/bitstyles/base/input-radio/_index.scss   |    3 +-
 .../bitstyles/base/input-radio/_settings.scss |   42 +-
 scss/bitstyles/base/input-text/_index.scss    |   26 +-
 scss/bitstyles/base/input-text/_settings.scss |   33 +-
 scss/bitstyles/base/select/_index.scss        |   26 +-
 scss/bitstyles/base/select/_settings.scss     |   24 +-
 .../bitstyles/organisms/joined-ui/_index.scss |  111 +-
 scss/bitstyles/tools/_button.scss             |    2 +-
 test/scss/fixtures/bitstyles-overrides.css    |  796 +++++++-----
 test/scss/fixtures/bitstyles.css              | 1086 ++++++++++++-----
 15 files changed, 1581 insertions(+), 681 deletions(-)

diff --git a/.storybook/helpers.js b/.storybook/helpers.js
index f84347051..4f76fc66f 100644
--- a/.storybook/helpers.js
+++ b/.storybook/helpers.js
@@ -13,12 +13,12 @@ function capitalizeFirstLetter(string) {
 
 export const generateLabel = (items) => capitalizeFirstLetter(items.join(' '));
 
-export const generateButtonLabel = ({
+export const generateButtonLabel = (
   shapeVariant = [],
   colorVariant = [],
   disabled = false,
-  pressed = false,
-}) =>
+  pressed = false
+) =>
   capitalizeFirstLetter(
     [
       shapeVariant.length === 0 ? 'default' : shapeVariant.join(' '),
diff --git a/scss/bitstyles/atoms/button/_index.scss b/scss/bitstyles/atoms/button/_index.scss
index e9211b8b6..e40589be4 100644
--- a/scss/bitstyles/atoms/button/_index.scss
+++ b/scss/bitstyles/atoms/button/_index.scss
@@ -34,11 +34,11 @@
     var(design-token.get('button', 'border-top-right-radius'))
     var(design-token.get('button', 'border-bottom-right-radius'))
     var(design-token.get('button', 'border-bottom-left-radius'));
-  border-color: var(#{design-token.get($items: ('button', 'border-color'))});
+  border-color: var(design-token.get('button', 'border-color'));
   outline-offset: 0;
-  background-color: var(#{custom-property.get($items: ('button', 'background-color'))});
-  box-shadow: var(#{custom-property.get($items: ('button', 'box-shadow'))});
-  color: var(#{custom-property.get($items: ('button', 'color'))});
+  background-color: var(design-token.get('button', 'background-color'));
+  box-shadow: var(design-token.get('button', 'box-shadow'));
+  color: var(design-token.get('button', 'color'));
   font-family: settings.$font-family;
   font-size: var(design-token.get('button', 'font-size'), inherit);
   font-weight: var(design-token.get('button', 'font-weight'), inherit);
@@ -54,11 +54,21 @@
   &:hover,
   &:focus {
     z-index: 1;
-    border-color: var(#{custom-property.get($items: ('button', 'hover', 'border-color'))});
+    border-color: var(design-token.get('button', 'hover', 'border-color'));
     outline-width: 0;
-    background-color: var(#{custom-property.get($items: ('button', 'hover', 'background-color'))});
-    box-shadow: var(#{custom-property.get($items: ('button', 'hover', 'box-shadow'))});
-    color: var(#{custom-property.get($items: ('button', 'hover', 'color'))});
+    background-color: var(design-token.get('button', 'hover', 'background-color'));
+    box-shadow: var(design-token.get('button', 'hover', 'box-shadow'));
+    color: var(design-token.get('button', 'hover', 'color'));
+    text-decoration: none;
+  }
+
+  &:active {
+    z-index: 1;
+    border-color: var(design-token.get('button', 'active', 'border-color'));
+    outline-width: 0;
+    background-color: var(design-token.get('button', 'active', 'background-color'));
+    box-shadow: var(design-token.get('button', 'active', 'box-shadow'));
+    color: var(design-token.get('button', 'active', 'color'));
     text-decoration: none;
   }
 
@@ -73,10 +83,10 @@
   &[aria-selected='true'],
   &[aria-current] {
     z-index: 2;
-    border-color: var(#{custom-property.get($items: ('button', 'pressed', 'border-color'))});
-    background-color: var(#{custom-property.get($items: ('button', 'pressed', 'background-color'))});
-    box-shadow: var(#{custom-property.get($items: ('button', 'pressed', 'box-shadow'))});
-    color: var(#{custom-property.get($items: ('button', 'pressed', 'color'))});
+    border-color: var(design-token.get('button', 'pressed', 'border-color'));
+    background-color: var(design-token.get('button', 'pressed', 'background-color'));
+    box-shadow: var(design-token.get('button', 'pressed', 'box-shadow'));
+    color: var(design-token.get('button', 'pressed', 'color'));
   }
 
   &:disabled,
@@ -85,10 +95,10 @@
   &[aria-disabled='true']:hover,
   &:disabled:focus,
   &[aria-disabled='true']:focus {
-    border-color: var(#{custom-property.get($items: ('button', 'disabled', 'border-color'))});
-    background-color: var(#{custom-property.get($items: ('button', 'disabled', 'background-color'))});
-    box-shadow: var(#{custom-property.get($items: ('button', 'disabled', 'box-shadow'))});
-    color: var(#{custom-property.get($items: ('button', 'disabled', 'color'))});
+    border-color: var(design-token.get('button', 'disabled', 'border-color'));
+    background-color: var(design-token.get('button', 'disabled', 'background-color'));
+    box-shadow: var(design-token.get('button', 'disabled', 'box-shadow'));
+    color: var(design-token.get('button', 'disabled', 'color'));
     cursor: not-allowed;
   }
 }
diff --git a/scss/bitstyles/base/forms/_settings.scss b/scss/bitstyles/base/forms/_settings.scss
index 3020659b6..36f30a00d 100644
--- a/scss/bitstyles/base/forms/_settings.scss
+++ b/scss/bitstyles/base/forms/_settings.scss
@@ -1,6 +1,4 @@
-@use '../../design-tokens/typography';
-@use '../../tools/palette';
-@use '../../tools/size';
+@use '../../tools/design-token';
 
 //
 // Fieldset ////////////////////////////////////////
@@ -22,6 +20,6 @@ $legend-color: inherit !default;
 //
 // Label ////////////////////////////////////////
 
-$label-gap: size.get('s7') !default;
-$label-font-weight: typography.$font-weight-medium !default;
-$label-disabled-color: palette.get('grayscale') !default;
+$label-gap: var(design-token.get('size', 's7')) !default;
+$label-font-weight: var(design-token.get('font-weight', 'medium')) !default;
+$label-disabled-color: var(design-token.get('color', 'grayscale')) !default;
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index 9b0ad8e3a..e55bf8d30 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -1,5 +1,6 @@
 @forward 'settings';
 @use './settings';
+@use '../../design-tokens/focus';
 @use '../../tools/design-token';
 
 [type='checkbox'] {
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index aca54672f..5f0776df8 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -28,32 +28,50 @@ $box-shadow-hover: none !default;
 
 //
 // Active colors ////////////////////////////////////////
-$color-active: palette.get('brand-1', 'dark-1') !default;
-$background-color-active: palette.get('grayscale', 'white') !default;
-$border-color-active: palette.get('brand-1', 'dark-1') !default;
+$color-active: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
+$background-color-active: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$border-color-active: var(
+  design-token.get('color', 'brand-1', 'dark-1')
+) !default;
 $box-shadow-active: none !default;
 
 //
 // Checked colors ////////////////////////////////////////
 $color-checked: var(design-token.get('color', 'grayscale', 'white')) !default;
-$background-color-checked: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
-$border-color-checked: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
+$background-color-checked: var(
+  design-token.get('color', 'brand-1', 'dark-1')
+) !default;
+$border-color-checked: var(
+  design-token.get('color', 'brand-1', 'dark-1')
+) !default;
 $background-image-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-checked: shadows.get('default') !default;
+$box-shadow-checked: var(design-token.get('shadow', 'brand-1')) !default;
 
 //
 // Checked hover colors ////////////////////////////////////////
-$color-checked-hover: palette.get('grayscale', 'white') !default;
-$background-color-checked-hover: palette.get('brand-1') !default;
-$border-color-checked-hover: palette.get('brand-1') !default;
+$color-checked-hover: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$background-color-checked-hover: var(
+  design-token.get('color', 'brand-1')
+) !default;
+$border-color-checked-hover: var(design-token.get('color', 'brand-1')) !default;
 $background-image-checked-hover: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
 $box-shadow-checked-hover: none !default;
 
 //
 // Checked active colors ////////////////////////////////////////
-$color-checked-active: palette.get('grayscale', 'white') !default;
-$background-color-checked-active: palette.get('brand-1') !default;
-$border-color-checked-active: palette.get('brand-1', 'dark-1') !default;
+$color-checked-active: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$background-color-checked-active: var(
+  design-token.get('color', 'brand-1')
+) !default;
+$border-color-checked-active: var(
+  design-token.get('color', 'brand-1', 'dark-1')
+) !default;
 $background-image-checked-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
 $box-shadow-checked-active: none !default;
 
@@ -67,9 +85,15 @@ $box-shadow-invalid: none !default;
 
 //
 // Invalid checked colors ////////////////////////////////////////
-$color-invalid-checked: var(design-token.get('color', 'grayscale', 'white')) !default;
-$background-color-invalid-checked: var(design-token.get('color', 'brand-1')) !default;
-$border-color-invalid-checked: var(design-token.get('color', 'brand-1')) !default;
+$color-invalid-checked: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$background-color-invalid-checked: var(
+  design-token.get('color', 'brand-1')
+) !default;
+$border-color-invalid-checked: var(
+  design-token.get('color', 'brand-1')
+) !default;
 $background-image-invalid-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
 $box-shadow-invalid-checked: none !default;
 
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index 0650aa206..a6adae975 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -36,7 +36,8 @@
           var(design-token.get('transition', 'default', 'easing')),
         transform var(design-token.get('transition', 'default', 'duration'))
           var(design-token.get('transition', 'default', 'easing')),
-        outline-offset var(design-token.get('transition', 'default', 'duration'))
+        outline-offset
+          var(design-token.get('transition', 'default', 'duration'))
           var(design-token.get('transition', 'default', 'easing'));
       border-radius: settings.$border-radius;
       opacity: 0;
diff --git a/scss/bitstyles/base/input-radio/_settings.scss b/scss/bitstyles/base/input-radio/_settings.scss
index ea442559d..442ab073c 100644
--- a/scss/bitstyles/base/input-radio/_settings.scss
+++ b/scss/bitstyles/base/input-radio/_settings.scss
@@ -28,9 +28,13 @@ $box-shadow-hover: none !default;
 
 //
 // Active colors ////////////////////////////////////////
-$color-active: palette.get('brand-1') !default;
-$background-color-active: palette.get('grayscale', 'white') !default;
-$border-color-active: palette.get('brand-1', 'dark-1') !default;
+$color-active: var(design-token.get('color', 'brand-1')) !default;
+$background-color-active: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$border-color-active: var(
+  design-token.get('color', 'brand-1', 'dark-1')
+) !default;
 $box-shadow-active: none !default;
 
 //
@@ -39,29 +43,41 @@ $color-checked: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
 $background-color-checked: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
-$border-color-checked: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
-$box-shadow-checked: var(design-token.get('shadow', 'default')) !default;
+$border-color-checked: var(
+  design-token.get('color', 'brand-1', 'dark-1')
+) !default;
+$box-shadow-checked: var(design-token.get('shadow', 'brand-1')) !default;
 
 //
 // Checked hover colors ////////////////////////////////////////
-$color-checked-hover: palette.get('brand-1') !default;
-$background-color-checked-hover: palette.get('grayscale', 'white') !default;
-$border-color-checked-hover: palette.get('brand-1') !default;
+$color-checked-hover: var(design-token.get('color', 'brand-1')) !default;
+$background-color-checked-hover: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$border-color-checked-hover: var(design-token.get('color', 'brand-1')) !default;
 $box-shadow-checked-hover: none !default;
 
 //
 // Checked active colors ////////////////////////////////////////
-$color-checked-active: palette.get('brand-1') !default;
-$background-color-checked-active: palette.get('grayscale', 'white') !default;
-$border-color-checked-active: palette.get('brand-1') !default;
+$color-checked-active: var(design-token.get('color', 'brand-1')) !default;
+$background-color-checked-active: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$border-color-checked-active: var(
+  design-token.get('color', 'brand-1')
+) !default;
 $box-shadow-checked-active: none !default;
 
 //
 // Invalid colors ////////////////////////////////////////
 
 $color-invalid: var(design-token.get('color', 'warning', 'dark-4')) !default;
-$background-color-invalid: var(design-token.get('color', 'grayscale', 'white')) !default;
-$border-color-invalid: var(design-token.get('color', 'warning', 'dark-1')) !default;
+$background-color-invalid: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$border-color-invalid: var(
+  design-token.get('color', 'warning', 'dark-1')
+) !default;
 $box-shadow-invalid: none !default;
 
 //
diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
index 9990a7e7f..adb84e7ea 100644
--- a/scss/bitstyles/base/input-text/_index.scss
+++ b/scss/bitstyles/base/input-text/_index.scss
@@ -40,24 +40,24 @@ input {
 [type='time'],
 [type='url'],
 textarea {
-  #{custom-property.get($items: ('input-text', 'border-top-right-radius'))}: settings.$border-radius;
-  #{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))}: settings.$border-radius;
-  #{custom-property.get($items: ('input-text', 'border-bottom-left-radius'))}: settings.$border-radius;
-  #{custom-property.get($items: ('input-text', 'border-top-left-radius'))}: settings.$border-radius;
-  #{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;
+  #{design-token.get('input-text', 'border-top-right-radius')}: settings.$border-radius;
+  #{design-token.get('input-text', 'border-bottom-right-radius')}: settings.$border-radius;
+  #{design-token.get('input-text', 'border-bottom-left-radius')}: settings.$border-radius;
+  #{design-token.get('input-text', 'border-top-left-radius')}: settings.$border-radius;
+  #{design-token.get('input-text', 'padding-vertical')}: settings.$padding-vertical;
+  #{design-token.get('input-text', 'padding-horizontal')}: settings.$padding-horizontal;
+  #{design-token.get('input-text', 'border-width')}: settings.$border-width;
   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));
+      calc(var(design-token.get('input-text', 'padding-vertical')) - var(design-token.get('input-text', 'border-width'), 0rem))
+      calc(var(design-token.get('input-text','padding-horizontal')) - var(design-token.get('input-text', 'border-width'), 0rem));
   border: settings.$border-width solid settings.$border-color;
   border-radius:
-    var(#{custom-property.get($items: ('input-text', 'border-top-left-radius'))})
-    var(#{custom-property.get($items: ('input-text', 'border-top-right-radius'))})
-    var(#{custom-property.get($items: ('input-text', 'border-bottom-right-radius'))})
-    var(#{custom-property.get($items: ('input-text', 'border-bottom-left-radius'))});
+    var(design-token.get('input-text', 'border-top-left-radius'))
+    var(design-token.get('input-text', 'border-top-right-radius'))
+    var(design-token.get('input-text', 'border-bottom-right-radius'))
+    var(design-token.get('input-text', 'border-bottom-left-radius'));
   background-color: settings.$background;
   box-shadow: settings.$box-shadow;
   color: settings.$color;
diff --git a/scss/bitstyles/base/input-text/_settings.scss b/scss/bitstyles/base/input-text/_settings.scss
index 291b38f12..29a3139ec 100644
--- a/scss/bitstyles/base/input-text/_settings.scss
+++ b/scss/bitstyles/base/input-text/_settings.scss
@@ -13,9 +13,6 @@ $placeholder-font-style: italic !default;
 $placeholder-font-weight: var(
   design-token.get('font-weight', 'normal')
 ) !default;
-$placeholder-color: var(
-  design-token.get('color', 'grayscale', 'light-1')
-) !default;
 
 //
 // Base colors ////////////////////////////////////////
@@ -24,24 +21,27 @@ $color: var(design-token.get('color', 'grayscale', 'dark-4')) !default;
 $border-color: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
 $background: var(design-token.get('color', 'grayscale', 'white')) !default;
 $box-shadow: none !default;
-$placeholder-color: palette.get('grayscale') !default;
+$placeholder-color: var(design-token.get('color', 'grayscale')) !default;
 
 //
 // Hover colors ////////////////////////////////////////
 
 $color-hover: var(design-token.get('color', 'grayscale', 'dark-4')) !default;
-$background-hover: var(design-token.get('color', 'grayscale', 'white')) !default;
+$background-hover: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
 $border-color-hover: var(
   design-token.get('color', 'grayscale', 'dark-2')
 ) !default;
 $box-shadow-hover: shadow.to-box-shadow(
   shadow.generate(
-    $color:
-      rgba(var(design-token.get('color', 'brand-1', 'dark-2-rgb')), 0.025),
+    $color: rgba(var(design-token.get('color', 'brand-1', 'dark-2-rgb')), 0.025),
     $blur-radius: var(design-token.get('size', 's4')),
   )
 ) !default;
-$placeholder-color-hover: palette.get('grayscale', 'dark-1') !default;
+$placeholder-color-hover: var(
+  design-token.get('color', 'grayscale', 'dark-1')
+) !default;
 
 //
 // Active colors ////////////////////////////////////////
@@ -55,12 +55,11 @@ $border-color-active: var(
 ) !default;
 $box-shadow-active: shadow.to-box-shadow(
   shadow.generate(
-    $color:
-      rgba(var(design-token.get('color', 'brand-1', 'dark-2-rgb')), 0.075),
+    $color: rgba(var(design-token.get('color', 'brand-1', 'dark-2-rgb')), 0.075),
     $blur-radius: var(design-token.get('size', 's4')),
   )
 ) !default;
-$placeholder-color-active: palette.get('brand-1') !default;
+$placeholder-color-active: var(design-token.get('color', 'brand-1')) !default;
 
 //
 // Disabled colors ////////////////////////////////////////
@@ -73,7 +72,9 @@ $border-color-disabled: var(
   design-token.get('color', 'grayscale', 'light-1')
 ) !default;
 $box-shadow-disabled: none !default;
-$placeholder-color-disabled: palette.get('grayscale', 'light-1') !default;
+$placeholder-color-disabled: var(
+  design-token.get('color', 'grayscale', 'light-1')
+) !default;
 
 //
 // Invalid colors ////////////////////////////////////////
@@ -82,6 +83,10 @@ $color-invalid: var(design-token.get('color', 'warning', 'dark-4')) !default;
 $background-color-invalid: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
-$border-color-invalid: var(design-token.get('color', 'warning', 'dark-1')) !default;
+$border-color-invalid: var(
+  design-token.get('color', 'warning', 'dark-1')
+) !default;
 $box-shadow-invalid: none !default;
-$placeholder-color-invalid: palette.get('brand-1', 'light-1') !default;
+$placeholder-color-invalid: var(
+  design-token.get('color', 'brand-1', 'light-1')
+) !default;
diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
index 880caf663..41e8ba50e 100644
--- a/scss/bitstyles/base/select/_index.scss
+++ b/scss/bitstyles/base/select/_index.scss
@@ -9,17 +9,17 @@
   (appearance: none) {
   /* stylelint-disable selector-max-type */
   select {
-    #{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;
-    #{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;
+    #{design-token.get('select', 'padding-vertical')}: settings.$padding-vertical;
+    #{design-token.get('select', 'padding-horizontal')}: settings.$padding-horizontal;
+    #{design-token.get('select', 'border-width')}: settings.$border-width;
+    #{design-token.get('select', 'border-top-right-radius')}: settings.$border-radius;
+    #{design-token.get('select', 'border-bottom-right-radius')}: settings.$border-radius;
+    #{design-token.get('select', 'border-bottom-left-radius')}: settings.$border-radius;
+    #{design-token.get('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));
+      calc(var(design-token.get('select', 'padding-vertical')) - var(design-token.get('select', 'border-width'), 0rem))
+      calc(var(design-token.get('select','padding-horizontal')) - var(design-token.get('select', 'border-width'), 0rem));
     overflow: hidden;
     transition: color var(design-token.get('transition', 'default', 'duration'))
         var(design-token.get('transition', 'default', 'easing')),
@@ -30,10 +30,10 @@
         var(design-token.get('transition', 'default', 'easing'));
     border: settings.$border-width solid settings.$border-color;
     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'))});
+      var(design-token.get('select', 'border-top-left-radius'))
+      var(design-token.get('select', 'border-top-right-radius'))
+      var(design-token.get('select', 'border-bottom-right-radius'))
+      var(design-token.get('select', 'border-bottom-left-radius'));
     outline-offset: 0;
     background-color: settings.$background-color;
     background-image: settings.$background-image;
diff --git a/scss/bitstyles/base/select/_settings.scss b/scss/bitstyles/base/select/_settings.scss
index d725ba244..56f755fe6 100644
--- a/scss/bitstyles/base/select/_settings.scss
+++ b/scss/bitstyles/base/select/_settings.scss
@@ -1,7 +1,5 @@
-@use '../../tools/design-token';
 @use '../../tools/color';
-@use '../../tools/palette';
-@use '../../tools/shadows';
+@use '../../tools/design-token';
 
 //
 // Base styles ////////////////////////////////////////
@@ -10,7 +8,7 @@ $padding-horizontal: var(design-token.get('size', 'l1')) !default;
 $border-radius: var(design-token.get('size', 's4')) !default;
 $border-width: 0.1875rem !default;
 $font: inherit !default;
-$font-weight: var(design-token.get('font-weight', 'bold'));
+$font-weight: var(design-token.get('font-weight', 'bold')) !default;
 
 //
 // Base appearance ////////////////////////////////////////
@@ -25,8 +23,12 @@ $box-shadow: none !default;
 //
 // Hover styles ////////////////////////////////////////
 $color-hover: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
-$border-color-hover: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
-$background-color-hover: var(design-token.get('color', 'brand-1', 'light-4')) !default;
+$border-color-hover: var(
+  design-token.get('color', 'grayscale', 'dark-1')
+) !default;
+$background-color-hover: var(
+  design-token.get('color', 'brand-1', 'light-4')
+) !default;
 $background-image-hover: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color($color-hover)}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
 $box-shadow-hover: none !default;
 
@@ -36,9 +38,11 @@ $color-active: var(design-token.get('color', 'brand-1', 'dark-1')) !default;
 $border-color-active: var(
   design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
-$background-color-active: var(design-token.get('color', 'grayscale', 'white')) !default;
+$background-color-active: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
 $background-image-active: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='#{color.url-encode-color(var(design-token.get('color', 'grayscale', 'light-1')))}' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89L49.92 61.91 85.49 26.34a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E") !default;
-$box-shadow-active: var(design-token.get('shadow', 'default'));
+$box-shadow-active: var(design-token.get('shadow', 'brand-1')) !default;
 
 //
 // Invalid styles ////////////////////////////////////////
@@ -53,9 +57,7 @@ $box-shadow-invalid: none !default;
 //
 // Disabled styles ////////////////////////////////////////
 $color-disabled: var(design-token.get('color', 'grayscale')) !default;
-$border-color-disabled: var(
-  design-token.get('color', 'grayscale')
-) !default;
+$border-color-disabled: var(design-token.get('color', 'grayscale')) !default;
 $background-color-disabled: var(
   design-token.get('color', 'grayscale', 'light-3')
 ) !default;
diff --git a/scss/bitstyles/organisms/joined-ui/_index.scss b/scss/bitstyles/organisms/joined-ui/_index.scss
index 8103aed46..5861b2082 100644
--- a/scss/bitstyles/organisms/joined-ui/_index.scss
+++ b/scss/bitstyles/organisms/joined-ui/_index.scss
@@ -5,29 +5,108 @@
 
 #{classname.get($classname-items: 'joined-ui', $layer: 'organism')} {
   /* Buttons */
-  $button-classname: classname.get($classname-items: 'button', $layer: 'atom');
-  $button-border-top-left-radius-name: design-token.get('button', 'border', 'top', 'left', 'radius');
-  $button-border-top-right-radius-name: design-token.get('button', 'border', 'top', 'right', 'radius');
-  $button-border-bottom-right-radius-name: design-token.get('button', 'border', 'bottom', 'right', 'radius');
-  $button-border-bottom-left-radius-name: design-token.get('button', 'border', 'bottom', 'left', 'radius');
+  $button-classname: classname.get(
+    $classname-items: 'button',
+    $layer: 'atom',
+  );
+  $button-border-top-left-radius-name: design-token.get(
+    'button',
+    'border',
+    'top',
+    'left',
+    'radius'
+  );
+  $button-border-top-right-radius-name: design-token.get(
+    'button',
+    'border',
+    'top',
+    'right',
+    'radius'
+  );
+  $button-border-bottom-right-radius-name: design-token.get(
+    'button',
+    'border',
+    'bottom',
+    'right',
+    'radius'
+  );
+  $button-border-bottom-left-radius-name: design-token.get(
+    'button',
+    'border',
+    'bottom',
+    'left',
+    'radius'
+  );
   $button-border-width-name: design-token.get('button', 'border', 'width');
   $button-box-shadow-name: design-token.get('button', 'box-shadow');
 
   /* Text inputs */
-  $input-text-border-top-left-radius-name: design-token.get('input-text', 'border', 'top', 'left', 'radius');
-  $input-text-border-top-right-radius-name: design-token.get('input-text', 'border', 'top', 'right', 'radius');
-  $input-text-border-bottom-right-radius-name: design-token.get('input-text', 'border', 'bottom', 'right', 'radius');
-  $input-text-border-bottom-left-radius-name: design-token.get('input-text', 'border', 'bottom', 'left', 'radius');
-  $input-text-border-width-name: design-token.get('input-text', 'border', 'width');
+  $input-text-border-top-left-radius-name: design-token.get(
+    'input-text',
+    'border',
+    'top',
+    'left',
+    'radius'
+  );
+  $input-text-border-top-right-radius-name: design-token.get(
+    'input-text',
+    'border',
+    'top',
+    'right',
+    'radius'
+  );
+  $input-text-border-bottom-right-radius-name: design-token.get(
+    'input-text',
+    'border',
+    'bottom',
+    'right',
+    'radius'
+  );
+  $input-text-border-bottom-left-radius-name: design-token.get(
+    'input-text',
+    'border',
+    'bottom',
+    'left',
+    'radius'
+  );
+  $input-text-border-width-name: design-token.get(
+    'input-text',
+    'border',
+    'width'
+  );
   $input-text-box-shadow-name: design-token.get('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'));
+  $select-border-top-left-radius-name: design-token.get(
+    'select',
+    'border',
+    'top',
+    'left',
+    'radius'
+  );
+  $select-border-top-right-radius-name: design-token.get(
+    'select',
+    'border',
+    'top',
+    'right',
+    'radius'
+  );
+  $select-border-bottom-right-radius-name: design-token.get(
+    'select',
+    'border',
+    'bottom',
+    'right',
+    'radius'
+  );
+  $select-border-bottom-left-radius-name: design-token.get(
+    'select',
+    'border',
+    'bottom',
+    'left',
+    'radius'
+  );
+  $select-border-width-name: design-token.get('select', 'border', 'width');
+  $select-box-shadow-name: design-token.get('select', 'box-shadow');
 
   display: inline-flex;
   align-items: stretch;
diff --git a/scss/bitstyles/tools/_button.scss b/scss/bitstyles/tools/_button.scss
index 4ce9db2d2..346dc3d49 100644
--- a/scss/bitstyles/tools/_button.scss
+++ b/scss/bitstyles/tools/_button.scss
@@ -78,7 +78,7 @@
 
     &#{classname.get($classname-items: 'button--square', $layer: 'atom')} {
       #{$min-width-property}: #{calc(1em * var(#{$line-height-property}) + 2 * #{map.get($sizes, 'padding-vertical')})};
-      #{$min-height-property}: #{calc(1em * var(#{$line-height}) + 2 * #{map.get($sizes, 'padding-vertical')})};
+      #{$min-height-property}: #{calc(1em * var(#{$line-height-property}) + 2 * #{map.get($sizes, 'padding-vertical')})};
 
       @if map.has-key($sizes, 'padding-vertical') {
         #{design-token.get('button', 'padding-horizontal')}: map.get(
diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css
index 7419f5966..1180e383d 100644
--- a/test/scss/fixtures/bitstyles-overrides.css
+++ b/test/scss/fixtures/bitstyles-overrides.css
@@ -421,9 +421,15 @@ legend {
   padding: 0;
 }
 label {
+  align-items: baseline;
   cursor: pointer;
-  display: block;
-  margin-bottom: 0;
+  display: flex;
+  font-weight: 500;
+  gap: var(--bscpn-size-s7);
+  margin-bottom: var(--bscpn-size-s7);
+}
+label[aria-disabled='true'] {
+  color: var(--bscpn-color-grayscale-base);
 }
 [type='color'] {
   height: calc(var(--bscpn-line-height-4) * 1em + var(--bscpn-size-s2));
@@ -444,13 +450,13 @@ img {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  display: inline-block;
   flex-shrink: 0;
-  font-size: var(--bscpn-size-m);
+  font-size: var(--bscpn-size-l2);
   height: 1em;
-  margin-right: var(--bscpn-size-s4);
+  margin: var(--bscpn-size-s4);
+  outline-offset: 0;
   position: relative;
-  vertical-align: middle;
+  top: calc(var(--bscpn-size-s4) / 2);
   width: 1em;
 }
 @supports (
@@ -458,15 +464,15 @@ img {
 ) {
   [type='checkbox'] {
     background-color: var(--bscpn-color-grayscale-white);
-    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale);
+    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base);
     border-radius: 10rem;
-    color: var(--bscpn-color-grayscale);
+    color: var(--bscpn-color-grayscale-base);
   }
   [type='checkbox']:focus,
   [type='checkbox']:hover {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1);
-    color: var(--bscpn-color-brand-1);
+    border-color: var(--bscpn-color-brand-1-base);
+    color: var(--bscpn-color-brand-1-base);
     outline: none;
   }
   [type='checkbox']:after {
@@ -479,32 +485,52 @@ img {
     height: 100%;
     opacity: 0;
     transform: scale(0.7);
-    transition: opacity calc(var(--bscpn-transition-default-duration) / 2)
-        var(--bscpn-transition-default-duration)
-        var(--bscpn-transition-default-easing),
-      transform calc(var(--bscpn-transition-default-duration) / 2)
-        var(--bscpn-transition-default-duration)
-        var(--bscpn-transition-default-easing);
+    transition: opacity 0.0375s ease-out 75ms, transform 0.0375s ease-out 75ms;
     width: 100%;
   }
   [type='checkbox']:checked {
-    background-color: var(--bscpn-color-brand-1);
-    border-color: var(--bscpn-color-brand-1);
+    background-color: var(--bscpn-color-brand-1-base);
+    border-color: var(--bscpn-color-brand-1-base);
     color: var(--bscpn-color-grayscale-white);
   }
   [type='checkbox']:checked:after {
     opacity: 1;
     transform: scale(1);
   }
+  [type='checkbox']:invalid,
+  [type='checkbox'][aria-invalid='true'] {
+    background-color: var(--bscpn-color-brand-1-base);
+    border-color: var(--bscpn-color-brand-1-base);
+    box-shadow: none;
+    color: var(--bscpn-color-grayscale-white);
+  }
   [type='checkbox'][disabled] {
-    background-color: var(--bscpn-color-grayscale-light-2);
-    border-color: var(--bscpn-color-grayscale-light-2);
+    background-color: var(--bscpn-color-grayscale-white);
+    border-color: var(--bscpn-color-grayscale-light-1);
+    box-shadow: none;
     color: var(--bscpn-color-grayscale-light-2);
   }
   [type='checkbox'][disabled]:checked {
-    background-color: var(--bscpn-color-grayscale-light-2);
+    background-color: var(--bscpn-color-grayscale-light-1);
     border-color: var(--bscpn-color-grayscale-light-1);
-    color: var(--bscpn-color-grayscale-light-1);
+    box-shadow: none;
+    color: var(--bscpn-color-grayscale-white);
+  }
+  [type='checkbox']:checked:focus:not(:invalid),
+  [type='checkbox']:checked:focus:not([aria-invalid='true']),
+  [type='checkbox']:checked:hover:not(:invalid),
+  [type='checkbox']:checked:hover:not([aria-invalid='true']) {
+    background-color: var(--bscpn-color-brand-1-base);
+    border-color: var(--bscpn-color-brand-1-base);
+    box-shadow: none;
+    color: var(--bscpn-color-grayscale-white);
+  }
+  [type='checkbox']:checked:active:not(:invalid),
+  [type='checkbox']:checked:active:not([aria-invalid='true']) {
+    background-color: var(--bscpn-color-brand-1-base);
+    border-color: var(--bscpn-color-brand-1-dark-1);
+    box-shadow: none;
+    color: var(--bscpn-color-grayscale-white);
   }
 }
 [type='radio'] {
@@ -512,13 +538,13 @@ img {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  display: inline-block;
   flex-shrink: 0;
-  font-size: var(--bscpn-size-m);
+  font-size: var(--bscpn-size-l2);
   height: 1em;
-  margin-right: var(--bscpn-size-s4);
+  margin: var(--bscpn-size-s4);
+  outline-offset: 0;
   position: relative;
-  vertical-align: middle;
+  top: calc(var(--bscpn-size-s4) / 2);
   width: 1em;
 }
 @supports (
@@ -526,76 +552,110 @@ img {
 ) {
   [type='radio'] {
     background-color: var(--bscpn-color-grayscale-white);
-    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale);
+    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base);
     border-radius: 10rem;
+    box-shadow: none;
     color: var(--bscpn-color-grayscale-light-1);
   }
   [type='radio']:after {
-    background: var(--bscpn-color-brand-1);
+    background: var(--bscpn-color-brand-1-base);
     border-radius: 10rem;
     content: '';
     display: block;
     height: 100%;
     opacity: 0;
     transform: scale(0.5);
-    transition: opacity var(--bscpn-transition-default-duration)
-        var(--bscpn-transition-default-easing),
-      transform var(--bscpn-transition-default-duration)
-        var(--bscpn-transition-default-easing);
+    transition: opacity 75ms ease-out, transform 75ms ease-out;
     width: 100%;
   }
   [type='radio']:focus,
   [type='radio']:hover {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1);
-    color: var(--bscpn-color-brand-1);
+    border-color: var(--bscpn-color-brand-1-base);
+    color: var(--bscpn-color-brand-1-base);
     outline: none;
   }
+  [type='radio']:focus-visible {
+    outline: var(--bscpn-color-brand-2-base) solid
+      calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2);
+    outline-offset: var(--bscpn-size-s7);
+  }
+  [type='radio']:active {
+    background-color: var(--bscpn-color-grayscale-white);
+    border-color: var(--bscpn-color-brand-1-base);
+    color: var(--bscpn-color-brand-1-base);
+  }
   [type='radio']:checked {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1);
-    color: var(--bscpn-color-brand-1);
+    border-color: var(--bscpn-color-brand-1-dark-1);
+    box-shadow: var(--bscpn-shadow-default-box);
+    color: var(--bscpn-color-brand-1-dark-1);
   }
   [type='radio']:checked:after {
     opacity: 1;
     transform: scale(0.7);
   }
+  [type='radio']:invalid,
+  [type='radio'][aria-invalid='true'] {
+    background-color: var(--bscpn-color-grayscale-white);
+    border-color: var(--bscpn-color-warning-dark-1);
+    box-shadow: none;
+    color: var(--bscpn-color-warning-dark-4);
+  }
   [type='radio'][disabled] {
-    background-color: var(--bscpn-color-grayscale-light-2);
+    background-color: var(--bscpn-color-grayscale-white);
     border-color: var(--bscpn-color-grayscale-light-1);
+    box-shadow: none;
     color: var(--bscpn-color-grayscale-light-1);
   }
   [type='radio'][disabled]:checked {
-    background-color: var(--bscpn-color-grayscale-light-2);
+    background-color: var(--bscpn-color-grayscale-white);
     border-color: var(--bscpn-color-grayscale-light-1);
+    box-shadow: none;
     color: var(--bscpn-color-grayscale-light-1);
   }
   [type='radio'][disabled]:after {
     background: var(--bscpn-color-grayscale-light-1);
   }
+  [type='radio']:focus:not(:focus-visible) {
+    outline-width: 0;
+  }
+  [type='radio']:checked:focus:not(:invalid),
+  [type='radio']:checked:focus:not([aria-invalid='true']),
+  [type='radio']:checked:hover:not(:invalid),
+  [type='radio']:checked:hover:not([aria-invalid='true']) {
+    background-color: var(--bscpn-color-grayscale-white);
+    border-color: var(--bscpn-color-brand-1-base);
+    box-shadow: none;
+    color: var(--bscpn-color-brand-1-base);
+  }
+  [type='radio']:checked:active:not(:invalid),
+  [type='radio']:checked:active:not([aria-invalid='true']) {
+    background-color: var(--bscpn-color-grayscale-white);
+    border-color: var(--bscpn-color-brand-1-base);
+    box-shadow: none;
+    color: var(--bscpn-color-brand-1-base);
+  }
 }
 input,
 textarea {
+  outline-offset: 0;
   resize: vertical;
-  transition: color var(--bscpn-transition-default-duration)
-      var(--bscpn-transition-default-easing),
-    background-color var(--bscpn-transition-default-duration)
-      var(--bscpn-transition-default-easing),
-    border var(--bscpn-transition-default-duration)
-      var(--bscpn-transition-default-easing);
+  transition: color 75ms ease-out, background-color 75ms ease-out,
+    border 75ms ease-out;
 }
 input::-moz-placeholder,
 textarea::-moz-placeholder {
   color: var(--bscpn-color-grayscale-light-1);
   font-style: italic;
-  font-weight: var(--bscpn-font-weight-normal);
+  font-weight: 400;
   opacity: 1;
 }
 input::placeholder,
 textarea::placeholder {
   color: var(--bscpn-color-grayscale-light-1);
   font-style: italic;
-  font-weight: var(--bscpn-font-weight-normal);
+  font-weight: 400;
   opacity: 1;
 }
 [type='date'],
@@ -611,8 +671,15 @@ textarea::placeholder {
 [type='url'],
 [type='week'],
 textarea {
+  --bscpn-input-text-border-top-right-radius: 10rem;
+  --bscpn-input-text-border-bottom-right-radius: 10rem;
+  --bscpn-input-text-border-bottom-left-radius: 10rem;
+  --bscpn-input-text-border-top-left-radius: 10rem;
+  --bscpn-input-text-padding-vertical: var(--bscpn-size-s2);
+  --bscpn-input-text-padding-horizontal: var(--bscpn-size-m);
+  --bscpn-input-text-border-width: 0.1875rem;
   background-color: var(--bscpn-color-grayscale-white);
-  border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale);
+  border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base);
   border-radius: 10rem;
   box-shadow: 0 0 calc(var(--bscpn-size-s5) / 4)
       rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025),
@@ -622,26 +689,45 @@ textarea {
       rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025),
     0 0 calc(var(--bscpn-size-s5) / 1)
       rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025);
-  color: var(--bscpn-color-grayscale);
+  color: var(--bscpn-color-grayscale-base);
   display: block;
   font: inherit;
-  padding: var(--bscpn-size-s5) var(--bscpn-size-s5);
-  width: 100%;
+  padding: calc(
+      var(--bscpn-input-text-padding-vertical) -
+        var(--bscpn-input-text-border-width, 0rem)
+    )
+    calc(
+      var(--bscpn-input-text-padding-horizontal) -
+        var(--bscpn-input-text-border-width, 0rem)
+    );
 }
+[type='date']:focus,
 [type='date']:hover,
+[type='datetime-local']:focus,
 [type='datetime-local']:hover,
+[type='email']:focus,
 [type='email']:hover,
+[type='month']:focus,
 [type='month']:hover,
+[type='number']:focus,
 [type='number']:hover,
+[type='password']:focus,
 [type='password']:hover,
+[type='search']:focus,
 [type='search']:hover,
+[type='tel']:focus,
 [type='tel']:hover,
+[type='text']:focus,
 [type='text']:hover,
+[type='time']:focus,
 [type='time']:hover,
+[type='url']:focus,
 [type='url']:hover,
+[type='week']:focus,
 [type='week']:hover,
+textarea:focus,
 textarea:hover {
-  background-color: var(--bscpn-color-grayscale);
+  background-color: var(--bscpn-color-grayscale-base);
   border-color: var(--bscpn-color-grayscale-dark-1);
   box-shadow: 0 0 calc(var(--bscpn-size-s2) / 4)
       rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025),
@@ -653,44 +739,107 @@ textarea:hover {
       rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025);
   color: var(--bscpn-color-grayscale-dark-1);
 }
+[type='date']:focus::placeholder,
+[type='date']:hover::placeholder,
+[type='datetime-local']:focus::placeholder,
+[type='datetime-local']:hover::placeholder,
+[type='email']:focus::placeholder,
+[type='email']:hover::placeholder,
+[type='month']:focus::placeholder,
+[type='month']:hover::placeholder,
+[type='number']:focus::placeholder,
+[type='number']:hover::placeholder,
+[type='password']:focus::placeholder,
+[type='password']:hover::placeholder,
+[type='search']:focus::placeholder,
+[type='search']:hover::placeholder,
+[type='tel']:focus::placeholder,
+[type='tel']:hover::placeholder,
+[type='text']:focus::placeholder,
+[type='text']:hover::placeholder,
+[type='time']:focus::placeholder,
+[type='time']:hover::placeholder,
+[type='url']:focus::placeholder,
+[type='url']:hover::placeholder,
+[type='week']:focus::placeholder,
+[type='week']:hover::placeholder,
+textarea:focus::placeholder,
+textarea:hover::placeholder {
+  color: var(--bscpn-color-grayscale-dark-1);
+}
+[type='date']:focus-visible,
+[type='datetime-local']:focus-visible,
+[type='email']:focus-visible,
+[type='month']:focus-visible,
+[type='number']:focus-visible,
+[type='password']:focus-visible,
+[type='search']:focus-visible,
+[type='tel']:focus-visible,
+[type='text']:focus-visible,
+[type='time']:focus-visible,
+[type='url']:focus-visible,
+[type='week']:focus-visible,
+textarea:focus-visible {
+  outline: var(--bscpn-color-brand-2-base) solid
+    calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2);
+  outline-offset: var(--bscpn-size-s7);
+  z-index: 3;
+}
 [type='date']:active,
-[type='date']:focus,
 [type='datetime-local']:active,
-[type='datetime-local']:focus,
 [type='email']:active,
-[type='email']:focus,
 [type='month']:active,
-[type='month']:focus,
 [type='number']:active,
-[type='number']:focus,
 [type='password']:active,
-[type='password']:focus,
 [type='search']:active,
-[type='search']:focus,
 [type='tel']:active,
-[type='tel']:focus,
 [type='text']:active,
-[type='text']:focus,
 [type='time']:active,
-[type='time']:focus,
 [type='url']:active,
-[type='url']:focus,
 [type='week']:active,
-[type='week']:focus,
-textarea:active,
-textarea:focus {
+textarea:active {
   background-color: var(--bscpn-color-grayscale-white);
-  border-color: var(--bscpn-color-grayscale-dark-1);
-  box-shadow: 0 0 calc(var(--bscpn-size-s6) / 4)
-      rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075),
-    0 0 calc(var(--bscpn-size-s6) / 3)
-      rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075),
-    0 0 calc(var(--bscpn-size-s6) / 2)
-      rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075),
-    0 0 calc(var(--bscpn-size-s6) / 1)
-      rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075);
-  color: var(--bscpn-color-grayscale-dark-1);
-  outline: none;
+  border-color: var(--bscpn-color-brand-1-dark-1);
+  box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4)
+      rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bscpn-size-s4) / 3)
+      rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bscpn-size-s4) / 2)
+      rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bscpn-size-s4) / 1)
+      rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075);
+  color: var(--bscpn-color-grayscale-dark-4);
+  outline-width: 0;
+}
+[type='date']:active::-moz-placeholder,
+[type='datetime-local']:active::-moz-placeholder,
+[type='email']:active::-moz-placeholder,
+[type='month']:active::-moz-placeholder,
+[type='number']:active::-moz-placeholder,
+[type='password']:active::-moz-placeholder,
+[type='search']:active::-moz-placeholder,
+[type='tel']:active::-moz-placeholder,
+[type='text']:active::-moz-placeholder,
+[type='time']:active::-moz-placeholder,
+[type='url']:active::-moz-placeholder,
+[type='week']:active::-moz-placeholder,
+textarea:active::-moz-placeholder {
+  color: var(--bscpn-color-brand-1-base);
+}
+[type='date']:active::placeholder,
+[type='datetime-local']:active::placeholder,
+[type='email']:active::placeholder,
+[type='month']:active::placeholder,
+[type='number']:active::placeholder,
+[type='password']:active::placeholder,
+[type='search']:active::placeholder,
+[type='tel']:active::placeholder,
+[type='text']:active::placeholder,
+[type='time']:active::placeholder,
+[type='url']:active::placeholder,
+[type='week']:active::placeholder,
+textarea:active::placeholder {
+  color: var(--bscpn-color-brand-1-base);
 }
 [type='date']:invalid,
 [type='date'][aria-invalid='true'],
@@ -719,16 +868,16 @@ textarea:focus {
 textarea:invalid,
 textarea[aria-invalid='true'] {
   background-color: var(--bscpn-color-grayscale-white);
-  border-color: var(--bscpn-color-warning);
+  border-color: var(--bscpn-color-warning-base);
   box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4)
-      rgba(var(--bscpn-color-warning-rgb), 0.05),
+      rgba(var(--bscpn-color-warning-base-rgb), 0.05),
     0 0 calc(var(--bscpn-size-s4) / 3)
-      rgba(var(--bscpn-color-warning-rgb), 0.05),
+      rgba(var(--bscpn-color-warning-base-rgb), 0.05),
     0 0 calc(var(--bscpn-size-s4) / 2)
-      rgba(var(--bscpn-color-warning-rgb), 0.05),
+      rgba(var(--bscpn-color-warning-base-rgb), 0.05),
     0 0 calc(var(--bscpn-size-s4) / 1)
-      rgba(var(--bscpn-color-warning-rgb), 0.05);
-  color: var(--bscpn-color-warning);
+      rgba(var(--bscpn-color-warning-base-rgb), 0.05);
+  color: var(--bscpn-color-warning-base);
 }
 [type='date']:disabled,
 [type='datetime-local']:disabled,
@@ -743,16 +892,68 @@ textarea[aria-invalid='true'] {
 [type='url']:disabled,
 [type='week']:disabled,
 textarea:disabled {
-  background: var(--bscpn-color-grayscale-light-2);
-  border-color: var(--bscpn-color-grayscale-light-2);
+  background: var(--bscpn-color-grayscale-light-4);
+  border-color: var(--bscpn-color-grayscale-light-1);
   box-shadow: none;
   color: var(--bscpn-color-grayscale);
   cursor: default;
 }
+[type='date']:disabled::-moz-placeholder,
+[type='datetime-local']:disabled::-moz-placeholder,
+[type='email']:disabled::-moz-placeholder,
+[type='month']:disabled::-moz-placeholder,
+[type='number']:disabled::-moz-placeholder,
+[type='password']:disabled::-moz-placeholder,
+[type='search']:disabled::-moz-placeholder,
+[type='tel']:disabled::-moz-placeholder,
+[type='text']:disabled::-moz-placeholder,
+[type='time']:disabled::-moz-placeholder,
+[type='url']:disabled::-moz-placeholder,
+[type='week']:disabled::-moz-placeholder,
+textarea:disabled::-moz-placeholder {
+  color: var(--bscpn-color-grayscale-light-1);
+}
+[type='date']:disabled::placeholder,
+[type='datetime-local']:disabled::placeholder,
+[type='email']:disabled::placeholder,
+[type='month']:disabled::placeholder,
+[type='number']:disabled::placeholder,
+[type='password']:disabled::placeholder,
+[type='search']:disabled::placeholder,
+[type='tel']:disabled::placeholder,
+[type='text']:disabled::placeholder,
+[type='time']:disabled::placeholder,
+[type='url']:disabled::placeholder,
+[type='week']:disabled::placeholder,
+textarea:disabled::placeholder {
+  color: var(--bscpn-color-grayscale-light-1);
+}
+[type='date']:focus:not(:focus-visible),
+[type='datetime-local']:focus:not(:focus-visible),
+[type='email']:focus:not(:focus-visible),
+[type='month']:focus:not(:focus-visible),
+[type='number']:focus:not(:focus-visible),
+[type='password']:focus:not(:focus-visible),
+[type='search']:focus:not(:focus-visible),
+[type='tel']:focus:not(:focus-visible),
+[type='text']:focus:not(:focus-visible),
+[type='time']:focus:not(:focus-visible),
+[type='url']:focus:not(:focus-visible),
+[type='week']:focus:not(:focus-visible),
+textarea:focus:not(:focus-visible) {
+  outline-width: 0;
+}
 @supports (
   (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)
 ) {
   select {
+    --bscpn-select-padding-vertical: var(--bscpn-size-s2);
+    --bscpn-select-padding-horizontal: var(--bscpn-size-l1);
+    --bscpn-select-border-width: 0.1875rem;
+    --bscpn-select-border-top-right-radius: 10rem;
+    --bscpn-select-border-bottom-right-radius: 10rem;
+    --bscpn-select-border-bottom-left-radius: 10rem;
+    --bscpn-select-border-top-left-radius: 10rem;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -761,54 +962,68 @@ textarea:disabled {
     background-position: right 0.75em top 50%;
     background-repeat: no-repeat;
     background-size: 1em;
-    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale);
+    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base);
     border-radius: 10rem;
-    color: var(--bscpn-color-grayscale);
+    color: var(--bscpn-color-grayscale-base);
     cursor: pointer;
-    display: block;
+    display: flex;
     font: inherit;
+    font-weight: 700;
+    outline-offset: 0;
     overflow: hidden;
-    padding: var(--bscpn-size-s5) calc(var(--bscpn-size-s1) * 2)
-      var(--bscpn-size-s5) var(--bscpn-size-s1);
+    padding: calc(
+        var(--bscpn-select-padding-vertical) -
+          var(--bscpn-select-border-width, 0rem)
+      )
+      calc(
+        var(--bscpn-select-padding-horizontal) -
+          var(--bscpn-select-border-width, 0rem)
+      );
     text-overflow: ellipsis;
-    transition: color var(--bscpn-transition-default-duration)
-        var(--bscpn-transition-default-easing),
-      background-color var(--bscpn-transition-default-duration)
-        var(--bscpn-transition-default-easing),
-      border var(--bscpn-transition-default-duration)
-        var(--bscpn-transition-default-easing);
+    transition: color 75ms ease-out, background-color 75ms ease-out,
+      border 75ms ease-out;
     width: 100%;
   }
   select::-ms-expand {
     display: none;
   }
+  select:focus,
   select:hover {
-    background-color: var(--bscpn-color-grayscale);
+    background-color: var(--bscpn-color-grayscale-base);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-dark-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bscpn-color-grayscale);
+    border-color: var(--bscpn-color-grayscale-base);
     color: var(--bscpn-color-grayscale-dark-1);
   }
-  select:active,
-  select:focus {
-    background-color: transparent;
+  select:focus-visible {
+    outline: var(--bscpn-color-brand-2-base) solid
+      calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2);
+    outline-offset: var(--bscpn-size-s7);
+  }
+  select:active {
+    background-color: var(--bscpn-color-grayscale-white);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bscpn-color-grayscale-dark-1);
-    color: var(--bscpn-color-grayscale-dark-1);
+    border-color: var(--bscpn-color-brand-1-dark-1);
+    box-shadow: var(--bscpn-shadow-default-box);
+    color: var(--bscpn-color-brand-1-dark-1);
     outline: none;
   }
-  select:invalid {
+  select:invalid,
+  select[aria-invalid='true'] {
     background-color: var(--bscpn-color-grayscale-white);
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-warning)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bscpn-color-warning);
-    color: var(--bscpn-color-warning);
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-warning-base)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
+    border-color: var(--bscpn-color-warning-base);
+    color: var(--bscpn-color-warning-base);
   }
   select[disabled] {
-    background-color: var(--bscpn-color-grayscale-light-2);
+    background-color: var(--bscpn-color-grayscale-light-3);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
     border-color: var(--bscpn-color-grayscale-light-2);
-    color: var(--bscpn-color-grayscale);
+    color: var(--bscpn-color-grayscale-base);
     cursor: default;
   }
+  select:focus:not(:focus-visible) {
+    outline-width: 0;
+  }
 }
 :root,
 [data-theme] {
@@ -944,20 +1159,19 @@ table {
   --bscpn-button-justify-content: center;
   align-items: center;
   -webkit-appearance: none;
-  border-radius: var(--bscpn-button-border-top-left-radius)
-    var(--bscpn-button-border-top-right-radius)
-    var(--bscpn-button-border-bottom-right-radius)
-    var(--bscpn-button-border-bottom-left-radius);
+  border-radius: var(--bscpn-at-button-border-top-left-radius)
+    var(--bscpn-at-button-border-top-right-radius)
+    var(--bscpn-at-button-border-bottom-right-radius)
+    var(--bscpn-at-button-border-bottom-left-radius);
   border-style: solid;
-  border-width: var(--bscpn-button-border-width);
+  border-width: var(--bscpn-at-button-border-width);
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
   font-family: inherit;
-  font-size: var(--bscpn-button-font-size);
-  font-weight: var(--bscpn-button-font-weight);
-  justify-content: var(--bscpn-button-justify-content);
-  margin: 0;
+  font-size: var(--bscpn-at-button-font-size);
+  font-weight: var(--bscpn-at-button-font-weight);
+  justify-content: var(--bscpn-at-button-justify-content);
   max-width: 100%;
   min-height: var(--bscpn-button-min-height);
   min-width: var(--bscpn-button-min-width);
@@ -983,6 +1197,19 @@ table {
 }
 .bs-at-button:focus,
 .bs-at-button:hover {
+  background-color: var(--bscpn-button-hover-background-color);
+  border-color: var(--bscpn-button-hover-border-color);
+  box-shadow: var(--bscpn-button-hover-box-shadow);
+  color: var(--bscpn-button-hover-color);
+  outline-width: 0;
+  text-decoration: none;
+  z-index: 1;
+}
+.bs-at-button:active {
+  background-color: var(--bscpn-button-active-background-color);
+  border-color: var(--bscpn-button-active-border-color);
+  box-shadow: var(--bscpn-button-active-box-shadow);
+  color: var(--bscpn-button-active-color);
   outline-width: 0;
   text-decoration: none;
   z-index: 1;
@@ -997,6 +1224,10 @@ table {
 .bs-at-button[aria-expanded='true'],
 .bs-at-button[aria-pressed='true'],
 .bs-at-button[aria-selected='true'] {
+  background-color: var(--bscpn-button-pressed-background-color);
+  border-color: var(--bscpn-button-pressed-border-color);
+  box-shadow: var(--bscpn-button-pressed-box-shadow);
+  color: var(--bscpn-button-pressed-color);
   z-index: 2;
 }
 .bs-at-button:disabled,
@@ -1005,6 +1236,10 @@ table {
 .bs-at-button[aria-disabled='true'],
 .bs-at-button[aria-disabled='true']:focus,
 .bs-at-button[aria-disabled='true']:hover {
+  background-color: var(--bscpn-button-disabled-background-color);
+  border-color: var(--bscpn-button-disabled-border-color);
+  box-shadow: var(--bscpn-button-disabled-box-shadow);
+  color: var(--bscpn-button-disabled-color);
   cursor: not-allowed;
 }
 .bs-at-button__avatar,
@@ -1019,46 +1254,46 @@ table {
 }
 .bs-at-button,
 .bs-at-button:visited {
-  background-color: var(--bscpn-button-background-color);
-  border-color: var(--bscpn-button-border-color);
-  box-shadow: var(--bscpn-button-box-shadow);
-  color: var(--bscpn-button-color);
+  background-color: var(--bscpn-at-button-background-color);
+  border-color: var(--bscpn-at-button-border-color);
+  box-shadow: var(--bscpn-at-button-box-shadow);
+  color: var(--bscpn-at-button-color);
 }
 :root,
 [data-theme='default'] {
-  --bscpn-button-color: var(--bscpn-color-grayscale-black);
+  --bscpn-at-button-color: var(--bscpn-color-grayscale-black);
 }
 [data-theme='dark'] {
-  --bscpn-button-color: var(--bscpn-color-grayscale-white);
+  --bscpn-at-button-color: var(--bscpn-color-grayscale-white);
 }
 .bs-at-button--secondary,
 .bs-at-button--secondary:visited {
-  background-color: var(--bscpn-button--secondary-background-color);
-  border-color: var(--bscpn-button--secondary-border-color);
-  box-shadow: var(--bscpn-button--secondary-box-shadow);
-  color: var(--bscpn-button--secondary-color);
+  background-color: var(--bscpn-at-button--secondary-background-color);
+  border-color: var(--bscpn-at-button--secondary-border-color);
+  box-shadow: var(--bscpn-at-button--secondary-box-shadow);
+  color: var(--bscpn-at-button--secondary-color);
 }
 .bs-at-button--secondary:focus,
 .bs-at-button--secondary:hover {
-  background-color: var(--bscpn-button--secondary-hover-background-color);
-  border-color: var(--bscpn-button--secondary-hover-border-color);
-  box-shadow: var(--bscpn-button--secondary-hover-box-shadow);
-  color: var(--bscpn-button--secondary-hover-color);
+  background-color: var(--bscpn-at-button--secondary-hover-background-color);
+  border-color: var(--bscpn-at-button--secondary-hover-border-color);
+  box-shadow: var(--bscpn-at-button--secondary-hover-box-shadow);
+  color: var(--bscpn-at-button--secondary-hover-color);
 }
 .bs-at-button--secondary:active {
-  background-color: var(--bscpn-button--secondary-active-background-color);
-  border-color: var(--bscpn-button--secondary-active-border-color);
-  box-shadow: var(--bscpn-button--secondary-active-box-shadow);
-  color: var(--bscpn-button--secondary-active-color);
+  background-color: var(--bscpn-at-button--secondary-active-background-color);
+  border-color: var(--bscpn-at-button--secondary-active-border-color);
+  box-shadow: var(--bscpn-at-button--secondary-active-box-shadow);
+  color: var(--bscpn-at-button--secondary-active-color);
 }
 .bs-at-button--secondary[aria-current],
 .bs-at-button--secondary[aria-expanded='true'],
 .bs-at-button--secondary[aria-pressed='true'],
 .bs-at-button--secondary[aria-selected='true'] {
-  background-color: var(--bscpn-button--secondary-pressed-background-color);
-  border-color: var(--bscpn-button--secondary-pressed-border-color);
-  box-shadow: var(--bscpn-button--secondary-pressed-box-shadow);
-  color: var(--bscpn-button--secondary-pressed-color);
+  background-color: var(--bscpn-at-button--secondary-pressed-background-color);
+  border-color: var(--bscpn-at-button--secondary-pressed-border-color);
+  box-shadow: var(--bscpn-at-button--secondary-pressed-box-shadow);
+  color: var(--bscpn-at-button--secondary-pressed-color);
 }
 .bs-at-button--secondary:disabled,
 .bs-at-button--secondary:disabled:focus,
@@ -1066,10 +1301,10 @@ table {
 .bs-at-button--secondary[aria-disabled='true'],
 .bs-at-button--secondary[aria-disabled='true']:focus,
 .bs-at-button--secondary[aria-disabled='true']:hover {
-  background-color: var(--bscpn-button--secondary-disabled-background-color);
-  border-color: var(--bscpn-button--secondary-disabled-border-color);
-  box-shadow: var(--bscpn-button--secondary-disabled-box-shadow);
-  color: var(--bscpn-button--secondary-disabled-color);
+  background-color: var(--bscpn-at-button--secondary-disabled-background-color);
+  border-color: var(--bscpn-at-button--secondary-disabled-border-color);
+  box-shadow: var(--bscpn-at-button--secondary-disabled-box-shadow);
+  color: var(--bscpn-at-button--secondary-disabled-color);
 }
 :root,
 [data-theme='default'] {
@@ -1101,8 +1336,10 @@ table {
       rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075),
     0 0 calc(var(--bscpn-size-s4) / 1)
       rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075);
-  --bscpn-button--secondary-disabled-color: var(--bscpn-color-grayscale);
-  --bscpn-button--secondary-disabled-background-color: var(
+  --bscpn-at-button--secondary-disabled-color: var(
+    --bscpn-color-grayscale-base
+  );
+  --bscpn-at-button--secondary-disabled-background-color: var(
     --bscpn-color-grayscale-light-3
   );
   --bscpn-button--secondary-disabled-box-shadow: none;
@@ -1122,9 +1359,9 @@ table {
   --bscpn-button--secondary-active-background-color: var(
     --bscpn-color-brand-1-light-1
   );
-  --bscpn-button--secondary-active-box-shadow: none;
-  --bscpn-button--secondary-pressed-color: var(--bscpn-color-brand-1);
-  --bscpn-button--secondary-pressed-background-color: var(
+  --bscpn-at-button--secondary-active-box-shadow: none;
+  --bscpn-at-button--secondary-pressed-color: var(--bscpn-color-brand-1-base);
+  --bscpn-at-button--secondary-pressed-background-color: var(
     --bscpn-color-brand-1-light-1
   );
   --bscpn-button--secondary-pressed-box-shadow: 0 0
@@ -1146,32 +1383,32 @@ table {
 }
 .bs-at-button--outline,
 .bs-at-button--outline:visited {
-  background-color: var(--bscpn-button--outline-background-color);
-  border-color: var(--bscpn-button--outline-border-color);
-  box-shadow: var(--bscpn-button--outline-box-shadow);
-  color: var(--bscpn-button--outline-color);
+  background-color: var(--bscpn-at-button--outline-background-color);
+  border-color: var(--bscpn-at-button--outline-border-color);
+  box-shadow: var(--bscpn-at-button--outline-box-shadow);
+  color: var(--bscpn-at-button--outline-color);
 }
 .bs-at-button--outline:focus,
 .bs-at-button--outline:hover {
-  background-color: var(--bscpn-button--outline-hover-background-color);
-  border-color: var(--bscpn-button--outline-hover-border-color);
-  box-shadow: var(--bscpn-button--outline-hover-box-shadow);
-  color: var(--bscpn-button--outline-hover-color);
+  background-color: var(--bscpn-at-button--outline-hover-background-color);
+  border-color: var(--bscpn-at-button--outline-hover-border-color);
+  box-shadow: var(--bscpn-at-button--outline-hover-box-shadow);
+  color: var(--bscpn-at-button--outline-hover-color);
 }
 .bs-at-button--outline:active {
-  background-color: var(--bscpn-button--outline-active-background-color);
-  border-color: var(--bscpn-button--outline-active-border-color);
-  box-shadow: var(--bscpn-button--outline-active-box-shadow);
-  color: var(--bscpn-button--outline-active-color);
+  background-color: var(--bscpn-at-button--outline-active-background-color);
+  border-color: var(--bscpn-at-button--outline-active-border-color);
+  box-shadow: var(--bscpn-at-button--outline-active-box-shadow);
+  color: var(--bscpn-at-button--outline-active-color);
 }
 .bs-at-button--outline[aria-current],
 .bs-at-button--outline[aria-expanded='true'],
 .bs-at-button--outline[aria-pressed='true'],
 .bs-at-button--outline[aria-selected='true'] {
-  background-color: var(--bscpn-button--outline-pressed-background-color);
-  border-color: var(--bscpn-button--outline-pressed-border-color);
-  box-shadow: var(--bscpn-button--outline-pressed-box-shadow);
-  color: var(--bscpn-button--outline-pressed-color);
+  background-color: var(--bscpn-at-button--outline-pressed-background-color);
+  border-color: var(--bscpn-at-button--outline-pressed-border-color);
+  box-shadow: var(--bscpn-at-button--outline-pressed-box-shadow);
+  color: var(--bscpn-at-button--outline-pressed-color);
 }
 .bs-at-button--outline:disabled,
 .bs-at-button--outline:disabled:focus,
@@ -1179,10 +1416,10 @@ table {
 .bs-at-button--outline[aria-disabled='true'],
 .bs-at-button--outline[aria-disabled='true']:focus,
 .bs-at-button--outline[aria-disabled='true']:hover {
-  background-color: var(--bscpn-button--outline-disabled-background-color);
-  border-color: var(--bscpn-button--outline-disabled-border-color);
-  box-shadow: var(--bscpn-button--outline-disabled-box-shadow);
-  color: var(--bscpn-button--outline-disabled-color);
+  background-color: var(--bscpn-at-button--outline-disabled-background-color);
+  border-color: var(--bscpn-at-button--outline-disabled-border-color);
+  box-shadow: var(--bscpn-at-button--outline-disabled-box-shadow);
+  color: var(--bscpn-at-button--outline-disabled-color);
 }
 :root,
 [data-theme='default'] {
@@ -1221,10 +1458,12 @@ table {
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bscpn-size-m) / 1)
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125);
-  --bscpn-button--outline-disabled-color: var(--bscpn-color-grayscale);
-  --bscpn-button--outline-disabled-background-color: transparent;
-  --bscpn-button--outline-disabled-border-color: var(--bscpn-color-grayscale);
-  --bscpn-button--outline-disabled-box-shadow: none;
+  --bscpn-at-button--outline-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-at-button--outline-disabled-background-color: transparent;
+  --bscpn-at-button--outline-disabled-border-color: var(
+    --bscpn-color-grayscale-base
+  );
+  --bscpn-at-button--outline-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
   --bscpn-button--outline-color: var(--bscpn-color-grayscale-light-2);
@@ -1246,9 +1485,9 @@ table {
   --bscpn-button--outline-active-border-color: var(
     --bscpn-color-brand-1-light-1
   );
-  --bscpn-button--outline-active-box-shadow: none;
-  --bscpn-button--outline-pressed-color: var(--bscpn-color-brand-1);
-  --bscpn-button--outline-pressed-background-color: var(
+  --bscpn-at-button--outline-active-box-shadow: none;
+  --bscpn-at-button--outline-pressed-color: var(--bscpn-color-brand-1-base);
+  --bscpn-at-button--outline-pressed-background-color: var(
     --bscpn-color-brand-1-light-1
   );
   --bscpn-button--outline-pressed-border-color: var(
@@ -1273,32 +1512,34 @@ table {
 }
 .bs-at-button--transparent,
 .bs-at-button--transparent:visited {
-  background-color: var(--bscpn-button--transparent-background-color);
-  border-color: var(--bscpn-button--transparent-border-color);
-  box-shadow: var(--bscpn-button--transparent-box-shadow);
-  color: var(--bscpn-button--transparent-color);
+  background-color: var(--bscpn-at-button--transparent-background-color);
+  border-color: var(--bscpn-at-button--transparent-border-color);
+  box-shadow: var(--bscpn-at-button--transparent-box-shadow);
+  color: var(--bscpn-at-button--transparent-color);
 }
 .bs-at-button--transparent:focus,
 .bs-at-button--transparent:hover {
-  background-color: var(--bscpn-button--transparent-hover-background-color);
-  border-color: var(--bscpn-button--transparent-hover-border-color);
-  box-shadow: var(--bscpn-button--transparent-hover-box-shadow);
-  color: var(--bscpn-button--transparent-hover-color);
+  background-color: var(--bscpn-at-button--transparent-hover-background-color);
+  border-color: var(--bscpn-at-button--transparent-hover-border-color);
+  box-shadow: var(--bscpn-at-button--transparent-hover-box-shadow);
+  color: var(--bscpn-at-button--transparent-hover-color);
 }
 .bs-at-button--transparent:active {
-  background-color: var(--bscpn-button--transparent-active-background-color);
-  border-color: var(--bscpn-button--transparent-active-border-color);
-  box-shadow: var(--bscpn-button--transparent-active-box-shadow);
-  color: var(--bscpn-button--transparent-active-color);
+  background-color: var(--bscpn-at-button--transparent-active-background-color);
+  border-color: var(--bscpn-at-button--transparent-active-border-color);
+  box-shadow: var(--bscpn-at-button--transparent-active-box-shadow);
+  color: var(--bscpn-at-button--transparent-active-color);
 }
 .bs-at-button--transparent[aria-current],
 .bs-at-button--transparent[aria-expanded='true'],
 .bs-at-button--transparent[aria-pressed='true'],
 .bs-at-button--transparent[aria-selected='true'] {
-  background-color: var(--bscpn-button--transparent-pressed-background-color);
-  border-color: var(--bscpn-button--transparent-pressed-border-color);
-  box-shadow: var(--bscpn-button--transparent-pressed-box-shadow);
-  color: var(--bscpn-button--transparent-pressed-color);
+  background-color: var(
+    --bscpn-at-button--transparent-pressed-background-color
+  );
+  border-color: var(--bscpn-at-button--transparent-pressed-border-color);
+  box-shadow: var(--bscpn-at-button--transparent-pressed-box-shadow);
+  color: var(--bscpn-at-button--transparent-pressed-color);
 }
 .bs-at-button--transparent:disabled,
 .bs-at-button--transparent:disabled:focus,
@@ -1306,10 +1547,12 @@ table {
 .bs-at-button--transparent[aria-disabled='true'],
 .bs-at-button--transparent[aria-disabled='true']:focus,
 .bs-at-button--transparent[aria-disabled='true']:hover {
-  background-color: var(--bscpn-button--transparent-disabled-background-color);
-  border-color: var(--bscpn-button--transparent-disabled-border-color);
-  box-shadow: var(--bscpn-button--transparent-disabled-box-shadow);
-  color: var(--bscpn-button--transparent-disabled-color);
+  background-color: var(
+    --bscpn-at-button--transparent-disabled-background-color
+  );
+  border-color: var(--bscpn-at-button--transparent-disabled-border-color);
+  box-shadow: var(--bscpn-at-button--transparent-disabled-box-shadow);
+  color: var(--bscpn-at-button--transparent-disabled-color);
 }
 :root,
 [data-theme='default'] {
@@ -1347,8 +1590,10 @@ table {
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bscpn-size-m) / 1)
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125);
-  --bscpn-button--transparent-disabled-color: var(--bscpn-color-grayscale);
-  --bscpn-button--transparent-disabled-background-color: var(
+  --bscpn-at-button--transparent-disabled-color: var(
+    --bscpn-color-grayscale-base
+  );
+  --bscpn-at-button--transparent-disabled-background-color: var(
     --bscpn-color-grayscale-light-3
   );
   --bscpn-button--transparent-disabled-border-color: var(
@@ -1402,32 +1647,32 @@ table {
 }
 .bs-at-button--tab,
 .bs-at-button--tab:visited {
-  background-color: var(--bscpn-button--tab-background-color);
-  border-color: var(--bscpn-button--tab-border-color);
-  box-shadow: var(--bscpn-button--tab-box-shadow);
-  color: var(--bscpn-button--tab-color);
+  background-color: var(--bscpn-at-button--tab-background-color);
+  border-color: var(--bscpn-at-button--tab-border-color);
+  box-shadow: var(--bscpn-at-button--tab-box-shadow);
+  color: var(--bscpn-at-button--tab-color);
 }
 .bs-at-button--tab:focus,
 .bs-at-button--tab:hover {
-  background-color: var(--bscpn-button--tab-hover-background-color);
-  border-color: var(--bscpn-button--tab-hover-border-color);
-  box-shadow: var(--bscpn-button--tab-hover-box-shadow);
-  color: var(--bscpn-button--tab-hover-color);
+  background-color: var(--bscpn-at-button--tab-hover-background-color);
+  border-color: var(--bscpn-at-button--tab-hover-border-color);
+  box-shadow: var(--bscpn-at-button--tab-hover-box-shadow);
+  color: var(--bscpn-at-button--tab-hover-color);
 }
 .bs-at-button--tab:active {
-  background-color: var(--bscpn-button--tab-active-background-color);
-  border-color: var(--bscpn-button--tab-active-border-color);
-  box-shadow: var(--bscpn-button--tab-active-box-shadow);
-  color: var(--bscpn-button--tab-active-color);
+  background-color: var(--bscpn-at-button--tab-active-background-color);
+  border-color: var(--bscpn-at-button--tab-active-border-color);
+  box-shadow: var(--bscpn-at-button--tab-active-box-shadow);
+  color: var(--bscpn-at-button--tab-active-color);
 }
 .bs-at-button--tab[aria-current],
 .bs-at-button--tab[aria-expanded='true'],
 .bs-at-button--tab[aria-pressed='true'],
 .bs-at-button--tab[aria-selected='true'] {
-  background-color: var(--bscpn-button--tab-pressed-background-color);
-  border-color: var(--bscpn-button--tab-pressed-border-color);
-  box-shadow: var(--bscpn-button--tab-pressed-box-shadow);
-  color: var(--bscpn-button--tab-pressed-color);
+  background-color: var(--bscpn-at-button--tab-pressed-background-color);
+  border-color: var(--bscpn-at-button--tab-pressed-border-color);
+  box-shadow: var(--bscpn-at-button--tab-pressed-box-shadow);
+  color: var(--bscpn-at-button--tab-pressed-color);
 }
 .bs-at-button--tab:disabled,
 .bs-at-button--tab:disabled:focus,
@@ -1435,29 +1680,29 @@ table {
 .bs-at-button--tab[aria-disabled='true'],
 .bs-at-button--tab[aria-disabled='true']:focus,
 .bs-at-button--tab[aria-disabled='true']:hover {
-  background-color: var(--bscpn-button--tab-disabled-background-color);
-  border-color: var(--bscpn-button--tab-disabled-border-color);
-  box-shadow: var(--bscpn-button--tab-disabled-box-shadow);
-  color: var(--bscpn-button--tab-disabled-color);
+  background-color: var(--bscpn-at-button--tab-disabled-background-color);
+  border-color: var(--bscpn-at-button--tab-disabled-border-color);
+  box-shadow: var(--bscpn-at-button--tab-disabled-box-shadow);
+  color: var(--bscpn-at-button--tab-disabled-color);
 }
 :root,
 [data-theme='default'] {
-  --bscpn-button--tab-color: var(--bscpn-color-grayscale-dark-1);
-  --bscpn-button--tab-background-color: transparent;
-  --bscpn-button--tab-box-shadow: none;
-  --bscpn-button--tab-icon-color: var(--bscpn-color-grayscale-dark-2);
-  --bscpn-button--tab-hover-color: var(--bscpn-color-brand-1-dark-1);
-  --bscpn-button--tab-hover-background-color: transparent;
-  --bscpn-button--tab-hover-box-shadow: none;
-  --bscpn-button--tab-active-color: var(--bscpn-color-brand-1-dark-1);
-  --bscpn-button--tab-active-background-color: transparent;
-  --bscpn-button--tab-active-box-shadow: none;
-  --bscpn-button--tab-pressed-color: var(--bscpn-color-brand-1-dark-2);
-  --bscpn-button--tab-pressed-background-color: transparent;
-  --bscpn-button--tab-pressed-box-shadow: none;
-  --bscpn-button--tab-disabled-color: var(--bscpn-color-grayscale);
-  --bscpn-button--tab-disabled-background-color: transparent;
-  --bscpn-button--tab-disabled-box-shadow: none;
+  --bscpn-at-button--tab-color: var(--bscpn-color-grayscale-dark-1);
+  --bscpn-at-button--tab-background-color: transparent;
+  --bscpn-at-button--tab-box-shadow: none;
+  --bscpn-at-button--tab-icon-color: var(--bscpn-color-grayscale-dark-2);
+  --bscpn-at-button--tab-hover-color: var(--bscpn-color-brand-1-dark-1);
+  --bscpn-at-button--tab-hover-background-color: transparent;
+  --bscpn-at-button--tab-hover-box-shadow: none;
+  --bscpn-at-button--tab-active-color: var(--bscpn-color-brand-1-dark-1);
+  --bscpn-at-button--tab-active-background-color: transparent;
+  --bscpn-at-button--tab-active-box-shadow: none;
+  --bscpn-at-button--tab-pressed-color: var(--bscpn-color-brand-1-dark-2);
+  --bscpn-at-button--tab-pressed-background-color: transparent;
+  --bscpn-at-button--tab-pressed-box-shadow: none;
+  --bscpn-at-button--tab-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-at-button--tab-disabled-background-color: transparent;
+  --bscpn-at-button--tab-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
   --bscpn-button--tab-color: var(--bscpn-color-grayscale-light-2);
@@ -1478,25 +1723,25 @@ table {
 }
 .bs-at-button--danger:focus,
 .bs-at-button--danger:hover {
-  background-color: var(--bscpn-button--danger-hover-background-color);
-  border-color: var(--bscpn-button--danger-hover-border-color);
-  box-shadow: var(--bscpn-button--danger-hover-box-shadow);
-  color: var(--bscpn-button--danger-hover-color);
+  background-color: var(--bscpn-at-button--danger-hover-background-color);
+  border-color: var(--bscpn-at-button--danger-hover-border-color);
+  box-shadow: var(--bscpn-at-button--danger-hover-box-shadow);
+  color: var(--bscpn-at-button--danger-hover-color);
 }
 .bs-at-button--danger:active {
-  background-color: var(--bscpn-button--danger-active-background-color);
-  border-color: var(--bscpn-button--danger-active-border-color);
-  box-shadow: var(--bscpn-button--danger-active-box-shadow);
-  color: var(--bscpn-button--danger-active-color);
+  background-color: var(--bscpn-at-button--danger-active-background-color);
+  border-color: var(--bscpn-at-button--danger-active-border-color);
+  box-shadow: var(--bscpn-at-button--danger-active-box-shadow);
+  color: var(--bscpn-at-button--danger-active-color);
 }
 .bs-at-button--danger[aria-current],
 .bs-at-button--danger[aria-expanded='true'],
 .bs-at-button--danger[aria-pressed='true'],
 .bs-at-button--danger[aria-selected='true'] {
-  background-color: var(--bscpn-button--danger-pressed-background-color);
-  border-color: var(--bscpn-button--danger-pressed-border-color);
-  box-shadow: var(--bscpn-button--danger-pressed-box-shadow);
-  color: var(--bscpn-button--danger-pressed-color);
+  background-color: var(--bscpn-at-button--danger-pressed-background-color);
+  border-color: var(--bscpn-at-button--danger-pressed-border-color);
+  box-shadow: var(--bscpn-at-button--danger-pressed-box-shadow);
+  color: var(--bscpn-at-button--danger-pressed-color);
 }
 :root,
 [data-theme='default'] {
@@ -1522,14 +1767,14 @@ table {
   --bscpn-button--danger-pressed-box-shadow: none;
 }
 .bs-at-button {
-  --bscpn-button-padding-vertical: var(--bscpn-size-s2);
-  --bscpn-button-padding-horizontal: var(--bscpn-size-l1);
-  --bscpn-button-border-width: 0rem;
-  --bscpn-button-border-radius: var(--bscpn-size-s4);
-  --bscpn-button-min-height: 1em;
-  --bscpn-button-min-width: 0;
-  --bscpn-button-font-size: var(--bscpn-font-size-2);
-  --bscpn-button-font-weight: var(--bscpn-font-weight-semibold);
+  --bscpn-at-button-padding-vertical: var(--bscpn-size-s2);
+  --bscpn-at-button-padding-horizontal: var(--bscpn-size-l1);
+  --bscpn-at-button-border-width: 0rem;
+  --bscpn-at-button-border-radius: var(--bscpn-size-s4);
+  --bscpn-at-button-min-height: 1em;
+  --bscpn-at-button-min-width: 0;
+  --bscpn-at-button-font-size: var(--bscpn-font-size-2);
+  --bscpn-at-button-font-weight: 600;
 }
 .bs-at-button.bs-at-button--square {
   --bscpn-button-min-width: calc(
@@ -1542,11 +1787,11 @@ table {
   --bscpn-button-padding-vertical: var(--bscpn-size-s2);
 }
 .bs-at-button--small {
-  --bscpn-button-padding-vertical: var(--bscpn-size-s4);
-  --bscpn-button-padding-horizontal: var(--bscpn-size-m);
-  --bscpn-button-min-height: var(--bscpn-size-l1);
-  --bscpn-button-min-width: var(--bscpn-size-l2);
-  --bscpn-button-font-weight: var(--bscpn-font-weight-medium);
+  --bscpn-at-button-padding-vertical: var(--bscpn-size-s4);
+  --bscpn-at-button-padding-horizontal: var(--bscpn-size-m);
+  --bscpn-at-button-min-height: var(--bscpn-size-l1);
+  --bscpn-at-button-min-width: var(--bscpn-size-l2);
+  --bscpn-at-button-font-weight: 500;
 }
 .bs-at-button--small.bs-at-button--square {
   --bscpn-button-min-width: calc(
@@ -1559,9 +1804,9 @@ table {
   --bscpn-button-padding-vertical: var(--bscpn-size-s4);
 }
 .bs-at-button--x-small {
-  --bscpn-button-padding-vertical: var(--bscpn-size-s6);
-  --bscpn-button-padding-horizontal: var(--bscpn-size-s2);
-  --bscpn-button-font-weight: var(--bscpn-font-weight-medium);
+  --bscpn-at-button-padding-vertical: var(--bscpn-size-s6);
+  --bscpn-at-button-padding-horizontal: var(--bscpn-size-s2);
+  --bscpn-at-button-font-weight: 500;
 }
 .bs-at-button--x-small.bs-at-button--square {
   --bscpn-button-min-width: calc(
@@ -2228,30 +2473,35 @@ table {
   padding-right: var(--bscpn-size-s3);
 }
 .bs-or-joined-ui {
+  align-items: stretch;
   border-radius: 10rem;
   box-shadow: none;
+  display: inline-flex;
+}
+.bs-or-joined-ui > * {
+  display: flex;
 }
 .bs-or-joined-ui > .bs-at-button:first-child,
 .bs-or-joined-ui > :first-child .bs-at-button {
-  --bscpn-button-box-shadow: none;
-  --bscpn-button-border-top-right-radius: 0;
-  --bscpn-button-border-bottom-right-radius: 0;
-  margin-right: calc(var(--bscpn-button-border-width) * -1);
+  --bscpn-at-button-box-shadow: none;
+  --bscpn-at-button-border-top-right-radius: 0;
+  --bscpn-at-button-border-bottom-right-radius: 0;
+  margin-right: calc(var(--bscpn-at-button-border-width) * -1);
 }
 .bs-or-joined-ui > .bs-at-button:last-child,
 .bs-or-joined-ui > :last-child .bs-at-button {
-  --bscpn-button-box-shadow: none;
-  --bscpn-button-border-top-left-radius: 0;
-  --bscpn-button-border-bottom-left-radius: 0;
+  --bscpn-at-button-box-shadow: none;
+  --bscpn-at-button-border-top-left-radius: 0;
+  --bscpn-at-button-border-bottom-left-radius: 0;
   margin-right: 0;
 }
 .bs-or-joined-ui > .bs-at-button:not(:first-child):not(:last-child),
 .bs-or-joined-ui > :not(:first-child):not(:last-child) .bs-at-button {
-  --bscpn-button-border-top-left-radius: 0;
-  --bscpn-button-border-top-right-radius: 0;
-  --bscpn-button-border-bottom-right-radius: 0;
-  --bscpn-button-border-bottom-left-radius: 0;
-  margin-right: calc(var(--bscpn-button-border-width) * -1);
+  --bscpn-at-button-border-top-left-radius: 0;
+  --bscpn-at-button-border-top-right-radius: 0;
+  --bscpn-at-button-border-bottom-right-radius: 0;
+  --bscpn-at-button-border-bottom-left-radius: 0;
+  margin-right: calc(var(--bscpn-at-button-border-width) * -1);
 }
 .bs-aspect-ratio-10-10 {
   aspect-ratio: 1/1;
diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css
index 3cd61aed2..d34322747 100644
--- a/test/scss/fixtures/bitstyles.css
+++ b/test/scss/fixtures/bitstyles.css
@@ -668,9 +668,15 @@ legend {
   padding: 0;
 }
 label {
+  align-items: baseline;
   cursor: pointer;
-  display: block;
-  margin-bottom: 0;
+  display: flex;
+  font-weight: 500;
+  gap: var(--bs-size-s7);
+  margin-bottom: var(--bs-size-s7);
+}
+label[aria-disabled='true'] {
+  color: var(--bs-color-grayscale-base);
 }
 [type='color'] {
   height: calc(var(--bs-line-height-4) * 1em + var(--bs-size-s2));
@@ -691,13 +697,13 @@ img {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  display: inline-block;
   flex-shrink: 0;
-  font-size: var(--bs-size-m);
+  font-size: var(--bs-size-l2);
   height: 1em;
-  margin-right: var(--bs-size-s4);
+  margin: var(--bs-size-s4);
+  outline-offset: 0;
   position: relative;
-  vertical-align: middle;
+  top: calc(var(--bs-size-s4) / 2);
   width: 1em;
 }
 @supports (
@@ -705,16 +711,29 @@ img {
 ) {
   [type='checkbox'] {
     background-color: var(--bs-color-grayscale-white);
-    border: var(--bs-size-s7) solid var(--bs-color-grayscale);
+    border: 0.1875rem solid var(--bs-color-grayscale-dark-2);
     border-radius: var(--bs-size-s6);
-    color: var(--bs-color-grayscale);
+    box-shadow: none;
+    color: var(--bs-color-grayscale-base);
   }
   [type='checkbox']:focus,
   [type='checkbox']:hover {
     background-color: var(--bs-color-grayscale-white);
     border-color: var(--bs-color-brand-1);
+    box-shadow: none;
     color: var(--bs-color-brand-1);
-    outline: none;
+    outline-width: 0;
+  }
+  [type='checkbox']:focus-visible {
+    outline: var(--bs-color-brand-2) solid
+      calc(var(--bs-size-s7) + var(--bs-size-s7) / 2);
+    outline-offset: var(--bs-size-s7);
+  }
+  [type='checkbox']:active {
+    background-color: var(--bs-color-grayscale-white);
+    border-color: var(--bs-color-brand-1-dark-1);
+    box-shadow: none;
+    color: var(--bs-color-brand-1-dark-1);
   }
   [type='checkbox']:after {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M83.07 11.71 38.66 56.3 16.93 34.49 1 50.48l37.65 37.81L99 27.7z'/%3E%3C/svg%3E");
@@ -730,28 +749,57 @@ img {
         var(--bs-transition-default-duration)
         var(--bs-transition-default-easing),
       transform calc(var(--bs-transition-default-duration) / 2)
+        var(--bs-transition-default-duration)
+        var(--bs-transition-default-easing),
+      outline-offset calc(var(--bs-transition-default-duration) / 2)
         var(--bs-transition-default-duration)
         var(--bs-transition-default-easing);
     width: 100%;
   }
   [type='checkbox']:checked {
-    background-color: var(--bs-color-brand-1);
-    border-color: var(--bs-color-brand-1);
+    background-color: var(--bs-color-brand-1-dark-1);
+    border-color: var(--bs-color-brand-1-dark-1);
+    box-shadow: var(--bs-shadow-brand-1);
     color: var(--bs-color-grayscale-white);
   }
   [type='checkbox']:checked:after {
     opacity: 1;
     transform: scale(1);
   }
+  [type='checkbox']:invalid,
+  [type='checkbox'][aria-invalid='true'] {
+    background-color: var(--bs-color-brand-1);
+    border-color: var(--bs-color-brand-1);
+    box-shadow: none;
+    color: var(--bs-color-grayscale-white);
+  }
   [type='checkbox'][disabled] {
-    background-color: var(--bs-color-grayscale-light-2);
-    border-color: var(--bs-color-grayscale-light-2);
+    background-color: var(--bs-color-grayscale-white);
+    border-color: var(--bs-color-grayscale-light-1);
+    box-shadow: none;
     color: var(--bs-color-grayscale-light-2);
   }
   [type='checkbox'][disabled]:checked {
-    background-color: var(--bs-color-grayscale-light-2);
+    background-color: var(--bs-color-grayscale-light-1);
     border-color: var(--bs-color-grayscale-light-1);
-    color: var(--bs-color-grayscale-light-1);
+    box-shadow: none;
+    color: var(--bs-color-grayscale-white);
+  }
+  [type='checkbox']:checked:focus:not(:invalid),
+  [type='checkbox']:checked:focus:not([aria-invalid='true']),
+  [type='checkbox']:checked:hover:not(:invalid),
+  [type='checkbox']:checked:hover:not([aria-invalid='true']) {
+    background-color: var(--bs-color-brand-1);
+    border-color: var(--bs-color-brand-1);
+    box-shadow: none;
+    color: var(--bs-color-grayscale-white);
+  }
+  [type='checkbox']:checked:active:not(:invalid),
+  [type='checkbox']:checked:active:not([aria-invalid='true']) {
+    background-color: var(--bs-color-brand-1);
+    border-color: var(--bs-color-brand-1-dark-1);
+    box-shadow: none;
+    color: var(--bs-color-grayscale-white);
   }
 }
 [type='radio'] {
@@ -759,13 +807,13 @@ img {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  display: inline-block;
   flex-shrink: 0;
-  font-size: var(--bs-size-m);
+  font-size: var(--bs-size-l2);
   height: 1em;
-  margin-right: var(--bs-size-s4);
+  margin: var(--bs-size-s4);
+  outline-offset: 0;
   position: relative;
-  vertical-align: middle;
+  top: calc(var(--bs-size-s4) / 2);
   width: 1em;
 }
 @supports (
@@ -773,12 +821,13 @@ img {
 ) {
   [type='radio'] {
     background-color: var(--bs-color-grayscale-white);
-    border: var(--bs-size-s7) solid var(--bs-color-grayscale);
+    border: 0.1875rem solid var(--bs-color-grayscale);
     border-radius: 9999rem;
+    box-shadow: none;
     color: var(--bs-color-grayscale-light-1);
   }
   [type='radio']:after {
-    background: var(--bs-color-brand-1);
+    background: var(--bs-color-brand-1-dark-1);
     border-radius: 9999rem;
     content: '';
     display: block;
@@ -788,6 +837,8 @@ img {
     transition: opacity var(--bs-transition-default-duration)
         var(--bs-transition-default-easing),
       transform var(--bs-transition-default-duration)
+        var(--bs-transition-default-easing),
+      outline-offset var(--bs-transition-default-duration)
         var(--bs-transition-default-easing);
     width: 100%;
   }
@@ -795,53 +846,97 @@ img {
   [type='radio']:hover {
     background-color: var(--bs-color-grayscale-white);
     border-color: var(--bs-color-brand-1);
+    box-shadow: none;
     color: var(--bs-color-brand-1);
-    outline: none;
+    outline-width: 0;
   }
-  [type='radio']:checked {
+  [type='radio']:focus-visible {
+    outline: var(--bs-color-brand-2) solid
+      calc(var(--bs-size-s7) + var(--bs-size-s7) / 2);
+    outline-offset: var(--bs-size-s7);
+  }
+  [type='radio']:active {
     background-color: var(--bs-color-grayscale-white);
-    border-color: var(--bs-color-brand-1);
+    border-color: var(--bs-color-brand-1-dark-1);
+    box-shadow: none;
     color: var(--bs-color-brand-1);
   }
+  [type='radio']:checked {
+    background-color: var(--bs-color-grayscale-white);
+    border-color: var(--bs-color-brand-1-dark-1);
+    box-shadow: var(--bs-shadow-brand-1);
+    color: var(--bs-color-brand-1-dark-1);
+  }
   [type='radio']:checked:after {
     opacity: 1;
     transform: scale(0.7);
   }
+  [type='radio']:invalid,
+  [type='radio'][aria-invalid='true'] {
+    background-color: var(--bs-color-grayscale-white);
+    border-color: var(--bs-color-warning-dark-1);
+    box-shadow: none;
+    color: var(--bs-color-warning-dark-4);
+  }
   [type='radio'][disabled] {
-    background-color: var(--bs-color-grayscale-light-2);
+    background-color: var(--bs-color-grayscale-white);
     border-color: var(--bs-color-grayscale-light-1);
+    box-shadow: none;
     color: var(--bs-color-grayscale-light-1);
   }
   [type='radio'][disabled]:checked {
-    background-color: var(--bs-color-grayscale-light-2);
+    background-color: var(--bs-color-grayscale-white);
     border-color: var(--bs-color-grayscale-light-1);
+    box-shadow: none;
     color: var(--bs-color-grayscale-light-1);
   }
   [type='radio'][disabled]:after {
     background: var(--bs-color-grayscale-light-1);
   }
+  [type='radio']:focus:not(:focus-visible) {
+    outline-width: 0;
+  }
+  [type='radio']:checked:focus:not(:invalid),
+  [type='radio']:checked:focus:not([aria-invalid='true']),
+  [type='radio']:checked:hover:not(:invalid),
+  [type='radio']:checked:hover:not([aria-invalid='true']) {
+    background-color: var(--bs-color-grayscale-white);
+    border-color: var(--bs-color-brand-1);
+    box-shadow: none;
+    color: var(--bs-color-brand-1);
+  }
+  [type='radio']:checked:active:not(:invalid),
+  [type='radio']:checked:active:not([aria-invalid='true']) {
+    background-color: var(--bs-color-grayscale-white);
+    border-color: var(--bs-color-brand-1);
+    box-shadow: none;
+    color: var(--bs-color-brand-1);
+  }
 }
 input,
 textarea {
+  outline-offset: 0;
   resize: vertical;
   transition: color var(--bs-transition-default-duration)
       var(--bs-transition-default-easing),
     background-color var(--bs-transition-default-duration)
       var(--bs-transition-default-easing),
     border var(--bs-transition-default-duration)
+      var(--bs-transition-default-easing),
+    outline-offset var(--bs-transition-default-duration)
       var(--bs-transition-default-easing);
 }
 input::-moz-placeholder,
 textarea::-moz-placeholder {
-  color: var(--bs-color-grayscale-light-1);
-  font-style: italic;
+  color: var(--bs-color-grayscale);
+  font-style: normal;
   font-weight: var(--bs-font-weight-normal);
   opacity: 1;
 }
 input::placeholder,
 textarea::placeholder {
-  color: var(--bs-color-grayscale-light-1);
-  font-style: italic;
+  color: var(--bs-color-grayscale);
+  font-style: normal;
   font-weight: var(--bs-font-weight-normal);
   opacity: 1;
 }
@@ -858,86 +953,200 @@ textarea::placeholder {
 [type='url'],
 [type='week'],
 textarea {
+  --bs-input-text-border-top-right-radius: var(--bs-size-s4);
+  --bs-input-text-border-bottom-right-radius: var(--bs-size-s4);
+  --bs-input-text-border-bottom-left-radius: var(--bs-size-s4);
+  --bs-input-text-border-top-left-radius: var(--bs-size-s4);
+  --bs-input-text-padding-vertical: var(--bs-size-s2);
+  --bs-input-text-padding-horizontal: var(--bs-size-m);
+  --bs-input-text-border-width: 0.1875rem;
   background-color: var(--bs-color-grayscale-white);
-  border: var(--bs-size-s7) solid var(--bs-color-grayscale);
-  border-radius: var(--bs-size-s5);
-  box-shadow: 0 0 calc(var(--bs-size-s5) / 4)
-      rgba(var(--bs-color-grayscale-light-1-rgb), 0.025),
-    0 0 calc(var(--bs-size-s5) / 3)
-      rgba(var(--bs-color-grayscale-light-1-rgb), 0.025),
-    0 0 calc(var(--bs-size-s5) / 2)
-      rgba(var(--bs-color-grayscale-light-1-rgb), 0.025),
-    0 0 calc(var(--bs-size-s5) / 1)
-      rgba(var(--bs-color-grayscale-light-1-rgb), 0.025);
-  color: var(--bs-color-grayscale);
-  display: block;
+  border: 0.1875rem solid var(--bs-color-grayscale-dark-1);
+  border-radius: var(--bs-input-text-border-top-left-radius)
+    var(--bs-input-text-border-top-right-radius)
+    var(--bs-input-text-border-bottom-right-radius)
+    var(--bs-input-text-border-bottom-left-radius);
+  box-shadow: none;
+  color: var(--bs-color-grayscale-dark-4);
+  display: flex;
+  flex-grow: 1;
   font: inherit;
-  padding: var(--bs-size-s5) var(--bs-size-s5);
-  width: 100%;
+  padding: calc(
+      var(--bs-input-text-padding-vertical) -
+        var(--bs-input-text-border-width, 0rem)
+    )
+    calc(
+      var(--bs-input-text-padding-horizontal) -
+        var(--bs-input-text-border-width, 0rem)
+    );
 }
+[type='date']:focus,
 [type='date']:hover,
+[type='datetime-local']:focus,
 [type='datetime-local']:hover,
+[type='email']:focus,
 [type='email']:hover,
+[type='month']:focus,
 [type='month']:hover,
+[type='number']:focus,
 [type='number']:hover,
+[type='password']:focus,
 [type='password']:hover,
+[type='search']:focus,
 [type='search']:hover,
+[type='tel']:focus,
 [type='tel']:hover,
+[type='text']:focus,
 [type='text']:hover,
+[type='time']:focus,
 [type='time']:hover,
+[type='url']:focus,
 [type='url']:hover,
+[type='week']:focus,
 [type='week']:hover,
+textarea:focus,
 textarea:hover {
-  background-color: var(--bs-color-grayscale);
-  border-color: var(--bs-color-grayscale-dark-1);
-  box-shadow: 0 0 calc(var(--bs-size-s2) / 4)
-      rgba(var(--bs-color-brand-1-light-1-rgb), 0.025),
-    0 0 calc(var(--bs-size-s2) / 3)
-      rgba(var(--bs-color-brand-1-light-1-rgb), 0.025),
-    0 0 calc(var(--bs-size-s2) / 2)
-      rgba(var(--bs-color-brand-1-light-1-rgb), 0.025),
-    0 0 calc(var(--bs-size-s2) / 1)
-      rgba(var(--bs-color-brand-1-light-1-rgb), 0.025);
+  background-color: var(--bs-color-grayscale-white);
+  border-color: var(--bs-color-grayscale-dark-2);
+  box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
+      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bs-size-s4) / 3)
+      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bs-size-s4) / 2)
+      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bs-size-s4) / 1)
+      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075);
+  color: var(--bs-color-grayscale-dark-4);
+}
+[type='date']:focus::-moz-placeholder,
+[type='date']:hover::-moz-placeholder,
+[type='datetime-local']:focus::-moz-placeholder,
+[type='datetime-local']:hover::-moz-placeholder,
+[type='email']:focus::-moz-placeholder,
+[type='email']:hover::-moz-placeholder,
+[type='month']:focus::-moz-placeholder,
+[type='month']:hover::-moz-placeholder,
+[type='number']:focus::-moz-placeholder,
+[type='number']:hover::-moz-placeholder,
+[type='password']:focus::-moz-placeholder,
+[type='password']:hover::-moz-placeholder,
+[type='search']:focus::-moz-placeholder,
+[type='search']:hover::-moz-placeholder,
+[type='tel']:focus::-moz-placeholder,
+[type='tel']:hover::-moz-placeholder,
+[type='text']:focus::-moz-placeholder,
+[type='text']:hover::-moz-placeholder,
+[type='time']:focus::-moz-placeholder,
+[type='time']:hover::-moz-placeholder,
+[type='url']:focus::-moz-placeholder,
+[type='url']:hover::-moz-placeholder,
+[type='week']:focus::-moz-placeholder,
+[type='week']:hover::-moz-placeholder,
+textarea:focus::-moz-placeholder,
+textarea:hover::-moz-placeholder {
   color: var(--bs-color-grayscale-dark-1);
 }
+[type='date']:focus::placeholder,
+[type='date']:hover::placeholder,
+[type='datetime-local']:focus::placeholder,
+[type='datetime-local']:hover::placeholder,
+[type='email']:focus::placeholder,
+[type='email']:hover::placeholder,
+[type='month']:focus::placeholder,
+[type='month']:hover::placeholder,
+[type='number']:focus::placeholder,
+[type='number']:hover::placeholder,
+[type='password']:focus::placeholder,
+[type='password']:hover::placeholder,
+[type='search']:focus::placeholder,
+[type='search']:hover::placeholder,
+[type='tel']:focus::placeholder,
+[type='tel']:hover::placeholder,
+[type='text']:focus::placeholder,
+[type='text']:hover::placeholder,
+[type='time']:focus::placeholder,
+[type='time']:hover::placeholder,
+[type='url']:focus::placeholder,
+[type='url']:hover::placeholder,
+[type='week']:focus::placeholder,
+[type='week']:hover::placeholder,
+textarea:focus::placeholder,
+textarea:hover::placeholder {
+  color: var(--bs-color-grayscale-dark-1);
+}
+[type='date']:focus-visible,
+[type='datetime-local']:focus-visible,
+[type='email']:focus-visible,
+[type='month']:focus-visible,
+[type='number']:focus-visible,
+[type='password']:focus-visible,
+[type='search']:focus-visible,
+[type='tel']:focus-visible,
+[type='text']:focus-visible,
+[type='time']:focus-visible,
+[type='url']:focus-visible,
+[type='week']:focus-visible,
+textarea:focus-visible {
+  outline: var(--bs-color-brand-2) solid
+    calc(var(--bs-size-s7) + var(--bs-size-s7) / 2);
+  outline-offset: var(--bs-size-s7);
+  z-index: 3;
+}
 [type='date']:active,
-[type='date']:focus,
 [type='datetime-local']:active,
-[type='datetime-local']:focus,
 [type='email']:active,
-[type='email']:focus,
 [type='month']:active,
-[type='month']:focus,
 [type='number']:active,
-[type='number']:focus,
 [type='password']:active,
-[type='password']:focus,
 [type='search']:active,
-[type='search']:focus,
 [type='tel']:active,
-[type='tel']:focus,
 [type='text']:active,
-[type='text']:focus,
 [type='time']:active,
-[type='time']:focus,
 [type='url']:active,
-[type='url']:focus,
 [type='week']:active,
-[type='week']:focus,
-textarea:active,
-textarea:focus {
+textarea:active {
   background-color: var(--bs-color-grayscale-white);
-  border-color: var(--bs-color-grayscale-dark-1);
-  box-shadow: 0 0 calc(var(--bs-size-s6) / 4)
-      rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
-    0 0 calc(var(--bs-size-s6) / 3)
-      rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
-    0 0 calc(var(--bs-size-s6) / 2)
-      rgba(var(--bs-color-brand-1-light-1-rgb), 0.075),
-    0 0 calc(var(--bs-size-s6) / 1)
-      rgba(var(--bs-color-brand-1-light-1-rgb), 0.075);
-  color: var(--bs-color-grayscale-dark-1);
-  outline: none;
+  border-color: var(--bs-color-brand-1-dark-1);
+  box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
+      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bs-size-s4) / 3)
+      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bs-size-s4) / 2)
+      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
+    0 0 calc(var(--bs-size-s4) / 1)
+      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075);
+  color: var(--bs-color-grayscale-dark-4);
+  outline-width: 0;
+}
+[type='date']:active::-moz-placeholder,
+[type='datetime-local']:active::-moz-placeholder,
+[type='email']:active::-moz-placeholder,
+[type='month']:active::-moz-placeholder,
+[type='number']:active::-moz-placeholder,
+[type='password']:active::-moz-placeholder,
+[type='search']:active::-moz-placeholder,
+[type='tel']:active::-moz-placeholder,
+[type='text']:active::-moz-placeholder,
+[type='time']:active::-moz-placeholder,
+[type='url']:active::-moz-placeholder,
+[type='week']:active::-moz-placeholder,
+textarea:active::-moz-placeholder {
+  color: var(--bs-color-brand-1);
+}
+[type='date']:active::placeholder,
+[type='datetime-local']:active::placeholder,
+[type='email']:active::placeholder,
+[type='month']:active::placeholder,
+[type='number']:active::placeholder,
+[type='password']:active::placeholder,
+[type='search']:active::placeholder,
+[type='tel']:active::placeholder,
+[type='text']:active::placeholder,
+[type='time']:active::placeholder,
+[type='url']:active::placeholder,
+[type='week']:active::placeholder,
+textarea:active::placeholder {
+  color: var(--bs-color-brand-1);
 }
 [type='date']:invalid,
 [type='date'][aria-invalid='true'],
@@ -966,13 +1175,65 @@ textarea:focus {
 textarea:invalid,
 textarea[aria-invalid='true'] {
   background-color: var(--bs-color-grayscale-white);
-  border-color: var(--bs-color-warning);
-  box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
-      rgba(var(--bs-color-warning-rgb), 0.05),
-    0 0 calc(var(--bs-size-s4) / 3) rgba(var(--bs-color-warning-rgb), 0.05),
-    0 0 calc(var(--bs-size-s4) / 2) rgba(var(--bs-color-warning-rgb), 0.05),
-    0 0 calc(var(--bs-size-s4) / 1) rgba(var(--bs-color-warning-rgb), 0.05);
-  color: var(--bs-color-warning);
+  border-color: var(--bs-color-warning-dark-1);
+  box-shadow: none;
+  color: var(--bs-color-warning-dark-4);
+}
+[type='date']:invalid::-moz-placeholder,
+[type='date'][aria-invalid='true']::-moz-placeholder,
+[type='datetime-local']:invalid::-moz-placeholder,
+[type='datetime-local'][aria-invalid='true']::-moz-placeholder,
+[type='email']:invalid::-moz-placeholder,
+[type='email'][aria-invalid='true']::-moz-placeholder,
+[type='month']:invalid::-moz-placeholder,
+[type='month'][aria-invalid='true']::-moz-placeholder,
+[type='number']:invalid::-moz-placeholder,
+[type='number'][aria-invalid='true']::-moz-placeholder,
+[type='password']:invalid::-moz-placeholder,
+[type='password'][aria-invalid='true']::-moz-placeholder,
+[type='search']:invalid::-moz-placeholder,
+[type='search'][aria-invalid='true']::-moz-placeholder,
+[type='tel']:invalid::-moz-placeholder,
+[type='tel'][aria-invalid='true']::-moz-placeholder,
+[type='text']:invalid::-moz-placeholder,
+[type='text'][aria-invalid='true']::-moz-placeholder,
+[type='time']:invalid::-moz-placeholder,
+[type='time'][aria-invalid='true']::-moz-placeholder,
+[type='url']:invalid::-moz-placeholder,
+[type='url'][aria-invalid='true']::-moz-placeholder,
+[type='week']:invalid::-moz-placeholder,
+[type='week'][aria-invalid='true']::-moz-placeholder,
+textarea:invalid::-moz-placeholder,
+textarea[aria-invalid='true']::-moz-placeholder {
+  color: var(--bs-color-brand-1-light-1);
+}
+[type='date']:invalid::placeholder,
+[type='date'][aria-invalid='true']::placeholder,
+[type='datetime-local']:invalid::placeholder,
+[type='datetime-local'][aria-invalid='true']::placeholder,
+[type='email']:invalid::placeholder,
+[type='email'][aria-invalid='true']::placeholder,
+[type='month']:invalid::placeholder,
+[type='month'][aria-invalid='true']::placeholder,
+[type='number']:invalid::placeholder,
+[type='number'][aria-invalid='true']::placeholder,
+[type='password']:invalid::placeholder,
+[type='password'][aria-invalid='true']::placeholder,
+[type='search']:invalid::placeholder,
+[type='search'][aria-invalid='true']::placeholder,
+[type='tel']:invalid::placeholder,
+[type='tel'][aria-invalid='true']::placeholder,
+[type='text']:invalid::placeholder,
+[type='text'][aria-invalid='true']::placeholder,
+[type='time']:invalid::placeholder,
+[type='time'][aria-invalid='true']::placeholder,
+[type='url']:invalid::placeholder,
+[type='url'][aria-invalid='true']::placeholder,
+[type='week']:invalid::placeholder,
+[type='week'][aria-invalid='true']::placeholder,
+textarea:invalid::placeholder,
+textarea[aria-invalid='true']::placeholder {
+  color: var(--bs-color-brand-1-light-1);
 }
 [type='date']:disabled,
 [type='datetime-local']:disabled,
@@ -987,16 +1248,68 @@ textarea[aria-invalid='true'] {
 [type='url']:disabled,
 [type='week']:disabled,
 textarea:disabled {
-  background: var(--bs-color-grayscale-light-2);
-  border-color: var(--bs-color-grayscale-light-2);
+  background: var(--bs-color-grayscale-light-4);
+  border-color: var(--bs-color-grayscale-light-1);
   box-shadow: none;
   color: var(--bs-color-grayscale);
   cursor: default;
 }
+[type='date']:disabled::-moz-placeholder,
+[type='datetime-local']:disabled::-moz-placeholder,
+[type='email']:disabled::-moz-placeholder,
+[type='month']:disabled::-moz-placeholder,
+[type='number']:disabled::-moz-placeholder,
+[type='password']:disabled::-moz-placeholder,
+[type='search']:disabled::-moz-placeholder,
+[type='tel']:disabled::-moz-placeholder,
+[type='text']:disabled::-moz-placeholder,
+[type='time']:disabled::-moz-placeholder,
+[type='url']:disabled::-moz-placeholder,
+[type='week']:disabled::-moz-placeholder,
+textarea:disabled::-moz-placeholder {
+  color: var(--bs-color-grayscale-light-1);
+}
+[type='date']:disabled::placeholder,
+[type='datetime-local']:disabled::placeholder,
+[type='email']:disabled::placeholder,
+[type='month']:disabled::placeholder,
+[type='number']:disabled::placeholder,
+[type='password']:disabled::placeholder,
+[type='search']:disabled::placeholder,
+[type='tel']:disabled::placeholder,
+[type='text']:disabled::placeholder,
+[type='time']:disabled::placeholder,
+[type='url']:disabled::placeholder,
+[type='week']:disabled::placeholder,
+textarea:disabled::placeholder {
+  color: var(--bs-color-grayscale-light-1);
+}
+[type='date']:focus:not(:focus-visible),
+[type='datetime-local']:focus:not(:focus-visible),
+[type='email']:focus:not(:focus-visible),
+[type='month']:focus:not(:focus-visible),
+[type='number']:focus:not(:focus-visible),
+[type='password']:focus:not(:focus-visible),
+[type='search']:focus:not(:focus-visible),
+[type='tel']:focus:not(:focus-visible),
+[type='text']:focus:not(:focus-visible),
+[type='time']:focus:not(:focus-visible),
+[type='url']:focus:not(:focus-visible),
+[type='week']:focus:not(:focus-visible),
+textarea:focus:not(:focus-visible) {
+  outline-width: 0;
+}
 @supports (
   (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)
 ) {
   select {
+    --bs-select-padding-vertical: var(--bs-size-s2);
+    --bs-select-padding-horizontal: var(--bs-size-l1);
+    --bs-select-border-width: 0.1875rem;
+    --bs-select-border-top-right-radius: var(--bs-size-s4);
+    --bs-select-border-bottom-right-radius: var(--bs-size-s4);
+    --bs-select-border-bottom-left-radius: var(--bs-size-s4);
+    --bs-select-border-top-left-radius: var(--bs-size-s4);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -1005,15 +1318,26 @@ textarea:disabled {
     background-position: right 0.75em top 50%;
     background-repeat: no-repeat;
     background-size: 1em;
-    border: var(--bs-size-s7) solid var(--bs-color-grayscale);
-    border-radius: var(--bs-size-s5);
-    color: var(--bs-color-grayscale);
+    border: 0.1875rem solid var(--bs-color-grayscale-dark-1);
+    border-radius: var(--bs-select-border-top-left-radius)
+      var(--bs-select-border-top-right-radius)
+      var(--bs-select-border-bottom-right-radius)
+      var(--bs-select-border-bottom-left-radius);
+    box-shadow: none;
+    color: var(--bs-color-grayscale-dark-1);
     cursor: pointer;
-    display: block;
+    display: flex;
     font: inherit;
+    font-weight: var(--bs-font-weight-bold);
+    outline-offset: 0;
     overflow: hidden;
-    padding: var(--bs-size-s5) calc(var(--bs-size-s1) * 2) var(--bs-size-s5)
-      var(--bs-size-s1);
+    padding: calc(
+        var(--bs-select-padding-vertical) - var(--bs-select-border-width, 0rem)
+      )
+      calc(
+        var(--bs-select-padding-horizontal) -
+          var(--bs-select-border-width, 0rem)
+      );
     text-overflow: ellipsis;
     transition: color var(--bs-transition-default-duration)
         var(--bs-transition-default-easing),
@@ -1021,38 +1345,50 @@ textarea:disabled {
         var(--bs-transition-default-easing),
       border var(--bs-transition-default-duration)
         var(--bs-transition-default-easing);
-    width: 100%;
   }
   select::-ms-expand {
     display: none;
   }
+  select:focus,
   select:hover {
-    background-color: var(--bs-color-grayscale);
+    background-color: var(--bs-color-brand-1-light-4);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-grayscale-dark-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bs-color-grayscale);
+    border-color: var(--bs-color-grayscale-dark-1);
+    box-shadow: none;
     color: var(--bs-color-grayscale-dark-1);
   }
-  select:active,
-  select:focus {
-    background-color: transparent;
+  select:focus-visible {
+    outline: var(--bs-color-brand-2) solid
+      calc(var(--bs-size-s7) + var(--bs-size-s7) / 2);
+    outline-offset: var(--bs-size-s7);
+  }
+  select:active {
+    background-color: var(--bs-color-grayscale-white);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bs-color-grayscale-dark-1);
-    color: var(--bs-color-grayscale-dark-1);
+    border-color: var(--bs-color-brand-1-dark-1);
+    box-shadow: var(--bs-shadow-brand-1);
+    color: var(--bs-color-brand-1-dark-1);
     outline: none;
   }
-  select:invalid {
+  select:invalid,
+  select[aria-invalid='true'] {
     background-color: var(--bs-color-grayscale-white);
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-warning)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-warning-base)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
     border-color: var(--bs-color-warning);
+    box-shadow: none;
     color: var(--bs-color-warning);
   }
   select[disabled] {
-    background-color: var(--bs-color-grayscale-light-2);
+    background-color: var(--bs-color-grayscale-light-3);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bs-color-grayscale-light-2);
+    border-color: var(--bs-color-grayscale);
+    box-shadow: none;
     color: var(--bs-color-grayscale);
     cursor: default;
   }
+  select:focus:not(:focus-visible) {
+    outline-width: 0;
+  }
 }
 :root,
 [data-theme] {
@@ -1293,19 +1629,24 @@ table {
   --bs-button-justify-content: center;
   align-items: center;
   -webkit-appearance: none;
+  background-color: var(--bs-button-background-color);
+  border-color: var(--bs-button-border-color);
   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-button-border-width);
+  box-shadow: var(--bs-button-box-shadow);
+  color: var(--bs-button-color);
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
   font-family: inherit;
-  font-size: var(--bs-button-font-size);
-  font-weight: var(--bs-button-font-weight);
+  font-size: var(--bs-button-font-size, inherit);
+  font-weight: var(--bs-button-font-weight, inherit);
   justify-content: var(--bs-button-justify-content);
+  line-height: var(--bs-button-line-height, inherit);
   margin: 0;
   max-width: 100%;
   min-height: var(--bs-button-min-height);
@@ -1330,6 +1671,19 @@ table {
 }
 .a-button:focus,
 .a-button:hover {
+  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);
+  outline-width: 0;
+  text-decoration: none;
+  z-index: 1;
+}
+.a-button:active {
+  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);
   outline-width: 0;
   text-decoration: none;
   z-index: 1;
@@ -1344,6 +1698,10 @@ table {
 .a-button[aria-expanded='true'],
 .a-button[aria-pressed='true'],
 .a-button[aria-selected='true'] {
+  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);
   z-index: 2;
 }
 .a-button:disabled,
@@ -1352,6 +1710,10 @@ table {
 .a-button[aria-disabled='true'],
 .a-button[aria-disabled='true']:focus,
 .a-button[aria-disabled='true']:hover {
+  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);
   cursor: not-allowed;
 }
 .a-button__avatar,
@@ -1366,32 +1728,42 @@ table {
 }
 .a-button,
 .a-button:visited {
-  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);
+  --bs-button-color: var(--bs-button--primary-color);
+  --bs-button-background-color: var(--bs-button--primary-background-color);
+  --bs-button-border-color: var(--bs-button--primary-border-color);
+  --bs-button-box-shadow: var(--bs-button--primary-box-shadow);
 }
 .a-button:focus,
 .a-button:hover {
-  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);
+  --bs-button-hover-color: var(--bs-button--primary-hover-color);
+  --bs-button-hover-background-color: var(
+    --bs-button--primary-hover-background-color
+  );
+  --bs-button-hover-border-color: var(--bs-button--primary-hover-border-color);
+  --bs-button-hover-box-shadow: var(--bs-button--primary-hover-box-shadow);
 }
 .a-button:active {
-  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);
+  --bs-button-active-color: var(--bs-button--primary-active-color);
+  --bs-button-active-background-color: var(
+    --bs-button--primary-active-background-color
+  );
+  --bs-button-active-border-color: var(
+    --bs-button--primary-active-border-color
+  );
+  --bs-button-active-box-shadow: var(--bs-button--primary-active-box-shadow);
 }
 .a-button[aria-current],
 .a-button[aria-expanded='true'],
 .a-button[aria-pressed='true'],
 .a-button[aria-selected='true'] {
-  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);
+  --bs-button-pressed-color: var(--bs-button--primary-pressed-color);
+  --bs-button-pressed-background-color: var(
+    --bs-button--primary-pressed-background-color
+  );
+  --bs-button-pressed-border-color: var(
+    --bs-button--primary-pressed-border-color
+  );
+  --bs-button-pressed-box-shadow: var(--bs-button--primary-pressed-box-shadow);
 }
 .a-button:disabled,
 .a-button:disabled:focus,
@@ -1399,122 +1771,152 @@ table {
 .a-button[aria-disabled='true'],
 .a-button[aria-disabled='true']:focus,
 .a-button[aria-disabled='true']:hover {
-  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);
+  --bs-button-disabled-color: var(--bs-button--primary-disabled-color);
+  --bs-button-disabled-background-color: var(
+    --bs-button--primary-disabled-background-color
+  );
+  --bs-button-disabled-border-color: var(
+    --bs-button--primary-disabled-border-color
+  );
+  --bs-button-disabled-box-shadow: var(
+    --bs-button--primary-disabled-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {
-  --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-hover-box-shadow: none;
-  --bs-button-active-color: var(--bs-color-grayscale-white);
-  --bs-button-active-background-color: var(--bs-color-brand-1-dark-1);
-  --bs-button-active-box-shadow: none;
-  --bs-button-pressed-color: var(--bs-color-grayscale-white);
-  --bs-button-pressed-background-color: var(--bs-color-brand-1-dark-2);
-  --bs-button-pressed-box-shadow: none;
-  --bs-button-disabled-color: var(--bs-color-grayscale);
-  --bs-button-disabled-background-color: var(--bs-color-grayscale-light-3);
-  --bs-button-disabled-box-shadow: none;
+  --bs-button--primary-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-background-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--primary-box-shadow: none;
+  --bs-button--primary-hover-color: var(--bs-color-brand-1-dark-2);
+  --bs-button--primary-hover-background-color: var(--bs-color-brand-1-light-2);
+  --bs-button--primary-hover-box-shadow: none;
+  --bs-button--primary-active-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-active-background-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--primary-active-box-shadow: none;
+  --bs-button--primary-pressed-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-pressed-background-color: var(--bs-color-brand-1-dark-2);
+  --bs-button--primary-pressed-box-shadow: none;
+  --bs-button--primary-disabled-color: var(--bs-color-grayscale);
+  --bs-button--primary-disabled-background-color: var(
+    --bs-color-grayscale-light-3
+  );
+  --bs-button--primary-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
-  --bs-button-color: var(--bs-color-brand-1);
-  --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-hover-box-shadow: none;
-  --bs-button-active-color: var(--bs-color-brand-1);
-  --bs-button-active-background-color: var(--bs-color-grayscale-light-2);
-  --bs-button-active-box-shadow: none;
-  --bs-button-pressed-color: var(--bs-color-grayscale-white);
-  --bs-button-pressed-background-color: var(--bs-color-brand-1);
-  --bs-button-pressed-box-shadow: none;
-  --bs-button-disabled-color: var(--bs-color-grayscale-light-1);
-  --bs-button-disabled-background-color: var(--bs-color-grayscale-dark-2);
-  --bs-button-disabled-box-shadow: none;
+  --bs-button--primary-color: var(--bs-color-brand-1);
+  --bs-button--primary-background-color: var(--bs-color-grayscale-light-2);
+  --bs-button--primary-box-shadow: none;
+  --bs-button--primary-hover-color: var(--bs-color-brand-1-dark-1);
+  --bs-button--primary-hover-background-color: var(--bs-color-brand-1-light-1);
+  --bs-button--primary-hover-box-shadow: none;
+  --bs-button--primary-active-color: var(--bs-color-brand-1);
+  --bs-button--primary-active-background-color: var(
+    --bs-color-grayscale-light-2
+  );
+  --bs-button--primary-active-box-shadow: none;
+  --bs-button--primary-pressed-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-pressed-background-color: var(--bs-color-brand-1);
+  --bs-button--primary-pressed-box-shadow: none;
+  --bs-button--primary-disabled-color: var(--bs-color-grayscale-light-1);
+  --bs-button--primary-disabled-background-color: var(
+    --bs-color-grayscale-dark-2
+  );
+  --bs-button--primary-disabled-box-shadow: none;
 }
 [data-theme='brand-1'] {
-  --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);
+  --bs-button--primary-color: var(--bs-color-brand-1-dark-2);
+  --bs-button--primary-background-color: transparent;
+  --bs-button--primary-hover-color: var(--bs-color-brand-1-dark-3);
+  --bs-button--primary-hover-background-color: var(--bs-color-brand-1-light-2);
+  --bs-button--primary-active-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-active-background-color: var(--bs-color-brand-1-dark-2);
 }
 [data-theme='brand-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);
+  --bs-button--primary-color: var(--bs-color-brand-2-dark-2);
+  --bs-button--primary-background-color: transparent;
+  --bs-button--primary-hover-color: var(--bs-color-grayscale-dark-3);
+  --bs-button--primary-hover-background-color: var(--bs-color-brand-2-light-2);
+  --bs-button--primary-active-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-active-background-color: var(--bs-color-brand-2-dark-2);
 }
 [data-theme='positive'] {
-  --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);
+  --bs-button--primary-color: var(--bs-color-positive-dark-2);
+  --bs-button--primary-background-color: transparent;
+  --bs-button--primary-hover-color: var(--bs-color-positive-dark-3);
+  --bs-button--primary-hover-background-color: var(--bs-color-positive-light-2);
+  --bs-button--primary-active-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-active-background-color: var(--bs-color-positive-dark-2);
 }
 [data-theme='warning'] {
-  --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);
+  --bs-button--primary-color: var(--bs-color-warning-dark-2);
+  --bs-button--primary-background-color: transparent;
+  --bs-button--primary-hover-color: var(--bs-color-warning-dark-3);
+  --bs-button--primary-hover-background-color: var(--bs-color-warning-light-2);
+  --bs-button--primary-active-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-active-background-color: var(--bs-color-warning-dark-2);
 }
 [data-theme='danger'] {
-  --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);
+  --bs-button--primary-color: var(--bs-color-danger-dark-1);
+  --bs-button--primary-background-color: transparent;
+  --bs-button--primary-hover-color: var(--bs-color-danger-dark-2);
+  --bs-button--primary-hover-background-color: var(--bs-color-danger-light-2);
+  --bs-button--primary-active-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-active-background-color: var(--bs-color-danger-dark-1);
 }
 [data-theme='grayscale'] {
-  --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);
+  --bs-button--primary-color: var(--bs-color-grayscale-dark-2);
+  --bs-button--primary-background-color: transparent;
+  --bs-button--primary-hover-color: var(--bs-color-grayscale-dark-3);
+  --bs-button--primary-hover-background-color: var(
+    --bs-color-grayscale-light-2
+  );
+  --bs-button--primary-active-color: var(--bs-color-grayscale-white);
+  --bs-button--primary-active-background-color: var(
+    --bs-color-grayscale-dark-2
+  );
 }
 .a-button--secondary,
 .a-button--secondary:visited {
-  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);
+  --bs-button-color: var(--bs-button--secondary-color);
+  --bs-button-background-color: var(--bs-button--secondary-background-color);
+  --bs-button-border-color: var(--bs-button--secondary-border-color);
+  --bs-button-box-shadow: var(--bs-button--secondary-box-shadow);
 }
 .a-button--secondary:focus,
 .a-button--secondary:hover {
-  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);
+  --bs-button-hover-color: var(--bs-button--secondary-hover-color);
+  --bs-button-hover-background-color: var(
+    --bs-button--secondary-hover-background-color
+  );
+  --bs-button-hover-border-color: var(
+    --bs-button--secondary-hover-border-color
+  );
+  --bs-button-hover-box-shadow: var(--bs-button--secondary-hover-box-shadow);
 }
 .a-button--secondary:active {
-  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);
+  --bs-button-active-color: var(--bs-button--secondary-active-color);
+  --bs-button-active-background-color: var(
+    --bs-button--secondary-active-background-color
+  );
+  --bs-button-active-border-color: var(
+    --bs-button--secondary-active-border-color
+  );
+  --bs-button-active-box-shadow: var(--bs-button--secondary-active-box-shadow);
 }
 .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-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);
+  --bs-button-pressed-color: var(--bs-button--secondary-pressed-color);
+  --bs-button-pressed-background-color: var(
+    --bs-button--secondary-pressed-background-color
+  );
+  --bs-button-pressed-border-color: var(
+    --bs-button--secondary-pressed-border-color
+  );
+  --bs-button-pressed-box-shadow: var(
+    --bs-button--secondary-pressed-box-shadow
+  );
 }
 .a-button--secondary:disabled,
 .a-button--secondary:disabled:focus,
@@ -1522,10 +1924,16 @@ 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-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);
+  --bs-button-disabled-color: var(--bs-button--secondary-disabled-color);
+  --bs-button-disabled-background-color: var(
+    --bs-button--secondary-disabled-background-color
+  );
+  --bs-button-disabled-border-color: var(
+    --bs-button--secondary-disabled-border-color
+  );
+  --bs-button-disabled-box-shadow: var(
+    --bs-button--secondary-disabled-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {
@@ -1594,32 +2002,42 @@ table {
 }
 .a-button--outline,
 .a-button--outline:visited {
-  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);
+  --bs-button-color: var(--bs-button--outline-color);
+  --bs-button-background-color: var(--bs-button--outline-background-color);
+  --bs-button-border-color: var(--bs-button--outline-border-color);
+  --bs-button-box-shadow: var(--bs-button--outline-box-shadow);
 }
 .a-button--outline:focus,
 .a-button--outline:hover {
-  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);
+  --bs-button-hover-color: var(--bs-button--outline-hover-color);
+  --bs-button-hover-background-color: var(
+    --bs-button--outline-hover-background-color
+  );
+  --bs-button-hover-border-color: var(--bs-button--outline-hover-border-color);
+  --bs-button-hover-box-shadow: var(--bs-button--outline-hover-box-shadow);
 }
 .a-button--outline:active {
-  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);
+  --bs-button-active-color: var(--bs-button--outline-active-color);
+  --bs-button-active-background-color: var(
+    --bs-button--outline-active-background-color
+  );
+  --bs-button-active-border-color: var(
+    --bs-button--outline-active-border-color
+  );
+  --bs-button-active-box-shadow: var(--bs-button--outline-active-box-shadow);
 }
 .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-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);
+  --bs-button-pressed-color: var(--bs-button--outline-pressed-color);
+  --bs-button-pressed-background-color: var(
+    --bs-button--outline-pressed-background-color
+  );
+  --bs-button-pressed-border-color: var(
+    --bs-button--outline-pressed-border-color
+  );
+  --bs-button-pressed-box-shadow: var(--bs-button--outline-pressed-box-shadow);
 }
 .a-button--outline:disabled,
 .a-button--outline:disabled:focus,
@@ -1627,10 +2045,16 @@ 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-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);
+  --bs-button-disabled-color: var(--bs-button--outline-disabled-color);
+  --bs-button-disabled-background-color: var(
+    --bs-button--outline-disabled-background-color
+  );
+  --bs-button-disabled-border-color: var(
+    --bs-button--outline-disabled-border-color
+  );
+  --bs-button-disabled-box-shadow: var(
+    --bs-button--outline-disabled-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {
@@ -1699,32 +2123,48 @@ table {
 }
 .a-button--transparent,
 .a-button--transparent:visited {
-  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);
+  --bs-button-color: var(--bs-button--transparent-color);
+  --bs-button-background-color: var(--bs-button--transparent-background-color);
+  --bs-button-border-color: var(--bs-button--transparent-border-color);
+  --bs-button-box-shadow: var(--bs-button--transparent-box-shadow);
 }
 .a-button--transparent:focus,
 .a-button--transparent:hover {
-  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);
+  --bs-button-hover-color: var(--bs-button--transparent-hover-color);
+  --bs-button-hover-background-color: var(
+    --bs-button--transparent-hover-background-color
+  );
+  --bs-button-hover-border-color: var(
+    --bs-button--transparent-hover-border-color
+  );
+  --bs-button-hover-box-shadow: var(--bs-button--transparent-hover-box-shadow);
 }
 .a-button--transparent:active {
-  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);
+  --bs-button-active-color: var(--bs-button--transparent-active-color);
+  --bs-button-active-background-color: var(
+    --bs-button--transparent-active-background-color
+  );
+  --bs-button-active-border-color: var(
+    --bs-button--transparent-active-border-color
+  );
+  --bs-button-active-box-shadow: var(
+    --bs-button--transparent-active-box-shadow
+  );
 }
 .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-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);
+  --bs-button-pressed-color: var(--bs-button--transparent-pressed-color);
+  --bs-button-pressed-background-color: var(
+    --bs-button--transparent-pressed-background-color
+  );
+  --bs-button-pressed-border-color: var(
+    --bs-button--transparent-pressed-border-color
+  );
+  --bs-button-pressed-box-shadow: var(
+    --bs-button--transparent-pressed-box-shadow
+  );
 }
 .a-button--transparent:disabled,
 .a-button--transparent:disabled:focus,
@@ -1732,10 +2172,16 @@ 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-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);
+  --bs-button-disabled-color: var(--bs-button--transparent-disabled-color);
+  --bs-button-disabled-background-color: var(
+    --bs-button--transparent-disabled-background-color
+  );
+  --bs-button-disabled-border-color: var(
+    --bs-button--transparent-disabled-border-color
+  );
+  --bs-button-disabled-box-shadow: var(
+    --bs-button--transparent-disabled-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {
@@ -1820,32 +2266,38 @@ table {
 }
 .a-button--tab,
 .a-button--tab:visited {
-  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);
+  --bs-button-color: var(--bs-button--tab-color);
+  --bs-button-background-color: var(--bs-button--tab-background-color);
+  --bs-button-border-color: var(--bs-button--tab-border-color);
+  --bs-button-box-shadow: var(--bs-button--tab-box-shadow);
 }
 .a-button--tab:focus,
 .a-button--tab:hover {
-  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);
+  --bs-button-hover-color: var(--bs-button--tab-hover-color);
+  --bs-button-hover-background-color: var(
+    --bs-button--tab-hover-background-color
+  );
+  --bs-button-hover-border-color: var(--bs-button--tab-hover-border-color);
+  --bs-button-hover-box-shadow: var(--bs-button--tab-hover-box-shadow);
 }
 .a-button--tab:active {
-  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);
+  --bs-button-active-color: var(--bs-button--tab-active-color);
+  --bs-button-active-background-color: var(
+    --bs-button--tab-active-background-color
+  );
+  --bs-button-active-border-color: var(--bs-button--tab-active-border-color);
+  --bs-button-active-box-shadow: var(--bs-button--tab-active-box-shadow);
 }
 .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-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);
+  --bs-button-pressed-color: var(--bs-button--tab-pressed-color);
+  --bs-button-pressed-background-color: var(
+    --bs-button--tab-pressed-background-color
+  );
+  --bs-button-pressed-border-color: var(--bs-button--tab-pressed-border-color);
+  --bs-button-pressed-box-shadow: var(--bs-button--tab-pressed-box-shadow);
 }
 .a-button--tab:disabled,
 .a-button--tab:disabled:focus,
@@ -1853,10 +2305,14 @@ 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-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);
+  --bs-button-disabled-color: var(--bs-button--tab-disabled-color);
+  --bs-button-disabled-background-color: var(
+    --bs-button--tab-disabled-background-color
+  );
+  --bs-button-disabled-border-color: var(
+    --bs-button--tab-disabled-border-color
+  );
+  --bs-button-disabled-box-shadow: var(--bs-button--tab-disabled-box-shadow);
 }
 :root,
 [data-theme='default'] {
@@ -1896,25 +2352,33 @@ table {
 }
 .a-button--danger:focus,
 .a-button--danger:hover {
-  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);
+  --bs-button-hover-color: var(--bs-button--danger-hover-color);
+  --bs-button-hover-background-color: var(
+    --bs-button--danger-hover-background-color
+  );
+  --bs-button-hover-border-color: var(--bs-button--danger-hover-border-color);
+  --bs-button-hover-box-shadow: var(--bs-button--danger-hover-box-shadow);
 }
 .a-button--danger:active {
-  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);
+  --bs-button-active-color: var(--bs-button--danger-active-color);
+  --bs-button-active-background-color: var(
+    --bs-button--danger-active-background-color
+  );
+  --bs-button-active-border-color: var(--bs-button--danger-active-border-color);
+  --bs-button-active-box-shadow: var(--bs-button--danger-active-box-shadow);
 }
 .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-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);
+  --bs-button-pressed-color: var(--bs-button--danger-pressed-color);
+  --bs-button-pressed-background-color: var(
+    --bs-button--danger-pressed-background-color
+  );
+  --bs-button-pressed-border-color: var(
+    --bs-button--danger-pressed-border-color
+  );
+  --bs-button-pressed-box-shadow: var(--bs-button--danger-pressed-box-shadow);
 }
 :root,
 [data-theme='default'] {
@@ -1940,6 +2404,7 @@ table {
   --bs-button-min-width: 0;
   --bs-button-font-size: var(--bs-font-size-2);
   --bs-button-font-weight: var(--bs-font-weight-semibold);
+  --bs-button-line-height: var(--bs-line-height-4);
 }
 .a-button.a-button--square {
   --bs-button-min-width: calc(
@@ -2655,8 +3120,13 @@ table {
   padding-right: var(--bs-size-s3);
 }
 .o-joined-ui {
+  align-items: stretch;
   border-radius: var(--bs-size-s3);
   box-shadow: none;
+  display: inline-flex;
+}
+.o-joined-ui > * {
+  display: flex;
 }
 .o-joined-ui > .a-button:first-child,
 .o-joined-ui > :first-child .a-button {
@@ -2665,6 +3135,20 @@ table {
   --bs-button-border-bottom-right-radius: 0;
   margin-right: calc(var(--bs-button-border-width) * -1);
 }
+.o-joined-ui > :first-child input,
+.o-joined-ui > input:first-child {
+  --bs-input-text-box-shadow: none;
+  --bs-input-text-border-top-right-radius: 0;
+  --bs-input-text-border-bottom-right-radius: 0;
+  margin-right: calc(var(--bs-input-text-border-width) * -1);
+}
+.o-joined-ui > :first-child select,
+.o-joined-ui > select:first-child {
+  --bs-select-box-shadow: none;
+  --bs-select-border-top-right-radius: 0;
+  --bs-select-border-bottom-right-radius: 0;
+  margin-right: calc(var(--bs-select-border-width) * -1);
+}
 .o-joined-ui > .a-button:last-child,
 .o-joined-ui > :last-child .a-button {
   --bs-button-box-shadow: none;
@@ -2672,6 +3156,20 @@ table {
   --bs-button-border-bottom-left-radius: 0;
   margin-right: 0;
 }
+.o-joined-ui > :last-child input,
+.o-joined-ui > input:last-child {
+  --bs-input-text-box-shadow: none;
+  --bs-input-text-border-top-left-radius: 0;
+  --bs-input-text-border-bottom-left-radius: 0;
+  margin-right: 0;
+}
+.o-joined-ui > :last-child select,
+.o-joined-ui > select:last-child {
+  --bs-select-box-shadow: none;
+  --bs-select-border-top-left-radius: 0;
+  --bs-select-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-button-border-top-left-radius: 0;
@@ -2680,6 +3178,22 @@ table {
   --bs-button-border-bottom-left-radius: 0;
   margin-right: calc(var(--bs-button-border-width) * -1);
 }
+.o-joined-ui > :not(:first-child):not(:last-child) input,
+.o-joined-ui > input:not(:first-child):not(:last-child) {
+  --bs-input-text-border-top-left-radius: 0;
+  --bs-input-text-border-top-right-radius: 0;
+  --bs-input-text-border-bottom-right-radius: 0;
+  --bs-input-text-border-bottom-left-radius: 0;
+  margin-right: calc(var(--bs-input-text-border-width) * -1);
+}
+.o-joined-ui > :not(:first-child):not(:last-child) select,
+.o-joined-ui > select:not(:first-child):not(:last-child) {
+  --bs-select-border-top-left-radius: 0;
+  --bs-select-border-top-right-radius: 0;
+  --bs-select-border-bottom-right-radius: 0;
+  --bs-select-border-bottom-left-radius: 0;
+  margin-right: calc(var(--bs-select-border-width) * -1);
+}
 .u-aspect-ratio-1-1 {
   aspect-ratio: 1/1;
 }

From 04a9af356224fdc48145d88f1b0c7574867b407d Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Tue, 1 Aug 2023 15:16:36 +0200
Subject: [PATCH 15/21] WIP updating fixtures after rebase

---
 .../base/input-checkbox/_settings.scss        |   8 +-
 .../bitstyles/base/input-radio/_settings.scss |   4 +-
 scss/bitstyles/base/input-text/_settings.scss |  16 +-
 test/scss/fixtures/bitstyles-overrides.css    | 381 ++++++++++--------
 test/scss/fixtures/bitstyles.css              |  38 +-
 test/scss/test-use-all.scss                   |   4 +
 test/scss/test-use-each.scss                  |   4 +
 test/scss/test-use-layers.scss                |   4 +
 8 files changed, 242 insertions(+), 217 deletions(-)

diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index 5f0776df8..3989feb98 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -24,7 +24,7 @@ $background-color-hover: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-hover: var(design-token.get('color', 'brand-1')) !default;
-$box-shadow-hover: none !default;
+$box-shadow-hover: var(design-token.get('shadow', 'brand-1')) !default;
 
 //
 // Active colors ////////////////////////////////////////
@@ -47,7 +47,7 @@ $border-color-checked: var(
   design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
 $background-image-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-checked: var(design-token.get('shadow', 'brand-1')) !default;
+$box-shadow-checked: none !default;
 
 //
 // Checked hover colors ////////////////////////////////////////
@@ -81,7 +81,7 @@ $color-invalid: var(design-token.get('color', 'grayscale', 'white')) !default;
 $background-color-invalid: var(design-token.get('color', 'brand-1')) !default;
 $border-color-invalid: var(design-token.get('color', 'brand-1')) !default;
 $background-image-invalid: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-invalid: none !default;
+$box-shadow-invalid: var(design-token.get('shadow', 'warning')) !default;
 
 //
 // Invalid checked colors ////////////////////////////////////////
@@ -95,7 +95,7 @@ $border-color-invalid-checked: var(
   design-token.get('color', 'brand-1')
 ) !default;
 $background-image-invalid-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-invalid-checked: none !default;
+$box-shadow-invalid-checked: var(design-token.get('shadow', 'warning')) !default;
 
 //
 // Disabled colors ////////////////////////////////////////
diff --git a/scss/bitstyles/base/input-radio/_settings.scss b/scss/bitstyles/base/input-radio/_settings.scss
index 442ab073c..83e8b71ea 100644
--- a/scss/bitstyles/base/input-radio/_settings.scss
+++ b/scss/bitstyles/base/input-radio/_settings.scss
@@ -15,7 +15,7 @@ $background-color: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color: var(design-token.get('color', 'grayscale', 'dark-2')) !default;
-$box-shadow: none !default;
+$box-shadow: var(design-token.get('shadow', 'brand-1')) !default;
 
 //
 // Hover colors ////////////////////////////////////////
@@ -78,7 +78,7 @@ $background-color-invalid: var(
 $border-color-invalid: var(
   design-token.get('color', 'warning', 'dark-1')
 ) !default;
-$box-shadow-invalid: none !default;
+$box-shadow-invalid: var(design-token.get('shadow', 'warning')) !default;
 
 //
 // Disabled colors ////////////////////////////////////////
diff --git a/scss/bitstyles/base/input-text/_settings.scss b/scss/bitstyles/base/input-text/_settings.scss
index 29a3139ec..9cf7e6476 100644
--- a/scss/bitstyles/base/input-text/_settings.scss
+++ b/scss/bitstyles/base/input-text/_settings.scss
@@ -9,7 +9,7 @@ $padding-horizontal: var(design-token.get('size', 'm')) !default;
 $border-radius: var(design-token.get('size', 's4')) !default;
 $border-width: 0.1875rem !default;
 $font: inherit !default;
-$placeholder-font-style: italic !default;
+$placeholder-font-style: normal !default;
 $placeholder-font-weight: var(
   design-token.get('font-weight', 'normal')
 ) !default;
@@ -33,12 +33,7 @@ $background-hover: var(
 $border-color-hover: var(
   design-token.get('color', 'grayscale', 'dark-2')
 ) !default;
-$box-shadow-hover: shadow.to-box-shadow(
-  shadow.generate(
-    $color: rgba(var(design-token.get('color', 'brand-1', 'dark-2-rgb')), 0.025),
-    $blur-radius: var(design-token.get('size', 's4')),
-  )
-) !default;
+$box-shadow-hover: none !default;
 $placeholder-color-hover: var(
   design-token.get('color', 'grayscale', 'dark-1')
 ) !default;
@@ -53,12 +48,7 @@ $background-active: var(
 $border-color-active: var(
   design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
-$box-shadow-active: shadow.to-box-shadow(
-  shadow.generate(
-    $color: rgba(var(design-token.get('color', 'brand-1', 'dark-2-rgb')), 0.075),
-    $blur-radius: var(design-token.get('size', 's4')),
-  )
-) !default;
+$box-shadow-active: none !default;
 $placeholder-color-active: var(design-token.get('color', 'brand-1')) !default;
 
 //
diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css
index 1180e383d..1a9e15c27 100644
--- a/test/scss/fixtures/bitstyles-overrides.css
+++ b/test/scss/fixtures/bitstyles-overrides.css
@@ -1159,19 +1159,19 @@ table {
   --bscpn-button-justify-content: center;
   align-items: center;
   -webkit-appearance: none;
-  border-radius: var(--bscpn-at-button-border-top-left-radius)
-    var(--bscpn-at-button-border-top-right-radius)
-    var(--bscpn-at-button-border-bottom-right-radius)
-    var(--bscpn-at-button-border-bottom-left-radius);
+  border-radius: var(--bscpn-button-border-top-left-radius)
+    var(--bscpn-button-border-top-right-radius)
+    var(--bscpn-button-border-bottom-right-radius)
+    var(--bscpn-button-border-bottom-left-radius);
   border-style: solid;
-  border-width: var(--bscpn-at-button-border-width);
+  border-width: var(--bscpn-button-border-width);
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
   font-family: inherit;
-  font-size: var(--bscpn-at-button-font-size);
-  font-weight: var(--bscpn-at-button-font-weight);
-  justify-content: var(--bscpn-at-button-justify-content);
+  font-size: var(--bscpn-button-font-size);
+  font-weight: var(--bscpn-button-font-weight);
+  justify-content: var(--bscpn-button-justify-content);
   max-width: 100%;
   min-height: var(--bscpn-button-min-height);
   min-width: var(--bscpn-button-min-width);
@@ -1254,46 +1254,46 @@ table {
 }
 .bs-at-button,
 .bs-at-button:visited {
-  background-color: var(--bscpn-at-button-background-color);
-  border-color: var(--bscpn-at-button-border-color);
-  box-shadow: var(--bscpn-at-button-box-shadow);
-  color: var(--bscpn-at-button-color);
+  background-color: var(--bscpn-button-background-color);
+  border-color: var(--bscpn-button-border-color);
+  box-shadow: var(--bscpn-button-box-shadow);
+  color: var(--bscpn-button-color);
 }
 :root,
 [data-theme='default'] {
-  --bscpn-at-button-color: var(--bscpn-color-grayscale-black);
+  --bscpn-button-color: var(--bscpn-color-grayscale-black);
 }
 [data-theme='dark'] {
-  --bscpn-at-button-color: var(--bscpn-color-grayscale-white);
+  --bscpn-button-color: var(--bscpn-color-grayscale-white);
 }
 .bs-at-button--secondary,
 .bs-at-button--secondary:visited {
-  background-color: var(--bscpn-at-button--secondary-background-color);
-  border-color: var(--bscpn-at-button--secondary-border-color);
-  box-shadow: var(--bscpn-at-button--secondary-box-shadow);
-  color: var(--bscpn-at-button--secondary-color);
+  background-color: var(--bscpn-button--secondary-background-color);
+  border-color: var(--bscpn-button--secondary-border-color);
+  box-shadow: var(--bscpn-button--secondary-box-shadow);
+  color: var(--bscpn-button--secondary-color);
 }
 .bs-at-button--secondary:focus,
 .bs-at-button--secondary:hover {
-  background-color: var(--bscpn-at-button--secondary-hover-background-color);
-  border-color: var(--bscpn-at-button--secondary-hover-border-color);
-  box-shadow: var(--bscpn-at-button--secondary-hover-box-shadow);
-  color: var(--bscpn-at-button--secondary-hover-color);
+  background-color: var(--bscpn-button--secondary-hover-background-color);
+  border-color: var(--bscpn-button--secondary-hover-border-color);
+  box-shadow: var(--bscpn-button--secondary-hover-box-shadow);
+  color: var(--bscpn-button--secondary-hover-color);
 }
 .bs-at-button--secondary:active {
-  background-color: var(--bscpn-at-button--secondary-active-background-color);
-  border-color: var(--bscpn-at-button--secondary-active-border-color);
-  box-shadow: var(--bscpn-at-button--secondary-active-box-shadow);
-  color: var(--bscpn-at-button--secondary-active-color);
+  background-color: var(--bscpn-button--secondary-active-background-color);
+  border-color: var(--bscpn-button--secondary-active-border-color);
+  box-shadow: var(--bscpn-button--secondary-active-box-shadow);
+  color: var(--bscpn-button--secondary-active-color);
 }
 .bs-at-button--secondary[aria-current],
 .bs-at-button--secondary[aria-expanded='true'],
 .bs-at-button--secondary[aria-pressed='true'],
 .bs-at-button--secondary[aria-selected='true'] {
-  background-color: var(--bscpn-at-button--secondary-pressed-background-color);
-  border-color: var(--bscpn-at-button--secondary-pressed-border-color);
-  box-shadow: var(--bscpn-at-button--secondary-pressed-box-shadow);
-  color: var(--bscpn-at-button--secondary-pressed-color);
+  background-color: var(--bscpn-button--secondary-pressed-background-color);
+  border-color: var(--bscpn-button--secondary-pressed-border-color);
+  box-shadow: var(--bscpn-button--secondary-pressed-box-shadow);
+  color: var(--bscpn-button--secondary-pressed-color);
 }
 .bs-at-button--secondary:disabled,
 .bs-at-button--secondary:disabled:focus,
@@ -1301,10 +1301,10 @@ table {
 .bs-at-button--secondary[aria-disabled='true'],
 .bs-at-button--secondary[aria-disabled='true']:focus,
 .bs-at-button--secondary[aria-disabled='true']:hover {
-  background-color: var(--bscpn-at-button--secondary-disabled-background-color);
-  border-color: var(--bscpn-at-button--secondary-disabled-border-color);
-  box-shadow: var(--bscpn-at-button--secondary-disabled-box-shadow);
-  color: var(--bscpn-at-button--secondary-disabled-color);
+  background-color: var(--bscpn-button--secondary-disabled-background-color);
+  border-color: var(--bscpn-button--secondary-disabled-border-color);
+  box-shadow: var(--bscpn-button--secondary-disabled-box-shadow);
+  color: var(--bscpn-button--secondary-disabled-color);
 }
 :root,
 [data-theme='default'] {
@@ -1336,10 +1336,8 @@ table {
       rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075),
     0 0 calc(var(--bscpn-size-s4) / 1)
       rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075);
-  --bscpn-at-button--secondary-disabled-color: var(
-    --bscpn-color-grayscale-base
-  );
-  --bscpn-at-button--secondary-disabled-background-color: var(
+  --bscpn-button--secondary-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-button--secondary-disabled-background-color: var(
     --bscpn-color-grayscale-light-3
   );
   --bscpn-button--secondary-disabled-box-shadow: none;
@@ -1359,9 +1357,9 @@ table {
   --bscpn-button--secondary-active-background-color: var(
     --bscpn-color-brand-1-light-1
   );
-  --bscpn-at-button--secondary-active-box-shadow: none;
-  --bscpn-at-button--secondary-pressed-color: var(--bscpn-color-brand-1-base);
-  --bscpn-at-button--secondary-pressed-background-color: var(
+  --bscpn-button--secondary-active-box-shadow: none;
+  --bscpn-button--secondary-pressed-color: var(--bscpn-color-brand-1-base);
+  --bscpn-button--secondary-pressed-background-color: var(
     --bscpn-color-brand-1-light-1
   );
   --bscpn-button--secondary-pressed-box-shadow: 0 0
@@ -1383,32 +1381,32 @@ table {
 }
 .bs-at-button--outline,
 .bs-at-button--outline:visited {
-  background-color: var(--bscpn-at-button--outline-background-color);
-  border-color: var(--bscpn-at-button--outline-border-color);
-  box-shadow: var(--bscpn-at-button--outline-box-shadow);
-  color: var(--bscpn-at-button--outline-color);
+  background-color: var(--bscpn-button--outline-background-color);
+  border-color: var(--bscpn-button--outline-border-color);
+  box-shadow: var(--bscpn-button--outline-box-shadow);
+  color: var(--bscpn-button--outline-color);
 }
 .bs-at-button--outline:focus,
 .bs-at-button--outline:hover {
-  background-color: var(--bscpn-at-button--outline-hover-background-color);
-  border-color: var(--bscpn-at-button--outline-hover-border-color);
-  box-shadow: var(--bscpn-at-button--outline-hover-box-shadow);
-  color: var(--bscpn-at-button--outline-hover-color);
+  background-color: var(--bscpn-button--outline-hover-background-color);
+  border-color: var(--bscpn-button--outline-hover-border-color);
+  box-shadow: var(--bscpn-button--outline-hover-box-shadow);
+  color: var(--bscpn-button--outline-hover-color);
 }
 .bs-at-button--outline:active {
-  background-color: var(--bscpn-at-button--outline-active-background-color);
-  border-color: var(--bscpn-at-button--outline-active-border-color);
-  box-shadow: var(--bscpn-at-button--outline-active-box-shadow);
-  color: var(--bscpn-at-button--outline-active-color);
+  background-color: var(--bscpn-button--outline-active-background-color);
+  border-color: var(--bscpn-button--outline-active-border-color);
+  box-shadow: var(--bscpn-button--outline-active-box-shadow);
+  color: var(--bscpn-button--outline-active-color);
 }
 .bs-at-button--outline[aria-current],
 .bs-at-button--outline[aria-expanded='true'],
 .bs-at-button--outline[aria-pressed='true'],
 .bs-at-button--outline[aria-selected='true'] {
-  background-color: var(--bscpn-at-button--outline-pressed-background-color);
-  border-color: var(--bscpn-at-button--outline-pressed-border-color);
-  box-shadow: var(--bscpn-at-button--outline-pressed-box-shadow);
-  color: var(--bscpn-at-button--outline-pressed-color);
+  background-color: var(--bscpn-button--outline-pressed-background-color);
+  border-color: var(--bscpn-button--outline-pressed-border-color);
+  box-shadow: var(--bscpn-button--outline-pressed-box-shadow);
+  color: var(--bscpn-button--outline-pressed-color);
 }
 .bs-at-button--outline:disabled,
 .bs-at-button--outline:disabled:focus,
@@ -1416,10 +1414,10 @@ table {
 .bs-at-button--outline[aria-disabled='true'],
 .bs-at-button--outline[aria-disabled='true']:focus,
 .bs-at-button--outline[aria-disabled='true']:hover {
-  background-color: var(--bscpn-at-button--outline-disabled-background-color);
-  border-color: var(--bscpn-at-button--outline-disabled-border-color);
-  box-shadow: var(--bscpn-at-button--outline-disabled-box-shadow);
-  color: var(--bscpn-at-button--outline-disabled-color);
+  background-color: var(--bscpn-button--outline-disabled-background-color);
+  border-color: var(--bscpn-button--outline-disabled-border-color);
+  box-shadow: var(--bscpn-button--outline-disabled-box-shadow);
+  color: var(--bscpn-button--outline-disabled-color);
 }
 :root,
 [data-theme='default'] {
@@ -1458,12 +1456,12 @@ table {
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bscpn-size-m) / 1)
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125);
-  --bscpn-at-button--outline-disabled-color: var(--bscpn-color-grayscale-base);
-  --bscpn-at-button--outline-disabled-background-color: transparent;
-  --bscpn-at-button--outline-disabled-border-color: var(
+  --bscpn-button--outline-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-button--outline-disabled-background-color: transparent;
+  --bscpn-button--outline-disabled-border-color: var(
     --bscpn-color-grayscale-base
   );
-  --bscpn-at-button--outline-disabled-box-shadow: none;
+  --bscpn-button--outline-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
   --bscpn-button--outline-color: var(--bscpn-color-grayscale-light-2);
@@ -1485,9 +1483,9 @@ table {
   --bscpn-button--outline-active-border-color: var(
     --bscpn-color-brand-1-light-1
   );
-  --bscpn-at-button--outline-active-box-shadow: none;
-  --bscpn-at-button--outline-pressed-color: var(--bscpn-color-brand-1-base);
-  --bscpn-at-button--outline-pressed-background-color: var(
+  --bscpn-button--outline-active-box-shadow: none;
+  --bscpn-button--outline-pressed-color: var(--bscpn-color-brand-1-base);
+  --bscpn-button--outline-pressed-background-color: var(
     --bscpn-color-brand-1-light-1
   );
   --bscpn-button--outline-pressed-border-color: var(
@@ -1512,34 +1510,32 @@ table {
 }
 .bs-at-button--transparent,
 .bs-at-button--transparent:visited {
-  background-color: var(--bscpn-at-button--transparent-background-color);
-  border-color: var(--bscpn-at-button--transparent-border-color);
-  box-shadow: var(--bscpn-at-button--transparent-box-shadow);
-  color: var(--bscpn-at-button--transparent-color);
+  background-color: var(--bscpn-button--transparent-background-color);
+  border-color: var(--bscpn-button--transparent-border-color);
+  box-shadow: var(--bscpn-button--transparent-box-shadow);
+  color: var(--bscpn-button--transparent-color);
 }
 .bs-at-button--transparent:focus,
 .bs-at-button--transparent:hover {
-  background-color: var(--bscpn-at-button--transparent-hover-background-color);
-  border-color: var(--bscpn-at-button--transparent-hover-border-color);
-  box-shadow: var(--bscpn-at-button--transparent-hover-box-shadow);
-  color: var(--bscpn-at-button--transparent-hover-color);
+  background-color: var(--bscpn-button--transparent-hover-background-color);
+  border-color: var(--bscpn-button--transparent-hover-border-color);
+  box-shadow: var(--bscpn-button--transparent-hover-box-shadow);
+  color: var(--bscpn-button--transparent-hover-color);
 }
 .bs-at-button--transparent:active {
-  background-color: var(--bscpn-at-button--transparent-active-background-color);
-  border-color: var(--bscpn-at-button--transparent-active-border-color);
-  box-shadow: var(--bscpn-at-button--transparent-active-box-shadow);
-  color: var(--bscpn-at-button--transparent-active-color);
+  background-color: var(--bscpn-button--transparent-active-background-color);
+  border-color: var(--bscpn-button--transparent-active-border-color);
+  box-shadow: var(--bscpn-button--transparent-active-box-shadow);
+  color: var(--bscpn-button--transparent-active-color);
 }
 .bs-at-button--transparent[aria-current],
 .bs-at-button--transparent[aria-expanded='true'],
 .bs-at-button--transparent[aria-pressed='true'],
 .bs-at-button--transparent[aria-selected='true'] {
-  background-color: var(
-    --bscpn-at-button--transparent-pressed-background-color
-  );
-  border-color: var(--bscpn-at-button--transparent-pressed-border-color);
-  box-shadow: var(--bscpn-at-button--transparent-pressed-box-shadow);
-  color: var(--bscpn-at-button--transparent-pressed-color);
+  background-color: var(--bscpn-button--transparent-pressed-background-color);
+  border-color: var(--bscpn-button--transparent-pressed-border-color);
+  box-shadow: var(--bscpn-button--transparent-pressed-box-shadow);
+  color: var(--bscpn-button--transparent-pressed-color);
 }
 .bs-at-button--transparent:disabled,
 .bs-at-button--transparent:disabled:focus,
@@ -1547,12 +1543,10 @@ table {
 .bs-at-button--transparent[aria-disabled='true'],
 .bs-at-button--transparent[aria-disabled='true']:focus,
 .bs-at-button--transparent[aria-disabled='true']:hover {
-  background-color: var(
-    --bscpn-at-button--transparent-disabled-background-color
-  );
-  border-color: var(--bscpn-at-button--transparent-disabled-border-color);
-  box-shadow: var(--bscpn-at-button--transparent-disabled-box-shadow);
-  color: var(--bscpn-at-button--transparent-disabled-color);
+  background-color: var(--bscpn-button--transparent-disabled-background-color);
+  border-color: var(--bscpn-button--transparent-disabled-border-color);
+  box-shadow: var(--bscpn-button--transparent-disabled-box-shadow);
+  color: var(--bscpn-button--transparent-disabled-color);
 }
 :root,
 [data-theme='default'] {
@@ -1590,10 +1584,8 @@ table {
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bscpn-size-m) / 1)
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125);
-  --bscpn-at-button--transparent-disabled-color: var(
-    --bscpn-color-grayscale-base
-  );
-  --bscpn-at-button--transparent-disabled-background-color: var(
+  --bscpn-button--transparent-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-button--transparent-disabled-background-color: var(
     --bscpn-color-grayscale-light-3
   );
   --bscpn-button--transparent-disabled-border-color: var(
@@ -1647,32 +1639,32 @@ table {
 }
 .bs-at-button--tab,
 .bs-at-button--tab:visited {
-  background-color: var(--bscpn-at-button--tab-background-color);
-  border-color: var(--bscpn-at-button--tab-border-color);
-  box-shadow: var(--bscpn-at-button--tab-box-shadow);
-  color: var(--bscpn-at-button--tab-color);
+  background-color: var(--bscpn-button--tab-background-color);
+  border-color: var(--bscpn-button--tab-border-color);
+  box-shadow: var(--bscpn-button--tab-box-shadow);
+  color: var(--bscpn-button--tab-color);
 }
 .bs-at-button--tab:focus,
 .bs-at-button--tab:hover {
-  background-color: var(--bscpn-at-button--tab-hover-background-color);
-  border-color: var(--bscpn-at-button--tab-hover-border-color);
-  box-shadow: var(--bscpn-at-button--tab-hover-box-shadow);
-  color: var(--bscpn-at-button--tab-hover-color);
+  background-color: var(--bscpn-button--tab-hover-background-color);
+  border-color: var(--bscpn-button--tab-hover-border-color);
+  box-shadow: var(--bscpn-button--tab-hover-box-shadow);
+  color: var(--bscpn-button--tab-hover-color);
 }
 .bs-at-button--tab:active {
-  background-color: var(--bscpn-at-button--tab-active-background-color);
-  border-color: var(--bscpn-at-button--tab-active-border-color);
-  box-shadow: var(--bscpn-at-button--tab-active-box-shadow);
-  color: var(--bscpn-at-button--tab-active-color);
+  background-color: var(--bscpn-button--tab-active-background-color);
+  border-color: var(--bscpn-button--tab-active-border-color);
+  box-shadow: var(--bscpn-button--tab-active-box-shadow);
+  color: var(--bscpn-button--tab-active-color);
 }
 .bs-at-button--tab[aria-current],
 .bs-at-button--tab[aria-expanded='true'],
 .bs-at-button--tab[aria-pressed='true'],
 .bs-at-button--tab[aria-selected='true'] {
-  background-color: var(--bscpn-at-button--tab-pressed-background-color);
-  border-color: var(--bscpn-at-button--tab-pressed-border-color);
-  box-shadow: var(--bscpn-at-button--tab-pressed-box-shadow);
-  color: var(--bscpn-at-button--tab-pressed-color);
+  background-color: var(--bscpn-button--tab-pressed-background-color);
+  border-color: var(--bscpn-button--tab-pressed-border-color);
+  box-shadow: var(--bscpn-button--tab-pressed-box-shadow);
+  color: var(--bscpn-button--tab-pressed-color);
 }
 .bs-at-button--tab:disabled,
 .bs-at-button--tab:disabled:focus,
@@ -1680,29 +1672,29 @@ table {
 .bs-at-button--tab[aria-disabled='true'],
 .bs-at-button--tab[aria-disabled='true']:focus,
 .bs-at-button--tab[aria-disabled='true']:hover {
-  background-color: var(--bscpn-at-button--tab-disabled-background-color);
-  border-color: var(--bscpn-at-button--tab-disabled-border-color);
-  box-shadow: var(--bscpn-at-button--tab-disabled-box-shadow);
-  color: var(--bscpn-at-button--tab-disabled-color);
+  background-color: var(--bscpn-button--tab-disabled-background-color);
+  border-color: var(--bscpn-button--tab-disabled-border-color);
+  box-shadow: var(--bscpn-button--tab-disabled-box-shadow);
+  color: var(--bscpn-button--tab-disabled-color);
 }
 :root,
 [data-theme='default'] {
-  --bscpn-at-button--tab-color: var(--bscpn-color-grayscale-dark-1);
-  --bscpn-at-button--tab-background-color: transparent;
-  --bscpn-at-button--tab-box-shadow: none;
-  --bscpn-at-button--tab-icon-color: var(--bscpn-color-grayscale-dark-2);
-  --bscpn-at-button--tab-hover-color: var(--bscpn-color-brand-1-dark-1);
-  --bscpn-at-button--tab-hover-background-color: transparent;
-  --bscpn-at-button--tab-hover-box-shadow: none;
-  --bscpn-at-button--tab-active-color: var(--bscpn-color-brand-1-dark-1);
-  --bscpn-at-button--tab-active-background-color: transparent;
-  --bscpn-at-button--tab-active-box-shadow: none;
-  --bscpn-at-button--tab-pressed-color: var(--bscpn-color-brand-1-dark-2);
-  --bscpn-at-button--tab-pressed-background-color: transparent;
-  --bscpn-at-button--tab-pressed-box-shadow: none;
-  --bscpn-at-button--tab-disabled-color: var(--bscpn-color-grayscale-base);
-  --bscpn-at-button--tab-disabled-background-color: transparent;
-  --bscpn-at-button--tab-disabled-box-shadow: none;
+  --bscpn-button--tab-color: var(--bscpn-color-grayscale-dark-1);
+  --bscpn-button--tab-background-color: transparent;
+  --bscpn-button--tab-box-shadow: none;
+  --bscpn-button--tab-icon-color: var(--bscpn-color-grayscale-dark-2);
+  --bscpn-button--tab-hover-color: var(--bscpn-color-brand-1-dark-1);
+  --bscpn-button--tab-hover-background-color: transparent;
+  --bscpn-button--tab-hover-box-shadow: none;
+  --bscpn-button--tab-active-color: var(--bscpn-color-brand-1-dark-1);
+  --bscpn-button--tab-active-background-color: transparent;
+  --bscpn-button--tab-active-box-shadow: none;
+  --bscpn-button--tab-pressed-color: var(--bscpn-color-brand-1-dark-2);
+  --bscpn-button--tab-pressed-background-color: transparent;
+  --bscpn-button--tab-pressed-box-shadow: none;
+  --bscpn-button--tab-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-button--tab-disabled-background-color: transparent;
+  --bscpn-button--tab-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
   --bscpn-button--tab-color: var(--bscpn-color-grayscale-light-2);
@@ -1723,25 +1715,25 @@ table {
 }
 .bs-at-button--danger:focus,
 .bs-at-button--danger:hover {
-  background-color: var(--bscpn-at-button--danger-hover-background-color);
-  border-color: var(--bscpn-at-button--danger-hover-border-color);
-  box-shadow: var(--bscpn-at-button--danger-hover-box-shadow);
-  color: var(--bscpn-at-button--danger-hover-color);
+  background-color: var(--bscpn-button--danger-hover-background-color);
+  border-color: var(--bscpn-button--danger-hover-border-color);
+  box-shadow: var(--bscpn-button--danger-hover-box-shadow);
+  color: var(--bscpn-button--danger-hover-color);
 }
 .bs-at-button--danger:active {
-  background-color: var(--bscpn-at-button--danger-active-background-color);
-  border-color: var(--bscpn-at-button--danger-active-border-color);
-  box-shadow: var(--bscpn-at-button--danger-active-box-shadow);
-  color: var(--bscpn-at-button--danger-active-color);
+  background-color: var(--bscpn-button--danger-active-background-color);
+  border-color: var(--bscpn-button--danger-active-border-color);
+  box-shadow: var(--bscpn-button--danger-active-box-shadow);
+  color: var(--bscpn-button--danger-active-color);
 }
 .bs-at-button--danger[aria-current],
 .bs-at-button--danger[aria-expanded='true'],
 .bs-at-button--danger[aria-pressed='true'],
 .bs-at-button--danger[aria-selected='true'] {
-  background-color: var(--bscpn-at-button--danger-pressed-background-color);
-  border-color: var(--bscpn-at-button--danger-pressed-border-color);
-  box-shadow: var(--bscpn-at-button--danger-pressed-box-shadow);
-  color: var(--bscpn-at-button--danger-pressed-color);
+  background-color: var(--bscpn-button--danger-pressed-background-color);
+  border-color: var(--bscpn-button--danger-pressed-border-color);
+  box-shadow: var(--bscpn-button--danger-pressed-box-shadow);
+  color: var(--bscpn-button--danger-pressed-color);
 }
 :root,
 [data-theme='default'] {
@@ -1767,14 +1759,15 @@ table {
   --bscpn-button--danger-pressed-box-shadow: none;
 }
 .bs-at-button {
-  --bscpn-at-button-padding-vertical: var(--bscpn-size-s2);
-  --bscpn-at-button-padding-horizontal: var(--bscpn-size-l1);
-  --bscpn-at-button-border-width: 0rem;
-  --bscpn-at-button-border-radius: var(--bscpn-size-s4);
-  --bscpn-at-button-min-height: 1em;
-  --bscpn-at-button-min-width: 0;
-  --bscpn-at-button-font-size: var(--bscpn-font-size-2);
-  --bscpn-at-button-font-weight: 600;
+  --bscpn-button-padding-vertical: var(--bscpn-size-s2);
+  --bscpn-button-padding-horizontal: var(--bscpn-size-l1);
+  --bscpn-button-border-width: 0rem;
+  --bscpn-button-border-radius: var(--bscpn-size-s4);
+  --bscpn-button-min-height: 1em;
+  --bscpn-button-min-width: 0;
+  --bscpn-button-font-size: var(--bscpn-font-size-2);
+  --bscpn-button-font-weight: var(--bscpn-font-weight-semibold);
+  --bscpn-button-line-height: var(--bscpn-line-height-4);
 }
 .bs-at-button.bs-at-button--square {
   --bscpn-button-min-width: calc(
@@ -1787,11 +1780,11 @@ table {
   --bscpn-button-padding-vertical: var(--bscpn-size-s2);
 }
 .bs-at-button--small {
-  --bscpn-at-button-padding-vertical: var(--bscpn-size-s4);
-  --bscpn-at-button-padding-horizontal: var(--bscpn-size-m);
-  --bscpn-at-button-min-height: var(--bscpn-size-l1);
-  --bscpn-at-button-min-width: var(--bscpn-size-l2);
-  --bscpn-at-button-font-weight: 500;
+  --bscpn-button-padding-vertical: var(--bscpn-size-s4);
+  --bscpn-button-padding-horizontal: var(--bscpn-size-m);
+  --bscpn-button-min-height: var(--bscpn-size-l1);
+  --bscpn-button-min-width: var(--bscpn-size-l2);
+  --bscpn-button-font-weight: var(--bscpn-font-weight-medium);
 }
 .bs-at-button--small.bs-at-button--square {
   --bscpn-button-min-width: calc(
@@ -1804,9 +1797,9 @@ table {
   --bscpn-button-padding-vertical: var(--bscpn-size-s4);
 }
 .bs-at-button--x-small {
-  --bscpn-at-button-padding-vertical: var(--bscpn-size-s6);
-  --bscpn-at-button-padding-horizontal: var(--bscpn-size-s2);
-  --bscpn-at-button-font-weight: 500;
+  --bscpn-button-padding-vertical: var(--bscpn-size-s6);
+  --bscpn-button-padding-horizontal: var(--bscpn-size-s2);
+  --bscpn-button-font-weight: var(--bscpn-font-weight-medium);
 }
 .bs-at-button--x-small.bs-at-button--square {
   --bscpn-button-min-width: calc(
@@ -2483,25 +2476,69 @@ table {
 }
 .bs-or-joined-ui > .bs-at-button:first-child,
 .bs-or-joined-ui > :first-child .bs-at-button {
-  --bscpn-at-button-box-shadow: none;
-  --bscpn-at-button-border-top-right-radius: 0;
-  --bscpn-at-button-border-bottom-right-radius: 0;
-  margin-right: calc(var(--bscpn-at-button-border-width) * -1);
+  --bscpn-button-box-shadow: none;
+  --bscpn-button-border-top-right-radius: 0;
+  --bscpn-button-border-bottom-right-radius: 0;
+  margin-right: calc(var(--bscpn-button-border-width) * -1);
+}
+.bs-or-joined-ui > :first-child input,
+.bs-or-joined-ui > input:first-child {
+  --bscpn-input-text-box-shadow: none;
+  --bscpn-input-text-border-top-right-radius: 0;
+  --bscpn-input-text-border-bottom-right-radius: 0;
+  margin-right: calc(var(--bscpn-input-text-border-width) * -1);
+}
+.bs-or-joined-ui > :first-child select,
+.bs-or-joined-ui > select:first-child {
+  --bscpn-select-box-shadow: none;
+  --bscpn-select-border-top-right-radius: 0;
+  --bscpn-select-border-bottom-right-radius: 0;
+  margin-right: calc(var(--bscpn-select-border-width) * -1);
 }
 .bs-or-joined-ui > .bs-at-button:last-child,
 .bs-or-joined-ui > :last-child .bs-at-button {
-  --bscpn-at-button-box-shadow: none;
-  --bscpn-at-button-border-top-left-radius: 0;
-  --bscpn-at-button-border-bottom-left-radius: 0;
+  --bscpn-button-box-shadow: none;
+  --bscpn-button-border-top-left-radius: 0;
+  --bscpn-button-border-bottom-left-radius: 0;
+  margin-right: 0;
+}
+.bs-or-joined-ui > :last-child input,
+.bs-or-joined-ui > input:last-child {
+  --bscpn-input-text-box-shadow: none;
+  --bscpn-input-text-border-top-left-radius: 0;
+  --bscpn-input-text-border-bottom-left-radius: 0;
+  margin-right: 0;
+}
+.bs-or-joined-ui > :last-child select,
+.bs-or-joined-ui > select:last-child {
+  --bscpn-select-box-shadow: none;
+  --bscpn-select-border-top-left-radius: 0;
+  --bscpn-select-border-bottom-left-radius: 0;
   margin-right: 0;
 }
 .bs-or-joined-ui > .bs-at-button:not(:first-child):not(:last-child),
 .bs-or-joined-ui > :not(:first-child):not(:last-child) .bs-at-button {
-  --bscpn-at-button-border-top-left-radius: 0;
-  --bscpn-at-button-border-top-right-radius: 0;
-  --bscpn-at-button-border-bottom-right-radius: 0;
-  --bscpn-at-button-border-bottom-left-radius: 0;
-  margin-right: calc(var(--bscpn-at-button-border-width) * -1);
+  --bscpn-button-border-top-left-radius: 0;
+  --bscpn-button-border-top-right-radius: 0;
+  --bscpn-button-border-bottom-right-radius: 0;
+  --bscpn-button-border-bottom-left-radius: 0;
+  margin-right: calc(var(--bscpn-button-border-width) * -1);
+}
+.bs-or-joined-ui > :not(:first-child):not(:last-child) input,
+.bs-or-joined-ui > input:not(:first-child):not(:last-child) {
+  --bscpn-input-text-border-top-left-radius: 0;
+  --bscpn-input-text-border-top-right-radius: 0;
+  --bscpn-input-text-border-bottom-right-radius: 0;
+  --bscpn-input-text-border-bottom-left-radius: 0;
+  margin-right: calc(var(--bscpn-input-text-border-width) * -1);
+}
+.bs-or-joined-ui > :not(:first-child):not(:last-child) select,
+.bs-or-joined-ui > select:not(:first-child):not(:last-child) {
+  --bscpn-select-border-top-left-radius: 0;
+  --bscpn-select-border-top-right-radius: 0;
+  --bscpn-select-border-bottom-right-radius: 0;
+  --bscpn-select-border-bottom-left-radius: 0;
+  margin-right: calc(var(--bscpn-select-border-width) * -1);
 }
 .bs-aspect-ratio-10-10 {
   aspect-ratio: 1/1;
diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css
index d34322747..9bac9483a 100644
--- a/test/scss/fixtures/bitstyles.css
+++ b/test/scss/fixtures/bitstyles.css
@@ -671,12 +671,12 @@ label {
   align-items: baseline;
   cursor: pointer;
   display: flex;
-  font-weight: 500;
+  font-weight: var(--bs-font-weight-medium);
   gap: var(--bs-size-s7);
   margin-bottom: var(--bs-size-s7);
 }
 label[aria-disabled='true'] {
-  color: var(--bs-color-grayscale-base);
+  color: var(--bs-color-grayscale);
 }
 [type='color'] {
   height: calc(var(--bs-line-height-4) * 1em + var(--bs-size-s2));
@@ -714,13 +714,13 @@ img {
     border: 0.1875rem solid var(--bs-color-grayscale-dark-2);
     border-radius: var(--bs-size-s6);
     box-shadow: none;
-    color: var(--bs-color-grayscale-base);
+    color: var(--bs-color-grayscale);
   }
   [type='checkbox']:focus,
   [type='checkbox']:hover {
     background-color: var(--bs-color-grayscale-white);
     border-color: var(--bs-color-brand-1);
-    box-shadow: none;
+    box-shadow: var(--bs-shadow-brand-1);
     color: var(--bs-color-brand-1);
     outline-width: 0;
   }
@@ -759,7 +759,7 @@ img {
   [type='checkbox']:checked {
     background-color: var(--bs-color-brand-1-dark-1);
     border-color: var(--bs-color-brand-1-dark-1);
-    box-shadow: var(--bs-shadow-brand-1);
+    box-shadow: none;
     color: var(--bs-color-grayscale-white);
   }
   [type='checkbox']:checked:after {
@@ -770,7 +770,7 @@ img {
   [type='checkbox'][aria-invalid='true'] {
     background-color: var(--bs-color-brand-1);
     border-color: var(--bs-color-brand-1);
-    box-shadow: none;
+    box-shadow: var(--bs-shadow-warning);
     color: var(--bs-color-grayscale-white);
   }
   [type='checkbox'][disabled] {
@@ -821,9 +821,9 @@ img {
 ) {
   [type='radio'] {
     background-color: var(--bs-color-grayscale-white);
-    border: 0.1875rem solid var(--bs-color-grayscale);
+    border: 0.1875rem solid var(--bs-color-grayscale-dark-2);
     border-radius: 9999rem;
-    box-shadow: none;
+    box-shadow: var(--bs-shadow-brand-1);
     color: var(--bs-color-grayscale-light-1);
   }
   [type='radio']:after {
@@ -875,7 +875,7 @@ img {
   [type='radio'][aria-invalid='true'] {
     background-color: var(--bs-color-grayscale-white);
     border-color: var(--bs-color-warning-dark-1);
-    box-shadow: none;
+    box-shadow: var(--bs-shadow-warning);
     color: var(--bs-color-warning-dark-4);
   }
   [type='radio'][disabled] {
@@ -1008,14 +1008,7 @@ textarea:focus,
 textarea:hover {
   background-color: var(--bs-color-grayscale-white);
   border-color: var(--bs-color-grayscale-dark-2);
-  box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
-      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bs-size-s4) / 3)
-      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bs-size-s4) / 2)
-      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bs-size-s4) / 1)
-      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075);
+  box-shadow: none;
   color: var(--bs-color-grayscale-dark-4);
 }
 [type='date']:focus::-moz-placeholder,
@@ -1107,14 +1100,7 @@ textarea:focus-visible {
 textarea:active {
   background-color: var(--bs-color-grayscale-white);
   border-color: var(--bs-color-brand-1-dark-1);
-  box-shadow: 0 0 calc(var(--bs-size-s4) / 4)
-      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bs-size-s4) / 3)
-      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bs-size-s4) / 2)
-      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bs-size-s4) / 1)
-      rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075);
+  box-shadow: none;
   color: var(--bs-color-grayscale-dark-4);
   outline-width: 0;
 }
@@ -1373,7 +1359,7 @@ textarea:focus:not(:focus-visible) {
   select:invalid,
   select[aria-invalid='true'] {
     background-color: var(--bs-color-grayscale-white);
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-warning-base)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-warning)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
     border-color: var(--bs-color-warning);
     box-shadow: none;
     color: var(--bs-color-warning);
diff --git a/test/scss/test-use-all.scss b/test/scss/test-use-all.scss
index 002b139e2..64b842f97 100644
--- a/test/scss/test-use-all.scss
+++ b/test/scss/test-use-all.scss
@@ -68,6 +68,10 @@
     'brand-2': (
       ('color': #00f, 'offset': 2.5rem, 'blur-radius': 5rem),
       ('color': #00f, 'offset': 5rem, 'blur-radius': 10rem),
+    ),
+    'warning': (
+      ('color': #0f0, 'offset': 2.5rem, 'blur-radius': 5rem),
+      ('color': #0f0, 'offset': 5rem, 'blur-radius': 5rem),
     )
   ),
   $themes-themes: (
diff --git a/test/scss/test-use-each.scss b/test/scss/test-use-each.scss
index 3950b6aac..f5c6f9f5b 100644
--- a/test/scss/test-use-each.scss
+++ b/test/scss/test-use-each.scss
@@ -86,6 +86,10 @@
       ('color': #00f, 'offset': 2.5rem, 'blur-radius': 5rem),
       ('color': #00f, 'offset': 5rem, 'blur-radius': 10rem),
     ),
+    'warning': (
+      ('color': #0f0, 'offset': 2.5rem, 'blur-radius': 5rem),
+      ('color': #0f0, 'offset': 5rem, 'blur-radius': 5rem),
+    )
   )
 );
 @use '../../scss/bitstyles/design-tokens/typography' with (
diff --git a/test/scss/test-use-layers.scss b/test/scss/test-use-layers.scss
index b5c5466e1..f6dae617f 100644
--- a/test/scss/test-use-layers.scss
+++ b/test/scss/test-use-layers.scss
@@ -70,6 +70,10 @@
     'brand-2': (
       ('color': #00f, 'offset': 2.5rem, 'blur-radius': 5rem),
       ('color': #00f, 'offset': 5rem, 'blur-radius': 10rem),
+    ),
+    'warning': (
+      ('color': #0f0, 'offset': 2.5rem, 'blur-radius': 5rem),
+      ('color': #0f0, 'offset': 5rem, 'blur-radius': 5rem),
     )
   ),
   $typography-webfont-family-name: 'FakeFont',

From adad5bc0e0a0966d322a58e56a9ec42a9cd9634e Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Wed, 2 Aug 2023 17:02:06 +0200
Subject: [PATCH 16/21] Correct invalid states

---
 .../base/forms/input-checkbox.stories.js      |   8 +
 .../base/forms/input-radio.stories.js         |   8 +
 .../bitstyles/base/input-checkbox/_index.scss |   7 +
 .../base/input-checkbox/_settings.scss        |  20 +-
 scss/bitstyles/base/input-radio/_index.scss   |  12 +
 .../bitstyles/base/input-radio/_settings.scss |  10 +-
 .../bitstyles/design-tokens/_breakpoints.scss |   8 +-
 test/scss/fixtures/bitstyles-overrides.css    | 646 ++++++++++++------
 8 files changed, 492 insertions(+), 227 deletions(-)

diff --git a/scss/bitstyles/base/forms/input-checkbox.stories.js b/scss/bitstyles/base/forms/input-checkbox.stories.js
index b06778257..827214e35 100644
--- a/scss/bitstyles/base/forms/input-checkbox.stories.js
+++ b/scss/bitstyles/base/forms/input-checkbox.stories.js
@@ -45,6 +45,10 @@ Invalid.args = {
   ariaInvalid: true,
   label: 'Unchecked invalid',
 };
+Invalid.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=645a598e4880c213a3197320',
+};
 
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -89,6 +93,10 @@ CheckedInvalid.args = {
   ariaInvalid: true,
   label: 'Checked invalid',
 };
+CheckedInvalid.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=645a59a5d47c930dfb98d064',
+};
 
 export const CheckedDisabled = Template.bind({});
 CheckedDisabled.args = {
diff --git a/scss/bitstyles/base/forms/input-radio.stories.js b/scss/bitstyles/base/forms/input-radio.stories.js
index 389de436e..570ad8ce8 100644
--- a/scss/bitstyles/base/forms/input-radio.stories.js
+++ b/scss/bitstyles/base/forms/input-radio.stories.js
@@ -41,6 +41,10 @@ Base.parameters = {
 
 export const Invalid = Template.bind({});
 Invalid.args = { type: 'radio', ariaInvalid: true, label: 'Unchecked invalid' };
+Invalid.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=645a5888f64b970e42359dbc',
+};
 
 export const Disabled = Template.bind({});
 Disabled.args = { type: 'radio', disabled: true, label: 'Unchecked disabled' };
@@ -77,6 +81,10 @@ CheckedInvalid.args = {
   ariaInvalid: true,
   label: 'Checked invalid',
 };
+CheckedInvalid.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=645a58805b9d821337cb7b6c',
+};
 
 export const CheckedDisabled = Template.bind({});
 CheckedDisabled.args = {
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
index e55bf8d30..9464b8bde 100644
--- a/scss/bitstyles/base/input-checkbox/_index.scss
+++ b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -89,6 +89,13 @@
       background-color: settings.$background-color-invalid;
       box-shadow: settings.$box-shadow-invalid;
       color: settings.$color-invalid;
+
+      &:checked {
+        border-color: settings.$border-color-invalid-checked;
+        background-color: settings.$background-color-invalid-checked;
+        box-shadow: settings.$box-shadow-invalid-checked;
+        color: settings.$color-invalid-checked;
+      }
     }
 
     &[disabled] {
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index 3989feb98..d92ebfaac 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -47,7 +47,7 @@ $border-color-checked: var(
   design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
 $background-image-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-checked: none !default;
+$box-shadow-checked: var(design-token.get('shadow', 'brand-1', 'box')) !default;
 
 //
 // Checked hover colors ////////////////////////////////////////
@@ -72,16 +72,16 @@ $background-color-checked-active: var(
 $border-color-checked-active: var(
   design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
-$background-image-checked-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
+$background-image-checked-active: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='var(#{design-token.get('color', 'grayscale', 'white')})' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
 $box-shadow-checked-active: none !default;
 
 //
 // Invalid colors ////////////////////////////////////////
 $color-invalid: var(design-token.get('color', 'grayscale', 'white')) !default;
-$background-color-invalid: var(design-token.get('color', 'brand-1')) !default;
-$border-color-invalid: var(design-token.get('color', 'brand-1')) !default;
-$background-image-invalid: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-invalid: var(design-token.get('shadow', 'warning')) !default;
+$background-color-invalid: var(design-token.get('color', 'grayscale', 'white')) !default;
+$border-color-invalid: var(design-token.get('color', 'warning', 'dark-1')) !default;
+$background-image-invalid: none !default;
+$box-shadow-invalid: var(design-token.get('shadow', 'warning', 'box')) !default;
 
 //
 // Invalid checked colors ////////////////////////////////////////
@@ -89,13 +89,13 @@ $color-invalid-checked: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $background-color-invalid-checked: var(
-  design-token.get('color', 'brand-1')
+  design-token.get('color', 'warning', 'dark-1')
 ) !default;
 $border-color-invalid-checked: var(
-  design-token.get('color', 'brand-1')
+  design-token.get('color', 'warning', 'dark-1')
 ) !default;
-$background-image-invalid-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{color.url-encode-color(#ffffff)}' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-invalid-checked: var(design-token.get('shadow', 'warning')) !default;
+$background-image-invalid-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='var(#{design-token.get('color', 'grayscale', 'white')})' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
+$box-shadow-invalid-checked: var(design-token.get('shadow', 'warning', 'box')) !default;
 
 //
 // Disabled colors ////////////////////////////////////////
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index a6adae975..6b3bc78b1 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -83,6 +83,10 @@
       background-color: settings.$background-color-invalid;
       box-shadow: settings.$box-shadow-invalid;
       color: settings.$color-invalid;
+
+      &::after {
+        background: settings.$color-invalid;
+      }
     }
 
     &[disabled] {
@@ -115,6 +119,10 @@
       background-color: settings.$background-color-checked-hover;
       box-shadow: settings.$box-shadow-checked-hover;
       color: settings.$color-checked-hover;
+
+      &::after {
+        background: settings.$color-checked-hover;
+      }
     }
 
     &:checked:active:not(:invalid),
@@ -123,6 +131,10 @@
       background-color: settings.$background-color-checked-active;
       box-shadow: settings.$box-shadow-checked-active;
       color: settings.$color-checked-active;
+
+      &::after {
+        background: settings.$color-checked-active;
+      }
     }
   }
 }
diff --git a/scss/bitstyles/base/input-radio/_settings.scss b/scss/bitstyles/base/input-radio/_settings.scss
index 83e8b71ea..fcee0c4d1 100644
--- a/scss/bitstyles/base/input-radio/_settings.scss
+++ b/scss/bitstyles/base/input-radio/_settings.scss
@@ -15,7 +15,7 @@ $background-color: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color: var(design-token.get('color', 'grayscale', 'dark-2')) !default;
-$box-shadow: var(design-token.get('shadow', 'brand-1')) !default;
+$box-shadow: var(design-token.get('shadow', 'brand-1', 'box')) !default;
 
 //
 // Hover colors ////////////////////////////////////////
@@ -46,7 +46,7 @@ $background-color-checked: var(
 $border-color-checked: var(
   design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
-$box-shadow-checked: var(design-token.get('shadow', 'brand-1')) !default;
+$box-shadow-checked: var(design-token.get('shadow', 'brand-1', 'box')) !default;
 
 //
 // Checked hover colors ////////////////////////////////////////
@@ -64,21 +64,21 @@ $background-color-checked-active: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-checked-active: var(
-  design-token.get('color', 'brand-1')
+  design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
 $box-shadow-checked-active: none !default;
 
 //
 // Invalid colors ////////////////////////////////////////
 
-$color-invalid: var(design-token.get('color', 'warning', 'dark-4')) !default;
+$color-invalid: var(design-token.get('color', 'warning', 'dark-1')) !default;
 $background-color-invalid: var(
   design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-invalid: var(
   design-token.get('color', 'warning', 'dark-1')
 ) !default;
-$box-shadow-invalid: var(design-token.get('shadow', 'warning')) !default;
+$box-shadow-invalid: var(design-token.get('shadow', 'warning', 'box')) !default;
 
 //
 // Disabled colors ////////////////////////////////////////
diff --git a/scss/bitstyles/design-tokens/_breakpoints.scss b/scss/bitstyles/design-tokens/_breakpoints.scss
index 8ae5e335c..50219eb6d 100644
--- a/scss/bitstyles/design-tokens/_breakpoints.scss
+++ b/scss/bitstyles/design-tokens/_breakpoints.scss
@@ -2,13 +2,13 @@
 
 $boundary-width: 0.0625em !default;
 $s-m-boundary: 30em !default;
-$m-l2-boundary: 55em !default;
-$l-l3-boundary: 95em !default;
+$m-l-boundary: 55em !default;
+$l-xl-boundary: 95em !default;
 $breakpoints: (
   's': 'screen and (max-width: #{$s-m-boundary - $boundary-width})',
   'm': 'screen and (min-width: #{$s-m-boundary})',
-  'l': 'screen and (min-width: #{$m-l2-boundary})',
-  'xl': 'screen and (min-width: #{$l-l3-boundary})',
+  'l': 'screen and (min-width: #{$m-l-boundary})',
+  'xl': 'screen and (min-width: #{$l-xl-boundary})',
   'hidpi':
     '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
   'landscape': 'all and (orientation:landscape)',
diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css
index 1a9e15c27..63c47489b 100644
--- a/test/scss/fixtures/bitstyles-overrides.css
+++ b/test/scss/fixtures/bitstyles-overrides.css
@@ -102,6 +102,9 @@
   --bscpn-shadow-brand-2-drop: drop-shadow(#00f 0 2.5rem 5rem)
     drop-shadow(#00f 0 5rem 10rem);
   --bscpn-shadow-brand-2-box: 0 2.5rem 5rem #00f, 0 5rem 10rem #00f;
+  --bscpn-shadow-warning-drop: drop-shadow(#0f0 0 2.5rem 5rem)
+    drop-shadow(#0f0 0 5rem 5rem);
+  --bscpn-shadow-warning-box: 0 2.5rem 5rem #0f0, 0 5rem 5rem #0f0;
 }
 :root {
   --bscpn-font-size-1: 0.75rem;
@@ -424,12 +427,12 @@ label {
   align-items: baseline;
   cursor: pointer;
   display: flex;
-  font-weight: 500;
+  font-weight: var(--bscpn-font-weight-medium);
   gap: var(--bscpn-size-s7);
   margin-bottom: var(--bscpn-size-s7);
 }
 label[aria-disabled='true'] {
-  color: var(--bscpn-color-grayscale-base);
+  color: var(--bscpn-color-grayscale);
 }
 [type='color'] {
   height: calc(var(--bscpn-line-height-4) * 1em + var(--bscpn-size-s2));
@@ -464,16 +467,29 @@ img {
 ) {
   [type='checkbox'] {
     background-color: var(--bscpn-color-grayscale-white);
-    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base);
+    border: 0.1875rem solid var(--bscpn-color-grayscale-dark-2);
     border-radius: 10rem;
-    color: var(--bscpn-color-grayscale-base);
+    box-shadow: none;
+    color: var(--bscpn-color-grayscale);
   }
   [type='checkbox']:focus,
   [type='checkbox']:hover {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1-base);
-    color: var(--bscpn-color-brand-1-base);
-    outline: none;
+    border-color: var(--bscpn-color-brand-1);
+    box-shadow: var(--bscpn-shadow-brand-1);
+    color: var(--bscpn-color-brand-1);
+    outline-width: 0;
+  }
+  [type='checkbox']:focus-visible {
+    outline: var(--bscpn-color-brand-2) solid
+      calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2);
+    outline-offset: var(--bscpn-size-s7);
+  }
+  [type='checkbox']:active {
+    background-color: var(--bscpn-color-grayscale-white);
+    border-color: var(--bscpn-color-brand-1-dark-1);
+    box-shadow: none;
+    color: var(--bscpn-color-brand-1-dark-1);
   }
   [type='checkbox']:after {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M83.07 11.71 38.66 56.3 16.93 34.49 1 50.48l37.65 37.81L99 27.7z'/%3E%3C/svg%3E");
@@ -485,12 +501,21 @@ img {
     height: 100%;
     opacity: 0;
     transform: scale(0.7);
-    transition: opacity 0.0375s ease-out 75ms, transform 0.0375s ease-out 75ms;
+    transition: opacity calc(var(--bscpn-transition-default-duration) / 2)
+        var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing),
+      transform calc(var(--bscpn-transition-default-duration) / 2)
+        var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing),
+      outline-offset calc(var(--bscpn-transition-default-duration) / 2)
+        var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing);
     width: 100%;
   }
   [type='checkbox']:checked {
-    background-color: var(--bscpn-color-brand-1-base);
-    border-color: var(--bscpn-color-brand-1-base);
+    background-color: var(--bscpn-color-brand-1-dark-1);
+    border-color: var(--bscpn-color-brand-1-dark-1);
+    box-shadow: none;
     color: var(--bscpn-color-grayscale-white);
   }
   [type='checkbox']:checked:after {
@@ -499,9 +524,9 @@ img {
   }
   [type='checkbox']:invalid,
   [type='checkbox'][aria-invalid='true'] {
-    background-color: var(--bscpn-color-brand-1-base);
-    border-color: var(--bscpn-color-brand-1-base);
-    box-shadow: none;
+    background-color: var(--bscpn-color-brand-1);
+    border-color: var(--bscpn-color-brand-1);
+    box-shadow: var(--bscpn-shadow-warning);
     color: var(--bscpn-color-grayscale-white);
   }
   [type='checkbox'][disabled] {
@@ -520,14 +545,14 @@ img {
   [type='checkbox']:checked:focus:not([aria-invalid='true']),
   [type='checkbox']:checked:hover:not(:invalid),
   [type='checkbox']:checked:hover:not([aria-invalid='true']) {
-    background-color: var(--bscpn-color-brand-1-base);
-    border-color: var(--bscpn-color-brand-1-base);
+    background-color: var(--bscpn-color-brand-1);
+    border-color: var(--bscpn-color-brand-1);
     box-shadow: none;
     color: var(--bscpn-color-grayscale-white);
   }
   [type='checkbox']:checked:active:not(:invalid),
   [type='checkbox']:checked:active:not([aria-invalid='true']) {
-    background-color: var(--bscpn-color-brand-1-base);
+    background-color: var(--bscpn-color-brand-1);
     border-color: var(--bscpn-color-brand-1-dark-1);
     box-shadow: none;
     color: var(--bscpn-color-grayscale-white);
@@ -552,43 +577,50 @@ img {
 ) {
   [type='radio'] {
     background-color: var(--bscpn-color-grayscale-white);
-    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base);
+    border: 0.1875rem solid var(--bscpn-color-grayscale-dark-2);
     border-radius: 10rem;
-    box-shadow: none;
+    box-shadow: var(--bscpn-shadow-brand-1);
     color: var(--bscpn-color-grayscale-light-1);
   }
   [type='radio']:after {
-    background: var(--bscpn-color-brand-1-base);
+    background: var(--bscpn-color-brand-1-dark-1);
     border-radius: 10rem;
     content: '';
     display: block;
     height: 100%;
     opacity: 0;
     transform: scale(0.5);
-    transition: opacity 75ms ease-out, transform 75ms ease-out;
+    transition: opacity var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing),
+      transform var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing),
+      outline-offset var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing);
     width: 100%;
   }
   [type='radio']:focus,
   [type='radio']:hover {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1-base);
-    color: var(--bscpn-color-brand-1-base);
-    outline: none;
+    border-color: var(--bscpn-color-brand-1);
+    box-shadow: none;
+    color: var(--bscpn-color-brand-1);
+    outline-width: 0;
   }
   [type='radio']:focus-visible {
-    outline: var(--bscpn-color-brand-2-base) solid
+    outline: var(--bscpn-color-brand-2) solid
       calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2);
     outline-offset: var(--bscpn-size-s7);
   }
   [type='radio']:active {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1-base);
-    color: var(--bscpn-color-brand-1-base);
+    border-color: var(--bscpn-color-brand-1-dark-1);
+    box-shadow: none;
+    color: var(--bscpn-color-brand-1);
   }
   [type='radio']:checked {
     background-color: var(--bscpn-color-grayscale-white);
     border-color: var(--bscpn-color-brand-1-dark-1);
-    box-shadow: var(--bscpn-shadow-default-box);
+    box-shadow: var(--bscpn-shadow-brand-1);
     color: var(--bscpn-color-brand-1-dark-1);
   }
   [type='radio']:checked:after {
@@ -599,7 +631,7 @@ img {
   [type='radio'][aria-invalid='true'] {
     background-color: var(--bscpn-color-grayscale-white);
     border-color: var(--bscpn-color-warning-dark-1);
-    box-shadow: none;
+    box-shadow: var(--bscpn-shadow-warning);
     color: var(--bscpn-color-warning-dark-4);
   }
   [type='radio'][disabled] {
@@ -625,37 +657,43 @@ img {
   [type='radio']:checked:hover:not(:invalid),
   [type='radio']:checked:hover:not([aria-invalid='true']) {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1-base);
+    border-color: var(--bscpn-color-brand-1);
     box-shadow: none;
-    color: var(--bscpn-color-brand-1-base);
+    color: var(--bscpn-color-brand-1);
   }
   [type='radio']:checked:active:not(:invalid),
   [type='radio']:checked:active:not([aria-invalid='true']) {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1-base);
+    border-color: var(--bscpn-color-brand-1);
     box-shadow: none;
-    color: var(--bscpn-color-brand-1-base);
+    color: var(--bscpn-color-brand-1);
   }
 }
 input,
 textarea {
   outline-offset: 0;
   resize: vertical;
-  transition: color 75ms ease-out, background-color 75ms ease-out,
-    border 75ms ease-out;
+  transition: color var(--bscpn-transition-default-duration)
+      var(--bscpn-transition-default-easing),
+    background-color var(--bscpn-transition-default-duration)
+      var(--bscpn-transition-default-easing),
+    border var(--bscpn-transition-default-duration)
+      var(--bscpn-transition-default-easing),
+    outline-offset var(--bscpn-transition-default-duration)
+      var(--bscpn-transition-default-easing);
 }
 input::-moz-placeholder,
 textarea::-moz-placeholder {
-  color: var(--bscpn-color-grayscale-light-1);
-  font-style: italic;
-  font-weight: 400;
+  color: var(--bscpn-color-grayscale);
+  font-style: normal;
+  font-weight: var(--bscpn-font-weight-normal);
   opacity: 1;
 }
 input::placeholder,
 textarea::placeholder {
-  color: var(--bscpn-color-grayscale-light-1);
-  font-style: italic;
-  font-weight: 400;
+  color: var(--bscpn-color-grayscale);
+  font-style: normal;
+  font-weight: var(--bscpn-font-weight-normal);
   opacity: 1;
 }
 [type='date'],
@@ -679,18 +717,15 @@ textarea {
   --bscpn-input-text-padding-horizontal: var(--bscpn-size-m);
   --bscpn-input-text-border-width: 0.1875rem;
   background-color: var(--bscpn-color-grayscale-white);
-  border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base);
-  border-radius: 10rem;
-  box-shadow: 0 0 calc(var(--bscpn-size-s5) / 4)
-      rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025),
-    0 0 calc(var(--bscpn-size-s5) / 3)
-      rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025),
-    0 0 calc(var(--bscpn-size-s5) / 2)
-      rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025),
-    0 0 calc(var(--bscpn-size-s5) / 1)
-      rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025);
-  color: var(--bscpn-color-grayscale-base);
-  display: block;
+  border: 0.1875rem solid var(--bscpn-color-grayscale-dark-1);
+  border-radius: var(--bscpn-input-text-border-top-left-radius)
+    var(--bscpn-input-text-border-top-right-radius)
+    var(--bscpn-input-text-border-bottom-right-radius)
+    var(--bscpn-input-text-border-bottom-left-radius);
+  box-shadow: none;
+  color: var(--bscpn-color-grayscale-dark-4);
+  display: flex;
+  flex-grow: 1;
   font: inherit;
   padding: calc(
       var(--bscpn-input-text-padding-vertical) -
@@ -727,16 +762,37 @@ textarea {
 [type='week']:hover,
 textarea:focus,
 textarea:hover {
-  background-color: var(--bscpn-color-grayscale-base);
-  border-color: var(--bscpn-color-grayscale-dark-1);
-  box-shadow: 0 0 calc(var(--bscpn-size-s2) / 4)
-      rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025),
-    0 0 calc(var(--bscpn-size-s2) / 3)
-      rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025),
-    0 0 calc(var(--bscpn-size-s2) / 2)
-      rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025),
-    0 0 calc(var(--bscpn-size-s2) / 1)
-      rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025);
+  background-color: var(--bscpn-color-grayscale-white);
+  border-color: var(--bscpn-color-grayscale-dark-2);
+  box-shadow: none;
+  color: var(--bscpn-color-grayscale-dark-4);
+}
+[type='date']:focus::-moz-placeholder,
+[type='date']:hover::-moz-placeholder,
+[type='datetime-local']:focus::-moz-placeholder,
+[type='datetime-local']:hover::-moz-placeholder,
+[type='email']:focus::-moz-placeholder,
+[type='email']:hover::-moz-placeholder,
+[type='month']:focus::-moz-placeholder,
+[type='month']:hover::-moz-placeholder,
+[type='number']:focus::-moz-placeholder,
+[type='number']:hover::-moz-placeholder,
+[type='password']:focus::-moz-placeholder,
+[type='password']:hover::-moz-placeholder,
+[type='search']:focus::-moz-placeholder,
+[type='search']:hover::-moz-placeholder,
+[type='tel']:focus::-moz-placeholder,
+[type='tel']:hover::-moz-placeholder,
+[type='text']:focus::-moz-placeholder,
+[type='text']:hover::-moz-placeholder,
+[type='time']:focus::-moz-placeholder,
+[type='time']:hover::-moz-placeholder,
+[type='url']:focus::-moz-placeholder,
+[type='url']:hover::-moz-placeholder,
+[type='week']:focus::-moz-placeholder,
+[type='week']:hover::-moz-placeholder,
+textarea:focus::-moz-placeholder,
+textarea:hover::-moz-placeholder {
   color: var(--bscpn-color-grayscale-dark-1);
 }
 [type='date']:focus::placeholder,
@@ -780,7 +836,7 @@ textarea:hover::placeholder {
 [type='url']:focus-visible,
 [type='week']:focus-visible,
 textarea:focus-visible {
-  outline: var(--bscpn-color-brand-2-base) solid
+  outline: var(--bscpn-color-brand-2) solid
     calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2);
   outline-offset: var(--bscpn-size-s7);
   z-index: 3;
@@ -800,14 +856,7 @@ textarea:focus-visible {
 textarea:active {
   background-color: var(--bscpn-color-grayscale-white);
   border-color: var(--bscpn-color-brand-1-dark-1);
-  box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4)
-      rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bscpn-size-s4) / 3)
-      rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bscpn-size-s4) / 2)
-      rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075),
-    0 0 calc(var(--bscpn-size-s4) / 1)
-      rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075);
+  box-shadow: none;
   color: var(--bscpn-color-grayscale-dark-4);
   outline-width: 0;
 }
@@ -824,7 +873,7 @@ textarea:active {
 [type='url']:active::-moz-placeholder,
 [type='week']:active::-moz-placeholder,
 textarea:active::-moz-placeholder {
-  color: var(--bscpn-color-brand-1-base);
+  color: var(--bscpn-color-brand-1);
 }
 [type='date']:active::placeholder,
 [type='datetime-local']:active::placeholder,
@@ -839,7 +888,7 @@ textarea:active::-moz-placeholder {
 [type='url']:active::placeholder,
 [type='week']:active::placeholder,
 textarea:active::placeholder {
-  color: var(--bscpn-color-brand-1-base);
+  color: var(--bscpn-color-brand-1);
 }
 [type='date']:invalid,
 [type='date'][aria-invalid='true'],
@@ -868,16 +917,65 @@ textarea:active::placeholder {
 textarea:invalid,
 textarea[aria-invalid='true'] {
   background-color: var(--bscpn-color-grayscale-white);
-  border-color: var(--bscpn-color-warning-base);
-  box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4)
-      rgba(var(--bscpn-color-warning-base-rgb), 0.05),
-    0 0 calc(var(--bscpn-size-s4) / 3)
-      rgba(var(--bscpn-color-warning-base-rgb), 0.05),
-    0 0 calc(var(--bscpn-size-s4) / 2)
-      rgba(var(--bscpn-color-warning-base-rgb), 0.05),
-    0 0 calc(var(--bscpn-size-s4) / 1)
-      rgba(var(--bscpn-color-warning-base-rgb), 0.05);
-  color: var(--bscpn-color-warning-base);
+  border-color: var(--bscpn-color-warning-dark-1);
+  box-shadow: none;
+  color: var(--bscpn-color-warning-dark-4);
+}
+[type='date']:invalid::-moz-placeholder,
+[type='date'][aria-invalid='true']::-moz-placeholder,
+[type='datetime-local']:invalid::-moz-placeholder,
+[type='datetime-local'][aria-invalid='true']::-moz-placeholder,
+[type='email']:invalid::-moz-placeholder,
+[type='email'][aria-invalid='true']::-moz-placeholder,
+[type='month']:invalid::-moz-placeholder,
+[type='month'][aria-invalid='true']::-moz-placeholder,
+[type='number']:invalid::-moz-placeholder,
+[type='number'][aria-invalid='true']::-moz-placeholder,
+[type='password']:invalid::-moz-placeholder,
+[type='password'][aria-invalid='true']::-moz-placeholder,
+[type='search']:invalid::-moz-placeholder,
+[type='search'][aria-invalid='true']::-moz-placeholder,
+[type='tel']:invalid::-moz-placeholder,
+[type='tel'][aria-invalid='true']::-moz-placeholder,
+[type='text']:invalid::-moz-placeholder,
+[type='text'][aria-invalid='true']::-moz-placeholder,
+[type='time']:invalid::-moz-placeholder,
+[type='time'][aria-invalid='true']::-moz-placeholder,
+[type='url']:invalid::-moz-placeholder,
+[type='url'][aria-invalid='true']::-moz-placeholder,
+[type='week']:invalid::-moz-placeholder,
+[type='week'][aria-invalid='true']::-moz-placeholder,
+textarea:invalid::-moz-placeholder,
+textarea[aria-invalid='true']::-moz-placeholder {
+  color: var(--bscpn-color-brand-1-light-1);
+}
+[type='date']:invalid::placeholder,
+[type='date'][aria-invalid='true']::placeholder,
+[type='datetime-local']:invalid::placeholder,
+[type='datetime-local'][aria-invalid='true']::placeholder,
+[type='email']:invalid::placeholder,
+[type='email'][aria-invalid='true']::placeholder,
+[type='month']:invalid::placeholder,
+[type='month'][aria-invalid='true']::placeholder,
+[type='number']:invalid::placeholder,
+[type='number'][aria-invalid='true']::placeholder,
+[type='password']:invalid::placeholder,
+[type='password'][aria-invalid='true']::placeholder,
+[type='search']:invalid::placeholder,
+[type='search'][aria-invalid='true']::placeholder,
+[type='tel']:invalid::placeholder,
+[type='tel'][aria-invalid='true']::placeholder,
+[type='text']:invalid::placeholder,
+[type='text'][aria-invalid='true']::placeholder,
+[type='time']:invalid::placeholder,
+[type='time'][aria-invalid='true']::placeholder,
+[type='url']:invalid::placeholder,
+[type='url'][aria-invalid='true']::placeholder,
+[type='week']:invalid::placeholder,
+[type='week'][aria-invalid='true']::placeholder,
+textarea:invalid::placeholder,
+textarea[aria-invalid='true']::placeholder {
+  color: var(--bscpn-color-brand-1-light-1);
 }
 [type='date']:disabled,
 [type='datetime-local']:disabled,
@@ -962,13 +1060,17 @@ textarea:focus:not(:focus-visible) {
     background-position: right 0.75em top 50%;
     background-repeat: no-repeat;
     background-size: 1em;
-    border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base);
-    border-radius: 10rem;
-    color: var(--bscpn-color-grayscale-base);
+    border: 0.1875rem solid var(--bscpn-color-grayscale-dark-1);
+    border-radius: var(--bscpn-select-border-top-left-radius)
+      var(--bscpn-select-border-top-right-radius)
+      var(--bscpn-select-border-bottom-right-radius)
+      var(--bscpn-select-border-bottom-left-radius);
+    box-shadow: none;
+    color: var(--bscpn-color-grayscale-dark-1);
     cursor: pointer;
     display: flex;
     font: inherit;
-    font-weight: 700;
+    font-weight: var(--bscpn-font-weight-bold);
     outline-offset: 0;
     overflow: hidden;
     padding: calc(
@@ -980,22 +1082,26 @@ textarea:focus:not(:focus-visible) {
           var(--bscpn-select-border-width, 0rem)
       );
     text-overflow: ellipsis;
-    transition: color 75ms ease-out, background-color 75ms ease-out,
-      border 75ms ease-out;
-    width: 100%;
+    transition: color var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing),
+      background-color var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing),
+      border var(--bscpn-transition-default-duration)
+        var(--bscpn-transition-default-easing);
   }
   select::-ms-expand {
     display: none;
   }
   select:focus,
   select:hover {
-    background-color: var(--bscpn-color-grayscale-base);
+    background-color: var(--bscpn-color-brand-1-light-4);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-dark-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bscpn-color-grayscale-base);
+    border-color: var(--bscpn-color-grayscale-dark-1);
+    box-shadow: none;
     color: var(--bscpn-color-grayscale-dark-1);
   }
   select:focus-visible {
-    outline: var(--bscpn-color-brand-2-base) solid
+    outline: var(--bscpn-color-brand-2) solid
       calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2);
     outline-offset: var(--bscpn-size-s7);
   }
@@ -1003,22 +1109,24 @@ textarea:focus:not(:focus-visible) {
     background-color: var(--bscpn-color-grayscale-white);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
     border-color: var(--bscpn-color-brand-1-dark-1);
-    box-shadow: var(--bscpn-shadow-default-box);
+    box-shadow: var(--bscpn-shadow-brand-1);
     color: var(--bscpn-color-brand-1-dark-1);
     outline: none;
   }
   select:invalid,
   select[aria-invalid='true'] {
     background-color: var(--bscpn-color-grayscale-white);
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-warning-base)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bscpn-color-warning-base);
-    color: var(--bscpn-color-warning-base);
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-warning)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
+    border-color: var(--bscpn-color-warning);
+    box-shadow: none;
+    color: var(--bscpn-color-warning);
   }
   select[disabled] {
     background-color: var(--bscpn-color-grayscale-light-3);
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
-    border-color: var(--bscpn-color-grayscale-light-2);
-    color: var(--bscpn-color-grayscale-base);
+    border-color: var(--bscpn-color-grayscale);
+    box-shadow: none;
+    color: var(--bscpn-color-grayscale);
     cursor: default;
   }
   select:focus:not(:focus-visible) {
@@ -1159,19 +1267,25 @@ table {
   --bscpn-button-justify-content: center;
   align-items: center;
   -webkit-appearance: none;
+  background-color: var(--bscpn-button-background-color);
+  border-color: var(--bscpn-button-border-color);
   border-radius: var(--bscpn-button-border-top-left-radius)
     var(--bscpn-button-border-top-right-radius)
     var(--bscpn-button-border-bottom-right-radius)
     var(--bscpn-button-border-bottom-left-radius);
   border-style: solid;
   border-width: var(--bscpn-button-border-width);
+  box-shadow: var(--bscpn-button-box-shadow);
+  color: var(--bscpn-button-color);
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
   font-family: inherit;
-  font-size: var(--bscpn-button-font-size);
-  font-weight: var(--bscpn-button-font-weight);
+  font-size: var(--bscpn-button-font-size, inherit);
+  font-weight: var(--bscpn-button-font-weight, inherit);
   justify-content: var(--bscpn-button-justify-content);
+  line-height: var(--bscpn-button-line-height, inherit);
+  margin: 0;
   max-width: 100%;
   min-height: var(--bscpn-button-min-height);
   min-width: var(--bscpn-button-min-width);
@@ -1254,46 +1368,68 @@ table {
 }
 .bs-at-button,
 .bs-at-button:visited {
-  background-color: var(--bscpn-button-background-color);
-  border-color: var(--bscpn-button-border-color);
-  box-shadow: var(--bscpn-button-box-shadow);
-  color: var(--bscpn-button-color);
+  --bscpn-button-color: var(--bscpn-button--primary-color);
+  --bscpn-button-background-color: var(
+    --bscpn-button--primary-background-color
+  );
+  --bscpn-button-border-color: var(--bscpn-button--primary-border-color);
+  --bscpn-button-box-shadow: var(--bscpn-button--primary-box-shadow);
 }
 :root,
 [data-theme='default'] {
-  --bscpn-button-color: var(--bscpn-color-grayscale-black);
+  --bscpn-button--primary-color: var(--bscpn-color-grayscale-black);
 }
 [data-theme='dark'] {
-  --bscpn-button-color: var(--bscpn-color-grayscale-white);
+  --bscpn-button--primary-color: var(--bscpn-color-grayscale-white);
 }
 .bs-at-button--secondary,
 .bs-at-button--secondary:visited {
-  background-color: var(--bscpn-button--secondary-background-color);
-  border-color: var(--bscpn-button--secondary-border-color);
-  box-shadow: var(--bscpn-button--secondary-box-shadow);
-  color: var(--bscpn-button--secondary-color);
+  --bscpn-button-color: var(--bscpn-button--secondary-color);
+  --bscpn-button-background-color: var(
+    --bscpn-button--secondary-background-color
+  );
+  --bscpn-button-border-color: var(--bscpn-button--secondary-border-color);
+  --bscpn-button-box-shadow: var(--bscpn-button--secondary-box-shadow);
 }
 .bs-at-button--secondary:focus,
 .bs-at-button--secondary:hover {
-  background-color: var(--bscpn-button--secondary-hover-background-color);
-  border-color: var(--bscpn-button--secondary-hover-border-color);
-  box-shadow: var(--bscpn-button--secondary-hover-box-shadow);
-  color: var(--bscpn-button--secondary-hover-color);
+  --bscpn-button-hover-color: var(--bscpn-button--secondary-hover-color);
+  --bscpn-button-hover-background-color: var(
+    --bscpn-button--secondary-hover-background-color
+  );
+  --bscpn-button-hover-border-color: var(
+    --bscpn-button--secondary-hover-border-color
+  );
+  --bscpn-button-hover-box-shadow: var(
+    --bscpn-button--secondary-hover-box-shadow
+  );
 }
 .bs-at-button--secondary:active {
-  background-color: var(--bscpn-button--secondary-active-background-color);
-  border-color: var(--bscpn-button--secondary-active-border-color);
-  box-shadow: var(--bscpn-button--secondary-active-box-shadow);
-  color: var(--bscpn-button--secondary-active-color);
+  --bscpn-button-active-color: var(--bscpn-button--secondary-active-color);
+  --bscpn-button-active-background-color: var(
+    --bscpn-button--secondary-active-background-color
+  );
+  --bscpn-button-active-border-color: var(
+    --bscpn-button--secondary-active-border-color
+  );
+  --bscpn-button-active-box-shadow: var(
+    --bscpn-button--secondary-active-box-shadow
+  );
 }
 .bs-at-button--secondary[aria-current],
 .bs-at-button--secondary[aria-expanded='true'],
 .bs-at-button--secondary[aria-pressed='true'],
 .bs-at-button--secondary[aria-selected='true'] {
-  background-color: var(--bscpn-button--secondary-pressed-background-color);
-  border-color: var(--bscpn-button--secondary-pressed-border-color);
-  box-shadow: var(--bscpn-button--secondary-pressed-box-shadow);
-  color: var(--bscpn-button--secondary-pressed-color);
+  --bscpn-button-pressed-color: var(--bscpn-button--secondary-pressed-color);
+  --bscpn-button-pressed-background-color: var(
+    --bscpn-button--secondary-pressed-background-color
+  );
+  --bscpn-button-pressed-border-color: var(
+    --bscpn-button--secondary-pressed-border-color
+  );
+  --bscpn-button-pressed-box-shadow: var(
+    --bscpn-button--secondary-pressed-box-shadow
+  );
 }
 .bs-at-button--secondary:disabled,
 .bs-at-button--secondary:disabled:focus,
@@ -1301,10 +1437,16 @@ table {
 .bs-at-button--secondary[aria-disabled='true'],
 .bs-at-button--secondary[aria-disabled='true']:focus,
 .bs-at-button--secondary[aria-disabled='true']:hover {
-  background-color: var(--bscpn-button--secondary-disabled-background-color);
-  border-color: var(--bscpn-button--secondary-disabled-border-color);
-  box-shadow: var(--bscpn-button--secondary-disabled-box-shadow);
-  color: var(--bscpn-button--secondary-disabled-color);
+  --bscpn-button-disabled-color: var(--bscpn-button--secondary-disabled-color);
+  --bscpn-button-disabled-background-color: var(
+    --bscpn-button--secondary-disabled-background-color
+  );
+  --bscpn-button-disabled-border-color: var(
+    --bscpn-button--secondary-disabled-border-color
+  );
+  --bscpn-button-disabled-box-shadow: var(
+    --bscpn-button--secondary-disabled-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {
@@ -1336,7 +1478,7 @@ table {
       rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075),
     0 0 calc(var(--bscpn-size-s4) / 1)
       rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075);
-  --bscpn-button--secondary-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-button--secondary-disabled-color: var(--bscpn-color-grayscale);
   --bscpn-button--secondary-disabled-background-color: var(
     --bscpn-color-grayscale-light-3
   );
@@ -1358,7 +1500,7 @@ table {
     --bscpn-color-brand-1-light-1
   );
   --bscpn-button--secondary-active-box-shadow: none;
-  --bscpn-button--secondary-pressed-color: var(--bscpn-color-brand-1-base);
+  --bscpn-button--secondary-pressed-color: var(--bscpn-color-brand-1);
   --bscpn-button--secondary-pressed-background-color: var(
     --bscpn-color-brand-1-light-1
   );
@@ -1381,32 +1523,52 @@ table {
 }
 .bs-at-button--outline,
 .bs-at-button--outline:visited {
-  background-color: var(--bscpn-button--outline-background-color);
-  border-color: var(--bscpn-button--outline-border-color);
-  box-shadow: var(--bscpn-button--outline-box-shadow);
-  color: var(--bscpn-button--outline-color);
+  --bscpn-button-color: var(--bscpn-button--outline-color);
+  --bscpn-button-background-color: var(
+    --bscpn-button--outline-background-color
+  );
+  --bscpn-button-border-color: var(--bscpn-button--outline-border-color);
+  --bscpn-button-box-shadow: var(--bscpn-button--outline-box-shadow);
 }
 .bs-at-button--outline:focus,
 .bs-at-button--outline:hover {
-  background-color: var(--bscpn-button--outline-hover-background-color);
-  border-color: var(--bscpn-button--outline-hover-border-color);
-  box-shadow: var(--bscpn-button--outline-hover-box-shadow);
-  color: var(--bscpn-button--outline-hover-color);
+  --bscpn-button-hover-color: var(--bscpn-button--outline-hover-color);
+  --bscpn-button-hover-background-color: var(
+    --bscpn-button--outline-hover-background-color
+  );
+  --bscpn-button-hover-border-color: var(
+    --bscpn-button--outline-hover-border-color
+  );
+  --bscpn-button-hover-box-shadow: var(
+    --bscpn-button--outline-hover-box-shadow
+  );
 }
 .bs-at-button--outline:active {
-  background-color: var(--bscpn-button--outline-active-background-color);
-  border-color: var(--bscpn-button--outline-active-border-color);
-  box-shadow: var(--bscpn-button--outline-active-box-shadow);
-  color: var(--bscpn-button--outline-active-color);
+  --bscpn-button-active-color: var(--bscpn-button--outline-active-color);
+  --bscpn-button-active-background-color: var(
+    --bscpn-button--outline-active-background-color
+  );
+  --bscpn-button-active-border-color: var(
+    --bscpn-button--outline-active-border-color
+  );
+  --bscpn-button-active-box-shadow: var(
+    --bscpn-button--outline-active-box-shadow
+  );
 }
 .bs-at-button--outline[aria-current],
 .bs-at-button--outline[aria-expanded='true'],
 .bs-at-button--outline[aria-pressed='true'],
 .bs-at-button--outline[aria-selected='true'] {
-  background-color: var(--bscpn-button--outline-pressed-background-color);
-  border-color: var(--bscpn-button--outline-pressed-border-color);
-  box-shadow: var(--bscpn-button--outline-pressed-box-shadow);
-  color: var(--bscpn-button--outline-pressed-color);
+  --bscpn-button-pressed-color: var(--bscpn-button--outline-pressed-color);
+  --bscpn-button-pressed-background-color: var(
+    --bscpn-button--outline-pressed-background-color
+  );
+  --bscpn-button-pressed-border-color: var(
+    --bscpn-button--outline-pressed-border-color
+  );
+  --bscpn-button-pressed-box-shadow: var(
+    --bscpn-button--outline-pressed-box-shadow
+  );
 }
 .bs-at-button--outline:disabled,
 .bs-at-button--outline:disabled:focus,
@@ -1414,10 +1576,16 @@ table {
 .bs-at-button--outline[aria-disabled='true'],
 .bs-at-button--outline[aria-disabled='true']:focus,
 .bs-at-button--outline[aria-disabled='true']:hover {
-  background-color: var(--bscpn-button--outline-disabled-background-color);
-  border-color: var(--bscpn-button--outline-disabled-border-color);
-  box-shadow: var(--bscpn-button--outline-disabled-box-shadow);
-  color: var(--bscpn-button--outline-disabled-color);
+  --bscpn-button-disabled-color: var(--bscpn-button--outline-disabled-color);
+  --bscpn-button-disabled-background-color: var(
+    --bscpn-button--outline-disabled-background-color
+  );
+  --bscpn-button-disabled-border-color: var(
+    --bscpn-button--outline-disabled-border-color
+  );
+  --bscpn-button-disabled-box-shadow: var(
+    --bscpn-button--outline-disabled-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {
@@ -1456,11 +1624,9 @@ table {
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bscpn-size-m) / 1)
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125);
-  --bscpn-button--outline-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-button--outline-disabled-color: var(--bscpn-color-grayscale);
   --bscpn-button--outline-disabled-background-color: transparent;
-  --bscpn-button--outline-disabled-border-color: var(
-    --bscpn-color-grayscale-base
-  );
+  --bscpn-button--outline-disabled-border-color: var(--bscpn-color-grayscale);
   --bscpn-button--outline-disabled-box-shadow: none;
 }
 [data-theme='dark'] {
@@ -1484,7 +1650,7 @@ table {
     --bscpn-color-brand-1-light-1
   );
   --bscpn-button--outline-active-box-shadow: none;
-  --bscpn-button--outline-pressed-color: var(--bscpn-color-brand-1-base);
+  --bscpn-button--outline-pressed-color: var(--bscpn-color-brand-1);
   --bscpn-button--outline-pressed-background-color: var(
     --bscpn-color-brand-1-light-1
   );
@@ -1510,32 +1676,52 @@ table {
 }
 .bs-at-button--transparent,
 .bs-at-button--transparent:visited {
-  background-color: var(--bscpn-button--transparent-background-color);
-  border-color: var(--bscpn-button--transparent-border-color);
-  box-shadow: var(--bscpn-button--transparent-box-shadow);
-  color: var(--bscpn-button--transparent-color);
+  --bscpn-button-color: var(--bscpn-button--transparent-color);
+  --bscpn-button-background-color: var(
+    --bscpn-button--transparent-background-color
+  );
+  --bscpn-button-border-color: var(--bscpn-button--transparent-border-color);
+  --bscpn-button-box-shadow: var(--bscpn-button--transparent-box-shadow);
 }
 .bs-at-button--transparent:focus,
 .bs-at-button--transparent:hover {
-  background-color: var(--bscpn-button--transparent-hover-background-color);
-  border-color: var(--bscpn-button--transparent-hover-border-color);
-  box-shadow: var(--bscpn-button--transparent-hover-box-shadow);
-  color: var(--bscpn-button--transparent-hover-color);
+  --bscpn-button-hover-color: var(--bscpn-button--transparent-hover-color);
+  --bscpn-button-hover-background-color: var(
+    --bscpn-button--transparent-hover-background-color
+  );
+  --bscpn-button-hover-border-color: var(
+    --bscpn-button--transparent-hover-border-color
+  );
+  --bscpn-button-hover-box-shadow: var(
+    --bscpn-button--transparent-hover-box-shadow
+  );
 }
 .bs-at-button--transparent:active {
-  background-color: var(--bscpn-button--transparent-active-background-color);
-  border-color: var(--bscpn-button--transparent-active-border-color);
-  box-shadow: var(--bscpn-button--transparent-active-box-shadow);
-  color: var(--bscpn-button--transparent-active-color);
+  --bscpn-button-active-color: var(--bscpn-button--transparent-active-color);
+  --bscpn-button-active-background-color: var(
+    --bscpn-button--transparent-active-background-color
+  );
+  --bscpn-button-active-border-color: var(
+    --bscpn-button--transparent-active-border-color
+  );
+  --bscpn-button-active-box-shadow: var(
+    --bscpn-button--transparent-active-box-shadow
+  );
 }
 .bs-at-button--transparent[aria-current],
 .bs-at-button--transparent[aria-expanded='true'],
 .bs-at-button--transparent[aria-pressed='true'],
 .bs-at-button--transparent[aria-selected='true'] {
-  background-color: var(--bscpn-button--transparent-pressed-background-color);
-  border-color: var(--bscpn-button--transparent-pressed-border-color);
-  box-shadow: var(--bscpn-button--transparent-pressed-box-shadow);
-  color: var(--bscpn-button--transparent-pressed-color);
+  --bscpn-button-pressed-color: var(--bscpn-button--transparent-pressed-color);
+  --bscpn-button-pressed-background-color: var(
+    --bscpn-button--transparent-pressed-background-color
+  );
+  --bscpn-button-pressed-border-color: var(
+    --bscpn-button--transparent-pressed-border-color
+  );
+  --bscpn-button-pressed-box-shadow: var(
+    --bscpn-button--transparent-pressed-box-shadow
+  );
 }
 .bs-at-button--transparent:disabled,
 .bs-at-button--transparent:disabled:focus,
@@ -1543,10 +1729,18 @@ table {
 .bs-at-button--transparent[aria-disabled='true'],
 .bs-at-button--transparent[aria-disabled='true']:focus,
 .bs-at-button--transparent[aria-disabled='true']:hover {
-  background-color: var(--bscpn-button--transparent-disabled-background-color);
-  border-color: var(--bscpn-button--transparent-disabled-border-color);
-  box-shadow: var(--bscpn-button--transparent-disabled-box-shadow);
-  color: var(--bscpn-button--transparent-disabled-color);
+  --bscpn-button-disabled-color: var(
+    --bscpn-button--transparent-disabled-color
+  );
+  --bscpn-button-disabled-background-color: var(
+    --bscpn-button--transparent-disabled-background-color
+  );
+  --bscpn-button-disabled-border-color: var(
+    --bscpn-button--transparent-disabled-border-color
+  );
+  --bscpn-button-disabled-box-shadow: var(
+    --bscpn-button--transparent-disabled-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {
@@ -1584,7 +1778,7 @@ table {
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125),
     0 0 calc(var(--bscpn-size-m) / 1)
       rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125);
-  --bscpn-button--transparent-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-button--transparent-disabled-color: var(--bscpn-color-grayscale);
   --bscpn-button--transparent-disabled-background-color: var(
     --bscpn-color-grayscale-light-3
   );
@@ -1639,32 +1833,46 @@ table {
 }
 .bs-at-button--tab,
 .bs-at-button--tab:visited {
-  background-color: var(--bscpn-button--tab-background-color);
-  border-color: var(--bscpn-button--tab-border-color);
-  box-shadow: var(--bscpn-button--tab-box-shadow);
-  color: var(--bscpn-button--tab-color);
+  --bscpn-button-color: var(--bscpn-button--tab-color);
+  --bscpn-button-background-color: var(--bscpn-button--tab-background-color);
+  --bscpn-button-border-color: var(--bscpn-button--tab-border-color);
+  --bscpn-button-box-shadow: var(--bscpn-button--tab-box-shadow);
 }
 .bs-at-button--tab:focus,
 .bs-at-button--tab:hover {
-  background-color: var(--bscpn-button--tab-hover-background-color);
-  border-color: var(--bscpn-button--tab-hover-border-color);
-  box-shadow: var(--bscpn-button--tab-hover-box-shadow);
-  color: var(--bscpn-button--tab-hover-color);
+  --bscpn-button-hover-color: var(--bscpn-button--tab-hover-color);
+  --bscpn-button-hover-background-color: var(
+    --bscpn-button--tab-hover-background-color
+  );
+  --bscpn-button-hover-border-color: var(
+    --bscpn-button--tab-hover-border-color
+  );
+  --bscpn-button-hover-box-shadow: var(--bscpn-button--tab-hover-box-shadow);
 }
 .bs-at-button--tab:active {
-  background-color: var(--bscpn-button--tab-active-background-color);
-  border-color: var(--bscpn-button--tab-active-border-color);
-  box-shadow: var(--bscpn-button--tab-active-box-shadow);
-  color: var(--bscpn-button--tab-active-color);
+  --bscpn-button-active-color: var(--bscpn-button--tab-active-color);
+  --bscpn-button-active-background-color: var(
+    --bscpn-button--tab-active-background-color
+  );
+  --bscpn-button-active-border-color: var(
+    --bscpn-button--tab-active-border-color
+  );
+  --bscpn-button-active-box-shadow: var(--bscpn-button--tab-active-box-shadow);
 }
 .bs-at-button--tab[aria-current],
 .bs-at-button--tab[aria-expanded='true'],
 .bs-at-button--tab[aria-pressed='true'],
 .bs-at-button--tab[aria-selected='true'] {
-  background-color: var(--bscpn-button--tab-pressed-background-color);
-  border-color: var(--bscpn-button--tab-pressed-border-color);
-  box-shadow: var(--bscpn-button--tab-pressed-box-shadow);
-  color: var(--bscpn-button--tab-pressed-color);
+  --bscpn-button-pressed-color: var(--bscpn-button--tab-pressed-color);
+  --bscpn-button-pressed-background-color: var(
+    --bscpn-button--tab-pressed-background-color
+  );
+  --bscpn-button-pressed-border-color: var(
+    --bscpn-button--tab-pressed-border-color
+  );
+  --bscpn-button-pressed-box-shadow: var(
+    --bscpn-button--tab-pressed-box-shadow
+  );
 }
 .bs-at-button--tab:disabled,
 .bs-at-button--tab:disabled:focus,
@@ -1672,10 +1880,16 @@ table {
 .bs-at-button--tab[aria-disabled='true'],
 .bs-at-button--tab[aria-disabled='true']:focus,
 .bs-at-button--tab[aria-disabled='true']:hover {
-  background-color: var(--bscpn-button--tab-disabled-background-color);
-  border-color: var(--bscpn-button--tab-disabled-border-color);
-  box-shadow: var(--bscpn-button--tab-disabled-box-shadow);
-  color: var(--bscpn-button--tab-disabled-color);
+  --bscpn-button-disabled-color: var(--bscpn-button--tab-disabled-color);
+  --bscpn-button-disabled-background-color: var(
+    --bscpn-button--tab-disabled-background-color
+  );
+  --bscpn-button-disabled-border-color: var(
+    --bscpn-button--tab-disabled-border-color
+  );
+  --bscpn-button-disabled-box-shadow: var(
+    --bscpn-button--tab-disabled-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {
@@ -1692,7 +1906,7 @@ table {
   --bscpn-button--tab-pressed-color: var(--bscpn-color-brand-1-dark-2);
   --bscpn-button--tab-pressed-background-color: transparent;
   --bscpn-button--tab-pressed-box-shadow: none;
-  --bscpn-button--tab-disabled-color: var(--bscpn-color-grayscale-base);
+  --bscpn-button--tab-disabled-color: var(--bscpn-color-grayscale);
   --bscpn-button--tab-disabled-background-color: transparent;
   --bscpn-button--tab-disabled-box-shadow: none;
 }
@@ -1715,25 +1929,41 @@ table {
 }
 .bs-at-button--danger:focus,
 .bs-at-button--danger:hover {
-  background-color: var(--bscpn-button--danger-hover-background-color);
-  border-color: var(--bscpn-button--danger-hover-border-color);
-  box-shadow: var(--bscpn-button--danger-hover-box-shadow);
-  color: var(--bscpn-button--danger-hover-color);
+  --bscpn-button-hover-color: var(--bscpn-button--danger-hover-color);
+  --bscpn-button-hover-background-color: var(
+    --bscpn-button--danger-hover-background-color
+  );
+  --bscpn-button-hover-border-color: var(
+    --bscpn-button--danger-hover-border-color
+  );
+  --bscpn-button-hover-box-shadow: var(--bscpn-button--danger-hover-box-shadow);
 }
 .bs-at-button--danger:active {
-  background-color: var(--bscpn-button--danger-active-background-color);
-  border-color: var(--bscpn-button--danger-active-border-color);
-  box-shadow: var(--bscpn-button--danger-active-box-shadow);
-  color: var(--bscpn-button--danger-active-color);
+  --bscpn-button-active-color: var(--bscpn-button--danger-active-color);
+  --bscpn-button-active-background-color: var(
+    --bscpn-button--danger-active-background-color
+  );
+  --bscpn-button-active-border-color: var(
+    --bscpn-button--danger-active-border-color
+  );
+  --bscpn-button-active-box-shadow: var(
+    --bscpn-button--danger-active-box-shadow
+  );
 }
 .bs-at-button--danger[aria-current],
 .bs-at-button--danger[aria-expanded='true'],
 .bs-at-button--danger[aria-pressed='true'],
 .bs-at-button--danger[aria-selected='true'] {
-  background-color: var(--bscpn-button--danger-pressed-background-color);
-  border-color: var(--bscpn-button--danger-pressed-border-color);
-  box-shadow: var(--bscpn-button--danger-pressed-box-shadow);
-  color: var(--bscpn-button--danger-pressed-color);
+  --bscpn-button-pressed-color: var(--bscpn-button--danger-pressed-color);
+  --bscpn-button-pressed-background-color: var(
+    --bscpn-button--danger-pressed-background-color
+  );
+  --bscpn-button-pressed-border-color: var(
+    --bscpn-button--danger-pressed-border-color
+  );
+  --bscpn-button-pressed-box-shadow: var(
+    --bscpn-button--danger-pressed-box-shadow
+  );
 }
 :root,
 [data-theme='default'] {

From 70ff73e978180de790c665fcf7f0d5ba7827e39e Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Tue, 15 Aug 2023 14:17:23 +0200
Subject: [PATCH 17/21] - Adds zeplin links for all the input states that we
 have designs for - Updates input appearances to match designs - Adds the
 missing invalid-checked state

---
 .../base/forms/input-text.stories.js          | 40 +++++++++----------
 scss/bitstyles/base/forms/select.stories.js   |  4 ++
 scss/bitstyles/base/forms/textarea.stories.js | 12 ++++++
 .../base/input-checkbox/_settings.scss        | 14 +++++--
 scss/bitstyles/base/input-radio/_index.scss   | 13 ++++++
 .../bitstyles/base/input-radio/_settings.scss | 18 ++++++++-
 scss/bitstyles/base/input-text/_settings.scss | 14 +++----
 scss/bitstyles/base/select/_settings.scss     |  2 +-
 test/scss/test-use-each.scss                  |  2 +-
 9 files changed, 84 insertions(+), 35 deletions(-)

diff --git a/scss/bitstyles/base/forms/input-text.stories.js b/scss/bitstyles/base/forms/input-text.stories.js
index 4014b034d..b250c203c 100644
--- a/scss/bitstyles/base/forms/input-text.stories.js
+++ b/scss/bitstyles/base/forms/input-text.stories.js
@@ -34,15 +34,15 @@ TextWithValue.parameters = {
   zeplinLink: [
     {
       name: 'base',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbb9d8f3dc7239794dccd',
     },
     {
       name: 'hover',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba235ff5623d67079eb',
     },
     {
       name: 'active',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbb9e62f9d023b1e475f2',
     },
   ],
 };
@@ -56,7 +56,7 @@ TextWithValueInvalid.args = {
 };
 TextWithValueInvalid.parameters = {
   zeplinLink:
-    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba098cca5236f016f66',
 };
 
 export const TextWithValueDisabled = Template.bind({});
@@ -68,7 +68,7 @@ TextWithValueDisabled.args = {
 };
 TextWithValueDisabled.parameters = {
   zeplinLink:
-    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=645259551dc67b3c0c0f8634',
 };
 
 // ***** Text inputs without values ****************** //
@@ -83,15 +83,15 @@ TextEmpty.parameters = {
   zeplinLink: [
     {
       name: 'base',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbb9c4fed4a236a1c340c',
     },
     {
       name: 'hover',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba7ebc1c823de19d9b4',
     },
     {
       name: 'active',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba6122e2e235f235223',
     },
   ],
 };
@@ -105,7 +105,7 @@ TextEmptyInvalid.args = {
 };
 TextEmptyInvalid.parameters = {
   zeplinLink:
-    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba425cd9623cef856c0',
 };
 
 export const TextEmptyDisabled = Template.bind({});
@@ -117,7 +117,7 @@ TextEmptyDisabled.args = {
 };
 TextEmptyDisabled.parameters = {
   zeplinLink:
-    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbb9ff25cd023ae394942',
 };
 
 // ***** Email inputs with values ****************** //
@@ -133,15 +133,15 @@ EmailWithValue.parameters = {
   zeplinLink: [
     {
       name: 'base',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbb9c4fed4a236a1c340c',
     },
     {
       name: 'hover',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba7ebc1c823de19d9b4',
     },
     {
       name: 'active',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba6122e2e235f235223',
     },
   ],
 };
@@ -156,7 +156,7 @@ EmailWithValueInvalid.args = {
 };
 EmailWithValueInvalid.parameters = {
   zeplinLink:
-    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba098cca5236f016f66',
 };
 
 export const EmailWithValueDisabled = Template.bind({});
@@ -169,7 +169,7 @@ EmailWithValueDisabled.args = {
 };
 EmailWithValueDisabled.parameters = {
   zeplinLink:
-    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=645259551dc67b3c0c0f8634',
 };
 
 // ***** Email inputs without values ****************** //
@@ -185,15 +185,15 @@ EmailEmpty.parameters = {
   zeplinLink: [
     {
       name: 'base',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbb9c4fed4a236a1c340c',
     },
     {
       name: 'hover',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29350fae8b712a63460',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba7ebc1c823de19d9b4',
     },
     {
       name: 'active',
-      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29d53bff5b7626b7444',
+      link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba6122e2e235f235223',
     },
   ],
 };
@@ -208,7 +208,7 @@ EmailInvalidEmpty.args = {
 };
 EmailInvalidEmpty.parameters = {
   zeplinLink:
-    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbba425cd9623cef856c0',
 };
 
 export const EmailDisabledEmpty = Template.bind({});
@@ -221,7 +221,7 @@ EmailDisabledEmpty.args = {
 };
 EmailDisabledEmpty.parameters = {
   zeplinLink:
-    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363a29861150a30c8ecffa3',
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=643fbb9ff25cd023ae394942',
 };
 
 // ***** Number inputs with values ****************** //
diff --git a/scss/bitstyles/base/forms/select.stories.js b/scss/bitstyles/base/forms/select.stories.js
index e5302f28a..821a2db7e 100644
--- a/scss/bitstyles/base/forms/select.stories.js
+++ b/scss/bitstyles/base/forms/select.stories.js
@@ -50,6 +50,10 @@ Invalid.args = {
   label: 'Select invalid',
   ariaInvalid: true,
 };
+Invalid.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=646f20300fe8d32205780813',
+};
 
 export const Disabled = Template.bind({});
 Disabled.args = {
diff --git a/scss/bitstyles/base/forms/textarea.stories.js b/scss/bitstyles/base/forms/textarea.stories.js
index 397e551b1..d22e80b6b 100644
--- a/scss/bitstyles/base/forms/textarea.stories.js
+++ b/scss/bitstyles/base/forms/textarea.stories.js
@@ -28,6 +28,10 @@ WithValue.args = {
   placeholder: 'Textarea with value placeholder',
   label: 'Textarea with value',
 };
+WithValue.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447b1c78993dd3fe66afe6f',
+};
 
 export const WithValueInvalid = Template.bind({});
 WithValueInvalid.args = {
@@ -36,6 +40,10 @@ WithValueInvalid.args = {
   placeholder: 'Textarea with value invalid placeholder',
   label: 'Textarea with value invalid',
 };
+WithValueInvalid.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=645a593bd47c930dfb98ccc0',
+};
 
 export const WithValueDisabled = Template.bind({});
 WithValueDisabled.args = {
@@ -53,6 +61,10 @@ Empty.args = {
   placeholder: 'Textarea empty placeholder',
   label: 'Textarea empty',
 };
+Empty.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6447b1c473b2c445226d25da',
+};
 
 export const EmptyInvalid = Template.bind({});
 EmptyInvalid.args = {
diff --git a/scss/bitstyles/base/input-checkbox/_settings.scss b/scss/bitstyles/base/input-checkbox/_settings.scss
index d92ebfaac..f74a82898 100644
--- a/scss/bitstyles/base/input-checkbox/_settings.scss
+++ b/scss/bitstyles/base/input-checkbox/_settings.scss
@@ -78,10 +78,14 @@ $box-shadow-checked-active: none !default;
 //
 // Invalid colors ////////////////////////////////////////
 $color-invalid: var(design-token.get('color', 'grayscale', 'white')) !default;
-$background-color-invalid: var(design-token.get('color', 'grayscale', 'white')) !default;
-$border-color-invalid: var(design-token.get('color', 'warning', 'dark-1')) !default;
+$background-color-invalid: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$border-color-invalid: var(
+  design-token.get('color', 'warning', 'dark-1')
+) !default;
 $background-image-invalid: none !default;
-$box-shadow-invalid: var(design-token.get('shadow', 'warning', 'box')) !default;
+$box-shadow-invalid: none !default;
 
 //
 // Invalid checked colors ////////////////////////////////////////
@@ -95,7 +99,9 @@ $border-color-invalid-checked: var(
   design-token.get('color', 'warning', 'dark-1')
 ) !default;
 $background-image-invalid-checked: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='var(#{design-token.get('color', 'grayscale', 'white')})' d='m83.07 11.71-44.41 44.59-21.73-21.81-15.93 15.99 37.65 37.81 60.35-60.59z'/%3E%3C/svg%3E") !default;
-$box-shadow-invalid-checked: var(design-token.get('shadow', 'warning', 'box')) !default;
+$box-shadow-invalid-checked: var(
+  design-token.get('shadow', 'warning', 'box')
+) !default;
 
 //
 // Disabled colors ////////////////////////////////////////
diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
index 6b3bc78b1..64ad00db9 100644
--- a/scss/bitstyles/base/input-radio/_index.scss
+++ b/scss/bitstyles/base/input-radio/_index.scss
@@ -87,6 +87,19 @@
       &::after {
         background: settings.$color-invalid;
       }
+
+      &:checked {
+        border-color: settings.$border-color-invalid-checked;
+        background-color: settings.$background-color-invalid-checked;
+        box-shadow: settings.$box-shadow-invalid-checked;
+        color: settings.$color-invalid-checked;
+
+        /* stylelint-disable max-nesting-depth */
+        &::after {
+          background: settings.$color-invalid-checked;
+        }
+        /* stylelint-enable max-nesting-depth */
+      }
     }
 
     &[disabled] {
diff --git a/scss/bitstyles/base/input-radio/_settings.scss b/scss/bitstyles/base/input-radio/_settings.scss
index fcee0c4d1..61794a238 100644
--- a/scss/bitstyles/base/input-radio/_settings.scss
+++ b/scss/bitstyles/base/input-radio/_settings.scss
@@ -78,7 +78,23 @@ $background-color-invalid: var(
 $border-color-invalid: var(
   design-token.get('color', 'warning', 'dark-1')
 ) !default;
-$box-shadow-invalid: var(design-token.get('shadow', 'warning', 'box')) !default;
+$box-shadow-invalid: none !default;
+
+//
+// Checked invalid colors ////////////////////////////////////////
+
+$color-invalid-checked: var(
+  design-token.get('color', 'warning', 'dark-1')
+) !default;
+$background-color-invalid-checked: var(
+  design-token.get('color', 'grayscale', 'white')
+) !default;
+$border-color-invalid-checked: var(
+  design-token.get('color', 'warning', 'dark-1')
+) !default;
+$box-shadow-invalid-checked: var(
+  design-token.get('shadow', 'warning', 'box')
+) !default;
 
 //
 // Disabled colors ////////////////////////////////////////
diff --git a/scss/bitstyles/base/input-text/_settings.scss b/scss/bitstyles/base/input-text/_settings.scss
index 9cf7e6476..a7aaf147e 100644
--- a/scss/bitstyles/base/input-text/_settings.scss
+++ b/scss/bitstyles/base/input-text/_settings.scss
@@ -18,7 +18,7 @@ $placeholder-font-weight: var(
 // Base colors ////////////////////////////////////////
 
 $color: var(design-token.get('color', 'grayscale', 'dark-4')) !default;
-$border-color: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
+$border-color: var(design-token.get('color', 'grayscale')) !default;
 $background: var(design-token.get('color', 'grayscale', 'white')) !default;
 $box-shadow: none !default;
 $placeholder-color: var(design-token.get('color', 'grayscale')) !default;
@@ -34,9 +34,7 @@ $border-color-hover: var(
   design-token.get('color', 'grayscale', 'dark-2')
 ) !default;
 $box-shadow-hover: none !default;
-$placeholder-color-hover: var(
-  design-token.get('color', 'grayscale', 'dark-1')
-) !default;
+$placeholder-color-hover: var(design-token.get('color', 'grayscale')) !default;
 
 //
 // Active colors ////////////////////////////////////////
@@ -49,21 +47,21 @@ $border-color-active: var(
   design-token.get('color', 'brand-1', 'dark-1')
 ) !default;
 $box-shadow-active: none !default;
-$placeholder-color-active: var(design-token.get('color', 'brand-1')) !default;
+$placeholder-color-active: var(design-token.get('color', 'grayscale')) !default;
 
 //
 // Disabled colors ////////////////////////////////////////
 
 $color-disabled: var(design-token.get('color', 'grayscale')) !default;
 $background-disabled: var(
-  design-token.get('color', 'grayscale', 'light-4')
+  design-token.get('color', 'grayscale', 'white')
 ) !default;
 $border-color-disabled: var(
   design-token.get('color', 'grayscale', 'light-1')
 ) !default;
 $box-shadow-disabled: none !default;
 $placeholder-color-disabled: var(
-  design-token.get('color', 'grayscale', 'light-1')
+  design-token.get('color', 'grayscale')
 ) !default;
 
 //
@@ -78,5 +76,5 @@ $border-color-invalid: var(
 ) !default;
 $box-shadow-invalid: none !default;
 $placeholder-color-invalid: var(
-  design-token.get('color', 'brand-1', 'light-1')
+  design-token.get('color', 'grayscale')
 ) !default;
diff --git a/scss/bitstyles/base/select/_settings.scss b/scss/bitstyles/base/select/_settings.scss
index 56f755fe6..54028c943 100644
--- a/scss/bitstyles/base/select/_settings.scss
+++ b/scss/bitstyles/base/select/_settings.scss
@@ -46,7 +46,7 @@ $box-shadow-active: var(design-token.get('shadow', 'brand-1')) !default;
 
 //
 // Invalid styles ////////////////////////////////////////
-$color-invalid: var(design-token.get('color', 'warning')) !default;
+$color-invalid: var(design-token.get('color', 'grayscale', 'dark-1')) !default;
 $border-color-invalid: var(design-token.get('color', 'warning')) !default;
 $background-color-invalid: var(
   design-token.get('color', 'grayscale', 'white')
diff --git a/test/scss/test-use-each.scss b/test/scss/test-use-each.scss
index f5c6f9f5b..77f637ff2 100644
--- a/test/scss/test-use-each.scss
+++ b/test/scss/test-use-each.scss
@@ -89,7 +89,7 @@
     'warning': (
       ('color': #0f0, 'offset': 2.5rem, 'blur-radius': 5rem),
       ('color': #0f0, 'offset': 5rem, 'blur-radius': 5rem),
-    )
+    ),
   )
 );
 @use '../../scss/bitstyles/design-tokens/typography' with (

From b82517b1eaaea1df8b736a6c6685aba5b7dbbc7e Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Tue, 15 Aug 2023 14:40:10 +0200
Subject: [PATCH 18/21] Updates fixtures

---
 test/scss/fixtures/bitstyles-overrides.css | 72 ++++++++++++++++------
 test/scss/fixtures/bitstyles.css           | 72 ++++++++++++++++------
 2 files changed, 104 insertions(+), 40 deletions(-)

diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css
index 63c47489b..7bcdb8858 100644
--- a/test/scss/fixtures/bitstyles-overrides.css
+++ b/test/scss/fixtures/bitstyles-overrides.css
@@ -515,7 +515,7 @@ img {
   [type='checkbox']:checked {
     background-color: var(--bscpn-color-brand-1-dark-1);
     border-color: var(--bscpn-color-brand-1-dark-1);
-    box-shadow: none;
+    box-shadow: var(--bscpn-shadow-brand-1-box);
     color: var(--bscpn-color-grayscale-white);
   }
   [type='checkbox']:checked:after {
@@ -524,9 +524,16 @@ img {
   }
   [type='checkbox']:invalid,
   [type='checkbox'][aria-invalid='true'] {
-    background-color: var(--bscpn-color-brand-1);
-    border-color: var(--bscpn-color-brand-1);
-    box-shadow: var(--bscpn-shadow-warning);
+    background-color: var(--bscpn-color-grayscale-white);
+    border-color: var(--bscpn-color-warning-dark-1);
+    box-shadow: none;
+    color: var(--bscpn-color-grayscale-white);
+  }
+  [type='checkbox']:invalid:checked,
+  [type='checkbox'][aria-invalid='true']:checked {
+    background-color: var(--bscpn-color-warning-dark-1);
+    border-color: var(--bscpn-color-warning-dark-1);
+    box-shadow: var(--bscpn-shadow-warning-box);
     color: var(--bscpn-color-grayscale-white);
   }
   [type='checkbox'][disabled] {
@@ -579,7 +586,7 @@ img {
     background-color: var(--bscpn-color-grayscale-white);
     border: 0.1875rem solid var(--bscpn-color-grayscale-dark-2);
     border-radius: 10rem;
-    box-shadow: var(--bscpn-shadow-brand-1);
+    box-shadow: var(--bscpn-shadow-brand-1-box);
     color: var(--bscpn-color-grayscale-light-1);
   }
   [type='radio']:after {
@@ -620,7 +627,7 @@ img {
   [type='radio']:checked {
     background-color: var(--bscpn-color-grayscale-white);
     border-color: var(--bscpn-color-brand-1-dark-1);
-    box-shadow: var(--bscpn-shadow-brand-1);
+    box-shadow: var(--bscpn-shadow-brand-1-box);
     color: var(--bscpn-color-brand-1-dark-1);
   }
   [type='radio']:checked:after {
@@ -631,8 +638,23 @@ img {
   [type='radio'][aria-invalid='true'] {
     background-color: var(--bscpn-color-grayscale-white);
     border-color: var(--bscpn-color-warning-dark-1);
-    box-shadow: var(--bscpn-shadow-warning);
-    color: var(--bscpn-color-warning-dark-4);
+    box-shadow: none;
+    color: var(--bscpn-color-warning-dark-1);
+  }
+  [type='radio']:invalid:after,
+  [type='radio'][aria-invalid='true']:after {
+    background: var(--bscpn-color-warning-dark-1);
+  }
+  [type='radio']:invalid:checked,
+  [type='radio'][aria-invalid='true']:checked {
+    background-color: var(--bscpn-color-grayscale-white);
+    border-color: var(--bscpn-color-warning-dark-1);
+    box-shadow: var(--bscpn-shadow-warning-box);
+    color: var(--bscpn-color-warning-dark-1);
+  }
+  [type='radio']:invalid:checked:after,
+  [type='radio'][aria-invalid='true']:checked:after {
+    background: var(--bscpn-color-warning-dark-1);
   }
   [type='radio'][disabled] {
     background-color: var(--bscpn-color-grayscale-white);
@@ -661,13 +683,23 @@ img {
     box-shadow: none;
     color: var(--bscpn-color-brand-1);
   }
+  [type='radio']:checked:focus:not(:invalid):after,
+  [type='radio']:checked:focus:not([aria-invalid='true']):after,
+  [type='radio']:checked:hover:not(:invalid):after,
+  [type='radio']:checked:hover:not([aria-invalid='true']):after {
+    background: var(--bscpn-color-brand-1);
+  }
   [type='radio']:checked:active:not(:invalid),
   [type='radio']:checked:active:not([aria-invalid='true']) {
     background-color: var(--bscpn-color-grayscale-white);
-    border-color: var(--bscpn-color-brand-1);
+    border-color: var(--bscpn-color-brand-1-dark-1);
     box-shadow: none;
     color: var(--bscpn-color-brand-1);
   }
+  [type='radio']:checked:active:not(:invalid):after,
+  [type='radio']:checked:active:not([aria-invalid='true']):after {
+    background: var(--bscpn-color-brand-1);
+  }
 }
 input,
 textarea {
@@ -717,7 +749,7 @@ textarea {
   --bscpn-input-text-padding-horizontal: var(--bscpn-size-m);
   --bscpn-input-text-border-width: 0.1875rem;
   background-color: var(--bscpn-color-grayscale-white);
-  border: 0.1875rem solid var(--bscpn-color-grayscale-dark-1);
+  border: 0.1875rem solid var(--bscpn-color-grayscale);
   border-radius: var(--bscpn-input-text-border-top-left-radius)
     var(--bscpn-input-text-border-top-right-radius)
     var(--bscpn-input-text-border-bottom-right-radius)
@@ -793,7 +825,7 @@ textarea:hover {
 [type='week']:hover::-moz-placeholder,
 textarea:focus::-moz-placeholder,
 textarea:hover::-moz-placeholder {
-  color: var(--bscpn-color-grayscale-dark-1);
+  color: var(--bscpn-color-grayscale);
 }
 [type='date']:focus::placeholder,
 [type='date']:hover::placeholder,
@@ -821,7 +853,7 @@ textarea:hover::-moz-placeholder {
 [type='week']:hover::placeholder,
 textarea:focus::placeholder,
 textarea:hover::placeholder {
-  color: var(--bscpn-color-grayscale-dark-1);
+  color: var(--bscpn-color-grayscale);
 }
 [type='date']:focus-visible,
 [type='datetime-local']:focus-visible,
@@ -873,7 +905,7 @@ textarea:active {
 [type='url']:active::-moz-placeholder,
 [type='week']:active::-moz-placeholder,
 textarea:active::-moz-placeholder {
-  color: var(--bscpn-color-brand-1);
+  color: var(--bscpn-color-grayscale);
 }
 [type='date']:active::placeholder,
 [type='datetime-local']:active::placeholder,
@@ -888,7 +920,7 @@ textarea:active::-moz-placeholder {
 [type='url']:active::placeholder,
 [type='week']:active::placeholder,
 textarea:active::placeholder {
-  color: var(--bscpn-color-brand-1);
+  color: var(--bscpn-color-grayscale);
 }
 [type='date']:invalid,
 [type='date'][aria-invalid='true'],
@@ -947,7 +979,7 @@ textarea[aria-invalid='true'] {
 [type='week'][aria-invalid='true']::-moz-placeholder,
 textarea:invalid::-moz-placeholder,
 textarea[aria-invalid='true']::-moz-placeholder {
-  color: var(--bscpn-color-brand-1-light-1);
+  color: var(--bscpn-color-grayscale);
 }
 [type='date']:invalid::placeholder,
 [type='date'][aria-invalid='true']::placeholder,
@@ -975,7 +1007,7 @@ textarea[aria-invalid='true']::-moz-placeholder {
 [type='week'][aria-invalid='true']::placeholder,
 textarea:invalid::placeholder,
 textarea[aria-invalid='true']::placeholder {
-  color: var(--bscpn-color-brand-1-light-1);
+  color: var(--bscpn-color-grayscale);
 }
 [type='date']:disabled,
 [type='datetime-local']:disabled,
@@ -990,7 +1022,7 @@ textarea[aria-invalid='true']::placeholder {
 [type='url']:disabled,
 [type='week']:disabled,
 textarea:disabled {
-  background: var(--bscpn-color-grayscale-light-4);
+  background: var(--bscpn-color-grayscale-white);
   border-color: var(--bscpn-color-grayscale-light-1);
   box-shadow: none;
   color: var(--bscpn-color-grayscale);
@@ -1009,7 +1041,7 @@ textarea:disabled {
 [type='url']:disabled::-moz-placeholder,
 [type='week']:disabled::-moz-placeholder,
 textarea:disabled::-moz-placeholder {
-  color: var(--bscpn-color-grayscale-light-1);
+  color: var(--bscpn-color-grayscale);
 }
 [type='date']:disabled::placeholder,
 [type='datetime-local']:disabled::placeholder,
@@ -1024,7 +1056,7 @@ textarea:disabled::-moz-placeholder {
 [type='url']:disabled::placeholder,
 [type='week']:disabled::placeholder,
 textarea:disabled::placeholder {
-  color: var(--bscpn-color-grayscale-light-1);
+  color: var(--bscpn-color-grayscale);
 }
 [type='date']:focus:not(:focus-visible),
 [type='datetime-local']:focus:not(:focus-visible),
@@ -1119,7 +1151,7 @@ textarea:focus:not(:focus-visible) {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-warning)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
     border-color: var(--bscpn-color-warning);
     box-shadow: none;
-    color: var(--bscpn-color-warning);
+    color: var(--bscpn-color-grayscale-dark-1);
   }
   select[disabled] {
     background-color: var(--bscpn-color-grayscale-light-3);
diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css
index 9bac9483a..504bbc254 100644
--- a/test/scss/fixtures/bitstyles.css
+++ b/test/scss/fixtures/bitstyles.css
@@ -759,7 +759,7 @@ img {
   [type='checkbox']:checked {
     background-color: var(--bs-color-brand-1-dark-1);
     border-color: var(--bs-color-brand-1-dark-1);
-    box-shadow: none;
+    box-shadow: var(--bs-shadow-brand-1-box);
     color: var(--bs-color-grayscale-white);
   }
   [type='checkbox']:checked:after {
@@ -768,9 +768,16 @@ img {
   }
   [type='checkbox']:invalid,
   [type='checkbox'][aria-invalid='true'] {
-    background-color: var(--bs-color-brand-1);
-    border-color: var(--bs-color-brand-1);
-    box-shadow: var(--bs-shadow-warning);
+    background-color: var(--bs-color-grayscale-white);
+    border-color: var(--bs-color-warning-dark-1);
+    box-shadow: none;
+    color: var(--bs-color-grayscale-white);
+  }
+  [type='checkbox']:invalid:checked,
+  [type='checkbox'][aria-invalid='true']:checked {
+    background-color: var(--bs-color-warning-dark-1);
+    border-color: var(--bs-color-warning-dark-1);
+    box-shadow: var(--bs-shadow-warning-box);
     color: var(--bs-color-grayscale-white);
   }
   [type='checkbox'][disabled] {
@@ -823,7 +830,7 @@ img {
     background-color: var(--bs-color-grayscale-white);
     border: 0.1875rem solid var(--bs-color-grayscale-dark-2);
     border-radius: 9999rem;
-    box-shadow: var(--bs-shadow-brand-1);
+    box-shadow: var(--bs-shadow-brand-1-box);
     color: var(--bs-color-grayscale-light-1);
   }
   [type='radio']:after {
@@ -864,7 +871,7 @@ img {
   [type='radio']:checked {
     background-color: var(--bs-color-grayscale-white);
     border-color: var(--bs-color-brand-1-dark-1);
-    box-shadow: var(--bs-shadow-brand-1);
+    box-shadow: var(--bs-shadow-brand-1-box);
     color: var(--bs-color-brand-1-dark-1);
   }
   [type='radio']:checked:after {
@@ -875,8 +882,23 @@ img {
   [type='radio'][aria-invalid='true'] {
     background-color: var(--bs-color-grayscale-white);
     border-color: var(--bs-color-warning-dark-1);
-    box-shadow: var(--bs-shadow-warning);
-    color: var(--bs-color-warning-dark-4);
+    box-shadow: none;
+    color: var(--bs-color-warning-dark-1);
+  }
+  [type='radio']:invalid:after,
+  [type='radio'][aria-invalid='true']:after {
+    background: var(--bs-color-warning-dark-1);
+  }
+  [type='radio']:invalid:checked,
+  [type='radio'][aria-invalid='true']:checked {
+    background-color: var(--bs-color-grayscale-white);
+    border-color: var(--bs-color-warning-dark-1);
+    box-shadow: var(--bs-shadow-warning-box);
+    color: var(--bs-color-warning-dark-1);
+  }
+  [type='radio']:invalid:checked:after,
+  [type='radio'][aria-invalid='true']:checked:after {
+    background: var(--bs-color-warning-dark-1);
   }
   [type='radio'][disabled] {
     background-color: var(--bs-color-grayscale-white);
@@ -905,13 +927,23 @@ img {
     box-shadow: none;
     color: var(--bs-color-brand-1);
   }
+  [type='radio']:checked:focus:not(:invalid):after,
+  [type='radio']:checked:focus:not([aria-invalid='true']):after,
+  [type='radio']:checked:hover:not(:invalid):after,
+  [type='radio']:checked:hover:not([aria-invalid='true']):after {
+    background: var(--bs-color-brand-1);
+  }
   [type='radio']:checked:active:not(:invalid),
   [type='radio']:checked:active:not([aria-invalid='true']) {
     background-color: var(--bs-color-grayscale-white);
-    border-color: var(--bs-color-brand-1);
+    border-color: var(--bs-color-brand-1-dark-1);
     box-shadow: none;
     color: var(--bs-color-brand-1);
   }
+  [type='radio']:checked:active:not(:invalid):after,
+  [type='radio']:checked:active:not([aria-invalid='true']):after {
+    background: var(--bs-color-brand-1);
+  }
 }
 input,
 textarea {
@@ -961,7 +993,7 @@ textarea {
   --bs-input-text-padding-horizontal: var(--bs-size-m);
   --bs-input-text-border-width: 0.1875rem;
   background-color: var(--bs-color-grayscale-white);
-  border: 0.1875rem solid var(--bs-color-grayscale-dark-1);
+  border: 0.1875rem solid var(--bs-color-grayscale);
   border-radius: var(--bs-input-text-border-top-left-radius)
     var(--bs-input-text-border-top-right-radius)
     var(--bs-input-text-border-bottom-right-radius)
@@ -1037,7 +1069,7 @@ textarea:hover {
 [type='week']:hover::-moz-placeholder,
 textarea:focus::-moz-placeholder,
 textarea:hover::-moz-placeholder {
-  color: var(--bs-color-grayscale-dark-1);
+  color: var(--bs-color-grayscale);
 }
 [type='date']:focus::placeholder,
 [type='date']:hover::placeholder,
@@ -1065,7 +1097,7 @@ textarea:hover::-moz-placeholder {
 [type='week']:hover::placeholder,
 textarea:focus::placeholder,
 textarea:hover::placeholder {
-  color: var(--bs-color-grayscale-dark-1);
+  color: var(--bs-color-grayscale);
 }
 [type='date']:focus-visible,
 [type='datetime-local']:focus-visible,
@@ -1117,7 +1149,7 @@ textarea:active {
 [type='url']:active::-moz-placeholder,
 [type='week']:active::-moz-placeholder,
 textarea:active::-moz-placeholder {
-  color: var(--bs-color-brand-1);
+  color: var(--bs-color-grayscale);
 }
 [type='date']:active::placeholder,
 [type='datetime-local']:active::placeholder,
@@ -1132,7 +1164,7 @@ textarea:active::-moz-placeholder {
 [type='url']:active::placeholder,
 [type='week']:active::placeholder,
 textarea:active::placeholder {
-  color: var(--bs-color-brand-1);
+  color: var(--bs-color-grayscale);
 }
 [type='date']:invalid,
 [type='date'][aria-invalid='true'],
@@ -1191,7 +1223,7 @@ textarea[aria-invalid='true'] {
 [type='week'][aria-invalid='true']::-moz-placeholder,
 textarea:invalid::-moz-placeholder,
 textarea[aria-invalid='true']::-moz-placeholder {
-  color: var(--bs-color-brand-1-light-1);
+  color: var(--bs-color-grayscale);
 }
 [type='date']:invalid::placeholder,
 [type='date'][aria-invalid='true']::placeholder,
@@ -1219,7 +1251,7 @@ textarea[aria-invalid='true']::-moz-placeholder {
 [type='week'][aria-invalid='true']::placeholder,
 textarea:invalid::placeholder,
 textarea[aria-invalid='true']::placeholder {
-  color: var(--bs-color-brand-1-light-1);
+  color: var(--bs-color-grayscale);
 }
 [type='date']:disabled,
 [type='datetime-local']:disabled,
@@ -1234,7 +1266,7 @@ textarea[aria-invalid='true']::placeholder {
 [type='url']:disabled,
 [type='week']:disabled,
 textarea:disabled {
-  background: var(--bs-color-grayscale-light-4);
+  background: var(--bs-color-grayscale-white);
   border-color: var(--bs-color-grayscale-light-1);
   box-shadow: none;
   color: var(--bs-color-grayscale);
@@ -1253,7 +1285,7 @@ textarea:disabled {
 [type='url']:disabled::-moz-placeholder,
 [type='week']:disabled::-moz-placeholder,
 textarea:disabled::-moz-placeholder {
-  color: var(--bs-color-grayscale-light-1);
+  color: var(--bs-color-grayscale);
 }
 [type='date']:disabled::placeholder,
 [type='datetime-local']:disabled::placeholder,
@@ -1268,7 +1300,7 @@ textarea:disabled::-moz-placeholder {
 [type='url']:disabled::placeholder,
 [type='week']:disabled::placeholder,
 textarea:disabled::placeholder {
-  color: var(--bs-color-grayscale-light-1);
+  color: var(--bs-color-grayscale);
 }
 [type='date']:focus:not(:focus-visible),
 [type='datetime-local']:focus:not(:focus-visible),
@@ -1362,7 +1394,7 @@ textarea:focus:not(:focus-visible) {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-warning)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E");
     border-color: var(--bs-color-warning);
     box-shadow: none;
-    color: var(--bs-color-warning);
+    color: var(--bs-color-grayscale-dark-1);
   }
   select[disabled] {
     background-color: var(--bs-color-grayscale-light-3);

From 91401f0b8863a0b1f6c327767e6c529fea03b748 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Tue, 15 Aug 2023 14:57:30 +0200
Subject: [PATCH 19/21] - Using numbers in the `@font-face` rules, as css
 custom properties are not available there - Correct url for a story

---
 scss/bitstyles/base/forms/forms.stories.mdx   |  2 +-
 scss/bitstyles/design-tokens/_typography.scss | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/scss/bitstyles/base/forms/forms.stories.mdx b/scss/bitstyles/base/forms/forms.stories.mdx
index be006f090..80c36c2c5 100644
--- a/scss/bitstyles/base/forms/forms.stories.mdx
+++ b/scss/bitstyles/base/forms/forms.stories.mdx
@@ -2,7 +2,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Base/Forms/Overview" />
 
-<Story id="ui-data-forms--login-form-with-errors" />
+<Story id="ui-data-forms-overview--login-form-with-errors" />
 
 # Forms
 
diff --git a/scss/bitstyles/design-tokens/_typography.scss b/scss/bitstyles/design-tokens/_typography.scss
index 5ef441058..ed608db39 100644
--- a/scss/bitstyles/design-tokens/_typography.scss
+++ b/scss/bitstyles/design-tokens/_typography.scss
@@ -26,37 +26,37 @@ $webfont-variants: (
   'normal': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'normal')),
+    'font-weight': 400,
     'filename': 'poppins-v20-latin-400',
   ),
   'italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'normal')),
+    'font-weight': 400,
     'filename': 'poppins-v20-latin-400italic',
   ),
   'medium': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'medium')),
+    'font-weight': 500,
     'filename': 'poppins-v20-latin-500',
   ),
   'medium-italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'medium')),
+    'font-weight': 500,
     'filename': 'poppins-v20-latin-500italic',
   ),
   'semibold': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'semibold')),
+    'font-weight': 600,
     'filename': 'poppins-v20-latin-600',
   ),
   'semibold-italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'semibold')),
+    'font-weight': 600,
     'filename': 'poppins-v20-latin-600italic',
   ),
 ) !default;

From ad814e578f17503a8403c10bd7dc9acf43938bae Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Tue, 15 Aug 2023 16:14:54 +0200
Subject: [PATCH 20/21] Update changelog

---
 CHANGELOG.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44e1bfcfa..197ac1485 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,16 @@
 - Badge with Label, added an example showing a text label rendered next to a badge component, to the badge docs.
 - A new layout component at `atoms/switcher`, that lays out its children in a horizontal row with consistent spacing between children. The layout switches to a vertical stack once the width of the component passes below a threshold, or the number of children goes over a limit.
 - A new layout component at `atoms/stack`, that lays out its children vertically, with consistent spacing between children.
+- Joined-ui now works with inputs — you can now join inputs together with other inputs, or inputs together with buttons.
+- Inputs now use the global `:focus` outline, for improved keyboard navigation and visual accessibility.
+
+### Fixed
+
+- Default configuration for webfonts uses absolute values instead of CSS Custom Properties, so the font-weights work correctly again.
+
+### Changed
+
+- Updated visual appearance of inputs. If you weren’t overriding the default configuration, you don’t need to do anything to update. If you were overriding the configuration, be aware that there are now extra states for radio & checkboxes that you should override the colors for: active, checked-hover, checked-active, invalid, invalid-checked. You can now also set the box-shadow for each state.
 
 ## [[6.0.0]](https://github.com/bitcrowd/bitstyles/releases/tag/v6.0.0) - 2023-06-08
 

From e1ca33522a98a77ab6d7fe30b09a56beb81a4675 Mon Sep 17 00:00:00 2001
From: Darren Cadwallader <darren@bitcrowd.net>
Date: Mon, 11 Dec 2023 14:11:27 +0100
Subject: [PATCH 21/21] Update fixtures after rebasing

---
 test/scss/fixtures/bitstyles-overrides.css | 12 ++++++------
 test/scss/fixtures/bitstyles.css           | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css
index 7bcdb8858..a25c6c75a 100644
--- a/test/scss/fixtures/bitstyles-overrides.css
+++ b/test/scss/fixtures/bitstyles-overrides.css
@@ -366,7 +366,7 @@ figcaption {
   font-display: swap;
   font-family: FakeFont;
   font-style: normal;
-  font-weight: var(--bscpn-font-weight-normal);
+  font-weight: 400;
   src: url(poppins-v20-latin-400.woff2) format('woff2'),
     url(poppins-v20-latin-400.woff) format('woff');
 }
@@ -374,7 +374,7 @@ figcaption {
   font-display: swap;
   font-family: FakeFont;
   font-style: italic;
-  font-weight: var(--bscpn-font-weight-normal);
+  font-weight: 400;
   src: url(poppins-v20-latin-400italic.woff2) format('woff2'),
     url(poppins-v20-latin-400italic.woff) format('woff');
 }
@@ -382,7 +382,7 @@ figcaption {
   font-display: swap;
   font-family: FakeFont;
   font-style: normal;
-  font-weight: var(--bscpn-font-weight-medium);
+  font-weight: 500;
   src: url(poppins-v20-latin-500.woff2) format('woff2'),
     url(poppins-v20-latin-500.woff) format('woff');
 }
@@ -390,7 +390,7 @@ figcaption {
   font-display: swap;
   font-family: FakeFont;
   font-style: italic;
-  font-weight: var(--bscpn-font-weight-medium);
+  font-weight: 500;
   src: url(poppins-v20-latin-500italic.woff2) format('woff2'),
     url(poppins-v20-latin-500italic.woff) format('woff');
 }
@@ -398,7 +398,7 @@ figcaption {
   font-display: swap;
   font-family: FakeFont;
   font-style: normal;
-  font-weight: var(--bscpn-font-weight-semibold);
+  font-weight: 600;
   src: url(poppins-v20-latin-600.woff2) format('woff2'),
     url(poppins-v20-latin-600.woff) format('woff');
 }
@@ -406,7 +406,7 @@ figcaption {
   font-display: swap;
   font-family: FakeFont;
   font-style: italic;
-  font-weight: var(--bscpn-font-weight-semibold);
+  font-weight: 600;
   src: url(poppins-v20-latin-600italic.woff2) format('woff2'),
     url(poppins-v20-latin-600italic.woff) format('woff');
 }
diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css
index 504bbc254..04c3d034b 100644
--- a/test/scss/fixtures/bitstyles.css
+++ b/test/scss/fixtures/bitstyles.css
@@ -610,7 +610,7 @@ figcaption {
   font-display: swap;
   font-family: Poppins;
   font-style: normal;
-  font-weight: var(--bs-font-weight-normal);
+  font-weight: 400;
   src: url(../assets/fonts/poppins-v20-latin-400.woff2) format('woff2'),
     url(../assets/fonts/poppins-v20-latin-400.woff) format('woff');
 }
@@ -618,7 +618,7 @@ figcaption {
   font-display: swap;
   font-family: Poppins;
   font-style: italic;
-  font-weight: var(--bs-font-weight-normal);
+  font-weight: 400;
   src: url(../assets/fonts/poppins-v20-latin-400italic.woff2) format('woff2'),
     url(../assets/fonts/poppins-v20-latin-400italic.woff) format('woff');
 }
@@ -626,7 +626,7 @@ figcaption {
   font-display: swap;
   font-family: Poppins;
   font-style: normal;
-  font-weight: var(--bs-font-weight-medium);
+  font-weight: 500;
   src: url(../assets/fonts/poppins-v20-latin-500.woff2) format('woff2'),
     url(../assets/fonts/poppins-v20-latin-500.woff) format('woff');
 }
@@ -634,7 +634,7 @@ figcaption {
   font-display: swap;
   font-family: Poppins;
   font-style: italic;
-  font-weight: var(--bs-font-weight-medium);
+  font-weight: 500;
   src: url(../assets/fonts/poppins-v20-latin-500italic.woff2) format('woff2'),
     url(../assets/fonts/poppins-v20-latin-500italic.woff) format('woff');
 }
@@ -642,7 +642,7 @@ figcaption {
   font-display: swap;
   font-family: Poppins;
   font-style: normal;
-  font-weight: var(--bs-font-weight-semibold);
+  font-weight: 600;
   src: url(../assets/fonts/poppins-v20-latin-600.woff2) format('woff2'),
     url(../assets/fonts/poppins-v20-latin-600.woff) format('woff');
 }
@@ -650,7 +650,7 @@ figcaption {
   font-display: swap;
   font-family: Poppins;
   font-style: italic;
-  font-weight: var(--bs-font-weight-semibold);
+  font-weight: 600;
   src: url(../assets/fonts/poppins-v20-latin-600italic.woff2) format('woff2'),
     url(../assets/fonts/poppins-v20-latin-600italic.woff) format('woff');
 }