@vaadin/date-time-picker 24.0.0-alpha9 → 24.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-time-picker",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,23 +36,23 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/custom-field": "24.0.0-alpha9",
-    "@vaadin/date-picker": "24.0.0-alpha9",
-    "@vaadin/field-base": "24.0.0-alpha9",
-    "@vaadin/time-picker": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/component-base": "24.0.0-beta2",
+    "@vaadin/custom-field": "24.0.0-beta2",
+    "@vaadin/date-picker": "24.0.0-beta2",
+    "@vaadin/field-base": "24.0.0-beta2",
+    "@vaadin/time-picker": "24.0.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

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

@@ -87,14 +87,13 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
  *
  * ### Internal components
  *
- * In addition to `<vaadin-date-time-picker>` itself, the following internal
- * components are themable:
+ * The following components are created by `<vaadin-date-time-picker>` and placed in light DOM:
  *
- * - `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).
- * - `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
+ * - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).
+ * - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
  *
  * Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
- * propagated to the internal components listed above.
+ * propagated to these components.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
@@ -212,6 +211,17 @@ declare class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(Themabl
    */
   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

@@ -3,17 +3,17 @@
  * 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 { 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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { DatePicker } from '@vaadin/date-picker/src/vaadin-date-picker.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 { TimePicker } from '@vaadin/time-picker/src/vaadin-time-picker.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-date-time-picker' });
@@ -36,10 +36,8 @@ function getPropertyFromPrototype(clazz, prop) {
   }
 }
 
-const datePickerClass = customElements.get('vaadin-date-time-picker-date-picker');
-const timePickerClass = customElements.get('vaadin-date-time-picker-time-picker');
-const datePickerI18nDefaults = getPropertyFromPrototype(datePickerClass, 'i18n').value();
-const timePickerI18nDefaults = getPropertyFromPrototype(timePickerClass, 'i18n').value();
+const datePickerI18nDefaults = getPropertyFromPrototype(DatePicker, 'i18n').value();
+const timePickerI18nDefaults = getPropertyFromPrototype(TimePicker, 'i18n').value();
 const datePickerI18nProps = Object.keys(datePickerI18nDefaults);
 const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
 
@@ -50,7 +48,7 @@ const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
  */
 class PickerSlotController extends SlotController {
   constructor(host, type) {
-    super(host, `${type}-picker`, `vaadin-date-time-picker-${type}-picker`, {
+    super(host, `${type}-picker`, `vaadin-${type}-picker`, {
       initializer: (picker, host) => {
         const prop = `__${type}Picker`;
         host[prop] = picker;
@@ -99,14 +97,13 @@ class PickerSlotController extends SlotController {
  *
  * ### Internal components
  *
- * In addition to `<vaadin-date-time-picker>` itself, the following internal
- * components are themable:
+ * The following components are created by `<vaadin-date-time-picker>` and placed in light DOM:
  *
- * - `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).
- * - `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
+ * - [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).
+ * - [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).
  *
  * Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
- * propagated to the internal components listed above.
+ * propagated to these components.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
@@ -348,6 +345,19 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
         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
@@ -383,6 +393,7 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
       '__i18nChanged(i18n, __datePicker, __timePicker)',
       '__autoOpenDisabledChanged(autoOpenDisabled, __datePicker, __timePicker)',
       '__themeChanged(_theme, __datePicker, __timePicker)',
+      '__overlayClassChanged(overlayClass, __datePicker, __timePicker)',
       '__pickersChanged(__datePicker, __timePicker)',
     ];
   }
@@ -400,6 +411,20 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
     this.__valueChangedEventHandler = this.__valueChangedEventHandler.bind(this);
   }
 
+  /** @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();
@@ -712,7 +737,7 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
     if (!date) {
       return defaultValue;
     }
-    return datePickerClass.prototype._formatISO(date);
+    return DatePicker.prototype._formatISO(date);
   }
 
   /**
@@ -807,17 +832,13 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
    */
   __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)
    *
@@ -836,8 +857,7 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
 
   // 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
@@ -958,16 +978,6 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
     }
   }
 
-  /** @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) {
@@ -1018,6 +1028,17 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
     });
   }
 
+  /** @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) {

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

@@ -5,52 +5,19 @@ import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
 import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles('vaadin-date-time-picker', [requiredField, helper, customField], {
-  moduleId: 'lumo-date-time-picker',
-});
-
-registerStyles(
-  'vaadin-date-time-picker-date-picker',
-  css`
-    :host {
-      margin-right: 2px;
-    }
-
-    /* RTL specific styles */
-    :host([dir='rtl']) {
-      margin-right: auto;
-      margin-left: 2px;
-    }
+const dateTimePicker = css`
+  ::slotted([slot='date-picker']) {
+    margin-inline-end: 2px;
+    --vaadin-input-container-top-end-radius: 0;
+    --vaadin-input-container-bottom-end-radius: 0;
+  }
 
-    [part~='input-field'] {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  ::slotted([slot='time-picker']) {
+    --vaadin-input-container-top-start-radius: 0;
+    --vaadin-input-container-bottom-start-radius: 0;
+  }
+`;
 
-    /* RTL specific styles */
-    :host([dir='rtl']) [part~='input-field'] {
-      border-radius: var(--lumo-border-radius-m);
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  `,
-  { moduleId: 'lumo-date-time-picker-date-picker' },
-);
-
-registerStyles(
-  'vaadin-date-time-picker-time-picker',
-  css`
-    [part~='input-field'] {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    /* RTL specific styles */
-    :host([dir='rtl']) [part~='input-field'] {
-      border-radius: var(--lumo-border-radius-m);
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  `,
-  { moduleId: 'lumo-date-time-picker-time-picker' },
-);
+registerStyles('vaadin-date-time-picker', [dateTimePicker, requiredField, helper, customField], {
+  moduleId: 'lumo-date-time-picker',
+});

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-time-picker",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "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-alpha9/#/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-alpha9/#/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\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.0.0-beta2/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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/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-beta2/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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-alpha9/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.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/24.0.0-beta2/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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-beta2/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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-alpha9",
+  "version": "24.0.0-beta2",
   "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-alpha9/#/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-alpha9/#/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\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.0.0-beta2/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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/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-alpha9/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.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/24.0.0-beta2/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/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-beta2/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta2/#/elements/vaadin-time-picker#property-overlayClass)",
               "value": {
                 "kind": "expression"
               }

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

@@ -1,20 +0,0 @@
-/**
- * @license
- * 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';
-
-/**
- * An element used internally by `<vaadin-date-time-picker>`. Not intended to be used separately.
- *
- * @extends DatePicker
- * @private
- */
-class DateTimePickerDatePicker extends DatePicker {
-  static get is() {
-    return 'vaadin-date-time-picker-date-picker';
-  }
-}
-
-customElements.define(DateTimePickerDatePicker.is, DateTimePickerDatePicker);

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

@@ -1,20 +0,0 @@
-/**
- * @license
- * 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';
-
-/**
- * An element used internally by `<vaadin-date-time-picker>`. Not intended to be used separately.
- *
- * @extends TimePicker
- * @private
- */
-class DateTimePickerTimePicker extends TimePicker {
-  static get is() {
-    return 'vaadin-date-time-picker-time-picker';
-  }
-}
-
-customElements.define(DateTimePickerTimePicker.is, DateTimePickerTimePicker);