From 31eda6333151401eac05e39e5b67d55d0996321b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Tue, 28 Oct 2025 10:17:46 +0000
Subject: [PATCH 1/5] refactor: upgrade to v25

---
 README.md                                |  8 +++
 demo/demo.js                             |  3 +-
 demo/index.html                          |  2 +
 package.json                             | 13 ++--
 src/component/vcf-breadcrumb.ts          | 79 +++++++++++++++++---
 src/component/vcf-breadcrumbs.ts         | 91 +++++++++---------------
 src/index.ts                             |  2 +-
 src/theme/lumo/vcf-breadcrumb-styles.ts  | 71 ------------------
 src/theme/lumo/vcf-breadcrumb.ts         |  4 --
 src/theme/lumo/vcf-breadcrumbs-styles.ts | 13 ----
 src/vcf-breadcrumbs.ts                   |  3 +-
 theme/lumo.css                           | 18 +++++
 12 files changed, 143 insertions(+), 164 deletions(-)
 delete mode 100644 src/theme/lumo/vcf-breadcrumb-styles.ts
 delete mode 100644 src/theme/lumo/vcf-breadcrumb.ts
 delete mode 100644 src/theme/lumo/vcf-breadcrumbs-styles.ts
 create mode 100644 theme/lumo.css

diff --git a/README.md b/README.md
index f4a170c..09d0a5d 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,14 @@ Add `<vcf-breadcrumbs>` element to the page. Inside added element add few `<vcf-
 ![breadcrumbs-02](https://github.com/user-attachments/assets/f56e9aa0-756a-412e-86d6-71ee341fd878)
 ![breadcrumbs-03](https://github.com/user-attachments/assets/ae3b4816-0892-4651-b002-b4ac99412687)                           
 
+## Updates since version 3.0.0
+
+By default, the component uses a minimal set of functional styles that provide a foundation for a custom theme.
+To use the component with the Vaadin Lumo theme, import the component's Lumo theme from `@vaadin-component-factory/vcf-breadcrumb/theme/lumo.css`.
+
+`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.
+
 ## Updates since version 2.0.0
 
 - Lit based component with theming support.
diff --git a/demo/demo.js b/demo/demo.js
index 0c80bbb..8233b31 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,3 +1,4 @@
 import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
 import '@polymer/iron-demo-helpers/demo-snippet';
-import '../dist/src/vcf-breadcrumbs.js';
\ No newline at end of file
+import '@vaadin/vaadin-lumo-styles/icons.js';
+import '../dist/src/vcf-breadcrumbs.js';
diff --git a/demo/index.html b/demo/index.html
index 8195e5a..e5aca77 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -6,6 +6,8 @@
     <title>vcf-breadcrumb demo</title>
     <script dev src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <script dev type="module" src="demo.js"></script>
