@vaadin/dialog 25.3.0-alpha7 → 25.3.0-alpha9

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",
@@ -358,7 +392,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 +604,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",
@@ -1106,6 +1152,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",
@@ -1141,7 +1201,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",
@@ -1309,46 +1370,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",
@@ -1448,6 +1469,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": {
@@ -1477,7 +1510,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",
@@ -1534,6 +1568,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": {
@@ -1558,7 +1599,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-alpha7",
+  "version": "25.3.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -37,19 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.3.0-alpha7",
-    "@vaadin/lit-renderer": "25.3.0-alpha7",
-    "@vaadin/overlay": "25.3.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha7",
+    "@vaadin/component-base": "25.3.0-alpha9",
+    "@vaadin/lit-renderer": "25.3.0-alpha9",
+    "@vaadin/overlay": "25.3.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.3.0-alpha7",
-    "@vaadin/aura": "25.3.0-alpha7",
-    "@vaadin/chai-plugins": "25.3.0-alpha7",
-    "@vaadin/test-runner-commands": "25.3.0-alpha7",
+    "@vaadin/a11y-base": "25.3.0-alpha9",
+    "@vaadin/aura": "25.3.0-alpha9",
+    "@vaadin/chai-plugins": "25.3.0-alpha9",
+    "@vaadin/test-runner-commands": "25.3.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ae7b9823df5598faebd7a482993029ee489c35ae"
+  "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
 }

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);
       }
     }
 

package/src/vaadin-dialog-overlay.js

@@ -16,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';
   }
@@ -82,3 +81,5 @@ export class DialogOverlay extends DialogOverlayMixin(
 }
 
 defineCustomElement(DialogOverlay);
+
+export { DialogOverlay };

package/src/vaadin-dialog.js

@@ -116,6 +116,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
  */
@@ -171,7 +172,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,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.3.0-alpha7",
+  "version": "25.3.0-alpha9",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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-alpha7",
+  "version": "25.3.0-alpha9",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -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"
               }