@vaadin/notification 25.0.0-alpha7 → 25.0.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -37,17 +37,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/lit-renderer": "25.0.0-alpha7",
-    "@vaadin/overlay": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@vaadin/component-base": "25.0.0-alpha9",
+    "@vaadin/lit-renderer": "25.0.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/button": "25.0.0-alpha7",
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/button": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-alpha9",
+    "@vaadin/test-runner-commands": "25.0.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

package/src/styles/vaadin-notification-container-core-styles.js

@@ -8,13 +8,20 @@ import { css } from 'lit';
 export const notificationContainerStyles = css`
   :host {
     position: fixed;
-    z-index: 1000;
     inset: 0;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     pointer-events: none;
+
+    /* Override native [popover] user agent styles */
+    width: auto;
+    height: auto;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    overflow: visible;
   }
 
   [region-group] {

package/src/vaadin-notification-mixin.d.ts

@@ -5,7 +5,6 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import type { OverlayStackMixinClass } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import type { Notification } from './vaadin-notification.js';
 
@@ -27,7 +26,7 @@ export type NotificationRenderer = (root: HTMLElement, notification: Notificatio
  */
 export declare function NotificationContainerMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<NotificationContainerMixinClass> & Constructor<OverlayStackMixinClass> & T;
+): Constructor<NotificationContainerMixinClass> & T;
 
 export declare class NotificationContainerMixinClass {
   /**

package/src/vaadin-notification-mixin.js

@@ -7,17 +7,15 @@ import { render } from 'lit';
 import { isTemplateResult } from 'lit/directive-helpers.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { OverlayStackMixin } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 /**
  * A mixin providing common notification container functionality.
  *
  * @polymerMixin
- * @mixes OverlayStackMixin
  */
 export const NotificationContainerMixin = (superClass) =>
-  class extends OverlayStackMixin(superClass) {
+  class extends superClass {
     static get properties() {
       return {
         /**
@@ -42,10 +40,28 @@ export const NotificationContainerMixin = (superClass) =>
       }
     }
 
+    /** @protected */
+    firstUpdated(props) {
+      super.firstUpdated(props);
+
+      this.popover = 'manual';
+    }
+
+    /**
+     * Move the notification container to the top of the stack.
+     */
+    bringToFront() {
+      if (this.matches(':popover-open')) {
+        this.hidePopover();
+        this.showPopover();
+      }
+    }
+
     /** @private */
     _openedChanged(opened) {
       if (opened) {
         document.body.appendChild(this);
+        this.showPopover();
         document.addEventListener('vaadin-overlay-close', this._boundVaadinOverlayClose);
         if (this._boundIosResizeListener) {
           this._detectIosNavbar();
@@ -53,6 +69,7 @@ export const NotificationContainerMixin = (superClass) =>
         }
       } else {
         document.body.removeChild(this);
+        this.hidePopover();
         document.removeEventListener('vaadin-overlay-close', this._boundVaadinOverlayClose);
         if (this._boundIosResizeListener) {
           window.removeEventListener('resize', this._boundIosResizeListener);
@@ -358,7 +375,11 @@ export const NotificationMixin = (superClass) =>
         return;
       }
 
-      this._container.bringToFront();
+      // Only call bringToFront if the container already has a child / was already opened.
+      // Otherwise, just setting `opened` on the container will make it the topmost overlay.
+      if (this._container.firstElementChild) {
+        this._container.bringToFront();
+      }
 
       this._card.slot = this.position;
       if (this._container.firstElementChild && /top/u.test(this.position)) {

package/src/vaadin-notification.js

@@ -25,7 +25,7 @@ import { NotificationContainerMixin, NotificationMixin } from './vaadin-notifica
  * @private
  */
 class NotificationContainer extends NotificationContainerMixin(
-  ThemableMixin(ElementMixin(LumoInjectionMixin(PolylitMixin(LitElement)))),
+  ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-notification-container';
@@ -63,7 +63,7 @@ class NotificationContainer extends NotificationContainerMixin(
  * @mixes ThemableMixin
  * @private
  */
-class NotificationCard extends ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))) {
+class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
   static get is() {
     return 'vaadin-notification-card';
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {