@vaadin/confirm-dialog 24.0.0-alpha1 → 24.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/confirm-dialog",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -36,13 +36,13 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/dialog": "24.0.0-alpha1",
-    "@vaadin/overlay": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/button": "24.0.0-alpha11",
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/dialog": "24.0.0-alpha11",
+    "@vaadin/overlay": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

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

@@ -1,10 +1,11 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { Dialog, DialogOverlay } from '@vaadin/dialog/src/vaadin-dialog.js';
+import { Dialog } from '@vaadin/dialog/src/vaadin-dialog.js';
+import { DialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -142,6 +143,68 @@ class ConfirmDialogDialog extends Dialog {
       ></vaadin-confirm-dialog-overlay>
     `;
   }
+
+  static get properties() {
+    return {
+      /**
+       * Height to be set on the overlay content.
+       */
+      contentHeight: {
+        type: String,
+      },
+
+      /**
+       * Width to be set on the overlay content.
+       */
+      contentWidth: {
+        type: String,
+      },
+
+      /** @private */
+      _overlayElement: {
+        type: Object,
+      },
+    };
+  }
+
+  static get observers() {
+    return [
+      '__updateContentHeight(contentHeight, _overlayElement)',
+      '__updateContentWidth(contentWidth, _overlayElement)',
+    ];
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._overlayElement = this.$.overlay;
+  }
+
+  /** @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);
+    }
+  }
 }
 
 customElements.define(ConfirmDialogDialog.is, ConfirmDialogDialog);

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

@@ -1,10 +1,10 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 /**
@@ -28,7 +28,7 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
  *
  * ```
- * <vaadin-confirm-dialog cancel>
+ * <vaadin-confirm-dialog cancel-button-visible>
  *   There are unsaved changes. Do you really want to leave?
  * </vaadin-confirm-dialog>
  * ```
@@ -72,7 +72,7 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
  * @fires {Event} reject - Fired when Reject button was pressed.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HTMLElement))) {
+declare class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(HTMLElement))) {
   /**
    * True if the overlay is currently displayed.
    */
@@ -109,9 +109,10 @@ declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HT
   noCloseOnEsc: boolean;
 
   /**
-   * Whether to show cancel button or not.
+   * Whether to show reject button or not.
+   * @attr {boolean} reject-button-visible
    */
-  reject: boolean;
+  rejectButtonVisible: boolean;
 
   /**
    * Text displayed on reject-button.
@@ -129,8 +130,9 @@ declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HT
 
   /**
    * Whether to show cancel button or not.
+   * @attr {boolean} cancel-button-visible
    */
-  cancel: boolean;
+  cancelButtonVisible: boolean;
 
   /**
    * Text displayed on cancel-button.
@@ -146,6 +148,14 @@ declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HT
    */
   cancelTheme: string;
 
+  /**
+   * A space-delimited list of CSS class names
+   * to set on the underlying overlay element.
+   *
+   * @attr {string} overlay-class
+   */
+  overlayClass: string;
+
   addEventListener<K extends keyof ConfirmDialogEventMap>(
     type: K,
     listener: (this: ConfirmDialog, ev: ConfirmDialogEventMap[K]) => void,

package/src/vaadin-confirm-dialog.js

@@ -1,20 +1,20 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-confirm-dialog-overlay.js';
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
 /**
  * `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
  *
  * ```
- * <vaadin-confirm-dialog cancel>
+ * <vaadin-confirm-dialog cancel-button-visible>
  *   There are unsaved changes. Do you really want to leave?
  * </vaadin-confirm-dialog>
  * ```
@@ -59,11 +59,11 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  *
  * @extends HTMLElement
- * @mixes SlotMixin
+ * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes ThemePropertyMixin
  */
-class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerElement))) {
+class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -76,10 +76,13 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
       <vaadin-confirm-dialog-dialog
         id="dialog"
         opened="{{opened}}"
+        overlay-class="[[overlayClass]]"
         aria-label="[[_getAriaLabel(header)]]"
         theme$="[[_theme]]"
         no-close-on-outside-click
         no-close-on-esc="[[noCloseOnEsc]]"
+        content-height="[[_contentHeight]]"
+        content-width="[[_contentWidth]]"
       ></vaadin-confirm-dialog-dialog>
 
       <div hidden>
@@ -158,10 +161,11 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
       },
 
       /**
-       * Whether to show cancel button or not.
+       * Whether to show reject button or not.
+       * @attr {boolean} reject-button-visible
        * @type {boolean}
        */
