@spectrum-web-components/thumbnail 0.37.0 → 0.38.0

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 (2) hide show
  1. package/README.md +22 -22
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -32,7 +32,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
32
32
 
33
33
  ```html
34
34
  <sp-thumbnail size="50">
35
- <img src="https://place.dog/100/100" alt="Demo Image" />
35
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
36
36
  </sp-thumbnail>
37
37
  ```
38
38
 
@@ -42,7 +42,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
42
42
 
43
43
  ```html
44
44
  <sp-thumbnail size="75">
45
- <img src="https://place.dog/100/100" alt="Demo Image" />
45
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
46
46
  </sp-thumbnail>
47
47
  ```
48
48
 
@@ -52,7 +52,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
52
52
 
53
53
  ```html
54
54
  <sp-thumbnail size="100">
55
- <img src="https://place.dog/100/100" alt="Demo Image" />
55
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
56
56
  </sp-thumbnail>
57
57
  ```
58
58
 
@@ -62,7 +62,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
62
62
 
63
63
  ```html
64
64
  <sp-thumbnail size="200">
65
- <img src="https://place.dog/100/100" alt="Demo Image" />
65
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
66
66
  </sp-thumbnail>
67
67
  ```
68
68
 
@@ -72,7 +72,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
72
72
 
73
73
  ```html
74
74
  <sp-thumbnail size="300">
75
- <img src="https://place.dog/100/100" alt="Demo Image" />
75
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
76
76
  </sp-thumbnail>
77
77
  ```
78
78
 
@@ -82,7 +82,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
82
82
 
83
83
  ```html
84
84
  <sp-thumbnail size="400">
85
- <img src="https://place.dog/100/100" alt="Demo Image" />
85
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
86
86
  </sp-thumbnail>
87
87
  ```
88
88
 
@@ -92,7 +92,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
92
92
 
93
93
  ```html
94
94
  <sp-thumbnail size="500">
95
- <img src="https://place.dog/100/100" alt="Demo Image" />
95
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
96
96
  </sp-thumbnail>
97
97
  ```
98
98
 
@@ -102,7 +102,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
102
102
 
103
103
  ```html
104
104
  <sp-thumbnail size="600">
105
- <img src="https://place.dog/100/100" alt="Demo Image" />
105
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
106
106
  </sp-thumbnail>
107
107
  ```
108
108
 
@@ -112,7 +112,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
112
112
 
113
113
  ```html
114
114
  <sp-thumbnail size="700">
115
- <img src="https://place.dog/100/100" alt="Demo Image" />
115
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
116
116
  </sp-thumbnail>
117
117
  ```
118
118
 
@@ -122,7 +122,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
122
122
 
123
123
  ```html
124
124
  <sp-thumbnail size="800">
125
- <img src="https://place.dog/100/100" alt="Demo Image" />
125
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
126
126
  </sp-thumbnail>
127
127
  ```
128
128
 
@@ -132,7 +132,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
132
132
 
133
133
  ```html
134
134
  <sp-thumbnail size="900">
135
- <img src="https://place.dog/100/100" alt="Demo Image" />
135
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
136
136
  </sp-thumbnail>
137
137
  ```
138
138
 
@@ -142,7 +142,7 @@ import { Thumbnail } from '@spectrum-web-components/thumbnail';
142
142
 
143
143
  ```html
144
144
  <sp-thumbnail size="1000">
145
- <img src="https://place.dog/100/100" alt="Demo Image" />
145
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
146
146
  </sp-thumbnail>
147
147
  ```
148
148
 
@@ -155,7 +155,7 @@ When `focused` the `sp-thumbnail` element will be displayed as follows:
155
155
 
156
156
  ```html
157
157
  <sp-thumbnail focused>
158
- <img src="https://place.dog/100/100" alt="Demo Image" />
158
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
159
159
  </sp-thumbnail>
160
160
  ```
161
161
 
