Further refinements on select

Icon sizing when only label line is present. Color "label" option as red when invalid.

components/select-option.js

@@ -138,6 +138,12 @@ export default class RainforestSelectOption extends HTMLElement {
         :host( :not( [description] ) ) p[part=description],
         :host( :not( [icon-name] ) ) img[part=icon] { display: none; }
 
+        :host( [icon-name]:not( [description] ) ) img[part=icon] {
+          align-self: center;
+          height: 16px;
+          width: 16px;
+        }
+
         :host( [disabled] ) img {
           cursor: not-allowed;
           filter: 

components/select.js

@@ -133,6 +133,11 @@ export default class RainforestSelect extends HTMLElement {
           border-left-width: 8px;
         }        
 
+        :host( [invalid] ) p[part=value] {
+          color: #d91515;
+          padding: 0 0 0 7px;
+        }                
+
         :host( [invalid] ) rf-select-option::part( item ) {
           padding: 2px 0 2px 4px;
         }                

test/select.html

@@ -22,7 +22,7 @@
     <rf-select></rf-select><br>
     <rf-select></rf-select><br>
     <rf-select></rf-select><br>
-    <rf-select placeholder="Choose an item" trigger-variant="option"></rf-select>
+    <rf-select trigger-variant="option"></rf-select>
     <br>
     <pre>
 &lt;rf-icon name="settings"&gt;&lt;/rf-icon&gt;