@vaadin/date-time-picker 24.8.0-alpha9 → 25.0.0-alpha1

package/README.md

@@ -24,29 +24,6 @@ Once installed, import the component in your application:
 import '@vaadin/date-time-picker';
 ```
 
-## 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/date-time-picker/vaadin-date-time-picker.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/date-time-picker/theme/material/vaadin-date-time-picker.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/date-time-picker/theme/lumo/vaadin-date-time-picker.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/date-time-picker/src/vaadin-date-time-picker.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/date-time-picker",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,26 +31,23 @@
     "Vaadin",
     "vaadin-date-time-picker",
     "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.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/custom-field": "24.8.0-alpha9",
-    "@vaadin/date-picker": "24.8.0-alpha9",
-    "@vaadin/field-base": "24.8.0-alpha9",
-    "@vaadin/time-picker": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-alpha1",
+    "@vaadin/component-base": "25.0.0-alpha1",
+    "@vaadin/custom-field": "25.0.0-alpha1",
+    "@vaadin/date-picker": "25.0.0-alpha1",
+    "@vaadin/field-base": "25.0.0-alpha1",
+    "@vaadin/time-picker": "25.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -58,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

package/src/vaadin-date-time-picker-mixin.d.ts

@@ -6,7 +6,6 @@
 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 { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
 import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
@@ -36,8 +35,7 @@ export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {
  */
 export declare function DateTimePickerMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> &
-  Constructor<DateTimePickerMixinClass> &
+): Constructor<DateTimePickerMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &

package/src/vaadin-date-time-picker-mixin.js

@@ -305,6 +305,7 @@ export const DateTimePickerMixin = (superClass) =>
       // Default value for "max" property of vaadin-time-picker (for removing constraint)
       this.__defaultTimeMaxValue = '23:59:59.999';
 
+      this.__onGlobalClick = this.__onGlobalClick.bind(this);
       this.__changeEventHandler = this.__changeEventHandler.bind(this);
       this.__valueChangedEventHandler = this.__valueChangedEventHandler.bind(this);
       this.__openedChangedEventHandler = this.__openedChangedEventHandler.bind(this);
@@ -315,12 +316,38 @@ export const DateTimePickerMixin = (superClass) =>
       return [this.__datePicker, this.__timePicker];
     }
 
+    /** @private */
+    get __filledPickers() {
+      return this.__pickers.filter((picker) => picker.value || picker.__unparsableValue);
+    }
+
     /** @private */
     get __formattedValue() {
       const values = this.__pickers.map((picker) => picker.value);
       return values.every(Boolean) ? values.join('T') : '';
     }
 
+    /**
+     * Values:
+     * - ""
+     * - "fooT"
+     * - "Tbar"
+     * - "fooTbar"
+     * - "T12:00"
+     * - "fooT12:00"
+     * - "2024-01-01T"
+     * - "2024-01-01Tbar"
+     *
+     * @private
+     */
+    get __unparsableValue() {
+      if (this.__filledPickers.length > 0 && !this.__pickers.every((picker) => picker.value)) {
+        return this.__pickers.map((picker) => picker.value || picker.__unparsableValue).join('T');
+      }
+
+      return '';
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -347,12 +374,49 @@ export const DateTimePickerMixin = (superClass) =>
       this.ariaTarget = this;
     }
 
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      document.addEventListener('click', this.__onGlobalClick, true);
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      document.removeEventListener('click', this.__onGlobalClick, true);
+    }
+
     focus() {
       if (this.__datePicker) {
         this.__datePicker.focus();
       }
     }
 
+    /** @private */
+    __onGlobalClick(event) {
+      const isOpened = this.__datePicker.opened || this.__timePicker.opened;
+      if (!isOpened) {
+        return;
+      }
+
+      const isOutsideClick = event.composedPath().every((node) => {
+        return ![
+          this.__datePicker,
+          this.__datePicker.$.overlay,
+          this.__timePicker,
+          this.__timePicker.$.comboBox.$.overlay,
+        ].includes(node);
+      });
+
+      if (isOutsideClick) {
+        this.__outsideClickInProgress = true;
+
+        setTimeout(() => {
+          this.__outsideClickInProgress = false;
+        });
+      }
+    }
+
     /**
      * Override method inherited from `FocusMixin` to validate on blur.
      * @param {boolean} focused
@@ -365,7 +429,7 @@ export const DateTimePickerMixin = (superClass) =>
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
       if (!focused && document.hasFocus()) {
-        this._requestValidation();
+        this.__commitPendingValueChange();
       }
     }
 
@@ -379,12 +443,12 @@ export const DateTimePickerMixin = (superClass) =>
      */
     _shouldRemoveFocus(event) {
       const target = event.relatedTarget;
-      const overlayContent = this.__datePicker._overlayContent;
 
       if (
+        this.__datePicker.opened ||
+        this.__timePicker.opened ||
         this.__datePicker.contains(target) ||
-        this.__timePicker.contains(target) ||
-        (overlayContent && overlayContent.contains(target))
+        this.__timePicker.contains(target)
       ) {
         return false;
       }
@@ -408,22 +472,35 @@ export const DateTimePickerMixin = (superClass) =>
     __changeEventHandler(event) {
       event.stopPropagation();
 
-      if (this.__dispatchChangeForValue === this.value) {
-        this._requestValidation();
-        this.__dispatchChange();
+      const isAlreadyInvalid = this.invalid;
+      const filledPickers = this.__filledPickers;
+      if (filledPickers.length === 1 && filledPickers[0].checkValidity() && !isAlreadyInvalid) {
+        // Skip if (a) only one picker is filled, (b) its value is valid by itself, and (c) the user
+        // is still interacting with the field. This is to give the user a chance to finish the input
+        // before giving him feedback. However, if the field is already in the invalid state due to
+        // a previous error, proceed to committing the value to get the error message updated.
+        return;
+      }
+
+      if (this.__hasPendingValueChange) {
+        this.__commitPendingValueChange();
       }
-      this.__dispatchChangeForValue = undefined;
     }
 
     /** @private */
     __openedChangedEventHandler() {
       const opened = this.__datePicker.opened || this.__timePicker.opened;
       this.style.pointerEvents = opened ? 'auto' : '';
+
+      if (!opened && this.__outsideClickInProgress) {
+        this.__commitPendingValueChange();
+      }
     }
 
     /** @private */
     __addInputListeners(node) {
       node.addEventListener('change', this.__changeEventHandler);
+      node.addEventListener('unparsable-change', this.__changeEventHandler);
       node.addEventListener('value-changed', this.__valueChangedEventHandler);
       node.addEventListener('opened-changed', this.__openedChangedEventHandler);
     }
@@ -431,6 +508,7 @@ export const DateTimePickerMixin = (superClass) =>
     /** @private */
     __removeInputListeners(node) {
       node.removeEventListener('change', this.__changeEventHandler);
+      node.removeEventListener('unparsable-change', this.__changeEventHandler);
       node.removeEventListener('value-changed', this.__valueChangedEventHandler);
       node.removeEventListener('opened-changed', this.__openedChangedEventHandler);
     }
@@ -724,8 +802,27 @@ export const DateTimePickerMixin = (superClass) =>
      */
     checkValidity() {
       const hasInvalidPickers = this.__pickers.some((picker) => !picker.checkValidity());
+      const hasOnlyOneFilledPicker = this.__filledPickers.length === 1;
       const hasEmptyRequiredPickers = this.required && this.__pickers.some((picker) => !picker.value);
-      return !hasInvalidPickers && !hasEmptyRequiredPickers;
+      return !hasInvalidPickers && !hasEmptyRequiredPickers && !hasOnlyOneFilledPicker;
+    }
+
+    /** @private */
+    __commitPendingValueChange() {
+      this._requestValidation();
+      if (this.__committedValue !== this.value) {
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      } else if (this.__committedUnparsableValue !== this.__unparsableValue) {
+        this.dispatchEvent(new CustomEvent('unparsable-change'));
+      }
+
+      this.__committedValue = this.value;
+      this.__committedUnparsableValue = this.__unparsableValue;
+    }
+
+    /** @private */
+    get __hasPendingValueChange() {
+      return this.__committedValue !== this.value || this.__committedUnparsableValue !== this.__unparsableValue;
     }
 
     /**
@@ -769,8 +866,9 @@ export const DateTimePickerMixin = (superClass) =>
     __valueChanged(value, oldValue) {
       this.__handleDateTimeChange('value', '__selectedDateTime', value, oldValue);
 
-      if (oldValue !== undefined) {
-        this.__dispatchChangeForValue = value;
+      if (!this.__keepCommittedValue) {
+        this.__committedValue = value;
+        this.__committedUnparsableValue = '';
       }
 
       this.toggleAttribute('has-value', !!value);
@@ -839,8 +937,12 @@ export const DateTimePickerMixin = (superClass) =>
       }
 
       this.__ignoreInputValueChange = true;
+      this.__keepCommittedValue = true;
+
       this.__updateTimePickerMinMax();
       this.value = this.__formattedValue;
+
+      this.__keepCommittedValue = false;
       this.__ignoreInputValueChange = false;
     }
 

package/src/vaadin-date-time-picker.d.ts

@@ -93,7 +93,30 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * ### Change events
+ *
+ * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
+ * the component can fire either a `change` event or an `unparsable-change` event:
+ *
+ * Value change             | Event
+ * :------------------------|:------------------
+ * empty => parsable        | change
+ * empty => unparsable      | unparsable-change
+ * parsable => empty        | change
+ * parsable => parsable     | change
+ * parsable => unparsable   | change
+ * unparsable => empty      | unparsable-change
+ * unparsable => parsable   | change
+ * unparsable => unparsable | unparsable-change
+ * incomplete => empty      | unparsable-change
+ * incomplete => parsable   | change
+ * incomplete => unparsable | unparsable-change
+ * empty => incomplete      | unparsable-change
+ * parsable => incomplete   | change
+ * unparsable => incomplete | unparsable-change
+ *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} unparsable-change - Fired when the user commits an unparsable or incomplete value change and there is no change event.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.

package/src/vaadin-date-time-picker.js

@@ -5,15 +5,14 @@
  */
 import '@vaadin/date-picker/src/vaadin-date-picker.js';
 import '@vaadin/time-picker/src/vaadin-time-picker.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
 
-registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-date-time-picker' });
-
 /**
  * `<vaadin-date-time-picker>` is a Web Component providing a date time selection field.
  *
@@ -64,7 +63,30 @@ registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * ### Change events
+ *
+ * Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
+ * the component can fire either a `change` event or an `unparsable-change` event:
+ *
+ * Value change             | Event
+ * :------------------------|:------------------
+ * empty => parsable        | change
+ * empty => unparsable      | unparsable-change
+ * parsable => empty        | change
+ * parsable => parsable     | change
+ * parsable => unparsable   | change
+ * unparsable => empty      | unparsable-change
+ * unparsable => parsable   | change
+ * unparsable => unparsable | unparsable-change
+ * incomplete => empty      | unparsable-change
+ * incomplete => parsable   | change
+ * incomplete => unparsable | unparsable-change
+ * empty => incomplete      | unparsable-change
+ * parsable => incomplete   | change
+ * unparsable => incomplete | unparsable-change
+ *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} unparsable-change - Fired when the user commits an unparsable or incomplete value change and there is no change event.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
@@ -75,10 +97,15 @@ registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-
  * @mixes ThemableMixin
  * @mixes DateTimePickerMixin
  */
-class DateTimePicker extends DateTimePickerMixin(ThemableMixin(ElementMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
+class DateTimePicker extends DateTimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-date-time-picker';
+  }
+
+  static get styles() {
+    return [
+      inputFieldShared,
+      css`
         .vaadin-date-time-picker-container {
           --vaadin-field-default-width: auto;
         }
