diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index d1c39007dc..7a980dea13 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -193,6 +193,13 @@ $fd-input-field-height--compact: 1.625rem;
           }
         }
       }
+
+      @include fd-expanded() {
+        background: var(--sapField_Focus_Background);
+        outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) map_get($set-props, "focusOutlineColor");
+        outline-offset: var(--fdInput_Outline_Offset);
+        box-shadow: none;
+      }
     }
   }
 
@@ -322,15 +329,20 @@ $fd-input-field-height--compact: 1.625rem;
     border-radius: var(--fdInput_Group_Button_Border_Raduis);
     background: var(--fdInput_Group_Button_Background);
     color: var(--fdInput_Group_Button_Text_Color);
+    background-color: var(--fdButtonBackgroundColor);
 
     &::before {
       display: none !important;
     }
 
+    &::after {
+      border-radius: var(--fdInput_Outline_Border_Radius);
+    }
+
     @include fd-hover() {
       --fdInput_Group_Button_Text_Color: var(--fdInput_Group_Button_Hover_Text_Color);
+      --fdButtonBackgroundColor: var(--fdInput_Group_Button_Hover_Background);
 
-      background: var(--fdInput_Group_Button_Hover_Background);
       box-shadow: var(--fdInput_Group_Button_Box_Shadow);
     }
 
@@ -343,6 +355,31 @@ $fd-input-field-height--compact: 1.625rem;
 
   @each $set-name, $set-props in $fd-input-group-button-states {
     &.is-#{$set-name} {
+      @include fd-focus() {
+        .#{$block}__button {
+          color: map_get($set-props, "activeColor");
+          box-shadow: map_get($set-props, "boxShadow");
+
+          --fdButtonBackgroundColor: var(--fdInput_Group_Button_Active_Background);
+
+          @include fd-hover() {
+            --fdButtonBackgroundColor: var(--fdInput_Group_Button_Active_Background);
+          }
+        }
+      }
+
+      @include fd-expanded() {
+        .#{$block}__button {
+          color: map_get($set-props, "activeColor");
+          box-shadow: map_get($set-props, "boxShadow");
+
+          --fdButtonBackgroundColor: var(--fdInput_Group_Button_Active_Background);
+
+          @include fd-hover() {
+            --fdButtonBackgroundColor: var(--fdInput_Group_Button_Active_Background);
+          }
+        }
+      }
 
       .#{$block}__button {
         @include fd-hover() {
diff --git a/packages/styles/src/select.scss b/packages/styles/src/select.scss
index b3da1772d7..e049d6f25a 100644
--- a/packages/styles/src/select.scss
+++ b/packages/styles/src/select.scss
@@ -9,89 +9,6 @@ $fd-select-padding-x-compact: 0.5rem;
   min-width: calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);
 }
 
-@mixin fd-select-button-settings($bkgdColor, $borderLeft) {
-  .#{$block}__button {
-    --fdInput_Group_Button_Text_Color: var(--sapButton_Active_TextColor);
-    --fdInput_Group_Button_Background: var(--sapField_BackgroundStyle);
-
-    // Need content here in case we have background property which may override background-color.
-    @content;
-
-    background-color: $bkgdColor;
-    border-left-color: $borderLeft;
-    box-shadow: var(--fdInput_Group_Button_Box_Shadow);
-    position: static;
-  }
-
-  @include fd-rtl() {
-    .#{$block}__button {
-      border-left-color: transparent;
-      border-right-color: $borderLeft;
-    }
-  }
-}
-
-@mixin fd-select-states-overwrite() {
-  $fd-select-states: (
-    'success': (
-      'activeColor': var(--fdInput_Group_Button_Success_Active_Text_Color),
-      'background': var(--sapField_SuccessBackgroundStyle),
-      'hoverBoxShadow': var(--fdInput_Success_Box_Shadow_Hover)
-    ),
-    'error': (
-      'activeColor': var(--fdInput_Group_Button_Error_Active_Text_Color),
-      'background': var(--sapField_InvalidBackgroundStyle),
-      'hoverBoxShadow': var(--fdInput_Error_Box_Shadow_Hover)
-    ),
-    'warning': (
-      'activeColor': var(--fdInput_Group_Button_Warning_Active_Text_Color),
-      'background': var(--sapField_WarningBackgroundStyle),
-      'hoverBoxShadow':  var(--fdInput_Warning_Box_Shadow_Hover)
-    ),
-    'alert': (
-      'activeColor': var(--fdInput_Group_Button_Warning_Active_Text_Color),
-      'background': var(--sapField_WarningBackgroundStyle),
-      'hoverBoxShadow':  var(--fdInput_Warning_Box_Shadow_Hover)
-    ),
-    'information': (
-      'activeColor': var(--fdInput_Group_Button_Information_Active_Text_Color),
-      'background': var(--sapField_InformationBackgroundStyle),
-      'hoverBoxShadow':  var(--fdInput_Information_Box_Shadow_Hover)
-    )
-  );
-
-  @each $set-name, $set-props in $fd-select-states {
-    &.is-#{$set-name} {
-      @include fd-expanded() {
-        box-shadow: map_get($set-props, "hoverBoxShadow");
-
-        .#{$block}__button {
-          color: map_get($set-props, "activeColor");
-          background: map_get($set-props, "background");
-          background-color: var(--sapButton_Selected_Background);
-          border-left-color: var(--fdSelect_Expanded_Button_Border_Left_Color);
-          box-shadow: map_get($set-props, "hoverBoxShadow");
-
-          @include fd-hover() {
-            color: var(--fdInput_Group_Button_Text_Color);
-          }
-        }
-
-        @include fd-rtl() {
-          .#{$block}__button {
-            border-left-color: transparent;
-            border-right-color: var(--fdSelect_Expanded_Button_Border_Left_Color);
-          }
-        }
-
-        @include fd-focus() {
-          box-shadow: none;
-        }
-      }
-    }
-  }
-}
-
 .#{$block} {
   @include fd-reset();
 
@@ -115,6 +32,7 @@ $fd-select-padding-x-compact: 0.5rem;
     box-shadow: none;
 
     @include fd-flex-center() {
+      gap: 0.25rem;
       justify-content: space-between;
     }
 
@@ -136,12 +54,6 @@ $fd-select-padding-x-compact: 0.5rem;
       @include fd-set-equal-positions(0);
     }
 
-    .#{$block}__button {
-      @include fd-set-margin-left(0.25rem);
-
-      height: 100%;
-    }
-
     @include fd-readonly() {
       cursor: text;
 
@@ -150,28 +62,26 @@ $fd-select-padding-x-compact: 0.5rem;
 
         --fdSelect_Min_Width: 5rem;
       }
-    }
 
-    @include fd-expanded() {
-      &::after {
-        box-shadow: var(--fdInput_Box_Shadow_Hover);
-      }
-
-      @include fd-select-button-settings(var(--sapButton_Selected_Background), var(--fdSelect_Expanded_Button_Border_Left_Color)
-    );
-
-      @include fd-focus() {
-        box-shadow: none;
+      .#{$block}__button {
+        opacity: 0;
       }
+    }
 
