@vaadin/dialog 25.2.0-beta1 → 25.2.0-rc1

package/custom-elements.json

@@ -281,6 +281,42 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-dialog-overflow-controller.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A controller that detects if the content part of a dialog overlay overflows\nits scrolling viewport vertically, and sets the `overflow` attribute on the\noverlay (and its owner) with `top`, `bottom`, or `top bottom` accordingly, so\nthat overflow indicators can be styled in CSS.",
+          "name": "DialogOverflowController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "host",
+              "description": "The overlay element that hosts the controller.",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "default": "host"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DialogOverflowController",
+          "declaration": {
+            "name": "DialogOverflowController",
+            "module": "src/vaadin-dialog-overflow-controller.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-dialog-overlay-mixin.js",
@@ -946,7 +982,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                      |\n:----------------------------------------|\n|`--vaadin-dialog-background`            |\n|`--vaadin-dialog-border-color`          |\n|`--vaadin-dialog-border-radius`         |\n|`--vaadin-dialog-border-width`          |\n|`--vaadin-dialog-max-width`             |\n|`--vaadin-dialog-min-width`             |\n|`--vaadin-dialog-padding`               |\n|`--vaadin-dialog-shadow`                |\n|`--vaadin-dialog-text-color`            |\n|`--vaadin-dialog-title-color`           |\n|`--vaadin-dialog-title-font-size`       |\n|`--vaadin-dialog-title-font-weight`     |\n|`--vaadin-dialog-title-line-height`     |\n|`--vaadin-overlay-backdrop-background`  |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:--------------------------------------------|\n|`--vaadin-dialog-background`                |\n|`--vaadin-dialog-border-color`              |\n|`--vaadin-dialog-border-radius`             |\n|`--vaadin-dialog-border-width`              |\n|`--vaadin-dialog-max-width`                 |\n|`--vaadin-dialog-min-width`                 |\n|`--vaadin-dialog-overflow-indicator-color`  |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding`                   |\n|`--vaadin-dialog-shadow`                    |\n|`--vaadin-dialog-text-color`                |\n|`--vaadin-dialog-title-color`               |\n|`--vaadin-dialog-title-font-size`           |\n|`--vaadin-dialog-title-font-weight`         |\n|`--vaadin-dialog-title-line-height`         |\n|`--vaadin-overlay-backdrop-background`      |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Dialog",
           "members": [
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "25.2.0-beta1",
+  "version": "25.2.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,25 +37,25 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.2.0-beta1",
-    "@vaadin/lit-renderer": "25.2.0-beta1",
-    "@vaadin/overlay": "25.2.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
+    "@vaadin/component-base": "25.2.0-rc1",
+    "@vaadin/lit-renderer": "25.2.0-rc1",
+    "@vaadin/overlay": "25.2.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.2.0-beta1",
-    "@vaadin/aura": "25.2.0-beta1",
-    "@vaadin/chai-plugins": "25.2.0-beta1",
-    "@vaadin/test-runner-commands": "25.2.0-beta1",
+    "@vaadin/a11y-base": "25.2.0-rc1",
+    "@vaadin/aura": "25.2.0-rc1",
+    "@vaadin/chai-plugins": "25.2.0-rc1",
+    "@vaadin/test-runner-commands": "25.2.0-rc1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
-    "sinon": "^21.0.2"
+    "@vaadin/vaadin-lumo-styles": "25.2.0-rc1",
+    "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
+  "gitHead": "7c581b396dbb889f75c8073d6b4d25537a65b873"
 }

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

@@ -22,6 +22,8 @@ export const dialogOverlayBase = css`
 
   :host {
     cursor: default;
+    --_overflow-indicator-height: var(--vaadin-dialog-overflow-indicator-height, 1px);
+    --_overflow-indicator-color: var(--vaadin-dialog-overflow-indicator-color, var(--vaadin-border-color-secondary));
   }
 
   [part='overlay']:focus-visible {
@@ -114,6 +116,38 @@ export const dialogOverlayBase = css`
   :host(:not([has-footer])) [part='footer'] {
     display: none !important;
   }
+
+  [part='header'],
+  [part='footer'] {
+    position: relative;
+
+    &::after {
+      content: '';
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+      height: var(--_overflow-indicator-height);
+      top: 100%;
+      inset-inline: 0;
+      background: linear-gradient(
+        var(--_overflow-indicator-dir, to bottom),
+        var(--_overflow-indicator-color),
+        var(--_overflow-indicator-color) 1px,
+        transparent
+      );
+    }
+  }
+
+  [part='footer']::after {
+    top: auto;
+    bottom: 100%;
+    --_overflow-indicator-dir: to top;
+  }
+
+  :host([overflow~='top']) [part='header']::after,
+  :host([overflow~='bottom']) [part='footer']::after {
+    opacity: 1;
+  }
 `;
 
 const dialogResizableOverlay = css`

package/src/vaadin-dialog-overflow-controller.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ReactiveController } from 'lit';
+
+/**
+ * A controller that detects if the content part of a dialog overlay overflows
+ * its scrolling viewport vertically, and sets the `overflow` attribute on the
+ * overlay (and its owner) with `top`, `bottom`, or `top bottom` accordingly, so
+ * that overflow indicators can be styled in CSS.
+ */
+export class DialogOverflowController implements ReactiveController {
+  /**
+   * The overlay element that hosts the controller.
+   */
+  host: HTMLElement;
+
+  constructor(host: HTMLElement);
+
+  hostConnected(): void;
+
+  /**
+   * Forces a synchronous overflow update. Call after changing content that
+   * affects whether the content part overflows.
+   */
+  update(): void;
+}

package/src/vaadin-dialog-overflow-controller.js

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { setOverlayStateAttribute } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
+
+/**
+ * A controller that detects if the content part of a dialog overlay overflows
+ * its scrolling viewport vertically, and sets the `overflow` attribute on the
+ * overlay (and its owner) with `top`, `bottom`, or `top bottom` accordingly, so
+ * that overflow indicators can be styled in CSS.
+ */
+export class DialogOverflowController {
+  constructor(host) {
+    /**
+     * The overlay element that hosts the controller.
+     * @type {HTMLElement}
+     */
+    this.host = host;
+  }
+
+  hostConnected() {
+    if (!this.__initialized) {
+      this.__initialized = true;
+
+      const { host } = this;
+
+      // Update overflow attribute on resize
+      this.__resizeObserver = new ResizeObserver(() => this.__updateState());
+      this.__resizeObserver.observe(host.$.resizerContainer);
+
+      // Update overflow attribute on scroll
+      host.$.content.addEventListener('scroll', () => this.__updateState(true));
+
+      // Update overflow attribute on content change
+      host.shadowRoot.addEventListener('slotchange', () => this.__updateState(true));
+    }
+  }
+
+  /**
+   * Forces a synchronous overflow update. Call after changing content that
+   * affects whether the content part overflows.
+   */
+  update() {
+    this.__updateState(true);
+  }
+
+  /** @private */
+  __updateState(sync = false) {
+    cancelAnimationFrame(this.__updateRaf);
+
+    if (sync) {
+      this.__writeState(this.__readState());
+    } else {
+      // Defer reading until the animation frame so that layout has settled
+      // after a resize (some browsers report stale metrics synchronously).
+      this.__updateRaf = requestAnimationFrame(() => this.__writeState(this.__readState()));
+    }
+  }
+
+  /** @private */
+  __readState() {
+    const content = this.host.$.content;
+
+    let overflow = '';
+
+    if (content.scrollTop > 0) {
+      overflow += ' top';
+    }
+
+    if (content.scrollTop < content.scrollHeight - content.clientHeight) {
+      overflow += ' bottom';
+    }
+
+    return overflow.trim();
+  }
+
+  /** @private */
+  __writeState(value) {
+    const { host } = this;
+
+    if (value.length > 0) {
+      setOverlayStateAttribute(host, 'overflow', value);
+    } else {
+      setOverlayStateAttribute(host, 'overflow', null);
+    }
+  }
+}

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

@@ -6,6 +6,7 @@
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { setOverlayStateAttribute } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
+import { DialogOverflowController } from './vaadin-dialog-overflow-controller.js';
 
 export const DialogOverlayMixin = (superClass) =>
   class DialogOverlayMixin extends OverlayMixin(superClass) {
@@ -78,36 +79,29 @@ export const DialogOverlayMixin = (superClass) =>
     ready() {
       super.ready();
 
-      // Update overflow attribute on resize
+      // Detect overflow of the content part and toggle the `overflow` attribute
+      this.__overflowController = new DialogOverflowController(this);
+      this.addController(this.__overflowController);
+
+      // Adjust the position on resize to keep the overlay within the viewport
       this.__resizeObserver = new ResizeObserver(() => {
         requestAnimationFrame(() => {
           this.__adjustPosition();
-          this.__updateOverflow();
         });
       });
       this.__resizeObserver.observe(this.$.resizerContainer);
 
-      // Update overflow attribute on scroll
-      this.$.content.addEventListener('scroll', () => {
-        this.__updateOverflow();
-      });
-
-      // Update overflow attribute on content change
-      this.shadowRoot.addEventListener('slotchange', () => {
-        this.__updateOverflow();
-      });
-
       // Observe header-content and footer slots for dynamic content
       const headerSlot = this.shadowRoot.querySelector('slot[name="header-content"]');
       this.__headerSlotObserver = new SlotObserver(headerSlot, ({ currentNodes }) => {
         setOverlayStateAttribute(this, 'has-header', currentNodes.length > 0);
-        this.__updateOverflow();
+        this.__overflowController.update();
       });
 
       const footerSlot = this.shadowRoot.querySelector('slot[name="footer"]');
       this.__footerSlotObserver = new SlotObserver(footerSlot, ({ currentNodes }) => {
         setOverlayStateAttribute(this, 'has-footer', currentNodes.length > 0);
-        this.__updateOverflow();
+        this.__overflowController.update();
       });
 
       this.__handleWindowResize = this.__handleWindowResize.bind(this);
@@ -235,7 +229,9 @@ export const DialogOverlayMixin = (superClass) =>
 
       this._headerTitleRenderer();
 
-      this.__updateOverflow();
+      // May run via observers before the controller is set up in `ready()`;
+      // the initial overflow state is then detected by the resize observer.
+      this.__overflowController?.update();
     }
 
     /**
@@ -261,28 +257,6 @@ export const DialogOverlayMixin = (superClass) =>
       this.__adjustPosition();
     }
 
-    /** @private */
-    __updateOverflow() {
-      let overflow = '';
-
-      const content = this.$.content;
-
-      if (content.scrollTop > 0) {
-        overflow += ' top';
-      }
-
-      if (content.scrollTop < content.scrollHeight - content.clientHeight) {
-        overflow += ' bottom';
-      }
-
-      const value = overflow.trim();
-      if (value.length > 0 && this.getAttribute('overflow') !== value) {
-        setOverlayStateAttribute(this, 'overflow', value);
-      } else if (value.length === 0 && this.hasAttribute('overflow')) {
-        setOverlayStateAttribute(this, 'overflow', null);
-      }
-    }
-
     /** @private */
     __handleWindowResize() {
       this.__adjustPosition();

package/src/vaadin-dialog.d.ts

@@ -127,22 +127,24 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  *
  * The following custom CSS properties are available for styling:
  *
- * Custom CSS property                      |
- * :----------------------------------------|
- * |`--vaadin-dialog-background`            |
- * |`--vaadin-dialog-border-color`          |
- * |`--vaadin-dialog-border-radius`         |
- * |`--vaadin-dialog-border-width`          |
- * |`--vaadin-dialog-max-width`             |
- * |`--vaadin-dialog-min-width`             |
- * |`--vaadin-dialog-padding`               |
- * |`--vaadin-dialog-shadow`                |
- * |`--vaadin-dialog-text-color`            |
- * |`--vaadin-dialog-title-color`           |
- * |`--vaadin-dialog-title-font-size`       |
- * |`--vaadin-dialog-title-font-weight`     |
- * |`--vaadin-dialog-title-line-height`     |
- * |`--vaadin-overlay-backdrop-background`  |
+ * Custom CSS property                          |
+ * :--------------------------------------------|
+ * |`--vaadin-dialog-background`                |
+ * |`--vaadin-dialog-border-color`              |
+ * |`--vaadin-dialog-border-radius`             |
+ * |`--vaadin-dialog-border-width`              |
+ * |`--vaadin-dialog-max-width`                 |
+ * |`--vaadin-dialog-min-width`                 |
+ * |`--vaadin-dialog-overflow-indicator-color`  |
+ * |`--vaadin-dialog-overflow-indicator-height` |
+ * |`--vaadin-dialog-padding`                   |
+ * |`--vaadin-dialog-shadow`                    |
+ * |`--vaadin-dialog-text-color`                |
+ * |`--vaadin-dialog-title-color`               |
+ * |`--vaadin-dialog-title-font-size`           |
+ * |`--vaadin-dialog-title-font-weight`         |
+ * |`--vaadin-dialog-title-line-height`         |
+ * |`--vaadin-overlay-backdrop-background`      |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/src/vaadin-dialog.js

@@ -70,22 +70,24 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  *
  * The following custom CSS properties are available for styling:
  *
- * Custom CSS property                      |
- * :----------------------------------------|
- * |`--vaadin-dialog-background`            |
- * |`--vaadin-dialog-border-color`          |
- * |`--vaadin-dialog-border-radius`         |
- * |`--vaadin-dialog-border-width`          |
- * |`--vaadin-dialog-max-width`             |
- * |`--vaadin-dialog-min-width`             |
- * |`--vaadin-dialog-padding`               |
- * |`--vaadin-dialog-shadow`                |
- * |`--vaadin-dialog-text-color`            |
- * |`--vaadin-dialog-title-color`           |
- * |`--vaadin-dialog-title-font-size`       |
- * |`--vaadin-dialog-title-font-weight`     |
- * |`--vaadin-dialog-title-line-height`     |
- * |`--vaadin-overlay-backdrop-background`  |
+ * Custom CSS property                          |
+ * :--------------------------------------------|
+ * |`--vaadin-dialog-background`                |
+ * |`--vaadin-dialog-border-color`              |
+ * |`--vaadin-dialog-border-radius`             |
+ * |`--vaadin-dialog-border-width`              |
+ * |`--vaadin-dialog-max-width`                 |
+ * |`--vaadin-dialog-min-width`                 |
+ * |`--vaadin-dialog-overflow-indicator-color`  |
+ * |`--vaadin-dialog-overflow-indicator-height` |
+ * |`--vaadin-dialog-padding`                   |
+ * |`--vaadin-dialog-shadow`                    |
+ * |`--vaadin-dialog-text-color`                |
+ * |`--vaadin-dialog-title-color`               |
+ * |`--vaadin-dialog-title-font-size`           |
+ * |`--vaadin-dialog-title-font-weight`         |
+ * |`--vaadin-dialog-title-line-height`         |
+ * |`--vaadin-overlay-backdrop-background`      |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.2.0-beta1",
+  "version": "25.2.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-dialog",
-          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                      |\n:----------------------------------------|\n|`--vaadin-dialog-background`            |\n|`--vaadin-dialog-border-color`          |\n|`--vaadin-dialog-border-radius`         |\n|`--vaadin-dialog-border-width`          |\n|`--vaadin-dialog-max-width`             |\n|`--vaadin-dialog-min-width`             |\n|`--vaadin-dialog-padding`               |\n|`--vaadin-dialog-shadow`                |\n|`--vaadin-dialog-text-color`            |\n|`--vaadin-dialog-title-color`           |\n|`--vaadin-dialog-title-font-size`       |\n|`--vaadin-dialog-title-font-weight`     |\n|`--vaadin-dialog-title-line-height`     |\n|`--vaadin-overlay-backdrop-background`  |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:--------------------------------------------|\n|`--vaadin-dialog-background`                |\n|`--vaadin-dialog-border-color`              |\n|`--vaadin-dialog-border-radius`             |\n|`--vaadin-dialog-border-width`              |\n|`--vaadin-dialog-max-width`                 |\n|`--vaadin-dialog-min-width`                 |\n|`--vaadin-dialog-overflow-indicator-color`  |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding`                   |\n|`--vaadin-dialog-shadow`                    |\n|`--vaadin-dialog-text-color`                |\n|`--vaadin-dialog-title-color`               |\n|`--vaadin-dialog-title-font-size`           |\n|`--vaadin-dialog-title-font-weight`         |\n|`--vaadin-dialog-title-line-height`         |\n|`--vaadin-overlay-backdrop-background`      |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "draggable",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.2.0-beta1",
+  "version": "25.2.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-dialog",
-          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                      |\n:----------------------------------------|\n|`--vaadin-dialog-background`            |\n|`--vaadin-dialog-border-color`          |\n|`--vaadin-dialog-border-radius`         |\n|`--vaadin-dialog-border-width`          |\n|`--vaadin-dialog-max-width`             |\n|`--vaadin-dialog-min-width`             |\n|`--vaadin-dialog-padding`               |\n|`--vaadin-dialog-shadow`                |\n|`--vaadin-dialog-text-color`            |\n|`--vaadin-dialog-title-color`           |\n|`--vaadin-dialog-title-font-size`       |\n|`--vaadin-dialog-title-font-weight`     |\n|`--vaadin-dialog-title-line-height`     |\n|`--vaadin-overlay-backdrop-background`  |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:--------------------------------------------|\n|`--vaadin-dialog-background`                |\n|`--vaadin-dialog-border-color`              |\n|`--vaadin-dialog-border-radius`             |\n|`--vaadin-dialog-border-width`              |\n|`--vaadin-dialog-max-width`                 |\n|`--vaadin-dialog-min-width`                 |\n|`--vaadin-dialog-overflow-indicator-color`  |\n|`--vaadin-dialog-overflow-indicator-height` |\n|`--vaadin-dialog-padding`                   |\n|`--vaadin-dialog-shadow`                    |\n|`--vaadin-dialog-text-color`                |\n|`--vaadin-dialog-title-color`               |\n|`--vaadin-dialog-title-font-size`           |\n|`--vaadin-dialog-title-font-weight`         |\n|`--vaadin-dialog-title-line-height`         |\n|`--vaadin-overlay-backdrop-background`      |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {