@vaadin/date-picker 25.2.0-alpha1 → 25.2.0-alpha11

package/custom-elements.json

@@ -447,6 +447,20 @@
           "description": "",
           "name": "DatePickerMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Specify that this control should have input focus when the page loads.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "name": "DelegateFocusMixin",
+                "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "autoOpenDisabled",
@@ -465,6 +479,19 @@
                 "type": {
                   "text": "boolean"
                 }
+              },
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "clear",
+              "description": "Clear the value of the field.",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "package": "@vaadin/field-base/src/input-mixin.js"
               }
             },
             {
@@ -472,6 +499,20 @@
               "name": "close",
               "description": "Closes the dropdown."
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "TabindexMixin",
+                "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -496,6 +537,20 @@
               "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
               "attribute": "initial-position"
             },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true when the field is invalid.",
+              "attribute": "invalid",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "isDateDisabled",
@@ -506,6 +561,20 @@
               "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
               "attribute": "is-date-disabled"
             },
+            {
+              "kind": "field",
+              "name": "manualValidation",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
+              "attribute": "manual-validation",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "max",
@@ -541,6 +610,20 @@
               "description": "Set true to open the date selector overlay.",
               "attribute": "opened"
             },
+            {
+              "kind": "field",
+              "name": "required",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Specifies that the user must fill in a value.",
+              "attribute": "required",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showWeekNumbers",
@@ -551,6 +634,20 @@
               "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
               "attribute": "show-week-numbers"
             },
+            {
+              "kind": "method",
+              "name": "validate",
+              "description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "value",
@@ -559,7 +656,11 @@
                 "text": "string"
               },
               "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
-              "attribute": "value"
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "package": "@vaadin/field-base/src/input-mixin.js"
+              }
             }
           ],
           "events": [
@@ -567,6 +668,10 @@
               "name": "change",
               "type": {
                 "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "InputConstraintsMixin",
+                "package": "@vaadin/field-base/src/input-constraints-mixin.js"
               }
             },
             {
@@ -574,6 +679,16 @@
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "name": "validated",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
             }
           ],
           "attributes": [
@@ -585,6 +700,30 @@
               "description": "Set true to prevent the overlay from opening automatically.",
               "fieldName": "autoOpenDisabled"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Specify that this control should have input focus when the page loads.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "DelegateFocusMixin",
+                "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "TabindexMixin",
+                "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
+              }
+            },
             {
               "name": "i18n",
               "type": {
@@ -605,6 +744,18 @@
               "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
               "fieldName": "initialPosition"
             },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true when the field is invalid.",
+              "fieldName": "invalid",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "name": "is-date-disabled",
               "type": {
@@ -613,6 +764,18 @@
               "description": "A function to be used to determine whether the user can select a given date.\nReceives a `DatePickerDate` object of the date to be selected and should return a\nboolean.",
               "fieldName": "isDateDisabled"
             },
+            {
+              "name": "manual-validation",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
+              "fieldName": "manualValidation",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "name": "max",
               "type": {
@@ -637,6 +800,18 @@
               "description": "Set true to open the date selector overlay.",
               "fieldName": "opened"
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Specifies that the user must fill in a value.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "name": "show-week-numbers",
               "type": {
@@ -651,7 +826,11 @@
                 "text": "string"
               },
               "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
-              "fieldName": "value"
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "package": "@vaadin/field-base/src/input-mixin.js"
+              }
             }
           ],
           "mixins": [
@@ -674,10 +853,7 @@
           ],
           "parameters": [
             {
-              "name": "subclass",
-              "type": {
-                "text": "function(new:HTMLElement)"
-              }
+              "name": "subclass"
             }
           ]
         }
@@ -1552,6 +1728,20 @@
                 "package": "@vaadin/field-base/src/input-control-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Specify that this control should have input focus when the page loads.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "name": "DelegateFocusMixin",
+                "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "autoOpenDisabled",
@@ -1590,8 +1780,17 @@
                 }
               },
               "inheritedFrom": {
-                "name": "DatePickerMixin",
-                "module": "src/vaadin-date-picker-mixin.js"
+                "name": "InputConstraintsMixin",
+                "package": "@vaadin/field-base/src/input-constraints-mixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "clear",
+              "description": "Clear the value of the field.",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "package": "@vaadin/field-base/src/input-mixin.js"
               }
             },
             {
@@ -1617,6 +1816,20 @@
                 "module": "src/vaadin-date-picker-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "TabindexMixin",
+                "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "errorMessage",
@@ -1673,6 +1886,20 @@
                 "module": "src/vaadin-date-picker-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true when the field is invalid.",
+              "attribute": "invalid",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "isDateDisabled",
@@ -1687,6 +1914,34 @@
                 "module": "src/vaadin-date-picker-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "LabelMixin",
+                "package": "@vaadin/field-base/src/label-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "manualValidation",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
+              "attribute": "manual-validation",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "max",
@@ -1780,6 +2035,20 @@
                 "package": "@vaadin/field-base/src/input-control-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "required",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Specifies that the user must fill in a value.",
+              "attribute": "required",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showWeekNumbers",
@@ -1808,6 +2077,20 @@
                 "package": "@vaadin/field-base/src/input-control-mixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "validate",
+              "description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "value",
@@ -1831,8 +2114,8 @@
               },
               "description": "Fired when the user commits a value change.",
               "inheritedFrom": {
-                "name": "DatePickerMixin",
-                "module": "src/vaadin-date-picker-mixin.js"
+                "name": "InputConstraintsMixin",
+                "package": "@vaadin/field-base/src/input-constraints-mixin.js"
               }
             },
             {
@@ -1924,6 +2207,18 @@
                 "module": "src/vaadin-date-picker-mixin.js"
               }
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Specify that this control should have input focus when the page loads.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "DelegateFocusMixin",
+                "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
+              }
+            },
             {
               "name": "autoselect",
               "type": {
@@ -1948,6 +2243,18 @@
                 "package": "@vaadin/field-base/src/clear-button-mixin.js"
               }
             },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "TabindexMixin",
