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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/confirm-dialog",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   ],
   "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-alpha4",
+    "@vaadin/component-base": "25.0.0-alpha4",
+    "@vaadin/dialog": "25.0.0-alpha4",
+    "@vaadin/overlay": "25.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
     "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-alpha4",
+    "@vaadin/chai-plugins": "25.0.0-alpha4",
+    "@vaadin/test-runner-commands": "25.0.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
 }

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

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

package/src/{vaadin-confirm-dialog-overlay-styles.js → styles/vaadin-confirm-dialog-overlay-styles.js}

@@ -4,18 +4,10 @@
  * 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-styles.js';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
 
-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);
-  }
-
+const confirmDialogOverlay = css`
   #resizerContainer {
     height: 100%;
   }
@@ -29,3 +21,5 @@ export const confirmDialogOverlay = css`
     pointer-events: all;
   }
 `;
+
+export const confirmDialogOverlayStyles = [overlayStyles, dialogOverlayBase, confirmDialogOverlay];

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

@@ -129,4 +129,16 @@ export declare class ConfirmDialogMixinClass {
    * @attr {string} overlay-class
    */
   overlayClass: string;
+
+  /**
+   * Set the width of the overlay.
+   * If a unitless number is provided, pixels are assumed.
+   */
+  width: string;
+
+  /**
+   * Set the height of the overlay.
+   * If a unitless number is provided, pixels are assumed.
+   */
+  height: string;
 }

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

@@ -164,6 +164,22 @@ export const ConfirmDialogMixin = (superClass) =>
           type: String,
         },
 
+        /**
+         * Set the height of the overlay.
+         * If a unitless number is provided, pixels are assumed.
+         */
+        height: {
+          type: String,
+        },
+
+        /**
+         * Set the width of the overlay.
+         * If a unitless number is provided, pixels are assumed.
+         */
+        width: {
+          type: String,
+        },
+
         /**
          * A reference to the "Cancel" button which will be teleported to the overlay.
          * @private
@@ -213,22 +229,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,
-        },
       };
     }
 

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

@@ -10,13 +10,11 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-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-styles.js';
 
 /**
  * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
@@ -28,13 +26,13 @@ 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(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-confirm-dialog-overlay';
   }
 
   static get styles() {
-    return [overlayStyles, dialogOverlay, confirmDialogOverlay];
+    return confirmDialogOverlayStyles;
   }
 
   /** @protected */
@@ -74,6 +72,23 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
     this.setAttribute('has-header', '');
     this.setAttribute('has-footer', '');
   }
+
+  /**
+   * Updates the coordinates of the overlay.
+   */
+  setBounds(bounds) {
+    const overlay = this.$.overlay;
+    const parsedBounds = { ...bounds };
+
+    Object.keys(parsedBounds).forEach((arg) => {
+      // Allow setting width or height to `null`
+      if (parsedBounds[arg] !== null && !isNaN(parsedBounds[arg])) {
+        parsedBounds[arg] = `${parsedBounds[arg]}px`;
+      }
+    });
+
+    Object.assign(overlay.style, parsedBounds);
+  }
 }
 
 defineCustomElement(ConfirmDialogOverlay);
@@ -82,9 +97,7 @@ 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)))),
-) {
+class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-confirm-dialog-dialog';
   }
@@ -97,6 +110,20 @@ class ConfirmDialogDialog extends ConfirmDialogBaseMixin(
     `;
   }
 
+  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: '',
+      },
+    };
+  }
+
   /** @protected */
   render() {
     return html`

package/src/vaadin-confirm-dialog.js

@@ -93,8 +93,8 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
         theme="${ifDefined(this._theme)}"
         no-close-on-outside-click
         .noCloseOnEsc="${this.noCloseOnEsc}"
-        .contentHeight="${this._contentHeight}"
-        .contentWidth="${this._contentWidth}"
+        .height="${this.height}"
+        .width="${this.width}"
         @opened-changed="${this._onOpenedChanged}"
       ></vaadin-confirm-dialog-dialog>
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha4",
   "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```\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-alpha4/#/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",
           "attributes": [
             {
               "name": "accessible-description-ref",
@@ -142,6 +142,28 @@
                 ]
               }
             },
+            {
+              "name": "height",
+              "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "width",
+              "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -287,6 +309,28 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "height",
+                "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "width",
+                "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/confirm-dialog",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-confirm-dialog",
-          "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n  There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-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```\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-alpha4/#/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",
           "extension": true,
           "attributes": [
             {
@@ -117,6 +117,20 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".height",
+              "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".width",
+              "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@closed",
               "description": "Fired when the confirm dialog is closed.",

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);
-      }
-    }
-  };