@vaadin/combo-box 25.0.0-alpha2 → 25.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -38,20 +38,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/field-base": "25.0.0-alpha2",
-    "@vaadin/input-container": "25.0.0-alpha2",
-    "@vaadin/item": "25.0.0-alpha2",
-    "@vaadin/lit-renderer": "25.0.0-alpha2",
-    "@vaadin/overlay": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha4",
+    "@vaadin/component-base": "25.0.0-alpha4",
+    "@vaadin/field-base": "25.0.0-alpha4",
+    "@vaadin/input-container": "25.0.0-alpha4",
+    "@vaadin/item": "25.0.0-alpha4",
+    "@vaadin/lit-renderer": "25.0.0-alpha4",
+    "@vaadin/overlay": "25.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha4",
+    "@vaadin/test-runner-commands": "25.0.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
 }

package/src/styles/vaadin-combo-box-base-styles.js

@@ -7,11 +7,13 @@ import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const comboBoxStyles = css`
-  :host([opened]) {
-    pointer-events: auto;
-  }
+  @layer base {
+    :host([opened]) {
+      pointer-events: auto;
+    }
 
-  [part='toggle-button']::before {
-    mask-image: var(--_vaadin-icon-chevron-down);
+    [part='toggle-button']::before {
+      mask-image: var(--_vaadin-icon-chevron-down);
+    }
   }
 `;

package/src/styles/vaadin-combo-box-overlay-base-styles.js

@@ -7,57 +7,59 @@ import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const comboBoxOverlayStyles = css`
-  :host {
-    --vaadin-item-checkmark-display: block;
-  }
+  @layer base {
+    :host {
+      --vaadin-item-checkmark-display: block;
+    }
 
-  [part='overlay'] {
-    position: relative;
-    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
-  }
+    [part='overlay'] {
+      position: relative;
+      width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+    }
 
-  [part='loader'] {
-    animation: spin 1s linear infinite;
-    border: 2px solid;
-    --_spinner-color: var(--vaadin-combo-box-spinner-color, var(--_vaadin-color-strong));
-    border-color: var(--_spinner-color) var(--_spinner-color) hsl(from var(--_spinner-color) h s l / 0.2)
-      hsl(from var(--_spinner-color) h s l / 0.2);
-    border-radius: var(--_vaadin-radius-full);
-    box-sizing: border-box;
-    display: none;
-    height: var(--vaadin-icon-size, 1lh);
-    inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
-    inset-block-end: auto;
-    inset-inline-start: auto;
-    pointer-events: none;
-    position: absolute;
-    width: var(--vaadin-icon-size, 1lh);
-  }
+    [part='loader'] {
+      animation: spin 1s linear infinite;
+      border: 2px solid;
+      --_spinner-color: var(--vaadin-combo-box-spinner-color, var(--_vaadin-color-strong));
+      border-color: var(--_spinner-color) var(--_spinner-color) hsl(from var(--_spinner-color) h s l / 0.2)
+        hsl(from var(--_spinner-color) h s l / 0.2);
+      border-radius: var(--_vaadin-radius-full);
+      box-sizing: border-box;
+      display: none;
+      height: var(--vaadin-icon-size, 1lh);
+      inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
+      inset-block-end: auto;
+      inset-inline-start: auto;
+      pointer-events: none;
+      position: absolute;
+      width: var(--vaadin-icon-size, 1lh);
+    }
 
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
 
-  :host([loading]) [part='loader'] {
-    display: block;
-  }
+    :host([loading]) [part='loader'] {
+      display: block;
+    }
 
-  :host([loading]) [part='content'] {
-    --_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
-  }
+    :host([loading]) [part='content'] {
+      --_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
+    }
 
-  @keyframes spin {
-    to {
-      rotate: 1turn;
+    @keyframes spin {
+      to {
+        rotate: 1turn;
+      }
     }
-  }
 
-  @media (forced-colors: active) {
-    [part='loader'] {
-      forced-color-adjust: none;
-      --vaadin-combo-box-spinner-color: CanvasText;
+    @media (forced-colors: active) {
+      [part='loader'] {
+        forced-color-adjust: none;
+        --vaadin-combo-box-spinner-color: CanvasText;
+      }
     }
   }
 `;

package/src/styles/vaadin-combo-box-scroller-base-styles.js

@@ -6,24 +6,26 @@
 import { css } from 'lit';
 
 export const comboBoxScrollerStyles = css`
-  :host {
-    /* 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);
-  }
+  @layer base {
+    :host {
+      /* 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);
+    }
 
-  #selector {
-    border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
-    position: relative;
-    forced-color-adjust: none;
-    min-height: var(--_items-min-height, auto);
-  }
+    #selector {
+      border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
+      position: relative;
+      forced-color-adjust: none;
+      min-height: var(--_items-min-height, auto);
+    }
 
-  #selector > * {
-    forced-color-adjust: auto;
+    #selector > * {
+      forced-color-adjust: auto;
+    }
   }
 `;

package/src/vaadin-combo-box-base-mixin.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
+import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+
+export declare function ComboBoxBaseMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ComboBoxBaseMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<OverlayClassMixinClass> &
+  Constructor<ValidateMixinClass> &
+  T;
+
+export declare class ComboBoxBaseMixinClass {
+  /**
+   * True if the dropdown is open, false otherwise.
+   */
+  opened: boolean;
+
+  /**
+   * Set true to prevent the overlay from opening automatically.
+   * @attr {boolean} auto-open-disabled
+   */
+  autoOpenDisabled: boolean | null | undefined;
+
+  /**
+   * When present, it specifies that the field is read-only.
+   */
+  readonly: boolean;
+
+  /**
+   * Tag name prefix used by scroller and items.
+   */
+  protected readonly _tagNamePrefix: string;
+
+  /**
+   * Opens the dropdown list.
+   */
+  open(): void;
+
+  /**
+   * Closes the dropdown list.
+   */
+  close(): void;
+}