@vaadin/message-list 25.1.0-beta2 → 25.1.0-beta4

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 (7) hide show
  1. package/custom-elements.json +1 -1
  2. package/package.json +12 -12
  3. package/src/styles/vaadin-message-base-styles.js +32 -22
  4. package/src/vaadin-message.d.ts +28 -0
  5. package/src/vaadin-message.js +28 -0
  6. package/web-types.json +3 -3
  7. package/web-types.lit.json +3 -3
package/custom-elements.json CHANGED
@@ -424,7 +424,7 @@
424
424
  "declarations": [
425
425
  {
426
426
  "kind": "class",
427
- "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
427
+ "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
428
428
  "name": "Message",
429
429
  "members": [
430
430
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/message-list",
3
- "version": "25.1.0-beta2",
3
+ "version": "25.1.0-beta4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,25 +37,25 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/a11y-base": "25.1.0-beta2",
41
- "@vaadin/avatar": "25.1.0-beta2",
42
- "@vaadin/component-base": "25.1.0-beta2",
43
- "@vaadin/markdown": "25.1.0-beta2",
44
- "@vaadin/vaadin-themable-mixin": "25.1.0-beta2",
40
+ "@vaadin/a11y-base": "25.1.0-beta4",
41
+ "@vaadin/avatar": "25.1.0-beta4",
42
+ "@vaadin/component-base": "25.1.0-beta4",
43
+ "@vaadin/markdown": "25.1.0-beta4",
44
+ "@vaadin/vaadin-themable-mixin": "25.1.0-beta4",
45
45
  "lit": "^3.0.0"
46
46
  },
47
47
  "devDependencies": {
48
- "@vaadin/aura": "25.1.0-beta2",
49
- "@vaadin/chai-plugins": "25.1.0-beta2",
50
- "@vaadin/test-runner-commands": "25.1.0-beta2",
48
+ "@vaadin/aura": "25.1.0-beta4",
49
+ "@vaadin/chai-plugins": "25.1.0-beta4",
50
+ "@vaadin/test-runner-commands": "25.1.0-beta4",
51
51
  "@vaadin/testing-helpers": "^2.0.0",
52
- "@vaadin/vaadin-lumo-styles": "25.1.0-beta2",
53
- "sinon": "^21.0.0"
52
+ "@vaadin/vaadin-lumo-styles": "25.1.0-beta4",
53
+ "sinon": "^21.0.2"
54
54
  },
55
55
  "customElements": "custom-elements.json",
56
56
  "web-types": [
57
57
  "web-types.json",
58
58
  "web-types.lit.json"
59
59
  ],
60
- "gitHead": "ffbedbae08a5160d13bcd1c6fcaa328df5103a05"
60
+ "gitHead": "b27f6706a2b5c07cedec353fccbdecee95d53024"
61
61
  }
package/src/styles/vaadin-message-base-styles.js CHANGED
@@ -12,15 +12,16 @@ export const messageStyles = css`
12
12
  flex-direction: row;
13
13
  padding: var(--vaadin-message-padding, var(--vaadin-padding-s) var(--vaadin-padding-m));
14
14
  gap: var(--vaadin-message-gap, var(--vaadin-gap-xs) var(--vaadin-gap-s));
15
+ outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
15
16
  }
16
17
 
17
18
  :host([hidden]) {
18
19
  display: none !important;
19
20
  }
20
21
 
21
- :host(:is(:focus-visible, [focus-ring])) {
22
+ :host(:focus-visible),
23
+ :is(:focus-visible, [focus-ring]) {
22
24
  outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
23
- outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
24
25
  }
25
26
 
26
27
  [part='content'] {
@@ -71,55 +72,64 @@ export const messageStyles = css`
71
72
  display: flex;
72
73
  flex-wrap: wrap;
73
74
  gap: var(--vaadin-gap-s);
75
+ padding-bottom: var(--vaadin-gap-xs);
74
76
  }
