diff --git a/demo/demo.js b/demo/demo.js
index 9a8eee4..fc15046 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -6,4 +6,4 @@ import '@vaadin/menu-bar';
 import '@vaadin/icon';
 import '@vaadin/icons';
 import '@vaadin/text-field';
-
+import '@vaadin/vaadin-lumo-styles/icons.js';
diff --git a/demo/index.html b/demo/index.html
index 7337ed0..ccb668c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,6 +9,7 @@
     <script>
         window.addEventListener('WebComponentsReady', () => document.querySelector('main').classList.remove('hidden'));
     </script>
+    <link rel="stylesheet" href="/node_modules/@vaadin/vaadin-lumo-styles/lumo.css" />
 
     <!-- demo styles -->
     <style>
diff --git a/package.json b/package.json
index f867109..227c8a7 100644
--- a/package.json
+++ b/package.json
@@ -42,12 +42,12 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@vaadin/button": "^24.7.1",
-    "@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/button": "^25.0.0-beta1",
+    "@vaadin/component-base": "^25.0.0-beta1",
+    "@vaadin/popover": "^25.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "^25.0.0-beta1",
+    "@vaadin/vertical-layout": "^25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -59,12 +59,12 @@
     "@types/jest": "^29.5.14",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
-    "@vaadin/combo-box": "^24.7.1",
-    "@vaadin/date-picker": "^24.7.1",
-    "@vaadin/icon": "^24.7.1",
-    "@vaadin/icons": "^24.7.1",
-    "@vaadin/menu-bar": "^24.7.1",
-    "@vaadin/text-field": "^24.7.1",
+    "@vaadin/combo-box": "^25.0.0-beta1",
+    "@vaadin/date-picker": "^25.0.0-beta1",
+    "@vaadin/icon": "^25.0.0-beta1",
+    "@vaadin/icons": "^25.0.0-beta1",
+    "@vaadin/menu-bar": "^25.0.0-beta1",
+    "@vaadin/text-field": "^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-toolbar-layout.ts b/src/component/vcf-toolbar-layout.ts
index 1875994..d708165 100644
--- a/src/component/vcf-toolbar-layout.ts
+++ b/src/component/vcf-toolbar-layout.ts
@@ -71,15 +71,16 @@ export class VcfToolbarLayout extends ResizeMixin(
     `;
   }
 
-  // overflow container is attached to the popover overlay (different shadow root) so we need to inject styles globally
+  // some nested selectors can not be solved with using ::slotted from the shadow root
+  // so we need to inject global styles for those parts
   protected readonly _globalStyles: string = `
     /* Hide label on icon buttons */
-    vcf-toolbar-layout vaadin-button[theme~="icon"]::part(label) {
+    vcf-toolbar-layout > vaadin-button[theme~="icon"]::part(label) {
       display: none;
     }
 
     /* Overflow container styles */
-    .overflow-container {
+    vcf-toolbar-layout > .overflow-container {
       --overflow-container-padding: var(--lumo-space-s);
       --overflow-container-item-gap: var(--lumo-space-xs);
       --overflow-container-text-color: var(--lumo-body-text-color);
@@ -95,12 +96,12 @@ export class VcfToolbarLayout extends ResizeMixin(
       padding: var(--overflow-container-padding);
     }
     
-    vaadin-popover-overlay[theme~="fixed-width-prefix"] .overflow-container {
+    vcf-toolbar-layout[theme~="fixed-width-prefix"] .overflow-container {
       --overflow-container-prefix-width: var(--lumo-space-l);
     }
 
     /* native element styles */
-    vcf-toolbar-layout  hr {
+    vcf-toolbar-layout > hr {
       display: inline-block;
       flex-shrink: 0;
       align-self: stretch;
@@ -111,18 +112,18 @@ export class VcfToolbarLayout extends ResizeMixin(
       margin: var(--lumo-space-xs);
     }
     
-    vcf-toolbar-layout hr:last-child {
+    vcf-toolbar-layout > hr:last-child {
       visibility: hidden;
       margin: 0;
       margin-right: calc(-1 * var(--vcf-toolbar-layout-gap));
       width: 0;
     }
     
-    .overflow-container > hr:first-child {
+    vcf-toolbar-layout > .overflow-container > hr:first-child {
       display: none;
     }
 
-    .overflow-container > hr {
+    vcf-toolbar-layout > .overflow-container > hr {
       border: none;
       background-color: var(--lumo-contrast-10pct);
       margin: 0;
@@ -130,23 +131,23 @@ export class VcfToolbarLayout extends ResizeMixin(
       width: 100%;
     }
 
-    .overflow-container > a {
+    vcf-toolbar-layout > .overflow-container > a {
       display: flex;
       align-items: center;
     }
 
     /* vaadin component styles */
     
-    :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(prefix),
-    :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(suffix) {
+    vcf-toolbar-layout > :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(prefix),
+    vcf-toolbar-layout > :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(suffix) {
       color: var(--overflow-container-prefix-suffix-color);
     }
     
-    .overflow-container > [has-label]:first-child {
+    vcf-toolbar-layout > .overflow-container > [has-label]:first-child {
       padding-top: 0;
     }
     
-    .overflow-container > [has-label] {
+    vcf-toolbar-layout > .overflow-container > [has-label] {
       padding-top: var(--lumo-space-s);
     }
     
@@ -154,66 +155,66 @@ export class VcfToolbarLayout extends ResizeMixin(
       width: unset !important;
     }
 
-    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
+    vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
       justify-content: left;
     }
 
-    .overflow-container > vaadin-button,
-    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
+    vcf-toolbar-layout > .overflow-container > vaadin-button,
+    vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
       --vaadin-button-padding: var(--lumo-space-s);
       --vaadin-button-margin: 0px;
     }
     
-    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
+    vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
       width: unset !important;
       flex: 1;
     }
     
-    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
+    vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
       width: 100%;
     }
     
-    .overflow-container > vaadin-button[theme~="primary"] {
+    vcf-toolbar-layout > .overflow-container > vaadin-button[theme~="primary"] {
       background: var(--vaadin-button-background);
       color: var(--lumo-primary-text-color);
       font-weight: var(--vaadin-button-font-weight);
     }
     
-    .overflow-container > vaadin-button[theme~="icon"]::part(prefix) {
+    vcf-toolbar-layout > .overflow-container > vaadin-button[theme~="icon"]::part(prefix) {
       margin-left: -0.25em;
       margin-right: 0.25em;
     }
     
     /* Theme variant to hide prefix & suffix in overflow container */
-    vaadin-popover-overlay[theme~="hide-icons"] .overflow-container > vaadin-button::part(prefix),
-    vaadin-popover-overlay[theme~="hide-icons"] .overflow-container > vaadin-button::part(suffix),
-    vaadin-popover-overlay[theme~="hide-icons"] .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix),
-    vaadin-popover-overlay[theme~="hide-icons"] .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(suffix) {
+    vcf-toolbar-layout[theme~="hide-icons"] > .overflow-container > vaadin-button::part(prefix),
+    vcf-toolbar-layout[theme~="hide-icons"] > .overflow-container > vaadin-button::part(suffix),
+    vcf-toolbar-layout[theme~="hide-icons"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix),
+    vcf-toolbar-layout[theme~="hide-icons"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(suffix) {
       display: none;
     }
 
-    .overflow-container > vaadin-button::part(label),
-    .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(label) {
+    vcf-toolbar-layout > .overflow-container > vaadin-button::part(label),
+    vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(label) {
       text-align: left;
       flex-grow: 1;
     }
     
-    .overflow-container > ::part(input-field) {
+    vcf-toolbar-layout > .overflow-container > ::part(input-field) {
       padding: 0 var(--lumo-space-xs);
     }
     
-    .overflow-container > a {
+    vcf-toolbar-layout > .overflow-container > a {
       padding: 0 var(--lumo-space-s);
       height: var(--lumo-size-m);
     }
     
     /* Theme variant forcing horizonal alignment of prefixes */
-    vaadin-popover-overlay[theme~="fixed-width-prefix"] .overflow-container > vaadin-button::part(prefix),
-    vaadin-popover-overlay[theme~="fixed-width-prefix"] .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix) {
+    vcf-toolbar-layout[theme~="fixed-width-prefix"] > .overflow-container > vaadin-button::part(prefix),
+    vcf-toolbar-layout[theme~="fixed-width-prefix"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix) {
       width: var(--overflow-container-prefix-width);
     }
     
-    vaadin-popover-overlay[theme~="fixed-width-prefix"] .overflow-container > a {
+    vcf-toolbar-layout[theme~="fixed-width-prefix"] > .overflow-container > a {
       padding-left: calc(var(--lumo-space-s) + 0.2em + var(--overflow-container-prefix-width, 0px));
     }
   `;
@@ -280,16 +281,12 @@ export class VcfToolbarLayout extends ResizeMixin(
     // setup overflow container
     this._overflowContainer = document.createElement('vaadin-vertical-layout');
     this._overflowContainer.classList.add('overflow-container');
+    this._overflowContainer.slot = "overflow-content";
+    this.append(this._overflowContainer);
 
     // setup the popover
     this._popover = this.shadowRoot.querySelector('vaadin-popover') as Popover;
     this._popover.target = this._overflowButton;
-    this._popover.renderer = (root: Element) => {
-      // Ensure content is only added once
-      if (!root.firstChild) {
-        root.appendChild(this._overflowContainer!);
-      }
-    };
 
     // process overflow items to set initial state
     // for some reason, button width is ignored unless we need to wait for the next frame
@@ -333,7 +330,9 @@ export class VcfToolbarLayout extends ResizeMixin(
         position="bottom-start"
         overlay-role="menu"
         accessible-name-ref="overflowed menu items"
-      ></vaadin-popover>
+      >
+        <slot name="overflow-content"></slot>
+      </vaadin-popover>
     `;
   }
 
@@ -444,7 +443,7 @@ export class VcfToolbarLayout extends ResizeMixin(
   }
 
   protected _getVisibleItems(): Element[] {
-    return Array.from(this.querySelectorAll(':scope > *:not([slot="overflow-button"])'));
+    return Array.from(this.querySelectorAll(':scope > *:not([slot])'));
   }      
 
   protected _getOverflowedItems(): Element[] {
diff --git a/src/theme/lumo/vcf-toolbar-layout-styles.ts b/src/theme/lumo/vcf-toolbar-layout-styles.ts
index 68ecc38..8b9034e 100644
--- a/src/theme/lumo/vcf-toolbar-layout-styles.ts
+++ b/src/theme/lumo/vcf-toolbar-layout-styles.ts
@@ -1,10 +1,3 @@
-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';
 
 // todo: move styles here