vaadin · web-padawan · Mar 30, 2020 · Mar 27, 2020 · Mar 30, 2020
diff --git a/index.html b/index.html
@@ -2,13 +2,36 @@
 
 <html>
   <head>
-    <title>vaadin-split-layout</title>
+    <title>&lt;vaadin-split-layout&gt;</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../iron-component-page/iron-component-page.html">
+    <style>
+      body {
+        margin: 0;
+      }
+
+      api-viewer {
+        margin: 1rem auto 0;
+      }
+
+      @media(max-width: 799px) {
+        api-viewer {
+          margin: 0;
+        }
+      }
+    </style>
   </head>
   <body>
-    <iron-component-page src="vaadin-split-layout.html"></iron-component-page>
+    <api-viewer src="custom-elements.json">
+      <template data-element="vaadin-split-layout" data-target="slot">
+        <div style="min-width: 100px; min-height: 50px">First content</div>
+        <div>Second content</div>
+      </template>
+    </api-viewer>
+
+    <script type="module" src="./vaadin-split-layout.ts"></script>
+    <script type="module">
+      import 'api-viewer-element';
+    </script>
   </body>
 </html>
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,8 @@
+const { createDefaultConfig } = require('@open-wc/building-rollup');
+
+module.exports = createDefaultConfig({
+  input: './index.html',
+  indexHTMLPlugin: {
+    minify: false
+  }
+});
diff --git a/src/vaadin-split-layout.ts b/src/vaadin-split-layout.ts
@@ -4,7 +4,35 @@ import { SplitLayoutMixin } from './vaadin-split-layout-mixin';
 
 /**
  * `<vaadin-split-layout>` is a Web Component implementing a split layout for two
- * content elements with a draggable splitter between them.
+ * content elements with a draggable splitter between them. Content can be any HTML,
+ * including nested `<vaadin-split-layout>`.
+ *
+ * #### Initial Splitter Position
+ *
+ * The initial splitter position is determined from the sizes of the content elements
+ * inside the split layout. Changing `width` or `height` on them affects the initial splitter
+ * position, depending on the `orientation`.
+ *
+ * When the total size of the content elements does not fit the layout, they are scaled
+ * proportionally.
+ *
+ * When setting initial sizes with percentages, it is recommended to assign the size for both
+ * elements.
+ *
+ * #### Size Limits
+ *
+ * The `min-width` / `min-height`, and `max-width` / `max-height` CSS size values
+ * for the content elements are respected and used to limit the splitter position
+ * when it is dragged. It is preferred to set the limits only for a single element.
+ *
+ * @slot primary - Slot where the first content element will be rendered into.
+ * @slot secondary - Slot where the second content element will be rendered into.
+ * @slot - Hidden slot where all the nodes except first and second one will go.
+ *
+ * @csspart splitter - The splitter element.
+ * @csspart handle - The handle of the splitter.
+ *
+ * @event splitter-dragend - Fired after dragging the splitter has ended.
  */
 @customElement('vaadin-split-layout')
 export class VaadinSplitLayout extends SplitLayoutMixin(SplitLayoutBase) {

diff --git a/vaadin-split-layout.html b/vaadin-split-layout.html
diff --git a/vaadin-split-layout.ts b/vaadin-split-layout.ts
@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-split-layout';
+
+export { VaadinSplitLayout } from './src/vaadin-split-layout';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import './theme/lumo/vaadin-split-layout';

		export { VaadinSplitLayout } from './src/vaadin-split-layout';