@vaadin/confirm-dialog 25.0.0-alpha7 → 25.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/confirm-dialog",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -37,18 +37,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha7",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/dialog": "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/button": "25.0.0-alpha8",
+    "@vaadin/component-base": "25.0.0-alpha8",
+    "@vaadin/dialog": "25.0.0-alpha8",
+    "@vaadin/overlay": "25.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha7",
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/a11y-base": "25.0.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-alpha8",
+    "@vaadin/test-runner-commands": "25.0.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
 }

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

@@ -8,38 +8,36 @@ import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overl
 import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 
 const confirmDialogOverlay = css`
-  @layer base {
-    :host {
-      --vaadin-dialog-min-width: var(--vaadin-confirm-dialog-min-width, 15em);
-      --vaadin-dialog-max-width: var(--vaadin-confirm-dialog-max-width, 25em);
-    }
+  :host {
+    --vaadin-dialog-min-width: var(--vaadin-confirm-dialog-min-width, 15em);
+    --vaadin-dialog-max-width: var(--vaadin-confirm-dialog-max-width, 25em);
+  }
 
-    ::slotted([slot='header']) {
-      display: contents;
-      font: inherit !important;
-      color: inherit !important;
-    }
+  ::slotted([slot='header']) {
+    display: contents;
+    font: inherit !important;
+    color: inherit !important;
+  }
 
-    [part='header'] {
-      color: var(--vaadin-dialog-title-color, var(--vaadin-color));
-      font-weight: var(--vaadin-dialog-title-font-weight, 600);
-      font-size: var(--vaadin-dialog-title-font-size, 1em);
-      line-height: var(--vaadin-dialog-title-line-height, inherit);
-    }
+  [part='header'] {
+    color: var(--vaadin-dialog-title-color, var(--vaadin-color));
+    font-weight: var(--vaadin-dialog-title-font-weight, 600);
+    font-size: var(--vaadin-dialog-title-font-size, 1em);
+    line-height: var(--vaadin-dialog-title-line-height, inherit);
+  }
 
-    [part='overlay'] {
-      display: flex;
-      flex-direction: column;
-    }
+  [part='overlay'] {
+    display: flex;
+    flex-direction: column;
+  }
 
-    [part='content'] {
-      flex: 1;
-    }
+  [part='content'] {
+    flex: 1;
+  }
 
-    /* TODO remove this wrapper element */
-    #resizerContainer {
-      display: contents;
-    }
+  /* TODO remove this wrapper element */
+  #resizerContainer {
+    display: contents;
   }
 `;
 

package/src/vaadin-confirm-dialog-mixin.d.ts

@@ -4,6 +4,8 @@
  * 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 { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import type { DialogSizeMixinClass } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
 
 /*
  * Fired when the `opened` property changes.
@@ -31,14 +33,14 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
 
 export declare function ConfirmDialogMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ConfirmDialogMixinClass> & T;
+): Constructor<ConfirmDialogMixinClass> & Constructor<DialogSizeMixinClass> & Constructor<OverlayClassMixinClass> & T;
 
 export declare class ConfirmDialogMixinClass {
   /**
    * Sets the `aria-describedby` attribute of the overlay element.
    *
-   * By default, all elements inside the message area are linked
-   * through the `aria-describedby` attribute. However, there are
+   * By default, the text contents of all elements inside the message area
+   * are combined into the `aria-description` attribute. However, there are
    * cases where this can confuse screen reader users (e.g. the dialog
    * may present a password confirmation form). For these cases,
    * it's better to associate only the elements that will help describe
@@ -121,24 +123,4 @@ export declare class ConfirmDialogMixinClass {
    * @attr {string} cancel-theme
    */
   cancelTheme: string;
-
-  /**
-   * A space-delimited list of CSS class names
-   * to set on the underlying overlay element.
-   *
-   * @attr {string} overlay-class
-   */
-  overlayClass: string;
-
-  /**
-   * Set the width of the overlay.
-   * If a unitless number is provided, pixels are assumed.
-   */
-  width: string | null;
-
-  /**
-   * Set the height of the overlay.
-   * If a unitless number is provided, pixels are assumed.
-   */
-  height: string | null;
 }

package/src/vaadin-confirm-dialog-mixin.js

@@ -4,21 +4,24 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { setAriaIDReference } from '@vaadin/a11y-base/src/aria-id-reference.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { DialogSizeMixin } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
 
 /**
  * @polymerMixin
+ * @mixes DialogSizeMixin
+ * @mixes OverlayClassMixin
  */
 export const ConfirmDialogMixin = (superClass) =>
