@vaadin/dialog 24.0.0-alpha8 → 24.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -39,18 +39,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha8",
-    "@vaadin/lit-renderer": "24.0.0-alpha8",
-    "@vaadin/overlay": "24.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
+    "@vaadin/component-base": "24.0.0-beta1",
+    "@vaadin/lit-renderer": "24.0.0-beta1",
+    "@vaadin/overlay": "24.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "24.0.0-alpha8",
-    "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-area": "24.0.0-alpha8",
+    "@vaadin/polymer-legacy-adapter": "24.0.0-beta1",
+    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/text-area": "24.0.0-beta1",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
+  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
 }

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

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 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';
+
+export type DialogOverlayBounds = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+export type DialogOverlayBoundsParam =
+  | DialogOverlayBounds
+  | {
+      top?: number | string;
+      left?: number | string;
+      width?: number | string;
+      height?: number | string;
+    };
+
+/**
+ * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
+ */
+export class DialogOverlay extends Overlay {
+  /**
+   * Retrieves the coordinates of the overlay.
+   */
+  getBounds(): DialogOverlayBounds;
+
+  /**
+   * Updates the coordinates of the overlay.
+   */
+  setBounds(bounds: DialogOverlayBoundsParam): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-dialog-overlay': DialogOverlay;
+  }
+}

package/src/vaadin-dialog-overlay.js

