@vaadin/dialog 23.1.0-alpha2 → 23.1.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.1.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-overlay": "23.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha2"
+    "@vaadin/component-base": "23.1.0-beta1",
+    "@vaadin/lit-renderer": "23.1.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta1",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta1",
+    "@vaadin/vaadin-overlay": "23.1.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha2",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta1",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-area": "23.1.0-alpha2",
-    "sinon": "^9.2.1"
+    "@vaadin/text-area": "23.1.0-beta1",
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
 }

package/src/lit/renderer-directives.d.ts

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 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 { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { Dialog } from '../vaadin-dialog.js';
+
+export type DialogLitRenderer = (dialog: Dialog) => TemplateResult;
+
+declare abstract class AbstractDialogRendererDirective extends LitRendererDirective<Dialog, DialogLitRenderer> {
+  /**
+   * A property to that the renderer callback will be assigned.
+   */
+  abstract rendererProperty: 'renderer' | 'headerRenderer' | 'footerRenderer';
+
+  /**
+   * Adds the renderer callback to the dialog.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the renderer callback on the dialog.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the renderer callback from the dialog.
+   */
+  removeRenderer(): void;
+}
+
+export class DialogRendererDirective extends AbstractDialogRendererDirective {
+  rendererProperty: 'renderer';
+}
+
+export class DialogHeaderRendererDirective extends AbstractDialogRendererDirective {
+  rendererProperty: 'headerRenderer';
+}
+
+export class DialogFooterRendererDirective extends AbstractDialogRendererDirective {
+  rendererProperty: 'footerRenderer';
+}
+
+/**
+ * A Lit directive for populating the content of the dialog.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the dialog
+ * via the `renderer` property. The renderer is called to populate the content once when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-dialog
+ *   ${dialogRenderer((dialog) => html`...`)}
+ * ></vaadin-dialog>`
+ * ```
+ *
+ * @param renderer the renderer callback that returns a Lit template.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function dialogRenderer(
+  renderer: DialogLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof DialogRendererDirective>;
+
+/**
+ * A Lit directive for populating the content of the dialog header.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the dialog
+ * via the `headerRenderer` property. The renderer is called to populate the content once
+ * when assigned and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-dialog
+ *   ${dialogHeaderRenderer((dialog) => html`...`)}
+ * ></vaadin-dialog>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function dialogHeaderRenderer(
+  renderer: DialogLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof DialogHeaderRendererDirective>;
+
+/**
+ * A Lit directive for populating the content of the dialog footer.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the dialog
+ * via the `footerRenderer` property. The renderer is called to populate the content once when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-dialog
+ *   ${dialogFooterRenderer((dialog) => html`...`)}
+ * ></vaadin-dialog>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function dialogFooterRenderer(
+  renderer: DialogLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof DialogFooterRendererDirective>;

package/src/lit/renderer-directives.js

@@ -0,0 +1,147 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 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 { directive } from 'lit/directive.js';
+import { microTask } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+
+const CONTENT_UPDATE_DEBOUNCER = Symbol('contentUpdateDebouncer');
+
+class AbstractDialogRendererDirective extends LitRendererDirective {
+  /**
+   * A property to that the renderer callback will be assigned.
+   *
+   * @abstract
+   */
+  rendererProperty;
+
+  /**
+   * Adds the renderer callback to the dialog.
+   */
+  addRenderer() {
+    this.element[this.rendererProperty] = (root, dialog) => {
+      this.renderRenderer(root, dialog);
+    };
+  }
+
+  /**
+   * Runs the renderer callback on the dialog.
+   */
+  runRenderer() {
+    this.element[CONTENT_UPDATE_DEBOUNCER] = Debouncer.debounce(
+      this.element[CONTENT_UPDATE_DEBOUNCER],
+      microTask,
+      () => {
+        this.element.requestContentUpdate();
+      },
+    );
+  }
+
+  /**
+   * Removes the renderer callback from the dialog.
+   */
+  removeRenderer() {
+    this.element[this.rendererProperty] = null;
+    delete this.element[CONTENT_UPDATE_DEBOUNCER];
+  }
+}
+
+export class DialogRendererDirective extends AbstractDialogRendererDirective {
+  rendererProperty = 'renderer';
+}
+
+export class DialogHeaderRendererDirective extends AbstractDialogRendererDirective {
+  rendererProperty = 'headerRenderer';
+}
+
+export class DialogFooterRendererDirective extends AbstractDialogRendererDirective {
+  rendererProperty = 'footerRenderer';
+}
+
+/**
+ * A Lit directive for populating the content of the dialog.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the dialog
+ * via the `renderer` property. The renderer is called to populate the content once when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-dialog
+ *   ${dialogRenderer((dialog) => html`...`)}
+ * ></vaadin-dialog>`
+ * ```
+ *
+ * @param renderer the renderer callback that returns a Lit template.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const dialogRenderer = directive(DialogRendererDirective);
+
+/**
+ * A Lit directive for populating the content of the dialog header.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the dialog
+ * via the `headerRenderer` property. The renderer is called to populate the content once when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-dialog
+ *   ${dialogHeaderRenderer((dialog) => html`...`)}
+ * ></vaadin-dialog>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const dialogHeaderRenderer = directive(DialogHeaderRendererDirective);
+
+/**
+ * A Lit directive for populating the content of the dialog footer.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the dialog
+ * via the `footerRenderer` property. The renderer is called to populate the content once when assigned
+ * and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-dialog
+ *   ${dialogFooterRenderer((dialog) => html`...`)}
+ * ></vaadin-dialog>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const dialogFooterRenderer = directive(DialogFooterRendererDirective);

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

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function DialogDraggableMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DialogDraggableMixinClass>;
 
 export declare class DialogDraggableMixinClass {

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

@@ -28,19 +28,19 @@ export const DialogDraggableMixin = (superClass) =>
         draggable: {
           type: Boolean,
           value: false,
-          reflectToAttribute: true
+          reflectToAttribute: true,
         },
 
         /** @private */
         _touchDevice: {
           type: Boolean,
-          value: isTouch
+          value: isTouch,
         },
 
         /* TODO: Expose as a public property (check naming) */
         __dragHandleClassName: {
-          type: String
-        }
+          type: String,
+        },
       };
     }
 
