@vaadin/dialog 25.0.0-alpha8 → 25.0.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -39,17 +39,17 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha8",
-    "@vaadin/lit-renderer": "25.0.0-alpha8",
-    "@vaadin/overlay": "25.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
+    "@vaadin/component-base": "25.0.0-alpha9",
+    "@vaadin/lit-renderer": "25.0.0-alpha9",
+    "@vaadin/overlay": "25.0.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/chai-plugins": "25.0.0-alpha8",
-    "@vaadin/test-runner-commands": "25.0.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-alpha9",
+    "@vaadin/test-runner-commands": "25.0.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

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

@@ -64,6 +64,10 @@ export const dialogOverlayBase = css`
     padding: var(--vaadin-dialog-padding, var(--vaadin-padding));
   }
 
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0 !important;
+  }
+
   :host(:is([has-header], [has-title])) [part='content'] {
     padding-top: 0;
   }

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

@@ -33,7 +33,7 @@ export declare class DialogBaseMixinClass {
   modeless: boolean;
 
   /**
-   * The `role` attribute value to be set on the overlay. Defaults to "dialog".
+   * The `role` attribute value to be set on the dialog. Defaults to "dialog".
    *
    * @attr {string} overlay-role
    */

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

@@ -17,6 +17,7 @@ export const DialogBaseMixin = (superClass) =>
          */
         opened: {
           type: Boolean,
+          reflectToAttribute: true,
           value: false,
           notify: true,
           sync: true,
@@ -76,13 +77,12 @@ export const DialogBaseMixin = (superClass) =>
         },
 
         /**
-         * The `role` attribute value to be set on the overlay. Defaults to "dialog".
+         * The `role` attribute value to be set on the dialog. Defaults to "dialog".
          *
          * @attr {string} overlay-role
          */
         overlayRole: {
           type: String,
-          value: 'dialog',
         },
       };
     }
@@ -102,6 +102,19 @@ export const DialogBaseMixin = (superClass) =>
       overlay.addEventListener('vaadin-overlay-closed', this.__handleOverlayClosed.bind(this));
 
       this._overlayElement = overlay;
+
+      if (!this.hasAttribute('role')) {
+        this.role = 'dialog';
+      }
+    }
+
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('overlayRole')) {
+        this.role = this.overlayRole || 'dialog';
+      }
     }
 
     /** @private */

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { setOverlayStateAttribute } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
 
 /**
  * @polymerMixin
@@ -43,6 +44,24 @@ export const DialogOverlayMixin = (superClass) =>
       ];
     }
 
+    /**
+     * Override method from OverlayFocusMixin to use owner as content root
+     * @protected
+     * @override
+     */
+    get _contentRoot() {
+      return this.owner;
+    }
+
+    /**
+     * Override method from OverlayFocusMixin to use owner as modal root
+     * @protected
+     * @override
+     */
+    get _modalRoot() {
+      return this.owner;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -99,8 +118,8 @@ export const DialogOverlayMixin = (superClass) =>
       this._oldOpenedFooterHeader = opened;
 
       // Set attributes here to update styles before detecting content overflow
-      this.toggleAttribute('has-header', !!headerRenderer);
-      this.toggleAttribute('has-footer', !!footerRenderer);
+      setOverlayStateAttribute(this, 'has-header', !!headerRenderer);
+      setOverlayStateAttribute(this, 'has-footer', !!footerRenderer);
 
       if (headerRendererChanged) {
         if (headerRenderer) {
@@ -134,7 +153,7 @@ export const DialogOverlayMixin = (superClass) =>
 
     /** @private */
     _headerTitleChanged(headerTitle, opened) {
-      this.toggleAttribute('has-title', !!headerTitle);
+      setOverlayStateAttribute(this, 'has-title', !!headerTitle);
 
       if (opened && (headerTitle || this._oldHeaderTitle)) {
         this.requestContentUpdate();
@@ -150,7 +169,7 @@ export const DialogOverlayMixin = (superClass) =>
           this.headerTitleElement.setAttribute('slot', 'title');
           this.headerTitleElement.classList.add('draggable');
         }
-        this.appendChild(this.headerTitleElement);
+        this.owner.appendChild(this.headerTitleElement);
         this.headerTitleElement.textContent = this.headerTitle;
       } else if (this.headerTitleElement) {
         this.headerTitleElement.remove();
@@ -167,7 +186,7 @@ export const DialogOverlayMixin = (superClass) =>
       if (this.headerContainer) {
         // If a new renderer has been set, make sure to reattach the container
         if (!this.headerContainer.parentElement) {
-          this.appendChild(this.headerContainer);
+          this.owner.appendChild(this.headerContainer);
         }
 
         if (this.headerRenderer) {
@@ -179,7 +198,7 @@ export const DialogOverlayMixin = (superClass) =>
       if (this.footerContainer) {
         // If a new renderer has been set, make sure to reattach the container
         if (!this.footerContainer.parentElement) {
-          this.appendChild(this.footerContainer);
+          this.owner.appendChild(this.footerContainer);
         }
 
         if (this.footerRenderer) {
@@ -227,9 +246,9 @@ export const DialogOverlayMixin = (superClass) =>
 
       const value = overflow.trim();
       if (value.length > 0 && this.getAttribute('overflow') !== value) {
-        this.setAttribute('overflow', value);
+        setOverlayStateAttribute(this, 'overflow', value);
       } else if (value.length === 0 && this.hasAttribute('overflow')) {
-        this.removeAttribute('overflow');
+        setOverlayStateAttribute(this, 'overflow', null);
       }
     }
   };

package/src/vaadin-dialog.d.ts

@@ -91,16 +91,13 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  *
  * ### Styling
  *
- * `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal
- * themable component as the actual visible dialog overlay.
- *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
- * for `<vaadin-dialog-overlay>` parts.
- *
- * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  * `header`         | Element wrapping title and header content
  * `header-content` | Element wrapping the header content slot
  * `title`          | Element wrapping the title slot