+    <link rel="stylesheet" href="/node_modules/@vaadin/vaadin-lumo-styles/lumo.css" />
+    <link rel="stylesheet" href="/theme/lumo.css" />
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
         .centered {
diff --git a/package.json b/package.json
index 0588bd1..1eeb0f8 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,13 @@
   "license": "https://raw.githubusercontent.com/vaadin-component-factory/vcf-breadcrumb/master/LICENSE",
   "exports": {
     ".": "./dist/src/index.js",
-    "./dist/src/vcf-breadcrumbs.js": "./dist/src/vcf-breadcrumbs.js"
+    "./dist/src/vcf-breadcrumbs.js": "./dist/src/vcf-breadcrumbs.js",
+    "./theme/*": "./theme/*"
   },
   "files": [
     "vcf-*.js",
     "src",
+    "theme",
     "dist"
   ],
   "repository": {
@@ -42,11 +44,9 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@vaadin/component-base": "^24.5.8",
-    "@vaadin/popover": "^24.5.8",
-    "@vaadin/vaadin-lumo-styles": "^24.5.8",
-    "@vaadin/vaadin-themable-mixin": "^24.5.8",
-    "@vaadin/vertical-layout": "^24.5.8",
+    "@vaadin/component-base": "^25.0.0-beta1",
+    "@vaadin/popover": "^25.0.0-beta1",
+    "@vaadin/vertical-layout": "^25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -58,6 +58,7 @@
     "@types/jest": "^29.5.14",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
+    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta1",
     "@web/dev-server": "^0.4.3",
     "@web/test-runner": "^0.19.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
diff --git a/src/component/vcf-breadcrumb.ts b/src/component/vcf-breadcrumb.ts
index 612a214..0e8de82 100644
--- a/src/component/vcf-breadcrumb.ts
+++ b/src/component/vcf-breadcrumb.ts
@@ -18,10 +18,8 @@
  */
 import { html, LitElement, css } from "lit";
 import { customElement, property } from 'lit/decorators.js';
-import { ThemableMixin } from "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js";
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { typography } from "@vaadin/vaadin-lumo-styles";
 
 /**
  * A Web Component for individual breadcrumb items in a breadcrumb navigation system.
@@ -39,16 +37,15 @@ import { typography } from "@vaadin/vaadin-lumo-styles";
  * <vcf-breadcrumb href="/products">Products</vcf-breadcrumb>
  * <vcf-breadcrumb>Current Page</vcf-breadcrumb>
  * ```
- * 
+ *
  * @memberof Vaadin
  * @name vcf-breadcrumb
  * @mixes ElementMixin
- * @mixes ThemableMixin
  * @mixes PolylitMixin
  * @demo demo/index.html
  */
 @customElement("vcf-breadcrumb")
-class VcfBreadcrumb extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class VcfBreadcrumb extends ElementMixin(PolylitMixin(LitElement)) {
 
   @property({ type: String, reflect: true }) 
   href = '';
@@ -75,16 +72,76 @@ class VcfBreadcrumb extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))
   }
 
   static get styles() {
-    return [typography, css`
-        :host(:last-of-type) [part='separator'] {
-          display: none;
-        }        
-
+    return [css`
         :host {
           display: flex;
           align-items: center;
           min-width: 40px;
-        }       
+          --vcf-breadcrumb-separator-font-family: 'inherit';
+          --vcf-breadcrumb-separator-symbol: '/';
+          --vcf-breadcrumb-separator-color: var(--vaadin-text-color-secondary, #666);
+          --vcf-breadcrumb-separator-size: var(--vaadin-icon-size, 1lh);
+          --vcf-breadcrumb-separator-margin: 0;
+          --vcf-breadcrumb-separator-padding: 0 var(--vaadin-padding-xs, 6px);
+          --vcf-breadcrumb-mobile-back-symbol: '←';
+          --vcf-breadcrumb-link-focus-ring-color: var(--vaadin-focus-ring-color, Highlight);
+        }
+
+        :host [part='separator'] {
+          margin: var(--vcf-breadcrumb-separator-margin);
+          padding: var(--vcf-breadcrumb-separator-padding);
+        }
+
+        :host [part='separator']::after {
+          font-family: var(--vcf-breadcrumb-separator-font-family);
+          content: var(--vcf-breadcrumb-separator-symbol);
+          color: var(--vcf-breadcrumb-separator-color);
+          font-size: var(--vcf-breadcrumb-separator-size);
+          speak: none;
+        }
+
+        :host(:last-of-type) [part='separator'] {
+          display: none;
+        }
+
+        [part='link'] {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+  
+        /* Focus ring */
+        :host(:focus-within) [part="link"] {
+          outline: var(--vcf-breadcrumb-link-focus-ring-color) auto 1px;
+          outline-offset: 1px;
+        }
+  
+        ::slotted(a:focus) {
+          outline: none;
+        }
+  
+        /* mobile back mode */
+        :host(.mobile-back) {
+          display: none;
+        }
+  
+        :host(.mobile-back) [part='separator'] {
+          display: none;
+        }
+  
+        :host(.mobile-back.is-last-not-current),
+        :host(.mobile-back.is-before-current) {
+          display: inline-block;
+        }
+
+        ::slotted(a.breadcrumb-anchor.add-mobile-back-icon)::before {
+          display: inline;
+          font-family: var(--vcf-breadcrumb-separator-font-family);
+          content: var(--vcf-breadcrumb-mobile-back-symbol);
+          font-size: var(--vcf-breadcrumb-separator-size);
+          margin: var(--vcf-breadcrumb-separator-margin);
+          color: inherit;
+        }
     `];
   }
 
diff --git a/src/component/vcf-breadcrumbs.ts b/src/component/vcf-breadcrumbs.ts
index 464f081..46e4893 100644
--- a/src/component/vcf-breadcrumbs.ts
+++ b/src/component/vcf-breadcrumbs.ts
@@ -18,7 +18,6 @@
  */
 import { html, LitElement, css } from "lit";
 import { customElement, property, state } from 'lit/decorators.js';
-import { ThemableMixin } from "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js";
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -56,12 +55,11 @@ import '@vaadin/vertical-layout';
  * @name vcf-breadcrumbs
  * @mixes ResizeMixin
  * @mixes ElementMixin
- * @mixes ThemableMixin
  * @mixes PolylitMixin
  * @demo demo/index.html
  */
 @customElement("vcf-breadcrumbs")
-export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(PolylitMixin(LitElement))) {
 
   /**
    * Flag to indicate if the component is in mobile mode. 
@@ -96,9 +94,16 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(ThemableMixin(Polyl
 
   static get styles() {
     return css`
-        :host {
-          display: block;
-        }          
+      :host {
+        display: block;
+      }
+
+      [part='links-list'] {
+        display: flex;
+        justify-content: start;
+        align-content: center;
+        align-items: center;
+      }
     `;
   }
 
@@ -281,41 +286,36 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(ThemableMixin(Polyl
     ellipsis.style.minWidth = '0';
 
     // Create a popover to show the hidden breadcumbs and add it to the ellipsis element
-    let popover = document.createElement("vaadin-popover");
+    const popover = document.createElement("vaadin-popover");
     popover.setAttribute("for", id);
     popover.setAttribute("overlay-role", "menu");
-    popover.setAttribute('accessible-name-ref', "hidden breadcrumbs"); 
+    popover.setAttribute('accessible-name-ref', "hidden breadcrumbs");
     popover.setAttribute("theme", "hidden-breadcrumbs");
     popover.setAttribute("position", "bottom-start");
     popover.setAttribute("modal", "true");
 
-    popover.renderer = (root) => {
-      // Ensure content is only added once
-      if (!root.firstChild) {
-        const verticalLayout = document.createElement('vaadin-vertical-layout');
-        verticalLayout.classList.add('hidden-breadcrumbs-layout');
-
-        // create new anchor elements for the hidden items and add them to the vertical layout
-        hiddenItems.forEach((element) => {
-          const item = document.createElement('a');
-          item.textContent = element.textContent;
-          item.setAttribute("href", element.getAttribute('href') ?? '');
-          item.setAttribute("role", "menuitem");
-          // Copy element class list
-          const elementClasses = Array.from(element.classList);
-          item.classList.add(...elementClasses);
-          item.classList.add("hidden-breadcrumb-anchor");
-
-          // Add click event to close popover when clicking an item
-          item.addEventListener("click", () => {
-            popover.opened = false;
-          });
-
-          verticalLayout.appendChild(item); 
-        });              
-        root.appendChild(verticalLayout);    
-      }
-    };
+    const verticalLayout = document.createElement('vaadin-vertical-layout');
+    verticalLayout.classList.add('hidden-breadcrumbs-layout');
+
+    // create new anchor elements for the hidden items and add them to the vertical layout
+    hiddenItems.forEach((element) => {
+      const item = document.createElement('a');
+      item.textContent = element.textContent;
+      item.setAttribute("href", element.getAttribute('href') ?? '');
+      item.setAttribute("role", "menuitem");
+      // Copy element class list
+      const elementClasses = Array.from(element.classList);
+      item.classList.add(...elementClasses);
+      item.classList.add("hidden-breadcrumb-anchor");
+
+      // Add click event to close popover when clicking an item
+      item.addEventListener("click", () => {
+        popover.opened = false;
+      });
+
+      verticalLayout.appendChild(item);
+    });
+    popover.appendChild(verticalLayout);
 
     // append popover to ellipsis to move it later to the anchor within the container
     ellipsis.appendChild(popover);
@@ -342,27 +342,6 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(ThemableMixin(Polyl
         this._mobile = matches;
       }),
     );
-
-    // Inject a scoped <style> element to define the mobile back icon behavior
-    const style = document.createElement('style');
-    style.textContent = `
-      /* 
-       * This rule targets an <a> element with the 'breadcrumb-anchor' and
-       * 'add-mobile-back-icon' classes that is a direct child of <vcf-breadcrumb>.
-       *
-       * Although technically global, it's scoped through the component selector
-       * and only applies to breadcrumb anchors styled for mobile mode.
-       */
-      vcf-breadcrumb > a.breadcrumb-anchor.add-mobile-back-icon::before {
-        display: inline;
-        font-family: var(--vcf-breadcrumb-separator-font-family);
-        content: var(--vcf-breadcrumb-mobile-back-symbol);
-        font-size: var(--vcf-breadcrumb-separator-size);
-        margin: var(--vcf-breadcrumb-separator-margin);
-        color: inherit;
-      }
-    `;
-    this.appendChild(style);
   }
 
 }
diff --git a/src/index.ts b/src/index.ts
index 1a0d00d..f0eb07f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1 @@
-export { VcfBreadcrumbs as VcfBreadcrumbs } from './component/vcf-breadcrumbs.js';
\ No newline at end of file
+export * from './vcf-breadcrumbs.js';
diff --git a/src/theme/lumo/vcf-breadcrumb-styles.ts b/src/theme/lumo/vcf-breadcrumb-styles.ts
deleted file mode 100644
index aaf2917..0000000
--- a/src/theme/lumo/vcf-breadcrumb-styles.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vcf-breadcrumb',
-  css`
-  
-    :host {
-      --vcf-breadcrumb-separator-font-family: 'lumo-icons';
-      --vcf-breadcrumb-separator-symbol: var(--lumo-icons-angle-right);
-      --vcf-breadcrumb-separator-color: var(--lumo-contrast-40pct);
-      --vcf-breadcrumb-separator-size: var(--lumo-font-size-s);
-      --vcf-breadcrumb-separator-margin: 0;
-      --vcf-breadcrumb-separator-padding: 0 var(--lumo-space-xs);
-      --vcf-breadcrumb-mobile-back-symbol: var(--lumo-icons-angle-left);
-    }
-
-    :host {
-      font-family: var(--lumo-font-family);
-    }
-
-    :host [part='separator'] {
-      margin: var(--vcf-breadcrumb-separator-margin);
-      padding: var(--vcf-breadcrumb-separator-padding);
-    }
-
-    :host [part='separator']::after {
-      font-family: var(--vcf-breadcrumb-separator-font-family);
-      content: var(--vcf-breadcrumb-separator-symbol);
-      color: var(--vcf-breadcrumb-separator-color);
-      font-size: var(--vcf-breadcrumb-separator-size);
-      speak: none;
-    }
-   
-    [part='link'] {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    /* Focus ring */
-    :host(:focus-within) [part="link"] {
-      outline: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct)) auto 1px;
-      outline-offset: 1px;
-    }
-
-    ::slotted(a:focus) {
-      outline: none;
-    }
-
-    /* mobile back mode */
-    :host(.mobile-back) {
-      display: none;
-    }
-
-    :host(.mobile-back) [part='separator'] {
-      display: none;
-    }
-
-    :host(.mobile-back.is-last-not-current),
-    :host(.mobile-back.is-before-current) {
-      display: inline-block;
-    }
-  `
-);
diff --git a/src/theme/lumo/vcf-breadcrumb.ts b/src/theme/lumo/vcf-breadcrumb.ts
deleted file mode 100644
index da6c2d9..0000000
--- a/src/theme/lumo/vcf-breadcrumb.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import './vcf-breadcrumb-styles.js';
-import './vcf-breadcrumbs-styles.js';
-import '../../component/vcf-breadcrumb.js';
-import '../../component/vcf-breadcrumbs.js';
diff --git a/src/theme/lumo/vcf-breadcrumbs-styles.ts b/src/theme/lumo/vcf-breadcrumbs-styles.ts
deleted file mode 100644
index 47c89ee..0000000
--- a/src/theme/lumo/vcf-breadcrumbs-styles.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vcf-breadcrumbs',
-  css`
-    [part='links-list'] {
-      display: flex;
-      justify-content: start;
-      align-content: center;
-      align-items: center;
-    }   
-  `
-);
diff --git a/src/vcf-breadcrumbs.ts b/src/vcf-breadcrumbs.ts
index a4350b4..95cc5de 100644
--- a/src/vcf-breadcrumbs.ts
+++ b/src/vcf-breadcrumbs.ts
@@ -1,3 +1,4 @@
-import './theme/lumo/vcf-breadcrumb.js';
+import './component/vcf-breadcrumb.js';
+import './component/vcf-breadcrumbs.js';
 
 export * from './component/vcf-breadcrumbs.js';
diff --git a/theme/lumo.css b/theme/lumo.css
new file mode 100644
index 0000000..572982b
--- /dev/null
+++ b/theme/lumo.css
@@ -0,0 +1,18 @@
+vcf-breadcrumb {
+    --vcf-breadcrumb-separator-font-family: 'lumo-icons';
+    --vcf-breadcrumb-separator-symbol: var(--lumo-icons-angle-right);
+    --vcf-breadcrumb-separator-color: var(--lumo-contrast-40pct);
+    --vcf-breadcrumb-separator-size: var(--lumo-font-size-s);
+    --vcf-breadcrumb-separator-margin: 0;
+    --vcf-breadcrumb-separator-padding: 0 var(--lumo-space-xs);
+    --vcf-breadcrumb-mobile-back-symbol: var(--lumo-icons-angle-left);
+    --vcf-breadcrumb-link-focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+}
+
+vcf-breadcrumb a[slot="link-slot"]:not([href]) {
+    /* Lumo uses disabled color for anchors without href, use base text color instead */
+    color: var(--lumo-body-text-color);
+}

From 584823d9c07350a70d6c77f031121cc007b56152 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Tue, 28 Oct 2025 10:37:21 +0000
Subject: [PATCH 2/5] use theme detection mixin to automatically apply Lumo
 theme

---
 README.md                       |  3 +--
 demo/index.html                 |  1 -
 package.json                    |  9 +++++----
 src/component/vcf-breadcrumb.ts | 30 ++++++++++++++++++++++++++----
 theme/lumo.css                  | 18 ------------------
 5 files changed, 32 insertions(+), 29 deletions(-)
 delete mode 100644 theme/lumo.css

diff --git a/README.md b/README.md
index 09d0a5d..e90af7a 100644
--- a/README.md
+++ b/README.md
@@ -37,8 +37,7 @@ Add `<vcf-breadcrumbs>` element to the page. Inside added element add few `<vcf-
 
 ## Updates since version 3.0.0
 
-By default, the component uses a minimal set of functional styles that provide a foundation for a custom theme.
-To use the component with the Vaadin Lumo theme, import the component's Lumo theme from `@vaadin-component-factory/vcf-breadcrumb/theme/lumo.css`.
+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.
diff --git a/demo/index.html b/demo/index.html
index e5aca77..1a15128 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -7,7 +7,6 @@
     <script dev src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <script dev type="module" src="demo.js"></script>
     <link rel="stylesheet" href="/node_modules/@vaadin/vaadin-lumo-styles/lumo.css" />
-    <link rel="stylesheet" href="/theme/lumo.css" />
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
         .centered {
diff --git a/package.json b/package.json
index 1eeb0f8..226d459 100644
--- a/package.json
+++ b/package.json
@@ -44,9 +44,10 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@vaadin/component-base": "^25.0.0-beta1",
-    "@vaadin/popover": "^25.0.0-beta1",
-    "@vaadin/vertical-layout": "^25.0.0-beta1",
+    "@vaadin/component-base": "^25.0.0-beta2",
+    "@vaadin/popover": "^25.0.0-beta2",
+    "@vaadin/vertical-layout": "^25.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "^25.0.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -58,7 +59,7 @@
     "@types/jest": "^29.5.14",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
-    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta2",
     "@web/dev-server": "^0.4.3",
     "@web/test-runner": "^0.19.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
diff --git a/src/component/vcf-breadcrumb.ts b/src/component/vcf-breadcrumb.ts
index 0e8de82..eaecf5d 100644
--- a/src/component/vcf-breadcrumb.ts
+++ b/src/component/vcf-breadcrumb.ts
@@ -16,10 +16,11 @@
  * limitations under the License.
  * #L%
  */
-import { html, LitElement, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from 'lit/decorators.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemeDetectionMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-detection-mixin.js';
 
 /**
  * A Web Component for individual breadcrumb items in a breadcrumb navigation system.
@@ -42,10 +43,11 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
  * @name vcf-breadcrumb
  * @mixes ElementMixin
  * @mixes PolylitMixin
+ * @mixes ThemeDetectionMixin
  * @demo demo/index.html
  */
 @customElement("vcf-breadcrumb")
-class VcfBreadcrumb extends ElementMixin(PolylitMixin(LitElement)) {
+class VcfBreadcrumb extends ThemeDetectionMixin(ElementMixin(PolylitMixin(LitElement))) {
 
   @property({ type: String, reflect: true }) 
   href = '';
@@ -72,7 +74,7 @@ class VcfBreadcrumb extends ElementMixin(PolylitMixin(LitElement)) {
   }
 
   static get styles() {
-    return [css`
+    return css`
         :host {
           display: flex;
           align-items: center;
@@ -142,7 +144,27 @@ class VcfBreadcrumb extends ElementMixin(PolylitMixin(LitElement)) {
           margin: var(--vcf-breadcrumb-separator-margin);
           color: inherit;
         }
-    `];
+
+        /* Lumo theme */
+        :host([data-application-theme='lumo']) {
+          --vcf-breadcrumb-separator-font-family: 'lumo-icons';
+          --vcf-breadcrumb-separator-symbol: var(--lumo-icons-angle-right);
+          --vcf-breadcrumb-separator-color: var(--lumo-contrast-40pct);
+          --vcf-breadcrumb-separator-size: var(--lumo-font-size-s);
+          --vcf-breadcrumb-separator-margin: 0;
+          --vcf-breadcrumb-separator-padding: 0 var(--lumo-space-xs);
+          --vcf-breadcrumb-mobile-back-symbol: var(--lumo-icons-angle-left);
+          --vcf-breadcrumb-link-focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+
+          font-family: var(--lumo-font-family);
+          font-size: var(--lumo-font-size-m);
+        }
+
+        :host([data-application-theme='lumo']) ::slotted(a[slot="link-slot"]:not(:any-link)) {
+          /* Lumo global styles use disabled color for anchors without href, force base text color instead */
+          color: var(--lumo-body-text-color) !important;
+        }
+    `;
   }
 
   _createAnchor() {
diff --git a/theme/lumo.css b/theme/lumo.css
deleted file mode 100644
index 572982b..0000000
--- a/theme/lumo.css
+++ /dev/null
@@ -1,18 +0,0 @@
-vcf-breadcrumb {
-    --vcf-breadcrumb-separator-font-family: 'lumo-icons';
-    --vcf-breadcrumb-separator-symbol: var(--lumo-icons-angle-right);
-    --vcf-breadcrumb-separator-color: var(--lumo-contrast-40pct);
-    --vcf-breadcrumb-separator-size: var(--lumo-font-size-s);
-    --vcf-breadcrumb-separator-margin: 0;
-    --vcf-breadcrumb-separator-padding: 0 var(--lumo-space-xs);
-    --vcf-breadcrumb-mobile-back-symbol: var(--lumo-icons-angle-left);
-    --vcf-breadcrumb-link-focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-}
-
-vcf-breadcrumb a[slot="link-slot"]:not([href]) {
-    /* Lumo uses disabled color for anchors without href, use base text color instead */
-    color: var(--lumo-body-text-color);
-}

From 7ba3e98193d50a1ec46d57164a4ac49ee6df0f01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Tue, 28 Oct 2025 10:41:14 +0000
Subject: [PATCH 3/5] cleanup

---
 demo/demo.js                    | 1 -
 package.json                    | 4 +---
 src/component/vcf-breadcrumb.ts | 2 +-
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/demo/demo.js b/demo/demo.js
index 8233b31..f5098b1 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,4 +1,3 @@
 import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
 import '@polymer/iron-demo-helpers/demo-snippet';
-import '@vaadin/vaadin-lumo-styles/icons.js';
 import '../dist/src/vcf-breadcrumbs.js';
diff --git a/package.json b/package.json
index 226d459..bf853f6 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,11 @@
   "license": "https://raw.githubusercontent.com/vaadin-component-factory/vcf-breadcrumb/master/LICENSE",
   "exports": {
     ".": "./dist/src/index.js",
-    "./dist/src/vcf-breadcrumbs.js": "./dist/src/vcf-breadcrumbs.js",
-    "./theme/*": "./theme/*"
+    "./dist/src/vcf-breadcrumbs.js": "./dist/src/vcf-breadcrumbs.js"
   },
   "files": [
     "vcf-*.js",
     "src",
-    "theme",
     "dist"
   ],
   "repository": {
diff --git a/src/component/vcf-breadcrumb.ts b/src/component/vcf-breadcrumb.ts
index eaecf5d..5cb8733 100644
--- a/src/component/vcf-breadcrumb.ts
+++ b/src/component/vcf-breadcrumb.ts
@@ -38,7 +38,7 @@ import { ThemeDetectionMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-
  * <vcf-breadcrumb href="/products">Products</vcf-breadcrumb>
  * <vcf-breadcrumb>Current Page</vcf-breadcrumb>
  * ```
- *
+ * 
  * @memberof Vaadin
  * @name vcf-breadcrumb
  * @mixes ElementMixin

From 34d13400a802f7bc6c8c1e84b093825132894499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Tue, 28 Oct 2025 10:45:51 +0000
Subject: [PATCH 4/5] fix aria attributes

---
 src/component/vcf-breadcrumbs.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/component/vcf-breadcrumbs.ts b/src/component/vcf-breadcrumbs.ts
index 46e4893..d36311f 100644
--- a/src/component/vcf-breadcrumbs.ts
+++ b/src/component/vcf-breadcrumbs.ts
@@ -288,8 +288,8 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(PolylitMixin(LitEle
     // Create a popover to show the hidden breadcumbs and add it to the ellipsis element
     const popover = document.createElement("vaadin-popover");
     popover.setAttribute("for", id);
-    popover.setAttribute("overlay-role", "menu");
-    popover.setAttribute('accessible-name-ref', "hidden breadcrumbs");
+    popover.setAttribute("role", "menu");
+    popover.setAttribute('aria-labelledby', id);
     popover.setAttribute("theme", "hidden-breadcrumbs");
     popover.setAttribute("position", "bottom-start");
     popover.setAttribute("modal", "true");

From af5d72993f10f866fde722d9e05544240d344302 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Tue, 28 Oct 2025 10:50:15 +0000
Subject: [PATCH 5/5] fix popover not closing on item click

---
 src/component/vcf-breadcrumbs.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/component/vcf-breadcrumbs.ts b/src/component/vcf-breadcrumbs.ts
index d36311f..2f22294 100644
--- a/src/component/vcf-breadcrumbs.ts
+++ b/src/component/vcf-breadcrumbs.ts
@@ -309,8 +309,11 @@ export class VcfBreadcrumbs extends ResizeMixin(ElementMixin(PolylitMixin(LitEle
       item.classList.add("hidden-breadcrumb-anchor");
 
       // Add click event to close popover when clicking an item
-      item.addEventListener("click", () => {
+      item.addEventListener("click", (event) => {
         popover.opened = false;
+        // Stop propagation, since the popover is nested within the trigger
+        // element the click would otherwise re-open the popover
+        event.stopPropagation();
       });
 
       verticalLayout.appendChild(item);