@@ -82,7 +82,9 @@ export const DialogDraggableMixin = (superClass) =>
         });
 
         if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
-          !isDraggable && e.preventDefault();
+          if (!isDraggable) {
+            e.preventDefault();
+          }
           this._originalBounds = this.$.overlay.getBounds();
           const event = getMouseOrFirstTouchEvent(e);
           this._originalMouseCoords = { top: event.pageY, left: event.pageX };

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

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function DialogResizableMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DialogResizableMixinClass>;
 
 export declare class DialogResizableMixinClass {

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

@@ -105,7 +105,7 @@ registerStyles(
       cursor: nwse-resize;
     }
   `,
-  { moduleId: 'vaadin-dialog-resizable-overlay-styles' }
+  { moduleId: 'vaadin-dialog-resizable-overlay-styles' },
 );
 
 /**
@@ -122,8 +122,8 @@ export const DialogResizableMixin = (superClass) =>
         resizable: {
           type: Boolean,
           value: false,
-          reflectToAttribute: true
-        }
+          reflectToAttribute: true,
+        },
       };
     }
 
@@ -252,7 +252,7 @@ export const DialogResizableMixin = (superClass) =>
       const content = this.$.overlay.$.content;
       content.setAttribute(
         'style',
-        'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;'
+        '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');

package/src/vaadin-dialog.d.ts

@@ -208,13 +208,13 @@ declare class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixi
   addEventListener<K extends keyof DialogEventMap>(
     type: K,
     listener: (this: Dialog, ev: DialogEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof DialogEventMap>(
     type: K,
     listener: (this: Dialog, ev: DialogEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-dialog.js

@@ -15,10 +15,9 @@ import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
 registerStyles(
   'vaadin-dialog-overlay',
   css`
-    /* prefixing with the element tags to avoid styling confirm-dialog header part */
-    header[part='header'],
+    [part='header'],
     [part='header-content'],
-    footer[part='footer'] {
+    [part='footer'] {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
@@ -27,10 +26,9 @@ registerStyles(
       z-index: 1;
     }
 
-    :host(:is([has-title], [has-header])) ::slotted([slot='header']),
     ::slotted([slot='header-content']),
     ::slotted([slot='title']),
-    :host([has-footer]) ::slotted([slot='footer']) {
+    ::slotted([slot='footer']) {
       display: contents;
       pointer-events: auto;
     }
@@ -39,19 +37,16 @@ registerStyles(
       flex: 1;
     }
 
-    /* prefixing with the element tag to avoid styling confirm-dialog footer part */
-    [part='header-content'],
-    footer[part='footer'] {
+    :host([has-title]) [part='header-content'],
+    [part='footer'] {
       justify-content: flex-end;
     }
 
-    :host(:not([has-title]):not([has-header])) header[part='header'],
-    :host(:not([has-title])) [part='title'] {
-      display: none;
-    }
-
-    :host(:not([has-footer])) footer[part='footer'] {
-      display: none;
+    :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;
     }
 
     :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
@@ -83,7 +78,7 @@ registerStyles(
       max-width: none;
     }
   `,
-  { moduleId: 'vaadin-dialog-overlay-styles' }
+  { moduleId: 'vaadin-dialog-overlay-styles' },
 );
 
 let memoizedTemplate;
@@ -104,7 +99,7 @@ export class DialogOverlay extends OverlayElement {
       memoizedTemplate = super.template.cloneNode(true);
       const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
       const overlayPart = memoizedTemplate.content.querySelector('[part="overlay"]');
-      const resizerContainer = document.createElement('div');
+      const resizerContainer = document.createElement('section');
       resizerContainer.id = 'resizerContainer';
       resizerContainer.classList.add('resizer-container');
       resizerContainer.appendChild(contentPart);
@@ -144,7 +139,7 @@ export class DialogOverlay extends OverlayElement {
   static get observers() {
     return [
       '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
-      '_headerTitleChanged(headerTitle, opened)'
+      '_headerTitleChanged(headerTitle, opened)',
     ];
   }
 
@@ -158,7 +153,7 @@ export class DialogOverlay extends OverlayElement {
 
       headerRenderer: Function,
 
-      footerRenderer: Function
+      footerRenderer: Function,
     };
   }
 
@@ -166,9 +161,6 @@ export class DialogOverlay extends OverlayElement {
   ready() {
     super.ready();
 
-    const uniqueId = (DialogOverlay._uniqueId = 1 + DialogOverlay._uniqueId || 0);
-    this._titleId = `${this.constructor.is}-title-${uniqueId}`;
-
     // Update overflow attribute on resize
     this.__resizeObserver = new ResizeObserver(() => {
       this.__updateOverflow();
@@ -269,18 +261,14 @@ export class DialogOverlay extends OverlayElement {
     if (this.headerTitle) {
       if (!this.headerTitleElement) {
         this.headerTitleElement = document.createElement('span');
-        this.headerTitleElement.id = this._titleId;
         this.headerTitleElement.setAttribute('slot', 'title');
         this.headerTitleElement.classList.add('draggable');
-
-        this.setAttribute('aria-labelledby', this._titleId);
       }
       this.appendChild(this.headerTitleElement);
       this.headerTitleElement.textContent = this.headerTitle;
     } else if (this.headerTitleElement) {
       this.headerTitleElement.remove();
       this.headerTitleElement = null;
-      this.removeAttribute('aria-labelledby');
     }
   }
 
@@ -502,7 +490,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
       opened: {
         type: Boolean,
         value: false,
-        notify: true
+        notify: true,
       },
 
       /**
@@ -512,7 +500,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       noCloseOnOutsideClick: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -522,7 +510,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       noCloseOnEsc: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -532,7 +520,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       ariaLabel: {
         type: String,
-        value: ''
+        value: '',
       },
 
       /**
@@ -591,16 +579,16 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       modeless: {
         type: Boolean,
-        value: false
-      }
+        value: false,
+      },
     };
   }
 
   static get observers() {
     return [
       '_openedChanged(opened)',
-      '_ariaLabelChanged(ariaLabel)',
-      '_rendererChanged(renderer, headerRenderer, footerRenderer)'
+      '_ariaLabelChanged(ariaLabel, headerTitle)',
+      '_rendererChanged(renderer, headerRenderer, footerRenderer)',
     ];
   }
 
@@ -653,9 +641,9 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
   }
 
   /** @private */
-  _ariaLabelChanged(ariaLabel) {
-    if (ariaLabel) {
-      this.$.overlay.setAttribute('aria-label', ariaLabel);
+  _ariaLabelChanged(ariaLabel, headerTitle) {
+    if (ariaLabel || headerTitle) {
+      this.$.overlay.setAttribute('aria-label', ariaLabel || headerTitle);
     } else {
       this.$.overlay.removeAttribute('aria-label');
     }

package/theme/lumo/vaadin-dialog-styles.js

@@ -31,25 +31,21 @@ const dialogOverlay = css`
     padding-top: 0;
   }
 
-  :host(:is([has-header], [has-title])) [part='header'],
-  :host([has-header]) [part='header-content'],
-  :host([has-footer]) [part='footer'] {
+  [part='header'],
+  [part='header-content'],
+  [part='footer'] {
     gap: var(--lumo-space-xs) var(--lumo-space-s);
     line-height: var(--lumo-line-height-s);
   }
 
-  :host(:is([has-header], [has-title])) [part='header'] {
-    padding: var(--lumo-space-s) var(--lumo-space-m);
-    min-height: var(--lumo-size-xl);
-    box-sizing: border-box;
+  [part='header'] {
+    padding: var(--lumo-space-m);
     background-color: var(--lumo-base-color);
     border-radius: var(--lumo-border-radius-l) var(--lumo-border-radius-l) 0 0; /* Needed for Safari */
   }
 
-  :host([has-footer]) [part='footer'] {
+  [part='footer'] {
     padding: var(--lumo-space-s) var(--lumo-space-m);
-    min-height: var(--lumo-size-l);
-    box-sizing: border-box;
     background-color: var(--lumo-contrast-5pct);
     border-radius: 0 0 var(--lumo-border-radius-l) var(--lumo-border-radius-l); /* Needed for Safari */
   }
@@ -66,16 +62,8 @@ const dialogOverlay = css`
     padding: 0;
   }
 
-  :host([theme~='no-padding']:is([has-header], [has-title])) [part='header'] {
-    padding: 0;
-  }
-
-  :host([theme~='no-padding'][has-footer]) [part='footer'] {
-    padding: 0;
-  }
-
   @media (min-height: 320px) {
-    :host(:is([has-header], [has-title])[overflow~='top']) [part='header'] {
+    :host([overflow~='top']) [part='header'] {
       box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
     }
   }

package/theme/material/vaadin-dialog-styles.js

@@ -16,7 +16,7 @@ const dialogOverlay = css`
     padding: 24px;
   }
 
-  :host(:is([has-header], [has-title])) [part='header'] {
+  [part='header'] {
     padding: 16px;
   }
 
@@ -24,9 +24,9 @@ const dialogOverlay = css`
     padding-top: 0;
   }
 
-  :host(:is([has-header], [has-title])) [part='header'],
-  :host([has-header]) [part='header-content'],
-  :host([has-footer]) [part='footer'] {
+  [part='header'],
+  [part='header-content'],
+  [part='footer'] {
     gap: 8px;
     line-height: 1.2;
   }
@@ -37,16 +37,16 @@ const dialogOverlay = css`
     margin-inline-start: 8px;
   }
 
-  :host([has-footer]) [part='footer'] {
+  [part='footer'] {
     padding: 8px;
   }
 
   @media (min-height: 320px) {
-    :host(:is([has-header], [has-title])[overflow~='top']) [part='header'] {
+    :host([overflow~='top']) [part='header'] {
       box-shadow: 0 1px 0 0 var(--material-divider-color);
     }
 
-    :host([has-footer][overflow~='bottom']) [part='footer'] {
+    :host([overflow~='bottom']) [part='footer'] {
       box-shadow: 0 -1px 0 0 var(--material-divider-color);
     }
   }
@@ -58,5 +58,5 @@ const dialogOverlay = css`
 `;
 
 registerStyles('vaadin-dialog-overlay', [overlay, dialogOverlay], {
-  moduleId: 'material-dialog'
+  moduleId: 'material-dialog',
 });