@vaadin/dialog 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -33,29 +33,6 @@ Once installed, import the component in your application:
 import '@vaadin/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/dialog/vaadin-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/dialog/theme/material/vaadin-dialog.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/dialog/theme/lumo/vaadin-dialog.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/dialog/src/vaadin-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/dialog",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,8 @@
     "lit.d.ts",
     "lit.js",
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -33,30 +35,27 @@
     "Vaadin",
     "vaadin-dialog",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/lit-renderer": "~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/component-base": "25.0.0-alpha10",
+    "@vaadin/lit-renderer": "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/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/styles/vaadin-dialog-overlay-base-styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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 { CSSResult } from 'lit';
+
+export const dialogOverlayBase: CSSResult;
+
+export const dialogOverlayStyles: CSSResult;

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

@@ -0,0 +1,216 @@
+/**
+ * @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/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-background-color));
+    background-origin: border-box;
+    border: 0;
+    box-shadow:
+      0 0 0 var(--vaadin-dialog-border-width, 1px) var(--vaadin-dialog-border-color, rgba(0, 0, 0, 0.1)),
+      var(--vaadin-dialog-box-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: var(--vaadin-dialog-max-width, 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-container-inline));
+  }
+
+  ::slotted(*) {
+    pointer-events: auto;
+  }
+
+  [part='header'],
+  [part='content'],
+  [part='footer'] {
+    padding: var(--vaadin-dialog-padding, var(--vaadin-padding));
+  }
+
+  :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-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-styles.d.ts → styles/vaadin-dialog-overlay-core-styles.d.ts}

@@ -5,6 +5,6 @@
  */
 import type { CSSResult } from 'lit';
 
-export const dialogOverlay: CSSResult;
+export const dialogOverlayBase: CSSResult;
 
-export const resizableOverlay: CSSResult;
+export const dialogOverlayStyles: CSSResult;

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

@@ -4,8 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
 
-export const dialogOverlay = css`
+export const dialogOverlayBase = css`
   [part='header'],
   [part='header-content'],
   [part='footer'] {
@@ -85,7 +86,7 @@ export const dialogOverlay = css`
   }
 `;
 
-export const resizableOverlay = css`
+const dialogResizableOverlay = css`
   [part='overlay'] {
     position: relative;
     overflow: visible;
@@ -179,3 +180,5 @@ export const resizableOverlay = css`
     cursor: nwse-resize;
   }
 `;
+
+export const dialogOverlayStyles = [overlayStyles, dialogOverlayBase, dialogResizableOverlay];

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

@@ -33,7 +33,7 @@ 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
    */
@@ -58,16 +58,4 @@ export declare class DialogBaseMixinClass {
    * overlay from stretching all the way to the left of the viewport).
    */
   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

@@ -17,6 +17,7 @@ export const DialogBaseMixin = (superClass) =>
          */
         opened: {
           type: Boolean,
+          reflectToAttribute: true,
           value: false,
           notify: true,
           sync: true,
@@ -76,35 +77,18 @@ export const DialogBaseMixin = (superClass) =>
         },
 
         /**
-         * 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
          */
         overlayRole: {
           type: String,
-          value: 'dialog',
         },
       };
     }
 
     static get observers() {
-      return ['__positionChanged(top, left)', '__sizeChanged(width, height)'];
+      return ['__positionChanged(top, left)'];
     }
 
     /** @protected */
@@ -118,6 +102,19 @@ export const DialogBaseMixin = (superClass) =>
       overlay.addEventListener('vaadin-overlay-closed', this.__handleOverlayClosed.bind(this));
 
       this._overlayElement = overlay;
+
+      if (!this.hasAttribute('role')) {
+        this.role = 'dialog';
+      }
+    }
+
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('overlayRole')) {
+        this.role = this.overlayRole || 'dialog';
+      }
     }
 
     /** @private */

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,6 +44,24 @@ export const DialogOverlayMixin = (superClass) =>
       ];
     }
 
+    /**
+     * Override method from OverlayFocusMixin to use owner as content root
+     * @protected
+     * @override
+     */
+    get _contentRoot() {
+      return this.owner;
+    }
+
+    /**
+     * Override method from OverlayFocusMixin to use owner as modal root
+     * @protected
+     * @override
+     */
+    get _modalRoot() {
+      return this.owner;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -99,8 +118,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 +153,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 +169,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 +186,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 +198,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,29 +212,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) => {
-        // Allow setting width or height to `null`
-        if (parsedBounds[arg] !== null && !isNaN(parsedBounds[arg])) {
-          parsedBounds[arg] = `${parsedBounds[arg]}px`;
-        }
-      });
-
-      Object.assign(overlay.style, parsedBounds);
-    }
-
     /**
      * Retrieves the coordinates of the overlay.
      * @return {!DialogOverlayBounds}
@@ -250,9 +246,9 @@ export const DialogOverlayMixin = (superClass) =>
 
       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.

package/src/vaadin-dialog-overlay.js

@@ -3,17 +3,14 @@
  * Copyright (c) 2017 - 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 { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dialogOverlayStyles } from './styles/vaadin-dialog-overlay-core-styles.js';
 import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
-import { dialogOverlay, resizableOverlay } from './vaadin-dialog-styles.js';
-
-registerStyles('vaadin-dialog-overlay', [overlayStyles, dialogOverlay, resizableOverlay], {
-  moduleId: 'vaadin-dialog-overlay-styles',
-});
 
 /**
  * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
@@ -25,14 +22,21 @@ registerStyles('vaadin-dialog-overlay', [overlayStyles, dialogOverlay, resizable
  * @mixes ThemableMixin
  * @private
  */
-export class DialogOverlay extends DialogOverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
+export class DialogOverlay extends DialogOverlayMixin(
+  DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dialog-overlay';
   }
 
-  static get template() {
+  static get styles() {
+    return dialogOverlayStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <section id="resizerContainer" class="resizer-container">
           <header part="header">

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

@@ -72,10 +72,7 @@ export const DialogResizableMixin = (superClass) =>
         window.addEventListener('touchmove', this._resizeListeners.resize[direction]);
         window.addEventListener('mouseup', this._resizeListeners.stop[direction]);
         window.addEventListener('touchend', this._resizeListeners.stop[direction]);
-        if (this.$.overlay.$.overlay.style.position !== 'absolute' || this.width || this.height) {
-          this.$.overlay.setBounds(this._originalBounds);
-        }
-
+        this.$.overlay.setBounds(this._originalBounds);
         this.$.overlay.setAttribute('has-bounds-set', '');
       }
     }
@@ -147,17 +144,8 @@ export const DialogResizableMixin = (superClass) =>
      * @protected
      */
     _getResizeDimensions() {
-      const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop;
       const { width, height, top, left } = getComputedStyle(this.$.overlay.$.overlay);
-      const content = this.$.overlay.$.content;
-      content.setAttribute(
-        'style',
-        'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;',
-      );
-      const { width: contentWidth, height: contentHeight } = getComputedStyle(content);
-      content.removeAttribute('style');
-      this.$.overlay.$.resizerContainer.scrollTop = scrollPosition;
-      return { width, height, contentWidth, contentHeight, top, left };
+      return { width, height, top, left };
     }
 
     /**