@vaadin/overlay 25.3.0-alpha12 → 25.3.0-alpha13

package/custom-elements.json

@@ -1020,6 +1020,7 @@
           },
           "tagName": "vaadin-overlay",
           "customElement": true,
+          "deprecated": "`<vaadin-overlay>` is deprecated and will be removed in Vaadin 26. Consider using `OverlayMixin` and `PositionMixin` instead.",
           "attributes": [
             {
               "name": "autofocus",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.3.0-alpha12",
+  "version": "25.3.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha12",
-    "@vaadin/component-base": "25.3.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha12",
+    "@vaadin/a11y-base": "25.3.0-alpha13",
+    "@vaadin/component-base": "25.3.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha13",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha12",
-    "@vaadin/chai-plugins": "25.3.0-alpha12",
-    "@vaadin/test-runner-commands": "25.3.0-alpha12",
+    "@vaadin/aura": "25.3.0-alpha13",
+    "@vaadin/chai-plugins": "25.3.0-alpha13",
+    "@vaadin/test-runner-commands": "25.3.0-alpha13",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha12",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha13",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "0f0337783efe38332f5dc6a8968f207d2982de4b"
+  "gitHead": "e23e44d29e6bc1e47245d5e2cc0e4b022ec61818"
 }

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

@@ -56,6 +56,11 @@ const overlayBase = css`
     display: none !important;
   }
 
+  :host([suppressed]) [part='overlay'],
+  :host([suppressed]) ::slotted(*) {
+    pointer-events: none !important;
+  }
+
   [part='overlay'] {
     color: var(--vaadin-overlay-text-color, var(--vaadin-text-color));
     background: var(--vaadin-overlay-background, var(--vaadin-background-color));

package/src/vaadin-overlay-mixin.js

@@ -463,7 +463,7 @@ export const OverlayMixin = (superClass) =>
     _finishClosing() {
       this._detachOverlay();
       this._removeAttachedInstance();
-      this.$.overlay.style.removeProperty('pointer-events');
+      this.toggleAttribute('suppressed', false);
       setOverlayStateAttribute(this, 'closing', false);
       this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
     }

package/src/vaadin-overlay-stack-mixin.js

@@ -106,10 +106,10 @@ export const OverlayStackMixin = (superClass) =>
         document.body.style.pointerEvents = 'none';
       }
 
-      // Disable pointer events in other attached overlays
+      // Suppress pointer events in other attached overlays
       getAttachedInstances().forEach((el) => {
         if (el !== this) {
-          el.$.overlay.style.pointerEvents = 'none';
+          el.toggleAttribute('suppressed', true);
         }
       });
     }
@@ -122,7 +122,7 @@ export const OverlayStackMixin = (superClass) =>
         delete this._previousDocumentPointerEvents;
       }
 
-      // Restore pointer events in the previous overlay(s)
+      // Stop suppressing pointer events in the previous overlay(s)
       const instances = getAttachedInstances();
 
       let el;
@@ -132,7 +132,7 @@ export const OverlayStackMixin = (superClass) =>
           // Skip the current instance
           continue;
         }
-        el.$.overlay.style.removeProperty('pointer-events');
+        el.toggleAttribute('suppressed', false);
         if (!el.modeless) {
           // Stop after the last modal
           break;

package/src/vaadin-overlay.d.ts

@@ -118,6 +118,8 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  * @fires {CustomEvent} vaadin-overlay-closed - Fired after the overlay is closed.
  * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay is closed on outside click. Calling `preventDefault()` on the event cancels the closing.
  * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay is closed on Escape key press. Calling `preventDefault()` on the event cancels the closing.
+ * @deprecated `<vaadin-overlay>` is deprecated and will be removed in Vaadin 26.
+ * Consider using `OverlayMixin` and `PositionMixin` instead.
  */
 declare class Overlay extends OverlayMixin(ThemableMixin(DirMixin(HTMLElement))) {
   addEventListener<K extends keyof OverlayEventMap>(

package/src/vaadin-overlay.js

@@ -7,6 +7,7 @@ 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 { issueWarning } from '@vaadin/component-base/src/warnings.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { overlayStyles } from './styles/vaadin-overlay-base-styles.js';
@@ -73,6 +74,8 @@ import { OverlayMixin } from './vaadin-overlay-mixin.js';
  *
  * @customElement vaadin-overlay
  * @extends HTMLElement
+ * @deprecated `<vaadin-overlay>` is deprecated and will be removed in Vaadin 26.
+ * Consider using `OverlayMixin` and `PositionMixin` instead.
  */
 class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
@@ -94,6 +97,15 @@ class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjec
       </div>
     `;
   }
+
+  /** @protected */
+  firstUpdated() {
+    super.firstUpdated();
+
+    issueWarning(
+      '`<vaadin-overlay>` is deprecated and will be removed in Vaadin 26. Consider using `OverlayMixin` and `PositionMixin` instead.',
+    );
+  }
 }
 
 defineCustomElement(Overlay);