@vaadin/dialog 25.0.0-alpha8 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,9 +23,6 @@
     "lit.d.ts",
     "lit.js",
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -39,23 +36,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha8",
-    "@vaadin/lit-renderer": "25.0.0-alpha8",
-    "@vaadin/overlay": "25.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/lit-renderer": "25.0.0-beta1",
+    "@vaadin/overlay": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/chai-plugins": "25.0.0-alpha8",
-    "@vaadin/test-runner-commands": "25.0.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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

@@ -3,7 +3,7 @@
  * 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 '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 
@@ -29,16 +29,15 @@ export const dialogOverlayBase = css`
   }
 
   [part='overlay'] {
-    background: var(--vaadin-dialog-background, var(--vaadin-background-color));
+    background: var(--vaadin-dialog-background, var(--vaadin-overlay-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: 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: var(--vaadin-dialog-max-width, 100%);
+    max-width: min(var(--vaadin-dialog-max-width, 100%), 100%);
     max-height: 100%;
   }
 
@@ -51,7 +50,7 @@ export const dialogOverlayBase = css`
     flex: none;
     pointer-events: none;
     z-index: 1;
-    gap: var(--vaadin-dialog-toolbar-gap, var(--vaadin-gap-container-inline));
+    gap: var(--vaadin-dialog-toolbar-gap, var(--vaadin-gap-s));
   }
 
   ::slotted(*) {
@@ -61,7 +60,11 @@ export const dialogOverlayBase = css`
   [part='header'],
   [part='content'],
   [part='footer'] {
-    padding: var(--vaadin-dialog-padding, var(--vaadin-padding));
+    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'] {
@@ -89,7 +92,7 @@ export const dialogOverlayBase = css`
   }
 
   [part='title'] {
-    color: var(--vaadin-dialog-title-color, var(--vaadin-color));
+    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);

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

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,37 +53,35 @@ 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,
         },
 
         /**
-         * 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',
         },
       };
     }
@@ -102,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.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) {
@@ -211,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.js

@@ -9,7 +9,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-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 { dialogOverlayStyles } from './styles/vaadin-dialog-overlay-base-styles.js';
 import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
 
 /**
@@ -33,11 +33,20 @@ export class DialogOverlay extends DialogOverlayMixin(
     return dialogOverlayStyles;
   }
 
+  /**
+   * Override method from OverlayFocusMixin to use owner as focus trap root
+   * @protected
+   * @override
+   */
+  get _focusTrapRoot() {
+    return this.owner;
+  }
+
   /** @protected */
   render() {
     return html`
       <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
+      <div part="overlay" id="overlay">
         <section id="resizerContainer" class="resizer-container">
           <header part="header">
             <div part="title"><slot name="title"></slot></div>

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

@@ -27,7 +27,7 @@ export declare class DialogRendererMixinClass {
    * and the elements created by the renderer will be placed next to
    * each other, with the title coming first.
    *
-   * When `headerTitle` is set, the attribute `has-title` is added to the overlay element.
+   * When `headerTitle` is set, the attribute `has-title` is set on the dialog.
    * @attr {string} header-title
    */
   headerTitle: string | null | undefined;
@@ -43,7 +43,7 @@ export declare class DialogRendererMixinClass {
    * and the elements created by the renderer will be placed next to
    * each other, with the title coming first.
    *
-   * When `headerRenderer` is set, the attribute `has-header` is added to the overlay element.
+   * When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
    */
   headerRenderer: DialogRenderer | null | undefined;
 
@@ -54,7 +54,7 @@ export declare class DialogRendererMixinClass {
    * - `root` The root container DOM element. Append your content to it.
    * - `dialog` The reference to the `<vaadin-dialog>` element.
    *
-   * When `footerRenderer` is set, the attribute `has-footer` is added to the overlay element.
+   * When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
    */
   footerRenderer: DialogRenderer | null | undefined;
 

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

@@ -30,7 +30,7 @@ export const DialogRendererMixin = (superClass) =>
          * and the elements created by the renderer will be placed next to
          * each other, with the title coming first.
          *
-         * When `headerTitle` is set, the attribute `has-title` is added to the overlay element.
+         * When `headerTitle` is set, the attribute `has-title` is set on the dialog.
          * @attr {string} header-title
          */
         headerTitle: String,
@@ -46,7 +46,7 @@ export const DialogRendererMixin = (superClass) =>
          * and the elements created by the renderer will be placed next to
          * each other, with the title coming first.
          *
-         * When `headerRenderer` is set, the attribute `has-header` is added to the overlay element.
+         * When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
          * @type {DialogRenderer | undefined}
          */
         headerRenderer: {
@@ -60,7 +60,7 @@ export const DialogRendererMixin = (superClass) =>
          * - `root` The root container DOM element. Append your content to it.
          * - `dialog` The reference to the `<vaadin-dialog>` element.
          *
-         * When `footerRenderer` is set, the attribute `has-footer` is added to the overlay element.
+         * When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
          * @type {DialogRenderer | undefined}
          */
         footerRenderer: {

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

@@ -11,13 +11,13 @@ export declare function DialogSizeMixin<T extends Constructor<HTMLElement>>(
 
 export declare class DialogSizeMixinClass {
   /**
-   * Set the width of the overlay.
+   * Set the width of the dialog.
    * If a unitless number is provided, pixels are assumed.
    */
   width: string | null;
 
   /**
-   * Set the height of the overlay.
+   * Set the height of the dialog.
    * If a unitless number is provided, pixels are assumed.
    */
   height: string | null;

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

@@ -12,7 +12,7 @@ export const DialogSizeMixin = (superClass) =>
     static get properties() {
       return {
         /**
-         * Set the width of the overlay.
+         * Set the width of the dialog.
          * If a unitless number is provided, pixels are assumed.
          */
         width: {
@@ -20,7 +20,7 @@ export const DialogSizeMixin = (superClass) =>
         },
 
         /**
-         * Set the height of the overlay.
+         * Set the height of the dialog.
          * If a unitless number is provided, pixels are assumed.
          */
         height: {

package/src/vaadin-dialog.d.ts

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js';
 import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
@@ -91,16 +90,13 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  *
  * ### Styling
  *
- * `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal
- * themable component as the actual visible dialog overlay.
- *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
- * for `<vaadin-dialog-overlay>` parts.
- *
- * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  * `header`         | Element wrapping title and header content
  * `header-content` | Element wrapping the header content slot
  * `title`          | Element wrapping the title slot
@@ -115,9 +111,6 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * `has-footer`     | Set when the element has footer renderer
  * `overflow`       | Set to `top`, `bottom`, none or both
  *
- * Note: the `theme` attribute value set on `<vaadin-dialog>` is
- * propagated to the internal `<vaadin-dialog-overlay>` component.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
@@ -127,18 +120,9 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  */
 declare class Dialog extends DialogSizeMixin(
   DialogDraggableMixin(
-    DialogResizableMixin(
-      DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))))),
-    ),
+    DialogResizableMixin(DialogRendererMixin(DialogBaseMixin(ThemePropertyMixin(ElementMixin(HTMLElement))))),
   ),
 ) {
-  /**
-   * 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;
-
   addEventListener<K extends keyof DialogEventMap>(
     type: K,
     listener: (this: Dialog, ev: DialogEventMap[K]) => void,