From 59439e7930caeeca2a8aa014529ddae76c164c13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Wed, 22 Oct 2025 09:47:57 +0000
Subject: [PATCH 1/9] bump versions and update demo

---
 demo/demo.js                                |  2 +-
 demo/index.html                             |  1 +
 package.json                                | 24 ++++++++++-----------
 src/theme/lumo/vcf-toolbar-layout-styles.ts |  7 ------
 4 files changed, 14 insertions(+), 20 deletions(-)

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/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

From a8e501999a749ca08e24b7d128b963b0aa9a8d56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Wed, 22 Oct 2025 09:48:21 +0000
Subject: [PATCH 2/9] update popover to slot overlay content

---
 src/component/vcf-toolbar-layout.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/component/vcf-toolbar-layout.ts b/src/component/vcf-toolbar-layout.ts
index 1875994..b8dd323 100644
--- a/src/component/vcf-toolbar-layout.ts
+++ b/src/component/vcf-toolbar-layout.ts
@@ -280,16 +280,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 +329,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 +442,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[] {

From e48c3d332d3b6ed69835f7cc0d30fb923239d39d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Wed, 22 Oct 2025 12:15:42 +0000
Subject: [PATCH 3/9] update overlay styles

---
 src/component/vcf-toolbar-layout.ts | 63 +++++++++++++++--------------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/component/vcf-toolbar-layout.ts b/src/component/vcf-toolbar-layout.ts
index b8dd323..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));
     }
   `;

From 9335588ab26cdba7d94c6513298c9868f3d08d66 Mon Sep 17 00:00:00 2001
From: "Enver Haase (vaadin)" <enver@vaadin.com>
Date: Tue, 11 Nov 2025 15:54:02 +0100
Subject: [PATCH 4/9] update version number to v2.0.0 for Vaadin 25

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 227c8a7..2d4d28d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vaadin-component-factory/vcf-toolbar-layout",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "Web Component providing an a toolbar layout with overflow support.",
   "author": "Vaadin Ltd",
   "type": "module",

From 5fffdcb66b0703ace64d75f09589b57f6340879f Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 12 Nov 2025 09:17:35 +0200
Subject: [PATCH 5/9] chore: upgrade to latest V25 beta

---
 package.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 2d4d28d..7481010 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": "^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",
+    "@vaadin/button": "^25.0.0-beta4",
+    "@vaadin/component-base": "^25.0.0-beta4",
+    "@vaadin/popover": "^25.0.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "^25.0.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "^25.0.0-beta4",
+    "@vaadin/vertical-layout": "^25.0.0-beta4",
     "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": "^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",
+    "@vaadin/combo-box": "^25.0.0-beta4",
+    "@vaadin/date-picker": "^25.0.0-beta4",
+    "@vaadin/icon": "^25.0.0-beta4",
+    "@vaadin/icons": "^25.0.0-beta4",
+    "@vaadin/menu-bar": "^25.0.0-beta4",
+    "@vaadin/text-field": "^25.0.0-beta4",
     "@web/dev-server": "^0.4.3",
     "@web/test-runner": "^0.19.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",

From 32a37d028ab4b2f9e2f8dcfac52aa4ab79895601 Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 12 Nov 2025 09:28:00 +0200
Subject: [PATCH 6/9] refactor: use ThemeDetectionMixin and SlotStylesMixin

---
 src/component/vcf-toolbar-layout.ts | 421 +++++++++++++++-------------
 1 file changed, 223 insertions(+), 198 deletions(-)

diff --git a/src/component/vcf-toolbar-layout.ts b/src/component/vcf-toolbar-layout.ts
index d708165..145c7fc 100644
--- a/src/component/vcf-toolbar-layout.ts
+++ b/src/component/vcf-toolbar-layout.ts
@@ -22,6 +22,8 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
+import { ThemeDetectionMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-detection-mixin.js';
 import '@vaadin/button';
 import '@vaadin/popover';
 import '@vaadin/vertical-layout';
@@ -30,9 +32,8 @@ import { Button } from '@vaadin/button';
 
 @customElement('vcf-toolbar-layout')
 export class VcfToolbarLayout extends ResizeMixin(
-  ElementMixin(ThemableMixin(PolylitMixin(LitElement)))
+  ElementMixin(SlotStylesMixin(ThemeDetectionMixin(PolylitMixin(LitElement))))
 ) {
-
   static get is() {
     return 'vcf-toolbar-layout';
   }
@@ -71,153 +72,168 @@ export class VcfToolbarLayout extends ResizeMixin(
     `;
   }
 
