@vaadin/confirm-dialog 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -28,29 +28,6 @@ Once installed, import the component in your application:
 import '@vaadin/confirm-dialog';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/confirm-dialog/vaadin-confirm-dialog.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/confirm-dialog",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -31,31 +33,28 @@
     "Vaadin",
     "vaadin-confirm-dialog",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "~24.8.4",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/dialog": "~24.8.4",
-    "@vaadin/overlay": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-material-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@vaadin/button": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/dialog": "25.0.0-alpha10",
+    "@vaadin/overlay": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "~24.8.4",
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

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,44 @@
+/**
+ * @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-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;
+  }
+
+  /* TODO remove this wrapper element */
+  #resizerContainer {
+    display: contents;
+  }
+`;
+
+export const confirmDialogOverlayStyles = [overlayStyles, dialogOverlayBase, confirmDialogOverlay];

package/src/styles/vaadin-confirm-dialog-overlay-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const confirmDialogOverlayStyles: CSSResult;

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

@@ -0,0 +1,31 @@
+/**
+ * @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-core-styles.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
+
+const confirmDialogOverlay = css`
+  #resizerContainer {
+    height: 100%;
+  }
+
+  [part='header'] {
+    pointer-events: auto;
+  }
+
+  ::slotted([slot='header']) {
+    display: contents !important;
+    font: inherit !important;
+    color: inherit !important;
+  }
+
+  /* Make buttons clickable */
+  [part='footer'] > * {
+    pointer-events: all;
+  }
+`;
+
+export const confirmDialogOverlayStyles = [overlayStyles, dialogOverlayBase, confirmDialogOverlay];

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,12 +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;
 }

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,16 +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,
-        },
-
         /**
          * A reference to the "Cancel" button which will be teleported to the overlay.
          * @private
@@ -197,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
@@ -213,22 +198,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 +208,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 +220,35 @@ 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._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,22 +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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
-import { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, 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';
-
-registerStyles('vaadin-confirm-dialog-overlay', [overlayStyles, dialogOverlay, confirmDialogOverlay], {
-  moduleId: 'vaadin-confirm-dialog-overlay-styles',
-});
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overlay-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
@@ -30,14 +22,33 @@ registerStyles('vaadin-confirm-dialog-overlay', [overlayStyles, dialogOverlay, c
  * @mixes ThemableMixin
  * @private
  */
-class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-confirm-dialog-overlay';
   }
 
-  static get template() {
+  static get styles() {
+    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$="[[!withBackdrop]]"></div>
+      <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>
@@ -45,10 +56,10 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerEl
             <div part="message"><slot></slot></div>
           </div>
           <footer part="footer" role="toolbar">
-            <div part="cancel-button">
+            <div part="cancel-button" ?hidden="${!this.cancelButtonVisible}">
               <slot name="cancel-button"></slot>
             </div>
-            <div part="reject-button">
+            <div part="reject-button" ?hidden="${!this.rejectButtonVisible}">
               <slot name="reject-button"></slot>
             </div>
             <div part="confirm-button">
@@ -71,45 +82,24 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerEl
     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(PolymerElement))),
-) {
-  static get is() {
-    return 'vaadin-confirm-dialog-dialog';
+  /**
+   * Override method from OverlayFocusMixin to use owner as content root
+   * @protected
+   * @override
+   */
+  get _contentRoot() {
+    return this.owner;
   }
 
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: none;
-        }
-      </style>
-
-      <vaadin-confirm-dialog-overlay
-        id="overlay"
-        opened="[[opened]]"
-        on-opened-changed="_onOverlayOpened"
-        on-mousedown="_bringOverlayToFront"
-        on-touchstart="_bringOverlayToFront"
-        theme$="[[_theme]]"
-        modeless="[[modeless]]"
-        with-backdrop="[[!modeless]]"
-        resizable$="[[resizable]]"
-        aria-label$="[[ariaLabel]]"
-        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);