@vaadin/date-picker 24.2.0-alpha4 → 24.2.0-dev.538d07bdf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "24.2.0-alpha4",
+  "version": "24.2.0-dev.538d07bdf",
   "publishConfig": {
     "access": "public"
   },
@@ -36,24 +36,24 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.2.0-alpha4",
-    "@vaadin/button": "24.2.0-alpha4",
-    "@vaadin/component-base": "24.2.0-alpha4",
-    "@vaadin/field-base": "24.2.0-alpha4",
-    "@vaadin/input-container": "24.2.0-alpha4",
-    "@vaadin/overlay": "24.2.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha4"
+    "@vaadin/a11y-base": "24.2.0-dev.538d07bdf",
+    "@vaadin/button": "24.2.0-dev.538d07bdf",
+    "@vaadin/component-base": "24.2.0-dev.538d07bdf",
+    "@vaadin/field-base": "24.2.0-dev.538d07bdf",
+    "@vaadin/input-container": "24.2.0-dev.538d07bdf",
+    "@vaadin/overlay": "24.2.0-dev.538d07bdf",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.538d07bdf",
+    "@vaadin/vaadin-material-styles": "24.2.0-dev.538d07bdf",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.538d07bdf"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.4.3",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "aaf7c5ebfea62628210eead4229be1718ac6b129"
+  "gitHead": "86c2fd5f37cf1240af98f7c7d752518c8d701db2"
 }

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

@@ -3,34 +3,33 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-date-picker-overlay',
-  css`
-    [part='overlay'] {
-      display: flex;
-      flex: auto;
-    }
+const datePickerOverlayStyles = css`
+  [part='overlay'] {
+    display: flex;
+    flex: auto;
+  }
 
-    [part~='content'] {
-      flex: auto;
-    }
+  [part~='content'] {
+    flex: auto;
+  }
 
-    @media (forced-colors: active) {
-      [part='overlay'] {
-        outline: 3px solid;
-      }
+  @media (forced-colors: active) {
+    [part='overlay'] {
+      outline: 3px solid;
     }
-  `,
-  {
-    moduleId: 'vaadin-date-picker-overlay-styles',
-  },
-);
+  }
+`;
 
-let memoizedTemplate;
+registerStyles('vaadin-date-picker-overlay', [overlayStyles, datePickerOverlayStyles], {
+  moduleId: 'vaadin-date-picker-overlay-styles',
+});
 
 /**
  * An element used internally by `<vaadin-date-picker>`. Not intended to be used separately.
@@ -38,18 +37,20 @@ let memoizedTemplate;
  * @extends Overlay
  * @private
  */
-class DatePickerOverlay extends PositionMixin(Overlay) {
+class DatePickerOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-date-picker-overlay';
   }
 
   static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
-    }
-
-    return memoizedTemplate;
+    return html`
+      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div part="overlay" id="overlay">
+        <div part="content" id="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
 }
 

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

@@ -1,6 +1,5 @@
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

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

@@ -1,4 +1,3 @@
-import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';