-  class ConfirmDialogMixinClass extends superClass {
+  class ConfirmDialogMixinClass extends OverlayClassMixin(DialogSizeMixin(superClass)) {
     static get properties() {
       return {
         /**
          * Sets the `aria-describedby` attribute of the overlay element.
          *
-         * By default, all elements inside the message area are linked
-         * through the `aria-describedby` attribute. However, there are
+         * By default, the text contents of all elements inside the message area
+         * are combined into the `aria-description` attribute. However, there are
          * cases where this can confuse screen reader users (e.g. the dialog
          * may present a password confirmation form). For these cases,
          * it's better to associate only the elements that will help describe
@@ -34,6 +37,7 @@ export const ConfirmDialogMixin = (superClass) =>
          */
         opened: {
           type: Boolean,
+          reflectToAttribute: true,
           value: false,
           notify: true,
           sync: true,
@@ -154,32 +158,6 @@ export const ConfirmDialogMixin = (superClass) =>
           value: 'tertiary',
         },
 
-        /**
-         * A space-delimited list of CSS class names
-         * to set on the underlying overlay element.
-         *
-         * @attr {string} overlay-class
-         */
-        overlayClass: {
-          type: String,
-        },
-
-        /**
-         * Set the height of the overlay.
-         * If a unitless number is provided, pixels are assumed.
-         */
-        height: {
-          type: String,
-        },
-
-        /**
-         * Set the width of the overlay.
-         * If a unitless number is provided, pixels are assumed.
-         */
-        width: {
-          type: String,
-        },
-
         /**
          * A reference to the "Cancel" button which will be teleported to the overlay.
          * @private
@@ -213,15 +191,6 @@ export const ConfirmDialogMixin = (superClass) =>
           value: () => [],
         },
 
-        /**
-         * A reference to the overlay element.
-         * @private
-         */
-        _overlayElement: {
-          type: Object,
-          sync: true,
-        },
-
         /**
          * A reference to the "Reject" button which will be teleported to the overlay.
          * @private
@@ -239,7 +208,7 @@ export const ConfirmDialogMixin = (superClass) =>
         '__updateHeaderNode(_headerNode, header)',
         '__updateMessageNodes(_messageNodes, message)',
         '__updateRejectButton(_rejectButton, rejectText, rejectTheme, rejectButtonVisible)',
-        '__accessibleDescriptionRefChanged(_overlayElement, _messageNodes, accessibleDescriptionRef)',
+        '__accessibleDescriptionRefChanged(_messageNodes, accessibleDescriptionRef)',
       ];
     }
 
@@ -255,10 +224,35 @@ export const ConfirmDialogMixin = (superClass) =>
       return [this._headerNode, ...this._messageNodes, this._cancelButton, this._confirmButton, this._rejectButton];
     }
 
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      // Restore opened state if overlay was opened when disconnecting
+      if (this.__restoreOpened) {
+        this.opened = true;
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      // Automatically close the overlay when dialog is removed from DOM
+      // Using a timeout to avoid toggling opened state, and dispatching change
+      // events, when just moving the dialog in the DOM
+      setTimeout(() => {
+        if (!this.isConnected) {
+          this.__restoreOpened = this.opened;
+          this.opened = false;
+        }
+      });
+    }
+
     /** @protected */
     ready() {
       super.ready();
 
+      this.role = 'alertdialog';
+
       this._headerController = new SlotController(this, 'header', 'h3', {
         initializer: (node) => {
           this._headerNode = node;
@@ -271,13 +265,7 @@ export const ConfirmDialogMixin = (superClass) =>
         multiple: true,
         observe: false,
         initializer: (node) => {
-          const wrapper = document.createElement('div');
-          wrapper.style.display = 'contents';
-          const wrapperId = `confirm-dialog-message-${generateUniqueId()}`;
-          wrapper.id = wrapperId;
-          this.appendChild(wrapper);
-          wrapper.appendChild(node);
-          this._messageNodes = [...this._messageNodes, wrapper];
+          this._messageNodes = [...this._messageNodes, node];
         },
       });
       this.addController(this._messageController);
@@ -304,59 +292,47 @@ export const ConfirmDialogMixin = (superClass) =>
       });
       this.addController(this._confirmController);
 
-      this._overlayElement = this.$.dialog.$.overlay;
-
-      this._initOverlay(this._overlayElement);
+      this._overlayElement = this.$.overlay;
     }
 
     /** @protected */
-    _initOverlay(overlay) {
-      overlay.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
-      overlay.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
-      overlay.addEventListener('vaadin-overlay-closed', () => this.__onDialogClosed());
-      overlay.setAttribute('role', 'alertdialog');
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('header')) {
+        this.ariaLabel = this.header || 'confirmation';
+      }
     }
 
-    /** @private */
+    /** @protected */
     __onDialogOpened() {
-      const overlay = this._overlayElement;
-
-      // Teleport slotted nodes to the overlay element.
-      this.__slottedNodes.forEach((node) => {
-        overlay.appendChild(node);
-      });
-
-      const confirmButton = overlay.querySelector('[slot="confirm-button"]');
-      if (confirmButton) {
-        confirmButton.focus();
+      if (this._confirmButton) {
+        this._confirmButton.focus();
       }
     }
 
-    /** @private */
+    /** @protected */
     __onDialogClosed() {
-      // Move nodes from the overlay back to the host.
-      this.__slottedNodes.forEach((node) => {
-        this.appendChild(node);
-      });
       this.dispatchEvent(new CustomEvent('closed'));
     }
 
     /** @private */
-    __accessibleDescriptionRefChanged(overlay, messageNodes, accessibleDescriptionRef) {
-      if (!overlay || !messageNodes) {
+    __accessibleDescriptionRefChanged(messageNodes, accessibleDescriptionRef) {
+      if (!messageNodes) {
         return;
       }
 
-      if (accessibleDescriptionRef !== undefined) {
-        setAriaIDReference(overlay, 'aria-describedby', {
+      if (accessibleDescriptionRef) {
+        this.removeAttribute('aria-description');
+        setAriaIDReference(this, 'aria-describedby', {
           newId: accessibleDescriptionRef,
           oldId: this.__oldAccessibleDescriptionRef,
           fromUser: true,
         });
       } else {
-        messageNodes.forEach((node) => {
-          setAriaIDReference(overlay, 'aria-describedby', { newId: node.id });
-        });
+        this.removeAttribute('aria-describedby');
+        const ariaDescription = messageNodes.map((node) => node.textContent.trim()).join(' ');
+        this.setAttribute('aria-description', ariaDescription);
       }
 
       this.__oldAccessibleDescriptionRef = accessibleDescriptionRef;
@@ -405,11 +381,9 @@ export const ConfirmDialogMixin = (superClass) =>
     /** @private */
     __updateMessageNodes(nodes, message) {
       if (nodes && nodes.length > 0) {
-        const defaultWrapperNode = nodes.find(
-          (node) => this._messageController.defaultNode && node === this._messageController.defaultNode.parentElement,
-        );
-        if (defaultWrapperNode) {
-          defaultWrapperNode.firstChild.textContent = message;
+        const defaultNode = nodes.find((node) => node === this._messageController.defaultNode);
+        if (defaultNode) {
+          defaultNode.textContent = message;
         }
       }
     }
@@ -425,13 +399,20 @@ export const ConfirmDialogMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    _escPressed(event) {
-      if (!event.defaultPrevented) {
+    /** @protected */
+    _onOverlayEscapePress(event) {
+      if (this.noCloseOnEsc) {
+        event.preventDefault();
+      } else {
         this.__cancel();
       }
     }
 
+    /** @protected */
+    _onOverlayOutsideClick(event) {
+      event.preventDefault();
+    }
+
     /** @private */
     __confirm() {
       this.dispatchEvent(new CustomEvent('confirm'));
@@ -450,11 +431,6 @@ export const ConfirmDialogMixin = (superClass) =>
       this.opened = false;
     }
 
-    /** @private */
-    _getAriaLabel(header) {
-      return header || 'confirmation';
-    }
-
     /**
      * Fired when the confirm dialog is closed.
      *

package/src/vaadin-confirm-dialog-overlay.js

@@ -3,17 +3,13 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.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 { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-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 { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overlay-core-styles.js';
 
 /**
@@ -26,7 +22,7 @@ import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overl
  * @mixes ThemableMixin
  * @private
  */
-class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))) {
+class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-confirm-dialog-overlay';
   }
@@ -86,71 +82,40 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(LumoInjec
     this.setAttribute('has-header', '');
     this.setAttribute('has-footer', '');
   }
-}
-
-defineCustomElement(ConfirmDialogOverlay);
 
-/**
- * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
- * @private
- */
-class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-confirm-dialog-dialog';
+  /**
+   * @protected
+   * @override
+   */
+  _attachOverlay() {
+    this.showPopover();
   }
 
-  static get styles() {
-    return css`
-      :host {
-        display: none;
-      }
-    `;
+  /**
+   * @protected
+   * @override
+   */
+  _detachOverlay() {
+    this.hidePopover();
   }
 
-  static get properties() {
-    return {
-      /**
-       * Set the `aria-label` attribute for assistive technologies like
-       * screen readers. An empty string value for this property (the
-       * default) means that the `aria-label` attribute is not present.
-       */
-      ariaLabel: {
-        type: String,
-        value: '',
-      },
-
-      cancelButtonVisible: {
-        type: Boolean,
-      },
-
-      rejectButtonVisible: {
-        type: Boolean,
-      },
-    };
+  /**
+   * Override method from OverlayFocusMixin to use owner as content root
+   * @protected
+   * @override
+   */
+  get _contentRoot() {
+    return this.owner;
   }
 
-  /** @protected */
-  render() {
-    return html`
-      <vaadin-confirm-dialog-overlay
-        id="overlay"
-        .owner="${this}"
-        .opened="${this.opened}"
-        @opened-changed="${this._onOverlayOpened}"
-        @mousedown="${this._bringOverlayToFront}"
-        @touchstart="${this._bringOverlayToFront}"
-        theme="${ifDefined(this._theme)}"
-        .modeless="${this.modeless}"
-        .withBackdrop="${!this.modeless}"
-        ?resizable="${this.resizable}"
-        aria-label="${this.ariaLabel}"
-        .cancelButtonVisible="${this.cancelButtonVisible}"
-        .rejectButtonVisible="${this.rejectButtonVisible}"
-        restore-focus-on-close
-        focus-trap
-      ></vaadin-confirm-dialog-overlay>
-    `;
+  /**
+   * Override method from OverlayFocusMixin to use owner as modal root
+   * @protected
+   * @override
+   */
+  get _modalRoot() {
+    return this.owner;
   }
 }
 
-defineCustomElement(ConfirmDialogDialog);
+defineCustomElement(ConfirmDialogOverlay);

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

@@ -12,7 +12,7 @@ export * from './vaadin-confirm-dialog-mixin.js';
 /**
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
  *
- * ```
+ * ```html
  * <vaadin-confirm-dialog cancel-button-visible>
  *   There are unsaved changes. Do you really want to leave?
  * </vaadin-confirm-dialog>
@@ -20,14 +20,13 @@ export * from './vaadin-confirm-dialog-mixin.js';
  *
  * ### Styling
  *
- * The `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`
- * component and use its shadow parts for styling.
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) for the overlay styling documentation.
- *
- * In addition to `<vaadin-overlay>` parts, the following parts are available for theming:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  * `header`         | The header element wrapper
  * `message`        | The message element wrapper
  * `footer`         | The footer element that wraps the buttons
@@ -36,8 +35,6 @@ export * from './vaadin-confirm-dialog-mixin.js';
  * `reject-button`  | The "Reject" button wrapper
  *
  * Use `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.
- * Also, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the
- * `<vaadin-confirm-dialog-overlay>` component.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/src/vaadin-confirm-dialog.js

@@ -16,7 +16,7 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
 /**
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
  *
- * ```
+ * ```html
  * <vaadin-confirm-dialog cancel-button-visible>
  *   There are unsaved changes. Do you really want to leave?
  * </vaadin-confirm-dialog>
@@ -24,14 +24,13 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
  *
  * ### Styling
  *
- * The `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`
- * component and use its shadow parts for styling.
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) for the overlay styling documentation.
- *
- * In addition to `<vaadin-overlay>` parts, the following parts are available for theming:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  * `header`         | The header element wrapper
  * `message`        | The message element wrapper
  * `footer`         | The footer element that wraps the buttons
@@ -40,8 +39,6 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
  * `reject-button`  | The "Reject" button wrapper
  *
  * Use `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.
- * Also, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the
- * `<vaadin-confirm-dialog-overlay>` component.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -79,34 +76,42 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
       [hidden] {
         display: none !important;
       }
+
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: contents !important;
+      }
     `;
   }
 
   /** @protected */
   render() {
     return html`
-      <vaadin-confirm-dialog-dialog
-        id="dialog"
+      <vaadin-confirm-dialog-overlay
+        id="overlay"
+        popover="manual"
+        .owner="${this}"
         .opened="${this.opened}"
-        .overlayClass="${this.overlayClass}"
+        theme="${ifDefined(this._theme)}"
         .cancelButtonVisible="${this.cancelButtonVisible}"
         .rejectButtonVisible="${this.rejectButtonVisible}"
-        aria-label="${this.header || 'confirmation'}"
-        theme="${ifDefined(this._theme)}"
-        no-close-on-outside-click
-        .noCloseOnEsc="${this.noCloseOnEsc}"
-        .height="${this.height}"
-        .width="${this.width}"
+        with-backdrop
+        restore-focus-on-close
+        focus-trap
+        exportparts="backdrop, overlay, header, content, message, footer, cancel-button, confirm-button, reject-button"
         @opened-changed="${this._onOpenedChanged}"
-      ></vaadin-confirm-dialog-dialog>
-
-      <div hidden>
-        <slot name="header"></slot>
+        @vaadin-overlay-open="${this.__onDialogOpened}"
+        @vaadin-overlay-closed="${this.__onDialogClosed}"
+        @vaadin-overlay-outside-click="${this._onOverlayOutsideClick}"
+        @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
+      >
+        <slot name="header" slot="header"></slot>
         <slot></slot>
-        <slot name="cancel-button"></slot>
-        <slot name="reject-button"></slot>
-        <slot name="confirm-button"></slot>
-      </div>
+        <slot name="cancel-button" slot="cancel-button"></slot>
+        <slot name="reject-button" slot="reject-button"></slot>
+        <slot name="confirm-button" slot="confirm-button"></slot>
+      </vaadin-confirm-dialog-overlay>
     `;
   }
 

package/web-types.json

@@ -1,18 +1,51 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-confirm-dialog",
-          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | The header element wrapper\n`message`        | The message element wrapper\n`footer`         | The footer element that wraps the buttons\n`cancel-button`  | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button`  | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name         | Description\n------------------|---------------------------\n`header`          | Slot for header element\n`cancel-button`   | Slot for \"Cancel\" button\n`confirm-button`  | Slot for \"Confirm\" button\n`reject-button`   | Slot for \"Reject\" button",
+          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```html\n<vaadin-confirm-dialog cancel-button-visible>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | The header element wrapper\n`message`        | The message element wrapper\n`footer`         | The footer element that wraps the buttons\n`cancel-button`  | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button`  | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name         | Description\n------------------|---------------------------\n`header`          | Slot for header element\n`cancel-button`   | Slot for \"Cancel\" button\n`confirm-button`  | Slot for \"Confirm\" button\n`reject-button`   | Slot for \"Reject\" button",
           "attributes": [
+            {
+              "name": "width",
+              "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "height",
+              "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "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": "accessible-description-ref",
-              "description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
+              "description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
               "value": {
                 "type": [
                   "string",
@@ -131,39 +164,6 @@
                 ]
               }
             },
-            {
-              "name": "overlay-class",
-              "description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "height",
-              "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "name": "width",
-              "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -178,9 +178,42 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "width",
+                "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "height",
+                "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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": "accessibleDescriptionRef",
-                "description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
+                "description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
                 "value": {
                   "type": [
                     "string",
@@ -298,39 +331,6 @@
                     "string"
                   ]
                 }
-              },
-              {
-                "name": "overlayClass",
-                "description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
-              {
-                "name": "height",
-                "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
-              },
-              {
-                "name": "width",
-                "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-confirm-dialog",
-          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha7/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`header`         | The header element wrapper\n`message`        | The message element wrapper\n`footer`         | The footer element that wraps the buttons\n`cancel-button`  | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button`  | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name         | Description\n------------------|---------------------------\n`header`          | Slot for header element\n`cancel-button`   | Slot for \"Cancel\" button\n`confirm-button`  | Slot for \"Confirm\" button\n`reject-button`   | Slot for \"Reject\" button",
+          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```html\n<vaadin-confirm-dialog cancel-button-visible>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | The header element wrapper\n`message`        | The message element wrapper\n`footer`         | The footer element that wraps the buttons\n`cancel-button`  | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button`  | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name         | Description\n------------------|---------------------------\n`header`          | Slot for header element\n`cancel-button`   | Slot for \"Cancel\" button\n`confirm-button`  | Slot for \"Confirm\" button\n`reject-button`   | Slot for \"Reject\" button",
           "extension": true,
           "attributes": [
             {
@@ -47,9 +47,30 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".width",
+              "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".height",
+              "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "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": ".accessibleDescriptionRef",
-              "description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
+              "description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
               "value": {
                 "kind": "expression"
               }
@@ -110,27 +131,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".overlayClass",
-              "description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".height",
-              "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": ".width",
-              "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@closed",
               "description": "Fired when the confirm dialog is closed.",