75
77
 
76
78
  [part~='attachment'] {
77
- --_prefix-area-size: 2rem;
78
79
  display: inline-grid;
79
- grid-template-columns: var(--_prefix-area-size) auto;
80
+ grid-template-columns: max-content 1fr;
81
+ gap: var(--vaadin-message-attachment-gap, var(--vaadin-gap-s));
80
82
  align-items: center;
81
- background: var(--vaadin-background-container);
82
- color: inherit;
83
- border: none;
83
+ background: var(--vaadin-message-attachment-background, var(--vaadin-background-container));
84
+ color: var(--vaadin-message-attachment-text-color, var(--vaadin-text-color));
85
+ cursor: var(--vaadin-clickable-cursor);
86
+ border: var(--vaadin-message-attachment-border-width, 0) solid
87
+ var(--vaadin-message-attachment-border-color, var(--vaadin-border-color));
88
+ border-radius: var(--vaadin-message-attachment-border-radius, var(--vaadin-radius-m));
84
89
  padding: 0;
85
90
  margin: 0;
86
91
  font: inherit;
92
+ font-size: var(--vaadin-message-attachment-font-size, inherit);
93
+ line-height: var(--vaadin-message-attachment-line-height, inherit);
94
+ font-weight: var(--vaadin-message-attachment-font-weight, inherit);
87
95
  text-align: start;
96
+ contain: content;
88
97
  }
89
98
 
90
99
  [part='attachment-icon'] {
91
- width: 100%;
92
- aspect-ratio: 1 / 1;
100
+ grid-column: 1;
101
+ align-self: stretch;
102
+ display: flex;
93
103
  align-items: center;
94
104
  justify-content: center;
95
- grid-column: 1;
96
- text-align: center;
105
+ background: var(--vaadin-background-container-strong);
106
+ padding: var(--vaadin-message-attachment-padding, var(--vaadin-padding-s));
107
+ contain: content;
97
108
 
98
109
  &::before {
99
- /* TODO: Replace with vaadin file icon, once it exists. */
100
- content: '';
110
+ content: '\\2003' / '';
101
111
  display: inline-flex;
102
112
  align-items: center;
103
113
  flex: none;
104
114
  height: var(--vaadin-icon-size, 1lh);
105
115
  width: var(--vaadin-icon-size, 1lh);
106
- mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
107
- mask-size: contain;
116
+ mask-image: var(--_vaadin-icon-file);
117
+ mask-size: var(--vaadin-icon-visual-size, 100%);
118
+ mask-position: 50%;
119
+ mask-repeat: no-repeat;
108
120
  background: currentColor;
109
121
  }
110
122
  }
111
123
 
112
124
  [part='attachment-preview'] {
113
- grid-column: 1;
114
- width: 100%;
115
- aspect-ratio: 1 / 1;
125
+ grid-column: 1 / -1;
126
+ max-width: 100px;
127
+ max-height: 100px;
116
128
  }
117
129
 
118
130
  [part='attachment-name'] {
119
131
  grid-column: 2;
120
- overflow: hidden;
121
- text-overflow: ellipsis;
122
- white-space: nowrap;
123
- margin-inline-end: var(--vaadin-padding-s);
132
+ padding: var(--vaadin-message-attachment-padding, var(--vaadin-padding-s));
133
+ padding-inline-start: 0;
124
134
  }