-      reject: {
+      rejectButtonVisible: {
         type: Boolean,
         reflectToAttribute: true,
         value: false,
@@ -191,9 +195,10 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
       /**
        * Whether to show cancel button or not.
+       * @attr {boolean} cancel-button-visible
        * @type {boolean}
        */
-      cancel: {
+      cancelButtonVisible: {
         type: Boolean,
         reflectToAttribute: true,
         value: false,
@@ -221,13 +226,22 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
         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
        */
       _cancelButton: {
-        type: HTMLElement,
-        observer: '_cancelButtonChanged',
+        type: Object,
       },
 
       /**
@@ -235,8 +249,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
        * @private
        */
       _confirmButton: {
-        type: HTMLElement,
-        observer: '_confirmButtonChanged',
+        type: Object,
       },
 
       /**
@@ -244,15 +257,16 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
        * @private
        */
       _headerNode: {
-        type: HTMLElement,
+        type: Object,
       },
 
       /**
-       * A reference to the message which will be placed in the overlay default slot.
+       * A list of message nodes which will be placed in the overlay default slot.
        * @private
        */
-      _messageNode: {
-        type: HTMLElement,
+      _messageNodes: {
+        type: Array,
+        value: () => [],
       },
 
       /**
@@ -260,8 +274,23 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
        * @private
        */
       _rejectButton: {
-        type: HTMLElement,
-        observer: '_rejectButtonChanged',
+        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,
       },
     };
   }
@@ -269,76 +298,72 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
   static get observers() {
     return [
       '__updateConfirmButton(_confirmButton, confirmText, confirmTheme)',
-      '__updateCancelButton(_cancelButton, cancelText, cancelTheme, cancel)',
+      '__updateCancelButton(_cancelButton, cancelText, cancelTheme, cancelButtonVisible)',
       '__updateHeaderNode(_headerNode, header)',
-      '__updateMessageNode(_messageNode, message)',
-      '__updateRejectButton(_rejectButton, rejectText, rejectTheme, reject)',
+      '__updateMessageNodes(_messageNodes, message)',
+      '__updateRejectButton(_rejectButton, rejectText, rejectTheme, rejectButtonVisible)',
     ];
   }
 
-  /** @protected */
-  get slots() {
-    // NOTE: order in which slots are listed matches the template.
-    return {
-      ...super.slots,
-      header: () => {
-        const h3 = document.createElement('h3');
-        this.__defaultHeader = h3;
-        return h3;
-      },
-      '': () => {
-        const div = document.createElement('div');
-        this.__defaultMessage = div;
-        return div;
-      },
-      'cancel-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.setAttribute('theme', this.cancelTheme);
-        button.textContent = this.cancelText;
-        button._isDefaultButton = true;
-        return button;
-      },
-      'reject-button': () => {
-        const button = document.createElement('vaadin-button');
-        button.setAttribute('theme', this.rejectTheme);
-        button.textContent = this.rejectText;
-        button._isDefaultButton = true;
-        return button;
-      },
-      'confirm-button': () => {
-        const button = document.createElement('vaadin-button');
-        button._isDefaultButton = true;
-        return button;
-      },
-    };
-  }
-
   constructor() {
     super();
-    this.__slottedNodes = [];
-    this._observer = new FlattenedNodesObserver(this, (info) => {
-      this.__onDomChange(info.addedNodes);
-    });
+
+    this.__cancel = this.__cancel.bind(this);
+    this.__confirm = this.__confirm.bind(this);
+    this.__reject = this.__reject.bind(this);
+  }
+
+  get __slottedNodes() {
+    return [this._headerNode, ...this._messageNodes, this._cancelButton, this._confirmButton, this._rejectButton];
   }
 
   /** @protected */
   ready() {
     super.ready();
 
-    this.__boundCancel = this._cancel.bind(this);
-    this.__boundConfirm = this._confirm.bind(this);
-    this.__boundReject = this._reject.bind(this);
-
     this._overlayElement = this.$.dialog.$.overlay;
     this._overlayElement.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
     this._overlayElement.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
     this._overlayElement.addEventListener('vaadin-confirm-dialog-close', () => this.__onDialogClosed());
 
-    if (this._dimensions) {
-      Object.keys(this._dimensions).forEach((name) => {
-        this._setDimension(name, this._dimensions[name]);
-      });
-    }
+    this._headerController = new SlotController(this, 'header', 'h3', {
+      initializer: (node) => {
+        this._headerNode = node;
+      },
+    });
+    this.addController(this._headerController);
+
+    this._messageController = new SlotController(this, '', 'div', {
+      // Allow providing multiple custom nodes in the default slot
+      multiple: true,
+      observe: false,
+      initializer: (node) => {
+        this._messageNodes = [...this._messageNodes, node];
+      },
+    });
+    this.addController(this._messageController);
+
+    // NOTE: order in which buttons are added should match the order of slots in template
+    this._cancelController = new SlotController(this, 'cancel-button', 'vaadin-button', {
+      initializer: (button) => {
+        this.__setupSlottedButton('cancel', button);
+      },
+    });
+    this.addController(this._cancelController);
+
+    this._rejectController = new SlotController(this, 'reject-button', 'vaadin-button', {
+      initializer: (button) => {
+        this.__setupSlottedButton('reject', button);
+      },
+    });
+    this.addController(this._rejectController);
+
+    this._confirmController = new SlotController(this, 'confirm-button', 'vaadin-button', {
+      initializer: (button) => {
+        this.__setupSlottedButton('confirm', button);
+      },
+    });
+    this.addController(this._confirmController);
   }
 
   /** @private */
@@ -358,73 +383,29 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
   /** @private */
   __onDialogClosed() {
-    const nodes = this.__slottedNodes;
-
-    // Reset the list of nodes, it will be re-created.
-    this.__slottedNodes = [];
-
     // Move nodes from the overlay back to the host.
-    nodes.forEach((node) => {
+    this.__slottedNodes.forEach((node) => {
       this.appendChild(node);
     });
   }
 
   /** @private */
-  __onDomChange(addedNodes) {
-    // TODO: restore default element when a corresponding slotted element is removed.
-    // Consider creating a controller to reuse custom helper logic from FieldMixin.
-    addedNodes.forEach((node) => {
-      this.__slottedNodes.push(node);
-
-      const isElementNode = node.nodeType === Node.ELEMENT_NODE;
-      const slotName = isElementNode ? node.getAttribute('slot') : '';
-
-      // Handle named slots (header and buttons).
-      if (slotName) {
-        if (slotName.indexOf('button') >= 0) {
-          const [button] = slotName.split('-');
-          this[`_${button}Button`] = node;
-        } else if (slotName === 'header') {
-          this._headerNode = node;
-        }
-      } else {
-        const isNotEmptyText = node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '';
-        // Handle default slot (message element).
-        if (isNotEmptyText || (isElementNode && node.slot === '')) {
-          this._messageNode = node;
-        }
-      }
-    });
-  }
-
-  /** @private */
-  _cancelButtonChanged(button, oldButton) {
-    this.__setupSlottedButton(button, oldButton, this.__boundCancel);
-  }
-
-  /** @private */
-  _confirmButtonChanged(button, oldButton) {
-    this.__setupSlottedButton(button, oldButton, this.__boundConfirm);
-  }
+  __setupSlottedButton(type, button) {
+    const property = `_${type}Button`;
+    const listener = `__${type}`;
 
-  /** @private */
-  _rejectButtonChanged(button, oldButton) {
-    this.__setupSlottedButton(button, oldButton, this.__boundReject);
-  }
-
-  /** @private */
-  __setupSlottedButton(slottedButton, currentButton, clickListener) {
-    if (currentButton && currentButton.parentElement) {
-      currentButton.remove();
+    if (this[property] && this[property] !== button) {
+      this[property].remove();
     }
 
-    slottedButton.addEventListener('click', clickListener);
+    button.addEventListener('click', this[listener]);
+    this[property] = button;
   }
 
   /** @private */
   __updateCancelButton(button, cancelText, cancelTheme, showCancel) {
     if (button) {
-      if (button._isDefaultButton) {
+      if (button === this._cancelController.defaultNode) {
         button.textContent = cancelText;
         button.setAttribute('theme', cancelTheme);
       }
@@ -434,7 +415,7 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
 
   /** @private */
   __updateConfirmButton(button, confirmText, confirmTheme) {
-    if (button && button._isDefaultButton) {
+    if (button && button === this._confirmController.defaultNode) {
       button.textContent = confirmText;
       button.setAttribute('theme', confirmTheme);
     }
@@ -443,23 +424,25 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
   /** @private */
   __updateHeaderNode(headerNode, header) {
     // Only update text content for the default header node.
-    if (headerNode && headerNode === this.__defaultHeader) {
+    if (headerNode && headerNode === this._headerController.defaultNode) {
       headerNode.textContent = header;
     }
   }
 
   /** @private */
-  __updateMessageNode(messageNode, message) {
-    // Only update text content for the default message node.
-    if (messageNode && messageNode === this.__defaultMessage) {
-      messageNode.textContent = message;
+  __updateMessageNodes(nodes, message) {
+    if (nodes && nodes.length > 0) {
+      const defaultNode = nodes.find((node) => node === this._messageController.defaultNode);
+      if (defaultNode) {
+        defaultNode.textContent = message;
+      }
     }
   }
 
   /** @private */
   __updateRejectButton(button, rejectText, rejectTheme, showReject) {
     if (button) {
-      if (button._isDefaultButton) {
+      if (button === this._rejectController.defaultNode) {
         button.textContent = rejectText;
         button.setAttribute('theme', rejectTheme);
       }
@@ -470,24 +453,24 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
   /** @private */
   _escPressed(event) {
     if (!event.defaultPrevented) {
-      this._cancel();
+      this.__cancel();
     }
   }
 
   /** @private */
-  _confirm() {
+  __confirm() {
     this.dispatchEvent(new CustomEvent('confirm'));
     this.opened = false;
   }
 
   /** @private */
-  _cancel() {
+  __cancel() {
     this.dispatchEvent(new CustomEvent('cancel'));
     this.opened = false;
   }
 
   /** @private */
-  _reject() {
+  __reject() {
     this.dispatchEvent(new CustomEvent('reject'));
     this.opened = false;
   }
@@ -497,31 +480,6 @@ class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerEle
     return header || 'confirmation';
   }
 
-  /** @private */
-  _setWidth(width) {
-    this._setDimensionIfAttached('width', width);
-  }
-
-  /** @private */
-  _setHeight(height) {
-    this._setDimensionIfAttached('height', height);
-  }
-
-  /** @private */
-  _setDimensionIfAttached(name, value) {
-    if (this._overlayElement) {
-      this._setDimension(name, value);
-    } else {
-      this._dimensions = this._dimensions || {};
-      this._dimensions[name] = value;
-    }
-  }
-
-  /** @private */
-  _setDimension(name, value) {
-    this._overlayElement.style.setProperty(`--_vaadin-confirm-dialog-content-${name}`, value);
-  }
-
   /**
    * @event confirm
    * fired when Confirm button was pressed.

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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>\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/24.0.0-alpha1/#/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/custom-theme/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```\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/24.0.0-alpha11/#/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/custom-theme/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": "opened",
@@ -67,8 +67,8 @@
               }
             },
             {
-              "name": "reject",
-              "description": "Whether to show cancel button or not.",
+              "name": "reject-button-visible",
+              "description": "Whether to show reject button or not.",
               "value": {
                 "type": [
                   "boolean"
@@ -94,7 +94,7 @@
               }
             },
             {
-              "name": "cancel",
+              "name": "cancel-button-visible",
               "description": "Whether to show cancel button or not.",
               "value": {
                 "type": [
@@ -120,6 +120,17 @@
                 ]
               }
             },
+            {
+              "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.",
@@ -191,8 +202,8 @@
                 }
               },
               {
-                "name": "reject",
-                "description": "Whether to show cancel button or not.",
+                "name": "rejectButtonVisible",
+                "description": "Whether to show reject button or not.",
                 "value": {
                   "type": [
                     "boolean"
@@ -218,7 +229,7 @@
                 }
               },
               {
-                "name": "cancel",
+                "name": "cancelButtonVisible",
                 "description": "Whether to show cancel button or not.",
                 "value": {
                   "type": [
@@ -243,6 +254,17 @@
                     "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": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "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>\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/24.0.0-alpha1/#/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/custom-theme/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```\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/24.0.0-alpha11/#/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/custom-theme/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": [
             {
@@ -34,14 +34,14 @@
               }
             },
             {
-              "name": "?reject",
-              "description": "Whether to show cancel button or not.",
+              "name": "?rejectButtonVisible",
+              "description": "Whether to show reject button or not.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?cancel",
+              "name": "?cancelButtonVisible",
               "description": "Whether to show cancel button or not.",
               "value": {
                 "kind": "expression"
@@ -103,6 +103,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@cancel",
               "description": "cancel\nfired when Cancel button or Escape key was pressed.",