@vaadin/date-picker 24.3.0-alpha1 → 24.3.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -23,8 +23,8 @@
     "src",
     "!src/vaadin-lit-date-picker-overlay-content.js",
     "!src/vaadin-lit-date-picker-overlay.js",
-    "!src/vaadin-lit-month-calendar.js",
     "!src/vaadin-lit-date-picker.js",
+    "!src/vaadin-lit-month-calendar.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -40,24 +40,24 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.3.0-alpha1",
-    "@vaadin/button": "24.3.0-alpha1",
-    "@vaadin/component-base": "24.3.0-alpha1",
-    "@vaadin/field-base": "24.3.0-alpha1",
-    "@vaadin/input-container": "24.3.0-alpha1",
-    "@vaadin/overlay": "24.3.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha1"
+    "@vaadin/a11y-base": "24.3.0-alpha10",
+    "@vaadin/button": "24.3.0-alpha10",
+    "@vaadin/component-base": "24.3.0-alpha10",
+    "@vaadin/field-base": "24.3.0-alpha10",
+    "@vaadin/input-container": "24.3.0-alpha10",
+    "@vaadin/overlay": "24.3.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
+  "gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
 }

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

@@ -25,11 +25,6 @@ export type DatePickerLightOpenedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type DatePickerLightInvalidChangedEvent = CustomEvent<{ value: boolean }>;
 
-/**
- * Fired when the `dirty` property changes.
- */
-export type DatePickerLightDirtyChangedEvent = CustomEvent<{ value: boolean }>;
-
 /**
  * Fired when the `value` property changes.
  */
@@ -45,8 +40,6 @@ export interface DatePickerLightCustomEventMap {
 
   'invalid-changed': DatePickerLightInvalidChangedEvent;
 
-  'dirty-changed': DatePickerLightDirtyChangedEvent;
-
   'value-changed': DatePickerLightValueChangedEvent;
 
   validated: DatePickerLightValidatedEvent;
@@ -87,7 +80,6 @@ export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePicker
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} dirty-changed - Fired when the `dirty` 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-picker-mixin.js

@@ -427,6 +427,20 @@ export const DatePickerMixin = (subclass) =>
       return null;
     }
 
+    /**
+     * The input element's value when it cannot be parsed as a date, and an empty string otherwise.
+     *
+     * @return {string}
+     * @private
+     */
+    get __unparsableValue() {
+      if (!this._inputElementValue || this.__parseDate(this._inputElementValue)) {
+        return '';
+      }
+
+      return this._inputElementValue;
+    }
+
     /**
      * Override an event listener from `DelegateFocusMixin`
      * @protected
@@ -447,7 +461,7 @@ export const DatePickerMixin = (subclass) =>
       super._onBlur(event);
 
       if (!this.opened) {
-        this._selectParsedOrFocusedDate();
+        this.__commitParsedOrFocusedDate();
 
         // Do not validate when focusout is caused by document
         // losing focus, which happens on browser tab switch.
@@ -523,19 +537,14 @@ export const DatePickerMixin = (subclass) =>
 
       // User confirmed selected date by clicking the calendar.
       content.addEventListener('date-tap', (e) => {
-        this.__userConfirmedDate = true;
-
-        this._selectDate(e.detail.date);
+        this.__commitDate(e.detail.date);
 
         this._close();
       });
 
       // User confirmed selected date by pressing Enter, Space, or Today.
       content.addEventListener('date-selected', (e) => {
-        // Reset if a date is deselected.
-        this.__userConfirmedDate = !!e.detail.date;
-
-        this._selectDate(e.detail.date);
+        this.__commitDate(e.detail.date);
       });
 
       // Set focus-ring attribute when moving focus to the overlay
@@ -650,28 +659,52 @@ export const DatePickerMixin = (subclass) =>
       this._shouldKeepFocusRing = focused && this._keyboardActive;
     }
 
-    /** @private */
-    __dispatchChange() {
-      this.validate();
-      this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
-    }
-
     /**
-     * Select date on user interaction and set the flag
-     * to fire change event if necessary.
+     * Depending on the nature of the value change that has occurred since
+     * the last commit attempt, triggers validation and fires an event:
      *
-     * @param {Date} dateToSelect
-     * @protected
+     * 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
+     *
+     * @private
      */
