@vaadin/dialog 25.0.0-alpha2 → 25.0.0-alpha21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,6 @@
     "lit.d.ts",
     "lit.js",
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,23 +36,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/lit-renderer": "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/component-base": "25.0.0-alpha21",
+    "@vaadin/lit-renderer": "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/lit/renderer-directives.d.ts

@@ -3,7 +3,6 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-/* eslint-disable max-classes-per-file */
 import type { DirectiveResult } from 'lit/directive.js';
 import type { LitRendererResult } from '@vaadin/lit-renderer';
 import { LitRendererDirective } from '@vaadin/lit-renderer';

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

@@ -1,10 +1,10 @@
 /**
  * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * Copyright (c) 2017 - 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 dialogOverlay: CSSResult;
+export const dialogOverlayBase: CSSResult;
 
-export const resizableOverlay: CSSResult;
+export const dialogOverlayStyles: CSSResult;

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

@@ -0,0 +1,215 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
+
+export const dialogOverlayBase = css`
+  /* Optical centering */
+  :host::before,
+  :host::after {
+    content: '';
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  :host::after {
+    flex-grow: 1.1;
+  }
+
+  :host {
+    cursor: default;
+  }
+
+  [part='overlay']:focus-visible {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  }
+
+  [part='overlay'] {
+    background: var(--vaadin-dialog-background, var(--vaadin-overlay-background, var(--vaadin-background-color)));
+    background-origin: border-box;
+    border: var(--vaadin-dialog-border-width, var(--vaadin-overlay-border-width, 1px)) solid
+      var(--vaadin-dialog-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary)));
+    box-shadow: var(--vaadin-dialog-shadow, var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
+    border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
+    width: max-content;
+    min-width: min(var(--vaadin-dialog-min-width, 4em), 100%);
+    max-width: min(var(--vaadin-dialog-max-width, 100%), 100%);
+    max-height: 100%;
+  }
+
+  [part='header'],
+  [part='header-content'],
+  [part='footer'] {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex: none;
+    pointer-events: none;
+    z-index: 1;
+    gap: var(--vaadin-dialog-toolbar-gap, var(--vaadin-gap-s));
+  }
+
+  ::slotted(*) {
+    pointer-events: auto;
+  }
+
+  [part='header'],
+  [part='content'],
+  [part='footer'] {
+    padding: var(--vaadin-dialog-padding, var(--vaadin-padding-l));
+  }
+
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0 !important;
+  }
+
+  :host(:is([has-header], [has-title])) [part='content'] {
+    padding-top: 0;
+  }
+
+  :host([has-footer]) [part='content'] {
+    padding-bottom: 0;
+  }
+
+  [part='header'] {
+    flex-wrap: nowrap;
+  }
+
+  ::slotted([slot='header-content']),
+  ::slotted([slot='title']),
+  ::slotted([slot='footer']) {
+    display: contents;
+  }
+
+  ::slotted([slot='title']) {
+    font: inherit !important;
+    color: inherit !important;
+    overflow-wrap: anywhere;
+  }
+
+  [part='title'] {
+    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='header-content'] {
+    flex: 1;
+  }
+
+  :host([has-title]) [part='header-content'],
+  [part='footer'] {
+    justify-content: flex-end;
+  }
+
+  :host(:not([has-title]):not([has-header])) [part='header'],
+  :host(:not([has-header])) [part='header-content'],
+  :host(:not([has-title])) [part='title'],
+  :host(:not([has-footer])) [part='footer'] {
+    display: none !important;
+  }
+`;
+
+const dialogResizableOverlay = css`
+  [part='overlay'] {
+    position: relative;
+    overflow: visible;
+    display: flex;
+  }
+
+  :host([has-bounds-set]) [part='overlay'] {
+    min-width: 0;
+    max-width: none;
+    max-height: none;
+  }
+
+  /* Content part scrolls by default */
+  [part='content'] {
+    flex: 1;
+    min-height: 0;
+  }
+
+  :host([overflow]) [part='content'] {
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .resizer-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    border-radius: inherit;
+    max-width: 100%;
+  }
+
+  :host(:not([resizable])) .resizer {
+    display: none;
+  }
+
+  .resizer {
+    position: absolute;
+    height: 16px;
+    width: 16px;
+  }
+
+  .resizer.edge {
+    height: 8px;
+    width: 8px;
+    inset: -4px;
+  }
+
+  .resizer.edge.n {
+    width: auto;
+    bottom: auto;
+    cursor: ns-resize;
+  }
+
+  .resizer.ne {
+    top: -4px;
+    right: -4px;
+    cursor: nesw-resize;
+  }
+
+  .resizer.edge.e {
+    height: auto;
+    left: auto;
+    cursor: ew-resize;
+  }
+
+  .resizer.se {
+    bottom: -4px;
+    right: -4px;
+    cursor: nwse-resize;
+  }
+
+  .resizer.edge.s {
+    width: auto;
+    top: auto;
+    cursor: ns-resize;
+  }
+
+  .resizer.sw {
+    bottom: -4px;
+    left: -4px;
+    cursor: nesw-resize;
+  }
+
+  .resizer.edge.w {
+    height: auto;
+    right: auto;
+    cursor: ew-resize;
+  }
+
+  .resizer.nw {
+    top: -4px;
+    left: -4px;
+    cursor: nwse-resize;
+  }
+`;
+
+export const dialogOverlayStyles = [overlayStyles, dialogOverlayBase, dialogResizableOverlay];

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

@@ -11,7 +11,7 @@ export declare function DialogBaseMixin<T extends Constructor<HTMLElement>>(
 
 export declare class DialogBaseMixinClass {
   /**
-   * True if the overlay is currently displayed.
+   * True if the dialog is visible and available for interaction.
    */
   opened: boolean;
 
@@ -33,41 +33,28 @@ export declare class DialogBaseMixinClass {
   modeless: boolean;
 
   /**
-   * The `role` attribute value to be set on the overlay. Defaults to "dialog".
+   * The `role` attribute value to be set on the dialog. Defaults to "dialog".
    *
    * @attr {string} overlay-role
+   * @deprecated Use standard `role` attribute on the dialog instead
    */
   overlayRole: string;
 
   /**
-   * Set the distance of the overlay from the top of its container.
+   * Set the distance of the dialog from the top of the viewport.
    * If a unitless number is provided, pixels are assumed.
    *
-   * Note that the overlay top edge may not be the same as the viewport
-   * top edge (e.g. the Lumo theme defines some spacing to prevent the
-   * overlay from stretching all the way to the top of the viewport).
+   * Note that the dialog uses an internal container that has some
+   * additional spacing, which can be overridden by the theme.
    */
   top: string;
 
   /**
-   * Set the distance of the overlay from the left of its container.
+   * Set the distance of the dialog from the left of the viewport.
    * If a unitless number is provided, pixels are assumed.
    *
-   * Note that the overlay left edge may not be the same as the viewport
-   * left edge (e.g. the Lumo theme defines some spacing to prevent the
-   * overlay from stretching all the way to the left of the viewport).
+   * Note that the dialog uses an internal container that has some
+   * additional spacing, which can be overridden by the theme.
    */
   left: 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-dialog-base-mixin.js

@@ -12,11 +12,12 @@ export const DialogBaseMixin = (superClass) =>
     static get properties() {
       return {
         /**
-         * 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,
@@ -52,59 +53,41 @@ export const DialogBaseMixin = (superClass) =>
         },
 
         /**
-         * Set the distance of the overlay from the top of its container.
+         * Set the distance of the dialog from the top of the viewport.
          * If a unitless number is provided, pixels are assumed.
          *
-         * Note that the overlay top edge may not be the same as the viewport
-         * top edge (e.g. the Lumo theme defines some spacing to prevent the
-         * overlay from stretching all the way to the top of the viewport).
+         * Note that the dialog uses an internal container that has some
+         * additional spacing, which can be overridden by the theme.
          */
         top: {
           type: String,
         },
 
         /**
-         * Set the distance of the overlay from the left of its container.
+         * Set the distance of the dialog from the left of the viewport.
          * If a unitless number is provided, pixels are assumed.
          *
-         * Note that the overlay left edge may not be the same as the viewport
-         * left edge (e.g. the Lumo theme defines some spacing to prevent the
-         * overlay from stretching all the way to the left of the viewport).
+         * Note that the dialog uses an internal container that has some
+         * additional spacing, which can be overridden by the theme.
          */
         left: {
           type: String,
         },
 
         /**
-         * Set the width of the overlay.
-         * If a unitless number is provided, pixels are assumed.
-         */
-        width: {
-          type: String,
-        },
-
-        /**
-         * Set the height of the overlay.
-         * If a unitless number is provided, pixels are assumed.
-         */
-        height: {
-          type: String,
-        },
-
-        /**
-         * The `role` attribute value to be set on the overlay. Defaults to "dialog".
+         * The `role` attribute value to be set on the dialog. Defaults to "dialog".
          *
          * @attr {string} overlay-role
+         * @deprecated Use standard `role` attribute on the dialog instead
          */
         overlayRole: {
           type: String,
-          value: 'dialog',
         },
       };
     }
 
     static get observers() {
-      return ['__positionChanged(top, left)', '__sizeChanged(width, height)'];
+      return ['__positionChanged(top, left)'];
     }
 
     /** @protected */
@@ -118,6 +101,29 @@ export const DialogBaseMixin = (superClass) =>
       overlay.addEventListener('vaadin-overlay-closed', this.__handleOverlayClosed.bind(this));
 
       this._overlayElement = overlay;
+
+      if (!this.hasAttribute('role')) {
+        this.role = 'dialog';
+      }
+
+      this.setAttribute('tabindex', '0');
+    }
+
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('overlayRole')) {
+        this.role = this.overlayRole || 'dialog';
+      }
+
+      if (props.has('modeless')) {
+        if (!this.modeless) {
+          this.setAttribute('aria-modal', 'true');
+        } else {
+          this.removeAttribute('aria-modal');
+        }
+      }
     }
 
     /** @private */

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

@@ -95,7 +95,8 @@ export const DialogDraggableMixin = (superClass) =>
           window.addEventListener('touchmove', this._drag);
           if (this.$.overlay.$.overlay.style.position !== 'absolute') {
             const { top, left } = this._originalBounds;
-            this.$.overlay.setBounds({ top, left });
+            this.top = top;
+            this.left = left;
           }
         }
       }

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

@@ -14,15 +14,6 @@ export type DialogOverlayBounds = {
   height: number;
 };
 
-export type DialogOverlayBoundsParam =
-  | DialogOverlayBounds
-  | {
-      top?: number | string;
-      left?: number | string;
-      width?: number | string;
-      height?: number | string;
-    };
-
 export declare function DialogOverlayMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<DialogOverlayMixinClass> & Constructor<OverlayMixinClass> & T;
@@ -48,9 +39,4 @@ export declare class DialogOverlayMixinClass {
    * Retrieves the coordinates of the overlay.
    */
   getBounds(): DialogOverlayBounds;
-
-  /**
-   * Updates the coordinates of the overlay.
-   */
-  setBounds(bounds: DialogOverlayBoundsParam, absolute: boolean): void;
 }

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { setOverlayStateAttribute } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
 
 /**
  * @polymerMixin
@@ -43,13 +44,24 @@ export const DialogOverlayMixin = (superClass) =>
       ];
     }
 
+    /**
+     * Override method from OverlayFocusMixin to use owner as content root
+     * @protected
+     * @override
+     */
+    get _contentRoot() {
+      return this.owner;
+    }
+
     /** @protected */
     ready() {
       super.ready();
 
       // Update overflow attribute on resize
       this.__resizeObserver = new ResizeObserver(() => {
-        this.__updateOverflow();
+        requestAnimationFrame(() => {
+          this.__updateOverflow();
+        });
       });
       this.__resizeObserver.observe(this.$.resizerContainer);
 
@@ -57,6 +69,11 @@ export const DialogOverlayMixin = (superClass) =>
       this.$.content.addEventListener('scroll', () => {
         this.__updateOverflow();
       });
+
+      // Update overflow attribute on content change
+      this.shadowRoot.addEventListener('slotchange', () => {
+        this.__updateOverflow();
+      });
     }
 
     /** @private */
@@ -99,8 +116,8 @@ export const DialogOverlayMixin = (superClass) =>
       this._oldOpenedFooterHeader = opened;
 
       // Set attributes here to update styles before detecting content overflow
-      this.toggleAttribute('has-header', !!headerRenderer);
-      this.toggleAttribute('has-footer', !!footerRenderer);
+      setOverlayStateAttribute(this, 'has-header', !!headerRenderer);
+      setOverlayStateAttribute(this, 'has-footer', !!footerRenderer);
 
       if (headerRendererChanged) {
         if (headerRenderer) {
@@ -134,7 +151,7 @@ export const DialogOverlayMixin = (superClass) =>
 
     /** @private */
     _headerTitleChanged(headerTitle, opened) {
-      this.toggleAttribute('has-title', !!headerTitle);
+      setOverlayStateAttribute(this, 'has-title', !!headerTitle);
 
       if (opened && (headerTitle || this._oldHeaderTitle)) {
         this.requestContentUpdate();
@@ -150,7 +167,7 @@ export const DialogOverlayMixin = (superClass) =>
           this.headerTitleElement.setAttribute('slot', 'title');
           this.headerTitleElement.classList.add('draggable');
         }
-        this.appendChild(this.headerTitleElement);
+        this.owner.appendChild(this.headerTitleElement);
         this.headerTitleElement.textContent = this.headerTitle;
       } else if (this.headerTitleElement) {
         this.headerTitleElement.remove();
@@ -167,7 +184,7 @@ export const DialogOverlayMixin = (superClass) =>
       if (this.headerContainer) {
         // If a new renderer has been set, make sure to reattach the container
         if (!this.headerContainer.parentElement) {
-          this.appendChild(this.headerContainer);
+          this.owner.appendChild(this.headerContainer);
         }
 
         if (this.headerRenderer) {
@@ -179,7 +196,7 @@ export const DialogOverlayMixin = (superClass) =>
       if (this.footerContainer) {
         // If a new renderer has been set, make sure to reattach the container
         if (!this.footerContainer.parentElement) {
-          this.appendChild(this.footerContainer);
+          this.owner.appendChild(this.footerContainer);
         }
 
         if (this.footerRenderer) {
@@ -193,28 +210,6 @@ export const DialogOverlayMixin = (superClass) =>
       this.__updateOverflow();
     }
 
-    /**
-     * Updates the coordinates of the overlay.
-     * @param {!DialogOverlayBoundsParam} bounds
-     * @param {boolean} absolute
-     */
-    setBounds(bounds, absolute = true) {
-      const overlay = this.$.overlay;
-      const parsedBounds = { ...bounds };
-
-      if (absolute && overlay.style.position !== 'absolute') {
-        overlay.style.position = 'absolute';
-      }
-
-      Object.keys(parsedBounds).forEach((arg) => {
-        if (!isNaN(parsedBounds[arg])) {
-          parsedBounds[arg] = `${parsedBounds[arg]}px`;
-        }
-      });
-
-      Object.assign(overlay.style, parsedBounds);
-    }
-
     /**
      * Retrieves the coordinates of the overlay.
      * @return {!DialogOverlayBounds}
@@ -233,25 +228,21 @@ export const DialogOverlayMixin = (superClass) =>
     __updateOverflow() {
       let overflow = '';
 
-      // Only set "overflow" attribute if the dialog has a header, title or footer.
-      // Check for state attributes as extending components might not use renderers.
-      if (this.hasAttribute('has-header') || this.hasAttribute('has-footer') || this.headerTitle) {
-        const content = this.$.content;
+      const content = this.$.content;
 
-        if (content.scrollTop > 0) {
-          overflow += ' top';
-        }
+      if (content.scrollTop > 0) {
+        overflow += ' top';
+      }
 
-        if (content.scrollTop < content.scrollHeight - content.clientHeight) {
-          overflow += ' bottom';
-        }
+      if (content.scrollTop < content.scrollHeight - content.clientHeight) {
+        overflow += ' bottom';
       }
 
       const value = overflow.trim();
       if (value.length > 0 && this.getAttribute('overflow') !== value) {
-        this.setAttribute('overflow', value);
+        setOverlayStateAttribute(this, 'overflow', value);
       } else if (value.length === 0 && this.hasAttribute('overflow')) {
-        this.removeAttribute('overflow');
+        setOverlayStateAttribute(this, 'overflow', null);
       }
     }
   };

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

@@ -7,7 +7,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
 
-export { DialogOverlayBounds, DialogOverlayBoundsParam } from './vaadin-dialog-overlay-mixin.js';
+export { DialogOverlayBounds } from './vaadin-dialog-overlay-mixin.js';
 
 /**
  * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.