refactor!: Base combo box styles

packages/combo-box/src/vaadin-lit-combo-box-item.js

@@ -3,10 +3,11 @@
  * Copyright (c) 2015 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { itemStyles } from '@vaadin/item/src/vaadin-item-styles.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
 
@@ -25,41 +26,7 @@ export class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(Polyl
   }
 
   static get styles() {
-    return css`
-      :host {
-        align-items: center;
-        border-radius: var(--vaadin-item-border-radius, var(--_vaadin-radius-m));
-        box-sizing: border-box;
-        cursor: pointer;
-        display: flex;
-        gap: var(--vaadin-item-gap, 0 var(--_vaadin-gap-container-inline));
-        height: var(--vaadin-item-height, auto);
-        padding: var(--vaadin-item-padding, var(--_vaadin-padding-container));
-      }
-
-      :host([focused]) {
-        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
-        outline-offset: 1px;
-      }
-
-      :host([hidden]) {
-        display: none;
-      }
-
-      [part='checkmark'] {
-        height: var(--vaadin-icon-size, 1lh);
-        mask-image: var(--_vaadin-icon-checkmark);
-        width: var(--vaadin-icon-size, 1lh);
-      }
-
-      :host([selected]) [part='checkmark'] {
-        background: var(--_vaadin-color-subtle);
-      }
-
-      [part='content'] {
-        flex: 1;
-      }
-    `;
+    return itemStyles;
   }
 
   /** @protected */

packages/combo-box/src/vaadin-lit-combo-box-overlay.js

@@ -27,7 +27,8 @@ const comboBoxOverlayStyles = css`
     box-sizing: border-box;
     display: none;
     height: var(--vaadin-icon-size, 1lh);
-    inset: 6px 8px auto auto;
+    inset-block-start: calc(var(--vaadin-item-overlay-padding, 4px) + 6px);
+    inset-inline-end: 8px;
     pointer-events: none;
     position: absolute;
     width: var(--vaadin-icon-size, 1lh);
@@ -44,7 +45,7 @@ const comboBoxOverlayStyles = css`
   }
 
   :host([loading]) [part~='content'] {
-    min-height: calc(var(--vaadin-icon-size, 1lh) + 12px);
+    min-height: calc(var(--vaadin-icon-size, 1lh) + 12px + var(--vaadin-item-overlay-padding, 4px) * 2);
   }
 
   @keyframes spin {

packages/combo-box/src/vaadin-lit-combo-box-scroller.js

@@ -23,24 +23,18 @@ export class ComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElem
   static get styles() {
     return css`
       :host {
+        --vaadin-item-checkmark-display: block;
+        /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+        box-shadow: 0 0 0 white;
         display: block;
         min-height: 1px;
         overflow: auto;
-
         /* Fixes item background from getting on top of scrollbars on Safari */
         transform: translate3d(0, 0, 0);
-
-        /* Enable momentum scrolling on iOS */
-        -webkit-overflow-scrolling: touch;
-
-        /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-        box-shadow: 0 0 0 white;
       }
 
       #selector {
-        border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
-        border-style: var(--_vaadin-combo-box-items-container-border-style, solid);
-        border-width: var(--_vaadin-combo-box-items-container-border-width, 4px);
+        border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
         position: relative;
       }
     `;

packages/item/src/vaadin-item-styles.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const itemStyles = css`
+  @layer base {
+    :host {
+      align-items: center;
+      border-radius: var(--vaadin-item-border-radius, var(--_vaadin-radius-m));
+      box-sizing: border-box;
+      cursor: pointer;
+      display: flex;
+      gap: var(--vaadin-item-gap, 0 var(--_vaadin-gap-container-inline));
+      height: var(--vaadin-item-height, auto);
+      padding: var(--vaadin-item-padding, var(--_vaadin-padding-container));
+    }
+
+    :host([focus-ring]) {
+      outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+      outline-offset: calc(var(--vaadin-focus-ring-width) / -1);
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+
+    [part='checkmark'] {
+      display: var(--vaadin-item-checkmark-display, none);
+      height: var(--vaadin-icon-size, 1lh);
+      mask-image: var(--_vaadin-icon-checkmark);
+      width: var(--vaadin-icon-size, 1lh);
+    }
+
+    :host([selected]) [part='checkmark'] {
+      background: var(--_vaadin-color-subtle);
+    }
+
+    [part='content'] {
+      flex: 1;
+    }
+  }
+`;

packages/vaadin-lumo-styles/style.js

@@ -115,6 +115,7 @@ const globals = css`
     --vaadin-item-border-radius: var(--lumo-border-radius-m);
     --vaadin-item-gap: 0;
     --vaadin-item-height: auto;
+    --vaadin-item-overlay-padding: var(--lumo-space-xs);
     --vaadin-item-padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em
       var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
   }