-    _selectDate(dateToSelect) {
-      const prevValue = this.value;
-
-      this._selectedDate = dateToSelect;
+    __commitValueChange() {
+      const unparsableValue = this.__unparsableValue;
 
-      if (prevValue !== this.value) {
-        this.dirty = true;
-        this.__dispatchChange();
+      if (this.__committedValue !== this.value) {
+        this.validate();
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+      } else if (this.__committedUnparsableValue !== unparsableValue) {
+        this.validate();
+        this.dispatchEvent(new CustomEvent('unparsable-change'));
       }
+
+      this.__committedValue = this.value;
+      this.__committedUnparsableValue = unparsableValue;
+    }
+
+    /**
+     * Sets the given date as the value and commits it.
+     *
+     * @param {Date} date
+     * @private
+     */
+    __commitDate(date) {
+      // Prevent the value observer from treating the following value change
+      // as initiated programmatically by the developer, and therefore
+      // from automatically committing it without a change event.
+      this.__keepCommittedValue = true;
+      this._selectedDate = date;
+      this.__keepCommittedValue = false;
+      this.__commitValueChange();
     }
 
     /** @private */
@@ -807,6 +840,11 @@ export const DatePickerMixin = (subclass) =>
         this._selectedDate = null;
       }
 
+      if (!this.__keepCommittedValue) {
+        this.__committedValue = this.value;
+        this.__committedUnparsableValue = '';
+      }
+
       this._toggleHasValue(this._hasValue);
     }
 
@@ -897,8 +935,15 @@ export const DatePickerMixin = (subclass) =>
         : getClosestDate(initialPosition, [this._minDate, this._maxDate]);
     }
 
-    /** @private */
-    _selectParsedOrFocusedDate() {
+    /**
+     * Tries to parse the input element's value as a date. If the input value
+     * is parsable, commits the resulting date as the value. Otherwise, commits
+     * an empty string as the value. If no i18n parser is provided, commits
+     * the focused date as the value.
+     *
+     * @private
+     */
+    __commitParsedOrFocusedDate() {
       // Select the parsed input or focused date
       this._ignoreFocusedDateChange = true;
       if (this.i18n.parseDate) {
@@ -906,15 +951,14 @@ export const DatePickerMixin = (subclass) =>
         const parsedDate = this.__parseDate(inputValue);
 
         if (parsedDate) {
-          this._selectDate(parsedDate);
+          this.__commitDate(parsedDate);
         } else {
           this.__keepInputValue = true;
-          this._selectDate(null);
-          this._selectedDate = null;
+          this.__commitDate(null);
           this.__keepInputValue = false;
         }
       } else if (this._focusedDate) {
-        this._selectDate(this._focusedDate);
+        this.__commitDate(this._focusedDate);
       }
       this._ignoreFocusedDateChange = false;
     }
@@ -926,15 +970,9 @@ export const DatePickerMixin = (subclass) =>
         this.__showOthers();
         this.__showOthers = null;
       }
-
       window.removeEventListener('scroll', this._boundOnScroll, true);
 
-      // No need to select date on close if it was confirmed by the user.
-      if (this.__userConfirmedDate) {
-        this.__userConfirmedDate = false;
-      } else {
-        this._selectParsedOrFocusedDate();
-      }
+      this.__commitParsedOrFocusedDate();
 
       if (this._nativeInput && this._nativeInput.selectionStart) {
         this._nativeInput.selectionStart = this._nativeInput.selectionEnd;
@@ -1020,10 +1058,7 @@ export const DatePickerMixin = (subclass) =>
      */
     _onClearButtonClick(event) {
       event.preventDefault();
-      this.dirty = true;
-      this._inputElementValue = '';
-      this.value = '';
-      this.__dispatchChange();
+      this.__commitDate(null);
     }
 
     /**
@@ -1087,15 +1122,11 @@ export const DatePickerMixin = (subclass) =>
      * @override
      */
     _onEnter(_event) {
-      const oldValue = this.value;
       if (this.opened) {
         // Closing will implicitly select parsed or focused date
         this.close();
       } else {
-        this._selectParsedOrFocusedDate();
-      }
-      if (oldValue === this.value) {
-        this.validate();
+        this.__commitParsedOrFocusedDate();
       }
     }
 
@@ -1122,15 +1153,11 @@ export const DatePickerMixin = (subclass) =>
         return;
       }
 