@@ -0,0 +1,376 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 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 { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-dialog-overlay',
+  css`
+    [part='header'],
+    [part='header-content'],
+    [part='footer'] {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      flex: none;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    [part='header'] {
+      flex-wrap: nowrap;
+    }
+
+    ::slotted([slot='header-content']),
+    ::slotted([slot='title']),
+    ::slotted([slot='footer']) {
+      display: contents;
+      pointer-events: auto;
+    }
+
+    ::slotted([slot='title']) {
+      font: inherit !important;
+      overflow-wrap: anywhere;
+    }
+
+    [part='header-content'] {
+      flex: 1;
+    }
+
+    :host([has-title]) [part='header-content'],
+    [part='footer'] {
+      justify-content: flex-end;
+    }
+
+    :host(:not([has-title]):not([has-header])) [part='header'],
+    :host(:not([has-header])) [part='header-content'],
+    :host(:not([has-title])) [part='title'],
+    :host(:not([has-footer])) [part='footer'] {
+      display: none !important;
+    }
+
+    :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
+      height: auto;
+    }
+
+    @media (min-height: 320px) {
+      :host(:is([has-title], [has-header], [has-footer])) .resizer-container {
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+
+    /*
+      NOTE(platosha): Make some min-width to prevent collapsing of the content
+      taking the parent width, e. g., <vaadin-grid> and such.
+    */
+    [part='content'] {
+      min-width: 12em; /* matches the default <vaadin-text-field> width */
+    }
+
+    :host([has-bounds-set]) [part='overlay'] {
+      max-width: none;
+    }
+  `,
+  { moduleId: 'vaadin-dialog-overlay-styles' },
+);
+
+let memoizedTemplate;
+
+/**
+ * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
+ *
+ * @extends Overlay
+ * @private
+ */
+export class DialogOverlay extends Overlay {
+  static get is() {
+    return 'vaadin-dialog-overlay';
+  }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
+      const overlayPart = memoizedTemplate.content.querySelector('[part="overlay"]');
+      const resizerContainer = document.createElement('section');
+      resizerContainer.id = 'resizerContainer';
+      resizerContainer.classList.add('resizer-container');
+      resizerContainer.appendChild(contentPart);
+      overlayPart.appendChild(resizerContainer);
+
+      const headerContainer = document.createElement('header');
+      headerContainer.setAttribute('part', 'header');
+      resizerContainer.insertBefore(headerContainer, contentPart);
+
+      const titleContainer = document.createElement('div');
+      titleContainer.setAttribute('part', 'title');
+      headerContainer.appendChild(titleContainer);
+
+      const titleSlot = document.createElement('slot');
+      titleSlot.setAttribute('name', 'title');
+      titleContainer.appendChild(titleSlot);
+
+      const headerContentContainer = document.createElement('div');
+      headerContentContainer.setAttribute('part', 'header-content');
+      headerContainer.appendChild(headerContentContainer);
+
+      const headerSlot = document.createElement('slot');
+      headerSlot.setAttribute('name', 'header-content');
+      headerContentContainer.appendChild(headerSlot);
+
+      const footerContainer = document.createElement('footer');
+      footerContainer.setAttribute('part', 'footer');
+      resizerContainer.appendChild(footerContainer);
+
+      const footerSlot = document.createElement('slot');
+      footerSlot.setAttribute('name', 'footer');
+      footerContainer.appendChild(footerSlot);
+    }
+    return memoizedTemplate;
+  }
+
+  static get observers() {
+    return [
+      '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
+      '_headerTitleChanged(headerTitle, opened)',
+    ];
+  }
+
+  static get properties() {
+    return {
+      modeless: Boolean,
+
+      withBackdrop: Boolean,
+
+      headerTitle: String,
+
+      headerRenderer: Function,
+
+      footerRenderer: Function,
+    };
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // Update overflow attribute on resize
+    this.__resizeObserver = new ResizeObserver(() => {
+      this.__updateOverflow();
+    });
+    this.__resizeObserver.observe(this.$.resizerContainer);
+
+    // Update overflow attribute on scroll
+    this.$.content.addEventListener('scroll', () => {
+      this.__updateOverflow();
+    });
+  }
+
+  /** @private */
+  __createContainer(slot) {
+    const container = document.createElement('div');
+    container.setAttribute('slot', slot);
+    return container;
+  }
+
+  /** @private */
+  __clearContainer(container) {
+    container.innerHTML = '';
+    // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
+    // When clearing the rendered content, this part needs to be manually disposed of.
+    // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
+    delete container._$litPart$;
+  }
+
+  /** @private */
+  __initContainer(container, slot) {
+    if (container) {
+      // Reset existing container in case if a new renderer is set.
+      this.__clearContainer(container);
+    } else {
+      // Create the container, but wait to append it until requestContentUpdate is called.
+      container = this.__createContainer(slot);
+    }
+    return container;
+  }
+
+  /** @private */
+  _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
+    const headerRendererChanged = this.__oldHeaderRenderer !== headerRenderer;
+    this.__oldHeaderRenderer = headerRenderer;
+
+    const footerRendererChanged = this.__oldFooterRenderer !== footerRenderer;
+    this.__oldFooterRenderer = footerRenderer;
+
+    const openedChanged = this._oldOpenedFooterHeader !== opened;
+    this._oldOpenedFooterHeader = opened;
+
+    // Set attributes here to update styles before detecting content overflow
+    this.toggleAttribute('has-header', !!headerRenderer);
+    this.toggleAttribute('has-footer', !!footerRenderer);
+
+    if (headerRendererChanged) {
+      if (headerRenderer) {
+        this.headerContainer = this.__initContainer(this.headerContainer, 'header-content');
+      } else if (this.headerContainer) {
+        this.headerContainer.remove();
+        this.headerContainer = null;
+        this.__updateOverflow();
+      }
+    }
+
+    if (footerRendererChanged) {
+      if (footerRenderer) {
+        this.footerContainer = this.__initContainer(this.footerContainer, 'footer');
+      } else if (this.footerContainer) {
+        this.footerContainer.remove();
+        this.footerContainer = null;
+        this.__updateOverflow();
+      }
+    }
+
+    if (
+      (headerRenderer && (headerRendererChanged || openedChanged)) ||
+      (footerRenderer && (footerRendererChanged || openedChanged))
+    ) {
+      if (opened) {
+        this.requestContentUpdate();
+      }
+    }
+  }
+
+  /** @private */
+  _headerTitleChanged(headerTitle, opened) {
+    this.toggleAttribute('has-title', !!headerTitle);
+
+    if (opened && (headerTitle || this._oldHeaderTitle)) {
+      this.requestContentUpdate();
+    }
+    this._oldHeaderTitle = headerTitle;
+  }
+
+  /** @private */
+  _headerTitleRenderer() {
+    if (this.headerTitle) {
+      if (!this.headerTitleElement) {
+        this.headerTitleElement = document.createElement('h2');
+        this.headerTitleElement.setAttribute('slot', 'title');
+        this.headerTitleElement.classList.add('draggable');
+      }
+      this.appendChild(this.headerTitleElement);
+      this.headerTitleElement.textContent = this.headerTitle;
+    } else if (this.headerTitleElement) {
+      this.headerTitleElement.remove();
+      this.headerTitleElement = null;
+    }
+  }
+
+  /**
+   * @override
+   */
+  requestContentUpdate() {
+    super.requestContentUpdate();
+
+    if (this.headerContainer) {
+      // If a new renderer has been set, make sure to reattach the container
+      if (!this.headerContainer.parentElement) {
+        this.appendChild(this.headerContainer);
+      }
+
+      if (this.headerRenderer) {
+        // Only call header renderer after the container has been initialized
+        this.headerRenderer.call(this.owner, this.headerContainer, this.owner);
+      }
+    }
+
+    if (this.footerContainer) {
+      // If a new renderer has been set, make sure to reattach the container
+      if (!this.footerContainer.parentElement) {
+        this.appendChild(this.footerContainer);
+      }
+
+      if (this.footerRenderer) {
+        // Only call header renderer after the container has been initialized
+        this.footerRenderer.call(this.owner, this.footerContainer, this.owner);
+      }
+    }
+
+    this._headerTitleRenderer();
+
+    this.__updateOverflow();
+  }
+
+  /**
+   * Updates the coordinates of the overlay.
+   * @param {!DialogOverlayBoundsParam} bounds
+   */
+  setBounds(bounds) {
+    const overlay = this.$.overlay;
+    const parsedBounds = { ...bounds };
+
+    if (overlay.style.position !== 'absolute') {
+      overlay.style.position = 'absolute';
+      this.setAttribute('has-bounds-set', '');
+    }
+
+    Object.keys(parsedBounds).forEach((arg) => {
+      if (typeof parsedBounds[arg] === 'number') {
+        parsedBounds[arg] = `${parsedBounds[arg]}px`;
+      }
+    });
+
+    Object.assign(overlay.style, parsedBounds);
+  }
+
+  /**
+   * Retrieves the coordinates of the overlay.
+   * @return {!DialogOverlayBounds}
+   */
+  getBounds() {
+    const overlayBounds = this.$.overlay.getBoundingClientRect();
+    const containerBounds = this.getBoundingClientRect();
+    const top = overlayBounds.top - containerBounds.top;
+    const left = overlayBounds.left - containerBounds.left;
+    const width = overlayBounds.width;
+    const height = overlayBounds.height;
+    return { top, left, width, height };
+  }
+
+  /** @private */
+  __updateOverflow() {
+    let overflow = '';
+
+    // Only set "overflow" attribute if the dialog has a header, title or footer.
+    // Check for state attributes as extending components might not use renderers.
+    if (this.hasAttribute('has-header') || this.hasAttribute('has-footer') || this.headerTitle) {
+      const content = this.$.content;
+
+      if (content.scrollTop > 0) {
+        overflow += ' top';
+      }
+
+      if (content.scrollTop < content.scrollHeight - content.clientHeight) {
+        overflow += ' bottom';
+      }
+    }
+
+    const value = overflow.trim();
+    if (value.length > 0 && this.getAttribute('overflow') !== value) {
+      this.setAttribute('overflow', value);
+    } else if (value.length === 0 && this.hasAttribute('overflow')) {
+      this.removeAttribute('overflow');
+    }
+  }
+}
+
+customElements.define(DialogOverlay.is, DialogOverlay);

