Pfe-tabs - add centered alignment (#467)

* pfe-tab-centered Add support for center alignment

* remove css support from vertical

* Update index.html

add back vertical attribute to demo

* pfe-tab-centered  Update attribute to pfe-tab-align

* pfe-tab-centered add back earth variant

* fixes

Author: starryeyez024

elements/pfe-tabs/demo/index.html

@@ -101,8 +101,8 @@ <h2>Content 3</h2>
       </pfe-tabs>
     </section>
     <section class="example">
-      <h2>Style: Horizontal wind</h2>
-      <pfe-tabs pfe-variant="wind">
+      <h2>Style: Horizontal wind with center alignment</h2>
+      <pfe-tabs pfe-tab-align="center" pfe-variant="wind">
           <pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
           <pfe-tab-panel role="region" slot="panel">
             <h2>Content 1</h2>
@@ -173,8 +173,8 @@ <h2>Content 3</h2>
       </pfe-tabs>
     </section>
     <section class="example">
-      <h2>Style: Vertical earth</h2>
-      <pfe-tabs vertical pfe-variant="earth">
+      <h2>Style: Vertical earth </h2>
+      <pfe-tabs vertical pfe-variant="earth" pfe-tab-align="center" >
         <pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
         <pfe-tab-panel role="region" slot="panel">
           <h2>Content 1</h2>

elements/pfe-tabs/src/pfe-tabs.scss

@@ -23,6 +23,12 @@ $pfe-tabs__panel--PaddingLeft-factor:  2;
   border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
 }
 
+:host(:not([vertical])[pfe-tab-align="center"]) {
+  .tabs {
+    justify-content: center;
+  }
+}
+
 
 /// ===========================================================================
 /// VERTICAL ORIENTATION