@@ -115,9 +112,6 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * `has-footer`     | Set when the element has footer renderer
  * `overflow`       | Set to `top`, `bottom`, none or both
  *
- * Note: the `theme` attribute value set on `<vaadin-dialog>` is
- * propagated to the internal `<vaadin-dialog-overlay>` component.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
@@ -132,13 +126,6 @@ declare class Dialog extends DialogSizeMixin(
     ),
   ),
 ) {
-  /**
-   * Set the `aria-label` attribute for assistive technologies like
-   * screen readers. An empty string value for this property (the
-   * default) means that the `aria-label` attribute is not present.
-   */
-  ariaLabel: string;
-
   addEventListener<K extends keyof DialogEventMap>(
     type: K,
     listener: (this: Dialog, ev: DialogEventMap[K]) => void,

package/src/vaadin-dialog.js

@@ -48,16 +48,13 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  *
  * ### Styling
  *
- * `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal
- * themable component as the actual visible dialog overlay.
- *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
- * for `<vaadin-dialog-overlay>` parts.
- *
- * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  * `header`         | Element wrapping title and header content
  * `header-content` | Element wrapping the header content slot
  * `title`          | Element wrapping the title slot
@@ -72,9 +69,6 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  * `has-footer`     | Set when the element has footer renderer
  * `overflow`       | Set to `top`, `bottom`, none or both
  *
- * Note: the `theme` attribute value set on `<vaadin-dialog>` is
- * propagated to the internal `<vaadin-dialog-overlay>` component.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
@@ -108,32 +102,24 @@ class Dialog extends DialogSizeMixin(
 
   static get styles() {
     return css`
-      :host {
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: contents !important;
+      }
+
+      :host,
+      :host([hidden]) {
         display: none !important;
       }
     `;
   }
 
-  static get properties() {
-    return {
-      /**
-       * Set the `aria-label` attribute for assistive technologies like
-       * screen readers. An empty string value for this property (the
-       * default) means that the `aria-label` attribute is not present.
-       */
-      ariaLabel: {
-        type: String,
-        value: '',
-      },
-    };
-  }
-
   /** @protected */
   render() {
     return html`
       <vaadin-dialog-overlay
         id="overlay"
-        role="${this.overlayRole}"
         .owner="${this}"
         .opened="${this.opened}"
         .headerTitle="${this.headerTitle}"
@@ -144,15 +130,29 @@ class Dialog extends DialogSizeMixin(
         @mousedown="${this._bringOverlayToFront}"
         @touchstart="${this._bringOverlayToFront}"
         theme="${ifDefined(this._theme)}"
-        aria-label="${ifDefined(this.ariaLabel || this.headerTitle)}"
         .modeless="${this.modeless}"
         .withBackdrop="${!this.modeless}"
         ?resizable="${this.resizable}"
         restore-focus-on-close
         focus-trap
-      ></vaadin-dialog-overlay>
+        exportparts="backdrop, overlay, header, title, header-content, content, footer"
+      >
+        <slot name="title" slot="title"></slot>
+        <slot name="header-content" slot="header-content"></slot>
+        <slot name="footer" slot="footer"></slot>
+        <slot></slot>
+      </vaadin-dialog-overlay>
     `;
   }
+
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('headerTitle')) {
+      this.ariaLabel = this.headerTitle;
+    }
+  }
 }
 
 defineCustomElement(Dialog);

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-alpha9",
   "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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "opened",
@@ -70,7 +70,7 @@
             },
             {
               "name": "overlay-role",
-              "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
+              "description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
               "value": {
                 "type": [
                   "string",
@@ -141,17 +141,6 @@
                 ]
               }
             },
-            {
-              "name": "aria-label",
-              "description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
-              "value": {
-                "type": [
-                  "string",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -226,7 +215,7 @@
               },
               {
                 "name": "overlayRole",
-                "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
+                "description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
                 "value": {
                   "type": [
                     "string",
@@ -326,17 +315,6 @@
                     "undefined"
                   ]
                 }
-              },
-              {
-                "name": "ariaLabel",
-                "description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
-                "value": {
-                  "type": [
-                    "string",
-                    "null",
-                    "undefined"
-                  ]
-                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-alpha9",
   "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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha8/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n  root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`backdrop`       | Backdrop of the overlay\n`overlay`        | The overlay container\n`content`        | The overlay content\n`header`         | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title`          | Element wrapping the title slot\n`footer`         | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|--------------------------------------------\n`has-title`      | Set when the element has a title\n`has-header`     | Set when the element has header renderer\n`has-footer`     | Set when the element has footer renderer\n`overflow`       | Set to `top`, `bottom`, none or both\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -77,7 +77,7 @@
             },
             {
               "name": ".overlayRole",
-              "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
+              "description": "The `role` attribute value to be set on the dialog. Defaults to \"dialog\".",
               "value": {
                 "kind": "expression"
               }
@@ -131,13 +131,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".ariaLabel",
-              "description": "Set the `aria-label` attribute for assistive technologies like\nscreen readers. An empty string value for this property (the\ndefault) means that the `aria-label` attribute is not present.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@closed",
               "description": "Fired when the dialog is closed.",