@vaadin/notification 25.2.0-alpha10 → 25.2.0-alpha12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/custom-elements.json +1 -1
  2. package/package.json +10 -10
  3. package/src/styles/vaadin-notification-container-base-styles.js +1 -1
  4. package/src/vaadin-notification-mixin.js +0 -6
  5. package/src/vaadin-notification.d.ts +15 -1
  6. package/src/vaadin-notification.js +15 -7
  7. package/web-types.json +2 -2
  8. package/web-types.lit.json +2 -2
package/custom-elements.json CHANGED
@@ -263,7 +263,7 @@
263
263
  "declarations": [
264
264
  {
265
265
  "kind": "class",
266
- "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
266
+ "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-notification-background` |\n| `--vaadin-notification-border-color` |\n| `--vaadin-notification-border-radius` |\n| `--vaadin-notification-border-width` |\n| `--vaadin-notification-container-gap` |\n| `--vaadin-notification-padding` |\n| `--vaadin-notification-shadow` |\n| `--vaadin-notification-viewport-inset` |\n| `--vaadin-notification-width` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
267
267
  "name": "Notification",
268
268
  "members": [
269
269
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/notification",
3
- "version": "25.2.0-alpha10",
3
+ "version": "25.2.0-alpha12",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,18 +37,18 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/component-base": "25.2.0-alpha10",
41
- "@vaadin/lit-renderer": "25.2.0-alpha10",
42
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
40
+ "@vaadin/component-base": "25.2.0-alpha12",
41
+ "@vaadin/lit-renderer": "25.2.0-alpha12",
42
+ "@vaadin/vaadin-themable-mixin": "25.2.0-alpha12",
43
43
  "lit": "^3.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@vaadin/aura": "25.2.0-alpha10",
47
- "@vaadin/button": "25.2.0-alpha10",
48
- "@vaadin/chai-plugins": "25.2.0-alpha10",
49
- "@vaadin/test-runner-commands": "25.2.0-alpha10",
46
+ "@vaadin/aura": "25.2.0-alpha12",
47
+ "@vaadin/button": "25.2.0-alpha12",
48
+ "@vaadin/chai-plugins": "25.2.0-alpha12",
49
+ "@vaadin/test-runner-commands": "25.2.0-alpha12",
50
50
  "@vaadin/testing-helpers": "^2.0.0",
51
- "@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
51
+ "@vaadin/vaadin-lumo-styles": "25.2.0-alpha12",
52
52
  "sinon": "^21.0.2"
53
53
  },
54
54
  "customElements": "custom-elements.json",
@@ -56,5 +56,5 @@
56
56
  "web-types.json",
57
57
  "web-types.lit.json"
58
58
  ],
59
- "gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
59
+ "gitHead": "ae1e4373aec3653d63a45b6be18eee36f4b245a1"
60
60
  }
