@vaadin/dialog 24.4.0-alpha2 → 24.4.0-alpha21

package/README.md

@@ -5,7 +5,6 @@ A web component for presenting information and user interface elements in an ove
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/dialog)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/dialog)](https://www.npmjs.com/package/@vaadin/dialog)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-dialog opened></vaadin-dialog>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "24.4.0-alpha2",
+  "version": "24.4.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -39,24 +39,24 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.4.0-alpha2",
-    "@vaadin/lit-renderer": "24.4.0-alpha2",
-    "@vaadin/overlay": "24.4.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha2",
+    "@vaadin/component-base": "24.4.0-alpha21",
+    "@vaadin/lit-renderer": "24.4.0-alpha21",
+    "@vaadin/overlay": "24.4.0-alpha21",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha21",
+    "@vaadin/vaadin-material-styles": "24.4.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha21",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.4.0-alpha2",
+    "@vaadin/a11y-base": "24.4.0-alpha21",
     "@vaadin/testing-helpers": "^0.6.0",
-    "@vaadin/text-area": "24.4.0-alpha2",
+    "@vaadin/text-area": "24.4.0-alpha21",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "f303ead58d27e15d81a55db0559611fb77c0e421"
+  "gitHead": "2efeeebbeabddfde14c845ee4098f9e62e352ffe"
 }

package/src/vaadin-dialog.js

@@ -103,6 +103,7 @@ class Dialog extends DialogDraggableMixin(
 
       <vaadin-dialog-overlay
         id="overlay"
+        role="dialog"
         header-title="[[headerTitle]]"
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"
@@ -147,8 +148,6 @@ class Dialog extends DialogDraggableMixin(
   ready() {
     super.ready();
 
-    this._overlayElement.setAttribute('role', 'dialog');
-
     processTemplates(this);
   }
 

package/src/vaadin-lit-dialog.js

@@ -23,7 +23,7 @@ export { DialogOverlay } from './vaadin-lit-dialog-overlay.js';
  *
  * ## Disclaimer
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
  * Feel free to try this code in your apps as per Apache 2.0 license.
  *
@@ -72,6 +72,7 @@ class Dialog extends DialogDraggableMixin(
     return html`
       <vaadin-dialog-overlay
         id="overlay"
+        role="dialog"
         .owner="${this}"
         .opened="${this.opened}"
         .headerTitle="${this.headerTitle}"
@@ -91,13 +92,6 @@ class Dialog extends DialogDraggableMixin(
       ></vaadin-dialog-overlay>
     `;
   }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._overlayElement.setAttribute('role', 'dialog');
-  }
 }
 
 defineCustomElement(Dialog);

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

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

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

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

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

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

package/theme/material/vaadin-dialog-styles.d.ts

@@ -0,0 +1,4 @@
+import '@vaadin/vaadin-material-styles/shadow.js';
+import '@vaadin/vaadin-material-styles/color.js';
+declare const dialogOverlay: import("lit").CSSResult;
+export { dialogOverlay };

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

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

package/theme/material/vaadin-lit-dialog.d.ts

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

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "24.4.0-alpha2",
+  "version": "24.4.0-alpha21",
   "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/24.4.0-alpha2/#/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\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/24.4.0-alpha21/#/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.",
           "attributes": [
             {
               "name": "opened",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/dialog",
-  "version": "24.4.0-alpha2",
+  "version": "24.4.0-alpha21",
   "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/24.4.0-alpha2/#/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\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/24.4.0-alpha21/#/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.",
           "extension": true,
           "attributes": [
             {