WIP: upgrade to v25

demo/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
     <title>vcf-toggle-button demo</title>
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    <link rel="stylesheet" href="../node_modules/@vaadin/vaadin-lumo-styles/lumo.css">
     <script type="module" src="demo.js"></script>
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">

package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "test": "wct",
     "lint": "eslint src/*.js",
-    "start": "polymer serve -o",
+    "start": "web-dev-server --node-resolve --open",
     "build:demo": "webpack",
     "publish": "node publish.js"
   },
@@ -39,10 +39,10 @@
   },
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-checkbox": "^2.2.10",
-    "@vaadin/vaadin-element-mixin": "^2.1.3",
-    "@vaadin/vaadin-lumo-styles": "^1.5.0",
-    "@vaadin/vaadin-themable-mixin": "^1.4.4"
+    "@vaadin/checkbox": "^25.0.0-beta1",
+    "@vaadin/component-base": "^25.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "^25.0.0-beta1"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
@@ -52,6 +52,7 @@
     "@polymer/test-fixture": "^4.0.2",
     "@types/vis": "^4.21.16",
     "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@web/dev-server": "^0.4.6",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-template-html-minifier": "^3.1.0",
@@ -72,7 +73,6 @@
     "husky": "^2.3.0",
     "lint-staged": "^8.1.7",
     "mocha": "^5.2.0",
-    "polymer-cli": "^1.9.10",
     "prettier": "^1.17.1",
     "terser-webpack-plugin": "^1.4.1",
     "uglify-es": "^3.3.9",

src/vcf-toggle-button.js

@@ -1,7 +1,7 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin';
-import '@vaadin/vaadin-checkbox';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import '@vaadin/checkbox';
 
 class VcfToggleButton extends ElementMixin(ThemableMixin(PolymerElement)) {
   static get template() {

theme/lumo/vcf-toggle-button-styles.js

@@ -1,65 +1,48 @@
-import { html } from '@polymer/polymer/polymer-element.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-
-const template = html`
-  <dom-module id="vcf-toggle-custom-styles" theme-for="vaadin-checkbox">
-    <template>
-      <style>
-        :host(.toggle-button) [part='checkbox'] {
-          width: calc(1.5em * 2 - 12px);
-          height: 1.5em;
-          border-radius: 0.75em;
-          background-color: var(--lumo-contrast-40pct);
-          margin: 0;
-        }
-
-        :host(.toggle-button[disabled]) [part='checkbox'] {
-          background-color: var(--lumo-contrast-20pct);
-        }
-
-        :host(.toggle-button) [part='checkbox']::after {
-          width: calc(1.5em - 4px);
-          height: calc(1.5em - 4px);
-          border-radius: 50%;
-          background-color: var(--lumo-primary-contrast-color);
-          border: none;
-          top: 2px;
-          left: 2px;
-          transform: none;
-          opacity: 1;
-          transition: transform 0.2s ease;
-        }
-
-        :host(.toggle-button[checked]) [part='checkbox'] {
-          background-color: var(--lumo-primary-color);
-        }
-
-        :host(.toggle-button[checked][disabled]) [part='checkbox'] {
-          background-color: var(--lumo-primary-color-50pct);
-        }
-
-        :host(.toggle-button[active]) [part='checkbox'] {
-          transform: none;
-        }
-
-        :host(.toggle-button[checked]) [part='checkbox']::after {
-          transform: translate(calc(100% - 8px));
-        }
-      </style>
-    </template>
-  </dom-module>
-`;
-
-document.head.appendChild(template.content);
-
-const theme = document.createElement('dom-module');
-theme.id = 'vcf-toggle-button-lumo';
-theme.setAttribute('theme-for', 'vcf-toggle-button');
-theme.innerHTML = `
-    <template>
-      <style include="lumo-color">
-        :host {}
-      </style>
-    </template>
-  `;
-theme.register(theme.id);
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin';
+
+registerStyles(
+  'vaadin-checkbox',
+  css`
+    :host(.toggle-button) [part='checkbox'] {
+      width: calc(1.5em * 2 - 12px);
+      height: 1.5em;
+      border-radius: 0.75em;
+      background-color: var(--lumo-contrast-40pct);
+      margin: 0;
+    }
+
+    :host(.toggle-button[disabled]) [part='checkbox'] {
+      background-color: var(--lumo-contrast-20pct);
+    }
+
+    :host(.toggle-button) [part='checkbox']::after {
+      border-radius: 50%;
+      content: '';
+      width: calc(1.5rem - 4px);
+      height: calc(1.5rem - 4px);
+      top: 2px;
+      left: 2px;
+      background-color: var(--lumo-primary-contrast-color);
+      border: none;
+      transform: none;
+      opacity: 1;
+      transition: transform 0.2s ease;
+    }
+
+    :host(.toggle-button[checked]) [part='checkbox'] {
+      background-color: var(--lumo-primary-color);
+    }
+
+    :host(.toggle-button[checked][disabled]) [part='checkbox'] {
+      background-color: var(--lumo-primary-color-50pct);
+    }
+
+    :host(.toggle-button[active]) [part='checkbox'] {
+      transform: none;
+    }
+
+    :host(.toggle-button[checked]) [part='checkbox']::after {
+      transform: translate(calc(100% - 8px));
+    }
+  `
+);