Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@vaadin/message-list

Package Overview
Dependencies
Maintainers
12
Versions
595
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/message-list - npm Package Compare versions

Comparing version
25.2.0-alpha1
 to
25.2.0-alpha2
+5
-5
custom-elements.json

@@ -323,3 +323,3 @@ {

},
"description": "A color index to be used to render the color of the avatar.\nWith no `userColorIndex` set, the basic avatar color will be used.\nBy setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.\nIf now CSS variable is found for the color index, the property for the color will not be set.\n\nExample:\nCSS:\n```css\nhtml {\n --vaadin-user-color-1: red;\n}\n```\n\nJavaScript:\n```js\nmessage.userColorIndex = 1;\n```",
"description": "A color index to be used to render the color of the avatar.",
"attribute": "user-color-index"

@@ -378,3 +378,3 @@ },

},
"description": "A color index to be used to render the color of the avatar.\nWith no `userColorIndex` set, the basic avatar color will be used.\nBy setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.\nIf now CSS variable is found for the color index, the property for the color will not be set.\n\nExample:\nCSS:\n```css\nhtml {\n --vaadin-user-color-1: red;\n}\n```\n\nJavaScript:\n```js\nmessage.userColorIndex = 1;\n```",
"description": "A color index to be used to render the color of the avatar.",
"fieldName": "userColorIndex"

@@ -429,3 +429,3 @@ },

"kind": "class",
"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.",
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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.",
"name": "Message",

@@ -482,3 +482,3 @@ "members": [

},
"description": "A color index to be used to render the color of the avatar.\nWith no `userColorIndex` set, the basic avatar color will be used.\nBy setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.\nIf now CSS variable is found for the color index, the property for the color will not be set.\n\nExample:\nCSS:\n```css\nhtml {\n --vaadin-user-color-1: red;\n}\n```\n\nJavaScript:\n```js\nmessage.userColorIndex = 1;\n```",
"description": "A color index to be used to render the color of the avatar.",
"attribute": "user-color-index",

@@ -590,3 +590,3 @@ "inheritedFrom": {

},
"description": "A color index to be used to render the color of the avatar.\nWith no `userColorIndex` set, the basic avatar color will be used.\nBy setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.\nIf now CSS variable is found for the color index, the property for the color will not be set.\n\nExample:\nCSS:\n```css\nhtml {\n --vaadin-user-color-1: red;\n}\n```\n\nJavaScript:\n```js\nmessage.userColorIndex = 1;\n```",
"description": "A color index to be used to render the color of the avatar.",
"fieldName": "userColorIndex",

@@ -593,0 +593,0 @@ "inheritedFrom": {

+11
-11
package.json
{
"name": "@vaadin/message-list",
"version": "25.2.0-alpha1",
"version": "25.2.0-alpha2",
"publishConfig": {

@@ -40,15 +40,15 @@ "access": "public"

"@open-wc/dedupe-mixin": "^1.3.0",
"@vaadin/a11y-base": "25.2.0-alpha1",
"@vaadin/avatar": "25.2.0-alpha1",
"@vaadin/component-base": "25.2.0-alpha1",
"@vaadin/markdown": "25.2.0-alpha1",
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha1",
"@vaadin/a11y-base": "25.2.0-alpha2",
"@vaadin/avatar": "25.2.0-alpha2",
"@vaadin/component-base": "25.2.0-alpha2",
"@vaadin/markdown": "25.2.0-alpha2",
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha2",
"lit": "^3.0.0"
},
"devDependencies": {
"@vaadin/aura": "25.2.0-alpha1",
"@vaadin/chai-plugins": "25.2.0-alpha1",
"@vaadin/test-runner-commands": "25.2.0-alpha1",
"@vaadin/aura": "25.2.0-alpha2",
"@vaadin/chai-plugins": "25.2.0-alpha2",
"@vaadin/test-runner-commands": "25.2.0-alpha2",
"@vaadin/testing-helpers": "^2.0.0",
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha1",
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha2",
"sinon": "^21.0.2"

@@ -61,3 +61,3 @@ },

],
"gitHead": "866f813f89655a351cbd25328eba1fcb317e267d"
"gitHead": "34c9b41017bd4896f6e4b250ba50d1dd8535a061"
}
+0
-15
src/vaadin-message-mixin.d.ts

@@ -59,18 +59,3 @@ /**

* A color index to be used to render the color of the avatar.
* With no `userColorIndex` set, the basic avatar color will be used.
* By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
* If now CSS variable is found for the color index, the property for the color will not be set.
*
* Example:
* CSS:
* ```css
* html {
* --vaadin-user-color-1: red;
* }
* ```
*
* JavaScript:
* ```js
* message.userColorIndex = 1;
* ```
* @attr {number} user-color-index

@@ -77,0 +62,0 @@ */

