diff --git a/bower.json b/bower.json
index 14f86e6..0901e36 100644
--- a/bower.json
+++ b/bower.json
@@ -23,15 +23,15 @@
     "polymer": "^2.0.0",
     "iron-resizable-behavior": "^2.0.0",
     "vaadin-license-checker": "vaadin/license-checker#^2.1.0",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0"
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.4.1"
   },
   "devDependencies": {
     "app-layout": "PolymerElements/app-layout#v2.0.0",
     "web-component-tester": "^6.1.5",
     "webcomponentsjs": "^1.0.0",
-    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0",
     "iron-icon": "^2.0.1",
-    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0",
+    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
     "iron-component-page": "PolymerElements/iron-component-page#^3.0.1"
   }
 }
diff --git a/gen-tsd.json b/gen-tsd.json
new file mode 100644
index 0000000..f4a47d8
--- /dev/null
+++ b/gen-tsd.json
@@ -0,0 +1,9 @@
+{
+  "excludeFiles": [
+    "wct.conf.js",
+    "index.html",
+    "demo/**/*",
+    "test/**/*",
+    "theme/**/*"
+  ]
+}
diff --git a/magi-p3-post.js b/magi-p3-post.js
new file mode 100644
index 0000000..dd2596c
--- /dev/null
+++ b/magi-p3-post.js
@@ -0,0 +1,12 @@
+module.exports = {
+  files: [
+    'vaadin-board-row.js',
+    'vaadin-board.js'
+  ],
+  from: [
+    /import '\.\/theme\/lumo\/vaadin-(.+)\.js';/
+  ],
+  to: [
+    `import './theme/lumo/vaadin-$1.js';\nexport * from './src/vaadin-$1.js';`
+  ]
+};
diff --git a/package.json b/package.json
index 4cff6da..173cba8 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "homepage": "https://vaadin.com/components",
   "files": [
+    "vaadin-*.d.ts",
     "vaadin-*.js",
     "src",
     "theme"
diff --git a/src/vaadin-board-row.html b/src/vaadin-board-row.html
index 54face7..fa7ae36 100644
--- a/src/vaadin-board-row.html
+++ b/src/vaadin-board-row.html
@@ -79,6 +79,7 @@
           this._oldFlexBasis = [];
         }
 
+        /** @protected */
         ready() {
           super.ready();
           this.addEventListener('iron-resize', this._onIronResize, true);
@@ -95,6 +96,7 @@
           });
         }
 
+        /** @protected */
         connectedCallback() {
           super.connectedCallback();
           Polymer.RenderStatus.afterNextRender(this, this._onIronResize);
@@ -102,6 +104,7 @@
 
         /**
          * Adds styles for board row based on width.
+         * @private
          */
         _addStyleNames(width, breakpoints) {
           if (width < breakpoints.smallSize) {
@@ -121,11 +124,12 @@
 
         /**
          * Calculates flex basis based on colSpan, width and breakpoints.
-         * @param {Number} colSpan colspan value of the row
-         * @param {Number} width width of the row in px
-         * @param {Number} colsInRow number of columns in the row
-         * @param {Object} breakpoints object with smallSize and mediumSize number properties, which tells
+         * @param {number} colSpan colspan value of the row
+         * @param {number} width width of the row in px
+         * @param {number} colsInRow number of columns in the row
+         * @param {object} breakpoints object with smallSize and mediumSize number properties, which tells
          * where the row should switch rendering size in pixels.
+         * @private
          */
         _calculateFlexBasis(colSpan, width, colsInRow, breakpoints) {
           if (width < breakpoints.smallSize) {
@@ -138,6 +142,7 @@
           return flexBasis + '%';
         }
 
+        /** @private */
         _reportError() {
           const errorMessage = "The column configuration is not valid; column count should add up to 3 or 4.";
           console.warn(errorMessage, "check: \r\n" + this.outerHTML);
@@ -146,9 +151,9 @@
         /**
          * Parses board-cols from DOM.
          * If there is not enough space in the row drop board cols.
-         * @param {Array} array of nodes
-         *
-         * @return {Array} array of boardCols
+         * @param {!Array<!Node>} nodes array of nodes
+         * @return {!Array<number>} array of boardCols
+         * @private
          */
         _parseBoardCols(nodes) {
           const boardCols = nodes.map(node => {
@@ -180,10 +185,10 @@
         /**
          * If there is not enough space in the row.
          * Extra items are dropped from DOM.
-         * @param {Array} array of board-cols for every node
-         * @param {Array} array of nodes
-         *
-         * @return {Array} filtered array of nodes
+         * @param {!Array<number>} boardCols array of board-cols for every node
+         * @param {!Array<!Node>} nodes array of nodes
+         * @return {!Array<!Node>} filtered array of nodes
+         * @private
          */
         _removeExtraNodesFromDOM(boardCols, nodes) {
           let isErrorReported = false;
@@ -214,10 +219,12 @@
           this._recalculateFlexBasis(true);
         }
 
+        /** @private */
         _onIronResize() {
           this._recalculateFlexBasis(false);
         }
 
+        /** @private */
         _recalculateFlexBasis(forceResize) {
           const width = this.getBoundingClientRect().width;
           const breakpoints = this._measureBreakpointsInPx();
@@ -252,8 +259,9 @@
          * The breakpoints for `small` and `medium` can be given in any unit: `px`, `em`, `in` etc.
          * We need to know them in `px` so that they are comparable with the actual size.
          *
-         * @return {Object} object with smallSize and mediumSize number properties, which tells
+         * @return {object} object with smallSize and mediumSize number properties, which tells
          * where the row should switch rendering size in pixels.
+         * @private
          */
         _measureBreakpointsInPx() {
             // Convert minWidth to px units for comparison