+                "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
+              }
+            },
             {
               "name": "error-message",
               "type": {
@@ -1996,6 +2303,18 @@
                 "module": "src/vaadin-date-picker-mixin.js"
               }
             },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true when the field is invalid.",
+              "fieldName": "invalid",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "name": "is-date-disabled",
               "type": {
@@ -2008,6 +2327,30 @@
                 "module": "src/vaadin-date-picker-mixin.js"
               }
             },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "LabelMixin",
+                "package": "@vaadin/field-base/src/label-mixin.js"
+              }
+            },
+            {
+              "name": "manual-validation",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
+              "fieldName": "manualValidation",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "name": "max",
               "type": {
@@ -2080,6 +2423,18 @@
                 "package": "@vaadin/field-base/src/input-control-mixin.js"
               }
             },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Specifies that the user must fill in a value.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "ValidateMixin",
+                "package": "@vaadin/field-base/src/validate-mixin.js"
+              }
+            },
             {
               "name": "show-week-numbers",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "25.2.0-alpha1",
+  "version": "25.2.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -35,21 +35,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha1",
-    "@vaadin/button": "25.2.0-alpha1",
-    "@vaadin/component-base": "25.2.0-alpha1",
-    "@vaadin/field-base": "25.2.0-alpha1",
-    "@vaadin/input-container": "25.2.0-alpha1",
-    "@vaadin/overlay": "25.2.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha1",
+    "@vaadin/a11y-base": "25.2.0-alpha11",
+    "@vaadin/button": "25.2.0-alpha11",
+    "@vaadin/component-base": "25.2.0-alpha11",
+    "@vaadin/field-base": "25.2.0-alpha11",
+    "@vaadin/input-container": "25.2.0-alpha11",
+    "@vaadin/overlay": "25.2.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha1",
-    "@vaadin/chai-plugins": "25.2.0-alpha1",
-    "@vaadin/test-runner-commands": "25.2.0-alpha1",
+    "@vaadin/aura": "25.2.0-alpha11",
+    "@vaadin/chai-plugins": "25.2.0-alpha11",
+    "@vaadin/test-runner-commands": "25.2.0-alpha11",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha11",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "866f813f89655a351cbd25328eba1fcb317e267d"
+  "gitHead": "fdc37e932709f95491a027aeb2090911cb7528c6"
 }

package/src/styles/vaadin-date-picker-overlay-base-styles.js

@@ -13,19 +13,16 @@ export const datePickerOverlayStyles = css`
     box-sizing: content-box;
     width: var(
       --vaadin-date-picker-overlay-width,
-      calc(
+      round(
         var(--vaadin-date-picker-date-width, 2rem) * 7 +
           var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s)) * 2 +
-          var(--vaadin-date-picker-year-scroller-width, 3rem)
+          var(--vaadin-date-picker-year-scroller-width, 3rem),
+        1px
       )
     );
     cursor: default;
   }
 
-  :host([fullscreen]) {
-    --vaadin-date-picker-date-width: calc(100% / 7);
-  }
-
   :host([fullscreen]) [part='backdrop'] {
     display: block;
   }

package/src/styles/vaadin-date-picker-overlay-content-base-styles.js

@@ -50,13 +50,18 @@ export const overlayContentStyles = css`
   }
 
   ::slotted([slot='months']) {
-    --vaadin-infinite-scroller-item-height: calc(
-      16.5rem + var(--_vaadin-date-picker-week-numbers-visible, 0) *
-        (var(--vaadin-date-picker-week-number-font-size, 0.7rem) * 1.25 * 6)
+    --vaadin-infinite-scroller-item-height: round(
+      var(--vaadin-date-picker-month-header-font-size, 0.9375rem) + 0.75rem +
+        var(--vaadin-date-picker-date-height, 2rem) * 7 + var(--_vaadin-date-picker-week-numbers-visible, 0) *
+        (
+          var(--vaadin-date-picker-week-number-font-size, 0.7rem) * 6.25 +
+            var(--vaadin-date-picker-month-padding, var(--vaadin-padding-s)) * 3
+        ),
+      1px
     );
   }
 
-  :host([desktop]) ::slotted([slot='months']) {
+  :host(:not([fullscreen])) ::slotted([slot='months']) {
     border-bottom: 1px solid var(--vaadin-border-color-secondary);
   }