@vaadin/dialog 25.0.0-alpha10 → 25.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha11",
   "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-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",
+    "@vaadin/component-base": "25.0.0-alpha11",
+    "@vaadin/lit-renderer": "25.0.0-alpha11",
+    "@vaadin/overlay": "25.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha10",
-    "@vaadin/chai-plugins": "25.0.0-alpha10",
-    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/a11y-base": "25.0.0-alpha11",
+    "@vaadin/chai-plugins": "25.0.0-alpha11",
+    "@vaadin/test-runner-commands": "25.0.0-alpha11",
     "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
+  "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
 }

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';
 

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

@@ -36,6 +36,7 @@ export declare class DialogBaseMixinClass {
    * 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;
 

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

@@ -80,6 +80,7 @@ export const DialogBaseMixin = (superClass) =>
          * 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,

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

@@ -68,7 +68,9 @@ export const DialogOverlayMixin = (superClass) =>
 
       // Update overflow attribute on resize
       this.__resizeObserver = new ResizeObserver(() => {
-        this.__updateOverflow();
+        requestAnimationFrame(() => {
+          this.__updateOverflow();
+        });
       });
       this.__resizeObserver.observe(this.$.resizerContainer);
 
@@ -76,6 +78,11 @@ export const DialogOverlayMixin = (superClass) =>
       this.$.content.addEventListener('scroll', () => {
         this.__updateOverflow();
       });
+
+      // Update overflow attribute on content change
+      this.shadowRoot.addEventListener('slotchange', () => {
+        this.__updateOverflow();
+      });
     }
 
     /** @private */
@@ -230,18 +237,14 @@ 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();

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';
 
 /**

package/vaadin-dialog.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-dialog.js';
+import './src/vaadin-dialog.js';
 export * from './src/vaadin-dialog.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

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

@@ -1,10 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 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-core-styles.js

@@ -1,184 +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 { css } from 'lit';
-import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
-
-export const dialogOverlayBase = css`
-  [part='header'],
-  [part='header-content'],
-  [part='footer'] {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    flex: none;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  [part='header'] {
-    flex-wrap: nowrap;
-  }
-
-  ::slotted([slot='header-content']),
-  ::slotted([slot='title']),
-  ::slotted([slot='footer']) {
-    display: contents;
-    pointer-events: auto;
-  }
-
-  ::slotted([slot='title']) {
-    font: inherit !important;
-    overflow-wrap: anywhere;
-  }
-
-  [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;
-  }
-
-  :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
-    height: auto;
-  }
-
-  @media (min-height: 320px) {
-    :host(:is([has-title], [has-header], [has-footer])) .resizer-container {
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-
-    :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
-      flex: 1;
-      overflow: auto;
-    }
-  }
-
-  /*
-      NOTE(platosha): Make some min-width to prevent collapsing of the content
-      taking the parent width, e. g., <vaadin-grid> and such.
-    */
-  [part='content'] {
-    min-width: 12em; /* matches the default <vaadin-text-field> width */
-  }
-
-  :host([has-bounds-set]) [part='overlay'] {
-    max-width: none;
-  }
-
-  @media (forced-colors: active) {
-    [part='overlay'] {
-      outline: 3px solid !important;
-    }
-  }
-`;
-
-const dialogResizableOverlay = css`
-  [part='overlay'] {
-    position: relative;
-    overflow: visible;
-    max-height: 100%;
-    display: flex;
-  }
-
-  [part='content'] {
-    box-sizing: border-box;
-    height: 100%;
-  }
-
-  .resizer-container {
-    overflow: auto;
-    flex-grow: 1;
-    border-radius: inherit; /* prevent child elements being drawn outside part=overlay */
-  }
-
-  [part='overlay'][style] .resizer-container {
-    min-height: 100%;
-    width: 100%;
-  }
-
-  :host(:not([resizable])) .resizer {
-    display: none;
-  }
-
-  :host([resizable]) [part='title'] {
-    cursor: move;
-    -webkit-user-select: none;
-    user-select: 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/theme/lumo/vaadin-dialog-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-declare const dialogOverlay: import("lit").CSSResult;
-export { dialogOverlay };

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

@@ -1,109 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const dialogOverlay = css`
-  /* Optical centering */
-  :host::before,
-  :host::after {
-    content: '';
-    flex-basis: 0;
-    flex-grow: 1;
-  }
-
-  :host::after {
-    flex-grow: 1.1;
-  }
-
-  [part='overlay'] {
-    border-radius: var(--lumo-border-radius-l);
-    box-shadow:
-      0 0 0 1px var(--lumo-shade-5pct),
-      var(--lumo-box-shadow-xl);
-    background-image: none;
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  [part='content'] {
-    padding: var(--lumo-space-l);
-  }
-
-  :host(:is([has-header], [has-title])) [part='header'] + [part='content'] {
-    padding-top: 0;
-  }
-
-  [part='header'],
-  [part='header-content'],
-  [part='footer'] {
-    gap: var(--lumo-space-xs) var(--lumo-space-s);
-    line-height: var(--lumo-line-height-s);
-  }
-
-  [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 */
-  }
-
-  [part='footer'] {
-    padding: var(--lumo-space-s) var(--lumo-space-m);
-    background-color: var(--lumo-contrast-5pct);
-    border-radius: 0 0 var(--lumo-border-radius-l) var(--lumo-border-radius-l); /* Needed for Safari */
-  }
-
-  [part='title'] {
-    font-size: var(--lumo-font-size-xl);
-    font-weight: 600;
-    color: var(--lumo-header-text-color);
-    margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
-  }
-
-  /* No padding */
-  :host([theme~='no-padding']) [part='content'] {
-    padding: 0 !important;
-  }
-
-  @media (min-height: 320px) {
-    :host([overflow~='top']) [part='header'] {
-      box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
-    }
-  }
-
-  /* Animations */
-
-  :host([opening]),
-  :host([closing]) {
-    animation: 0.25s lumo-overlay-dummy-animation;
-  }
-
-  :host([opening]) [part='overlay'] {
-    animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
-  }
-
-  @keyframes vaadin-dialog-enter {
-    0% {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-
-  :host([closing]) [part='overlay'] {
-    animation: 0.1s 0.03s vaadin-dialog-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
-  }
-
-  :host([closing]) [part='backdrop'] {
-    animation-delay: 0.05s;
-  }
-
-  @keyframes vaadin-dialog-exit {
-    100% {
-      opacity: 0;
-      transform: scale(1.02);
-    }
-  }
-`;
-
-registerStyles('vaadin-dialog-overlay', [overlay, dialogOverlay], { moduleId: 'lumo-dialog' });
-
-export { dialogOverlay };

package/theme/lumo/vaadin-dialog.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-dialog-styles.js';
-import '../../src/vaadin-dialog.js';

package/theme/lumo/vaadin-dialog.js

@@ -1,2 +0,0 @@
-import './vaadin-dialog-styles.js';
-import '../../src/vaadin-dialog.js';