refactor: update breadcrumbs item padding, do not clip overflow (#11883)

Author: web-padawan

packages/breadcrumbs/spec/web-component-spec.md

@@ -9,6 +9,8 @@ import { css } from 'lit';
 export const breadcrumbsStyles = css`
   :host {
     display: block;
+    width: 100%;
+    min-width: 0;
     color: var(--vaadin-text-color);
   }
 
@@ -22,9 +24,7 @@ export const breadcrumbsStyles = css`
     align-items: center;
     gap: var(--vaadin-gap-xs);
     min-width: 0;
-    overflow: hidden;
-    /* Room for items' focus outline, otherwise clipped by overflow: hidden. */
-    padding: var(--vaadin-focus-ring-width);
+    max-width: 100%;
   }
 
   [part='overflow'] {
@@ -42,8 +42,11 @@ export const breadcrumbsStyles = css`
     background: transparent;
     color: inherit;
     border: none;
-    padding: 0;
-    margin: 0;
+    border-radius: var(--vaadin-radius-m);
+    --_padding: var(--vaadin-padding-block-container);
+    /* Ensure minimum click target (WCAG) */
+    padding: max(var(--_padding), (24px - 1lh) / 2);
+    margin: min(var(--_padding), (24px - 1lh) / -2);
     font: inherit;
     cursor: var(--vaadin-clickable-cursor);
     line-height: 1;
@@ -62,7 +65,6 @@ export const breadcrumbsStyles = css`
   }
 
   [part='overflow-button']:focus-visible {
-    border-radius: var(--vaadin-radius-s);
     outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
   }
 

packages/breadcrumbs/src/styles/vaadin-breadcrumbs-base-styles.js

@@ -25,10 +25,23 @@ export const breadcrumbsItemStyles = css`
     color: var(--vaadin-text-color);
   }
 
+  [part='link'],
+  [part='nolink'] {
+    border-radius: var(--vaadin-radius-m);
+    padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
+    flex: 1;
+  }
+
+  :host(:not([slot='overlay'])) :is([part='link'], [part='nolink']) {
+    margin-inline: calc(var(--vaadin-padding-inline-container) * -1);
+  }
+
+  [part='link'] {
+    outline: none;
+  }
+
   [part='link']:focus-visible {
-    border-radius: var(--vaadin-radius-s);
     outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
-    outline-offset: 0;
   }
 
   :host::after {
@@ -54,19 +67,12 @@ export const breadcrumbsItemStyles = css`
     display: flex;
   }
 
-  :host([slot='overlay']) [part='link'],
-  :host([slot='overlay']) [part='nolink'] {
-    flex: 1;
-    padding: var(--vaadin-item-overlay-padding, 4px var(--vaadin-padding-inline-container));
-    border-radius: var(--vaadin-radius-m);
-  }
-
   :host([slot='overlay']:not([disabled])) [part='link'] {
     color: var(--vaadin-text-color);
   }
 
-  :host([slot='overlay']) [part='link']:focus-visible {
-    border-radius: var(--vaadin-radius-m);
+  :host([slot='overlay'])::after {
+    display: none;
   }
 
   @media (any-hover: hover) {
@@ -75,10 +81,6 @@ export const breadcrumbsItemStyles = css`
     }
   }
 
-  :host([slot='overlay'])::after {
-    display: none;
-  }
-
   @media (forced-colors: active) {
     :host::after {
       background: CanvasText;