@vaadin/dialog 25.3.0-dev.3a3c2d7d2a → 25.3.0-rc1

package/custom-elements.json

@@ -56,6 +56,16 @@
               "description": "Set to true to remove backdrop and allow click events on background elements.",
               "attribute": "modeless"
             },
+            {
+              "kind": "field",
+              "name": "noAutofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
+              "attribute": "no-autofocus"
+            },
             {
               "kind": "field",
               "name": "noCloseOnEsc",
@@ -83,7 +93,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to disable focus trapping.",
+              "description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
+              "deprecated": "This property is deprecated and will be removed in Vaadin 26.",
               "attribute": "no-focus-trap"
             },
             {
@@ -151,6 +162,14 @@
               "description": "Set to true to remove backdrop and allow click events on background elements.",
               "fieldName": "modeless"
             },
+            {
+              "name": "no-autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
+              "fieldName": "noAutofocus"
+            },
             {
               "name": "no-close-on-esc",
               "type": {
@@ -172,7 +191,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to disable focus trapping.",
+              "description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
+              "deprecated": "This property is deprecated and will be removed in Vaadin 26.",
               "fieldName": "noFocusTrap"
             },
             {
@@ -326,6 +346,20 @@
           "description": "",
           "name": "DialogOverlayMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "bringToFront",
@@ -351,6 +385,16 @@
                 "package": "@vaadin/overlay/src/vaadin-overlay-mixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "containsFocus",
+              "description": "Returns true if the overlay contains focus, including nested shadow roots.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "focusTrap",
@@ -358,7 +402,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "attribute": "focus-trap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -570,12 +614,24 @@
             }
           ],
           "attributes": [
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "fieldName": "focusTrap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -758,6 +814,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the dialog footer.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nWhen `footerRenderer` is set, the attribute `has-footer` is set on the dialog.",
+              "deprecated": "Add footer content as children of the dialog using `slot=\"footer\"` instead",
               "attribute": "footer-renderer"
             },
             {
@@ -768,6 +825,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the dialog header.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerRenderer` is set, the attribute `has-header` is set on the dialog.",
+              "deprecated": "Add header content as children of the dialog using `slot=\"header-content\"` instead",
               "attribute": "header-renderer"
             },
             {
@@ -788,12 +846,14 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the content of the dialog.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.",
+              "deprecated": "Add content elements as children of the dialog instead",
               "attribute": "renderer"
             },
             {
               "kind": "method",
               "name": "requestContentUpdate",
-              "description": "Requests an update for the content of the dialog.\nWhile performing the update, it invokes the renderer passed in the `renderer` property,\nas well as `headerRender` and `footerRenderer` properties, if these are defined.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested."
+              "description": "Requests an update for the content of the dialog.\nWhile performing the update, it invokes the renderer passed in the `renderer` property,\nas well as `headerRender` and `footerRenderer` properties, if these are defined.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
+              "deprecated": "This method is only used with renderers and will be removed in Vaadin 26"
             }
           ],
           "attributes": [
@@ -803,6 +863,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the dialog footer.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nWhen `footerRenderer` is set, the attribute `has-footer` is set on the dialog.",
+              "deprecated": "Add footer content as children of the dialog using `slot=\"footer\"` instead",
               "fieldName": "footerRenderer"
             },
             {
@@ -811,6 +872,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the dialog header.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerRenderer` is set, the attribute `has-header` is set on the dialog.",
+              "deprecated": "Add header content as children of the dialog using `slot=\"header-content\"` instead",
               "fieldName": "headerRenderer"
             },
             {
@@ -827,6 +889,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the content of the dialog.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.",
+              "deprecated": "Add content elements as children of the dialog instead",
               "fieldName": "renderer"
             }
           ],