@@ -166,7 +166,7 @@ When `disabled` the `sp-thumbnail` element will be displayed as follows:
166
166
 
167
167
  ```html
168
168
  <sp-thumbnail disabled>
169
- <img src="https://place.dog/100/100" alt="Demo Image" />
169
+ <img src="https://picsum.photos/100/100" alt="Demo Image" />
170
170
  </sp-thumbnail>
171
171
  ```
172
172
 
@@ -177,11 +177,11 @@ By default, an `sp-thumbnail` will ensure that the entirety of the content that
177
177
  ```html
178
178
  <div style="display: flex; gap: var(--spectrum-spacing-100);">
179
179
  <sp-thumbnail>
180
- <img src="https://place.dog/300/400" alt="Demo Image" />
180
+ <img src="https://picsum.photos/300/400" alt="Demo Image" />
181
181
  </sp-thumbnail>
182
182
 
183
183
  <sp-thumbnail>
184
- <img src="https://place.dog/500/100" alt="Demo Image" />
184
+ <img src="https://picsum.photos/500/100" alt="Demo Image" />
185
185
  </sp-thumbnail>
186
186
  </div>
187
187
  ```
@@ -191,11 +191,11 @@ The `background` attribute takes a string value of the CSS "background" property
191
191
  ```html
192
192
  <div style="display: flex; gap: var(--spectrum-spacing-100);">
193
193
  <sp-thumbnail background="red">
194
- <img src="https://place.dog/300/400" alt="Demo Image" />
194
+ <img src="https://picsum.photos/300/400" alt="Demo Image" />
195
195
  </sp-thumbnail>
196
196
 
197
197
  <sp-thumbnail background="#00ff00">
198
- <img src="https://place.dog/500/100" alt="Demo Image" />
198
+ <img src="https://picsum.photos/500/100" alt="Demo Image" />
199
199
  </sp-thumbnail>
200
200
  </div>
201
201
  ```
@@ -205,11 +205,11 @@ The `cover` attribute will cause the content to fill the space provided by the `
205
205
  ```html
206
206
  <div style="display: flex; gap: var(--spectrum-spacing-100);">
207
207
  <sp-thumbnail cover>
208
- <img src="https://place.dog/300/400" alt="Demo Image" />
208
+ <img src="https://picsum.photos/300/400" alt="Demo Image" />
209
209
  </sp-thumbnail>
210
210
 
211
211
  <sp-thumbnail cover>
212
- <img src="https://place.dog/500/100" alt="Demo Image" />
212
+ <img src="https://picsum.photos/500/100" alt="Demo Image" />
213
213
  </sp-thumbnail>
214
214
  </div>
215
215
  ```
@@ -221,11 +221,11 @@ For when `sp-thumbail` is used in layer management (such as the Compact or Detai
221
221
  ```html
222
222
  <div style="display: flex; gap: var(--spectrum-spacing-100);">
223
223
  <sp-thumbnail layer>
224
- <img src="https://place.dog/400/400" alt="Demo Image" />
224
+ <img src="https://picsum.photos/400/400" alt="Demo Image" />
225
225
  </sp-thumbnail>
226
226
 
227
227
  <sp-thumbnail layer selected>
228
- <img src="https://place.dog/500/100" alt="Demo Image" />
228
+ <img src="https://picsum.photos/500/100" alt="Demo Image" />
229
229
  </sp-thumbnail>
230
230
  </div>
231
231
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/thumbnail",
3
- "version": "0.37.0",
3
+ "version": "0.38.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,7 +57,7 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.37.0"
60
+ "@spectrum-web-components/base": "^0.38.0"
61
61
  },
62
62
  "devDependencies": {
63
63
  "@spectrum-css/thumbnail": "^3.0.17"
@@ -68,5 +68,5 @@
68
68
  "./sp-*.js",
69
69
  "./**/*.dev.js"
70
70
  ],
71
- "gitHead": "d771f62f0d8063070af43283bb0fd5e3400bad06"
71
+ "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
72
72
  }