package/src/vaadin-dialog.d.ts

@@ -4,15 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
 import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
 
-/**
- * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
- */
-export class DialogOverlay extends Overlay {}
+export { DialogOverlay, DialogOverlayBounds, DialogOverlayBoundsParam } from './vaadin-dialog-overlay.js';
 
 export type DialogRenderer = (root: HTMLElement, dialog: Dialog) => void;
 
@@ -25,22 +22,6 @@ export type DialogResizeDimensions = {
   contentHeight: string;
 };
 
-export type DialogOverlayBounds = {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-};
-
-export type DialogOverlayBoundsParam =
-  | DialogOverlayBounds
-  | {
-      top?: number | string;
-      left?: number | string;
-      width?: number | string;
-      height?: number | string;
-    };
-
 /**
  * Fired when the `opened` property changes.
  */
@@ -120,7 +101,9 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(DialogResizableMixin(HTMLElement)))) {
+declare class Dialog extends OverlayClassMixin(
+  ThemePropertyMixin(ElementMixin(DialogDraggableMixin(DialogResizableMixin(HTMLElement)))),
+) {
   /**
    * True if the overlay is currently displayed.
    */
@@ -221,7 +204,6 @@ declare class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixi
 declare global {
   interface HTMLElementTagNameMap {
     'vaadin-dialog': Dialog;
-    'vaadin-dialog-overlay': DialogOverlay;
   }
 }
 

package/src/vaadin-dialog.js

@@ -3,397 +3,16 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-dialog-overlay.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
 import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
 
-registerStyles(
-  'vaadin-dialog-overlay',
-  css`
-    [part='header'],
-    [part='header-content'],
-    [part='footer'] {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      flex: none;
-      pointer-events: none;
-      z-index: 1;
-    }
-
-    [part='header'] {
-      flex-wrap: nowrap;
-    }
-
-    ::slotted([slot='header-content']),
-    ::slotted([slot='title']),
-    ::slotted([slot='footer']) {
-      display: contents;
-      pointer-events: auto;
-    }
-
-    ::slotted([slot='title']) {
-      font: inherit !important;
-      overflow-wrap: anywhere;
-    }
-
-    [part='header-content'] {
-      flex: 1;
-    }
-
-    :host([has-title]) [part='header-content'],
-    [part='footer'] {
-      justify-content: flex-end;
-    }
-
-    :host(:not([has-title]):not([has-header])) [part='header'],
-    :host(:not([has-header])) [part='header-content'],
-    :host(:not([has-title])) [part='title'],
-    :host(:not([has-footer])) [part='footer'] {
-      display: none !important;
-    }
-
-    :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
-      height: auto;
-    }
-
-    @media (min-height: 320px) {
-      :host(:is([has-title], [has-header], [has-footer])) .resizer-container {
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-
-      :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
-        flex: 1;
-        overflow: auto;
-      }
-    }
-
-    /*
-      NOTE(platosha): Make some min-width to prevent collapsing of the content
-      taking the parent width, e. g., <vaadin-grid> and such.
-    */
-    [part='content'] {
-      min-width: 12em; /* matches the default <vaadin-text-field> width */
-    }
-
-    :host([has-bounds-set]) [part='overlay'] {
-      max-width: none;
-    }
-  `,
-  { moduleId: 'vaadin-dialog-overlay-styles' },
-);
-
-let memoizedTemplate;
-
-/**
- * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
- *
- * @extends Overlay
- * @private
- */
-export class DialogOverlay extends Overlay {
-  static get is() {
-    return 'vaadin-dialog-overlay';
-  }
-
-  static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-      const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
-      const overlayPart = memoizedTemplate.content.querySelector('[part="overlay"]');
-      const resizerContainer = document.createElement('section');
-      resizerContainer.id = 'resizerContainer';
-      resizerContainer.classList.add('resizer-container');
-      resizerContainer.appendChild(contentPart);
-      overlayPart.appendChild(resizerContainer);
-
-      const headerContainer = document.createElement('header');
-      headerContainer.setAttribute('part', 'header');
-      resizerContainer.insertBefore(headerContainer, contentPart);
-
-      const titleContainer = document.createElement('div');
-      titleContainer.setAttribute('part', 'title');
-      headerContainer.appendChild(titleContainer);
-
-      const titleSlot = document.createElement('slot');
-      titleSlot.setAttribute('name', 'title');
-      titleContainer.appendChild(titleSlot);
-
-      const headerContentContainer = document.createElement('div');
-      headerContentContainer.setAttribute('part', 'header-content');
-      headerContainer.appendChild(headerContentContainer);
-
-      const headerSlot = document.createElement('slot');
-      headerSlot.setAttribute('name', 'header-content');
-      headerContentContainer.appendChild(headerSlot);
-
-      const footerContainer = document.createElement('footer');
-      footerContainer.setAttribute('part', 'footer');
-      resizerContainer.appendChild(footerContainer);
-
-      const footerSlot = document.createElement('slot');
-      footerSlot.setAttribute('name', 'footer');
-      footerContainer.appendChild(footerSlot);
-    }
-    return memoizedTemplate;
-  }
-
-  static get observers() {
-    return [
-      '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
-      '_headerTitleChanged(headerTitle, opened)',
-    ];
-  }
-
-  static get properties() {
-    return {
-      modeless: Boolean,
-
-      withBackdrop: Boolean,
-
-      headerTitle: String,
-
-      headerRenderer: Function,
-
-      footerRenderer: Function,
-    };
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // Update overflow attribute on resize
-    this.__resizeObserver = new ResizeObserver(() => {
-      this.__updateOverflow();
-    });
-    this.__resizeObserver.observe(this.$.resizerContainer);
-
-    // Update overflow attribute on scroll
-    this.$.content.addEventListener('scroll', () => {
-      this.__updateOverflow();
-    });
-  }
-
-  /** @private */
-  __createContainer(slot) {
-    const container = document.createElement('div');
-    container.setAttribute('slot', slot);
-    return container;
-  }
-
-  /** @private */
-  __clearContainer(container) {
-    container.innerHTML = '';
-    // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
-    // When clearing the rendered content, this part needs to be manually disposed of.
-    // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
-    delete container._$litPart$;
-  }
-
-  /** @private */
-  __initContainer(container, slot) {
-    if (container) {
-      // Reset existing container in case if a new renderer is set.
-      this.__clearContainer(container);
-    } else {
-      // Create the container, but wait to append it until requestContentUpdate is called.
-      container = this.__createContainer(slot);
-    }
-    return container;
-  }
-
-  /** @private */
-  _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
-    const headerRendererChanged = this.__oldHeaderRenderer !== headerRenderer;
-    this.__oldHeaderRenderer = headerRenderer;
-
-    const footerRendererChanged = this.__oldFooterRenderer !== footerRenderer;
-    this.__oldFooterRenderer = footerRenderer;
-
-    const openedChanged = this._oldOpenedFooterHeader !== opened;
-    this._oldOpenedFooterHeader = opened;
-
-    // Set attributes here to update styles before detecting content overflow
-    this.toggleAttribute('has-header', !!headerRenderer);
-    this.toggleAttribute('has-footer', !!footerRenderer);
-
-    if (headerRendererChanged) {
-      if (headerRenderer) {
-        this.headerContainer = this.__initContainer(this.headerContainer, 'header-content');
-      } else if (this.headerContainer) {
-        this.headerContainer.remove();
-        this.headerContainer = null;
-        this.__updateOverflow();
-      }
-    }
-
-    if (footerRendererChanged) {
-      if (footerRenderer) {
-        this.footerContainer = this.__initContainer(this.footerContainer, 'footer');
-      } else if (this.footerContainer) {
-        this.footerContainer.remove();
-        this.footerContainer = null;
-        this.__updateOverflow();
-      }
-    }
-
-    if (
-      (headerRenderer && (headerRendererChanged || openedChanged)) ||
-      (footerRenderer && (footerRendererChanged || openedChanged))
-    ) {
-      if (opened) {
-        this.requestContentUpdate();
-      }
-    }
-  }
-
-  /** @private */
-  _headerTitleChanged(headerTitle, opened) {
-    this.toggleAttribute('has-title', !!headerTitle);
-
-    if (opened && (headerTitle || this._oldHeaderTitle)) {
-      this.requestContentUpdate();
-    }
-    this._oldHeaderTitle = headerTitle;
-  }
-
-  /** @private */
-  _headerTitleRenderer() {
-    if (this.headerTitle) {
-      if (!this.headerTitleElement) {
-        this.headerTitleElement = document.createElement('h2');
-        this.headerTitleElement.setAttribute('slot', 'title');
-        this.headerTitleElement.classList.add('draggable');
-      }
-      this.appendChild(this.headerTitleElement);
-      this.headerTitleElement.textContent = this.headerTitle;
-    } else if (this.headerTitleElement) {
-      this.headerTitleElement.remove();
-      this.headerTitleElement = null;
-    }
-  }
-
-  requestContentUpdate() {
-    super.requestContentUpdate();
-
-    if (this.headerContainer) {
-      // If a new renderer has been set, make sure to reattach the container
-      if (!this.headerContainer.parentElement) {
-        this.appendChild(this.headerContainer);
-      }
-
-      if (this.headerRenderer) {
-        // Only call header renderer after the container has been initialized
-        this.headerRenderer.call(this.owner, this.headerContainer, this.owner);
-      }
-    }
-
-    if (this.footerContainer) {
-      // If a new renderer has been set, make sure to reattach the container
-      if (!this.footerContainer.parentElement) {
-        this.appendChild(this.footerContainer);
-      }
-
-      if (this.footerRenderer) {
-        // Only call header renderer after the container has been initialized
-        this.footerRenderer.call(this.owner, this.footerContainer, this.owner);
-      }
-    }
-
-    this._headerTitleRenderer();
-
-    this.__updateOverflow();
-  }
-
-  /**
-   * Updates the coordinates of the overlay.
-   * @param {!DialogOverlayBoundsParam} bounds
-   */
-  setBounds(bounds) {
-    const overlay = this.$.overlay;
-    const parsedBounds = { ...bounds };
-
-    if (overlay.style.position !== 'absolute') {
-      overlay.style.position = 'absolute';
-      this.setAttribute('has-bounds-set', '');
-      this.__forceSafariReflow();
-    }
-
-    Object.keys(parsedBounds).forEach((arg) => {
-      if (typeof parsedBounds[arg] === 'number') {
-        parsedBounds[arg] = `${parsedBounds[arg]}px`;
-      }
-    });
-
-    Object.assign(overlay.style, parsedBounds);
-  }
-
-  /**
-   * Retrieves the coordinates of the overlay.
-   * @return {!DialogOverlayBounds}
-   */
-  getBounds() {
-    const overlayBounds = this.$.overlay.getBoundingClientRect();
-    const containerBounds = this.getBoundingClientRect();
-    const top = overlayBounds.top - containerBounds.top;
-    const left = overlayBounds.left - containerBounds.left;
-    const width = overlayBounds.width;
-    const height = overlayBounds.height;
-    return { top, left, width, height };
-  }
-
-  /**
-   * Safari 13 renders overflowing elements incorrectly.
-   * This forces it to recalculate height.
-   * @private
-   */
-  __forceSafariReflow() {
-    const scrollPosition = this.$.resizerContainer.scrollTop;
-    const overlay = this.$.overlay;
-    overlay.style.display = 'block';
-
-    requestAnimationFrame(() => {
-      overlay.style.display = '';
-      this.$.resizerContainer.scrollTop = scrollPosition;
-    });
-  }
-
-  /** @private */
-  __updateOverflow() {
-    let overflow = '';
-
-    // Only set "overflow" attribute if the dialog has a header, title or footer.
-    // Check for state attributes as extending components might not use renderers.
-    if (this.hasAttribute('has-header') || this.hasAttribute('has-footer') || this.headerTitle) {
-      const content = this.$.content;
-
-      if (content.scrollTop > 0) {
-        overflow += ' top';
-      }
-
-      if (content.scrollTop < content.scrollHeight - content.clientHeight) {
-        overflow += ' bottom';
-      }
-    }
-
-    const value = overflow.trim();
-    if (value.length > 0 && this.getAttribute('overflow') !== value) {
-      this.setAttribute('overflow', value);
-    } else if (value.length === 0 && this.hasAttribute('overflow')) {
-      this.removeAttribute('overflow');
-    }
-  }
-}
-
-customElements.define(DialogOverlay.is, DialogOverlay);
+export { DialogOverlay } from './vaadin-dialog-overlay.js';
 
 /**
  * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
@@ -461,8 +80,11 @@ customElements.define(DialogOverlay.is, DialogOverlay);
  * @mixes ElementMixin
  * @mixes DialogDraggableMixin
  * @mixes DialogResizableMixin
+ * @mixes OverlayClassMixin
  */
