@spectrum-web-components/thumbnail 0.6.8 → 0.6.10-overlay.10
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/README.md +4 -4
- package/package.json +4 -4
- package/custom-elements.json +0 -100
package/README.md
CHANGED
|
@@ -84,7 +84,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
|
|
|
84
84
|
When `focused` or `selected` the `sp-thumbnail` element will be displayed as follows:
|
|
85
85
|
|
|
86
86
|
```html
|
|
87
|
-
<div style="display: flex; gap: var(--spectrum-
|
|
87
|
+
<div style="display: flex; gap: var(--spectrum-spacing-100);">
|
|
88
88
|
<sp-thumbnail focused>
|
|
89
89
|
<img src="https://place.dog/100/100" alt="Demo Image" />
|
|
90
90
|
</sp-thumbnail>
|
|
@@ -99,7 +99,7 @@ When `focused` or `selected` the `sp-thumbnail` element will be displayed as fol
|
|
|
99
99
|
By default, an `sp-thumbnail` will ensure that the entirety of the content that it respresents is visible by letterboxing that content with a checkerboard background when its aspect ratio is not square.
|
|
100
100
|
|
|
101
101
|
```html
|
|
102
|
-
<div style="display: flex; gap: var(--spectrum-
|
|
102
|
+
<div style="display: flex; gap: var(--spectrum-spacing-100);">
|
|
103
103
|
<sp-thumbnail>
|
|
104
104
|
<img src="https://place.dog/300/400" alt="Eiffel Tower at night" />
|
|
105
105
|
</sp-thumbnail>
|
|
@@ -116,7 +116,7 @@ By default, an `sp-thumbnail` will ensure that the entirety of the content that
|
|
|
116
116
|
The `background` attribute takes a string value of the CSS "background" property in order to customize the letterboxing.
|
|
117
117
|
|
|
118
118
|
```html
|
|
119
|
-
<div style="display: flex; gap: var(--spectrum-
|
|
119
|
+
<div style="display: flex; gap: var(--spectrum-spacing-100);">
|
|
120
120
|
<sp-thumbnail background="red">
|
|
121
121
|
<img src="https://place.dog/300/400" alt="Eiffel Tower at night" />
|
|
122
122
|
</sp-thumbnail>
|
|
@@ -133,7 +133,7 @@ The `background` attribute takes a string value of the CSS "background" property
|
|
|
133
133
|
The `cover` attribute will cause the content to fill the space provided by the `sp-thumbnail` element:
|
|
134
134
|
|
|
135
135
|
```html
|
|
136
|
-
<div style="display: flex; gap: var(--spectrum-
|
|
136
|
+
<div style="display: flex; gap: var(--spectrum-spacing-100);">
|
|
137
137
|
<sp-thumbnail cover>
|
|
138
138
|
<img src="https://place.dog/300/400" alt="Eiffel Tower at night" />
|
|
139
139
|
</sp-thumbnail>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/thumbnail",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.10-overlay.10+7a73c9eee",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,10 +57,10 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.7.
|
|
60
|
+
"@spectrum-web-components/base": "^0.7.6-overlay.54+7a73c9eee"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@spectrum-css/thumbnail": "^2.0.
|
|
63
|
+
"@spectrum-css/thumbnail": "^2.0.30"
|
|
64
64
|
},
|
|
65
65
|
"types": "./src/index.d.ts",
|
|
66
66
|
"customElements": "custom-elements.json",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"./sp-*.js",
|
|
69
69
|
"./**/*.dev.js"
|
|
70
70
|
],
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "7a73c9eeec7dffb9c968f7f30586139b8e5ee348"
|
|
72
72
|
}
|
package/custom-elements.json
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"schemaVersion": "1.0.0",
|
|
3
|
-
"readme": "",
|
|
4
|
-
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-thumbnail.js",
|
|
8
|
-
"declarations": [],
|
|
9
|
-
"exports": [
|
|
10
|
-
{
|
|
11
|
-
"kind": "custom-element-definition",
|
|
12
|
-
"name": "sp-thumbnail",
|
|
13
|
-
"declaration": {
|
|
14
|
-
"name": "Thumbnail",
|
|
15
|
-
"module": "/src/Thumbnail.js"
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
]
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
"kind": "javascript-module",
|
|
22
|
-
"path": "src/Thumbnail.js",
|
|
23
|
-
"declarations": [
|
|
24
|
-
{
|
|
25
|
-
"kind": "class",
|
|
26
|
-
"description": "",
|
|
27
|
-
"name": "Thumbnail",
|
|
28
|
-
"slots": [
|
|
29
|
-
{
|
|
30
|
-
"description": "image element to present in the Thumbnail",
|
|
31
|
-
"name": ""
|
|
32
|
-
}
|
|
33
|
-
],
|
|
34
|
-
"members": [
|
|
35
|
-
{
|
|
36
|
-
"kind": "field",
|
|
37
|
-
"name": "background",
|
|
38
|
-
"type": {
|
|
39
|
-
"text": "string | undefined"
|
|
40
|
-
},
|
|
41
|
-
"privacy": "public",
|
|
42
|
-
"attribute": "background",
|
|
43
|
-
"reflects": true
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
"kind": "field",
|
|
47
|
-
"name": "cover",
|
|
48
|
-
"type": {
|
|
49
|
-
"text": "boolean"
|
|
50
|
-
},
|
|
51
|
-
"privacy": "public",
|
|
52
|
-
"default": "false",
|
|
53
|
-
"attribute": "cover",
|
|
54
|
-
"reflects": true
|
|
55
|
-
}
|
|
56
|
-
],
|
|
57
|
-
"attributes": [
|
|
58
|
-
{
|
|
59
|
-
"name": "background",
|
|
60
|
-
"type": {
|
|
61
|
-
"text": "string | undefined"
|
|
62
|
-
},
|
|
63
|
-
"fieldName": "background"
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
"name": "cover",
|
|
67
|
-
"type": {
|
|
68
|
-
"text": "boolean"
|
|
69
|
-
},
|
|
70
|
-
"default": "false",
|
|
71
|
-
"fieldName": "cover"
|
|
72
|
-
}
|
|
73
|
-
],
|
|
74
|
-
"mixins": [
|
|
75
|
-
{
|
|
76
|
-
"name": "SizedMixin",
|
|
77
|
-
"package": "@spectrum-web-components/base"
|
|
78
|
-
}
|
|
79
|
-
],
|
|
80
|
-
"superclass": {
|
|
81
|
-
"name": "SpectrumElement",
|
|
82
|
-
"package": "@spectrum-web-components/base"
|
|
83
|
-
},
|
|
84
|
-
"tagName": "sp-thumbnail",
|
|
85
|
-
"customElement": true
|
|
86
|
-
}
|
|
87
|
-
],
|
|
88
|
-
"exports": [
|
|
89
|
-
{
|
|
90
|
-
"kind": "js",
|
|
91
|
-
"name": "Thumbnail",
|
|
92
|
-
"declaration": {
|
|
93
|
-
"name": "Thumbnail",
|
|
94
|
-
"module": "src/Thumbnail.js"
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
]
|
|
98
|
-
}
|
|
99
|
-
]
|
|
100
|
-
}
|