refactor: render breadcrumbs overflow button icon using mask-image

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

@@ -85,6 +85,7 @@ The overflow overlay's outer panel and its inner wrapper live on `<vaadin-breadc
 
 | CSS Custom Property | Default | Description |
 |---|---|---|
+| `--vaadin-breadcrumbs-overflow-icon` | `var(--_vaadin-icon-ellipsis)` | The mask-image icon used inside the overflow button. |
 | `--vaadin-breadcrumbs-separator` | `var(--_vaadin-icon-chevron-right)` | The mask-image icon used as the separator between items. Set on `<vaadin-breadcrumbs>` to change the separator for all items. |
 
 Internal behavior:
@@ -304,3 +305,7 @@ Two shadow slots with the overflow in shadow DOM between them: `<slot name="root
 **Q: Why does `i18n.moreItems` default to `'More items'` rather than an empty string?**
 
 The `aria-label` on the overflow button must always be present — screen readers announce the button as just "button" otherwise. Defaulting to an empty string leaves the application responsible for setting a meaningful label before the component is reachable to assistive tech, which is a setup step that's easy to miss. Providing `'More items'` as the default matches the convention for other Vaadin components with auto-generated control labels (Menu Bar, Combo Box clear button) and keeps the unlabeled state out of reach. Applications still localize via `i18n = { moreItems: '…' }` exactly as before.
+
+**Q: Why does the overflow button render its ellipsis icon via `mask-image` instead of the `…` character?**
+
+The `…` glyph depends on the rendered font and locale — some fonts render it as three full-width dots, others as a compact ellipsis, none of which line up visually with the chevron separator. The mask-image route uses the same SVG icon system as the separator, so both icons share size, color, and alignment rules. It also gives theme authors a single override hook (`--vaadin-breadcrumbs-overflow-icon`) parallel to the separator's, so swapping the ellipsis for a different pictogram is a one-line theme rule.

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

@@ -53,7 +53,12 @@ export const breadcrumbsStyles = css`
   }
 
   [part='overflow-button']::before {
-    content: '…';
+    content: '\\e2003' / '';
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background: currentColor;
+    mask: var(--vaadin-breadcrumbs-overflow-icon, var(--_vaadin-icon-ellipsis)) center / contain no-repeat;
   }
 
   [part='overflow-button']:focus-visible {
@@ -77,6 +82,7 @@ export const breadcrumbsStyles = css`
   }
 
   @media (forced-colors: active) {
+    [part='overflow-button']::before,
     [part='overflow']::after {
       background: CanvasText;
     }

packages/breadcrumbs/src/vaadin-breadcrumbs.d.ts

@@ -44,7 +44,10 @@ export interface BreadcrumbsI18n {
  *
  * The following custom CSS properties are available for styling:
  *
- * - `--vaadin-breadcrumbs-separator`
+ * Custom CSS property                      |
+ * :----------------------------------------|
+ * | `--vaadin-breadcrumbs-overflow-icon`   |
+ * | `--vaadin-breadcrumbs-separator`       |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */

packages/breadcrumbs/src/vaadin-breadcrumbs.js

@@ -52,7 +52,10 @@ const DEFAULT_I18N = {
  *
  * The following custom CSS properties are available for styling:
  *
- * - `--vaadin-breadcrumbs-separator`
+ * Custom CSS property                      |
+ * :----------------------------------------|
+ * | `--vaadin-breadcrumbs-overflow-icon`   |
+ * | `--vaadin-breadcrumbs-separator`       |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

packages/component-base/src/styles/style-props.js

@@ -88,6 +88,7 @@ addGlobalStyles(
         --_vaadin-icon-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>');
         --_vaadin-icon-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>');
         --_vaadin-icon-drag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M11 7c0 .82843-.6716 1.5-1.5 1.5C8.67157 8.5 8 7.82843 8 7s.67157-1.5 1.5-1.5c.8284 0 1.5.67157 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm5-10c0 .82843-.6716 1.5-1.5 1.5S13 7.82843 13 7s.6716-1.5 1.5-1.5S16 6.17157 16 7Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 12.8284 13 12s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 17.8284 13 17s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z" fill="currentColor"/></svg>');
+        --_vaadin-icon-ellipsis: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>');
         --_vaadin-icon-eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>');
         --_vaadin-icon-eye-slash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>');
         --_vaadin-icon-file: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');