-class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(DialogResizableMixin(PolymerElement)))) {
+class Dialog extends OverlayClassMixin(
+  ThemePropertyMixin(ElementMixin(DialogDraggableMixin(DialogResizableMixin(PolymerElement)))),
+) {
   static get template() {
     return html`
       <style>
@@ -604,9 +226,14 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
   /** @protected */
   ready() {
     super.ready();
-    this.$.overlay.setAttribute('role', 'dialog');
-    this.$.overlay.addEventListener('vaadin-overlay-outside-click', this._handleOutsideClick.bind(this));
-    this.$.overlay.addEventListener('vaadin-overlay-escape-press', this._handleEscPress.bind(this));
+
+    const overlay = this.$.overlay;
+    overlay.setAttribute('role', 'dialog');
+
+    overlay.addEventListener('vaadin-overlay-outside-click', this._handleOutsideClick.bind(this));
+    overlay.addEventListener('vaadin-overlay-escape-press', this._handleEscPress.bind(this));
+
+    this._overlayElement = overlay;
 
     processTemplates(this);
   }
@@ -619,7 +246,9 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
    */
   requestContentUpdate() {
-    this.$.overlay.requestContentUpdate();
+    if (this.$) {
+      this.$.overlay.requestContentUpdate();
+    }
   }
 
   /** @private */

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-alpha12",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-dialog",
-          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "draggable",
@@ -28,6 +28,17 @@
                 ]
               }
             },
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "opened",
               "description": "True if the overlay is currently displayed.",
@@ -118,6 +129,17 @@
                   ]
                 }
               },
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "opened",
                 "description": "True if the overlay is currently displayed.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "24.0.0-alpha8",
+  "version": "24.0.0-alpha12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-dialog",
-          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha8/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -61,6 +61,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".ariaLabel",
               "description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",