@vaadin/card 25.1.2 → 25.2.0-alpha10
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 +12 -12
- package/src/styles/vaadin-card-base-styles.js +24 -27
- package/src/vaadin-card.js +1 -1
- package/web-types.json +5 -13
- package/web-types.lit.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/card",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,20 +34,20 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/component-base": "
|
|
38
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
37
|
+
"@vaadin/component-base": "25.2.0-alpha10",
|
|
38
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
|
|
39
39
|
"lit": "^3.0.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@vaadin/aura": "
|
|
43
|
-
"@vaadin/avatar": "
|
|
44
|
-
"@vaadin/button": "
|
|
45
|
-
"@vaadin/chai-plugins": "
|
|
46
|
-
"@vaadin/icon": "
|
|
47
|
-
"@vaadin/icons": "
|
|
48
|
-
"@vaadin/test-runner-commands": "
|
|
42
|
+
"@vaadin/aura": "25.2.0-alpha10",
|
|
43
|
+
"@vaadin/avatar": "25.2.0-alpha10",
|
|
44
|
+
"@vaadin/button": "25.2.0-alpha10",
|
|
45
|
+
"@vaadin/chai-plugins": "25.2.0-alpha10",
|
|
46
|
+
"@vaadin/icon": "25.2.0-alpha10",
|
|
47
|
+
"@vaadin/icons": "25.2.0-alpha10",
|
|
48
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha10",
|
|
49
49
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
|
|
51
51
|
"sinon": "^21.0.2"
|
|
52
52
|
},
|
|
53
53
|
"customElements": "custom-elements.json",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
|
|
59
59
|
}
|
|
@@ -19,6 +19,8 @@ export const cardStyles = css`
|
|
|
19
19
|
--_subtitle: 0;
|
|
20
20
|
--_title: 0;
|
|
21
21
|
background: var(--vaadin-card-background, var(--vaadin-background-container));
|
|
22
|
+
--_border-width: var(--vaadin-card-border-width, 0px);
|
|
23
|
+
border: var(--_border-width) solid var(--vaadin-card-border-color, var(--vaadin-border-color-secondary));
|
|
22
24
|
border-radius: var(--vaadin-card-border-radius, var(--vaadin-radius-m));
|
|
23
25
|
box-shadow: var(--vaadin-card-shadow, none);
|
|
24
26
|
box-sizing: border-box;
|
|
@@ -29,17 +31,6 @@ export const cardStyles = css`
|
|
|
29
31
|
position: relative;
|
|
30
32
|
}
|
|
31
33
|
|
|
32
|
-
/* Could be an inset outline on the host as well, but let's reserve that for a potential focus outline */
|
|
33
|
-
:host::before {
|
|
34
|
-
border: var(--vaadin-card-border-width, 0) solid
|
|
35
|
-
var(--vaadin-card-border-color, var(--vaadin-border-color-secondary));
|
|
36
|
-
border-radius: inherit;
|
|
37
|
-
content: '';
|
|
38
|
-
inset: 0;
|
|
39
|
-
pointer-events: none;
|
|
40
|
-
position: absolute;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
34
|
:host([hidden]) {
|
|
44
35
|
display: none !important;
|
|
45
36
|
}
|
|
@@ -173,9 +164,9 @@ export const cardStyles = css`
|
|
|
173
164
|
|
|
174
165
|
[part='media'] {
|
|
175
166
|
align-self: stretch;
|
|
176
|
-
border-radius: inherit;
|
|
177
167
|
grid-column: 1;
|
|
178
168
|
grid-row: 1 / span calc(var(--_header) + var(--_content) + var(--_footer));
|
|
169
|
+
overflow: hidden;
|
|
179
170
|
}
|
|
180
171
|
|
|
181
172
|
[part='header'] {
|
|
@@ -209,49 +200,55 @@ export const cardStyles = css`
|
|
|
209
200
|
vertical-align: middle;
|
|
210
201
|
}
|
|
211
202
|
|
|
212
|
-
:host(:is([theme~='cover-media'], [theme~='stretch-media']))
|
|
213
|
-
::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
|
|
203
|
+
:host(:is([theme~='cover-media'], [theme~='stretch-media'])) [part='media'] {
|
|
214
204
|
aspect-ratio: var(--vaadin-card-media-aspect-ratio, 16/9);
|
|
215
|
-
height: auto;
|
|
216
|
-
object-fit: cover;
|
|
217
|
-
/* Fixes an issue where an icon overflows the card boundaries on Firefox: https://github.com/vaadin/web-components/issues/8641 */
|
|
218
|
-
overflow: hidden;
|
|
219
205
|
width: 100%;
|
|
206
|
+
|
|
207
|
+
::slotted(:is(img, video, svg, vaadin-icon)) {
|
|
208
|
+
width: 100%;
|
|
209
|
+
height: 100%;
|
|
210
|
+
object-fit: cover;
|
|
211
|
+
}
|
|
220
212
|
}
|
|
221
213
|
|
|
222
214
|
:host([theme~='horizontal']:is([theme~='cover-media'], [theme~='stretch-media'])) {
|
|
223
215
|
grid-template-columns: repeat(var(--_media), minmax(auto, 0.5fr)) 1fr;
|
|
224
216
|
}
|
|
225
217
|
|
|
226
|
-
:host([theme~='horizontal']:is([theme~='cover-media'], [theme~='stretch-media']))
|
|
227
|
-
::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
|
|
218
|
+
:host([theme~='horizontal']:is([theme~='cover-media'], [theme~='stretch-media'])) [part='media'] {
|
|
228
219
|
aspect-ratio: auto;
|
|
229
220
|
height: 100%;
|
|
230
221
|
}
|
|
231
222
|
|
|
232
223
|
:host([theme~='cover-media']) {
|
|
233
|
-
--_media-width: calc(100% + var(--_padding) * 2);
|
|
224
|
+
--_media-width: calc(100% + (var(--_padding) + var(--_border-width)) * 2);
|
|
234
225
|
}
|
|
235
226
|
|
|
236
227
|
:host([theme~='horizontal'][theme~='cover-media']) {
|
|
237
|
-
--_media-width: calc(100% + var(--_padding));
|
|
228
|
+
--_media-width: calc(100% + (var(--_padding) + var(--_border-width)));
|
|
238
229
|
}
|
|
239
230
|
|
|
240
|
-
:host([theme~='cover-media'])
|
|
231
|
+
:host([theme~='cover-media']) [part='media'] {
|
|
241
232
|
border-radius: inherit;
|
|
242
233
|
border-end-end-radius: 0;
|
|
243
234
|
border-end-start-radius: 0;
|
|
244
|
-
margin-inline: calc(var(--_padding) * -1);
|
|
245
|
-
margin-top: calc(var(--_padding) * -1);
|
|
235
|
+
margin-inline: calc((var(--_padding) + var(--_border-width)) * -1);
|
|
236
|
+
margin-top: calc((var(--_padding) + var(--_border-width)) * -1);
|
|
246
237
|
max-width: none;
|
|
247
238
|
width: var(--_media-width);
|
|
239
|
+
|
|
240
|
+
::slotted(:is(img, video, svg, vaadin-icon)) {
|
|
241
|
+
outline: var(--_border-width) solid var(--vaadin-card-border-color, var(--vaadin-border-color-secondary));
|
|
242
|
+
outline-offset: calc(var(--_border-width) * -1);
|
|
243
|
+
border-radius: inherit;
|
|
244
|
+
}
|
|
248
245
|
}
|
|
249
246
|
|
|
250
|
-
:host([theme~='horizontal'][theme~='cover-media'])
|
|
247
|
+
:host([theme~='horizontal'][theme~='cover-media']) [part='media'] {
|
|
251
248
|
border-radius: inherit;
|
|
252
249
|
border-end-end-radius: 0;
|
|
253
250
|
border-start-end-radius: 0;
|
|
254
|
-
height: calc(100% + var(--_padding) * 2);
|
|
251
|
+
height: calc(100% + (var(--_padding) + var(--_border-width)) * 2);
|
|
255
252
|
margin-inline-end: 0;
|
|
256
253
|
}
|
|
257
254
|
|
package/src/vaadin-card.js
CHANGED
|
@@ -178,7 +178,7 @@ class Card extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(Li
|
|
|
178
178
|
this.removeChild(stringTitleElement);
|
|
179
179
|
}
|
|
180
180
|
const ariaLabelledby = this.getAttribute('aria-labelledby');
|
|
181
|
-
if (ariaLabelledby
|
|
181
|
+
if (ariaLabelledby?.startsWith('card-title-')) {
|
|
182
182
|
this.removeAttribute('aria-labelledby');
|
|
183
183
|
}
|
|
184
184
|
if (this.cardTitle) {
|
package/web-types.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.
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,9 +15,7 @@
|
|
|
15
15
|
"description": "The title of the card. When set, any custom slotted title is removed and this string-based title is used instead. If this title is used, an `aria-labelledby` attribute that points to the generated title element is set.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"string"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"string"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -37,9 +35,7 @@
|
|
|
37
35
|
"description": "Sets the heading level (`aria-level`) for the string-based title. If not set, the level defaults to 2. Setting values outside the range [1, 6] can cause accessibility issues.",
|
|
38
36
|
"value": {
|
|
39
37
|
"type": [
|
|
40
|
-
"number"
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
38
|
+
"number"
|
|
43
39
|
]
|
|
44
40
|
}
|
|
45
41
|
}
|
|
@@ -51,9 +47,7 @@
|
|
|
51
47
|
"description": "The title of the card. When set, any custom slotted title is removed and this string-based title is used instead. If this title is used, an `aria-labelledby` attribute that points to the generated title element is set.",
|
|
52
48
|
"value": {
|
|
53
49
|
"type": [
|
|
54
|
-
"string"
|
|
55
|
-
"null",
|
|
56
|
-
"undefined"
|
|
50
|
+
"string"
|
|
57
51
|
]
|
|
58
52
|
}
|
|
59
53
|
},
|
|
@@ -62,9 +56,7 @@
|
|
|
62
56
|
"description": "Sets the heading level (`aria-level`) for the string-based title. If not set, the level defaults to 2. Setting values outside the range [1, 6] can cause accessibility issues.",
|
|
63
57
|
"value": {
|
|
64
58
|
"type": [
|
|
65
|
-
"number"
|
|
66
|
-
"null",
|
|
67
|
-
"undefined"
|
|
59
|
+
"number"
|
|
68
60
|
]
|
|
69
61
|
}
|
|
70
62
|
}
|