-  // 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) {
-      display: none;
-    }
+  // @ts-expect-error overriding property from `SlotStylesMixinClass`
+  override get slotStyles(): string[] {
+    const tag = this.localName;
+    const lumo = '[data-application-theme="lumo"]';
+
+    // some nested selectors can not be solved with using ::slotted from the shadow root
+    // so we need to inject global styles for those parts
+    return [
+      `
+      /* Hide label on icon buttons */
+      ${tag} > vaadin-button[theme~="icon"]::part(label) {
+        display: none;
+      }
 
-    /* Overflow container styles */
-    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);
-      --overflow-container-prefix-suffix-color: var(--lumo-tertiary-text-color);
-
-      /* vaadin component overrides */
-      --vaadin-button-background: transparent;
-      --vaadin-button-text-color: var(--lumo-body-text-color);
-      --vaadin-button-font-weight: 400;
-
-      align-items: stretch;
-      gap: var(--overflow-container-item-gap);
-      padding: var(--overflow-container-padding);
-    }
-    
-    vcf-toolbar-layout[theme~="fixed-width-prefix"] .overflow-container {
-      --overflow-container-prefix-width: var(--lumo-space-l);
-    }
+      /* Overflow container styles */
+      ${tag} > .overflow-container {
+        align-items: stretch;
+        gap: var(--overflow-container-item-gap);
+        padding: var(--overflow-container-padding);
+      }
 
-    /* native element styles */
-    vcf-toolbar-layout > hr {
-      display: inline-block;
-      flex-shrink: 0;
-      align-self: stretch;
-      width: 1px;
-      height: auto;
-      border: none;
-      background-color: var(--lumo-contrast-10pct);
-      margin: var(--lumo-space-xs);
-    }
-    
-    vcf-toolbar-layout > hr:last-child {
-      visibility: hidden;
-      margin: 0;
-      margin-right: calc(-1 * var(--vcf-toolbar-layout-gap));
-      width: 0;
-    }
-    
-    vcf-toolbar-layout > .overflow-container > hr:first-child {
-      display: none;
-    }
+      ${tag}${lumo} > .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);
+        --overflow-container-prefix-suffix-color: var(--lumo-tertiary-text-color);
 
-    vcf-toolbar-layout > .overflow-container > hr {
-      border: none;
-      background-color: var(--lumo-contrast-10pct);
-      margin: 0;
-      height: 1px;
-      width: 100%;
-    }
+        /* vaadin component overrides */
+        --vaadin-button-background: transparent;
+        --vaadin-button-text-color: var(--lumo-body-text-color);
+        --vaadin-button-font-weight: 400;
+      }
 
-    vcf-toolbar-layout > .overflow-container > a {
-      display: flex;
-      align-items: center;
-    }
+      ${tag}${lumo}[theme~="fixed-width-prefix"] .overflow-container {
+        --overflow-container-prefix-width: var(--lumo-space-l);
+      }
 
-    /* vaadin component styles */
-    
-    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);
-    }
-    
-    vcf-toolbar-layout > .overflow-container > [has-label]:first-child {
-      padding-top: 0;
-    }
-    
-    vcf-toolbar-layout > .overflow-container > [has-label] {
-      padding-top: var(--lumo-space-s);
-    }
-    
-    vcf-toolbar-layout > vaadin-menu-bar > vaadin-menu-bar-button {
-      width: unset !important;
-    }
+      /* native element styles */
+      ${tag} > hr {
+        display: inline-block;
+        flex-shrink: 0;
+        align-self: stretch;
+        width: 1px;
+        height: auto;
+        border: none;
+        background-color: var(--lumo-contrast-10pct);
+        margin: var(--lumo-space-xs);
+      }
 
-    vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
-      justify-content: left;
-    }
+      ${tag}${lumo} > hr {
+        background-color: var(--lumo-contrast-10pct);
+        margin: var(--lumo-space-xs);
+      }
 
-    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;
-    }
-    
-    vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
-      width: unset !important;
-      flex: 1;
-    }
-    
-    vcf-toolbar-layout > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
-      width: 100%;
-    }
-    
-    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);
-    }
-    
-    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 */
-    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;
-    }
+      ${tag} > hr:last-child {
+        visibility: hidden;
+        margin: 0;
+        margin-right: calc(-1 * var(--vcf-toolbar-layout-gap));
+        width: 0;
+      }
 
-    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;
-    }
-    
-    vcf-toolbar-layout > .overflow-container > ::part(input-field) {
-      padding: 0 var(--lumo-space-xs);
-    }
-    
-    vcf-toolbar-layout > .overflow-container > a {
-      padding: 0 var(--lumo-space-s);
-      height: var(--lumo-size-m);
-    }
-    
-    /* Theme variant forcing horizonal alignment of prefixes */
-    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);
-    }
-    
-    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));
-    }
-  `;
+      ${tag} > .overflow-container > hr:first-child {
+        display: none;
+      }
+
+      ${tag} > .overflow-container > hr {
+        border: none;
+        background-color: var(--lumo-contrast-10pct);
+        margin: 0;
+        height: 1px;
+        width: 100%;
+      }
+
+      ${tag} > .overflow-container > a {
+        display: flex;
+        align-items: center;
+      }
+
+      /* vaadin component styles */
+
+      ${tag} > :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(prefix),
+      ${tag} > :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(suffix) {
+        color: var(--overflow-container-prefix-suffix-color);
+      }
+
+      ${tag} > .overflow-container > [has-label]:first-child {
+        padding-top: 0;
+      }
+
+      ${tag}${lumo} > .overflow-container > [has-label] {
+        padding-top: var(--lumo-space-s);
+      }
+
+      ${tag} > vaadin-menu-bar > vaadin-menu-bar-button {
+        width: unset !important;
+      }
+
+      ${tag} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
+        justify-content: left;
+      }
+
+      ${tag}${lumo} > .overflow-container > vaadin-button,
+      ${tag}${lumo} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
+        --vaadin-button-padding: var(--lumo-space-s);
+        --vaadin-button-margin: 0px;
+      }
+
+      ${tag} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button {
+        width: unset !important;
+        flex: 1;
+      }
+
+      ${tag} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
+        width: 100%;
+      }
+
+      ${tag}${lumo} > .overflow-container > vaadin-button[theme~="primary"] {
+        background: var(--vaadin-button-background);
+        color: var(--lumo-primary-text-color);
+        font-weight: var(--vaadin-button-font-weight);
+      }
+
+      ${tag} > .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 */
+      ${tag}[theme~="hide-icons"] > .overflow-container > vaadin-button::part(prefix),
+      ${tag}[theme~="hide-icons"] > .overflow-container > vaadin-button::part(suffix),
+      ${tag}[theme~="hide-icons"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix),
+      ${tag}[theme~="hide-icons"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(suffix) {
+        display: none;
+      }
+
+      ${tag} > .overflow-container > vaadin-button::part(label),
+      ${tag} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(label) {
+        text-align: left;
+        flex-grow: 1;
+      }
+
+      ${tag}${lumo} > .overflow-container > ::part(input-field) {
+        padding: 0 var(--lumo-space-xs);
+      }
+
+      ${tag}${lumo} > .overflow-container > a {
+        padding: 0 var(--lumo-space-s);
+        height: var(--lumo-size-m);
+      }
+
+      /* Theme variant forcing horizontal alignment of prefixes */
+      ${tag}[theme~="fixed-width-prefix"] > .overflow-container > vaadin-button::part(prefix),
+      ${tag}[theme~="fixed-width-prefix"] > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button::part(prefix) {
+        width: var(--overflow-container-prefix-width);
+      }
+
+      ${tag}${lumo}[theme~="fixed-width-prefix"] > .overflow-container > a {
+        padding-left: calc(var(--lumo-space-s) + 0.2em + var(--overflow-container-prefix-width, 0px));
+      }
+    `,
+    ];
+  }
 
   @property({ type: String, reflect: true })
   theme: string | null = null;
@@ -245,20 +261,16 @@ export class VcfToolbarLayout extends ResizeMixin(
   connectedCallback(): void {
     super.connectedCallback();
 
-    // inject global styles for the overflow container since it will be moved to a different shadow root (popover overlay)
-    this._injectGlobalStyles();
-
     // listen for resize events
-    this.__resizeObserver = new ResizeObserver(this._requestOverflowUpdate.bind(this));
+    this.__resizeObserver = new ResizeObserver(
+      this._requestOverflowUpdate.bind(this)
+    );
     this.__resizeObserver.observe(this);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
 
-    // remove global styles
-    this._removeGlobalStyles();
-
     // remove resize observer
     this.__resizeObserver.disconnect();
 
@@ -281,7 +293,7 @@ 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._overflowContainer.slot = 'overflow-content';
     this.append(this._overflowContainer);
 
     // setup the popover
@@ -311,7 +323,8 @@ export class VcfToolbarLayout extends ResizeMixin(
     button.setAttribute('part', 'overflow-button');
     button.setAttribute('theme', 'icon');
     button.setAttribute('aria-label', 'open menu');
-    button.innerHTML = '<vaadin-icon icon="vaadin:ellipsis-dots-v" slot="suffix"></vaadin-icon>';
+    button.innerHTML =
+      '<vaadin-icon icon="vaadin:ellipsis-dots-v" slot="suffix"></vaadin-icon>';
     return button;
   }
 
@@ -319,8 +332,10 @@ export class VcfToolbarLayout extends ResizeMixin(
     return html`
       <slot></slot>
       <slot name="menu"></slot>
-      <slot name="overflow-button"
-          @slotchange="${this._onOverflowButtonSlotChange}">
+      <slot
+        name="overflow-button"
+        @slotchange="${this._onOverflowButtonSlotChange}"
+      >
       </slot>
 
       <vaadin-popover
@@ -337,9 +352,9 @@ export class VcfToolbarLayout extends ResizeMixin(
   }
 
   /**
-   * Fired when the overflow button slot changes. This is likely because 
+   * Fired when the overflow button slot changes. This is likely because
    * a new overflow button was added or the existing one was removed.
-   * @param e 
+   * @param e
    */
   protected _onOverflowButtonSlotChange(e: Event) {
     // update our reference to new overflow button
@@ -359,7 +374,10 @@ export class VcfToolbarLayout extends ResizeMixin(
     if (this.__updateTimeout) {
       clearTimeout(this.__updateTimeout);
     }
-    this.__updateTimeout = setTimeout(() => this._updateOverflowingItems(), this.updateDebounceDelay);
+    this.__updateTimeout = setTimeout(
+      () => this._updateOverflowingItems(),
+      this.updateDebounceDelay
+    );
   }
 
   /**
@@ -368,32 +386,51 @@ export class VcfToolbarLayout extends ResizeMixin(
    * Elements in the overflow container are hidden and only shown when the overflow button is clicked.
    */
   protected _updateOverflowingItems() {
-
     // todo: include container gap/padding/etc value in calculation?
-    const overflowButtonWidth = this._overflowButton ? this._overflowButton.getBoundingClientRect().width : 0;
+    const overflowButtonWidth = this._overflowButton
+      ? this._overflowButton.getBoundingClientRect().width
+      : 0;
 
     const visibleItems = this._getVisibleItems();
-    const lastVisibleItem = visibleItems.length > 0 ? visibleItems[visibleItems.length - 1] : null;
+    const lastVisibleItem =
+      visibleItems.length > 0 ? visibleItems[visibleItems.length - 1] : null;
 
     const overflowedItems = this._getOverflowedItems();
 
     // if the right-most item is visible in the container, then we might need to move overflow items back into the main container
-    if (!lastVisibleItem || this._isElementVisibleInContainer(lastVisibleItem, this, overflowButtonWidth)) {
+    if (
+      !lastVisibleItem ||
+      this._isElementVisibleInContainer(
+        lastVisibleItem,
+        this,
+        overflowButtonWidth
+      )
+    ) {
       while (overflowedItems.length > 0) {
         // temporarily move the item to the main container, then check for clipping
-        let overflowedItem = this.reverseCollapse ? overflowedItems[overflowedItems.length - 1] : overflowedItems[0];
+        let overflowedItem = this.reverseCollapse
+          ? overflowedItems[overflowedItems.length - 1]
+          : overflowedItems[0];
         this._moveItemToMainContainer(overflowedItem);
 
         // check the right-most visible item for clipping
         const updatedVisibleItems = this._getVisibleItems(); // <-- not optimal, but we need to get the updated list of visible items
-        let lastItem = this.reverseCollapse ? updatedVisibleItems[updatedVisibleItems.length - 1] : overflowedItem;
-        if (!this._isElementVisibleInContainer(lastItem, this, overflowButtonWidth)) {
+        let lastItem = this.reverseCollapse
+          ? updatedVisibleItems[updatedVisibleItems.length - 1]
+          : overflowedItem;
+        if (
+          !this._isElementVisibleInContainer(
+            lastItem,
+            this,
+            overflowButtonWidth
+          )
+        ) {
           this._moveItemToOverflowContainer(overflowedItem);
           break;
         }
 
         // remove from the overflowed items
-        overflowedItems.splice(overflowedItems.indexOf(overflowedItem), 1); 
+        overflowedItems.splice(overflowedItems.indexOf(overflowedItem), 1);
       }
     } else {
       // move items from the main container to the overflow container if they are clipped
@@ -401,9 +438,12 @@ export class VcfToolbarLayout extends ResizeMixin(
       while (visibleItems.length > 0) {
         let item = visibleItems[visibleItems.length - 1];
 
-        // normally we need to add the overflow button width, since the button sits to the right of the items, 
+        // normally we need to add the overflow button width, since the button sits to the right of the items,
         // but in reverse collapse mode, if the button is visible, it is on the left so we don't need to add its width
-        const extraSpaceRequired = (this.reverseCollapse && this._isOverflowButtonVisible()) ? 0 : overflowButtonWidth;
+        const extraSpaceRequired =
+          this.reverseCollapse && this._isOverflowButtonVisible()
+            ? 0
+            : overflowButtonWidth;
         if (this._isElementVisibleInContainer(item, this, extraSpaceRequired)) {
           break;
         }
@@ -425,26 +465,30 @@ export class VcfToolbarLayout extends ResizeMixin(
 
   /**
    * Check if the element is visible in the container.
-   * @param element 
-   * @param container 
-   * @param extraSpaceRequired 
-   * @returns 
+   * @param element
+   * @param container
+   * @param extraSpaceRequired
+   * @returns
    */
-  protected _isElementVisibleInContainer(element: Element, container: Element, extraSpaceRequired: number = 0): boolean {
+  protected _isElementVisibleInContainer(
+    element: Element,
+    container: Element,
+    extraSpaceRequired: number = 0
+  ): boolean {
     const elementRect = element.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
-  
+
     return (
       // elementRect.top >= containerRect.top &&
       // elementRect.left >= containerRect.left &&
       // elementRect.bottom <= containerRect.bottom &&
-      (elementRect.right + extraSpaceRequired) <= containerRect.right
+      elementRect.right + extraSpaceRequired <= containerRect.right
     );
   }
 
   protected _getVisibleItems(): Element[] {
     return Array.from(this.querySelectorAll(':scope > *:not([slot])'));
-  }      
+  }
 
   protected _getOverflowedItems(): Element[] {
     return Array.from(this._overflowContainer.querySelectorAll(':scope > *'));
@@ -458,17 +502,20 @@ export class VcfToolbarLayout extends ResizeMixin(
       this._overflowContainer.appendChild(item);
     } else {
       // must insert at beginning of overflow container to ensure order stays consistent with normal menu
-      this._overflowContainer.insertBefore(item, this._overflowContainer.firstChild);
+      this._overflowContainer.insertBefore(
+        item,
+        this._overflowContainer.firstChild
+      );
     }
   }
 
   protected _moveItemToMainContainer(item: Element) {
     item.remove();
-    
+
     if (this.reverseCollapse) {
       // if reverse collapse mode, we need to insert at the beginning of the main container
       this.insertBefore(item, this.children[0]);
-    }  else {
+    } else {
       // must insert at end of main container to ensure order stays consistent with normal menu
       this.appendChild(item);
     }
@@ -488,26 +535,4 @@ export class VcfToolbarLayout extends ResizeMixin(
   protected _isOverflowButtonVisible(): boolean {
     return this._overflowButton.classList.contains('visible');
   }
-
-  protected _injectGlobalStyles() {
-    const styleId = 'overflow-container-styles';
-
-    // avoid injecting duplicates
-    if (document.getElementById(styleId)) {
-      return;
-    }
-    
-    const style = document.createElement('style');
-    style.id = styleId;
-    style.textContent = this._globalStyles;
-    document.head.appendChild(style);
-  }
-
-  protected _removeGlobalStyles() {
-    const styleId = 'overflow-container-styles';
-    const style = document.getElementById(styleId);
-    if (style) {
-      style.remove();
-    }
-  }
 }

From 8e91bdad7e56548e107273300fb0970adbb02ff5 Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 12 Nov 2025 09:32:56 +0200
Subject: [PATCH 7/9] refactor: remove not needed shadow root check

---
 src/component/vcf-toolbar-layout.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/component/vcf-toolbar-layout.ts b/src/component/vcf-toolbar-layout.ts
index 145c7fc..b3ab214 100644
--- a/src/component/vcf-toolbar-layout.ts
+++ b/src/component/vcf-toolbar-layout.ts
@@ -282,11 +282,6 @@ export class VcfToolbarLayout extends ResizeMixin(
   }
 
   protected firstUpdated() {
-    if (!this.shadowRoot) {
-      console.error('Shadow root not found');
-      return;
-    }
-
     // get the overflow button (or create it)
     this._overflowButton = this._findOrCreateOverflowButton();
 
@@ -297,7 +292,7 @@ export class VcfToolbarLayout extends ResizeMixin(
     this.append(this._overflowContainer);
 
     // setup the popover
-    this._popover = this.shadowRoot.querySelector('vaadin-popover') as Popover;
+    this._popover = this.shadowRoot!.querySelector('vaadin-popover') as Popover;
     this._popover.target = this._overflowButton;
 
     // process overflow items to set initial state

From a4461b281204751487de7ba27babf7e98cfd3b05 Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 12 Nov 2025 09:35:01 +0200
Subject: [PATCH 8/9] chore: remove no longer needed Lumo folder

---
 src/theme/lumo/vcf-toolbar-layout-styles.ts | 12 ------------
 src/theme/lumo/vcf-toolbar-layout.ts        |  2 --
 src/vcf-toolbar-layout.ts                   |  4 ++--
 3 files changed, 2 insertions(+), 16 deletions(-)
 delete mode 100644 src/theme/lumo/vcf-toolbar-layout-styles.ts
 delete mode 100644 src/theme/lumo/vcf-toolbar-layout.ts

diff --git a/src/theme/lumo/vcf-toolbar-layout-styles.ts b/src/theme/lumo/vcf-toolbar-layout-styles.ts
deleted file mode 100644
index 8b9034e..0000000
--- a/src/theme/lumo/vcf-toolbar-layout-styles.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-// todo: move styles here
-registerStyles(
-  'vcf-toolbar-layout',
-  css`
-  
-    :host {
-      /* Variables for the toolbar layout */
-    }
-  `
-);
diff --git a/src/theme/lumo/vcf-toolbar-layout.ts b/src/theme/lumo/vcf-toolbar-layout.ts
deleted file mode 100644
index e4a37f5..0000000
--- a/src/theme/lumo/vcf-toolbar-layout.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import './vcf-toolbar-layout-styles.js';
-import '../../component/vcf-toolbar-layout.js';
diff --git a/src/vcf-toolbar-layout.ts b/src/vcf-toolbar-layout.ts
index 38a143f..df2d913 100644
--- a/src/vcf-toolbar-layout.ts
+++ b/src/vcf-toolbar-layout.ts
@@ -1,3 +1,3 @@
-import './theme/lumo/vcf-toolbar-layout.js';
+import './component/vcf-toolbar-layout.js';
 
-export * from './component/vcf-toolbar-layout.js';
\ No newline at end of file
+export * from './component/vcf-toolbar-layout.js';

From 9ac274237f10b4ba60e024173572196081000295 Mon Sep 17 00:00:00 2001
From: Juuso Kantonen <juuso.kantonen@vaadin.com>
Date: Thu, 27 Nov 2025 13:26:09 +0200
Subject: [PATCH 9/9] Position overflow button always at the end. Hide HR
 element if first or last in the row or list. Fixes focus indicators in base
 styles.

---
 src/component/vcf-toolbar-layout.ts | 34 +++++++++++++++++++----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/component/vcf-toolbar-layout.ts b/src/component/vcf-toolbar-layout.ts
index b3ab214..d8da8a5 100644
--- a/src/component/vcf-toolbar-layout.ts
+++ b/src/component/vcf-toolbar-layout.ts
@@ -65,10 +65,6 @@ export class VcfToolbarLayout extends ResizeMixin(
       ::slotted([slot="overflow-button"].visible) {
         display: initial;
       }
-
-      :host([reverse-collapse]) ::slotted([slot='overflow-button']) {
-        order: -1;
-      }
     `;
   }
 
@@ -126,6 +122,7 @@ export class VcfToolbarLayout extends ResizeMixin(
         margin: var(--lumo-space-xs);
       }
 
+      ${tag} > hr:first-child,
       ${tag} > hr:last-child {
         visibility: hidden;
         margin: 0;
@@ -133,7 +130,8 @@ export class VcfToolbarLayout extends ResizeMixin(
         width: 0;
       }
 
-      ${tag} > .overflow-container > hr:first-child {
+      ${tag} > .overflow-container > hr:first-child,
+      ${tag} > .overflow-container > hr:last-child {
         display: none;
       }
 
@@ -150,12 +148,7 @@ export class VcfToolbarLayout extends ResizeMixin(
         align-items: center;
       }
 
-      /* vaadin component styles */
-
-      ${tag} > :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(prefix),
-      ${tag} > :not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(suffix) {
-        color: var(--overflow-container-prefix-suffix-color);
-      }
+      /* Vaadin component styles */
 
       ${tag} > .overflow-container > [has-label]:first-child {
         padding-top: 0;
@@ -164,10 +157,29 @@ export class VcfToolbarLayout extends ResizeMixin(
       ${tag}${lumo} > .overflow-container > [has-label] {
         padding-top: var(--lumo-space-s);
       }
+      
+      ${tag} > .overflow-container > vaadin-button,
+      ${tag} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button,
+      ${tag} > .overflow-container > *::part(input-field) {
+        outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
+      }
+      
+      ${tag} > .overflow-container > vaadin-button:not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(prefix),
+      ${tag} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button:not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(prefix),
+      ${tag} > .overflow-container > vaadin-button:not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(suffix),
+      ${tag} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button:not([theme~="error"]):not([theme~="success"]):not([theme~="warning"])::part(suffix) {
+        color: var(--overflow-container-prefix-suffix-color);
+      }
 
       ${tag} > vaadin-menu-bar > vaadin-menu-bar-button {
         width: unset !important;
       }
+      
+      ${tag} > .overflow-container vaadin-menu-bar::part(container) {
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+      }
 
       ${tag} > .overflow-container > vaadin-menu-bar > vaadin-menu-bar-button > vaadin-menu-bar-item {
         justify-content: left;