-      if (this.autoOpenDisabled) {
+      if (this.inputElement.value === '') {
         // Do not restore selected date if Esc was pressed after clearing input field
-        if (this.inputElement.value === '') {
-          this._selectDate(null);
-        }
-        this._applyInputValue(this._selectedDate);
+        this.__commitDate(null);
       } else {
-        this._focusedDate = this._selectedDate;
-        this._selectParsedOrFocusedDate();
+        this._applyInputValue(this._selectedDate);
       }
     }
 

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

@@ -16,6 +16,11 @@ export type DatePickerChangeEvent = Event & {
   target: DatePicker;
 };
 
+/**
+ * Fired when the user commits an unparsable value change and there is no change event.
+ */
+export type DatePickerUnparsableChangeEvent = CustomEvent;
+
 /**
  * Fired when the `opened` property changes.
  */
@@ -26,11 +31,6 @@ export type DatePickerOpenedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type DatePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
 
-/**
- * Fired when the `dirty` property changes.
- */
-export type DatePickerDirtyChangedEvent = CustomEvent<{ value: boolean }>;
-
 /**
  * Fired when the `value` property changes.
  */
@@ -46,10 +46,10 @@ export interface DatePickerCustomEventMap {
 
   'invalid-changed': DatePickerInvalidChangedEvent;
 
-  'dirty-changed': DatePickerDirtyChangedEvent;
-
   'value-changed': DatePickerValueChangedEvent;
 
+  'unparsable-change': DatePickerUnparsableChangeEvent;
+
   validated: DatePickerValidatedEvent;
 }
 
@@ -155,10 +155,26 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  *
  * 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
+ *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} unparsable-change Fired when the user commits an unparsable value change and there is no change event.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} dirty-changed - Fired when the `dirty` 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-picker.js

@@ -118,7 +118,24 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  *
  * 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
+ *
  * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {Event} unparsable-change Fired when the user commits an unparsable value change and there is no change event.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.

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

@@ -1,3 +1,4 @@
+import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

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

@@ -1,4 +1,3 @@
-import '@vaadin/input-container/theme/lumo/vaadin-input-container.js';
 import './vaadin-date-picker-overlay-styles.js';
 import './vaadin-date-picker-overlay-content-styles.js';
 import './vaadin-month-calendar-styles.js';

package/theme/lumo/vaadin-month-calendar-styles.js

@@ -17,6 +17,10 @@ registerStyles(
       color: var(--lumo-body-text-color);
       text-align: center;
       padding: 0 var(--lumo-space-xs);
+      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
+      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
+      --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+      --_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
     }
 
     /* Month header */