@@ -97,10 +124,15 @@ class DateTimePicker extends DateTimePickerMixin(ThemableMixin(ElementMixin(Poly
           min-width: 0;
           flex: 1 1.65 auto;
         }
-      </style>
+      `,
+    ];
+  }
 
+  /** @protected */
+  render() {
+    return html`
       <div class="vaadin-date-time-picker-container">
-        <div part="label" on-click="focus">
+        <div part="label" @click="${this.focus}">
           <slot name="label"></slot>
           <span part="required-indicator" aria-hidden="true"></span>
         </div>
@@ -122,10 +154,6 @@ class DateTimePicker extends DateTimePickerMixin(ThemableMixin(ElementMixin(Poly
       <slot name="tooltip"></slot>
     `;
   }
-
-  static get is() {
-    return 'vaadin-date-time-picker';
-  }
 }
 
 defineCustomElement(DateTimePicker);

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-date-time-picker",
-          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description                               | Part name\n--------------------|-------------------------------------------|------------\n`disabled`          | Set when the element is disabled          | :host\n`focused`           | Set when the element is focused           | :host\n`focus-ring`        | Set when the element is keyboard focused  | :host\n`readonly`          | Set when the element is readonly          | :host\n`invalid`           | Set when the element is invalid           | :host\n`has-label`         | Set when the element has a label          | :host\n`has-value`         | Set when the element has a value          | :host\n`has-helper`        | Set when the element has helper text      | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description                               | Part name\n--------------------|-------------------------------------------|------------\n`disabled`          | Set when the element is disabled          | :host\n`focused`           | Set when the element is focused           | :host\n`focus-ring`        | Set when the element is keyboard focused  | :host\n`readonly`          | Set when the element is readonly          | :host\n`invalid`           | Set when the element is invalid           | :host\n`has-label`         | Set when the element has a label          | :host\n`has-value`         | Set when the element has a value          | :host\n`has-helper`        | Set when the element has helper text      | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change\nincomplete => empty      | unparsable-change\nincomplete => parsable   | change\nincomplete => unparsable | unparsable-change\nempty => incomplete      | unparsable-change\nparsable => incomplete   | change\nunparsable => incomplete | unparsable-change",
           "attributes": [
             {
               "name": "disabled",
@@ -235,7 +235,7 @@
             },
             {
               "name": "overlay-class",
-              "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker#property-overlayClass)",
+              "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
               "value": {
                 "type": [
                   "string",
@@ -483,7 +483,7 @@
               },
               {
                 "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker).",
+                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-time-picker).",
                 "value": {
                   "type": [
                     "DateTimePickerI18n"
@@ -492,7 +492,7 @@
               },
               {
                 "name": "overlayClass",
-                "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker#property-overlayClass)",
+                "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-date-time-picker",
-          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description                               | Part name\n--------------------|-------------------------------------------|------------\n`disabled`          | Set when the element is disabled          | :host\n`focused`           | Set when the element is focused           | :host\n`focus-ring`        | Set when the element is keyboard focused  | :host\n`readonly`          | Set when the element is readonly          | :host\n`invalid`           | Set when the element is invalid           | :host\n`has-label`         | Set when the element has a label          | :host\n`has-value`         | Set when the element has a value          | :host\n`has-helper`        | Set when the element has helper text      | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|----------------\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute           | Description                               | Part name\n--------------------|-------------------------------------------|------------\n`disabled`          | Set when the element is disabled          | :host\n`focused`           | Set when the element is focused           | :host\n`focus-ring`        | Set when the element is keyboard focused  | :host\n`readonly`          | Set when the element is readonly          | :host\n`invalid`           | Set when the element is invalid           | :host\n`has-label`         | Set when the element has a label          | :host\n`has-value`         | Set when the element has a value          | :host\n`has-helper`        | Set when the element has helper text      | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change             | Event\n:------------------------|:------------------\nempty => parsable        | change\nempty => unparsable      | unparsable-change\nparsable => empty        | change\nparsable => parsable     | change\nparsable => unparsable   | change\nunparsable => empty      | unparsable-change\nunparsable => parsable   | change\nunparsable => unparsable | unparsable-change\nincomplete => empty      | unparsable-change\nincomplete => parsable   | change\nincomplete => unparsable | unparsable-change\nempty => incomplete      | unparsable-change\nparsable => incomplete   | change\nunparsable => incomplete | unparsable-change",
           "extension": true,
           "attributes": [
             {
@@ -168,14 +168,14 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker).",
+              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-time-picker).",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".overlayClass",
-              "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-time-picker#property-overlayClass)",
+              "description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-time-picker#property-overlayClass)",
               "value": {
                 "kind": "expression"
               }

package/src/vaadin-lit-date-time-picker.d.ts

@@ -1 +0,0 @@
-export * from './vaadin-date-time-picker.js';

package/src/vaadin-lit-date-time-picker.js

@@ -1,86 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/date-picker/src/vaadin-lit-date-picker.js';
-import '@vaadin/time-picker/src/vaadin-lit-time-picker.js';
-import { css, html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-date-time-picker>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class DateTimePicker extends DateTimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-date-time-picker';
-  }
-
-  static get styles() {
-    return [
-      inputFieldShared,
-      css`
-        .vaadin-date-time-picker-container {
-          --vaadin-field-default-width: auto;
-        }
-
-        .slots {
-          display: flex;
-          --vaadin-field-default-width: 12em;
-        }
-
-        .slots ::slotted([slot='date-picker']) {
-          min-width: 0;
-          flex: 1 1 auto;
-        }
-
-        .slots ::slotted([slot='time-picker']) {
-          min-width: 0;
-          flex: 1 1.65 auto;
-        }
-      `,
-    ];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div class="vaadin-date-time-picker-container">
-        <div part="label" @click="${this.focus}">
-          <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true"></span>
-        </div>
-
-        <div class="slots">
-          <slot name="date-picker" id="dateSlot"></slot>
-          <slot name="time-picker" id="timeSlot"></slot>
-        </div>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-
-      <slot name="tooltip"></slot>
-    `;
-  }
-}
-
-defineCustomElement(DateTimePicker);
-
-export { DateTimePicker };

package/theme/lumo/vaadin-lit-date-time-picker.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/date-picker/theme/lumo/vaadin-lit-date-picker.js';
-import '@vaadin/time-picker/theme/lumo/vaadin-lit-time-picker.js';
-import './vaadin-date-time-picker-styles.js';
-import '../../src/vaadin-lit-date-time-picker.js';

package/theme/lumo/vaadin-lit-date-time-picker.js

@@ -1,4 +0,0 @@
-import '@vaadin/date-picker/theme/lumo/vaadin-lit-date-picker.js';
-import '@vaadin/time-picker/theme/lumo/vaadin-lit-time-picker.js';
-import './vaadin-date-time-picker-styles.js';
-import '../../src/vaadin-lit-date-time-picker.js';

package/theme/material/vaadin-date-time-picker-styles.d.ts

@@ -1 +0,0 @@
-export {};

package/theme/material/vaadin-date-time-picker-styles.js

@@ -1,8 +0,0 @@
-import { customField } from '@vaadin/custom-field/theme/material/vaadin-custom-field-styles.js';
-import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
-import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles('vaadin-date-time-picker', [requiredField, helper, customField], {
-  moduleId: 'material-date-time-picker',
-});

package/theme/material/vaadin-date-time-picker.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/date-picker/theme/material/vaadin-date-picker.js';
-import '@vaadin/time-picker/theme/material/vaadin-time-picker.js';
-import './vaadin-date-time-picker-styles.js';
-import '../../src/vaadin-date-time-picker.js';

package/theme/material/vaadin-date-time-picker.js

@@ -1,4 +0,0 @@
-import '@vaadin/date-picker/theme/material/vaadin-date-picker.js';
-import '@vaadin/time-picker/theme/material/vaadin-time-picker.js';
-import './vaadin-date-time-picker-styles.js';
-import '../../src/vaadin-date-time-picker.js';

package/theme/material/vaadin-lit-date-time-picker.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/date-picker/theme/material/vaadin-lit-date-picker.js';
-import '@vaadin/time-picker/theme/material/vaadin-lit-time-picker.js';
-import './vaadin-date-time-picker-styles.js';
-import '../../src/vaadin-lit-date-time-picker.js';

package/theme/material/vaadin-lit-date-time-picker.js

@@ -1,4 +0,0 @@
-import '@vaadin/date-picker/theme/material/vaadin-lit-date-picker.js';
-import '@vaadin/time-picker/theme/material/vaadin-lit-time-picker.js';
-import './vaadin-date-time-picker-styles.js';
-import '../../src/vaadin-lit-date-time-picker.js';

package/vaadin-lit-date-time-picker.d.ts

@@ -1 +0,0 @@
-export * from './src/vaadin-date-time-picker.js';

package/vaadin-lit-date-time-picker.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-date-time-picker.js';
-export * from './src/vaadin-lit-date-time-picker.js';