@vaadin/confirm-dialog 25.0.0-alpha2 → 25.0.0-alpha21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/confirm-dialog",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -35,24 +34,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/dialog": "25.0.0-alpha2",
-    "@vaadin/overlay": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/button": "25.0.0-alpha21",
+    "@vaadin/component-base": "25.0.0-alpha21",
+    "@vaadin/dialog": "25.0.0-alpha21",
+    "@vaadin/overlay": "25.0.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha21",
+    "@vaadin/chai-plugins": "25.0.0-alpha21",
+    "@vaadin/test-runner-commands": "25.0.0-alpha21",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
 }

package/src/{vaadin-confirm-dialog-overlay-styles.d.ts → styles/vaadin-confirm-dialog-overlay-base-styles.d.ts}

@@ -5,4 +5,4 @@
  */
 import type { CSSResult } from 'lit';
 
-export const confirmDialogOverlay: CSSResult;
+export const confirmDialogOverlayStyles: CSSResult;

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-base-styles.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
+
+const confirmDialogOverlay = css`
+  :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;
+  }
+
+  [part='header'] {
+    color: var(--vaadin-dialog-title-color, var(--vaadin-text-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='content'] {
+    flex: 1;
+  }
+`;
+
+export const confirmDialogOverlayStyles = [overlayStyles, dialogOverlayBase, confirmDialogOverlay];

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

@@ -4,6 +4,7 @@
  * 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 { DialogSizeMixinClass } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
 
 /*
  * Fired when the `opened` property changes.
@@ -31,14 +32,14 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
 
 export declare function ConfirmDialogMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ConfirmDialogMixinClass> & T;
+): Constructor<ConfirmDialogMixinClass> & Constructor<DialogSizeMixinClass> & T;
 
 export declare class ConfirmDialogMixinClass {
   /**
-   * Sets the `aria-describedby` attribute of the overlay element.
+   * Sets the `aria-describedby` attribute of the dialog.
    *
-   * 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
@@ -48,7 +49,7 @@ export declare class ConfirmDialogMixinClass {
   accessibleDescriptionRef: string | null | undefined;
 
   /**
-   * True if the overlay is currently displayed.
+   * True if the dialog is visible and available for interaction.
    */
   opened: boolean;
 
@@ -121,12 +122,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;
 }

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

@@ -5,20 +5,21 @@
  */
 import { setAriaIDReference } from '@vaadin/a11y-base/src/aria-id-reference.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
  */
 export const ConfirmDialogMixin = (superClass) =>
-  class ConfirmDialogMixinClass extends superClass {
+  class ConfirmDialogMixinClass extends DialogSizeMixin(superClass) {
     static get properties() {
       return {
         /**
-         * Sets the `aria-describedby` attribute of the overlay element.
+         * Sets the `aria-describedby` attribute of the dialog.
          *
-         * 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
@@ -29,11 +30,12 @@ export const ConfirmDialogMixin = (superClass) =>
         },
 
         /**
-         * True if the overlay is currently displayed.
+         * True if the dialog is visible and available for interaction.
          * @type {boolean}
          */
         opened: {
           type: Boolean,
+          reflectToAttribute: true,
           value: false,
           notify: true,
           sync: true,
@@ -154,16 +156,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,
-        },
-
         /**
          * A reference to the "Cancel" button which will be teleported to the overlay.
          * @private
@@ -197,15 +189,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
@@ -213,22 +196,6 @@ export const ConfirmDialogMixin = (superClass) =>
         _rejectButton: {
           type: Object,
         },
-
-        /**
-         * Height to be set on the overlay content.
-         * @protected
-         */
-        _contentHeight: {
-          type: String,
-        },
-
-        /**
-         * Width to be set on the overlay content.
-         * @protected
-         */
-        _contentWidth: {
-          type: String,
-        },
       };
     }
 
@@ -239,7 +206,7 @@ export const ConfirmDialogMixin = (superClass) =>
         '__updateHeaderNode(_headerNode, header)',
         '__updateMessageNodes(_messageNodes, message)',
         '__updateRejectButton(_rejectButton, rejectText, rejectTheme, rejectButtonVisible)',
-        '__accessibleDescriptionRefChanged(_overlayElement, _messageNodes, accessibleDescriptionRef)',
+        '__accessibleDescriptionRefChanged(_messageNodes, accessibleDescriptionRef)',
       ];
     }
 
@@ -251,14 +218,37 @@ export const ConfirmDialogMixin = (superClass) =>
       this.__reject = this.__reject.bind(this);
     }
 