-      @include fd-hover() {
-        @include fd-select-button-settings(var(--sapButton_Selected_Hover_Background), var(--fdSelect_Expanded_Button_Border_Left_Color_Hover)) {
-          background: var(--sapField_Hover_BackgroundStyle);
+    &[aria-selected='false'] {
+      .#{$block}__text-content {
+        font-style: italic;
+        font-weight: normal;
+        padding: 0 0.625rem;
+        color: var(--sapField_PlaceholderTextColor);
+
+        [class*='sap-icon'] {
+          font-style: italic;
+          font-weight: normal;
+          color: var(--sapField_PlaceholderTextColor);
         }
       }
     }
-
-    @include fd-select-states-overwrite();
   }
 
   &__text-content {
diff --git a/packages/styles/src/step-input.scss b/packages/styles/src/step-input.scss
index 15ed1cebfd..3807d206a4 100644
--- a/packages/styles/src/step-input.scss
+++ b/packages/styles/src/step-input.scss
@@ -7,13 +7,10 @@ $block: #{$fd-namespace}-step-input;
   $fd-button-icon-font-size: 0.875rem;
   $fd-step-input-cozy-height: 2.25rem;
   $fd-step-input-compact-height: 1.625rem;
-  $fd-step-input-cozy-button-width: 2.125rem;
-  $fd-step-input-compact-button-width: 1.5rem;
   $fd-step-input-description-padding: 0.5rem;
-  $fd-step-input-semantic-border-offset: 0.125rem;
 
-  --fdStepInput_Button_Width: #{$fd-step-input-cozy-button-width};
-  --fdStepInput_Bordered_Button_Width: #{$fd-step-input-cozy-button-width - $fd-step-input-semantic-border-offset};
+  --fdStepInput_Button_Width: var(--fdStepInput_Button_Width_Cozy);
+  --fdStepInput_Bordered_Button_Width: var(--fdStepInput_Button_Width_Semantic_Cozy);
 
   // @include fd-reset();
   @include fd-input-field-base(true);
@@ -50,10 +47,11 @@ $block: #{$fd-namespace}-step-input;
   }
 
   &__input.#{$fd-namespace}-input {
+    --fdInput_Field_Padding: 0 0.25rem;
+
     text-align: right;
     border: none;
     margin: 0;
-    padding: 0 0.25rem;
     background: none;
     box-shadow: none;
     background-color: transparent;
@@ -82,14 +80,14 @@ $block: #{$fd-namespace}-step-input;
   &.is-error,
   &.is-warning {
     .#{$block}__button.#{$fd-namespace}-button {
-      width: var(--fdStepInput_Bordered_Button_Width);
-      min-width: var(--fdStepInput_Bordered_Button_Width);
+      width: var(--fdStepInput_Button_Width_Semantic_Cozy);
+      min-width: var(--fdStepInput_Button_Width_Semantic_Cozy);
     }
   }
 
   @include fd-compact-or-condensed() {
-    --fdStepInput_Bordered_Button_Width: #{$fd-step-input-compact-button-width - $fd-step-input-semantic-border-offset};
-    --fdStepInput_Button_Width: #{$fd-step-input-compact-button-width};
+    --fdStepInput_Button_Width: var(--fdStepInput_Button_Width_Compact);
+    --fdStepInput_Bordered_Button_Width: var(--fdStepInput_Button_Width_Semantic_Compact);
     --fdInput_Field_Compact_Padding: 0 0.25rem;
 
     height: $fd-step-input-compact-height;
@@ -98,15 +96,22 @@ $block: #{$fd-namespace}-step-input;
     .#{$block}__input.#{$fd-namespace}-input {
       height: 100%;
     }
+
+    &.is-readonly {
+      --fdInput_Field_Compact_Padding: 0 0.5rem;
+    }
   }
 
   &.is-readonly {
+    .#{$block}__input.#{$fd-namespace}-input {
+      --fdInput_Field_Padding: 0 0.625rem;
+    }
+
     .#{$block}__button.#{$fd-namespace}-button {
       display: none;
     }
 
     @include fd-focus-within() {
-      background: var(--sapField_Focus_Background);
       border-radius: var(--sapField_BorderCornerRadius);
 
       .#{$block}__input {
@@ -114,4 +119,15 @@ $block: #{$fd-namespace}-step-input;
       }
     }
   }
+
+  @include fd-focus() {
+    &.is-information,
+    &.is-error,
+    &.is-warning,
+    &.is-success {
+      .#{$block}__button.#{$fd-namespace}-button:not(:hover) {
+        box-shadow: none;
+      }
+    }
+  }
 }
diff --git a/packages/styles/src/theming/common/input-group/_sap_fiori.scss b/packages/styles/src/theming/common/input-group/_sap_fiori.scss
index 92cd10aad1..f03fcfa50d 100644
--- a/packages/styles/src/theming/common/input-group/_sap_fiori.scss
+++ b/packages/styles/src/theming/common/input-group/_sap_fiori.scss
@@ -5,7 +5,7 @@
   --fdInput_Group_Button_Box_Shadow: none;
   --fdInput_Group_Button_Hover_Background: var(--sapButton_Lite_Hover_Background);
   --fdInput_Group_Button_Hover_Text_Color: var(--sapButton_Lite_Hover_TextColor);
-  --fdInput_Group_Button_Active_Background: var(--sapButton_Lite_Active_Background);
+  --fdInput_Group_Button_Active_Background: var(--sapButton_Selected_Background);
   --fdInput_Group_Button_Active_Text_Color: var(--sapButton_Active_TextColor);
   --fdInput_Group_Button_Success_Active_Text_Color: var(--sapButton_Active_TextColor);
   --fdInput_Group_Button_Success_Active_Box_Shadow: none;
@@ -17,4 +17,5 @@
   --fdInput_Group_Button_Information_Active_Box_Shadow: none;
   --fdInput_Outline_Offset_Focus_Within: -0.1875rem;
   --fdInput_Outline_Offset_States: -0.25rem;
+  --fdInput_Outline_Border_Radius: 0;
 }
diff --git a/packages/styles/src/theming/common/input-group/_sap_horizon.scss b/packages/styles/src/theming/common/input-group/_sap_horizon.scss
index 6d04f9b8f2..c079315a2c 100644
--- a/packages/styles/src/theming/common/input-group/_sap_horizon.scss
+++ b/packages/styles/src/theming/common/input-group/_sap_horizon.scss
@@ -1,10 +1,10 @@
 :root {
   --fdInput_Group_Button_Border_Raduis: var(--sapField_BorderCornerRadius);
   --fdInput_Group_Button_Background: transparent;
-  --fdInput_Group_Button_Text_Color: var(--sapButton_TextColor);
-  --fdInput_Group_Button_Box_Shadow: var(--sapContent_Interaction_Shadow);
+  --fdInput_Group_Button_Text_Color: var(--sapField_TextColor);
+  --fdInput_Group_Button_Box_Shadow: var(--sapField_Hover_Shadow);
   --fdInput_Group_Button_Hover_Background: transparent;
-  --fdInput_Group_Button_Hover_Text_Color: var(--sapButton_TextColor);
+  --fdInput_Group_Button_Hover_Text_Color: var(--sapField_TextColor);
   --fdInput_Group_Button_Active_Background: transparent;
   --fdInput_Group_Button_Active_Text_Color: var(--sapButton_Selected_TextColor);
   --fdInput_Group_Button_Success_Active_Text_Color: var(--sapButton_Accept_Selected_TextColor);
@@ -16,4 +16,5 @@
   --fdInput_Group_Button_Information_Active_Text_Color: var(--sapButton_Selected_TextColor);
   --fdInput_Group_Button_Information_Active_Box_Shadow: var(--sapContent_Informative_Shadow);
   --fdInput_Outline_Offset_Focus_Within: -0.125rem;
+  --fdInput_Outline_Border_Radius: 0.2rem;
 }
diff --git a/packages/styles/src/theming/common/input/_sap_horizon.scss b/packages/styles/src/theming/common/input/_sap_horizon.scss
index 05a0076153..47b5c64106 100644
--- a/packages/styles/src/theming/common/input/_sap_horizon.scss
+++ b/packages/styles/src/theming/common/input/_sap_horizon.scss
@@ -2,7 +2,7 @@
   --fdInput_Box_Shadow_Hover: var(--sapField_Hover_Shadow);
   --fdInput_Outline_Color: var(--sapField_Active_BorderColor);
   --fdInput_Error_Background_Color_Hover: var(--sapField_Hover_Background);
