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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -22,9 +22,6 @@
     "lit.d.ts",
     "lit.js",
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -38,26 +35,26 @@
   ],
   "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-alpha21",
+    "@vaadin/component-base": "25.0.0-alpha21",
+    "@vaadin/field-base": "25.0.0-alpha21",
+    "@vaadin/input-container": "25.0.0-alpha21",
+    "@vaadin/item": "25.0.0-alpha21",
+    "@vaadin/lit-renderer": "25.0.0-alpha21",
+    "@vaadin/overlay": "25.0.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
     "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-alpha21",
+    "@vaadin/test-runner-commands": "25.0.0-alpha21",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
 }

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2015 - 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 '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const comboBoxStyles = css`
@@ -11,7 +11,7 @@ export const comboBoxStyles = css`
     pointer-events: auto;
   }
 
-  [part='toggle-button']::before {
+  [part~='toggle-button']::before {
     mask-image: var(--_vaadin-icon-chevron-down);
   }
 `;

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

@@ -3,61 +3,44 @@
  * Copyright (c) 2015 - 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 '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { loaderStyles } from '@vaadin/component-base/src/styles/loader-styles.js';
 
-export const comboBoxOverlayStyles = css`
-  :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='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);
-  }
+export const comboBoxOverlayStyles = [
+  loaderStyles,
+  css`
+    :host {
+      --vaadin-item-checkmark-display: block;
+    }
 
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
+    [part='overlay'] {
+      position: relative;
+      width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+    }
 
-  :host([loading]) [part='loader'] {
-    display: block;
-  }
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
 
-  :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;
+    @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;
+      position: absolute;
+      inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
+      inset-block-end: auto;
+      inset-inline-start: auto;
     }
-  }
-`;
+  `,
+];

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

@@ -0,0 +1,54 @@
+/**
+ * @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 { 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<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;
+}