@@ -976,13 +1039,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-dialog-utils.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Remembers where a pointer gesture started, to tell a click from a drag once it ends.",
+          "name": "ClickTracker",
+          "members": [
+            {
+              "kind": "method",
+              "name": "isClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "!MouseEvent | !TouchEvent"
+                  }
+                }
+              ],
+              "description": "Returns true if the pointer hasn't moved since the gesture started.",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "start",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "!MouseEvent | !TouchEvent"
+                  }
+                }
+              ],
+              "description": "Stores the position where the gesture started."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ClickTracker",
+          "declaration": {
+            "name": "ClickTracker",
+            "module": "src/vaadin-dialog-utils.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-dialog.js",
       "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-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.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n```html\n<vaadin-dialog header-title=\"Title\">\n  <div>Dialog content</div>\n  <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName             | Description\n-----------------|-------------\n(none)           | Default slot for the content\n`header-content` | Slot for the header content\n`footer`         | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer`     | Set when the element has footer content\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-dialog-toolbar-gap`               |\n|`--vaadin-overlay-backdrop-background`      |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Dialog",
           "members": [
             {
@@ -1007,6 +1124,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the dialog footer.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nWhen `footerRenderer` is set, the attribute `has-footer` is set on the dialog.",
+              "deprecated": "Add footer content as children of the dialog using `slot=\"footer\"` instead",
               "attribute": "footer-renderer",
               "inheritedFrom": {
                 "name": "DialogRendererMixin",
@@ -1021,6 +1139,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the dialog header.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerRenderer` is set, the attribute `has-header` is set on the dialog.",
+              "deprecated": "Add header content as children of the dialog using `slot=\"header-content\"` instead",
               "attribute": "header-renderer",
               "inheritedFrom": {
                 "name": "DialogRendererMixin",
@@ -1097,6 +1216,20 @@
                 "module": "src/vaadin-dialog-base-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "noAutofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
+              "attribute": "no-autofocus",
+              "inheritedFrom": {
+                "name": "DialogBaseMixin",
+                "module": "src/vaadin-dialog-base-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "noCloseOnEsc",
@@ -1132,7 +1265,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to disable focus trapping.",
+              "description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
+              "deprecated": "This property is deprecated and will be removed in Vaadin 26.",
               "attribute": "no-focus-trap",
               "inheritedFrom": {
                 "name": "DialogBaseMixin",
@@ -1176,6 +1310,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the content of the dialog.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.",
+              "deprecated": "Add content elements as children of the dialog instead",
               "attribute": "renderer",
               "inheritedFrom": {
                 "name": "DialogRendererMixin",
@@ -1186,6 +1321,7 @@
               "kind": "method",
               "name": "requestContentUpdate",
               "description": "Requests an update for the content of the dialog.\nWhile performing the update, it invokes the renderer passed in the `renderer` property,\nas well as `headerRender` and `footerRenderer` properties, if these are defined.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.",
+              "deprecated": "This method is only used with renderers and will be removed in Vaadin 26",
               "inheritedFrom": {
                 "name": "DialogRendererMixin",
                 "module": "src/vaadin-dialog-renderer-mixin.js"
@@ -1298,46 +1434,6 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "DialogSizeMixin",
-              "module": "src/vaadin-dialog-size-mixin.js"
-            },
-            {
-              "name": "DialogDraggableMixin",
-              "module": "src/vaadin-dialog-draggable-mixin.js"
-            },
-            {
-              "name": "DialogResizableMixin",
-              "module": "src/vaadin-dialog-resizable-mixin.js"
-            },
-            {
-              "name": "DialogRendererMixin",
-              "module": "src/vaadin-dialog-renderer-mixin.js"
-            },
-            {
-              "name": "DialogBaseMixin",
-              "module": "src/vaadin-dialog-base-mixin.js"
-            },
-            {
-              "name": "ThemePropertyMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js"
-            },
-            {
-              "name": "ElementMixin",
-              "package": "@vaadin/component-base/src/element-mixin.js"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-dialog",
-          "customElement": true,
           "attributes": [
             {
               "name": "draggable",
@@ -1357,6 +1453,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the dialog footer.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nWhen `footerRenderer` is set, the attribute `has-footer` is set on the dialog.",
+              "deprecated": "Add footer content as children of the dialog using `slot=\"footer\"` instead",
               "fieldName": "footerRenderer",
               "inheritedFrom": {
                 "name": "DialogRendererMixin",
@@ -1369,6 +1466,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the dialog header.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerRenderer` is set, the attribute `has-header` is set on the dialog.",
+              "deprecated": "Add header content as children of the dialog using `slot=\"header-content\"` instead",
               "fieldName": "headerRenderer",
               "inheritedFrom": {
                 "name": "DialogRendererMixin",
@@ -1435,6 +1533,18 @@
                 "module": "src/vaadin-dialog-base-mixin.js"
               }
             },
+            {
+              "name": "no-autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
+              "fieldName": "noAutofocus",
+              "inheritedFrom": {
+                "name": "DialogBaseMixin",
+                "module": "src/vaadin-dialog-base-mixin.js"
+              }
+            },
             {
               "name": "no-close-on-esc",
               "type": {
@@ -1464,7 +1574,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Set to true to disable focus trapping.",
+              "description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
+              "deprecated": "This property is deprecated and will be removed in Vaadin 26.",
               "fieldName": "noFocusTrap",
               "inheritedFrom": {
                 "name": "DialogBaseMixin",
@@ -1502,6 +1613,7 @@
                 "text": "DialogRenderer | undefined"
               },
               "description": "Custom function for rendering the content of the dialog.\nReceives two arguments:\n\n- `root` The root container DOM element. Append your content to it.\n- `dialog` The reference to the `<vaadin-dialog>` element.",
+              "deprecated": "Add content elements as children of the dialog instead",
               "fieldName": "renderer",
               "inheritedFrom": {
                 "name": "DialogRendererMixin",
@@ -1520,6 +1632,13 @@
                 "module": "src/vaadin-dialog-resizable-mixin.js"
               }
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            },
             {
               "name": "top",
               "type": {
@@ -1544,7 +1663,47 @@
                 "module": "src/vaadin-dialog-size-mixin.js"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "DialogSizeMixin",
+              "module": "src/vaadin-dialog-size-mixin.js"
+            },
+            {
+              "name": "DialogDraggableMixin",
+              "module": "src/vaadin-dialog-draggable-mixin.js"
+            },
+            {
+              "name": "DialogResizableMixin",
+              "module": "src/vaadin-dialog-resizable-mixin.js"
+            },
+            {
+              "name": "DialogRendererMixin",
+              "module": "src/vaadin-dialog-renderer-mixin.js"
+            },
+            {
+              "name": "DialogBaseMixin",
+              "module": "src/vaadin-dialog-base-mixin.js"
+            },
+            {
+              "name": "ThemePropertyMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-dialog",
+          "customElement": true
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,19 +37,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/lit-renderer": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/overlay": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/a11y-base": "25.3.0-rc1",
+    "@vaadin/component-base": "25.3.0-rc1",
+    "@vaadin/lit-renderer": "25.3.0-rc1",
+    "@vaadin/overlay": "25.3.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/aura": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/chai-plugins": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/test-runner-commands": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/a11y-base": "25.3.0-beta3",
+    "@vaadin/aura": "25.3.0-rc1",
+    "@vaadin/chai-plugins": "25.3.0-rc1",
+    "@vaadin/test-runner-commands": "25.3.0-rc1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ac506ca7800c23e05da55863c56bcedf12812d37"
+  "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
 }

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

@@ -69,6 +69,7 @@ export class DialogFooterRendererDirective extends AbstractDialogRendererDirecti
  * @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.
+ * @deprecated Add content elements as children of the dialog instead
  */
 export declare function dialogRenderer(
   renderer: DialogLitRenderer,
@@ -100,6 +101,7 @@ export declare function dialogRenderer(
  * @param renderer the renderer callback.
  * @param dependencies a single dependency or an array of dependencies
  *                     which trigger a re-render when changed.
+ * @deprecated Add header content as children of the dialog using `slot="header-content"` instead
  */
 export declare function dialogHeaderRenderer(
   renderer: DialogLitRenderer,
@@ -131,6 +133,7 @@ export declare function dialogHeaderRenderer(
  * @param renderer the renderer callback.
  * @param dependencies a single dependency or an array of dependencies
  *                     which trigger a re-render when changed.
+ * @deprecated Add footer content as children of the dialog using `slot="footer"` instead
  */
 export declare function dialogFooterRenderer(
   renderer: DialogLitRenderer,

package/src/lit/renderer-directives.js

@@ -95,6 +95,7 @@ export class DialogFooterRendererDirective extends AbstractDialogRendererDirecti
  * @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.
+ * @deprecated Add content elements as children of the dialog instead
  */
 export const dialogRenderer = directive(DialogRendererDirective);
 
@@ -123,6 +124,7 @@ export const dialogRenderer = directive(DialogRendererDirective);
  * @param renderer the renderer callback.
  * @param dependencies a single dependency or an array of dependencies
  *                     which trigger a re-render when changed.
+ * @deprecated Add header content as children of the dialog using `slot="header-content"` instead
  */
 export const dialogHeaderRenderer = directive(DialogHeaderRendererDirective);
 
@@ -151,5 +153,6 @@ export const dialogHeaderRenderer = directive(DialogHeaderRendererDirective);
  * @param renderer the renderer callback.
  * @param dependencies a single dependency or an array of dependencies
  *                     which trigger a re-render when changed.
+ * @deprecated Add footer content as children of the dialog using `slot="footer"` instead
  */
 export const dialogFooterRenderer = directive(DialogFooterRendererDirective);

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

@@ -33,11 +33,24 @@ export declare class DialogBaseMixinClass {
   modeless: boolean;
 
   /**
-   * Set to true to disable focus trapping.
+   * Set to true to prevent the dialog from receiving focus
+   * on open and trapping it inside.
+   *
    * @attr {boolean} no-focus-trap
+   * @deprecated This property is deprecated and will be removed in Vaadin 26.
    */
   noFocusTrap: boolean;
 
+  /**
+   * Set to true to prevent focus from moving into the dialog on open.
+   *
+   * This property only works for non-modal dialogs and is ignored
+   * for modal ones, where focus must always stay inside.
+   *
+   * @attr {boolean} no-autofocus
+   */
+  noAutofocus: boolean;
+
   /**
    * The `role` attribute value to be set on the dialog. Defaults to "dialog".
    *

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 
 export const DialogBaseMixin = (superClass) =>
   class DialogBaseMixin extends superClass {
@@ -46,14 +47,30 @@ export const DialogBaseMixin = (superClass) =>
         },
 
         /**
-         * Set to true to disable focus trapping.
+         * Set to true to prevent the dialog from receiving focus
+         * on open and trapping it inside.
+         *
          * @attr {boolean} no-focus-trap
+         * @deprecated This property is deprecated and will be removed in Vaadin 26.
          */
         noFocusTrap: {
           type: Boolean,
           value: false,
         },
 
+        /**
+         * Set to true to prevent focus from moving into the dialog on open.
+         *
+         * This property only works for non-modal dialogs and is ignored
+         * for modal ones, where focus must always stay inside.
+         *
+         * @attr {boolean} no-autofocus
+         */
+        noAutofocus: {
+          type: Boolean,
+          value: false,
+        },
+
         /**
          * Set the distance of the dialog from the top of the viewport.
          * If a unitless number is provided, pixels are assumed.
@@ -134,11 +151,7 @@ export const DialogBaseMixin = (superClass) =>
       }
 
       if (props.has('modeless')) {
-        if (!this.modeless) {
-          this.setAttribute('aria-modal', 'true');
-        } else {
-          this.removeAttribute('aria-modal');
-        }
+        setOrRemoveAttribute(this, 'aria-modal', !this.modeless);
       }
     }
 
@@ -198,10 +211,11 @@ export const DialogBaseMixin = (superClass) =>
     }
 
     /** @private */
-    _bringOverlayToFront() {
-      if (this.modeless) {
-        this._overlayElement.bringToFront();
+    _bringOverlayToFront(event) {
+      if (!this.modeless) {
+        return;
       }
+      this._overlayElement.bringToFront(event);
     }
 
     /** @private */

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

@@ -3,8 +3,9 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
-import { eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
+import { ClickTracker, eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
 
 export const DialogDraggableMixin = (superClass) =>
   class VaadinDialogDraggableMixin extends superClass {
@@ -44,6 +45,7 @@ export const DialogDraggableMixin = (superClass) =>
       super.ready();
       this._originalBounds = {};
       this._originalMouseCoords = {};
+      this.__dragTracker = new ClickTracker();
       this._startDrag = this._startDrag.bind(this);
       this._drag = this._drag.bind(this);
       this._stopDrag = this._stopDrag.bind(this);
@@ -86,6 +88,8 @@ export const DialogDraggableMixin = (superClass) =>
         if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
           // Signal that we're handling this drag event, so parent dialogs won't also drag
           e.preventDefault();
+          // `preventDefault()` above cancels the native focus change, restored in `_stopDrag()`
+          this.__dragTracker.start(e);
           this._originalBounds = this.$.overlay.getBounds();
           const event = getMouseOrFirstTouchEvent(e);
           this._originalMouseCoords = { top: event.pageY, left: event.pageX };
@@ -128,7 +132,12 @@ export const DialogDraggableMixin = (superClass) =>
     }
 
     /** @private */
-    _stopDrag() {
+    _stopDrag(e) {
+      // Focus on click, not on drag, so that moving the dialog doesn't interrupt editing
+      if (this.__dragTracker.isClick(e) && !this.$.overlay.containsFocus()) {
+        this.focus({ preventScroll: true, focusVisible: isKeyboardActive() });
+      }
+
       this.dispatchEvent(new CustomEvent('dragged', { detail: { top: this.top, left: this.left } }));
       window.removeEventListener('mouseup', this._stopDrag);
       window.removeEventListener('touchend', this._stopDrag);

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

@@ -44,4 +44,9 @@ export declare class DialogOverlayMixinClass {
    * Retrieves the coordinates of the overlay.
    */
   getBounds(): DialogOverlayBounds;
+
+  /**
+   * Returns true if the overlay contains focus, including nested shadow roots.
+   */
+  containsFocus(): boolean;
 }

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 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';
@@ -59,6 +60,15 @@ export const DialogOverlayMixin = (superClass) =>
       return this.owner;
     }
 
+    /**
+     * Returns true if the overlay contains focus, including nested shadow roots.
+     *
+     * @return {boolean}
+     */
+    containsFocus() {
+      return this._deepContains(getDeepActiveElement());
+    }
+
     /**
      * Override method from OverlayMixin to use slotted div as a renderer root.
      * @protected

package/src/vaadin-dialog-overlay.js

@@ -7,6 +7,7 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { getOverlaysOnTop, isNestedOverlay } from '@vaadin/overlay/src/vaadin-overlay-stack-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-base-styles.js';
@@ -15,13 +16,12 @@ import { DialogOverlayMixin } from './vaadin-dialog-overlay-mixin.js';
 /**
  * An element used internally by `<vaadin-dialog>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-dialog-overlay
  * @extends HTMLElement
  * @private
  */
-export class DialogOverlay extends DialogOverlayMixin(
-  DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
-) {
+class DialogOverlay extends DialogOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-dialog-overlay';
   }
@@ -31,11 +31,11 @@ export class DialogOverlay extends DialogOverlayMixin(
   }
 
   /**
-   * Override method from OverlayFocusMixin to use owner as focus trap root
+   * Override method from OverlayFocusMixin to use owner as focus root
    * @protected
    * @override
    */
-  get _focusTrapRoot() {
+  get _focusRoot() {
     return this.owner;
   }
 
@@ -55,6 +55,31 @@ export class DialogOverlay extends DialogOverlayMixin(
       </div>
     `;
   }
+
+  /**
+   * @param {Event} event
+   * @protected
+   * @override
+   */
+  bringToFront(event) {
+    if (event instanceof Event) {
+      const path = event.composedPath();
+
+      // Do not bring overlay to front if this method is called
+      // on event that originates from a nested dialog content.
+      const isNestedDialogEvent = getOverlaysOnTop(this).some(
+        (overlay) => path.includes(overlay) && isNestedOverlay(this, overlay) && overlay instanceof DialogOverlay,
+      );
+
+      if (isNestedDialogEvent) {
+        return;
+      }
+    }
+
+    super.bringToFront();
+  }
 }
 
 defineCustomElement(DialogOverlay);
+
+export { DialogOverlay };

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

@@ -17,6 +17,8 @@ export declare class DialogRendererMixinClass {
    *
    * - `root` The root container DOM element. Append your content to it.
    * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * @deprecated Add content elements as children of the dialog instead
    */
   renderer: DialogRenderer | null | undefined;
 
@@ -44,6 +46,8 @@ export declare class DialogRendererMixinClass {
    * each other, with the title coming first.
    *
    * When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
+   *
+   * @deprecated Add header content as children of the dialog using `slot="header-content"` instead
    */
   headerRenderer: DialogRenderer | null | undefined;
 
@@ -55,6 +59,8 @@ export declare class DialogRendererMixinClass {
    * - `dialog` The reference to the `<vaadin-dialog>` element.
    *
    * When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
+   *
+   * @deprecated Add footer content as children of the dialog using `slot="footer"` instead
    */
   footerRenderer: DialogRenderer | null | undefined;
 
@@ -63,6 +69,8 @@ export declare class DialogRendererMixinClass {
    * as well as `headerRender` and `footerRenderer` properties, if these are defined.
    *
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   *
+   * @deprecated This method is only used with renderers and will be removed in Vaadin 26
    */
   requestContentUpdate(): void;
 }

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

@@ -15,6 +15,7 @@ export const DialogRendererMixin = (superClass) =>
          * - `root` The root container DOM element. Append your content to it.
          * - `dialog` The reference to the `<vaadin-dialog>` element.
          * @type {DialogRenderer | undefined}
+         * @deprecated Add content elements as children of the dialog instead
          */
         renderer: {
           type: Object,
@@ -47,6 +48,7 @@ export const DialogRendererMixin = (superClass) =>
          *
          * When `headerRenderer` is set, the attribute `has-header` is set on the dialog.
          * @type {DialogRenderer | undefined}
+         * @deprecated Add header content as children of the dialog using `slot="header-content"` instead
          */
         headerRenderer: {
           type: Object,
@@ -61,6 +63,7 @@ export const DialogRendererMixin = (superClass) =>
          *
          * When `footerRenderer` is set, the attribute `has-footer` is set on the dialog.
          * @type {DialogRenderer | undefined}
+         * @deprecated Add footer content as children of the dialog using `slot="footer"` instead
          */
         footerRenderer: {
           type: Object,
@@ -74,6 +77,8 @@ export const DialogRendererMixin = (superClass) =>
      * as well as `headerRender` and `footerRenderer` properties, if these are defined.
      *
      * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+     *
+     * @deprecated This method is only used with renderers and will be removed in Vaadin 26
      */
     requestContentUpdate() {
       if (this._overlayElement) {

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

@@ -3,7 +3,8 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
+import { ClickTracker, eventInWindow, getMouseOrFirstTouchEvent } from './vaadin-dialog-utils.js';
 export const DialogResizableMixin = (superClass) =>
   class VaadinDialogResizableMixin extends superClass {
     static get properties() {
@@ -24,6 +25,7 @@ export const DialogResizableMixin = (superClass) =>
       super.ready();
       this._originalBounds = {};
       this._originalMouseCoords = {};
+      this.__resizeTracker = new ClickTracker();
       this._resizeListeners = { start: {}, resize: {}, stop: {} };
       this._addResizeListeners();
     }
@@ -35,7 +37,7 @@ export const DialogResizableMixin = (superClass) =>
         const resizer = document.createElement('div');
         this._resizeListeners.start[direction] = (e) => this._startResize(e, direction);
         this._resizeListeners.resize[direction] = (e) => this._resize(e, direction);
-        this._resizeListeners.stop[direction] = () => this._stopResize(direction);
+        this._resizeListeners.stop[direction] = (e) => this._stopResize(e, direction);
         if (direction.length === 1) {
           resizer.classList.add('edge');
         }
@@ -60,6 +62,8 @@ export const DialogResizableMixin = (superClass) =>
 
       if (e.button === 0 || e.touches) {
         e.preventDefault();
+        // `preventDefault()` above cancels the native focus change, restored in `_stopResize()`
+        this.__resizeTracker.start(e);
 
         this._originalBounds = this.$.overlay.getBounds();
         const event = getMouseOrFirstTouchEvent(e);
@@ -127,10 +131,16 @@ export const DialogResizableMixin = (superClass) =>
     }
 
     /**
+     * @param {!MouseEvent | !TouchEvent} e
      * @param {!DialogResizableDirection} direction
      * @protected
      */
-    _stopResize(direction) {
+    _stopResize(e, direction) {
+      // Focus on click, not on resize, so that resizing the dialog doesn't interrupt editing
+      if (this.__resizeTracker.isClick(e) && !this.$.overlay.containsFocus()) {
+        this.focus({ preventScroll: true, focusVisible: isKeyboardActive() });
+      }
+
       window.removeEventListener('mousemove', this._resizeListeners.resize[direction]);
       window.removeEventListener('touchmove', this._resizeListeners.resize[direction]);
       window.removeEventListener('mouseup', this._resizeListeners.stop[direction]);

package/src/vaadin-dialog-utils.d.ts

@@ -6,6 +6,7 @@
 
 /**
  * Checks if the argument is a touch event and if so, returns a first touch.
+ * On `touchend`, `touches` is empty and the released point is in `changedTouches`.
  * Otherwise, if the mouse event was passed, returns it as is.
  */
 declare function getMouseOrFirstTouchEvent(e: MouseEvent | TouchEvent): MouseEvent | Touch;
@@ -18,3 +19,18 @@ export { getMouseOrFirstTouchEvent };
 declare function eventInWindow(e: MouseEvent | TouchEvent): boolean;
 
 export { eventInWindow };
+
+/**
+ * Remembers where a pointer gesture started, to tell a click from a drag once it ends.
+ */
+export declare class ClickTracker {
+  /**
+   * Stores the position where the gesture started.
+   */
+  start(e: MouseEvent | TouchEvent): void;
+
+  /**
+   * Returns true if the pointer hasn't moved since the gesture started.
+   */
+  isClick(e: MouseEvent | TouchEvent): boolean;
+}

package/src/vaadin-dialog-utils.js

@@ -6,13 +6,14 @@
 
 /**
  * Checks if the argument is a touch event and if so, returns a first touch.
+ * On `touchend`, `touches` is empty and the released point is in `changedTouches`.
  * Otherwise, if the mouse event was passed, returns it as is.
  * @param {!MouseEvent | !TouchEvent} e
  * @return {!MouseEvent | !Touch}
  * @protected
  */
 export function getMouseOrFirstTouchEvent(e) {
-  return e.touches ? e.touches[0] : e;
+  return e.touches ? e.touches[0] || e.changedTouches[0] : e;
 }
 
 /**
@@ -24,3 +25,35 @@ export function getMouseOrFirstTouchEvent(e) {
 export function eventInWindow(e) {
   return e.clientX >= 0 && e.clientX <= window.innerWidth && e.clientY >= 0 && e.clientY <= window.innerHeight;
 }
+
+// Pointer movement in pixels above which a gesture is a drag, not a click.
+// Same value as `TRACK_DISTANCE` in `@vaadin/component-base/src/gestures.js`.
+const DRAG_DISTANCE = 5;
+
+/**
+ * Remembers where a pointer gesture started, to tell a click from a drag once it ends.
+ */
+export class ClickTracker {
+  /** @type {{ x: number, y: number }} */
+  #start;
+
+  /**
+   * Stores the position where the gesture started.
+   * @param {!MouseEvent | !TouchEvent} e
+   */
+  start(e) {
+    // Viewport coordinates, so scrolling during the gesture doesn't count as movement
+    const { clientX, clientY } = getMouseOrFirstTouchEvent(e);
+    this.#start = { x: clientX, y: clientY };
+  }
+
+  /**
+   * Returns true if the pointer hasn't moved since the gesture started.
+   * @param {!MouseEvent | !TouchEvent} e
+   * @return {boolean}
+   */
+  isClick(e) {
+    const { clientX, clientY } = getMouseOrFirstTouchEvent(e);
+    return Math.abs(clientX - this.#start.x) < DRAG_DISTANCE && Math.abs(clientY - this.#start.y) < DRAG_DISTANCE;
+  }
+}

package/src/vaadin-dialog.d.ts

@@ -78,9 +78,27 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
 /**
  * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
  *
- * ### Rendering
+ * ```html
+ * <vaadin-dialog header-title="Title">
+ *   <div>Dialog content</div>
+ *   <div slot="footer">Footer</div>
+ * </vaadin-dialog>
+ * ```
+ *
+ * ### Slots
+ *
+ * Dialog supports following slots for providing content:
+ *
+ * Name             | Description
+ * -----------------|-------------
+ * (none)           | Default slot for the content
+ * `header-content` | Slot for the header content
+ * `footer`         | Slot for the footer content
+ *
+ * #### Renderer (deprecated)
  *
- * The content of the dialog can be populated by using the renderer callback function.
+ * The content of the dialog can also be populated by using the renderer callback functions,
+ * although this approach is deprecated in favor of slotted content.
  *
  * The renderer function provides `root`, `dialog` arguments.
  * Generate DOM content, append it to the `root` element and control the state
@@ -121,8 +139,8 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * Attribute        | Description
  * -----------------|--------------------------------------------
  * `has-title`      | Set when the element has a title
- * `has-header`     | Set when the element has header renderer
- * `has-footer`     | Set when the element has footer renderer
+ * `has-header`     | Set when the element has header content
+ * `has-footer`     | Set when the element has footer content
  * `overflow`       | Set to `top`, `bottom`, none or both
  *
  * The following custom CSS properties are available for styling:
@@ -144,6 +162,7 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * |`--vaadin-dialog-title-font-size`           |
  * |`--vaadin-dialog-title-font-weight`         |
  * |`--vaadin-dialog-title-line-height`         |
+ * |`--vaadin-dialog-toolbar-gap`               |
  * |`--vaadin-overlay-backdrop-background`      |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

package/src/vaadin-dialog.js

@@ -21,9 +21,27 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
 /**
  * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs.
  *
- * ### Rendering
+ * ```html
+ * <vaadin-dialog header-title="Title">
+ *   <div>Dialog content</div>
+ *   <div slot="footer">Footer</div>
+ * </vaadin-dialog>
+ * ```
+ *
+ * ### Slots
+ *
+ * Dialog supports following slots for providing content:
+ *
+ * Name             | Description
+ * -----------------|-------------
+ * (none)           | Default slot for the content
+ * `header-content` | Slot for the header content
+ * `footer`         | Slot for the footer content
+ *
+ * #### Renderer (deprecated)
  *
- * The content of the dialog can be populated by using the renderer callback function.
+ * The content of the dialog can also be populated by using the renderer callback functions,
+ * although this approach is deprecated in favor of slotted content.
  *
  * The renderer function provides `root`, `dialog` arguments.
  * Generate DOM content, append it to the `root` element and control the state
@@ -64,8 +82,8 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  * Attribute        | Description
  * -----------------|--------------------------------------------
  * `has-title`      | Set when the element has a title
- * `has-header`     | Set when the element has header renderer
- * `has-footer`     | Set when the element has footer renderer
+ * `has-header`     | Set when the element has header content
+ * `has-footer`     | Set when the element has footer content
  * `overflow`       | Set to `top`, `bottom`, none or both
  *
  * The following custom CSS properties are available for styling:
@@ -87,6 +105,7 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  * |`--vaadin-dialog-title-font-size`           |
  * |`--vaadin-dialog-title-font-weight`         |
  * |`--vaadin-dialog-title-line-height`         |
+ * |`--vaadin-dialog-toolbar-gap`               |
  * |`--vaadin-overlay-backdrop-background`      |
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
@@ -98,6 +117,7 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-dialog
  * @extends HTMLElement
  */
@@ -153,7 +173,8 @@ class Dialog extends DialogSizeMixin(
         .withBackdrop="${!this.modeless}"
         ?resizable="${this.resizable}"
         restore-focus-on-close
-        ?focus-trap="${!this.noFocusTrap}"
+        ?focus-trap="${!this.noFocusTrap && !this.modeless}"
+        ?autofocus="${this.modeless ? !this.noAutofocus && !this.noFocusTrap : !this.noFocusTrap}"
         exportparts="backdrop, overlay, header, title, header-content, content, footer"
       >
         <slot name="title" slot="title"></slot>

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.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-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.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n```html\n<vaadin-dialog header-title=\"Title\">\n  <div>Dialog content</div>\n  <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName             | Description\n-----------------|-------------\n(none)           | Default slot for the content\n`header-content` | Slot for the header content\n`footer`         | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer`     | Set when the element has footer content\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-dialog-toolbar-gap`               |\n|`--vaadin-overlay-backdrop-background`      |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "draggable",
@@ -64,6 +64,15 @@
                 ]
               }
             },
+            {
+              "name": "no-autofocus",
+              "description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "no-close-on-esc",
               "description": "Set to true to disable closing dialog on Escape press",
@@ -84,7 +93,7 @@
             },
             {
               "name": "no-focus-trap",
-              "description": "Set to true to disable focus trapping.",
+              "description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
               "value": {
                 "type": [
                   "boolean"
@@ -123,9 +132,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -224,6 +231,15 @@
                   ]
                 }
               },
+              {
+                "name": "noAutofocus",
+                "description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
               {
                 "name": "noCloseOnEsc",
                 "description": "Set to true to disable closing dialog on Escape press",
@@ -244,7 +260,7 @@
               },
               {
                 "name": "noFocusTrap",
-                "description": "Set to true to disable focus trapping.",
+                "description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
                 "value": {
                   "type": [
                     "boolean"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.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-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.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n```html\n<vaadin-dialog header-title=\"Title\">\n  <div>Dialog content</div>\n  <div slot=\"footer\">Footer</div>\n</vaadin-dialog>\n```\n\n### Slots\n\nDialog supports following slots for providing content:\n\nName             | Description\n-----------------|-------------\n(none)           | Default slot for the content\n`header-content` | Slot for the header content\n`footer`         | Slot for the footer content\n\n#### Renderer (deprecated)\n\nThe content of the dialog can also be populated by using the renderer callback functions,\nalthough this approach is deprecated in favor of slotted content.\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 content\n`has-footer`     | Set when the element has footer content\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-dialog-toolbar-gap`               |\n|`--vaadin-overlay-backdrop-background`      |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -75,6 +75,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?noAutofocus",
+              "description": "Set to true to prevent focus from moving into the dialog on open.\n\nThis property only works for non-modal dialogs and is ignored\nfor modal ones, where focus must always stay inside.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?noCloseOnEsc",
               "description": "Set to true to disable closing dialog on Escape press",
@@ -91,7 +98,7 @@
             },
             {
               "name": "?noFocusTrap",
-              "description": "Set to true to disable focus trapping.",
+              "description": "Set to true to prevent the dialog from receiving focus\non open and trapping it inside.",
               "value": {
                 "kind": "expression"
               }