@@ -76,7 +80,7 @@ registerStyles(
     /* Today date */
 
     [part~='date'][part~='today'] {
-      color: var(--lumo-primary-text-color);
+      color: var(--_selection-color-text);
     }
 
     /* Focused date */
@@ -98,7 +102,7 @@ registerStyles(
     }
 
     [part~='date'][part~='focused']::before {
-      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
     }
 
     :host(:not([focused])) [part~='date'][part~='focused']::before {
@@ -107,7 +111,7 @@ registerStyles(
 
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
-        box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px transparent;
+        box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
       }
     }
 
@@ -120,7 +124,7 @@ registerStyles(
     }
 
     [part~='date'][part~='selected']::before {
-      background-color: var(--lumo-primary-color);
+      background-color: var(--_selection-color);
     }
 
     [part~='date'][part~='disabled'] {
@@ -157,7 +161,7 @@ template.innerHTML = `
   <style>
     @keyframes vaadin-date-picker-month-calendar-focus-date {
       50% {
-        box-shadow: 0 0 0 2px transparent;
+        box-shadow: 0 0 0 var(--_focus-ring-width) transparent;
       }
     }
   </style>

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

@@ -1,3 +1,4 @@
+import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';

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

@@ -1,4 +1,3 @@
-import '@vaadin/input-container/theme/material/vaadin-input-container.js';
 import './vaadin-date-picker-overlay-styles.js';
 import './vaadin-date-picker-overlay-content-styles.js';
 import './vaadin-month-calendar-styles.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -41,17 +41,6 @@
                 ]
               }
             },
-            {
-              "name": "dirty",
-              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-              "value": {
-                "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "invalid",
               "description": "Set to true when the field is invalid.",
@@ -203,17 +192,6 @@
                   ]
                 }
               },
-              {
-                "name": "dirty",
-                "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-                "value": {
-                  "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "invalid",
                 "description": "Set to true when the field is invalid.",
@@ -347,10 +325,6 @@
                 "name": "value-changed",
                 "description": "Fired when `value` property value changes."
               },
-              {
-                "name": "dirty-changed",
-                "description": "Fired when the `dirty` property changes."
-              },
               {
                 "name": "invalid-changed",
                 "description": "Fired when the `invalid` property changes."
@@ -360,7 +334,7 @@
         },
         {
           "name": "vaadin-date-picker",
-          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\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",
           "attributes": [
             {
               "name": "disabled",
@@ -470,17 +444,6 @@
                 ]
               }
             },
-            {
-              "name": "dirty",
-              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-              "value": {
-                "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "clear-button-visible",
               "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
@@ -755,17 +718,6 @@
                   ]
                 }
               },
-              {
-                "name": "dirty",
-                "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-                "value": {
-                  "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
               {
                 "name": "clearButtonVisible",
                 "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
@@ -952,10 +904,6 @@
               {
                 "name": "invalid-changed",
                 "description": "Fired when the `invalid` property changes."
-              },
-              {
-                "name": "dirty-changed",
-                "description": "Fired when the `dirty` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.3.0-alpha1",
+  "version": "24.3.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -33,13 +33,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "?dirty",
-              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "?invalid",
               "description": "Set to true when the field is invalid.",
@@ -152,13 +145,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "@dirty-changed",
-              "description": "Fired when the `dirty` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@invalid-changed",
               "description": "Fired when the `invalid` property changes.",
@@ -170,7 +156,7 @@
         },
         {
           "name": "vaadin-date-picker",
-          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name             | Description\n----------------------|--------------------\n`toggle-button`       | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute  | Description                                      | Part name\n-----------|--------------------------------------------------|-----------\n`opened`   | Set when the date selector overlay is opened     | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`overlay-header`      | Fullscreen mode header\n`label`               | Fullscreen mode value/label\n`clear-button`        | Fullscreen mode clear button\n`toggle-button`       | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar`             | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute       | Description\n----------------|-------------------------------------------------\n`desktop`       | Set when the overlay content is in desktop mode\n`fullscreen`    | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`month-header`        | Month title\n`weekdays`            | Weekday container\n`weekday`             | Weekday element\n`week-numbers`        | Week numbers container\n`week-number`         | Week number element\n`date`                | Date element\n`disabled`            | Disabled date element\n`focused`             | Focused date element\n`selected`            | Selected date element\n`today`               | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name             | Description\n----------------------|--------------------\n`year-number`         | Year number\n`year-separator`      | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\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",
           "extension": true,
           "attributes": [
             {
@@ -201,13 +187,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "?dirty",
-              "description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "?clearButtonVisible",
               "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
@@ -396,13 +375,6 @@
               "value": {
                 "kind": "expression"
               }
-            },
-            {
-              "name": "@dirty-changed",
-              "description": "Fired when the `dirty` property changes.",
-              "value": {
-                "kind": "expression"
-              }
             }
           ]
         }