125
135
  `;
package/src/vaadin-message.d.ts CHANGED
@@ -47,6 +47,34 @@ export type MessageEventMap = HTMLElementEventMap & {
47
47
  * `focus-ring` | Set when the message is focused using the keyboard.
48
48
  * `focused` | Set when the message is focused.
49
49
  *
50
+ * The following custom CSS properties are available for styling:
51
+ *
52
+ * Custom CSS property |
53
+ * :------------------------------------------- |
54
+ * `--vaadin-message-attachment-background` |
55
+ * `--vaadin-message-attachment-border-color` |
56
+ * `--vaadin-message-attachment-border-radius` |
57
+ * `--vaadin-message-attachment-border-width` |
58
+ * `--vaadin-message-attachment-font-size` |
59
+ * `--vaadin-message-attachment-font-weight` |
60
+ * `--vaadin-message-attachment-gap` |
61
+ * `--vaadin-message-attachment-line-height` |
62
+ * `--vaadin-message-attachment-padding` |
63
+ * `--vaadin-message-attachment-text-color` |
64
+ * `--vaadin-message-font-size` |
65
+ * `--vaadin-message-font-weight` |
66
+ * `--vaadin-message-gap` |
67
+ * `--vaadin-message-header-line-height` |
68
+ * `--vaadin-message-line-height` |
69
+ * `--vaadin-message-name-color` |
70
+ * `--vaadin-message-name-font-size` |
71
+ * `--vaadin-message-name-font-weight` |
72
+ * `--vaadin-message-padding` |
73
+ * `--vaadin-message-text-color` |
74
+ * `--vaadin-message-time-color` |
75
+ * `--vaadin-message-time-font-size` |
76
+ * `--vaadin-message-time-font-weight` |
77
+ *
50
78
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
51
79
  *
52
80
  * @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
package/src/vaadin-message.js CHANGED
@@ -47,6 +47,34 @@ import { MessageMixin } from './vaadin-message-mixin.js';
47
47
  * `focus-ring` | Set when the message is focused using the keyboard.
48
48
  * `focused` | Set when the message is focused.
49
49
  *
50
+ * The following custom CSS properties are available for styling:
51
+ *
52
+ * Custom CSS property |
53
+ * :------------------------------------------- |
54
+ * `--vaadin-message-attachment-background` |
55
+ * `--vaadin-message-attachment-border-color` |
56
+ * `--vaadin-message-attachment-border-radius` |
57
+ * `--vaadin-message-attachment-border-width` |
58
+ * `--vaadin-message-attachment-font-size` |
59
+ * `--vaadin-message-attachment-font-weight` |
60
+ * `--vaadin-message-attachment-gap` |
61
+ * `--vaadin-message-attachment-line-height` |
62
+ * `--vaadin-message-attachment-padding` |
63
+ * `--vaadin-message-attachment-text-color` |
64
+ * `--vaadin-message-font-size` |
65
+ * `--vaadin-message-font-weight` |
66
+ * `--vaadin-message-gap` |
67
+ * `--vaadin-message-header-line-height` |
68
+ * `--vaadin-message-line-height` |
69
+ * `--vaadin-message-name-color` |
70
+ * `--vaadin-message-name-font-size` |
71
+ * `--vaadin-message-name-font-weight` |
72
+ * `--vaadin-message-padding` |
73
+ * `--vaadin-message-text-color` |
74
+ * `--vaadin-message-time-color` |
75
+ * `--vaadin-message-time-font-size` |
76
+ * `--vaadin-message-time-font-weight` |
77
+ *
50
78
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
51
79
  *
52
80
  * @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/message-list",
4
- "version": "25.1.0-beta2",
4
+ "version": "25.1.0-beta4",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-message",
11
- "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "theme",
@@ -156,7 +156,7 @@
156
156
  },
157
157
  {
158
158
  "name": "vaadin-message-list",
159
- "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
159
+ "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta4/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta4/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
160
160
  "attributes": [
161
161
  {
162
162
  "name": "announce-messages",
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/message-list",
4
- "version": "25.1.0-beta2",
4
+ "version": "25.1.0-beta4",
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-message",
19
- "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n user-name = \"Bob Ross\"\n user-abbr = \"BR\"\n user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -72,7 +72,7 @@
72
72
  },
73
73
  {
74
74
  "name": "vaadin-message-list",
75
- "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta2/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
75
+ "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta4/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.1.0-beta4/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
76
76
  "extension": true,
77
77
  "attributes": [
78
78
  {