-    get __slottedNodes() {
-      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.setAttribute('aria-modal', 'true');
+      this.setAttribute('tabindex', '0');
+
       this._headerController = new SlotController(this, 'header', 'h3', {
         initializer: (node) => {
           this._headerNode = node;
@@ -271,13 +261,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 +288,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 +377,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 +395,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 +427,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,20 +3,14 @@
  * 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 { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.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 { ConfirmDialogBaseMixin } from './vaadin-confirm-dialog-base-mixin.js';
-import { confirmDialogOverlay } from './vaadin-confirm-dialog-overlay-styles.js';
+import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overlay-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
@@ -28,37 +22,49 @@ import { confirmDialogOverlay } from './vaadin-confirm-dialog-overlay-styles.js'
  * @mixes ThemableMixin
  * @private
  */
-class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-confirm-dialog-overlay';
   }
 
   static get styles() {
-    return [overlayStyles, dialogOverlay, confirmDialogOverlay];
+    return confirmDialogOverlayStyles;
+  }
+
+  static get properties() {
+    return {
+      cancelButtonVisible: {
+        type: Boolean,
+        value: false,
+      },
+
+      rejectButtonVisible: {
+        type: Boolean,
+        value: false,
+      },
+    };
   }
 
   /** @protected */
   render() {
     return html`
       <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <section id="resizerContainer" class="resizer-container">
-          <header part="header"><slot name="header"></slot></header>
-          <div part="content" id="content">
-            <div part="message"><slot></slot></div>
+      <div part="overlay" id="overlay">
+        <header part="header"><slot name="header"></slot></header>
+        <div part="content" id="content">
+          <div part="message"><slot></slot></div>
+        </div>
+        <footer part="footer" role="toolbar">
+          <div part="cancel-button" ?hidden="${!this.cancelButtonVisible}">
+            <slot name="cancel-button"></slot>
+          </div>
+          <div part="reject-button" ?hidden="${!this.rejectButtonVisible}">
+            <slot name="reject-button"></slot>
           </div>
-          <footer part="footer" role="toolbar">
-            <div part="cancel-button">
-              <slot name="cancel-button"></slot>
-            </div>
-            <div part="reject-button">
-              <slot name="reject-button"></slot>
-            </div>
-            <div part="confirm-button">
-              <slot name="confirm-button"></slot>
-            </div>
-          </footer>
-        </section>
+          <div part="confirm-button">
+            <slot name="confirm-button"></slot>
+          </div>
+        </footer>
       </div>
     `;
   }
@@ -74,49 +80,24 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
     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 ConfirmDialogBaseMixin(
-  DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
-) {
-  static get is() {
-    return 'vaadin-confirm-dialog-dialog';
-  }
 
-  static get styles() {
-    return css`
-      :host {
-        display: none;
-      }
-    `;
+  /**
+   * 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}"
-        restore-focus-on-close
-        focus-trap
-      ></vaadin-confirm-dialog-overlay>
-    `;
+  /**
+   * Override method from OverlayFocusMixin to use owner as focus trap root
+   * @protected
+   * @override
+   */
+  get _focusTrapRoot() {
+    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.
  *
@@ -75,36 +72,51 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
 
   static get styles() {
     return css`
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: block !important;
+        position: absolute;
+        outline: none;
+      }
+
       :host,
-      [hidden] {
+      :host([hidden]) {
         display: none !important;
       }
+
+      :host(:focus-visible) ::part(overlay) {
+        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+      }
     `;
   }
 
   /** @protected */
   render() {
     return html`
-      <vaadin-confirm-dialog-dialog
-        id="dialog"
+      <vaadin-confirm-dialog-overlay
+        id="overlay"
+        .owner="${this}"
         .opened="${this.opened}"
-        .overlayClass="${this.overlayClass}"
-        aria-label="${this.header || 'confirmation'}"
         theme="${ifDefined(this._theme)}"
-        no-close-on-outside-click
-        .noCloseOnEsc="${this.noCloseOnEsc}"
-        .contentHeight="${this._contentHeight}"
-        .contentWidth="${this._contentWidth}"
+        .cancelButtonVisible="${this.cancelButtonVisible}"
+        .rejectButtonVisible="${this.rejectButtonVisible}"
+        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/vaadin-confirm-dialog.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-confirm-dialog.js';
+import './src/vaadin-confirm-dialog.js';
 export * from './src/vaadin-confirm-dialog.js';

package/web-types.json

@@ -1,18 +1,40 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "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-alpha2/#/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 dialog.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "height",
+              "description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
+              "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 dialog.\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",
@@ -23,7 +45,7 @@
             },
             {
               "name": "opened",
-              "description": "True if the overlay is currently displayed.",
+              "description": "True if the dialog is visible and available for interaction.",
               "value": {
                 "type": [
                   "boolean"
@@ -131,17 +153,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": "theme",
               "description": "The theme variants to apply to the component.",
@@ -156,9 +167,31 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "width",
+                "description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "height",
+                "description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
+                "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 dialog.\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",
@@ -169,7 +202,7 @@
               },
               {
                 "name": "opened",
-                "description": "True if the overlay is currently displayed.",
+                "description": "True if the dialog is visible and available for interaction.",
                 "value": {
                   "type": [
                     "boolean"
@@ -276,17 +309,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"
-                  ]
-                }
               }
             ],
             "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-alpha2",
+  "version": "25.0.0-alpha21",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,12 +16,12 @@
       "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-alpha2/#/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": [
             {
               "name": "?opened",
-              "description": "True if the overlay is currently displayed.",
+              "description": "True if the dialog is visible and available for interaction.",
               "value": {
                 "kind": "expression"
               }
@@ -47,9 +47,23 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".width",
+              "description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".height",
+              "description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
+              "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 dialog.\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,13 +124,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": "@closed",
               "description": "Fired when the confirm dialog is closed.",

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

@@ -1,29 +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 type { Constructor } from '@open-wc/dedupe-mixin';
-
-export declare function ConfirmDialogBaseMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ConfirmDialogBaseMixinClass> & T;
-
-export declare class ConfirmDialogBaseMixinClass {
-  /**
-   * 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: string;
-
-  /**
-   * Height to be set on the overlay content.
-   */
-  contentHeight: string;
-
-  /**
-   * Width to be set on the overlay content.
-   */
-  contentWidth: string;
-}

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

@@ -1,71 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @polymerMixin
- */
-export const ConfirmDialogBaseMixin = (superClass) =>
-  class ConfirmDialogBaseMixinClass extends superClass {
-    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: '',
-        },
-
-        /**
-         * Height to be set on the overlay content.
-         */
-        contentHeight: {
-          type: String,
-        },
-
-        /**
-         * Width to be set on the overlay content.
-         */
-        contentWidth: {
-          type: String,
-        },
-      };
-    }
-
-    static get observers() {
-      return [
-        '__updateContentHeight(contentHeight, _overlayElement)',
-        '__updateContentWidth(contentWidth, _overlayElement)',
-      ];
-    }
-
-    /** @private */
-    __updateDimension(overlay, dimension, value) {
-      const prop = `--_vaadin-confirm-dialog-content-${dimension}`;
-
-      if (value) {
-        overlay.style.setProperty(prop, value);
-      } else {
-        overlay.style.removeProperty(prop);
-      }
-    }
-
-    /** @private */
-    __updateContentHeight(height, overlay) {
-      if (overlay) {
-        this.__updateDimension(overlay, 'height', height);
-      }
-    }
-
-    /** @private */
-    __updateContentWidth(width, overlay) {
-      if (overlay) {
-        this.__updateDimension(overlay, 'width', width);
-      }
-    }
-  };

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

@@ -1,31 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 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 confirmDialogOverlay = css`
-  :host {
-    --_vaadin-confirm-dialog-content-width: auto;
-    --_vaadin-confirm-dialog-content-height: auto;
-  }
-
-  [part='overlay'] {
-    width: var(--_vaadin-confirm-dialog-content-width);
-    height: var(--_vaadin-confirm-dialog-content-height);
-  }
-
-  #resizerContainer {
-    height: 100%;
-  }
-
-  ::slotted([slot='header']) {
-    pointer-events: auto;
-  }
-
-  /* Make buttons clickable */
-  [part='footer'] > * {
-    pointer-events: all;
-  }
-`;

package/theme/lumo/vaadin-confirm-dialog-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';

package/theme/lumo/vaadin-confirm-dialog-styles.js

@@ -1,50 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { dialogOverlay } from '@vaadin/dialog/theme/lumo/vaadin-dialog-styles.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-confirm-dialog-overlay',
-  [
-    overlay,
-    dialogOverlay,
-    css`
-      [part='header'] ::slotted(h3) {
-        margin-top: 0 !important;
-        margin-bottom: 0 !important;
-        margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
-      }
-
-      [part='message'] {
-        width: 25em;
-        min-width: 100%;
-        max-width: 100%;
-      }
-
-      ::slotted([slot$='button'][theme~='tertiary']) {
-        padding-left: var(--lumo-space-s);
-        padding-right: var(--lumo-space-s);
-      }
-
-      [part='cancel-button'] {
-        flex-grow: 1;
-      }
-
-      @media (max-width: 360px) {
-        [part='footer'] {
-          flex-direction: column-reverse;
-          align-items: stretch;
-          padding: var(--lumo-space-s) var(--lumo-space-l);
-          gap: var(--lumo-space-s);
-        }
-
-        ::slotted([slot$='button']) {
-          width: 100%;
-          margin: 0;
-        }
-      }
-    `,
-  ],
-  { moduleId: 'lumo-confirm-dialog-overlay' },
-);

package/theme/lumo/vaadin-confirm-dialog.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-confirm-dialog.js';

package/theme/lumo/vaadin-confirm-dialog.js

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-confirm-dialog.js';