package/src/styles/vaadin-notification-container-base-styles.js CHANGED
@@ -104,7 +104,7 @@ export const notificationContainerStyles = css`
104
104
 
105
105
  [region-group] > [region$='center'] {
106
106
  left: 50%;
107
- translate: -50%;
107
+ translate: round(-50%, 1px);
108
108
  }
109
109
 
110
110
  [region-group] > [region$='end'] {
package/src/vaadin-notification-mixin.js CHANGED
@@ -11,8 +11,6 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
11
11
 
12
12
  /**
13
13
  * A mixin providing common notification container functionality.
14
- *
15
- * @polymerMixin
16
14
  */
17
15
  export const NotificationContainerMixin = (superClass) =>
18
16
  class extends superClass {
@@ -103,10 +101,6 @@ export const NotificationContainerMixin = (superClass) =>
103
101
 
104
102
  /**
105
103
  * A mixin providing common notification functionality.
106
- *
107
- * @polymerMixin
108
- * @mixes OverlayClassMixin
109
- * @mixes ThemePropertyMixin
110
104
  */
111
105
  export const NotificationMixin = (superClass) =>
112
106
  class extends ThemePropertyMixin(OverlayClassMixin(superClass)) {
package/src/vaadin-notification.d.ts CHANGED
@@ -84,10 +84,24 @@ declare class NotificationCard extends ThemableMixin(HTMLElement) {}
84
84
  * The following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:
85
85
  *
86
86
  * Part name | Description
87
- * ----------------|----------------
87
+ * ----------|----------------
88
88
  * `overlay` | The notification container
89
89
  * `content` | The content of the notification
90
90
  *
91
+ * The following custom CSS properties are available for styling:
92
+ *
93
+ * Custom CSS property |
94
+ * :-----------------------------------------|
95
+ * | `--vaadin-notification-background` |
96
+ * | `--vaadin-notification-border-color` |
97
+ * | `--vaadin-notification-border-radius` |
98
+ * | `--vaadin-notification-border-width` |
99
+ * | `--vaadin-notification-container-gap` |
100
+ * | `--vaadin-notification-padding` |
101
+ * | `--vaadin-notification-shadow` |
102
+ * | `--vaadin-notification-viewport-inset` |
103
+ * | `--vaadin-notification-width` |
104
+ *
91
105
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
92
106
  *
93
107
  * Note: the `theme` attribute value set on `<vaadin-notification>` is
package/src/vaadin-notification.js CHANGED
@@ -19,9 +19,6 @@ import { NotificationContainerMixin, NotificationMixin } from './vaadin-notifica
19
19
  *
20
20
  * @customElement vaadin-notification-container
21
21
  * @extends HTMLElement
22
- * @mixes NotificationContainerMixin
23
- * @mixes ElementMixin
24
- * @mixes ThemableMixin
25
22
  * @private
26
23
  */
27
24
  class NotificationContainer extends NotificationContainerMixin(
@@ -60,7 +57,6 @@ class NotificationContainer extends NotificationContainerMixin(
60
57
  *
61
58
  * @customElement vaadin-notification-card
62
59
  * @extends HTMLElement
63
- * @mixes ThemableMixin
64
60
  * @private
65
61
  */
66
62
  class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
@@ -125,10 +121,24 @@ class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(Lit
125
121
  * The following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:
126
122
  *
127
123
  * Part name | Description
128
- * ----------------|----------------
124
+ * ----------|----------------
129
125
  * `overlay` | The notification container
130
126
  * `content` | The content of the notification
131
127
  *
128
+ * The following custom CSS properties are available for styling:
129
+ *
130
+ * Custom CSS property |
131
+ * :-----------------------------------------|
132
+ * | `--vaadin-notification-background` |
133
+ * | `--vaadin-notification-border-color` |
134
+ * | `--vaadin-notification-border-radius` |
135
+ * | `--vaadin-notification-border-width` |
136
+ * | `--vaadin-notification-container-gap` |
137
+ * | `--vaadin-notification-padding` |
138
+ * | `--vaadin-notification-shadow` |
139
+ * | `--vaadin-notification-viewport-inset` |
140
+ * | `--vaadin-notification-width` |
141
+ *
132
142
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
133
143
  *
134
144
  * Note: the `theme` attribute value set on `<vaadin-notification>` is
@@ -139,8 +149,6 @@ class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(Lit
139
149
  *
140
150
  * @customElement vaadin-notification
141
151
  * @extends HTMLElement
142
- * @mixes NotificationMixin
143
- * @mixes ElementMixin
144
152
  */
145
153
  class Notification extends NotificationMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
146
154
  static get is() {
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/notification",
4
- "version": "25.2.0-alpha10",
4
+ "version": "25.2.0-alpha12",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-notification",
11
- "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
11
+ "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-notification-background` |\n| `--vaadin-notification-border-color` |\n| `--vaadin-notification-border-radius` |\n| `--vaadin-notification-border-width` |\n| `--vaadin-notification-container-gap` |\n| `--vaadin-notification-padding` |\n| `--vaadin-notification-shadow` |\n| `--vaadin-notification-viewport-inset` |\n| `--vaadin-notification-width` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "assertive",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/notification",
4
- "version": "25.2.0-alpha10",
4
+ "version": "25.2.0-alpha12",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-notification",
19
- "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
19
+ "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\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-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-notification-background` |\n| `--vaadin-notification-border-color` |\n| `--vaadin-notification-border-radius` |\n| `--vaadin-notification-border-width` |\n| `--vaadin-notification-container-gap` |\n| `--vaadin-notification-padding` |\n| `--vaadin-notification-shadow` |\n| `--vaadin-notification-viewport-inset` |\n| `--vaadin-notification-width` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {