refactor: upgrade to v25

README.md

@@ -15,6 +15,12 @@ Web Component for easily creating layouts with sticky anchor navigation tabs and
 ## Important information about versioning
 **Component versions 23.x were deprecated in order to follow Semanting Versioning practices. Please use latest version 2.x for Vaadin 23+ and version 3.x for Vaadin 24.5.**  
 
+## Since version 4.0.0
+
+- The component has been migrated to Lit
+- When the application does not load the Aura or Lumo theme, the component uses a minimal set of functional styles that provide a foundation for a custom theme.
+- `ThemableMixin` has been removed from the component, and injecting styles into the component's shadow root using `registerStyles` is no longer supported. Use global CSS to style the component using part names and CSS variables instead.
+
 ## Compatibility
 
 - Version 1.x.x -> Vaadin 14+

demo/demo-icons.js

@@ -1,18 +1,7 @@
 /* eslint-disable max-len */
 import { html } from '@polymer/polymer/polymer-element.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js'
 
-registerStyles(
-  'vaadin-button',
-  css`
-    [part] ::slotted(vaadin-icon[icon^='vcf-demo:']) {
-      padding: 0.25em;
-      box-sizing: border-box !important;
-    }
-  `
-);
-
 const template = html`
   <vaadin-iconset name="vcf-demo" size="16">
     <svg>

demo/demo.js

@@ -3,7 +3,6 @@ import '@polymer/iron-demo-helpers/demo-snippet';
 import '@vaadin/button';
 import '@vaadin/text-field';
 import '@vaadin/vaadin-lumo-styles/icons';
-import '@vaadin/vaadin-lumo-styles/typography';
 import '../vcf-anchor-nav';
 import './demo-icons';
 

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-anchor-nav demo</title>
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet" />
+    <link href="../node_modules/@vaadin/vaadin-lumo-styles/lumo.css" rel="stylesheet" />
     <script dev src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script dev type="module" src="demo.js"></script>
     <custom-style>
@@ -144,6 +145,11 @@
           z-index: 1;
         }
 
+        #copyVaadinButton vaadin-icon {
+            padding: 0.25em;
+            box-sizing: border-box !important;
+        }
+
         .code code:not(.main) {
           font-family: 'Fira Code', monospace;
           font-size: 12px;