fix: keep button radius and allow more space for focus outline (#10162)

jouni · web-flow · commit dda2632c4e19 · 2025-09-12T15:38:36.000+03:00
diff --git a/packages/menu-bar/src/styles/vaadin-menu-bar-base-styles.js b/packages/menu-bar/src/styles/vaadin-menu-bar-base-styles.js
@@ -17,33 +17,34 @@ export const menuBarStyles = css`
   [part='container'] {
     display: flex;
     flex-wrap: nowrap;
-    margin: calc((var(--vaadin-focus-ring-width) + 1px) * -1);
+    margin: calc((var(--vaadin-focus-ring-width) + 2px) * -1);
     overflow: hidden;
-    padding: calc(var(--vaadin-focus-ring-width) + 1px);
+    padding: calc(var(--vaadin-focus-ring-width) + 2px);
     position: relative;
     width: 100%;
     --_gap: var(--vaadin-menu-bar-gap, 0px);
     --_bw: var(--vaadin-button-border-width, 1px);
     gap: var(--_gap);
     --_rad-button: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
-    --_rad: min(var(--_gap) * 1000, var(--_rad-button));
   }
 
   ::slotted(vaadin-menu-bar-button:not(:first-of-type)) {
     margin-inline-start: min(var(--_bw) * -1 + var(--_gap) * 1000, 0px);
   }
 
   ::slotted(vaadin-menu-bar-button) {
-    border-radius: var(--_rad);
+    border-radius: 0;
   }
 
   ::slotted([first-visible]),
-  :host([has-single-button]) ::slotted([slot='overflow']) {
+  :host([has-single-button]) ::slotted([slot='overflow']),
+  ::slotted(vaadin-menu-bar-button[theme~='tertiary']) {
     border-start-start-radius: var(--_rad-button);
     border-end-start-radius: var(--_rad-button);
   }
 
-  ::slotted(:is([last-visible], [slot='overflow'])) {
+  ::slotted(:is([last-visible], [slot='overflow'])),
+  ::slotted(vaadin-menu-bar-button[theme~='tertiary']) {
     border-start-end-radius: var(--_rad-button);
     border-end-end-radius: var(--_rad-button);
   }
