@vaadin/date-picker 24.8.0-alpha9 → 25.0.0-alpha2

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -14,163 +14,9 @@
   "contributions": {
     "html": {
       "elements": [
-        {
-          "name": "vaadin-date-picker-light",
-          "description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n  <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
-          "extension": true,
-          "attributes": [
-            {
-              "name": "?disabled",
-              "description": "If true, the user cannot interact with this element.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?autofocus",
-              "description": "Specify that this control should have input focus when the page loads.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?invalid",
-              "description": "Set to true when the field is invalid.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?manualValidation",
-              "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.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?required",
-              "description": "Specifies that the user must fill in a value.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?opened",
-              "description": "Set true to open the date selector overlay.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?autoOpenDisabled",
-              "description": "Set true to prevent the overlay from opening automatically.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?showWeekNumbers",
-              "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).",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?isDateDisabled",
-              "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.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".i18n",
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // An array with the full names of months starting\n  // with January.\n  monthNames: [\n    'January', 'February', 'March', 'April', 'May',\n    'June', 'July', 'August', 'September',\n    'October', 'November', 'December'\n  ],\n\n  // An array of weekday names starting with Sunday. Used\n  // in screen reader announcements.\n  weekdays: [\n    'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n    'Thursday', 'Friday', 'Saturday'\n  ],\n\n  // An array of short weekday names starting with Sunday.\n  // Displayed in the calendar.\n  weekdaysShort: [\n    'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n  ],\n\n  // An integer indicating the first day of the week\n  // (0 = Sunday, 1 = Monday, etc.).\n  firstDayOfWeek: 0,\n\n  // Translation of the Today shortcut button text.\n  today: 'Today',\n\n  // Translation of the Cancel button text.\n  cancel: 'Cancel',\n\n  // Used for adjusting the year value when parsing dates with short years.\n  // The year values between 0 and 99 are evaluated and adjusted.\n  // Example: for a referenceDate of 1970-10-30;\n  //   dateToBeParsed: 40-10-30, result: 1940-10-30\n  //   dateToBeParsed: 80-10-30, result: 1980-10-30\n  //   dateToBeParsed: 10-10-30, result: 2010-10-30\n  // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n  // The default value is the current date.\n  referenceDate: '',\n\n  // A function to format given `Object` as\n  // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n  // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n  formatDate: d => {\n    // returns a string representation of the given\n    // object in 'MM/DD/YYYY' -format\n  },\n\n  // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n  // Must properly parse (at least) text formatted by `formatDate`.\n  // Setting the property to null will disable keyboard input feature.\n  // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n  parseDate: text => {\n    // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n    // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n  }\n\n  // A function to format given `monthName` and\n  // `fullYear` integer as calendar title string.\n  formatTitle: (monthName, fullYear) => {\n    return monthName + ' ' + fullYear;\n  }\n}\n```",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".value",
-              "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\"`",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".overlayClass",
-              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".initialPosition",
-              "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".min",
-              "description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".max",
-              "description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".attrForValue",
-              "description": "Name of the two-way data-bindable property representing the\nvalue of the custom input field.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@validated",
-              "description": "Fired whenever the field is validated.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@change",
-              "description": "Fired when the user commits a value change.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@opened-changed",
-              "description": "Fired when `opened` property value changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@value-changed",
-              "description": "Fired when `value` property value changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@invalid-changed",
-              "description": "Fired when the `invalid` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            }
-          ]
-        },
         {
           "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.8.0-alpha9/#/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.8.0-alpha9/#/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.8.0-alpha9/#/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.8.0-alpha9/#/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`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\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",
+          "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/25.0.0-alpha2/#/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\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/25.0.0-alpha2/#/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/25.0.0-alpha2/#/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`past`                | Date element corresponding to the date in the past\n`future`              | Date element corresponding to the date in the future\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": [
             {

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

@@ -1,112 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-export { DatePickerDate, DatePickerI18n } from './vaadin-date-picker-mixin.js';
-
-/**
- * Fired when the user commits a value change.
- */
-export type DatePickerLightChangeEvent = Event & {
-  target: DatePickerLight;
-};
-
-/**
- * Fired when the `opened` property changes.
- */
-export type DatePickerLightOpenedChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when the `invalid` property changes.
- */
-export type DatePickerLightInvalidChangedEvent = CustomEvent<{ value: boolean }>;
-
-/**
- * Fired when the `value` property changes.
- */
-export type DatePickerLightValueChangedEvent = CustomEvent<{ value: string }>;
-
-/**
- * Fired whenever the field is validated.
- */
-export type DatePickerLightValidatedEvent = CustomEvent<{ valid: boolean }>;
-
-export interface DatePickerLightCustomEventMap {
-  'opened-changed': DatePickerLightOpenedChangedEvent;
-
-  'invalid-changed': DatePickerLightInvalidChangedEvent;
-
-  'value-changed': DatePickerLightValueChangedEvent;
-
-  validated: DatePickerLightValidatedEvent;
-}
-
-export interface DatePickerLightEventMap extends HTMLElementEventMap, DatePickerLightCustomEventMap {
-  change: DatePickerLightChangeEvent;
-}
-
-/**
- * `<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing
- * only the scrollable month calendar view and leaving the input field definition to the user.
- *
- * To create a custom input field, you need to add a child element which has a two-way
- * data-bindable property representing the input value. The property name is expected
- * to be `bindValue` by default. See the example below for a simplest possible example
- * using an `<input>` element.
- *
- * ```html
- * <vaadin-date-picker-light attr-for-value="value">
- *   <input class="input">
- * </vaadin-date-picker-light>
- * ```
- *
- * ### Styling
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
- * In addition to `<vaadin-date-picker-light>` itself, the following
- * internal components are themable:
- *
- * - `<vaadin-date-picker-overlay>`
- * - `<vaadin-date-picker-overlay-content>`
- * - `<vaadin-month-calendar>`
- *
- * Note: the `theme` attribute value set on `<vaadin-date-picker-light>`
- * is propagated to the internal themable components listed above.
- *
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- * @fires {CustomEvent} validated - Fired whenever the field is validated.
- */
-declare class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(HTMLElement))) {
-  /**
-   * Name of the two-way data-bindable property representing the
-   * value of the custom input field.
-   */
-  attrForValue: string;
-
-  addEventListener<K extends keyof DatePickerLightEventMap>(
-    type: K,
-    listener: (this: DatePickerLight, ev: DatePickerLightEventMap[K]) => void,
-    options?: AddEventListenerOptions | boolean,
-  ): void;
-
-  removeEventListener<K extends keyof DatePickerLightEventMap>(
-    type: K,
-    listener: (this: DatePickerLight, ev: DatePickerLightEventMap[K]) => void,
-    options?: EventListenerOptions | boolean,
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-date-picker-light': DatePickerLight;
-  }
-}
-
-export { DatePickerLight };

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

@@ -1,133 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-date-picker-overlay-content.js';
-import './vaadin-date-picker-overlay.js';
-import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-
-/**
- * `<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing
- * only the scrollable month calendar view and leaving the input field definition to the user.
- *
- * To create a custom input field, you need to add a child element which has a two-way
- * data-bindable property representing the input value. The property name is expected
- * to be `bindValue` by default. See the example below for a simplest possible example
- * using an `<input>` element.
- *
- * ```html
- * <vaadin-date-picker-light attr-for-value="value">
- *   <input class="input">
- * </vaadin-date-picker-light>
- * ```
- *
- * ### Styling
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
- * In addition to `<vaadin-date-picker-light>` itself, the following
- * internal components are themable:
- *
- * - `<vaadin-date-picker-overlay>`
- * - `<vaadin-date-picker-overlay-content>`
- * - `<vaadin-month-calendar>`
- *
- * Note: the `theme` attribute value set on `<vaadin-date-picker-light>`
- * is propagated to the internal themable components listed above.
- *
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- * @fires {CustomEvent} validated - Fired whenever the field is validated.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DatePickerMixin
- */
-class DatePickerLight extends ThemableMixin(DatePickerMixin(ValidateMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-block;
-        }
-
-        :host([opened]) {
-          pointer-events: auto;
-        }
-      </style>
-      <slot></slot>
-
-      <vaadin-date-picker-overlay
-        id="overlay"
-        fullscreen$="[[_fullscreen]]"
-        opened="{{opened}}"
-        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
-        on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-closing="_onOverlayClosed"
-        restore-focus-on-close
-        restore-focus-node="[[inputElement]]"
-        theme$="[[_theme]]"
-      ></vaadin-date-picker-overlay>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-date-picker-light';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Name of the two-way data-bindable property representing the
-       * value of the custom input field.
-       * @attr {string} attr-for-value
-       * @type {string}
-       */
-      attrForValue: {
-        type: String,
-        value: 'value',
-      },
-    };
-  }
-
-  /**
-   * This method from InputMixin is overridden to make
-   * the input element value property customizable.
-   *
-   * @protected
-   * @override
-   * @return {string}
-   */
-  get _inputElementValueProperty() {
-    return dashToCamelCase(this.attrForValue);
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    const cssSelector = 'vaadin-text-field,.input';
-    this._setInputElement(this.querySelector(cssSelector));
-    this._setFocusElement(this.inputElement);
-  }
-
-  // Workaround https://github.com/vaadin/web-components/issues/2855
-  /** @protected */
-  _openedChanged(opened) {
-    super._openedChanged(opened);
-
-    this.$.overlay.positionTarget = this.inputElement;
-    this.$.overlay.noVerticalOverlap = true;
-  }
-}
-
-defineCustomElement(DatePickerLight);
-
-export { DatePickerLight };

package/src/vaadin-lit-date-picker-overlay-content.js

@@ -1,70 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/button/src/vaadin-lit-button.js';
-import './vaadin-date-picker-month-scroller.js';
-import './vaadin-date-picker-year-scroller.js';
-import './vaadin-lit-date-picker-year.js';
-import './vaadin-lit-month-calendar.js';
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerOverlayContentMixin } from './vaadin-date-picker-overlay-content-mixin.js';
-import { overlayContentStyles } from './vaadin-date-picker-overlay-content-styles.js';
-
-/**
- * @extends HTMLElement
- * @private
- */
-class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
-  ThemableMixin(DirMixin(PolylitMixin(LitElement))),
-) {
-  static get is() {
-    return 'vaadin-date-picker-overlay-content';
-  }
-
-  static get styles() {
-    return overlayContentStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="overlay-header" @touchend="${this._preventDefault}" aria-hidden="true">
-        <div part="label">${this._formatDisplayed(this.selectedDate, this.i18n, this.label)}</div>
-        <div part="clear-button" ?hidden="${!this.selectedDate}"></div>
-        <div part="toggle-button"></div>
-
-        <div part="years-toggle-button" ?hidden="${this._desktopMode}" aria-hidden="true">
-          ${this._yearAfterXMonths(this._visibleMonthIndex)}
-        </div>
-      </div>
-
-      <div id="scrollers">
-        <slot name="months"></slot>
-        <slot name="years"></slot>
-      </div>
-
-      <div @touchend="${this._preventDefault}" role="toolbar" part="toolbar">
-        <slot name="today-button"></slot>
-        <slot name="cancel-button"></slot>
-      </div>
-    `;
-  }
-
-  /** @protected */
-  firstUpdated() {
-    super.firstUpdated();
-
-    this.setAttribute('role', 'dialog');
-
-    this._addListeners();
-    this._initControllers();
-  }
-}
-
-defineCustomElement(DatePickerOverlayContent);

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

@@ -1,46 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerOverlayMixin } from './vaadin-date-picker-overlay-mixin.js';
-import { datePickerOverlayStyles } from './vaadin-date-picker-overlay-styles.js';
-
-/**
- * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @mixes DatePickerOverlayMixin
- * @mixes DirMixin
- * @mixes ThemableMixin
- * @private
- */
-class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-date-picker-overlay';
-  }
-
-  static get styles() {
-    return [overlayStyles, datePickerOverlayStyles];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay">
-        <div part="content" id="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(DatePickerOverlay);

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

@@ -1,41 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css, html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DatePickerYearMixin } from './vaadin-date-picker-year-mixin.js';
-
-/**
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DatePickerYearMixin
- * @private
- */
-export class DatePickerYear extends ThemableMixin(DatePickerYearMixin(PolylitMixin(LitElement))) {
-  static get is() {
-    return 'vaadin-date-picker-year';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="year-number">${this.year}</div>
-      <div part="year-separator" aria-hidden="true"></div>
-    `;
-  }
-}
-
-defineCustomElement(DatePickerYear);