Adjust internal tab spacing

src/vaadin-tabs.html

@@ -213,6 +213,7 @@
         _repaintShadowNodesHack() {
           // Safari 10 has an issue with repainting shadow root element styles when a host attribute changes.
           // Need this workaround (toggle any inline css property on and off) until the issue gets fixed.
+          /* istanbul ignore if */
           if (safari10 && this.root) {
             const WEBKIT_PROPERTY = '-webkit-backface-visibility';
             this.root.querySelectorAll('*').forEach(el => {

test/nav.html

@@ -192,7 +192,7 @@
       });
 
       it('should not cut content', () => {
-        expect(tabs[1].offsetWidth).to.be.above(130);
+        expect(tabs[1].offsetWidth).to.be.above(124);
         expect(nav.offsetWidth).to.be.eql(400);
       });
     });

test/visual/test.js

@@ -1,7 +1,10 @@
 gemini.suite('vaadin-tabs', function(rootSuite) {
 
   function wait(actions, find) {
-    actions.wait(5000);
+    return actions
+      .waitForJSCondition(function(window) {
+        return !!(window.WebComponents && window.WebComponents.ready);
+      }, 15000);
   }
 
   function goToAboutBlank(actions, find) {

theme/lumo/vaadin-tab-styles.html

@@ -8,10 +8,10 @@
     <style>
       :host {
         box-sizing: border-box;
-        padding: .25em 1em;
+        padding: 0.5rem 0.75rem;
         font-family: var(--lumo-font-family);
         font-size: var(--lumo-font-size-m);
-        line-height: var(--lumo-line-height-m);
+        line-height: var(--lumo-line-height-xs);
         font-weight: 500;
         text-align: center;
         opacity: 1;
@@ -32,6 +32,7 @@
 
       :host([orientation="vertical"]) {
         transform-origin: 0% 50%;
+        padding: 0.25rem 1rem;
         min-height: var(--lumo-size-m);
         min-width: 0;
       }
@@ -113,7 +114,7 @@
 
       /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
       :host ::slotted(iron-icon[icon^="vaadin:"]) {
-        padding: 0.25em;
+        padding: 0.25rem;
         box-sizing: border-box !important;
       }
 
@@ -129,7 +130,10 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        justify-content: space-around;
         text-align: center;
+        padding-bottom: 0.5rem;
+        padding-top: 0.25rem;
       }
 
       :host([theme~="icon-on-top"]) ::slotted(iron-icon) {

theme/lumo/vaadin-tabs-styles.html

@@ -18,7 +18,7 @@
         min-height: var(--lumo-size-l);
       }
 
-      :host([orientation="horizontal"]) [part="tabs"] ::slotted(vaadin-tab) {
+      :host([orientation="horizontal"]) [part="tabs"] ::slotted(vaadin-tab:not([theme~="icon-on-top"])) {
         justify-content: center;
       }
 
@@ -27,8 +27,13 @@
         display: inline-flex;
       }
 
+      :host([orientation="horizontal"]) [part="tabs"] {
+        margin: 0 0.75rem;
+      }
+
       :host([orientation="vertical"]) [part="tabs"] {
         width: 100%;
+        margin: 0.5rem 0;
       }
 
       [part="forward-button"],