+0
-15
src/vaadin-message-mixin.js

@@ -61,18 +61,3 @@ /**

* A color index to be used to render the color of the avatar.
* With no `userColorIndex` set, the basic avatar color will be used.
* By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
* If now CSS variable is found for the color index, the property for the color will not be set.
*
* Example:
* CSS:
* ```css
* html {
* --vaadin-user-color-1: red;
* }
* ```
*
* JavaScript:
* ```js
* message.userColorIndex = 1;
* ```
* @attr {number} user-color-index

@@ -79,0 +64,0 @@ */

+8
-4
src/vaadin-message.d.ts

@@ -20,6 +20,10 @@ /**

* ```html
* <vaadin-message time="2021-01-28 10:43"
* user-name = "Bob Ross"
* user-abbr = "BR"
* user-img = "/static/img/avatar.jpg">There is no real ending. It's just the place where you stop the story.</vaadin-message>
* <vaadin-message
* time="2021-01-28 10:43"
* user-name="Bob Ross"
* user-abbr="BR"
* user-img="/static/img/avatar.jpg"
* >
* There is no real ending. It's just the place where you stop the story.
* </vaadin-message>
* ```

@@ -26,0 +30,0 @@ *

+8
-4
src/vaadin-message.js

@@ -20,6 +20,10 @@ /**

* ```html
* <vaadin-message time="2021-01-28 10:43"
* user-name = "Bob Ross"
* user-abbr = "BR"
* user-img = "/static/img/avatar.jpg">There is no real ending. It's just the place where you stop the story.</vaadin-message>
* <vaadin-message
* time="2021-01-28 10:43"
* user-name="Bob Ross"
* user-abbr="BR"
* user-img="/static/img/avatar.jpg"
* >
* There is no real ending. It's just the place where you stop the story.
* </vaadin-message>
* ```

@@ -26,0 +30,0 @@ *

+5
-5
web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/message-list",
"version": "25.2.0-alpha1",
"version": "25.2.0-alpha2",
"description-markup": "markdown",

@@ -11,3 +11,3 @@ "contributions": {

"name": "vaadin-message",
"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.",
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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.",
"attributes": [

@@ -49,3 +49,3 @@ {

"name": "user-color-index",
"description": "A color index to be used to render the color of the avatar.\nWith no `userColorIndex` set, the basic avatar color will be used.\nBy setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.\nIf now CSS variable is found for the color index, the property for the color will not be set.\n\nExample:\nCSS:\n```css\nhtml {\n --vaadin-user-color-1: red;\n}\n```\n\nJavaScript:\n```js\nmessage.userColorIndex = 1;\n```",
"description": "A color index to be used to render the color of the avatar.",
"value": {

@@ -119,3 +119,3 @@ "type": [

"name": "userColorIndex",
"description": "A color index to be used to render the color of the avatar.\nWith no `userColorIndex` set, the basic avatar color will be used.\nBy setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.\nIf now CSS variable is found for the color index, the property for the color will not be set.\n\nExample:\nCSS:\n```css\nhtml {\n --vaadin-user-color-1: red;\n}\n```\n\nJavaScript:\n```js\nmessage.userColorIndex = 1;\n```",
"description": "A color index to be used to render the color of the avatar.",
"value": {

@@ -162,3 +162,3 @@ "type": [

"name": "vaadin-message-list",
"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.2.0-alpha1/#/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.2.0-alpha1/#/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.",
"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.2.0-alpha2/#/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.2.0-alpha2/#/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.",
"attributes": [

@@ -165,0 +165,0 @@ {

+4
-4
web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/message-list",
"version": "25.2.0-alpha1",
"version": "25.2.0-alpha2",
"description-markup": "markdown",

@@ -19,3 +19,3 @@ "framework": "lit",

"name": "vaadin-message",
"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.",
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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.",
"extension": true,

@@ -46,3 +46,3 @@ "attributes": [

"name": ".userColorIndex",
"description": "A color index to be used to render the color of the avatar.\nWith no `userColorIndex` set, the basic avatar color will be used.\nBy setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.\nIf now CSS variable is found for the color index, the property for the color will not be set.\n\nExample:\nCSS:\n```css\nhtml {\n --vaadin-user-color-1: red;\n}\n```\n\nJavaScript:\n```js\nmessage.userColorIndex = 1;\n```",
"description": "A color index to be used to render the color of the avatar.",
"value": {

@@ -77,3 +77,3 @@ "kind": "expression"

"name": "vaadin-message-list",
"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.2.0-alpha1/#/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.2.0-alpha1/#/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.",
"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.2.0-alpha2/#/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.2.0-alpha2/#/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.",
"extension": true,

@@ -80,0 +80,0 @@ "attributes": [