diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 65f2bb7475..3303b83941 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -215,6 +215,16 @@
     }
 })();
 
+function onSelectClick(controlId) {
+    let popoverRef = document.getElementById(controlId);
+
+    if (popoverRef.getAttribute("aria-hidden") === "true") {
+        popoverRef.setAttribute("aria-hidden", "false");
+    } else {
+        popoverRef.setAttribute("aria-hidden", "true");
+    }
+}
+
 function stepInputValue(inputId, stepDirection) {
     let inputRef = document.getElementById(inputId);
 
diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md
index 7946b13d2a..738ea8dac5 100644
--- a/docs/pages/components/select.md
+++ b/docs/pages/components/select.md
@@ -17,31 +17,52 @@ For lists that require more than 12 options, the <a href="/patterns/combobox-inp
 ## Sizes
 
 {% capture select-sizes %}
-<label class="fd-form-label">
+<label class="fd-form-label" id="f45564A57">
     Select Cozy Mode
 </label>
 <br>
 <div class="fd-popover">
   <div class="fd-popover__control">
      <div class="fd-select">
-         <div class="fd-select__control" role="button" tabindex="0" aria-controls="h0C6A325" aria-expanded="false" aria-haspopup="true">
+         <div
+            aria-controls="h0C6A325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            role="button"
+            tabindex="0">
              Select
              <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
          </div>
       </div>
   </div>
-  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0C6A325">
-     <ul class="fd-list fd-list--dropdown" role="listbox">
-        <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+  <div
+    aria-hidden="true"
+    class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+    id="h0C6A325">
+     <ul
+        aria-labelledby="f45564A57"
+        class="fd-list fd-list--dropdown"
+        role="listbox">
+        <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="-1">
+        <li class="fd-list__item"
+            role="option"
+            tabindex="-1">
            <span class="fd-list__title">List item 2</span>
        </li>
-        <li class="fd-list__item" role="option" tabindex="-1">
+        <li class="fd-list__item"
+            role="option"
+            tabindex="-1">
            <span class="fd-list__title">List item 3</span>
         </li>
-        <li class="fd-list__item" role="option" tabindex="-1">
+        <li class="fd-list__item"
+            role="option"
+            tabindex="-1">
            <span class="fd-list__title">List item 4</span>
         </li>
      </ul>
@@ -50,7 +71,7 @@ For lists that require more than 12 options, the <a href="/patterns/combobox-inp
 <br />
 <br />
 
-<label class="fd-form-label">
+<label class="fd-form-label" id="f45564A58">
     Select Compact Mode
 </label>
 <br>
@@ -64,7 +85,7 @@ For lists that require more than 12 options, the <a href="/patterns/combobox-inp
      </div>
   </div>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0C6A326">
-     <ul class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
+     <ul tabIndex="-1" aria-labelledby="f45564A58" class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
         <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
            <span class="fd-list__title">
                Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text
@@ -91,7 +112,7 @@ For lists that require more than 12 options, the <a href="/patterns/combobox-inp
 The `Select` component can be customized by adding additional information in additional columns.
 
 {% capture two-col %}
-<label class="fd-form-label">
+<label class="fd-form-label" id="f45564A59">
     Select Cozy Mode With 2 Columns
 </label>
 <br>
@@ -105,7 +126,7 @@ The `Select` component can be customized by adding additional information in add
       </div>
   </div>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0C62325">
-     <ul class="fd-list fd-list--dropdown" role="listbox">
+     <ul tabIndex="-1" aria-labelledby="f45564A59" class="fd-list fd-list--dropdown" role="listbox">
         <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
            <span class="fd-list__title">Product 1</span>
            <span class="fd-list__secondary">1000 EUR</span>
@@ -129,7 +150,7 @@ The `Select` component can be customized by adding additional information in add
 <br />
 
 
-<label class="fd-form-label">
+<label class="fd-form-label" id="g45564A59">
     Select Compact Mode With 2 Columns 
 </label>
 <br>
@@ -143,7 +164,7 @@ The `Select` component can be customized by adding additional information in add
      </div>
   </div>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07jj326">
-     <ul class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
+     <ul tabIndex="-1" aria-labelledby="g45564A59" class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
         <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
            <span class="fd-list__title">Product 1</span>
            <span class="fd-list__secondary">1000 EUR</span>
@@ -169,7 +190,7 @@ The `Select` component can be customized by adding additional information in add
 <br />
 
 
-<label class="fd-form-label">
+<label class="fd-form-label" id="g45564A50">
     Select Cozy Mode With 2 Columns and Icons
 </label>
 <br>
@@ -183,7 +204,7 @@ The `Select` component can be customized by adding additional information in add
       </div>
   </div>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h090G325">
-     <ul class="fd-list fd-list--dropdown" role="listbox">
+     <ul tabIndex="-1" aria-labelledby="g45564A50" class="fd-list fd-list--dropdown" role="listbox">
         <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
            <span class="fd-list__icon sap-icon--marketing-campaign"></span>
            <span class="fd-list__title">Marketing</span>
@@ -217,6 +238,10 @@ The `Select` component can be customized by adding additional information in add
 In cases where the list items need to be categorized into groups, it is possible to add headers for each category.
 
 {% capture select-group %}
+<label class="fd-form-label" id="g45464A50">
+    Select with Items Grouping
+</label>
+<br>
 <div class="fd-popover">
   <div class="fd-popover__control">
      <div class="fd-select">
@@ -227,7 +252,7 @@ In cases where the list items need to be categorized into groups, it is possible
       </div>
   </div>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="true" id="h09GDGG325">
-        <ul class="fd-list fd-list--dropdown" role="listbox">
+        <ul tabIndex="-1" aria-labelledby="g45464A50" class="fd-list fd-list--dropdown" role="listbox">
             <li class="fd-list__group-header">
                 Fruits
             </li>
@@ -269,7 +294,7 @@ In the `Select` component, the text is wrapped by default. In order to prevent t
 the `--no-wrap` modifier can be added to the `fd-list__title`, or `fd-list__secondary` elements.
 
 {% capture select-wrap %}
-<label class="fd-form-label">
+<label class="fd-form-label" id="g45464A40">
     Select with more text
 </label>
 <br>
@@ -283,7 +308,7 @@ the `--no-wrap` modifier can be added to the `fd-list__title`, or `fd-list__seco
       </div>
   </div>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0GFF2325">
-     <ul class="fd-list fd-list--dropdown" role="listbox">
+     <ul tabIndex="-1" aria-labelledby="g45464A40" class="fd-list fd-list--dropdown" role="listbox">
         <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
            <span class="fd-list__title">Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text </span>
            <span class="fd-list__secondary">A1</span>
@@ -307,7 +332,7 @@ the `--no-wrap` modifier can be added to the `fd-list__title`, or `fd-list__seco
 <br />
 
 
-<label class="fd-form-label">
+<label class="fd-form-label" id="g45464B40">
     Select with more text and removed wrapping
 </label>
 <br>
@@ -321,7 +346,7 @@ the `--no-wrap` modifier can be added to the `fd-list__title`, or `fd-list__seco
      </div>
   </div>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0GZH2325">
-     <ul class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
+     <ul tabIndex="-1" aria-labelledby="g45464B40" class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
         <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
            <span class="fd-list__title fd-list__title--no-wrap">
                Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text 
@@ -352,7 +377,7 @@ the `--no-wrap` modifier can be added to the `fd-list__title`, or `fd-list__seco
 The default size for the popover body is often longer than the text length. 
 The length can be adjusted to match the text length by adding the `fd-popover__body--dropdown-fill` class to `fd-popover__body`.
 {% capture select-fill %}
-<label class="fd-form-label">
+<label class="fd-form-label" id="g4546C40">
     Fill Control Element
 </label>
 <br>
@@ -366,7 +391,7 @@ The length can be adjusted to match the text length by adding the `fd-popover__b
       </div>
   </div>
   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="true" id="h0GTKE325">
-     <ul class="fd-list fd-list--dropdown" role="listbox">
+     <ul tabIndex="-1" aria-labelledby="g4546C40" class="fd-list fd-list--dropdown" role="listbox">
         <li 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>
@@ -392,16 +417,15 @@ The length can be adjusted to match the text length by adding the `fd-popover__b
 
 
 ## Disabled State
-To disable a `Select` component, the disabled attribute needs to be added to the `fd-popover__control` and the `fd-select__control` elements.
-The disabled state can also be achieved by adding the `.is-disabled` class or the `aria-disabled="true"` attribute.
+To disable a `Select` component, the `aria-disabled="true"` attribute needs to be added to the `fd-popover__control` and the `fd-select__control` elements.
 
 {% capture disabled-select %}
 <div class="fd-popover">
-    <div class="fd-popover__control" aria-disabled="true" disabled>
+    <div class="fd-popover__control" aria-disabled="true">
         <div class="fd-select">
-            <div class="fd-select__control" role="button" aria-expanded="false" aria-haspopup="false" aria-disabled="true" disabled>
+            <div class="fd-select__control" role="button" aria-expanded="false" aria-haspopup="false" aria-disabled="true">
                 Select
-                <span class="fd-button sap-icon--slim-arrow-down fd-select__button"></span>
+                <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
             </div>
         </div>
     </div>
@@ -412,22 +436,19 @@ The disabled state can also be achieved by adding the `.is-disabled` class or th
 
 
 ## Readonly State
-To make the `Select` component read-only, the readonly attribute needs to be added to the `fd-select__control` element. 
-This can also be done by adding the `.is-readonly` class or the `aria-readonly="true"` attribute.
+To make the `Select` component read-only, the `.is-readonly` class needs to be added to the `fd-select__control` element. 
 
-{% capture disabled-select %}
+{% capture readonly-select %}
 <div class="fd-popover">
-    <div class="fd-popover__control" aria-expanded="false" aria-haspopup="false" aria-readonly="true" readonly>
+    <div class="fd-popover__control">
         <div class="fd-select">
-            <div class="fd-select__control" role="button" aria-expanded="false" aria-haspopup="false" aria-readonly="true" readonly>
-                Select
-           </div>
+            <div class="fd-select__control is-readonly" role="button" aria-expanded="false" aria-label="Select" aria-haspopup="false">Selected Item 2</div>
         </div>
     </div>
 </div>
 {% endcapture %}
 
-{% include display-component.html component=disabled-select %}
+{% include display-component.html component=readonly-select %}
 
 ## Semantic States
 The semantic mode can be used to modify the  select component by adding one of the 
@@ -435,18 +456,22 @@ The semantic mode can be used to modify the  select component by adding one of t
 To add text in the body of the component, simply include your text in the `fd-list__message` under the `ul` element. 
 
 {% capture semantic-select %}
+<label class="fd-form-label" id="a4546C40">
+    Success Select Example
+</label>
+<br>
 <div class="fd-popover">
     <div class="fd-popover__control">
         <div class="fd-select">
             <div class="fd-select__control is-success" role="button" tabindex="0" aria-controls="h07jjhYH"  aria-expanded="false" aria-haspopup="true">
                 Success
-                <span class="fd-button sap-icon--slim-arrow-down fd-select__button"></span>
+                <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
             </div>
         </div>
     </div>
     <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07jjhYH">
-         <ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
-            <div aria-live="assertive" class="fd-list__message fd-list__message--success" role="alert">Success message</div>
+        <div aria-live="assertive" class="fd-list__message fd-list__message--success" role="alert">Success message</div>
+         <ul tabIndex="-1" aria-labelledby="a4546C40" class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
             <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
                <span class="fd-list__title">
                    List Item 1
@@ -473,19 +498,22 @@ To add text in the body of the component, simply include your text in the `fd-li
 <br/>
 <br/>
 <br/>
-
+<label class="fd-form-label" id="b4546C40">
+    Error Select Example
+</label>
+<br>
 <div class="fd-popover">
    <div class="fd-popover__control">
        <div class="fd-select">
            <div class="fd-select__control is-error" role="button" tabindex="0" aria-controls="h07j9978H"  aria-expanded="false" aria-haspopup="true">
                Error
-               <span class="fd-button sap-icon--slim-arrow-down fd-select__button"></span>
+               <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
            </div>
        </div>
    </div>
    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07j9978H">
-        <ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
-           <div aria-live="assertive" class="fd-list__message fd-list__message--error" role="alert">Error message</div>
+        <div aria-live="assertive" class="fd-list__message fd-list__message--error" role="alert">Error message</div>
+        <ul tabIndex="-1" aria-labelledby="b4546C40" class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
            <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
               <span class="fd-list__title">
                   List Item 1
@@ -512,19 +540,22 @@ To add text in the body of the component, simply include your text in the `fd-li
 <br/>
 <br/>
 <br/>
-
+<label class="fd-form-label" id="b45336C4">
+    Warning Select Example
+</label>
+<br />
 <div class="fd-popover">
    <div class="fd-popover__control">
        <div class="fd-select">
            <div class="fd-select__control is-warning" role="button" tabindex="0" aria-controls="h07j998hhH"  aria-expanded="false" aria-haspopup="true">
                Warning
-               <span class="fd-button sap-icon--slim-arrow-down fd-select__button"></span>
+               <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
            </div>
        </div>
    </div>
    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07j998hhH">
-        <ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
-           <div aria-live="assertive" class="fd-list__message fd-list__message--warning" role="alert">Warning message</div>
+        <div aria-live="assertive" class="fd-list__message fd-list__message--warning" role="alert">Warning message</div>
+        <ul tabIndex="-1" aria-labelledby="b45336C4" class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
            <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
               <span class="fd-list__title">
                   List Item 1
@@ -552,18 +583,22 @@ To add text in the body of the component, simply include your text in the `fd-li
 <br/>
 <br/>
 
+<label class="fd-form-label" id="h45336C4">
+    Information Select Example
+</label>
+<br />
 <div class="fd-popover">
    <div class="fd-popover__control">
        <div class="fd-select">
            <div class="fd-select__control is-information" role="button" tabindex="0" aria-controls="hkhh998hhH"  aria-expanded="false" aria-haspopup="true">
                Information
-               <span class="fd-button sap-icon--slim-arrow-down fd-select__button"></span>
+               <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
            </div>
        </div>
    </div>
    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="hkhh998hhH">
-        <ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
-           <div aria-live="assertive" class="fd-list__message fd-list__message--information" role="alert">Information message</div>
+        <div aria-live="assertive" class="fd-list__message fd-list__message--information" role="alert">Information message</div>
+        <ul tabIndex="-1" aria-labelledby="h45336C4" class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
            <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
               <span class="fd-list__title">
                   List Item 1
@@ -607,13 +642,13 @@ select component in `dialog` and `bar` components.
             </div>
             <div class="fd-bar__right">
                 <div class="fd-bar__element">
-                    <button class="fd-button fd-button--transparent sap-icon--decline" aria-label="close"></button>
+                    <button tabindex="-1" class="fd-button fd-button--transparent sap-icon--decline" aria-label="close"></button>
                 </div>
             </div>
         </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>
             <ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
-                <div aria-live="assertive" class="fd-list__message fd-list__message--information" role="alert">Choose one item</div>
                 <li role="option" tabindex="0" class="fd-list__item is-selected" aria-selected="true">
                    <span class="fd-list__title">Apple</span>
                </li>
diff --git a/src/_listDropdown.scss b/src/_listDropdown.scss
index 40d0ba0a39..e45fbf6430 100644
--- a/src/_listDropdown.scss
+++ b/src/_listDropdown.scss
@@ -3,6 +3,10 @@
 
 .#{$block} {
   &--dropdown {
+    @include fd-focus() {
+      outline: none;
+    }
+
     .#{$block}__item {
       @include list-item-states();
 
diff --git a/src/dialog.scss b/src/dialog.scss
index 7842155caf..09a4c96751 100644
--- a/src/dialog.scss
+++ b/src/dialog.scss
@@ -129,6 +129,7 @@ $button: #{$fd-namespace}-button;
 
     @extend %dialog-body;
 
+    position: relative;
     padding-top: $fd-dialog-body-padding-y;
     padding-bottom: $fd-dialog-body-padding-y;
     border-radius: $fd-dialog-content-border-radius;
diff --git a/src/mixins/_forms.scss b/src/mixins/_forms.scss
index 6d8ce89c69..50ece5ab17 100644
--- a/src/mixins/_forms.scss
+++ b/src/mixins/_forms.scss
@@ -84,8 +84,7 @@
     }
   }
 
-  &[readonly],
-  &.is-readonly {
+  @include fd-readonly() {
     background-color: rgba(242, 242, 242, 0.5); // Hardcoded for IE11 Purposes, there is not callback for RGBA.
     background-color: var(--sapField_ReadOnly_Background);
     border-color: var(--sapField_ReadOnly_BorderColor);
diff --git a/src/select.scss b/src/select.scss
index 9655ecc6da..d33d262941 100644
--- a/src/select.scss
+++ b/src/select.scss
@@ -14,6 +14,7 @@ $block: #{$fd-namespace}-select;
 
   display: block;
   padding-right: 0;
+  min-width: 5rem;
 
   &__control {
     @include fd-form-base();
@@ -53,7 +54,8 @@ $block: #{$fd-namespace}-select;
       }
     }
 
-    &.is-expanded {
+    &.is-expanded,
+    &[aria-expanded="true"] {
       .#{$block}__button {
         background-color: $fd-select-button-active-background;
         color: $fd-select-button-active-text-color;
@@ -75,7 +77,6 @@ $block: #{$fd-namespace}-select;
       }
     }
 
-    &[readonly],
     &.is-readonly {
       padding-right: $fd-select-padding-x;
       padding-left: $fd-select-padding-x;
@@ -98,7 +99,6 @@ $block: #{$fd-namespace}-select;
         padding-left: 0;
       }
 
-      &[readonly],
       &.is-readonly {
         padding-right: $fd-select-padding-compact-x;
         padding-left: $fd-select-padding-compact-x;
diff --git a/stories/select/select.stories.js b/stories/select/select.stories.js
new file mode 100644
index 0000000000..30efeaf01a
--- /dev/null
+++ b/stories/select/select.stories.js
@@ -0,0 +1,700 @@
+import '../../dist/icon.css';
+import '../../dist/popover.css';
+import '../../dist/list.css';
+import '../../dist/form-label.css';
+import '../../dist/form-message.css';
+import '../../dist/select.css';
+import '../../dist/dialog.css';
+import '../../dist/bar.css';
+
+export default {
+    title: 'Components/Select',
+    parameters: {
+        description: `The **Select** component is commonly used to enable users to select an item from a predefined list.
+      It should be used when there are less than 12 items to choose from. 
+      For lists that require more than 12 options, the Combobox Input should be used.`
+    }
+};
+
+export const cozy = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select">
+         <div
+            aria-controls="h0C6A325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h0C6A325');"
+            role="button"
+            tabindex="0">
+             Select
+             <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+         </div>
+      </div>
+  </div>
+  <div
+    aria-hidden="true"
+    class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+    id="h0C6A325">
+     <ul
+        aria-labelledby="f45564A57"
+        class="fd-list fd-list--dropdown"
+        role="listbox">
+        <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="-1">
+           <span class="fd-list__title">List item 2</span>
+       </li>
+        <li class="fd-list__item"
+            role="option"
+            tabindex="-1">
+           <span class="fd-list__title">List item 3</span>
+        </li>
+        <li class="fd-list__item"
+            role="option"
+            tabindex="-1">
+           <span class="fd-list__title">List item 4</span>
+        </li>
+     </ul>
+  </div>
+</div>
+`;
+
+cozy.parameters = {
+    docs: { iframeHeight: 300 }
+};
+
+export const compact = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select fd-select--compact">
+        <div onclick="onSelectClick('h0C6A326');" class="fd-select__control" role="button" tabindex="0" aria-controls="h0C6A326" aria-expanded="false" aria-haspopup="true">
+            Select
+            <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+        </div>
+     </div>
+  </div>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0C6A326">
+     <ul tabIndex="-1" aria-labelledby="f45564A58" class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
+        <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+           <span class="fd-list__title">
+               Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text
+               Very long text, Very long text, Very long text
+           </span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">List item 2</span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">List item 3</span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">List item 4</span>
+        </li>
+     </ul>
+  </div>
+</div>
+`;
+
+compact.parameters = {
+    docs: { iframeHeight: 300 }
+};
+
+/** The **Select** component can be customized by adding additional information in additional columns. */
+
+export const twoColumn = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select">
+         <div class="fd-select__control" role="button" tabindex="0" aria-controls="h0C62325" onclick="onSelectClick('h0C62325');" aria-expanded="false" aria-haspopup="true">
+             Select Product
+             <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+         </div>
+      </div>
+  </div>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0C62325">
+     <ul tabIndex="-1" aria-labelledby="f45564A59" class="fd-list fd-list--dropdown" role="listbox">
+        <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+           <span class="fd-list__title">Product 1</span>
+           <span class="fd-list__secondary">1000 EUR</span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">Product 2</span>
+           <span class="fd-list__secondary">750 EUR</span>
+       </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">Product 3</span>
+           <span class="fd-list__secondary">780 EUR</span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">Product 4</span>
+           <span class="fd-list__secondary">40 EUR</span>
+        </li>
+     </ul>
+  </div>
+</div>
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select fd-select--compact">
+        <div class="fd-select__control" role="button" tabindex="0" aria-controls="h07jj326" onclick="onSelectClick('h07jj326');" aria-expanded="false" aria-haspopup="true">
+            Select Product
+            <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+        </div>
+     </div>
+  </div>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07jj326">
+     <ul tabIndex="-1" aria-labelledby="g45564A59" class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
+        <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+           <span class="fd-list__title">Product 1</span>
+           <span class="fd-list__secondary">1000 EUR</span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">Product 2</span>
+           <span class="fd-list__secondary">750 EUR</span>
+       </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">Product 3</span>
+           <span class="fd-list__secondary">780 EUR</span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__title">Product 4</span>
+           <span class="fd-list__secondary">40 EUR</span>
+        </li>
+     </ul>
+  </div>
+</div>
+`;
+
+export const twoColumnsAndIcons = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select">
+         <div class="fd-select__control" role="button" tabindex="0" aria-controls="h090G325" onclick="onSelectClick('h090G325');" aria-expanded="false" aria-haspopup="true">
+             Select Product
+             <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+         </div>
+      </div>
+  </div>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h090G325">
+     <ul tabIndex="-1" aria-labelledby="g45564A50" class="fd-list fd-list--dropdown" role="listbox">
+        <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+           <span class="fd-list__icon sap-icon--marketing-campaign"></span>
+           <span class="fd-list__title">Marketing</span>
+           <span class="fd-list__secondary">1000 EUR</span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__icon sap-icon--save"></span>
+           <span class="fd-list__title">Backups</span>
+           <span class="fd-list__secondary">500 EUR</span>
+       </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__icon sap-icon--shipping-status"></span>
+           <span class="fd-list__title">Shipping</span>
+           <span class="fd-list__secondary">125 EUR</span>
+        </li>
+        <li class="fd-list__item" role="option" tabindex="-1">
+           <span class="fd-list__icon sap-icon--headset"></span>
+           <span class="fd-list__title">Consulting</span>
+           <span class="fd-list__secondary">200 EUR</span>
+        </li>
+     </ul>
+  </div>
+</div>
+`;
+
+twoColumnsAndIcons.parameters = {
+    docs: { iframeHeight: 300 }
+};
+
+/** In cases where the list items need to be categorized into groups, it is possible to add headers for each category. */
+
+export const itemGrouping = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select">
+         <div class="fd-select__control" role="button" tabindex="0" aria-controls="h09GDGG325" onclick="onSelectClick('h09GDGG325');" aria-expanded="false" aria-haspopup="true">
+             Select Ingredient
+             <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+         </div>
+      </div>
+  </div>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="true" id="h09GDGG325">
+        <ul tabIndex="-1" aria-labelledby="g45464A50" class="fd-list fd-list--dropdown" role="listbox">
+            <li class="fd-list__group-header">
+                Fruits
+            </li>
+            <li role="option" tabindex="0" class="fd-list__item is-selected" aria-selected="true">
+                <span class="fd-list__title">Apple</span>
+            </li>
+            <li role="option" tabindex="-1" class="fd-list__item">
+                <span class="fd-list__title">Orange</span>
+            </li>
+            <li role="option" tabindex="-1" class="fd-list__item">
+                <span class="fd-list__title">Banana</span>
+            </li>
+            <li role="option" tabindex="-1" class="fd-list__item">
+                <span class="fd-list__title">Kiwi</span>
+            </li>
+            <li class="fd-list__group-header">
+                Vegetables
+            </li>
+            <li role="option" tabindex="-1" class="fd-list__item">
+                <span class="fd-list__title">Tomato</span>
+            </li>
+            <li role="option" tabindex="-1" class="fd-list__item">
+                <span class="fd-list__title">Onion</span>
+            </li>
+            <li role="option" tabindex="-1" class="fd-list__item">
+                <span class="fd-list__title">Spinach</span>
+            </li>
+            <li role="option" tabindex="-1" class="fd-list__item">
+                <span class="fd-list__title">Potato</span>
+            </li>
+        </ul>
+  </div>
+</div>
+`;
+
+
+/** In the **Select** component, the text is wrapped by default. In order to prevent the text from wrapping,
+* the `--no-wrap` modifier can be added to the `fd-list__title`, or `fd-list__secondary` elements. */
+
+export const textWrapping = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select">
+         <div class="fd-select__control" role="button" tabindex="0" aria-controls="h0GFF2325" onclick="onSelectClick('h0GFF2325');" aria-expanded="false" aria-haspopup="true">
+             Select
+             <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+         </div>
+      </div>
+  </div>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0GFF2325">
+     <ul tabIndex="-1" aria-labelledby="g45464A40" class="fd-list fd-list--dropdown" role="listbox">
+        <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+           <span class="fd-list__title">Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text </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>
+`;
+
+export const noWrapping = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select fd-select--compact">
+        <div class="fd-select__control" role="button" tabindex="0" aria-controls="h0GZH2325" onclick="onSelectClick('h0GZH2325');" aria-expanded="false" aria-haspopup="true">
+            Select
+            <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+        </div>
+     </div>
+  </div>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h0GZH2325">
+     <ul tabIndex="-1" aria-labelledby="g45464B40" class="fd-list fd-list--dropdown fd-list--compact" role="listbox">
+        <li class="fd-list__item is-selected" aria-selected="true" role="option" tabindex="0">
+           <span class="fd-list__title fd-list__title--no-wrap">
+               Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text 
+           </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>
+`;
+
+noWrapping.parameters = {
+    docs: { iframeHeight: 300 }
+};
+
+/** The default size for the popover body is often longer than the text length. The length can be adjusted to match the text
+ * length by adding the `fd-popover__body--dropdown-fill` class to `fd-popover__body`. */
+
+export const matchSelectPopoverBodySize = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select">
+         <div class="fd-select__control" role="button" tabindex="0" aria-controls="h0GTKE325" onclick="onSelectClick('h0GTKE325');" aria-expanded="false" aria-haspopup="true">
+             Much Longer than Usual
+             <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+         </div>
+      </div>
+  </div>
+  <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="true" id="h0GTKE325">
+     <ul tabIndex="-1" aria-labelledby="g4546C40" class="fd-list fd-list--dropdown" role="listbox">
+        <li 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>
+`;
+
+
+matchSelectPopoverBodySize.parameters = {
+    docs: {
+        iframeHeight: 300
+    }
+};
+
+/** To disable a **Select** component, the `aria-disabled="true"` attribute needs to be added to the
+* `fd-popover__control` and the `fd-select__control` elements. */
+
+export const disabled = () => `
+<div class="fd-popover">
+    <div class="fd-popover__control" aria-disabled="true">
+        <div class="fd-select">
+            <div class="fd-select__control" role="button" aria-expanded="false" aria-haspopup="false" aria-disabled="true">
+                Select
+                <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+            </div>
+        </div>
+    </div>
+</div>
+`;
+
+/** To make the **Select** component read-only, the `.is-readonly` class needs to be added to the `fd-select__control` element.  */
+
+export const readonly = () => `
+<div class="fd-popover">
+    <div class="fd-popover__control">
+        <div class="fd-select">
+            <div class="fd-select__control is-readonly" role="button" aria-expanded="false" aria-label="Select" aria-haspopup="false">Selected Item 2</div>
+        </div>
+    </div>
+</div>
+`;
+
+/**
+ * The semantic mode can be used to modify the  select component by adding one of the
+ * `is-error` | `is-success` | `is-warning` | `is-information` classes into the `fd-select__control` element.
+ * To add text in the body of the component, simply include your text in the `fd-list__message`
+ * above the `ul` element.
+ */
+
+export const semanticStates = () => `
+<label class="fd-form-label" id="a4546C40">
+    Success Select Example
+</label>
+<br>
+<div class="fd-popover">
+    <div class="fd-popover__control">
+        <div class="fd-select">
+            <div class="fd-select__control is-success" role="button" tabindex="0" aria-controls="h07jjhYH" onclick="onSelectClick('h07jjhYH');"  aria-expanded="false" aria-haspopup="true">
+                Success
+                <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+            </div>
+        </div>
+    </div>
+    <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07jjhYH">
+        <div aria-live="assertive" class="fd-list__message fd-list__message--success" role="alert">Success message</div>
+         <ul tabIndex="-1" aria-labelledby="a4546C40" class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
+            <li 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>
+<span class="fd-form-message fd-form-message--static fd-form-message--success">Success message</span>
+
+<br/>
+<br/>
+<br/>
+<label class="fd-form-label" id="b4546C40">
+    Error Select Example
+</label>
+<br>
+<div class="fd-popover">
+   <div class="fd-popover__control">
+       <div class="fd-select">
+           <div class="fd-select__control is-error" role="button" tabindex="0" aria-controls="h07j9978H" onclick="onSelectClick('h07j9978H');" aria-expanded="false" aria-haspopup="true">
+               Error
+               <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+           </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 tabIndex="-1" aria-labelledby="b4546C40" class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
+           <li 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>
+<span class="fd-form-message fd-form-message--static fd-form-message--error">Error message</span>
+
+<br/>
+<br/>
+<br/>
+<label class="fd-form-label" id="b45336C4">
+    Warning Select Example
+</label>
+<br />
+<div class="fd-popover">
+   <div class="fd-popover__control">
+       <div class="fd-select">
+           <div class="fd-select__control is-warning" role="button" tabindex="0" aria-controls="h07j998hhH" onclick="onSelectClick('h07j998hhH');"  aria-expanded="false" aria-haspopup="true">
+               Warning
+               <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+           </div>
+       </div>
+   </div>
+   <div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown" aria-hidden="true" id="h07j998hhH">
+        <div aria-live="assertive" class="fd-list__message fd-list__message--warning" role="alert">Warning message</div>
+        <ul tabIndex="-1" aria-labelledby="b45336C4" class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
+           <li 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>
+<span class="fd-form-message fd-form-message--static fd-form-message--warning">Warning message</span>
+
+<br/>
+<br/>
+<br/>
+
+<label class="fd-form-label" id="h45336C4">
+    Information Select Example
+</label>
+<br />
+<div class="fd-popover">
+   <div class="fd-popover__control">
+       <div class="fd-select">
+           <div class="fd-select__control is-information" role="button" tabindex="0" aria-controls="hkhh998hhH" onclick="onSelectClick('hkhh998hhH');"  aria-expanded="false" aria-haspopup="true">
+               Information
+               <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+           </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 tabIndex="-1" aria-labelledby="h45336C4" class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
+           <li 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>
+<span class="fd-form-message fd-form-message--static fd-form-message--information">Information message</span>
+`;
+
+/** For mobile devices, or tablets, select component should be displayed in fullscreen mode. It can be achieved by wrapping
+select component in **Dialog** and **Bar** components.  */
+
+export const mobileMode = () => `
+<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">
+        <header class="fd-dialog__header fd-bar fd-bar--header-with-subheader">
+            <div class="fd-bar__left">
+                <div class="fd-bar__element">
+                    <h3 class="fd-dialog__title">
+                        Select Ingredient
+                    </h3>
+                </div>
+            </div>
+            <div class="fd-bar__right">
+                <div class="fd-bar__element">
+                    <button tabindex="-1" class="fd-button fd-button--transparent sap-icon--decline" aria-label="close"></button>
+                </div>
+            </div>
+        </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>
+            <ul class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact" role="listbox">
+                <li role="option" tabindex="0" class="fd-list__item is-selected" aria-selected="true">
+                   <span class="fd-list__title">Apple</span>
+               </li>
+               <li role="option" tabindex="0" class="fd-list__item">
+                   <span class="fd-list__title">Orange</span>
+               </li>
+               <li role="option" tabindex="0" class="fd-list__item">
+                   <span class="fd-list__title">Banana</span>
+               </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                   <span class="fd-list__title">Kiwi</span>
+                </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                    <span class="fd-list__title">Tomato</span>
+                </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                    <span class="fd-list__title">Onion</span>
+                </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                    <span class="fd-list__title">Spinach</span>
+                </li>
+                <li role="option" tabindex="0" class="fd-list__item">
+                    <span class="fd-list__title">Potato</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+`;
+
+mobileMode.parameters = {
+    docs: {
+        iframeHeight: 400
+    }
+};
+
+export const expanded = () => `
+<div class="fd-popover">
+  <div class="fd-popover__control">
+     <div class="fd-select">
+         <div
+            aria-controls="h0C6A3245234"
+            aria-expanded="true"
+            aria-haspopup="true"
+            class="fd-select__control"
+            role="button"
+            tabindex="0">
+             Select
+             <span class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"></span>
+         </div>
+      </div>
+  </div>
+  <div
+    aria-hidden="false"
+    class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+    id="h0C6A325">
+     <ul
+        aria-labelledby="h0C6A3245234"
+        class="fd-list fd-list--dropdown"
+        role="listbox">
+        <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="-1">
+           <span class="fd-list__title">List item 2</span>
+       </li>
+        <li class="fd-list__item"
+            role="option"
+            tabindex="-1">
+           <span class="fd-list__title">List item 3</span>
+        </li>
+        <li class="fd-list__item"
+            role="option"
+            tabindex="-1">
+           <span class="fd-list__title">List item 4</span>
+        </li>
+     </ul>
+  </div>
+</div>
+`;
+
+expanded.parameters = {
+    docs: {
+        disable: true
+    }
+};
diff --git a/stories/select/select.visual.js b/stories/select/select.visual.js
new file mode 100644
index 0000000000..1810411c67
--- /dev/null
+++ b/stories/select/select.visual.js
@@ -0,0 +1,22 @@
+import '../../dist/icon.css';
+import '../../dist/dialog.css';
+import '../../dist/bar.css';
+import '../../dist/popover.css';
+import '../../dist/list.css';
+import '../../dist/form-label.css';
+import '../../dist/form-message.css';
+import '../../dist/select.css';
+import * as stories from './select.stories.js';
+
+export default {
+    title: 'Visual'
+};
+
+export const Select = () => {
+    const storyNames = Object.keys(stories).filter(story => story !== 'default' && story !== 'mobileMode');
+    const div = document.createElement('div');
+    div.innerHTML = storyNames.map(function(item) {
+        return '<div>' + stories[item]() + '</div>';
+    }).join('');
+    return div;
+};
diff --git a/stories/table/__snapshots__/table.visual.storyshot b/stories/table/__snapshots__/table.visual.storyshot
index cee2532fe7..2a4fc31976 100644
--- a/stories/table/__snapshots__/table.visual.storyshot
+++ b/stories/table/__snapshots__/table.visual.storyshot
@@ -2458,6 +2458,2556 @@ exports[`Storyshots Visual Panel 1`] = `
 </div>
 `;
 
+exports[`Storyshots Visual Select 1`] = `
+<div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select"
+        >
+          
+         
+          <div
+            aria-controls="h0C6A325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h0C6A325');"
+            role="button"
+            tabindex="0"
+          >
+            
+             Select
+             
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+         
+          </div>
+          
+      
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h0C6A325"
+      >
+        
+     
+        <ul
+          aria-labelledby="f45564A57"
+          class="fd-list fd-list--dropdown"
+          role="listbox"
+        >
+          
+        
+          <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="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 2
+            </span>
+            
+       
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 3
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 4
+            </span>
+            
+        
+          </li>
+          
+     
+        </ul>
+        
+  
+      </div>
+      
+
+    </div>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select fd-select--compact"
+        >
+          
+        
+          <div
+            aria-controls="h0C6A326"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h0C6A326');"
+            role="button"
+            tabindex="0"
+          >
+            
+            Select
+            
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+        
+          </div>
+          
+     
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h0C6A326"
+      >
+        
+     
+        <ul
+          aria-labelledby="f45564A58"
+          class="fd-list fd-list--dropdown fd-list--compact"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+        
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            role="option"
+            tabindex="0"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              
+               Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text, Very long text
+               Very long text, Very long text, Very long text
+           
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 2
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 3
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 4
+            </span>
+            
+        
+          </li>
+          
+     
+        </ul>
+        
+  
+      </div>
+      
+
+    </div>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select"
+        >
+          
+         
+          <div
+            aria-controls="h0C62325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h0C62325');"
+            role="button"
+            tabindex="0"
+          >
+            
+             Select Product
+             
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+         
+          </div>
+          
+      
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h0C62325"
+      >
+        
+     
+        <ul
+          aria-labelledby="f45564A59"
+          class="fd-list fd-list--dropdown"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+        
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            role="option"
+            tabindex="0"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Product 1
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              1000 EUR
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Product 2
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              750 EUR
+            </span>
+            
+       
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Product 3
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              780 EUR
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Product 4
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              40 EUR
+            </span>
+            
+        
+          </li>
+          
+     
+        </ul>
+        
+  
+      </div>
+      
+
+    </div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select fd-select--compact"
+        >
+          
+        
+          <div
+            aria-controls="h07jj326"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h07jj326');"
+            role="button"
+            tabindex="0"
+          >
+            
+            Select Product
+            
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+        
+          </div>
+          
+     
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h07jj326"
+      >
+        
+     
+        <ul
+          aria-labelledby="g45564A59"
+          class="fd-list fd-list--dropdown fd-list--compact"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+        
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            role="option"
+            tabindex="0"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Product 1
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              1000 EUR
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Product 2
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              750 EUR
+            </span>
+            
+       
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Product 3
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              780 EUR
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Product 4
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              40 EUR
+            </span>
+            
+        
+          </li>
+          
+     
+        </ul>
+        
+  
+      </div>
+      
+
+    </div>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select"
+        >
+          
+         
+          <div
+            aria-controls="h090G325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h090G325');"
+            role="button"
+            tabindex="0"
+          >
+            
+             Select Product
+             
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+         
+          </div>
+          
+      
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h090G325"
+      >
+        
+     
+        <ul
+          aria-labelledby="g45564A50"
+          class="fd-list fd-list--dropdown"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+        
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            role="option"
+            tabindex="0"
+          >
+            
+           
+            <span
+              class="fd-list__icon sap-icon--marketing-campaign"
+            />
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Marketing
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              1000 EUR
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__icon sap-icon--save"
+            />
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Backups
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              500 EUR
+            </span>
+            
+       
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__icon sap-icon--shipping-status"
+            />
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Shipping
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              125 EUR
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__icon sap-icon--headset"
+            />
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Consulting
+            </span>
+            
+           
+            <span
+              class="fd-list__secondary"
+            >
+              200 EUR
+            </span>
+            
+        
+          </li>
+          
+     
+        </ul>
+        
+  
+      </div>
+      
+
+    </div>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select"
+        >
+          
+         
+          <div
+            aria-controls="h09GDGG325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h09GDGG325');"
+            role="button"
+            tabindex="0"
+          >
+            
+             Select Ingredient
+             
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+         
+          </div>
+          
+      
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
+        id="h09GDGG325"
+      >
+        
+        
+        <ul
+          aria-labelledby="g45464A50"
+          class="fd-list fd-list--dropdown"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+            
+          <li
+            class="fd-list__group-header"
+          >
+            
+                Fruits
+            
+          </li>
+          
+            
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            role="option"
+            tabindex="0"
+          >
+            
+                
+            <span
+              class="fd-list__title"
+            >
+              Apple
+            </span>
+            
+            
+          </li>
+          
+            
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+                
+            <span
+              class="fd-list__title"
+            >
+              Orange
+            </span>
+            
+            
+          </li>
+          
+            
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+                
+            <span
+              class="fd-list__title"
+            >
+              Banana
+            </span>
+            
+            
+          </li>
+          
+            
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+                
+            <span
+              class="fd-list__title"
+            >
+              Kiwi
+            </span>
+            
+            
+          </li>
+          
+            
+          <li
+            class="fd-list__group-header"
+          >
+            
+                Vegetables
+            
+          </li>
+          
+            
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+                
+            <span
+              class="fd-list__title"
+            >
+              Tomato
+            </span>
+            
+            
+          </li>
+          
+            
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+                
+            <span
+              class="fd-list__title"
+            >
+              Onion
+            </span>
+            
+            
+          </li>
+          
+            
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+                
+            <span
+              class="fd-list__title"
+            >
+              Spinach
+            </span>
+            
+            
+          </li>
+          
+            
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+                
+            <span
+              class="fd-list__title"
+            >
+              Potato
+            </span>
+            
+            
+          </li>
+          
+        
+        </ul>
+        
+  
+      </div>
+      
+
+    </div>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select"
+        >
+          
+         
+          <div
+            aria-controls="h0GFF2325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h0GFF2325');"
+            role="button"
+            tabindex="0"
+          >
+            
+             Select
+             
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+         
+          </div>
+          
+      
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h0GFF2325"
+      >
+        
+     
+        <ul
+          aria-labelledby="g45464A40"
+          class="fd-list fd-list--dropdown"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+        
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            role="option"
+            tabindex="0"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text 
+            </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>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select fd-select--compact"
+        >
+          
+        
+          <div
+            aria-controls="h0GZH2325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h0GZH2325');"
+            role="button"
+            tabindex="0"
+          >
+            
+            Select
+            
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+        
+          </div>
+          
+     
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h0GZH2325"
+      >
+        
+     
+        <ul
+          aria-labelledby="g45464B40"
+          class="fd-list fd-list--dropdown fd-list--compact"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+        
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            role="option"
+            tabindex="0"
+          >
+            
+           
+            <span
+              class="fd-list__title fd-list__title--no-wrap"
+            >
+              
+               Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text Very Long Text 
+           
+            </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>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select"
+        >
+          
+         
+          <div
+            aria-controls="h0GTKE325"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control"
+            onclick="onSelectClick('h0GTKE325');"
+            role="button"
+            tabindex="0"
+          >
+            
+             Much Longer than Usual
+             
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+         
+          </div>
+          
+      
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
+        id="h0GTKE325"
+      >
+        
+     
+        <ul
+          aria-labelledby="g4546C40"
+          class="fd-list fd-list--dropdown"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+        
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            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>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+    
+      <div
+        aria-disabled="true"
+        class="fd-popover__control"
+      >
+        
+        
+        <div
+          class="fd-select"
+        >
+          
+            
+          <div
+            aria-disabled="true"
+            aria-expanded="false"
+            aria-haspopup="false"
+            class="fd-select__control"
+            role="button"
+          >
+            
+                Select
+                
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+            
+          </div>
+          
+        
+        </div>
+        
+    
+      </div>
+      
+
+    </div>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+    
+      <div
+        class="fd-popover__control"
+      >
+        
+        
+        <div
+          class="fd-select"
+        >
+          
+            
+          <div
+            aria-expanded="false"
+            aria-haspopup="false"
+            aria-label="Select"
+            class="fd-select__control is-readonly"
+            role="button"
+          >
+            Selected Item 2
+          </div>
+          
+        
+        </div>
+        
+    
+      </div>
+      
+
+    </div>
+    
+
+  </div>
+  <div>
+    
+
+    <label
+      class="fd-form-label"
+      id="a4546C40"
+    >
+      
+    Success Select Example
+
+    </label>
+    
+
+    <br />
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+    
+      <div
+        class="fd-popover__control"
+      >
+        
+        
+        <div
+          class="fd-select"
+        >
+          
+            
+          <div
+            aria-controls="h07jjhYH"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control is-success"
+            onclick="onSelectClick('h07jjhYH');"
+            role="button"
+            tabindex="0"
+          >
+            
+                Success
+                
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+            
+          </div>
+          
+        
+        </div>
+        
+    
+      </div>
+      
+    
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h07jjhYH"
+      >
+        
+        
+        <div
+          aria-live="assertive"
+          class="fd-list__message fd-list__message--success"
+          role="alert"
+        >
+          Success message
+        </div>
+        
+         
+        <ul
+          aria-labelledby="a4546C40"
+          class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+            
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            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>
+    
+
+    <span
+      class="fd-form-message fd-form-message--static fd-form-message--success"
+    >
+      Success message
+    </span>
+    
+
+
+    <br />
+    
+
+    <br />
+    
+
+    <br />
+    
+
+    <label
+      class="fd-form-label"
+      id="b4546C40"
+    >
+      
+    Error Select Example
+
+    </label>
+    
+
+    <br />
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+   
+      <div
+        class="fd-popover__control"
+      >
+        
+       
+        <div
+          class="fd-select"
+        >
+          
+           
+          <div
+            aria-controls="h07j9978H"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control is-error"
+            onclick="onSelectClick('h07j9978H');"
+            role="button"
+            tabindex="0"
+          >
+            
+               Error
+               
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+           
+          </div>
+          
+       
+        </div>
+        
+   
+      </div>
+      
+   
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h07j9978H"
+      >
+        
+        
+        <div
+          aria-live="assertive"
+          class="fd-list__message fd-list__message--error"
+          role="alert"
+        >
+          Error message
+        </div>
+        
+        
+        <ul
+          aria-labelledby="b4546C40"
+          class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+           
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            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>
+    
+
+    <span
+      class="fd-form-message fd-form-message--static fd-form-message--error"
+    >
+      Error message
+    </span>
+    
+
+
+    <br />
+    
+
+    <br />
+    
+
+    <br />
+    
+
+    <label
+      class="fd-form-label"
+      id="b45336C4"
+    >
+      
+    Warning Select Example
+
+    </label>
+    
+
+    <br />
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+   
+      <div
+        class="fd-popover__control"
+      >
+        
+       
+        <div
+          class="fd-select"
+        >
+          
+           
+          <div
+            aria-controls="h07j998hhH"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control is-warning"
+            onclick="onSelectClick('h07j998hhH');"
+            role="button"
+            tabindex="0"
+          >
+            
+               Warning
+               
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+           
+          </div>
+          
+       
+        </div>
+        
+   
+      </div>
+      
+   
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h07j998hhH"
+      >
+        
+        
+        <div
+          aria-live="assertive"
+          class="fd-list__message fd-list__message--warning"
+          role="alert"
+        >
+          Warning message
+        </div>
+        
+        
+        <ul
+          aria-labelledby="b45336C4"
+          class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+           
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            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>
+    
+
+    <span
+      class="fd-form-message fd-form-message--static fd-form-message--warning"
+    >
+      Warning message
+    </span>
+    
+
+
+    <br />
+    
+
+    <br />
+    
+
+    <br />
+    
+
+
+    <label
+      class="fd-form-label"
+      id="h45336C4"
+    >
+      
+    Information Select Example
+
+    </label>
+    
+
+    <br />
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+   
+      <div
+        class="fd-popover__control"
+      >
+        
+       
+        <div
+          class="fd-select"
+        >
+          
+           
+          <div
+            aria-controls="hkhh998hhH"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="fd-select__control is-information"
+            onclick="onSelectClick('hkhh998hhH');"
+            role="button"
+            tabindex="0"
+          >
+            
+               Information
+               
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+           
+          </div>
+          
+       
+        </div>
+        
+   
+      </div>
+      
+   
+      <div
+        aria-hidden="true"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="hkhh998hhH"
+      >
+        
+        
+        <div
+          aria-live="assertive"
+          class="fd-list__message fd-list__message--information"
+          role="alert"
+        >
+          Information message
+        </div>
+        
+        
+        <ul
+          aria-labelledby="h45336C4"
+          class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact"
+          role="listbox"
+          tabindex="-1"
+        >
+          
+           
+          <li
+            aria-selected="true"
+            class="fd-list__item is-selected"
+            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>
+    
+
+    <span
+      class="fd-form-message fd-form-message--static fd-form-message--information"
+    >
+      Information message
+    </span>
+    
+
+  </div>
+  <div>
+    
+
+    <div
+      class="fd-popover"
+    >
+      
+  
+      <div
+        class="fd-popover__control"
+      >
+        
+     
+        <div
+          class="fd-select"
+        >
+          
+         
+          <div
+            aria-controls="h0C6A3245234"
+            aria-expanded="true"
+            aria-haspopup="true"
+            class="fd-select__control"
+            role="button"
+            tabindex="0"
+          >
+            
+             Select
+             
+            <span
+              class="fd-button fd-button--transparent sap-icon--slim-arrow-down fd-select__button"
+            />
+            
+         
+          </div>
+          
+      
+        </div>
+        
+  
+      </div>
+      
+  
+      <div
+        aria-hidden="false"
+        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
+        id="h0C6A325"
+      >
+        
+     
+        <ul
+          aria-labelledby="h0C6A3245234"
+          class="fd-list fd-list--dropdown"
+          role="listbox"
+        >
+          
+        
+          <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="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 2
+            </span>
+            
+       
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 3
+            </span>
+            
+        
+          </li>
+          
+        
+          <li
+            class="fd-list__item"
+            role="option"
+            tabindex="-1"
+          >
+            
+           
+            <span
+              class="fd-list__title"
+            >
+              List item 4
+            </span>
+            
+        
+          </li>
+          
+     
+        </ul>
+        
+  
+      </div>
+      
+
+    </div>
+    
+
+  </div>
+</div>
+`;
+
 exports[`Storyshots Visual Step Input 1`] = `
 <div>
   <div>
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-compact-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-compact-1-snap.png
new file mode 100644
index 0000000000..c98f90970c
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-compact-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-cozy-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-cozy-1-snap.png
new file mode 100644
index 0000000000..d717a8e2af
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-cozy-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-disabled-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-disabled-1-snap.png
new file mode 100644
index 0000000000..b26c1675ab
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-disabled-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-expanded-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-expanded-1-snap.png
new file mode 100644
index 0000000000..423b14a1fe
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-expanded-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-item-grouping-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-item-grouping-1-snap.png
new file mode 100644
index 0000000000..f205f93fdc
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-item-grouping-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-match-select-popover-body-size-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-match-select-popover-body-size-1-snap.png
new file mode 100644
index 0000000000..a14466a3d5
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-match-select-popover-body-size-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-mobile-mode-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-mobile-mode-1-snap.png
new file mode 100644
index 0000000000..31391176e0
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-mobile-mode-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-no-wrapping-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-no-wrapping-1-snap.png
new file mode 100644
index 0000000000..c98f90970c
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-no-wrapping-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-readonly-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-readonly-1-snap.png
new file mode 100644
index 0000000000..8360bfc05a
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-readonly-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-semantic-states-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-semantic-states-1-snap.png
new file mode 100644
index 0000000000..006255f970
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-semantic-states-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-text-wrapping-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-text-wrapping-1-snap.png
new file mode 100644
index 0000000000..d717a8e2af
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-text-wrapping-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-two-column-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-two-column-1-snap.png
new file mode 100644
index 0000000000..850dc899e1
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-two-column-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-two-columns-and-icons-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-two-columns-and-icons-1-snap.png
new file mode 100644
index 0000000000..31ac9ee3a9
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-select-two-columns-and-icons-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-table-with-advanced-toolbar-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-table-with-advanced-toolbar-1-snap.png
index da8526395c..54af714666 100644
Binary files a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-table-with-advanced-toolbar-1-snap.png and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-components-table-with-advanced-toolbar-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-visual-select-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-visual-select-1-snap.png
new file mode 100644
index 0000000000..e7cdd089d6
Binary files /dev/null and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-visual-select-1-snap.png differ
diff --git a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-visual-table-1-snap.png b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-visual-table-1-snap.png
index 9f79860d06..daacec56ae 100644
Binary files a/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-visual-table-1-snap.png and b/storybook-testing/__image_snapshots__/visual-tests-test-js-storyshots-visual-table-1-snap.png differ
diff --git a/test/templates/select/component.njk b/test/templates/select/component.njk
deleted file mode 100644
index 8d7f0ef2aa..0000000000
--- a/test/templates/select/component.njk
+++ /dev/null
@@ -1,18 +0,0 @@
-{% import "./../utils.njk" as utils %}
-
-<!--
-select:
-    properties={},
-    modifier={ block: [] },
-    state={},
-    aria={}
--->
-{%- macro select(properties={}, modifier={}, state={}, aria={}) %}
-    {%- set _id = utils.id() -%}
-    <div class="fd-select{{ modifier.block | modifier('select') }}">
-		 <div class="fd-select__control {{ "is-expanded" if state.expanded }} {{ "is-hover" if state.hover }}" role="button" aria-controls="{{ properties.id }}" aria-expanded="false" aria-haspopup="true"{{" readonly" if state.readonly}} {{ " disabled" if state.disabled }}{{ aria | aria }}>
-            {{ properties.label }}
-			 <span class="btn-playground fd-select__button sap-icon--slim-arrow-down"></span>
-		 </div>
-    </div>
-{%- endmacro %}
diff --git a/test/templates/select/data.json b/test/templates/select/data.json
deleted file mode 100644
index 03ad170628..0000000000
--- a/test/templates/select/data.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-    "id": "select",
-    "name": "Select",
-    "properties": {
-        "id": "",
-        "icon": "",
-        "label": "Select",
-        "title": "test",
-        "items": [
-            {
-                "label": "Option 1"
-            },
-            {
-                "label": "Option 2"
-            },
-            {
-                "label": "Option 3"
-            },
-            {
-                "label": "Group Header",
-                "items": [
-                    {
-                        "label": "Option 4"
-                    },
-                    {
-                        "label": "Option 5"
-                    },
-                    {
-                        "label": "Option 6"
-                    }
-                ]
-            }
-        ]
-    },
-    "modifier": {
-        "block": [
-            "compact",
-            "xs",
-            "s",
-            "l"
-        ],
-        "button": [
-            "test"
-        ]
-    },
-    "state": {
-        "disabled": false,
-        "hover": false
-    },
-    "aria": {}
-}
diff --git a/test/templates/select/index.njk b/test/templates/select/index.njk
deleted file mode 100644
index 89b0a061c5..0000000000
--- a/test/templates/select/index.njk
+++ /dev/null
@@ -1,79 +0,0 @@
-{% extends "layout.njk" %}
-{% from "./../format.njk" import format %}
-{% from "./component.njk" import select %}
-
-{% block content %}
-
-<style>
-.fd-select {
-  margin-bottom: 10px;
-}
-</style>
-
-{% set props = {
-  label: data.properties.label,
-  body: bodyitems
-} %}
-
-{% set example %}
-
-  {{ select(props) }}
-
-  {{ select(props, modifier={ block: ["compact"] }) }}
-
-{% endset %}
-{{ format(example) }}
-
-<br><br>
-
-<h2>expanded</h2>
-
-{% set example %}
-
-  {{ select(props, state={ expanded: true } ) }}
-
-  {{ select(props, modifier={ block: ["compact"] }, state={ expanded: true } ) }}
-
-{% endset %}
-{{ format(example) }}
-
-<br><br>
-
-<h2>hover</h2>
-
-{% set example %}
-
-  {{ select(props, state={ hover: true } ) }}
-
-  {{ select(props, modifier={ block: ["compact"] }, state={ hover: true } ) }}
-
-{% endset %}
-{{ format(example) }}
-
-<br><br>
-
-<h2>Readonly</h2>
-
-{% set example %}
-
-  {{ select(props, state={ readonly: true } ) }}
-
-  {{ select(props, modifier={ block: ["compact"] }, state={ readonly: true } ) }}
-
-{% endset %}
-{{ format(example) }}
-
-<br><br>
-
-<h2>disabled</h2>
-
-{% set example %}
-
-  {{ select(props, state={ disabled: true } ) }}
-
-  {{ select(props, modifier={ block: ["compact"] }, state={ disabled: true } ) }}
-
-{% endset %}
-{{ format(example) }}
-
-{% endblock %}
diff --git a/test/visual-regression-tests/reference_images/FS_select_0_backstop_0_.png b/test/visual-regression-tests/reference_images/FS_select_0_backstop_0_.png
deleted file mode 100644
index ff5b9b3831..0000000000
Binary files a/test/visual-regression-tests/reference_images/FS_select_0_backstop_0_.png and /dev/null differ
diff --git a/test/visual-regression-tests/reference_images/FS_select_1_backstop__n1_0_.png b/test/visual-regression-tests/reference_images/FS_select_1_backstop__n1_0_.png
deleted file mode 100644
index 719b0740dd..0000000000
Binary files a/test/visual-regression-tests/reference_images/FS_select_1_backstop__n1_0_.png and /dev/null differ
diff --git a/test/visual-regression-tests/reference_images/FS_select_2_backstop__n2_0_.png b/test/visual-regression-tests/reference_images/FS_select_2_backstop__n2_0_.png
deleted file mode 100644
index e4e88ccd10..0000000000
Binary files a/test/visual-regression-tests/reference_images/FS_select_2_backstop__n2_0_.png and /dev/null differ
diff --git a/test/visual-regression-tests/reference_images/FS_select_3_backstop__n3_0_.png b/test/visual-regression-tests/reference_images/FS_select_3_backstop__n3_0_.png
deleted file mode 100644
index 3a954f3c44..0000000000
Binary files a/test/visual-regression-tests/reference_images/FS_select_3_backstop__n3_0_.png and /dev/null differ
diff --git a/test/visual-regression-tests/reference_images/FS_select_4_backstop__n4_0_.png b/test/visual-regression-tests/reference_images/FS_select_4_backstop__n4_0_.png
deleted file mode 100644
index bba84ba8e4..0000000000
Binary files a/test/visual-regression-tests/reference_images/FS_select_4_backstop__n4_0_.png and /dev/null differ