Completed first version

src/main/java/org/vaadin/erik/SlideTab.java

@@ -68,7 +68,6 @@ public SlideTab(SlideTabBuilder builder) {
 
     public void expand() {
         expand(false);
-
     }
 
     private void expand(boolean fromClient) {

src/main/webapp/frontend/src/slide-tab.html

@@ -1,33 +1,38 @@
 <link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/vaadin-icons/vaadin-icons.html">
 
 <dom-module id="slide-tab">
     <template>
         <style>
             :host {
+                --slide-tab-background-color: var(--lumo-primary-color, blue);
+                --slide-tab-color: white;
+
                 display: flex;
                 align-items: center;
+                box-sizing: border-box;
                 position: absolute;
-                color: white;
+                color: var(--slide-tab-color);
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
             }
             :host(.bottom) {
                 flex-flow: column;
-                bottom: 0;
-                width: 100%;
+                top: auto;
             }
             :host(.top) {
                 flex-flow: column-reverse;
-                top: 0;
-                width: 100%;
+                bottom: auto;
             }
             :host(.left) {
                 flex-flow: row-reverse;
-                left: 0;
-                height: 100%;
+                right: auto;
             }
             :host(.right) {
                 flex-flow: row;
-                right: 0;
-                height: 100%;
+                left: auto;
             }
 
             :host(.left, .right) #content {
@@ -38,19 +43,23 @@
             }
 
             :host(.left) #tab {
+                border-radius: 0 0 var(--lumo-border-radius) var(--lumo-border-radius);
                 transform-origin: 0 50%;
                 transform: rotate(-90deg) translate(-50%, 50%);
                 left: 100%;
             }
             :host(.right) #tab {
+                border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
                 transform-origin: 100% 50%;
                 transform: rotate(-90deg) translate(50%, -50%);
                 right: 100%;
             }
             :host(.top) #tab {
+                border-radius: 0 0 var(--lumo-border-radius) var(--lumo-border-radius);
                 top: 100%;
             }
             :host(.bottom) #tab {
+                border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
                 bottom: 100%;
             }
 
@@ -85,18 +94,48 @@
 
             #tab {
                 position: absolute;
+                display: flex;
+                align-items: center;
                 min-width: 120px;
-                background-color: blue;
+                background-color: var(--slide-tab-background-color);
                 white-space: nowrap;
+                padding: var(--lumo-space-xs) var(--lumo-space-m);
             }
             #content {
-                background-color: blue;
+                background-color: var(--slide-tab-background-color);
                 align-self: stretch;
+                position: relative;
                 overflow: hidden;
             }
+            #content ::slotted(*) {
+                display: inline-block;
+                padding: var(--lumo-space-m);
+            }
+            #tab::after, :host::after {
+                content: "";
+                position: absolute;
+                top: 0; left: 0; bottom: 0; right: 0;
+                z-index: -1;
+                box-shadow: var(--lumo-box-shadow-m);
+            }
+
+            #expand, #collapse {
+                padding-left: 1em;
+                margin-left: auto;
+            }
+            #collapse, :host(.expanded) #expand {
+                display: none;
+            }
+            :host(.expanded) #collapse, #expand {
+                display: inline-block;
+            }
         </style>
 
-        <div id="tab" on-click="toggle">[[caption]]</div>
+        <div id="tab" on-click="toggle">
+            [[caption]]
+            <iron-icon id="expand" icon="vaadin:vaadin:plus-circle"></iron-icon>
+            <iron-icon id="collapse" icon="vaadin:vaadin:minus-circle"></iron-icon>
+        </div>
         <div id="content">
             <slot></slot>
         </div>
@@ -125,6 +164,7 @@
                     content.style.width = size + "px";
                 }
 
+                this.classList.toggle("expanded", true);
                 document.body.addEventListener("click", this.outsideClickListener);
             }
 
@@ -135,6 +175,7 @@
                     this.$.content.style.width = "0";
                 }
 
+                this.classList.toggle("expanded", false);
                 document.body.removeEventListener("click", this.outsideClickListener);
             }
 

src/main/webapp/frontend/styles/demo-styles.html

@@ -0,0 +1,50 @@
+<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">
+
+<custom-style>
+    <style>
+        html {
+            --slide-tab-color: green;
+        }
+
+        slide-tab vaadin-button {
+            background-color: var(--lumo-contrast-60pct);
+            color: white;
+        }
+
+        .demo-view {
+            display: flex;
+            align-items: stretch;
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Demo view panels */
+        .left-panel, .right-panel {
+            display: flex;
+            flex-flow: column;
+            padding: 60px;
+            position: relative;
+        }
+        .left-panel {
+            background-color: var(--lumo-contrast-80pct);
+            width: 400px;
+        }
+        .right-panel {
+            flex-grow: 1;
+        }
+
+        #left-panel-content {
+            width: 400px;
+        }
+
+        #right-panel-bottom-content vaadin-grid {
+            width: 600px;
+        }
+
+        #outer-panel {
+            --slide-tab-background-color: gold;
+            --slide-tab-color: #731010;
+        }
+    </style>
+</custom-style>