@vaadin/overlay 25.0.0-alpha4 → 25.0.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "25.0.0-alpha4",
+  "version": "25.0.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -36,17 +36,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha4",
-    "@vaadin/component-base": "25.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
+    "@vaadin/a11y-base": "25.0.0-alpha6",
+    "@vaadin/component-base": "25.0.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha4",
-    "@vaadin/test-runner-commands": "25.0.0-alpha4",
+    "@vaadin/chai-plugins": "25.0.0-alpha6",
+    "@vaadin/test-runner-commands": "25.0.0-alpha6",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
+  "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
 }

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

@@ -47,10 +47,10 @@ export const overlayStyles = css`
     }
 
     [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));
+      background: var(--vaadin-overlay-background, var(--vaadin-background-color));
+      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 rgba(0, 0, 0, 0.3));
       box-sizing: border-box;
       max-width: 100%;
       overflow: auto;

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

@@ -45,7 +45,6 @@ export const overlayStyles = css`
   }
 
   [part='overlay'] {
-    -webkit-overflow-scrolling: touch;
     overflow: auto;
     pointer-events: auto;
 

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

@@ -7,6 +7,13 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { OverlayFocusMixinClass } from './vaadin-overlay-focus-mixin.js';
 import type { OverlayStackMixinClass } from './vaadin-overlay-stack-mixin.js';
 
+export type OverlayBounds = {
+  top?: number | string;
+  left?: number | string;
+  width?: number | string;
+  height?: number | string;
+};
+
 export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
 
 export declare function OverlayMixin<T extends Constructor<HTMLElement>>(
@@ -58,6 +65,11 @@ export declare class OverlayMixinClass {
 
   close(sourceEvent?: Event | null): void;
 
+  /**
+   * Updates the coordinates of the overlay.
+   */
+  setBounds(bounds: OverlayBounds, absolute?: boolean): void;
+
   /**
    * Requests an update for the content of the overlay.
    * While performing the update, it invokes the renderer passed in the `renderer` property.

package/src/vaadin-overlay-mixin.js

@@ -182,6 +182,29 @@ export const OverlayMixin = (superClass) =>
       }
     }
 
+    /**
+     * Updates the coordinates of the overlay.
+     * @param {!OverlayBoundsParam} bounds
+     * @param {boolean} absolute
+     */
+    setBounds(bounds, absolute = true) {
+      const overlay = this.$.overlay;
+      const parsedBounds = { ...bounds };
+
+      if (absolute && overlay.style.position !== 'absolute') {
+        overlay.style.position = 'absolute';
+      }
+
+      Object.keys(parsedBounds).forEach((arg) => {
+        // Allow setting width or height to `null`
+        if (parsedBounds[arg] !== null && !isNaN(parsedBounds[arg])) {
+          parsedBounds[arg] = `${parsedBounds[arg]}px`;
+        }
+      });
+
+      Object.assign(overlay.style, parsedBounds);
+    }
+
     /** @private */
     _detectIosNavbar() {
       /* c8 ignore next 15 */

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 { 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-core-styles.js';
 import { OverlayMixin } from './vaadin-overlay-mixin.js';
@@ -76,7 +77,7 @@ import { OverlayMixin } from './vaadin-overlay-mixin.js';
  * @mixes DirMixin
  * @mixes OverlayMixin
  */
-class Overlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Overlay extends OverlayMixin(DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-overlay';
   }