@vaadin/card 25.0.1 → 25.1.0-alpha1
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/card",
|
|
3
|
-
"version": "25.0
|
|
3
|
+
"version": "25.1.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -33,21 +33,21 @@
|
|
|
33
33
|
"web-component"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@vaadin/component-base": "
|
|
37
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
36
|
+
"@vaadin/component-base": "25.1.0-alpha1",
|
|
37
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha1",
|
|
38
38
|
"lit": "^3.0.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@vaadin/avatar": "
|
|
42
|
-
"@vaadin/chai-plugins": "
|
|
43
|
-
"@vaadin/test-runner-commands": "
|
|
41
|
+
"@vaadin/avatar": "25.1.0-alpha1",
|
|
42
|
+
"@vaadin/chai-plugins": "25.1.0-alpha1",
|
|
43
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha1",
|
|
44
44
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha1",
|
|
46
46
|
"sinon": "^21.0.0"
|
|
47
47
|
},
|
|
48
48
|
"web-types": [
|
|
49
49
|
"web-types.json",
|
|
50
50
|
"web-types.lit.json"
|
|
51
51
|
],
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "c789cdd350bcd74b280268a83f5475ad7f2f65e1"
|
|
53
53
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2024 -
|
|
3
|
+
* Copyright (c) 2024 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/component-base/src/styles/style-props.js';
|
package/src/vaadin-card.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2024 -
|
|
3
|
+
* Copyright (c) 2024 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
@@ -32,12 +32,25 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
32
32
|
* `content` | The container for the card content (usually text content).
|
|
33
33
|
* `footer` | The container for footer elements. This part is always at the bottom of the card.
|
|
34
34
|
*
|
|
35
|
-
* The following custom properties are available for styling:
|
|
35
|
+
* The following custom CSS properties are available for styling:
|
|
36
36
|
*
|
|
37
|
-
* Custom property
|
|
38
|
-
*
|
|
39
|
-
* `--vaadin-card-
|
|
40
|
-
* `--vaadin-card-
|
|
37
|
+
* Custom CSS property |
|
|
38
|
+
* :--------------------------------------|
|
|
39
|
+
* | `--vaadin-card-background` |
|
|
40
|
+
* | `--vaadin-card-border-color` |
|
|
41
|
+
* | `--vaadin-card-border-radius` |
|
|
42
|
+
* | `--vaadin-card-border-width` |
|
|
43
|
+
* | `--vaadin-card-gap` |
|
|
44
|
+
* | `--vaadin-card-media-aspect-ratio` |
|
|
45
|
+
* | `--vaadin-card-padding` |
|
|
46
|
+
* | `--vaadin-card-shadow` |
|
|
47
|
+
* | `--vaadin-card-subtitle-color` |
|
|
48
|
+
* | `--vaadin-card-subtitle-font-size` |
|
|
49
|
+
* | `--vaadin-card-subtitle-line-height` |
|
|
50
|
+
* | `--vaadin-card-title-color` |
|
|
51
|
+
* | `--vaadin-card-title-font-size` |
|
|
52
|
+
* | `--vaadin-card-title-font-weight` |
|
|
53
|
+
* | `--vaadin-card-title-line-height` |
|
|
41
54
|
*
|
|
42
55
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
43
56
|
*/
|
package/src/vaadin-card.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c) 2024 -
|
|
3
|
+
* Copyright (c) 2024 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, LitElement } from 'lit';
|
|
@@ -38,12 +38,25 @@ import { cardStyles } from './styles/vaadin-card-base-styles.js';
|
|
|
38
38
|
* `content` | The container for the card content (usually text content).
|
|
39
39
|
* `footer` | The container for footer elements. This part is always at the bottom of the card.
|
|
40
40
|
*
|
|
41
|
-
* The following custom properties are available for styling:
|
|
41
|
+
* The following custom CSS properties are available for styling:
|
|
42
42
|
*
|
|
43
|
-
* Custom property
|
|
44
|
-
*
|
|
45
|
-
* `--vaadin-card-
|
|
46
|
-
* `--vaadin-card-
|
|
43
|
+
* Custom CSS property |
|
|
44
|
+
* :--------------------------------------|
|
|
45
|
+
* | `--vaadin-card-background` |
|
|
46
|
+
* | `--vaadin-card-border-color` |
|
|
47
|
+
* | `--vaadin-card-border-radius` |
|
|
48
|
+
* | `--vaadin-card-border-width` |
|
|
49
|
+
* | `--vaadin-card-gap` |
|
|
50
|
+
* | `--vaadin-card-media-aspect-ratio` |
|
|
51
|
+
* | `--vaadin-card-padding` |
|
|
52
|
+
* | `--vaadin-card-shadow` |
|
|
53
|
+
* | `--vaadin-card-subtitle-color` |
|
|
54
|
+
* | `--vaadin-card-subtitle-font-size` |
|
|
55
|
+
* | `--vaadin-card-subtitle-line-height` |
|
|
56
|
+
* | `--vaadin-card-title-color` |
|
|
57
|
+
* | `--vaadin-card-title-font-size` |
|
|
58
|
+
* | `--vaadin-card-title-font-weight` |
|
|
59
|
+
* | `--vaadin-card-title-line-height` |
|
|
47
60
|
*
|
|
48
61
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
49
62
|
*
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/card",
|
|
4
|
-
"version": "25.0
|
|
4
|
+
"version": "25.1.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-card",
|
|
11
|
-
"description": "`<vaadin-card>` is a versatile container for grouping related content and actions.\nIt presents information in a structured and visually appealing manner, with\ncustomization options to fit various design requirements. The default ARIA role is `region`.\n\n```html\n<vaadin-card role=\"region\" theme=\"outlined cover-media\">\n <img slot=\"media\" width=\"200\" src=\"...\" alt=\"\">\n <div slot=\"title\">Lapland</div>\n <div slot=\"subtitle\">The Exotic North</div>\n <div>Lapland is the northern-most region of Finland and an active outdoor destination.</div>\n <vaadin-button slot=\"footer\">Book Vacation</vaadin-button>\n</vaadin-card>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`media` | The container for the media element (e.g., image, video, icon). Shown above of before the card content.\n`header` | The container for title and subtitle - or for custom header content - and header prefix and suffix elements.\n`content` | The container for the card content (usually text content).\n`footer` | The container for footer elements. This part is always at the bottom of the card.\n\nThe following custom properties are available for styling:\n\nCustom property
|
|
11
|
+
"description": "`<vaadin-card>` is a versatile container for grouping related content and actions.\nIt presents information in a structured and visually appealing manner, with\ncustomization options to fit various design requirements. The default ARIA role is `region`.\n\n```html\n<vaadin-card role=\"region\" theme=\"outlined cover-media\">\n <img slot=\"media\" width=\"200\" src=\"...\" alt=\"\">\n <div slot=\"title\">Lapland</div>\n <div slot=\"subtitle\">The Exotic North</div>\n <div>Lapland is the northern-most region of Finland and an active outdoor destination.</div>\n <vaadin-button slot=\"footer\">Book Vacation</vaadin-button>\n</vaadin-card>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`media` | The container for the media element (e.g., image, video, icon). Shown above of before the card content.\n`header` | The container for title and subtitle - or for custom header content - and header prefix and suffix elements.\n`content` | The container for the card content (usually text content).\n`footer` | The container for footer elements. This part is always at the bottom of the card.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------|\n| `--vaadin-card-background` |\n| `--vaadin-card-border-color` |\n| `--vaadin-card-border-radius` |\n| `--vaadin-card-border-width` |\n| `--vaadin-card-gap` |\n| `--vaadin-card-media-aspect-ratio` |\n| `--vaadin-card-padding` |\n| `--vaadin-card-shadow` |\n| `--vaadin-card-subtitle-color` |\n| `--vaadin-card-subtitle-font-size` |\n| `--vaadin-card-subtitle-line-height` |\n| `--vaadin-card-title-color` |\n| `--vaadin-card-title-font-size` |\n| `--vaadin-card-title-font-weight` |\n| `--vaadin-card-title-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "card-title",
|
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/card",
|
|
4
|
-
"version": "25.0
|
|
4
|
+
"version": "25.1.0-alpha1",
|
|
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-card",
|
|
19
|
-
"description": "`<vaadin-card>` is a versatile container for grouping related content and actions.\nIt presents information in a structured and visually appealing manner, with\ncustomization options to fit various design requirements. The default ARIA role is `region`.\n\n```html\n<vaadin-card role=\"region\" theme=\"outlined cover-media\">\n <img slot=\"media\" width=\"200\" src=\"...\" alt=\"\">\n <div slot=\"title\">Lapland</div>\n <div slot=\"subtitle\">The Exotic North</div>\n <div>Lapland is the northern-most region of Finland and an active outdoor destination.</div>\n <vaadin-button slot=\"footer\">Book Vacation</vaadin-button>\n</vaadin-card>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`media` | The container for the media element (e.g., image, video, icon). Shown above of before the card content.\n`header` | The container for title and subtitle - or for custom header content - and header prefix and suffix elements.\n`content` | The container for the card content (usually text content).\n`footer` | The container for footer elements. This part is always at the bottom of the card.\n\nThe following custom properties are available for styling:\n\nCustom property
|
|
19
|
+
"description": "`<vaadin-card>` is a versatile container for grouping related content and actions.\nIt presents information in a structured and visually appealing manner, with\ncustomization options to fit various design requirements. The default ARIA role is `region`.\n\n```html\n<vaadin-card role=\"region\" theme=\"outlined cover-media\">\n <img slot=\"media\" width=\"200\" src=\"...\" alt=\"\">\n <div slot=\"title\">Lapland</div>\n <div slot=\"subtitle\">The Exotic North</div>\n <div>Lapland is the northern-most region of Finland and an active outdoor destination.</div>\n <vaadin-button slot=\"footer\">Book Vacation</vaadin-button>\n</vaadin-card>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`media` | The container for the media element (e.g., image, video, icon). Shown above of before the card content.\n`header` | The container for title and subtitle - or for custom header content - and header prefix and suffix elements.\n`content` | The container for the card content (usually text content).\n`footer` | The container for footer elements. This part is always at the bottom of the card.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------|\n| `--vaadin-card-background` |\n| `--vaadin-card-border-color` |\n| `--vaadin-card-border-radius` |\n| `--vaadin-card-border-width` |\n| `--vaadin-card-gap` |\n| `--vaadin-card-media-aspect-ratio` |\n| `--vaadin-card-padding` |\n| `--vaadin-card-shadow` |\n| `--vaadin-card-subtitle-color` |\n| `--vaadin-card-subtitle-font-size` |\n| `--vaadin-card-subtitle-line-height` |\n| `--vaadin-card-title-color` |\n| `--vaadin-card-title-font-size` |\n| `--vaadin-card-title-font-weight` |\n| `--vaadin-card-title-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|