@vaadin/date-time-picker 24.0.0-alpha1 → 24.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-time-picker",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -36,14 +36,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/custom-field": "24.0.0-alpha1",
-    "@vaadin/date-picker": "24.0.0-alpha1",
-    "@vaadin/field-base": "24.0.0-alpha1",
-    "@vaadin/time-picker": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/custom-field": "24.0.0-alpha11",
+    "@vaadin/date-picker": "24.0.0-alpha11",
+    "@vaadin/field-base": "24.0.0-alpha11",
+    "@vaadin/time-picker": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DatePicker } from '@vaadin/date-picker/src/vaadin-date-picker.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { TimePicker } from '@vaadin/time-picker/src/vaadin-time-picker.js';

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

@@ -1,12 +1,11 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import type { TimePickerI18n } from '@vaadin/time-picker/src/vaadin-time-picker.js';
@@ -104,9 +103,7 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class DateTimePicker extends FieldMixin(
-  SlotMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))),
-) {
+declare class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**
    * The name of the control, which is submitted with the form data.
    */
@@ -215,6 +212,17 @@ declare class DateTimePicker extends FieldMixin(
    */
   i18n: DateTimePickerI18n;
 
+  /**
+   * A space-delimited list of CSS class names to set on the overlay elements
+   * of the internal components controlled by the `<vaadin-date-time-picker>`:
+   *
+   * - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker#property-overlayClass)
+   * - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker#property-overlayClass)
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
+
   addEventListener<K extends keyof DateTimePickerEventMap>(
     type: K,
     listener: (this: DateTimePicker, ev: DateTimePickerEventMap[K]) => void,

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

@@ -1,18 +1,17 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-date-time-picker-date-picker.js';
 import './vaadin-date-time-picker-time-picker.js';
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { dateEquals } from '@vaadin/date-picker/src/vaadin-date-picker-helper.js';
+import { dateEquals, parseDate } from '@vaadin/date-picker/src/vaadin-date-picker-helper.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-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';
@@ -44,6 +43,22 @@ const timePickerI18nDefaults = getPropertyFromPrototype(timePickerClass, 'i18n')
 const datePickerI18nProps = Object.keys(datePickerI18nDefaults);
 const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
 
+/**
+ * A controller to initialize slotted picker.
+ *
+ * @private
+ */
+class PickerSlotController extends SlotController {
+  constructor(host, type) {
+    super(host, `${type}-picker`, `vaadin-date-time-picker-${type}-picker`, {
+      initializer: (picker, host) => {
+        const prop = `__${type}Picker`;
+        host[prop] = picker;
+      },
+    });
+  }
+}
+
 /**
  * `<vaadin-date-time-picker>` is a Web Component providing a date time selection field.
  *
@@ -105,12 +120,9 @@ const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
  * @mixes ThemableMixin
  * @mixes FocusMixin
  * @mixes DisabledMixin
- * @mixes SlotMixin
  * @mixes FieldMixin
  */
-class DateTimePicker extends FieldMixin(
-  SlotMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(PolymerElement))))),
-) {
+class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(ElementMixin(PolymerElement))))) {
   static get template() {
     return html`
       <style>
@@ -336,6 +348,19 @@ class DateTimePicker extends FieldMixin(
         value: () => ({ ...datePickerI18nDefaults, ...timePickerI18nDefaults }),
       },
 
+      /**
+       * A space-delimited list of CSS class names to set on the overlay elements
+       * of the internal components controlled by the `<vaadin-date-time-picker>`:
+       *
+       * - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker#property-overlayClass)
+       * - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker#property-overlayClass)
+       *
+       * @attr {string} overlay-class
+       */
+      overlayClass: {
+        type: String,
+      },
+
       /**
        * The current slotted date picker.
        * @private
@@ -359,39 +384,23 @@ class DateTimePicker extends FieldMixin(
   static get observers() {
     return [
       '__selectedDateTimeChanged(__selectedDateTime)',
-      '__datePlaceholderChanged(datePlaceholder)',
-      '__timePlaceholderChanged(timePlaceholder)',
-      '__stepChanged(step)',
-      '__initialPositionChanged(initialPosition)',
-      '__showWeekNumbersChanged(showWeekNumbers)',
-      '__requiredChanged(required)',
-      '__invalidChanged(invalid)',
-      '__disabledChanged(disabled)',
-      '__readonlyChanged(readonly)',
-      '__i18nChanged(i18n.*)',
-      '__autoOpenDisabledChanged(autoOpenDisabled)',
+      '__datePlaceholderChanged(datePlaceholder, __datePicker)',
+      '__timePlaceholderChanged(timePlaceholder, __timePicker)',
+      '__stepChanged(step, __timePicker)',
+      '__initialPositionChanged(initialPosition, __datePicker)',
+      '__showWeekNumbersChanged(showWeekNumbers, __datePicker)',
+      '__requiredChanged(required, __datePicker, __timePicker)',
+      '__invalidChanged(invalid, __datePicker, __timePicker)',
+      '__disabledChanged(disabled, __datePicker, __timePicker)',
+      '__readonlyChanged(readonly, __datePicker, __timePicker)',
+      '__i18nChanged(i18n, __datePicker, __timePicker)',
+      '__autoOpenDisabledChanged(autoOpenDisabled, __datePicker, __timePicker)',
       '__themeChanged(_theme, __datePicker, __timePicker)',
+      '__overlayClassChanged(overlayClass, __datePicker, __timePicker)',
       '__pickersChanged(__datePicker, __timePicker)',
     ];
   }
 
-  /** @protected */
-  get slots() {
-    return {
-      ...super.slots,
-      'date-picker': () => {
-        const element = document.createElement('vaadin-date-time-picker-date-picker');
-        element.__defaultPicker = true;
-        return element;
-      },
-      'time-picker': () => {
-        const element = document.createElement('vaadin-date-time-picker-time-picker');
-        element.__defaultPicker = true;
-        return element;
-      },
-    };
-  }
-
   constructor() {
     super();
     // Default value for "min" and "max" properties of vaadin-date-picker (for removing constraint)
@@ -403,18 +412,31 @@ class DateTimePicker extends FieldMixin(
 
     this.__changeEventHandler = this.__changeEventHandler.bind(this);
     this.__valueChangedEventHandler = this.__valueChangedEventHandler.bind(this);
+  }
 
-    this._observer = new FlattenedNodesObserver(this, (info) => {
-      this.__onDomChange(info.addedNodes);
-    });
+  /** @private */
+  get __inputs() {
+    return [this.__datePicker, this.__timePicker];
+  }
+
+  /** @private */
+  get __formattedValue() {
+    const [dateValue, timeValue] = this.__inputs.map((picker) => picker.value);
+    if (dateValue && timeValue) {
+      return [dateValue, timeValue].join('T');
+    }
+    return '';
   }
 
   /** @protected */
   ready() {
     super.ready();
 
-    this.__datePicker = this._getDirectSlotChild('date-picker');
-    this.__timePicker = this._getDirectSlotChild('time-picker');
+    this._datePickerController = new PickerSlotController(this, 'date');
+    this.addController(this._datePickerController);
+
+    this._timePickerController = new PickerSlotController(this, 'time');
+    this.addController(this._timePickerController);
 
     if (this.autofocus && !this.disabled) {
       window.requestAnimationFrame(() => this.focus());
@@ -474,8 +496,7 @@ class DateTimePicker extends FieldMixin(
   }
 
   /** @private */
-  __syncI18n(target, source, props) {
-    props = props || Object.keys(source.i18n);
+  __syncI18n(target, source, props = Object.keys(source.i18n)) {
     props.forEach((prop) => {
       // eslint-disable-next-line no-prototype-builtins
       if (source.i18n && source.i18n.hasOwnProperty(prop)) {
@@ -508,22 +529,9 @@ class DateTimePicker extends FieldMixin(
   }
 
   /** @private */
-  __onDomChange(addedNodes) {
-    addedNodes
-      .filter((node) => node.nodeType === Node.ELEMENT_NODE)
-      .forEach((node) => {
-        const slotAttributeValue = node.getAttribute('slot');
-
-        if (slotAttributeValue === 'date-picker') {
-          this.__datePicker = node;
-        } else if (slotAttributeValue === 'time-picker') {
-          this.__timePicker = node;
-        }
-      });
-
-    if (this.value && (this.min || this.max)) {
-      this.validate();
-    }
+  __isDefaultPicker(picker, type) {
+    const controller = this[`_${type}PickerController`];
+    return controller && picker === controller.defaultNode;
   }
 
   /** @private */
@@ -539,7 +547,7 @@ class DateTimePicker extends FieldMixin(
 
     this.__addInputListeners(newDatePicker);
 
-    if (newDatePicker.__defaultPicker) {
+    if (this.__isDefaultPicker(newDatePicker, 'date')) {
       // Synchronize properties to default date picker
       newDatePicker.placeholder = this.datePlaceholder;
       newDatePicker.invalid = this.invalid;
@@ -558,10 +566,6 @@ class DateTimePicker extends FieldMixin(
     // min and max need to be dynamically set depending on currently selected date instead of simple propagation
     newDatePicker.min = this.__formatDateISO(this.__minDateTime, this.__defaultDateMinMaxValue);
     newDatePicker.max = this.__formatDateISO(this.__maxDateTime, this.__defaultDateMinMaxValue);
-    newDatePicker.required = this.required;
-    newDatePicker.disabled = this.disabled;
-    newDatePicker.readonly = this.readonly;
-    newDatePicker.autoOpenDisabled = this.autoOpenDisabled;
 
     // Disable default internal validation for the component
     newDatePicker.validate = () => {};
@@ -581,7 +585,7 @@ class DateTimePicker extends FieldMixin(
 
     this.__addInputListeners(newTimePicker);
 
-    if (newTimePicker.__defaultPicker) {
+    if (this.__isDefaultPicker(newTimePicker, 'time')) {
       // Synchronize properties to default time picker
       newTimePicker.placeholder = this.timePlaceholder;
       newTimePicker.step = this.step;
@@ -597,10 +601,6 @@ class DateTimePicker extends FieldMixin(
     // Min and max are always synchronized from parent to slotted because time picker min and max
     // need to be dynamically set depending on currently selected date instead of simple propagation
     this.__updateTimePickerMinMax();
-    newTimePicker.required = this.required;
-    newTimePicker.disabled = this.disabled;
-    newTimePicker.readonly = this.readonly;
-    newTimePicker.autoOpenDisabled = this.autoOpenDisabled;
 
     // Disable default internal validation for the component
     newTimePicker.validate = () => {};
@@ -634,88 +634,88 @@ class DateTimePicker extends FieldMixin(
   }
 
   /** @private */
-  __i18nChanged(changeRecord) {
-    if (this.__datePicker) {
-      this.__datePicker.set(changeRecord.path, changeRecord.value);
+  __i18nChanged(i18n, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.i18n = { ...datePicker.i18n, ...i18n };
     }
 
-    if (this.__timePicker) {
-      this.__timePicker.set(changeRecord.path, changeRecord.value);
+    if (timePicker) {
+      timePicker.i18n = { ...timePicker.i18n, ...i18n };
     }
   }
 
   /** @private */
-  __datePlaceholderChanged(datePlaceholder) {
-    if (this.__datePicker) {
-      this.__datePicker.placeholder = datePlaceholder;
+  __datePlaceholderChanged(datePlaceholder, datePicker) {
+    if (datePicker) {
+      datePicker.placeholder = datePlaceholder;
     }
   }
 
   /** @private */
-  __timePlaceholderChanged(timePlaceholder) {
-    if (this.__timePicker) {
-      this.__timePicker.placeholder = timePlaceholder;
+  __timePlaceholderChanged(timePlaceholder, timePicker) {
+    if (timePicker) {
+      timePicker.placeholder = timePlaceholder;
     }
   }
 
   /** @private */
-  __stepChanged(step) {
-    if (this.__timePicker && this.__timePicker.step !== step) {
-      this.__timePicker.step = step;
+  __stepChanged(step, timePicker) {
+    if (timePicker && timePicker.step !== step) {
+      timePicker.step = step;
     }
   }
 
   /** @private */
-  __initialPositionChanged(initialPosition) {
-    if (this.__datePicker) {
-      this.__datePicker.initialPosition = initialPosition;
+  __initialPositionChanged(initialPosition, datePicker) {
+    if (datePicker) {
+      datePicker.initialPosition = initialPosition;
     }
   }
 
   /** @private */
-  __showWeekNumbersChanged(showWeekNumbers) {
-    if (this.__datePicker) {
-      this.__datePicker.showWeekNumbers = showWeekNumbers;
+  __showWeekNumbersChanged(showWeekNumbers, datePicker) {
+    if (datePicker) {
+      datePicker.showWeekNumbers = showWeekNumbers;
     }
   }
 
   /** @private */
-  __invalidChanged(invalid) {
-    if (this.__datePicker) {
-      this.__datePicker.invalid = invalid;
+  __invalidChanged(invalid, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.invalid = invalid;
     }
-    if (this.__timePicker) {
-      this.__timePicker.invalid = invalid;
+    if (timePicker) {
+      timePicker.invalid = invalid;
     }
   }
 
   /** @private */
-  __requiredChanged(required) {
-    if (this.__datePicker) {
-      this.__datePicker.required = required;
+  __requiredChanged(required, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.required = required;
     }
-    if (this.__timePicker) {
-      this.__timePicker.required = required;
+    if (timePicker) {
+      timePicker.required = required;
     }
   }
 
   /** @private */
-  __disabledChanged(disabled) {
-    if (this.__datePicker) {
-      this.__datePicker.disabled = disabled;
+  __disabledChanged(disabled, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.disabled = disabled;
     }
-    if (this.__timePicker) {
-      this.__timePicker.disabled = disabled;
+    if (timePicker) {
+      timePicker.disabled = disabled;
     }
   }
 
   /** @private */
-  __readonlyChanged(readonly) {
-    if (this.__datePicker) {
-      this.__datePicker.readonly = readonly;
+  __readonlyChanged(readonly, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.readonly = readonly;
     }
-    if (this.__timePicker) {
-      this.__timePicker.readonly = readonly;
+    if (timePicker) {
+      timePicker.readonly = readonly;
     }
   }
 
@@ -726,7 +726,7 @@ class DateTimePicker extends FieldMixin(
    * @private
    */
   __parseDate(str) {
-    return datePickerClass.prototype._parseDate(str);
+    return parseDate(str);
   }
 
   /**
@@ -835,17 +835,13 @@ class DateTimePicker extends FieldMixin(
    */
   __validateTime(timeObject) {
     if (timeObject) {
-      timeObject.seconds = this.__stepSegment < 3 ? undefined : timeObject.seconds;
-      timeObject.milliseconds = this.__stepSegment < 4 ? undefined : timeObject.milliseconds;
+      const stepSegment = this.__getStepSegment();
+      timeObject.seconds = stepSegment < 3 ? undefined : timeObject.seconds;
+      timeObject.milliseconds = stepSegment < 4 ? undefined : timeObject.milliseconds;
     }
     return timeObject;
   }
 
-  /** @private */
-  get __inputs() {
-    return [this.__datePicker, this.__timePicker];
-  }
-
   /**
    * Returns true if the current input value satisfies all constraints (if any)
    *
@@ -864,8 +860,7 @@ class DateTimePicker extends FieldMixin(
 
   // Copied from vaadin-time-picker
   /** @private */
-  // eslint-disable-next-line getter-return
-  get __stepSegment() {
+  __getStepSegment() {
     const step = this.step == null ? 60 : parseFloat(this.step);
     if (step % 3600 === 0) {
       // Accept hours
@@ -986,16 +981,6 @@ class DateTimePicker extends FieldMixin(
     }
   }
 
-  /** @private */
-  get __formattedValue() {
-    const dateValue = this.__datePicker.value;
-    const timeValue = this.__timePicker.value;
-    if (dateValue && timeValue) {
-      return [dateValue, timeValue].join('T');
-    }
-    return '';
-  }
-
   /** @private */
   __valueChangedEventHandler() {
     if (this.__ignoreInputValueChange) {
@@ -1021,12 +1006,12 @@ class DateTimePicker extends FieldMixin(
   }
 
   /** @private */
-  __autoOpenDisabledChanged(autoOpenDisabled) {
-    if (this.__datePicker) {
-      this.__datePicker.autoOpenDisabled = autoOpenDisabled;
+  __autoOpenDisabledChanged(autoOpenDisabled, datePicker, timePicker) {
+    if (datePicker) {
+      datePicker.autoOpenDisabled = autoOpenDisabled;
     }
-    if (this.__timePicker) {
-      this.__timePicker.autoOpenDisabled = autoOpenDisabled;
+    if (timePicker) {
+      timePicker.autoOpenDisabled = autoOpenDisabled;
     }
   }
 
@@ -1046,6 +1031,17 @@ class DateTimePicker extends FieldMixin(
     });
   }
 
+  /** @private */
+  __overlayClassChanged(overlayClass, datePicker, timePicker) {
+    if (!datePicker || !timePicker) {
+      // Both pickers are not ready yet
+      return;
+    }
+
+    datePicker.overlayClass = overlayClass;
+    timePicker.overlayClass = overlayClass;
+  }
+
   /** @private */
   __pickersChanged(datePicker, timePicker) {
     if (!datePicker || !timePicker) {
@@ -1053,7 +1049,7 @@ class DateTimePicker extends FieldMixin(
       return;
     }
 
-    if (datePicker.__defaultPicker !== timePicker.__defaultPicker) {
+    if (this.__isDefaultPicker(datePicker, 'date') !== this.__isDefaultPicker(timePicker, 'time')) {
       // Both pickers are not replaced yet
       return;
     }
@@ -1064,6 +1060,10 @@ class DateTimePicker extends FieldMixin(
     } else if (this.value) {
       // The component has a value, update the new pickers values
       this.__selectedDateTimeChanged(this.__selectedDateTime);
+
+      if (this.min || this.max) {
+        this.validate();
+      }
     }
   }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",
@@ -200,6 +200,17 @@
                 ]
               }
             },
+            {
+              "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.0.0-alpha11/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-time-picker#property-overlayClass)",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -406,12 +417,23 @@
               },
               {
                 "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.0.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/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/24.0.0-alpha11/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-time-picker).",
                 "value": {
                   "type": [
                     "DateTimePickerI18n"
                   ]
                 }
+              },
+              {
+                "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.0.0-alpha11/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-time-picker#property-overlayClass)",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -147,7 +147,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.0.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/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/24.0.0-alpha11/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/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.0.0-alpha11/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-time-picker#property-overlayClass)",
               "value": {
                 "kind": "expression"
               }