@vaadin/overlay 24.8.0-alpha8 → 25.0.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/*-base-styles.d.ts",
+    "!src/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js"
@@ -30,24 +32,21 @@
     "vaadin-overlay",
     "overlay",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha8",
-    "@vaadin/component-base": "24.8.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-alpha1",
+    "@vaadin/component-base": "25.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha8",
-    "@vaadin/test-runner-commands": "24.8.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

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

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const overlayStyles = css`
+  @layer base {
+    :host {
+      z-index: 200;
+      position: fixed;
+
+      /* Despite of what the names say, <vaadin-overlay> is just a container
+          for position/sizing/alignment. The actual overlay is the overlay part. */
+
+      /* Default position constraints. Themes can
+          override this to adjust the gap between the overlay and the viewport. */
+      inset: 8px;
+      bottom: var(--vaadin-overlay-viewport-bottom);
+
+      /* Use flexbox alignment for the overlay part. */
+      display: flex;
+      flex-direction: column; /* makes dropdowns sizing easier */
+      /* Align to center by default. */
+      align-items: center;
+      justify-content: center;
+
+      /* Allow centering when max-width/max-height applies. */
+      margin: auto;
+
+      /* The host is not clickable, only the overlay part is. */
+      pointer-events: none;
+
+      /* Remove tap highlight on touch devices. */
+      -webkit-tap-highlight-color: transparent;
+
+      /* CSS API for host */
+      --vaadin-overlay-viewport-bottom: 8px;
+    }
+
+    :host([hidden]),
+    :host(:not([opened]):not([closing])),
+    :host(:not([opened]):not([closing])) [part='overlay'] {
+      display: none !important;
+    }
+
+    [part='overlay'] {
+      background: var(--vaadin-overlay-background, var(--_vaadin-background));
+      border: var(--vaadin-overlay-border, 1px solid var(--_vaadin-border-color));
+      border-radius: var(--vaadin-overlay-border-radius, var(--_vaadin-radius-m));
+      box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px hsl(0 0 0 / 0.3));
+      box-sizing: border-box;
+      max-width: 100%;
+      overflow: auto;
+      overscroll-behavior: contain;
+      pointer-events: auto;
+      -webkit-tap-highlight-color: initial;
+    }
+
+    [part='backdrop'] {
+      background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
+      content: '';
+      inset: 0;
+      pointer-events: auto;
+      position: fixed;
+      z-index: -1;
+    }
+
+    @media (forced-colors: active) {
+      [part='overlay'] {
+        border: 3px solid;
+      }
+
+      [part='overlay']:focus-visible {
+        outline: var(--vaadin-focus-ring-width) solid;
+        outline-offset: 1px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const overlayStyles = css`
+  :host {
+    z-index: 200;
+    position: fixed;
+
+    /* Despite of what the names say, <vaadin-overlay> is just a container
+          for position/sizing/alignment. The actual overlay is the overlay part. */
+
+    /* Default position constraints: the entire viewport. Note: themes can
+          override this to introduce gaps between the overlay and the viewport. */
+    inset: 0;
+    bottom: var(--vaadin-overlay-viewport-bottom);
+
+    /* Use flexbox alignment for the overlay part. */
+    display: flex;
+    flex-direction: column; /* makes dropdowns sizing easier */
+    /* Align to center by default. */
+    align-items: center;
+    justify-content: center;
+
+    /* Allow centering when max-width/max-height applies. */
+    margin: auto;
+
+    /* The host is not clickable, only the overlay part is. */
+    pointer-events: none;
+
+    /* Remove tap highlight on touch devices. */
+    -webkit-tap-highlight-color: transparent;
+
+    /* CSS API for host */
+    --vaadin-overlay-viewport-bottom: 0;
+  }
+
+  :host([hidden]),
+  :host(:not([opened]):not([closing])),
+  :host(:not([opened]):not([closing])) [part='overlay'] {
+    display: none !important;
+  }
+
+  [part='overlay'] {
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    pointer-events: auto;
+
+    /* Prevent overflowing the host */
+    max-width: 100%;
+    box-sizing: border-box;
+
+    -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
+  }
+
+  [part='backdrop'] {
+    z-index: -1;
+    content: '';
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    inset: 0;
+    pointer-events: auto;
+  }
+`;

package/src/vaadin-overlay-focus-mixin.d.ts

@@ -4,11 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 
 export declare function OverlayFocusMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> & Constructor<OverlayFocusMixinClass> & T;
+): Constructor<OverlayFocusMixinClass> & T;
 
 export declare class OverlayFocusMixinClass {
   /**

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

@@ -7,14 +7,12 @@ import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller
 import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { getDeepActiveElement, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 
 /**
  * @polymerMixin
- * @mixes ControllerMixin
  */
 export const OverlayFocusMixin = (superClass) =>
-  class OverlayFocusMixin extends ControllerMixin(superClass) {
+  class OverlayFocusMixin extends superClass {
     static get properties() {
       return {
         /**

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

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { OverlayFocusMixinClass } from './vaadin-overlay-focus-mixin.js';
 import type { OverlayStackMixinClass } from './vaadin-overlay-stack-mixin.js';
 
@@ -12,11 +11,7 @@ export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: ob
 
 export declare function OverlayMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> &
-  Constructor<OverlayFocusMixinClass> &
-  Constructor<OverlayMixinClass> &
-  Constructor<OverlayStackMixinClass> &
-  T;
+): Constructor<OverlayFocusMixinClass> & Constructor<OverlayMixinClass> & Constructor<OverlayStackMixinClass> & T;
 
 export declare class OverlayMixinClass {
   /**

package/src/vaadin-overlay-mixin.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
 import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
@@ -266,11 +265,12 @@ export const OverlayMixin = (superClass) =>
 
         this._animatedOpening();
 
-        afterNextRender(this, () => {
-          this._trapFocus();
+        this.__scheduledOpen = requestAnimationFrame(() => {
+          setTimeout(() => {
+            this._trapFocus();
 
-          const evt = new CustomEvent('vaadin-overlay-open', { bubbles: true });
-          this.dispatchEvent(evt);
+            this.dispatchEvent(new CustomEvent('vaadin-overlay-open', { bubbles: true }));
+          });
         });
 
         document.addEventListener('keydown', this._boundKeydownListener);
@@ -279,6 +279,11 @@ export const OverlayMixin = (superClass) =>
           this._addGlobalListeners();
         }
       } else if (wasOpened) {
+        if (this.__scheduledOpen) {
+          cancelAnimationFrame(this.__scheduledOpen);
+          this.__scheduledOpen = null;
+        }
+
         this._resetFocus();
 
         this._animatedClosing();

package/src/vaadin-overlay-styles.js

@@ -3,65 +3,4 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css } from 'lit';
-
-export const overlayStyles = css`
-  :host {
-    z-index: 200;
-    position: fixed;
-
-    /* Despite of what the names say, <vaadin-overlay> is just a container
-          for position/sizing/alignment. The actual overlay is the overlay part. */
-
-    /* Default position constraints: the entire viewport. Note: themes can
-          override this to introduce gaps between the overlay and the viewport. */
-    inset: 0;
-    bottom: var(--vaadin-overlay-viewport-bottom);
-
-    /* Use flexbox alignment for the overlay part. */
-    display: flex;
-    flex-direction: column; /* makes dropdowns sizing easier */
-    /* Align to center by default. */
-    align-items: center;
-    justify-content: center;
-
-    /* Allow centering when max-width/max-height applies. */
-    margin: auto;
-
-    /* The host is not clickable, only the overlay part is. */
-    pointer-events: none;
-
-    /* Remove tap highlight on touch devices. */
-    -webkit-tap-highlight-color: transparent;
-
-    /* CSS API for host */
-    --vaadin-overlay-viewport-bottom: 0;
-  }
-
-  :host([hidden]),
-  :host(:not([opened]):not([closing])),
-  :host(:not([opened]):not([closing])) [part='overlay'] {
-    display: none !important;
-  }
-
-  [part='overlay'] {
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-    pointer-events: auto;
-
-    /* Prevent overflowing the host */
-    max-width: 100%;
-    box-sizing: border-box;
-
-    -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
-  }
-
-  [part='backdrop'] {
-    z-index: -1;
-    content: '';
-    background: rgba(0, 0, 0, 0.5);
-    position: fixed;
-    inset: 0;
-    pointer-events: auto;
-  }
-`;
+export { overlayStyles } from './vaadin-overlay-core-styles.js';

package/src/vaadin-overlay.js

@@ -3,16 +3,14 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.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 { processTemplates } from '@vaadin/component-base/src/templates.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { OverlayMixin } from './vaadin-overlay-mixin.js';
 import { overlayStyles } from './vaadin-overlay-styles.js';
 
-registerStyles('vaadin-overlay', overlayStyles, { moduleId: 'vaadin-overlay-styles' });
-
 /**
  * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
  * can be populated imperatively by using `renderer` callback function.
@@ -78,10 +76,19 @@ registerStyles('vaadin-overlay', overlayStyles, { moduleId: 'vaadin-overlay-styl
  * @mixes DirMixin
  * @mixes OverlayMixin
  */
-class Overlay extends OverlayMixin(ThemableMixin(DirMixin(PolymerElement))) {
-  static get template() {
+class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-overlay';
+  }
+
+  static get styles() {
+    return overlayStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <div part="content" id="content">
           <slot></slot>
@@ -90,17 +97,6 @@ class Overlay extends OverlayMixin(ThemableMixin(DirMixin(PolymerElement))) {
     `;
   }
 
-  static get is() {
-    return 'vaadin-overlay';
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    processTemplates(this);
-  }
-
   /**
    * @event vaadin-overlay-open
    * Fired after the overlay is opened.

package/src/vaadin-lit-overlay.d.ts

@@ -1,23 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { LitElement } from 'lit';
-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 { OverlayMixin } from './vaadin-overlay-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-overlay>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-declare class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {}
-
-export { Overlay };

package/src/vaadin-lit-overlay.js

@@ -1,47 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { OverlayMixin } from './vaadin-overlay-mixin.js';
-import { overlayStyles } from './vaadin-overlay-styles.js';
-
-/**
- * LitElement based version of `<vaadin-overlay>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-overlay';
-  }
-
-  static get styles() {
-    return overlayStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <div part="content" id="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(Overlay);
-
-export { Overlay };

package/theme/material/vaadin-overlay-styles.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles('vaadin-overlay', overlay, { moduleId: 'material-vaadin-overlay' });

package/theme/material/vaadin-overlay.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-overlay-styles.js';
-import '../../src/vaadin-overlay.js';

package/theme/material/vaadin-overlay.js

@@ -1,2 +0,0 @@
-import './vaadin-overlay-styles.js';
-import '../../src/vaadin-overlay.js';