-  --fdInput_Error_Box_Shadow_Hover: var(--sapContent_Negative_Shadow);
+  --fdInput_Error_Box_Shadow_Hover: var(--sapField_InvalidShadow);
   --fdInput_Error_Outline_Color: var(--sapField_InvalidColor);
   --fdInput_Warning_Background_Color_Hover: var(--sapField_Hover_Background);
   --fdInput_Warning_Box_Shadow_Hover: var(--sapContent_Critical_Shadow);
diff --git a/packages/styles/src/theming/common/step-input/_sap_fiori.scss b/packages/styles/src/theming/common/step-input/_sap_fiori.scss
new file mode 100644
index 0000000000..c31c871ded
--- /dev/null
+++ b/packages/styles/src/theming/common/step-input/_sap_fiori.scss
@@ -0,0 +1,6 @@
+:root {
+  --fdStepInput_Button_Width_Cozy: 2.125rem;
+  --fdStepInput_Button_Width_Compact: 1.5rem;
+  --fdStepInput_Button_Width_Semantic_Cozy: 2rem;
+  --fdStepInput_Button_Width_Semantic_Compact: 1.375rem;
+}
diff --git a/packages/styles/src/theming/common/step-input/_sap_horizon.scss b/packages/styles/src/theming/common/step-input/_sap_horizon.scss
new file mode 100644
index 0000000000..407acc0a14
--- /dev/null
+++ b/packages/styles/src/theming/common/step-input/_sap_horizon.scss
@@ -0,0 +1,6 @@
+:root {
+  --fdStepInput_Button_Width_Cozy: 2.25rem;
+  --fdStepInput_Button_Width_Compact: 2rem;
+  --fdStepInput_Button_Width_Semantic_Cozy: 2.25rem;
+  --fdStepInput_Button_Width_Semantic_Compact: 2rem;
+}
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
index 4f5fb41ddd..5cb72520bd 100644
--- a/packages/styles/src/theming/sap_fiori_3.scss
+++ b/packages/styles/src/theming/sap_fiori_3.scss
@@ -37,6 +37,7 @@
 @import "./common/message-popover/sap_fiori";
 @import "./common/token/sap_fiori";
 @import "./common/calendar/sap_fiori";
+@import "./common/step-input/sap_fiori";
 @import "./sap_fiori_3/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
index 20d8278214..6ff1b051a8 100644
--- a/packages/styles/src/theming/sap_fiori_3_dark.scss
+++ b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -37,6 +37,7 @@
 @import "./common/message-popover/sap_fiori";
 @import "./common/token/sap_fiori";
 @import "./common/calendar/sap_fiori";
+@import "./common/step-input/sap_fiori";
 @import "./sap_fiori_3_dark/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
index c6685679f0..52b9fa6f09 100644
--- a/packages/styles/src/theming/sap_fiori_3_hcb.scss
+++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -44,6 +44,7 @@
 @import "./common/message-popover/sap_fiori";
 @import "./common/token/sap_fiori_hc";
 @import "./common/calendar/sap_fiori";
+@import "./common/step-input/sap_fiori";
 @import "./sap_fiori_3_hcb/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
index 5dbf8b2716..23c2466779 100644
--- a/packages/styles/src/theming/sap_fiori_3_hcw.scss
+++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -39,6 +39,7 @@
 @import "./common/token/sap_fiori_hc";
 @import "./common/calendar/sap_fiori";
 @import "./sap_fiori_3_hcw/css_variables";
+@import "./common/step-input/sap_fiori";
 
 :root {
   --fdInverted_Object_Border_Width: 0.0625rem;
diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
index e4c4d15d7d..0f4f1863c1 100644
--- a/packages/styles/src/theming/sap_fiori_3_light_dark.scss
+++ b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -36,6 +36,7 @@
 @import "./common/message-popover/sap_fiori";
 @import "./common/token/sap_fiori";
 @import "./common/calendar/sap_fiori";
+@import "./common/step-input/sap_fiori";
 @import "./sap_fiori_3_light_dark/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
index 73fe604d49..e4f2df205c 100644
--- a/packages/styles/src/theming/sap_horizon.scss
+++ b/packages/styles/src/theming/sap_horizon.scss
@@ -39,6 +39,7 @@
 @import "./common/message-popover/sap_horizon";
 @import "./common/token/sap_horizon";
 @import "./common/calendar/sap_horizon";
+@import "./common/step-input/sap_horizon";
 @import "./sap_horizon/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_horizon/_css_variables.scss b/packages/styles/src/theming/sap_horizon/_css_variables.scss
index 50cc47760a..cf05a6f638 100644
--- a/packages/styles/src/theming/sap_horizon/_css_variables.scss
+++ b/packages/styles/src/theming/sap_horizon/_css_variables.scss
@@ -463,7 +463,7 @@
   --sapField_Hover_BackgroundStyle: 0 100% / 100% 0.0625rem no-repeat linear-gradient(0deg, #0064d9, #0064d9) border-box;
   --sapField_Hover_BorderColor: #0064d9;
   --sapField_Hover_HelpBackground: #fff;
-  --sapField_Hover_Shadow: inset 0 0 0 0.0625rem rgba(104, 174, 255, 0.5);
+  --sapField_Hover_Shadow: inset 0 0 0 0.0625rem rgba(79, 160, 255, 0.5);
   --sapField_Hover_InvalidShadow: inset 0 0 0 0.0625rem rgba(255, 142, 196, 0.45);
   --sapField_Hover_WarningShadow: inset 0 0 0 0.0625rem rgba(255, 213, 10, 0.4);
   --sapField_Hover_SuccessShadow: inset 0 0 0 0.0625rem rgba(48, 145, 76, 0.18);
@@ -483,25 +483,25 @@
   --sapField_InvalidBackgroundStyle: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, #e90b0b, #e90b0b) border-box;
   --sapField_InvalidBorderWidth: 0.125rem;
   --sapField_InvalidBorderStyle: none;
-  --sapField_InvalidShadow: none;
+  --sapField_InvalidShadow: inset 0 0 0 0.0625rem rgba(255, 142, 196, 0.45);
   --sapField_WarningColor: #dd6100;
   --sapField_WarningBackground: #fff8d6;
   --sapField_WarningBackgroundStyle: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, #dd6100, #dd6100) border-box;
   --sapField_WarningBorderWidth: 0.125rem;
   --sapField_WarningBorderStyle: none;
-  --sapField_WarningShadow: none;
+  --sapField_WarningShadow: inset 0 0 0 0.0625rem rgba(255, 213, 10, 0.4);
   --sapField_SuccessColor: #30914c;
   --sapField_SuccessBackground: #f5fae5;
   --sapField_SuccessBackgroundStyle: 0 100% / 100% 0.0625rem no-repeat linear-gradient(0deg, #30914c, #30914c) border-box;
   --sapField_SuccessBorderWidth: 0.0625rem;
   --sapField_SuccessBorderStyle: none;
-  --sapField_SuccessShadow: none;
+  --sapField_SuccessShadow: inset 0 0 0 0.0625rem rgba(48, 145, 76, 0.18);
   --sapField_InformationColor: #0070f2;
   --sapField_InformationBackground: #e1f4ff;
   --sapField_InformationBackgroundStyle: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, #0070f2, #0070f2) border-box;
   --sapField_InformationBorderWidth: 0.125rem;
   --sapField_InformationBorderStyle: none;
-  --sapField_InformationShadow: none;
+  --sapField_InformationShadow: inset 0 0 0 0.0625rem rgba(104, 174, 255, 0.5);
   --sapGroup_TitleBackground: #fff;
   --sapGroup_TitleBorderColor: #a8b2bd;
   --sapGroup_TitleTextColor: #1d2d3e;
diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
index 2b46bdd3d9..ed86b10a20 100644
--- a/packages/styles/src/theming/sap_horizon_dark.scss
+++ b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -39,6 +39,7 @@
 @import "./common/message-popover/sap_horizon";
 @import "./common/token/sap_horizon";
 @import "./common/calendar/sap_horizon";
+@import "./common/step-input/sap_horizon";
 @import "./sap_horizon_dark/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss b/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss
index 772671f288..4ddc197dc7 100644
--- a/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss
+++ b/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss
@@ -463,7 +463,7 @@
   --sapField_Hover_BackgroundStyle: 0 100% / 100% 0.0625rem no-repeat linear-gradient(0deg, #4db1ff, #4db1ff) border-box;
   --sapField_Hover_BorderColor: #4db1ff;
   --sapField_Hover_HelpBackground: #1d232a;
-  --sapField_Hover_Shadow: inset 0 0 0 0.0625rem rgba(169, 180, 190, 0.25);
+  --sapField_Hover_Shadow: inset 0 0 0 0.0625rem rgba(0, 100, 217, 0.3);
   --sapField_Hover_InvalidShadow: inset 0 0 0 0.0625rem rgba(248, 38, 38, 0.3);
   --sapField_Hover_WarningShadow: inset 0 0 0 0.0625rem rgba(132, 92, 0, 0.5);
   --sapField_Hover_SuccessShadow: inset 0 0 0 0.0625rem rgba(109, 173, 31, 0.18);
@@ -483,25 +483,25 @@
   --sapField_InvalidBackgroundStyle: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, #fa6161, #fa6161) border-box;
   --sapField_InvalidBorderWidth: 0.125rem;
   --sapField_InvalidBorderStyle: none;
-  --sapField_InvalidShadow: none;
+  --sapField_InvalidShadow: inset 0 0 0 0.0625rem rgba(223, 11, 11, 0.3);
   --sapField_WarningColor: #f7bf00;
   --sapField_WarningBackground: #382700;
   --sapField_WarningBackgroundStyle: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, #f7bf00, #f7bf00) border-box;
   --sapField_WarningBorderWidth: 0.125rem;
   --sapField_WarningBorderStyle: none;
-  --sapField_WarningShadow: none;
+  --sapField_WarningShadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.5);
   --sapField_SuccessColor: #6dad1f;
   --sapField_SuccessBackground: #11331a;
   --sapField_SuccessBackgroundStyle: 0 100% / 100% 0.0625rem no-repeat linear-gradient(0deg, #6dad1f, #6dad1f) border-box;
   --sapField_SuccessBorderWidth: 0.0625rem;
   --sapField_SuccessBorderStyle: none;
-  --sapField_SuccessShadow: none;
+  --sapField_SuccessShadow: inset 0 0 0 0.0625rem rgba(48, 145, 76, 0.18);
   --sapField_InformationColor: #4db1ff;
   --sapField_InformationBackground: #00144a;
   --sapField_InformationBackgroundStyle: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, #4db1ff, #4db1ff) border-box;
   --sapField_InformationBorderWidth: 0.125rem;
   --sapField_InformationBorderStyle: none;
-  --sapField_InformationShadow: none;
+  --sapField_InformationShadow: inset 0 0 0 0.0625rem rgba(0, 112, 242, 0.3);
   --sapGroup_TitleBackground: #1d232a;
   --sapGroup_TitleBorderColor: #768ea5;
   --sapGroup_TitleTextColor: #eaecee;
diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
index 94d9911b2b..6d712066c6 100644
--- a/packages/styles/src/theming/sap_horizon_hcb.scss
+++ b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -39,6 +39,7 @@
 @import "./common/message-popover/sap_horizon_hc";
 @import "./common/token/sap_horizon_hc";
 @import "./common/calendar/sap_horizon";
+@import "./common/step-input/sap_horizon";
 @import "./sap_horizon_hcb/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
index 62442a284f..1df9b64aff 100644
--- a/packages/styles/src/theming/sap_horizon_hcw.scss
+++ b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -40,6 +40,7 @@
 @import "./common/message-popover/sap_horizon_hc";
 @import "./common/token/sap_horizon_hc";
 @import "./common/calendar/sap_horizon";
+@import "./common/step-input/sap_horizon";
 @import "./sap_horizon_hcw/css_variables";
 
 :root {
diff --git a/packages/styles/stories/Components/Forms/input-group/states.example.html b/packages/styles/stories/Components/Forms/input-group/states.example.html
index 6e84c55b40..a289249de0 100644
--- a/packages/styles/stories/Components/Forms/input-group/states.example.html
+++ b/packages/styles/stories/Components/Forms/input-group/states.example.html
@@ -29,7 +29,7 @@
     <label class="fd-form-label" for="aqwsde127">Information</label>
     <div class="fd-input-group is-information">
         <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="aqwsde127" name="" value="1000000">
-        <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
             <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
                 Button
             </button>
@@ -95,3 +95,254 @@
         </span>
     </div>
 </div>
+
+<h3>Input Field with Buttons (States)</h3>
+<!-- Regular -->
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="regular">Error, Normal State</label>
+    <div class="fd-input-group">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="regular" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="regular-hover">Error, Hover State</label>
+    <div class="fd-input-group is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="regular-hover" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="regular-hover-btn">Error, Hover State on Button</label>
+    <div class="fd-input-group is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="regular-hover-btn" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button is-hover">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="regular-focus">Error, Focus State</label>
+    <div class="fd-input-group is-focus">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="regular-focus" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+
+<!-- Error States -->
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="error">Error, Normal State</label>
+    <div class="fd-input-group is-error">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="error" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="error-hover">Error, Hover State</label>
+    <div class="fd-input-group is-error is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="error-hover" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="error-hover-btn">Error, Hover State on Button</label>
+    <div class="fd-input-group is-error is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="error-hover-btn" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button is-hover">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="error-focus">Error, Focus State</label>
+    <div class="fd-input-group is-error is-focus">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="error-focus" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+
+<!-- Warning States -->
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="warning">Warning, Normal State</label>
+    <div class="fd-input-group is-warning">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="warning" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="warning-hover">Warning, Hover State</label>
+    <div class="fd-input-group is-warning is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="warning-hover" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="warning-hover-btn">Warning, Hover State on Button</label>
+    <div class="fd-input-group is-warning is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="warning-hover-btn" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button is-hover">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="warning-focus">Warning, Focus State</label>
+    <div class="fd-input-group is-warning is-focus">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="warning-focus" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+
+<!-- Success States -->
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="success">Success, Normal State</label>
+    <div class="fd-input-group is-success">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="success" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="success-hover">Success, Hover State</label>
+    <div class="fd-input-group is-success is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="success-hover" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="success-hover-btn">Success, Hover State on Button</label>
+    <div class="fd-input-group is-success is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="success-hover-btn" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button is-hover">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="success-focus">Success, Focus State</label>
+    <div class="fd-input-group is-success is-focus">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="success-focus" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+
+<!-- Information States -->
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="info">Information, Normal State</label>
+    <div class="fd-input-group is-information">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="info" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="info-hover">Information, Hover State</label>
+    <div class="fd-input-group is-information is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="info-hover" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="info-hover-btn">Information, Hover State on Button</label>
+    <div class="fd-input-group is-information is-hover">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="info-hover-btn" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button is-hover">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
+<br />
+<div class="fd-form-item">
+    <label class="fd-form-label" for="info-focus">Information, Focus State</label>
+    <div class="fd-input-group is-information is-focus">
+        <input class="fd-input fd-input fd-input-group__input" type="text" placeholder="Placeholder" id="info-focus" name="" value="1000000">
+        <span class="fd-input-group__addon fd-input-group__addon--button">
+            <button class="fd-input-group__button fd-button fd-button--transparent fd-button">
+                Button
+            </button>
+        </span>
+    </div>
+</div>
diff --git a/packages/styles/stories/Components/select/cozy.example.html b/packages/styles/stories/Components/select/cozy.example.html
index 0ec15764e9..fb2ec2fb8b 100644
--- a/packages/styles/stories/Components/select/cozy.example.html
+++ b/packages/styles/stories/Components/select/cozy.example.html
@@ -1,5 +1,168 @@
-<div style="height: 250px">
-    <label class="fd-form-label" id="cozySelectLabel">Choose an option</label><br />
+<div style="height: 100px">
+    <label class="fd-form-label" id="cozySelectLabel">Regular, Placeholder text</label><br />
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
+            <div class="fd-select">
+                <button
+                    aria-expanded="false"
+                    aria-selected="false"
+                    aria-haspopup="listbox"
+                    aria-labelledby="cozySelectLabel"
+                    class="fd-select__control"
+                    value="Select an option"
+                    tabindex="0">
+                    <span id="cozySelectValue" class="fd-select__text-content">Select an option</span>
+                    <span class="fd-button fd-button--transparent fd-select__button">
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="height: 100px">
+    <label class="fd-form-label" id="cozySelectLabel">Hover on Input Field, Placeholder text</label><br />
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
+            <div class="fd-select">
+                <button
+                    aria-expanded="false"
+                    aria-selected="false"
+                    aria-haspopup="listbox"
+                    aria-labelledby="cozySelectLabel"
+                    class="fd-select__control is-hover"
+                    value="Select an option"
+                    tabindex="0">
+                    <span id="cozySelectValue" class="fd-select__text-content">Select an option</span>
+                    <span class="fd-button fd-button--transparent fd-select__button">
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="height: 100px">
+    <label class="fd-form-label" id="cozySelectLabel">Hover on Button, Placeholder text</label><br />
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
+            <div class="fd-select">
+                <button
+                    aria-expanded="false"
+                    aria-selected="false"
+                    aria-haspopup="listbox"
+                    aria-labelledby="cozySelectLabel"
+                    class="fd-select__control is-hover"
+                    value="Select an option"
+                    tabindex="0">
+                    <span id="cozySelectValue" class="fd-select__text-content">Select an option</span>
+                    <span class="fd-button fd-button--transparent fd-select__button is-hover">
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="height: 100px">
+    <label class="fd-form-label" id="cozySelectLabel">Focus, Placeholder text</label><br />
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
+            <div class="fd-select">
+                <button
+                    aria-expanded="false"
+                    aria-selected="false"
+                    aria-haspopup="listbox"
+                    aria-labelledby="cozySelectLabel"
+                    class="fd-select__control is-focus"
+                    value="Select an option"
+                    tabindex="0">
+                    <span id="cozySelectValue" class="fd-select__text-content">Select an option</span>
+                    <span class="fd-button fd-button--transparent fd-select__button">
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="height: 100px">
+    <label class="fd-form-label" id="cozySelectLabel">Expanded, Placeholder text</label><br />
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
+            <div class="fd-select">
+                <button
+                    aria-expanded="false"
+                    aria-selected="false"
+                    aria-haspopup="listbox"
+                    aria-labelledby="cozySelectLabel"
+                    class="fd-select__control is-expanded"
+                    value="Select an option"
+                    tabindex="0">
+                    <span id="cozySelectValue" class="fd-select__text-content">Select an option</span>
+                    <span class="fd-button fd-button--transparent fd-select__button">
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="height: 100px">
+    <label class="fd-form-label" id="cozySelectLabel">Disabled, Placeholder text</label><br />
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
+            <div class="fd-select">
+                <button
+                    aria-expanded="false"
+                    aria-selected="false"
+                    aria-haspopup="listbox"
+                    aria-labelledby="cozySelectLabel"
+                    class="fd-select__control is-disabled"
+                    value="Select an option"
+                    tabindex="0">
+                    <span id="cozySelectValue" class="fd-select__text-content">Select an option</span>
+                    <span class="fd-button fd-button--transparent fd-select__button">
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="height: 100px">
+    <label class="fd-form-label" id="cozySelectLabel">Read Only, Placeholder text</label><br />
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-expanded="false" aria-haspopup="true">
+            <div class="fd-select">
+                <button
+                    aria-expanded="false"
+                    aria-selected="false"
+                    aria-haspopup="listbox"
+                    aria-labelledby="cozySelectLabel"
+                    class="fd-select__control is-readonly"
+                    value="Select an option"
+                    tabindex="0">
+                    <span id="cozySelectValue" class="fd-select__text-content">Select an option</span>
+                    <span class="fd-button fd-button--transparent fd-select__button">
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<div style="height: 300px">
+    <label class="fd-form-label" id="cozySelectLabel">Active, Selected Item</label><br />
     <div class="fd-popover">
         <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
             <div class="fd-select">
@@ -63,3 +226,71 @@
         </div>
     </div>
 </div>
+
+<div style="height: 300px">
+    <label class="fd-form-label" id="cozySelectLabel">Active and Focus, Selected Item</label><br />
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
+            <div class="fd-select">
+                <button
+                    aria-expanded="true"
+                    aria-haspopup="listbox"
+                    aria-labelledby="cozySelectLabel cozySelectValue"
+                    class="fd-select__control is-focus"
+                    id="defaultSelectCombobox"
+                    onclick="
+                        toggleElAttrs('h0C6A325b', ['aria-hidden']);
+                        toggleElAttrs('defaultSelectCombobox', ['aria-expanded']);
+                    "
+                    value="List Item 1"
+                    tabindex="0">
+                    <span is="cozySelectValue" class="fd-select__text-content">List Item 1</span>
+                    <span class="fd-button fd-button--transparent fd-select__button">
+                        <i class="sap-icon--slim-arrow-down"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+        <div
+            aria-hidden="false"
+            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+            id="h0C6A325b">
+            <ul
+                aria-activedescendant="defaultSelectCombobox-currentlyFocusedItem"
+                aria-labelledby="cozySelectLabel"
+                class="fd-list fd-list--dropdown"
+                role="listbox">
+                <li
+                    id="defaultSelectCombobox-currentlyFocusedItem"
+                    class="fd-list__item"
+                    role="option"
+                    tabindex="0">
+                <span class="fd-list__title">Select</span>
+                </li>
+                <li aria-selected="true"
+                    class="fd-list__item is-selected"
+                    role="option"
+                    tabindex="0">
+                <span class="fd-list__title">List item 1</span>
+                </li>
+                <li class="fd-list__item"
+                    role="option"
+                    tabindex="0">
+                <span class="fd-list__title">List item 2</span>
+            </li>
+                <li class="fd-list__item"
+                    role="option"
+                    tabindex="0">
+                <span class="fd-list__title">List item 3</span>
+                </li>
+                <li class="fd-list__item"
+                    role="option"
+                    tabindex="0">
+                <span class="fd-list__title">List item 4</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+
diff --git a/packages/styles/stories/Components/select/mobile-mode.example.html b/packages/styles/stories/Components/select/mobile-mode.example.html
index 0b0ccc2bbb..3744989076 100644
--- a/packages/styles/stories/Components/select/mobile-mode.example.html
+++ b/packages/styles/stories/Components/select/mobile-mode.example.html
@@ -1,20 +1,11 @@
 <div class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active" id="select-dialog-example">
     <div class="fd-dialog__content fd-dialog__content--mobile">
-        <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader">
-            <div class="fd-bar__left">
-                <div class="fd-bar__element">
-                    <h3 id="mobileHeader" class="fd-dialog__title">
-                        <span class="fd-select__text-content">Select Ingredient</span>
-                    </h3>
-                </div>
-            </div>
-            <div class="fd-bar__right">
-                <div class="fd-bar__element">
-                    <button tabindex="-1" class="fd-button fd-button--transparent" aria-label="close">
-                        <i class="sap-icon--decline"></i>
-                    </button>
-                </div>
-            </div>
+        <header class="fd-dialog__header fd-toolbar fd-toolbar--clear">
+            <span class="fd-select__text-content">Select Ingredient</span>
+            <span class="fd-toolbar__spacer"></span>
+            <button tabindex="-1" class="fd-button fd-button--transparent" aria-label="close">
+                <i class="sap-icon--decline"></i>
+            </button>
         </header>
         <div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
             <div aria-live="assertive" class="fd-list__message fd-list__message--information" role="alert">Choose one item</div>
diff --git a/packages/styles/stories/Components/select/select.stories.js b/packages/styles/stories/Components/select/select.stories.js
index b55f7e992e..1895075f33 100644
--- a/packages/styles/stories/Components/select/select.stories.js
+++ b/packages/styles/stories/Components/select/select.stories.js
@@ -19,7 +19,7 @@ import '../../../src/form-label.scss';
 import '../../../src/form-message.scss';
 import '../../../src/select.scss';
 import '../../../src/dialog.scss';
-import '../../../src/bar.scss';
+import '../../../src/toolbar.scss';
 import '../../../src/button.scss';
 import '../../../src/icon.scss';
 import '../../../src/layout-grid.scss';
@@ -45,8 +45,8 @@ export default {
 `
   }
 };
-export const Cozy = () => cozyExampleHtml;
-Cozy.parameters = {
+export const Default = () => cozyExampleHtml;
+Default.parameters = {
   docs: {
     story: {
       iframeHeight: 500
diff --git a/packages/styles/stories/Components/select/semantic-states.example.html b/packages/styles/stories/Components/select/semantic-states.example.html
index 99a7ad9bcd..b3b48a4c45 100644
--- a/packages/styles/stories/Components/select/semantic-states.example.html
+++ b/packages/styles/stories/Components/select/semantic-states.example.html
@@ -1,261 +1,761 @@
-<div style="height: 250px">
-<div class="fd-container">
-    <div class="fd-row">
-        <div class="fd-col fd-col--3">
-            <label class="fd-form-label" id="a4546C40">
-                Choose an option
-            </label><br>
-            <div class="fd-popover">
-                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
-                    <div class="fd-select">
-                        <button
-                            aria-labelledby="a4546C40 a4546C40Value"
-                            class="fd-select__control is-success"
-                            tabindex="0"
-                            id="semanticStatesSuccessSelectCombobox"
-                            onclick="
-                                toggleElAttrs('h07jjhYH', ['aria-hidden']);
-                                toggleElAttrs('semanticStatesSuccessSelectCombobox', ['aria-expanded']);
-                                toggleElAttrs('successFormMessage', ['aria-hidden']);
-                            "
-                            aria-expanded="true"
-                            aria-haspopup="listbox">
-                            <span id="a4546C40Value" class="fd-select__text-content">Success</span>
-                            <span class="fd-button fd-button--transparent fd-select__button">
-                                <i class="sap-icon--slim-arrow-down"></i>
-                            </span>
-                        </button>
+<div style="height: 150px">
+    <div class="fd-container">
+        <div class="fd-row">
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="successLabel">
+                    Succes, Normal State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="successLabel"
+                                class="fd-select__control is-success"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
                     </div>
                 </div>
-                <div
-                    class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
-                    aria-hidden="false"
-                    id="h07jjhYH">
-                    <div aria-live="assertive" class="fd-list__message fd-list__message--success" role="alert">Success message</div>
-                    <ul
-                        aria-activedescendant="semanticStatesSuccessSelectCombobox-currentlyFocusedItem"
-                        aria-labelledby="a4546C40"
-                        class="fd-list fd-list--has-message fd-list--dropdown"
-                        role="listbox">
-                        <li
-                            id="semanticStatesSuccessSelectCombobox-currentlyFocusedItem"
-                            class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
-                            <span class="fd-list__title">
-                                List Item 1
-                            </span>
-                            <span class="fd-list__secondary">A1</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 2</span>
-                            <span class="fd-list__secondary">A2</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 3</span>
-                            <span class="fd-list__secondary">A3</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 4</span>
-                            <span class="fd-list__secondary">A4</span>
-                        </li>
-                    </ul>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="errorLabel">
+                    Error, Normal State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="errorLabel"
+                                class="fd-select__control is-error"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
-                <div id="successFormMessage" class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="true">
-                    <span class="fd-form-message fd-form-message--success">Success message</span>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="warningLabel">
+                    Warning, Normal State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="warningLabel"
+                                class="fd-select__control is-warning"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="infoLabel">
+                    Information, Normal State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="infoLabel"
+                                class="fd-select__control is-information"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="fd-col fd-col--3">
-            <label class="fd-form-label" id="b4546C40">
-                Choose an option
-            </label>
-            <br>
-            <div class="fd-popover">
-                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
-                    <div class="fd-select">
-                        <button
-                            aria-labelledby="b4546C40 b4546C40Value"
-                            class="fd-select__control is-error"
-                            tabindex="0"
-                            id="semanticStatesErrorSelectCombobox"
-                            onclick="
-                                toggleElAttrs('semanticStatesErrorSelectCombobox', ['aria-expanded']);
-                                toggleElAttrs('h07j9978H', ['aria-hidden']);
-                                toggleElAttrs('errorFormMessage', ['aria-hidden']);
-                            "
-                            aria-expanded="false"
-                            aria-haspopup="listbox">
-                            <span id="b4546C40Value" class="fd-select__text-content">Error</span>
-                            <span class="fd-button fd-button--transparent fd-select__button">
-                                <i class="sap-icon--slim-arrow-down"></i>
-                            </span>
-                        </button>
+    </div>
+</div>
+
+<div style="height: 150px">
+    <div class="fd-container">
+        <div class="fd-row">
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="successLabelH">
+                    Succes, Input Hover State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="successLabelH"
+                                class="fd-select__control is-success is-hover"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
                     </div>
                 </div>
-                <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
-                    aria-hidden="true"
-                    id="h07j9978H">
-                    <div aria-live="assertive" class="fd-list__message fd-list__message--error" role="alert">Error message</div>
-                    <ul
-                        aria-activedescendant="semanticStatesErrorSelectCombobox-currentlyFocusedItem"
-                        tabIndex="-1"
-                        aria-labelledby="b4546C40"
-                        class="fd-list fd-list--has-message fd-list--dropdown"
-                        role="listbox">
-                        <li
-                            id="semanticStatesErrorSelectCombobox-currentlyFocusedItem"
-                            class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">
-                                List Item 1
-                            </span>
-                            <span class="fd-list__secondary">A1</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 2</span>
-                            <span class="fd-list__secondary">A2</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 3</span>
-                            <span class="fd-list__secondary">A3</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 4</span>
-                            <span class="fd-list__secondary">A4</span>
-                        </li>
-                    </ul>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="errorLabelH">
+                    Error, Input Hover State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="errorLabelH"
+                                class="fd-select__control is-error is-hover"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="warningLabelH">
+                    Warning, Input Hover State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="warningLabelH"
+                                class="fd-select__control is-warning is-hover"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
-                <div id="errorFormMessage" class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false">
-                    <span class="fd-form-message fd-form-message--error">Error message</span>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="infoLabelH">
+                    Information, Input Hover State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="infoLabelH"
+                                class="fd-select__control is-information is-hover"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="fd-col fd-col--3">
-            <label class="fd-form-label" id="b45336C4">
-                Choose an option
-            </label>
-            <br />
-            <div class="fd-popover">
-                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
-                    <div class="fd-select">
-                        <button
-                            aria-labelledby="b45336C4 b45336C4Value"
-                            class="fd-select__control is-warning"
-                            tabindex="0"
-                            id="semanticStatesWarningSelectCombobox"
-                            onclick="
-                                toggleElAttrs('semanticStatesWarningSelectCombobox', ['aria-expanded']);
-                                toggleElAttrs('h07j998hhH', ['aria-hidden']);
-                                toggleElAttrs('warningFormMessage', ['aria-hidden']);
-                            "
-                            aria-expanded="true"
-                            aria-haspopup="listbox">
-                            <span is="b45336C4Value" class="fd-select__text-content">Warning</span>
-                            <span class="fd-button fd-button--transparent fd-select__button">
-                                <i class="sap-icon--slim-arrow-down"></i>
-                            </span>
-                        </button>
+    </div>
+</div>
+
+<div style="height: 150px">
+    <div class="fd-container">
+        <div class="fd-row">
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="successLabelBH">
+                    Succes, Button Hover State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="successLabelBH"
+                                class="fd-select__control is-success is-hover"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button is-hover">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
                     </div>
                 </div>
-                <div
-                    class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
-                    aria-hidden="false"
-                    id="h07j998hhH">
-                    <div aria-live="assertive" class="fd-list__message fd-list__message--warning" role="alert">Warning message</div>
-                    <ul
-                        aria-activedescendant="semanticStatesWarningSelectCombobox-currentlyFocusedItem"
-                        aria-labelledby="b45336C4"
-                        class="fd-list fd-list--has-message fd-list--dropdown"
-                        role="listbox">
-                        <li
-                            id="semanticStatesWarningSelectCombobox-currentlyFocusedItem"
-                            class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
-                            <span class="fd-list__title">
-                                List Item 1
-                            </span>
-                            <span class="fd-list__secondary">A1</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 2</span>
-                            <span class="fd-list__secondary">A2</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 3</span>
-                            <span class="fd-list__secondary">A3</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 4</span>
-                            <span class="fd-list__secondary">A4</span>
-                        </li>
-                    </ul>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="errorLabelBH">
+                    Error, Button Hover State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="errorLabelBH"
+                                class="fd-select__control is-error is-hover"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button is-hover">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
-                <div id="warningFormMessage" class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="true">
-                    <span class="fd-form-message fd-form-message--warning">Warning message</span>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="warningLabelBH">
+                    Warning, Button Hover State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="warningLabelBH"
+                                class="fd-select__control is-warning is-hover"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button is-hover">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="infoLabelBH">
+                    Information, Button Hover State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="infoLabelBH"
+                                class="fd-select__control is-information is-hover"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button is-hover">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="fd-col fd-col--3">
-            <label class="fd-form-label" id="h45336C4">
-                Choose an option
-            </label>
-            <br />
-            <div class="fd-popover">
-                <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
-                    <div class="fd-select">
-                        <button
-                            aria-labelledby="h45336C4 h45336C4Value"
-                            class="fd-select__control is-information"
-                            tabindex="0"
-                            id="semanticStatesInformationSelectCombobox"
-                            onclick="
-                                toggleElAttrs('semanticStatesInformationSelectCombobox', ['aria-expanded']);
-                                toggleElAttrs('hkhh998hhH', ['aria-hidden']);
-                                toggleElAttrs('informationFormMessage', ['aria-hidden']);
-                            "
-                            aria-expanded="false"
-                            aria-haspopup="listbox">
-                            <span id="h45336C4Value" class="fd-select__text-content">Information</span>
+    </div>
+</div>
+
+<div style="height: 150px">
+    <div class="fd-container">
+        <div class="fd-row">
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="successLabelF">
+                    Succes, Focus State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="successLabelF"
+                                class="fd-select__control is-success is-focus"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
                                 <span class="fd-button fd-button--transparent fd-select__button">
                                     <i class="sap-icon--slim-arrow-down"></i>
                                 </span>
-                        </button>
+                            </button>
+                        </div>
                     </div>
                 </div>
-                <div
-                    class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
-                    aria-hidden="true"
-                    id="hkhh998hhH">
-                    <div aria-live="assertive" class="fd-list__message fd-list__message--information" role="alert">Information message</div>
-                    <ul
-                        aria-activedescendant="semanticStatesInformationSelectCombobox-currentlyFocusedItem"
-                        aria-labelledby="h45336C4"
-                        class="fd-list fd-list--has-message fd-list--dropdown"
-                        role="listbox">
-                        <li
-                            id="semanticStatesInformationSelectCombobox-currentlyFocusedItem"
-                            class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">
-                                List Item 1
-                            </span>
-                            <span class="fd-list__secondary">A1</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 2</span>
-                            <span class="fd-list__secondary">A2</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 3</span>
-                            <span class="fd-list__secondary">A3</span>
-                        </li>
-                        <li class="fd-list__item" role="option" tabindex="-1">
-                            <span class="fd-list__title">List item 4</span>
-                            <span class="fd-list__secondary">A4</span>
-                        </li>
-                    </ul>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="errorLabelF">
+                    Error, Focus State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="errorLabelF"
+                                class="fd-select__control is-error is-focus"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
-                <div id="informationFormMessage" class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false">
-                    <span class="fd-form-message fd-form-message--information">Information message</span>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="warningLabelF">
+                    Warning, Focus State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="warningLabelF"
+                                class="fd-select__control is-warning is-focus"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="infoLabelF">
+                    Information, Focus State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="infoLabelF"
+                                class="fd-select__control is-information is-focus"
+                                tabindex="0"
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
+
+<div style="height: 150px">
+    <div class="fd-container">
+        <div class="fd-row">
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="successLabelA">
+                    Succes, Expanded State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="successLabelA"
+                                class="fd-select__control is-success"
+                                tabindex="0"
+                                aria-expanded="true"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="errorLabelA">
+                    Error, Expanded State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="errorLabelA"
+                                class="fd-select__control is-error"
+                                tabindex="0"
+                                aria-expanded="true"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="warningLabelA">
+                    Warning, Expanded State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="warningLabelA"
+                                class="fd-select__control is-warning"
+                                tabindex="0"
+                                aria-expanded="true"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="infoLabelA">
+                    Information, Expanded State, Placeholder
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="infoLabelA"
+                                class="fd-select__control is-information"
+                                tabindex="0"
+                                aria-expanded="true"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span class="fd-select__text-content">Required Selection</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <div class="fd-container">
+        <div class="fd-row">
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="a4546C40">
+                    Choose an option
+                </label><br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="a4546C40 a4546C40Value"
+                                class="fd-select__control is-success"
+                                tabindex="0"
+                                id="semanticStatesSuccessSelectCombobox"
+                                onclick="
+                                    toggleElAttrs('h07jjhYH', ['aria-hidden']);
+                                    toggleElAttrs('semanticStatesSuccessSelectCombobox', ['aria-expanded']);
+                                    toggleElAttrs('successFormMessage', ['aria-hidden']);
+                                "
+                                aria-expanded="true"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span id="a4546C40Value" class="fd-select__text-content">Success</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                    <div
+                        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+                        aria-hidden="false"
+                        id="h07jjhYH">
+                        <div aria-live="assertive" class="fd-list__message fd-list__message--success" role="alert">Success message</div>
+                        <ul
+                            aria-activedescendant="semanticStatesSuccessSelectCombobox-currentlyFocusedItem"
+                            aria-labelledby="a4546C40"
+                            class="fd-list fd-list--has-message fd-list--dropdown"
+                            role="listbox">
+                            <li
+                                id="semanticStatesSuccessSelectCombobox-currentlyFocusedItem"
+                                class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+                                <span class="fd-list__title">
+                                    List Item 1
+                                </span>
+                                <span class="fd-list__secondary">A1</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 2</span>
+                                <span class="fd-list__secondary">A2</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 3</span>
+                                <span class="fd-list__secondary">A3</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 4</span>
+                                <span class="fd-list__secondary">A4</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div id="successFormMessage" class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="true">
+                        <span class="fd-form-message fd-form-message--success">Success message</span>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="b4546C40">
+                    Choose an option
+                </label>
+                <br>
+                <div class="fd-popover">
+                    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="b4546C40 b4546C40Value"
+                                class="fd-select__control is-error"
+                                tabindex="0"
+                                id="semanticStatesErrorSelectCombobox"
+                                onclick="
+                                    toggleElAttrs('semanticStatesErrorSelectCombobox', ['aria-expanded']);
+                                    toggleElAttrs('h07j9978H', ['aria-hidden']);
+                                    toggleElAttrs('errorFormMessage', ['aria-hidden']);
+                                "
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span id="b4546C40Value" class="fd-select__text-content">Error</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+                        aria-hidden="true"
+                        id="h07j9978H">
+                        <div aria-live="assertive" class="fd-list__message fd-list__message--error" role="alert">Error message</div>
+                        <ul
+                            aria-activedescendant="semanticStatesErrorSelectCombobox-currentlyFocusedItem"
+                            tabIndex="-1"
+                            aria-labelledby="b4546C40"
+                            class="fd-list fd-list--has-message fd-list--dropdown"
+                            role="listbox">
+                            <li
+                                id="semanticStatesErrorSelectCombobox-currentlyFocusedItem"
+                                class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">
+                                    List Item 1
+                                </span>
+                                <span class="fd-list__secondary">A1</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 2</span>
+                                <span class="fd-list__secondary">A2</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 3</span>
+                                <span class="fd-list__secondary">A3</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 4</span>
+                                <span class="fd-list__secondary">A4</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div id="errorFormMessage" class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false">
+                        <span class="fd-form-message fd-form-message--error">Error message</span>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="b45336C4">
+                    Choose an option
+                </label>
+                <br />
+                <div class="fd-popover">
+                    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="b45336C4 b45336C4Value"
+                                class="fd-select__control is-warning"
+                                tabindex="0"
+                                id="semanticStatesWarningSelectCombobox"
+                                onclick="
+                                    toggleElAttrs('semanticStatesWarningSelectCombobox', ['aria-expanded']);
+                                    toggleElAttrs('h07j998hhH', ['aria-hidden']);
+                                    toggleElAttrs('warningFormMessage', ['aria-hidden']);
+                                "
+                                aria-expanded="true"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span is="b45336C4Value" class="fd-select__text-content">Warning</span>
+                                <span class="fd-button fd-button--transparent fd-select__button">
+                                    <i class="sap-icon--slim-arrow-down"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                    <div
+                        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+                        aria-hidden="false"
+                        id="h07j998hhH">
+                        <div aria-live="assertive" class="fd-list__message fd-list__message--warning" role="alert">Warning message</div>
+                        <ul
+                            aria-activedescendant="semanticStatesWarningSelectCombobox-currentlyFocusedItem"
+                            aria-labelledby="b45336C4"
+                            class="fd-list fd-list--has-message fd-list--dropdown"
+                            role="listbox">
+                            <li
+                                id="semanticStatesWarningSelectCombobox-currentlyFocusedItem"
+                                class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+                                <span class="fd-list__title">
+                                    List Item 1
+                                </span>
+                                <span class="fd-list__secondary">A1</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 2</span>
+                                <span class="fd-list__secondary">A2</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 3</span>
+                                <span class="fd-list__secondary">A3</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 4</span>
+                                <span class="fd-list__secondary">A4</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div id="warningFormMessage" class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="true">
+                        <span class="fd-form-message fd-form-message--warning">Warning message</span>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--3">
+                <label class="fd-form-label" id="h45336C4">
+                    Choose an option
+                </label>
+                <br />
+                <div class="fd-popover">
+                    <div class="fd-popover__control" aria-expanded="true" aria-haspopup="true">
+                        <div class="fd-select">
+                            <button
+                                aria-labelledby="h45336C4 h45336C4Value"
+                                class="fd-select__control is-information"
+                                tabindex="0"
+                                id="semanticStatesInformationSelectCombobox"
+                                onclick="
+                                    toggleElAttrs('semanticStatesInformationSelectCombobox', ['aria-expanded']);
+                                    toggleElAttrs('hkhh998hhH', ['aria-hidden']);
+                                    toggleElAttrs('informationFormMessage', ['aria-hidden']);
+                                "
+                                aria-expanded="false"
+                                aria-selected="false"
+                                aria-haspopup="listbox">
+                                <span id="h45336C4Value" class="fd-select__text-content">Information</span>
+                                    <span class="fd-button fd-button--transparent fd-select__button">
+                                        <i class="sap-icon--slim-arrow-down"></i>
+                                    </span>
+                            </button>
+                        </div>
+                    </div>
+                    <div
+                        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+                        aria-hidden="true"
+                        id="hkhh998hhH">
+                        <div aria-live="assertive" class="fd-list__message fd-list__message--information" role="alert">Information message</div>
+                        <ul
+                            aria-activedescendant="semanticStatesInformationSelectCombobox-currentlyFocusedItem"
+                            aria-labelledby="h45336C4"
+                            class="fd-list fd-list--has-message fd-list--dropdown"
+                            role="listbox">
+                            <li
+                                id="semanticStatesInformationSelectCombobox-currentlyFocusedItem"
+                                class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">
+                                    List Item 1
+                                </span>
+                                <span class="fd-list__secondary">A1</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 2</span>
+                                <span class="fd-list__secondary">A2</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 3</span>
+                                <span class="fd-list__secondary">A3</span>
+                            </li>
+                            <li class="fd-list__item" role="option" tabindex="-1">
+                                <span class="fd-list__title">List item 4</span>
+                                <span class="fd-list__secondary">A4</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div id="informationFormMessage" class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false">
+                        <span class="fd-form-message fd-form-message--information">Information message</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
+
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index 0969b5ce57..e43d94f15a 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -10160,7 +10160,7 @@ exports[`Check stories > Components/Forms/Input Group > Story States > Should ma
     <label class=\\"fd-form-label\\" for=\\"aqwsde127\\">Information</label>
     <div class=\\"fd-input-group is-information\\">
         <input class=\\"fd-input fd-input fd-input-group__input\\" type=\\"text\\" placeholder=\\"Placeholder\\" id=\\"aqwsde127\\" name=\\"\\" value=\\"1000000\\">
-        <span class=\\"fd-input-group__addon fd-input-group__addon--button fd-input-group__addon\\">
+        <span class=\\"fd-input-group__addon fd-input-group__addon--button\\">
             <button class=\\"fd-input-group__button fd-button fd-button--transparent fd-button\\">
                 Button
             </button>
diff --git a/packages/theming-preview/src/toolbar.html b/packages/theming-preview/src/toolbar.html
index dfd873050c..290b44dc2c 100644
--- a/packages/theming-preview/src/toolbar.html
+++ b/packages/theming-preview/src/toolbar.html
@@ -51,7 +51,7 @@ <h4>Solid Toolbar</h4>
                         <span>Text</span>
                         <div class="fd-input-group" style="width: 200px; height: 26px;">
                             <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Search">
-                            <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
+                            <span class="fd-input-group__addon fd-input-group__addon--button--compact">
                                 <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Search"> 
                                     <i class="sap-icon--search"></i>
                                 </button>
@@ -100,7 +100,7 @@ <h4>Transparent Toolbar</h4>
                         <span>Text</span>
                         <div class="fd-input-group" style="width: 200px; height: 26px;">
                             <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Search">
-                            <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
+                            <span class="fd-input-group__addon fd-input-group__addon--button--compact">
                                 <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Search"> 
                                     <i class="sap-icon--search"></i>
                                 </button>