@vaadin/combo-box 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -39,29 +39,6 @@ Once installed, import the component in your application:
 import '@vaadin/combo-box';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/combo-box/vaadin-combo-box.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/combo-box/theme/material/vaadin-combo-box.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/combo-box/theme/lumo/vaadin-combo-box.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/combo-box/src/vaadin-combo-box.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -22,6 +22,8 @@
     "lit.d.ts",
     "lit.js",
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -32,34 +34,30 @@
     "Vaadin",
     "combo-box",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.8.4",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/field-base": "~24.8.4",
-    "@vaadin/input-container": "~24.8.4",
-    "@vaadin/item": "~24.8.4",
-    "@vaadin/lit-renderer": "~24.8.4",
-    "@vaadin/overlay": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-material-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/field-base": "25.0.0-alpha10",
+    "@vaadin/input-container": "25.0.0-alpha10",
+    "@vaadin/item": "25.0.0-alpha10",
+    "@vaadin/lit-renderer": "25.0.0-alpha10",
+    "@vaadin/overlay": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
-    "@vaadin/text-field": "~24.8.4",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

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

@@ -0,0 +1,8 @@
+/**
+ * @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 { CSSResult } from 'lit';
+
+export const comboBoxStyles: CSSResult;

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * 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 { css } from 'lit';
+
+export const comboBoxStyles = css`
+  :host([opened]) {
+    pointer-events: auto;
+  }
+
+  [part='toggle-button']::before {
+    mask-image: var(--_vaadin-icon-chevron-down);
+  }
+`;

package/src/styles/vaadin-combo-box-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @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 { CSSResult } from 'lit';
+
+export const comboBoxStyles: CSSResult;

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const comboBoxStyles = css`
+  :host([opened]) {
+    pointer-events: auto;
+  }
+`;

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

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * 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 { css } from 'lit';
+import { loaderStyles } from '@vaadin/component-base/src/loader-styles.js';
+
+export const comboBoxOverlayStyles = [
+  loaderStyles,
+  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='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    :host([loading]) [part='content'] {
+      --_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
+    }
+
+    @media (forced-colors: active) {
+      [part='loader'] {
+        forced-color-adjust: none;
+        --vaadin-combo-box-spinner-color: CanvasText;
+      }
+    }
+
+    [part='loader'] {
+      position: absolute;
+      inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
+      inset-block-end: auto;
+      inset-inline-start: auto;
+    }
+  `,
+];

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const comboBoxOverlayStyles = css`
+  #overlay {
+    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+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);
+  }
+
+  #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;
+  }
+`;

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const comboBoxScrollerStyles = css`
+  :host {
+    display: block;
+    min-height: 1px;
+    overflow: auto;
+
+    /* Fixes item background from getting on top of scrollbars on Safari */
+    transform: translate3d(0, 0, 0);
+
+    /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+    box-shadow: 0 0 0 white;
+  }
+
+  #selector {
+    border-width: var(--_vaadin-combo-box-items-container-border-width);
+    border-style: var(--_vaadin-combo-box-items-container-border-style);
+    border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
+    position: relative;
+  }
+`;

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;
+}