From 6bbdcfd629954a7fe103e30dd618a6d3859dbfdd Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 22 Oct 2025 12:41:46 +0300
Subject: [PATCH 1/2] chore: switch demo to use web-dev-server

---
 package.json | 4 ++--
 polymer.json | 6 ------
 2 files changed, 2 insertions(+), 8 deletions(-)
 delete mode 100644 polymer.json

diff --git a/package.json b/package.json
index f958fb3..ca7c391 100644
--- a/package.json
+++ b/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"
   },
@@ -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",
diff --git a/polymer.json b/polymer.json
deleted file mode 100644
index 864a60e..0000000
--- a/polymer.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "npm": true,
-  "lint": {
-    "rules": ["polymer-3"]
-  }
-}

From 0014bd115a51faa14b1698f320ed4b021565282c Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 22 Oct 2025 12:53:47 +0300
Subject: [PATCH 2/2] refactor: upgrade dependencies to Vaadin 25

---
 demo/index.html                        |   1 +
 package.json                           |   8 +-
 src/vcf-toggle-button.js               |   4 +-
 theme/lumo/vcf-toggle-button-styles.js | 113 +++++++++++--------------
 4 files changed, 55 insertions(+), 71 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index bf93682..be2ab63 100644
--- a/demo/index.html
+++ b/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">
diff --git a/package.json b/package.json
index ca7c391..137b35b 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/vcf-toggle-button.js b/src/vcf-toggle-button.js
index b364855..3d001eb 100644
--- a/src/vcf-toggle-button.js
+++ b/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() {
diff --git a/theme/lumo/vcf-toggle-button-styles.js b/theme/lumo/vcf-toggle-button-styles.js
index 4f6ba07..0b483dd 100644
--- a/theme/lumo/vcf-toggle-button-styles.js
+++ b/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));
+    }
+  `
+);