@spectrum-web-components/grid 1.9.0 → 1.9.1-nightly.20251028214328
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/CHANGELOG.md +360 -0
- package/README.md +160 -9
- package/package.json +78 -78
- package/src/grid.css.dev.js.map +2 -2
- package/src/grid.css.js.map +2 -2
- package/stories/grid.stories.js +281 -0
- package/stories/grid.stories.js.map +7 -0
- package/test/benchmark/basic-test.js +8 -0
- package/test/benchmark/basic-test.js.map +7 -0
- package/test/grid-memory.test.js +5 -0
- package/{sp-grid.dev.js.map → test/grid-memory.test.js.map} +3 -3
- package/test/grid.test-vrt.js +5 -0
- package/{sp-grid.js.map → test/grid.test-vrt.js.map} +4 -4
- package/test/grid.test.js +297 -0
- package/test/grid.test.js.map +7 -0
- package/custom-elements.json +0 -436
- package/sp-grid.d.ts +0 -17
- package/sp-grid.dev.js +0 -4
- package/sp-grid.js +0 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
## 1.9.1-nightly.20251028214328
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies []:
|
|
8
|
+
- @spectrum-web-components/base@1.9.1-nightly.20251028214328
|
|
9
|
+
- @spectrum-web-components/reactive-controllers@1.9.1-nightly.20251028214328
|
|
10
|
+
|
|
11
|
+
## 1.9.0
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies [[`7d23140`](https://github.com/adobe/spectrum-web-components/commit/7d23140c21f0006ddea8a5cf39478ff36acbfbb8)]:
|
|
16
|
+
- @spectrum-web-components/reactive-controllers@1.9.0
|
|
17
|
+
- @spectrum-web-components/base@1.9.0
|
|
18
|
+
|
|
19
|
+
## 1.8.0
|
|
20
|
+
|
|
21
|
+
### Minor Changes
|
|
22
|
+
|
|
23
|
+
- [#5171](https://github.com/adobe/spectrum-web-components/pull/5171) [`eae4332`](https://github.com/adobe/spectrum-web-components/commit/eae433283d09e4b0d72cd5fd21c17c3e6c22543b) Thanks [@majornista](https://github.com/majornista)! - Enhanced the Card component's checkbox functionality with improved screen reader support and keyboard navigation.
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies []:
|
|
28
|
+
- @spectrum-web-components/base@1.8.0
|
|
29
|
+
- @spectrum-web-components/reactive-controllers@1.8.0
|
|
30
|
+
|
|
31
|
+
## 1.7.0
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- Updated dependencies []:
|
|
36
|
+
- @spectrum-web-components/base@1.7.0
|
|
37
|
+
- @spectrum-web-components/reactive-controllers@1.7.0
|
|
38
|
+
|
|
39
|
+
## 1.6.0
|
|
40
|
+
|
|
41
|
+
### Patch Changes
|
|
42
|
+
|
|
43
|
+
- Updated dependencies []:
|
|
44
|
+
- @spectrum-web-components/base@1.6.0
|
|
45
|
+
- @spectrum-web-components/reactive-controllers@1.6.0
|
|
46
|
+
|
|
47
|
+
## 1.5.0
|
|
48
|
+
|
|
49
|
+
### Patch Changes
|
|
50
|
+
|
|
51
|
+
- Updated dependencies []:
|
|
52
|
+
- @spectrum-web-components/base@1.5.0
|
|
53
|
+
- @spectrum-web-components/reactive-controllers@1.5.0
|
|
54
|
+
|
|
55
|
+
## 1.4.0
|
|
56
|
+
|
|
57
|
+
### Patch Changes
|
|
58
|
+
|
|
59
|
+
- Updated dependencies []:
|
|
60
|
+
- @spectrum-web-components/base@1.4.0
|
|
61
|
+
- @spectrum-web-components/reactive-controllers@1.4.0
|
|
62
|
+
|
|
63
|
+
## 1.3.0
|
|
64
|
+
|
|
65
|
+
### Patch Changes
|
|
66
|
+
|
|
67
|
+
- Updated dependencies [[`ea38ef0`](https://github.com/adobe/spectrum-web-components/commit/ea38ef0db33b251a054d50abf5cffc04e32f579f)]:
|
|
68
|
+
- @spectrum-web-components/reactive-controllers@1.3.0
|
|
69
|
+
- @spectrum-web-components/base@1.3.0
|
|
70
|
+
|
|
71
|
+
All notable changes to this project will be documented in this file.
|
|
72
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
73
|
+
|
|
74
|
+
# [1.2.0](https://github.com/adobe/spectrum-web-components/compare/v1.1.2...v1.2.0) (2025-02-27)
|
|
75
|
+
|
|
76
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
77
|
+
|
|
78
|
+
## [1.1.2](https://github.com/adobe/spectrum-web-components/compare/v1.1.1...v1.1.2) (2025-02-12)
|
|
79
|
+
|
|
80
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
81
|
+
|
|
82
|
+
## [1.1.1](https://github.com/adobe/spectrum-web-components/compare/v1.1.0...v1.1.1) (2025-01-29)
|
|
83
|
+
|
|
84
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
85
|
+
|
|
86
|
+
# [1.1.0](https://github.com/adobe/spectrum-web-components/compare/v1.0.3...v1.1.0) (2025-01-29)
|
|
87
|
+
|
|
88
|
+
### Features
|
|
89
|
+
|
|
90
|
+
- add an optional chromatic vrt action ([7d2f840](https://github.com/adobe/spectrum-web-components/commit/7d2f8401cb05c5e23872424f132a1a8edd95b666))
|
|
91
|
+
|
|
92
|
+
## [1.0.3](https://github.com/adobe/spectrum-web-components/compare/v1.0.1...v1.0.3) (2024-12-09)
|
|
93
|
+
|
|
94
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
95
|
+
|
|
96
|
+
## [1.0.1](https://github.com/adobe/spectrum-web-components/compare/v1.0.0...v1.0.1) (2024-11-11)
|
|
97
|
+
|
|
98
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
99
|
+
|
|
100
|
+
# [1.0.0](https://github.com/adobe/spectrum-web-components/compare/v0.49.0...v1.0.0) (2024-10-31)
|
|
101
|
+
|
|
102
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
103
|
+
|
|
104
|
+
# [0.49.0](https://github.com/adobe/spectrum-web-components/compare/v0.48.1...v0.49.0) (2024-10-15)
|
|
105
|
+
|
|
106
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
107
|
+
|
|
108
|
+
## [0.48.1](https://github.com/adobe/spectrum-web-components/compare/v0.48.0...v0.48.1) (2024-10-01)
|
|
109
|
+
|
|
110
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
111
|
+
|
|
112
|
+
# [0.48.0](https://github.com/adobe/spectrum-web-components/compare/v0.47.2...v0.48.0) (2024-09-17)
|
|
113
|
+
|
|
114
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
115
|
+
|
|
116
|
+
## [0.47.2](https://github.com/adobe/spectrum-web-components/compare/v0.47.1...v0.47.2) (2024-09-03)
|
|
117
|
+
|
|
118
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
119
|
+
|
|
120
|
+
## [0.47.1](https://github.com/adobe/spectrum-web-components/compare/v0.47.0...v0.47.1) (2024-08-27)
|
|
121
|
+
|
|
122
|
+
### Bug Fixes
|
|
123
|
+
|
|
124
|
+
- **reactive-controllers:** update focusable element's tab-index to 0 on accepting focus ([#4630](https://github.com/adobe/spectrum-web-components/issues/4630)) ([d359e84](https://github.com/adobe/spectrum-web-components/commit/d359e844fb00ff3a52f7f4346038aa8d5b620025))
|
|
125
|
+
|
|
126
|
+
# [0.47.0](https://github.com/adobe/spectrum-web-components/compare/v0.46.0...v0.47.0) (2024-08-20)
|
|
127
|
+
|
|
128
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
129
|
+
|
|
130
|
+
# [0.46.0](https://github.com/adobe/spectrum-web-components/compare/v0.45.0...v0.46.0) (2024-08-08)
|
|
131
|
+
|
|
132
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
133
|
+
|
|
134
|
+
# [0.45.0](https://github.com/adobe/spectrum-web-components/compare/v0.44.0...v0.45.0) (2024-07-30)
|
|
135
|
+
|
|
136
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
137
|
+
|
|
138
|
+
# [0.44.0](https://github.com/adobe/spectrum-web-components/compare/v0.42.4...v0.44.0) (2024-07-15)
|
|
139
|
+
|
|
140
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
141
|
+
|
|
142
|
+
# [0.43.0](https://github.com/adobe/spectrum-web-components/compare/v0.42.4...v0.43.0) (2024-06-11)
|
|
143
|
+
|
|
144
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
145
|
+
|
|
146
|
+
## [0.42.5](https://github.com/adobe/spectrum-web-components/compare/v0.42.4...v0.42.5) (2024-05-24)
|
|
147
|
+
|
|
148
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
149
|
+
|
|
150
|
+
## [0.42.4](https://github.com/adobe/spectrum-web-components/compare/v0.42.2...v0.42.4) (2024-05-14)
|
|
151
|
+
|
|
152
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
153
|
+
|
|
154
|
+
## [0.42.3](https://github.com/adobe/spectrum-web-components/compare/v0.42.2...v0.42.3) (2024-05-01)
|
|
155
|
+
|
|
156
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
157
|
+
|
|
158
|
+
## [0.42.2](https://github.com/adobe/spectrum-web-components/compare/v0.42.1...v0.42.2) (2024-04-03)
|
|
159
|
+
|
|
160
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
161
|
+
|
|
162
|
+
## [0.42.1](https://github.com/adobe/spectrum-web-components/compare/v0.42.0...v0.42.1) (2024-04-02)
|
|
163
|
+
|
|
164
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
165
|
+
|
|
166
|
+
# [0.42.0](https://github.com/adobe/spectrum-web-components/compare/v0.41.2...v0.42.0) (2024-03-19)
|
|
167
|
+
|
|
168
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
169
|
+
|
|
170
|
+
## [0.41.2](https://github.com/adobe/spectrum-web-components/compare/v0.41.1...v0.41.2) (2024-03-05)
|
|
171
|
+
|
|
172
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
173
|
+
|
|
174
|
+
## [0.41.1](https://github.com/adobe/spectrum-web-components/compare/v0.41.0...v0.41.1) (2024-02-22)
|
|
175
|
+
|
|
176
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
177
|
+
|
|
178
|
+
# [0.41.0](https://github.com/adobe/spectrum-web-components/compare/v0.40.5...v0.41.0) (2024-02-13)
|
|
179
|
+
|
|
180
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
181
|
+
|
|
182
|
+
## [0.40.5](https://github.com/adobe/spectrum-web-components/compare/v0.40.4...v0.40.5) (2024-02-05)
|
|
183
|
+
|
|
184
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
185
|
+
|
|
186
|
+
## [0.40.4](https://github.com/adobe/spectrum-web-components/compare/v0.40.3...v0.40.4) (2024-01-29)
|
|
187
|
+
|
|
188
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
189
|
+
|
|
190
|
+
## [0.40.3](https://github.com/adobe/spectrum-web-components/compare/v0.40.2...v0.40.3) (2024-01-11)
|
|
191
|
+
|
|
192
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
193
|
+
|
|
194
|
+
## [0.40.2](https://github.com/adobe/spectrum-web-components/compare/v0.40.1...v0.40.2) (2023-12-18)
|
|
195
|
+
|
|
196
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
197
|
+
|
|
198
|
+
## [0.40.1](https://github.com/adobe/spectrum-web-components/compare/v0.40.0...v0.40.1) (2023-12-05)
|
|
199
|
+
|
|
200
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
201
|
+
|
|
202
|
+
# [0.40.0](https://github.com/adobe/spectrum-web-components/compare/v0.39.4...v0.40.0) (2023-11-16)
|
|
203
|
+
|
|
204
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
205
|
+
|
|
206
|
+
## [0.39.4](https://github.com/adobe/spectrum-web-components/compare/v0.39.3...v0.39.4) (2023-11-02)
|
|
207
|
+
|
|
208
|
+
### Bug Fixes
|
|
209
|
+
|
|
210
|
+
- **overlay:** calculate more transforms ([6538a45](https://github.com/adobe/spectrum-web-components/commit/6538a45a036f60c4efce4c3ed3d1d6f2782a188e))
|
|
211
|
+
- **overlay:** place longpress helper content in a more accessible, less layout affecting location ([dd12c23](https://github.com/adobe/spectrum-web-components/commit/dd12c2346142a107ee9c7824410dff5ae660e574))
|
|
212
|
+
|
|
213
|
+
## [0.39.3](https://github.com/adobe/spectrum-web-components/compare/v0.39.2...v0.39.3) (2023-10-18)
|
|
214
|
+
|
|
215
|
+
### Bug Fixes
|
|
216
|
+
|
|
217
|
+
- **grid:** plug a mememory leak from the render process ([4414bd9](https://github.com/adobe/spectrum-web-components/commit/4414bd960d7695b98b283c90f7233b3ce047401a))
|
|
218
|
+
|
|
219
|
+
## [0.39.2](https://github.com/adobe/spectrum-web-components/compare/v0.39.1...v0.39.2) (2023-10-13)
|
|
220
|
+
|
|
221
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
222
|
+
|
|
223
|
+
## [0.39.1](https://github.com/adobe/spectrum-web-components/compare/v0.39.0...v0.39.1) (2023-10-06)
|
|
224
|
+
|
|
225
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
226
|
+
|
|
227
|
+
# [0.39.0](https://github.com/adobe/spectrum-web-components/compare/v0.38.0...v0.39.0) (2023-09-25)
|
|
228
|
+
|
|
229
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
230
|
+
|
|
231
|
+
# [0.38.0](https://github.com/adobe/spectrum-web-components/compare/v0.37.0...v0.38.0) (2023-09-05)
|
|
232
|
+
|
|
233
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
234
|
+
|
|
235
|
+
# [0.37.0](https://github.com/adobe/spectrum-web-components/compare/v0.36.0...v0.37.0) (2023-08-18)
|
|
236
|
+
|
|
237
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
238
|
+
|
|
239
|
+
# [0.36.0](https://github.com/adobe/spectrum-web-components/compare/v0.35.0...v0.36.0) (2023-08-18)
|
|
240
|
+
|
|
241
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
242
|
+
|
|
243
|
+
# [0.35.0](https://github.com/adobe/spectrum-web-components/compare/v0.34.0...v0.35.0) (2023-07-31)
|
|
244
|
+
|
|
245
|
+
### Bug Fixes
|
|
246
|
+
|
|
247
|
+
- **grid:** added lit dependency ([#3489](https://github.com/adobe/spectrum-web-components/issues/3489)) ([fb5f166](https://github.com/adobe/spectrum-web-components/commit/fb5f1664022a457620f5be097a47fa6381d4f8aa))
|
|
248
|
+
|
|
249
|
+
# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11)
|
|
250
|
+
|
|
251
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
252
|
+
|
|
253
|
+
## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14)
|
|
254
|
+
|
|
255
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
256
|
+
|
|
257
|
+
# [0.33.0](https://github.com/adobe/spectrum-web-components/compare/v0.32.0...v0.33.0) (2023-06-08)
|
|
258
|
+
|
|
259
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
260
|
+
|
|
261
|
+
# [0.32.0](https://github.com/adobe/spectrum-web-components/compare/v0.31.0...v0.32.0) (2023-06-01)
|
|
262
|
+
|
|
263
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
264
|
+
|
|
265
|
+
# [0.31.0](https://github.com/adobe/spectrum-web-components/compare/v0.30.0...v0.31.0) (2023-05-17)
|
|
266
|
+
|
|
267
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
268
|
+
|
|
269
|
+
# 0.30.0 (2023-05-03)
|
|
270
|
+
|
|
271
|
+
### Bug Fixes
|
|
272
|
+
|
|
273
|
+
- add Grid pattern ([341f493](https://github.com/adobe/spectrum-web-components/commit/341f4932087487be47bde355d1b0894886ed44ad))
|
|
274
|
+
- add support for "padding" attribute ([e43078f](https://github.com/adobe/spectrum-web-components/commit/e43078f0e14a909fb5e38428222a05d8c4754288))
|
|
275
|
+
- avoid registering lit-virtualizer globally ([281071f](https://github.com/adobe/spectrum-web-components/commit/281071fc551b189afa0ef9ef21e542c27661d567))
|
|
276
|
+
- import LitVirtualizer from @lit-labs/virtualizer@0.7.0-pre.3 ([9886ce4](https://github.com/adobe/spectrum-web-components/commit/9886ce4a6fd612bae33feffea26f8dbe8af9d690))
|
|
277
|
+
- prevent Grid clicks from throwing focus unexpectedly ([872e9fd](https://github.com/adobe/spectrum-web-components/commit/872e9fd6c83cbd223430c9c9f7706fe359932038))
|
|
278
|
+
|
|
279
|
+
### Features
|
|
280
|
+
|
|
281
|
+
- include all Dev Mode files in side effects ([f70817c](https://github.com/adobe/spectrum-web-components/commit/f70817cc15db6dcf5cc1de2d82b4f7b0c80b1251))
|
|
282
|
+
|
|
283
|
+
## [0.1.8](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.1.7...@spectrum-web-components/grid@0.1.8) (2023-04-05)
|
|
284
|
+
|
|
285
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
286
|
+
|
|
287
|
+
## [0.1.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.1.6...@spectrum-web-components/grid@0.1.7) (2023-01-23)
|
|
288
|
+
|
|
289
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
290
|
+
|
|
291
|
+
## [0.1.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.1.5...@spectrum-web-components/grid@0.1.6) (2023-01-09)
|
|
292
|
+
|
|
293
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
294
|
+
|
|
295
|
+
## [0.1.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.1.4...@spectrum-web-components/grid@0.1.5) (2022-11-21)
|
|
296
|
+
|
|
297
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
298
|
+
|
|
299
|
+
## [0.1.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.1.3...@spectrum-web-components/grid@0.1.4) (2022-11-14)
|
|
300
|
+
|
|
301
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
302
|
+
|
|
303
|
+
## [0.1.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.1.2...@spectrum-web-components/grid@0.1.3) (2022-10-28)
|
|
304
|
+
|
|
305
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
306
|
+
|
|
307
|
+
## [0.1.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.1.1...@spectrum-web-components/grid@0.1.2) (2022-10-10)
|
|
308
|
+
|
|
309
|
+
### Bug Fixes
|
|
310
|
+
|
|
311
|
+
- add support for "padding" attribute ([e43078f](https://github.com/adobe/spectrum-web-components/commit/e43078f0e14a909fb5e38428222a05d8c4754288))
|
|
312
|
+
|
|
313
|
+
## [0.1.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.1.0...@spectrum-web-components/grid@0.1.1) (2022-08-24)
|
|
314
|
+
|
|
315
|
+
### Bug Fixes
|
|
316
|
+
|
|
317
|
+
- prevent Grid clicks from throwing focus unexpectedly ([872e9fd](https://github.com/adobe/spectrum-web-components/commit/872e9fd6c83cbd223430c9c9f7706fe359932038))
|
|
318
|
+
|
|
319
|
+
# [0.1.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.0.9...@spectrum-web-components/grid@0.1.0) (2022-08-09)
|
|
320
|
+
|
|
321
|
+
### Features
|
|
322
|
+
|
|
323
|
+
- include all Dev Mode files in side effects ([f70817c](https://github.com/adobe/spectrum-web-components/commit/f70817cc15db6dcf5cc1de2d82b4f7b0c80b1251))
|
|
324
|
+
|
|
325
|
+
## [0.0.9](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.0.8...@spectrum-web-components/grid@0.0.9) (2022-08-04)
|
|
326
|
+
|
|
327
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
328
|
+
|
|
329
|
+
## [0.0.8](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.0.7...@spectrum-web-components/grid@0.0.8) (2022-06-29)
|
|
330
|
+
|
|
331
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
332
|
+
|
|
333
|
+
## [0.0.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.0.6...@spectrum-web-components/grid@0.0.7) (2022-06-07)
|
|
334
|
+
|
|
335
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
336
|
+
|
|
337
|
+
## [0.0.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.0.5...@spectrum-web-components/grid@0.0.6) (2022-05-12)
|
|
338
|
+
|
|
339
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
340
|
+
|
|
341
|
+
## [0.0.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.0.4...@spectrum-web-components/grid@0.0.5) (2022-04-21)
|
|
342
|
+
|
|
343
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
344
|
+
|
|
345
|
+
## [0.0.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.0.3...@spectrum-web-components/grid@0.0.4) (2022-03-30)
|
|
346
|
+
|
|
347
|
+
### Bug Fixes
|
|
348
|
+
|
|
349
|
+
- avoid registering lit-virtualizer globally ([281071f](https://github.com/adobe/spectrum-web-components/commit/281071fc551b189afa0ef9ef21e542c27661d567))
|
|
350
|
+
- import LitVirtualizer from @lit-labs/virtualizer@0.7.0-pre.3 ([9886ce4](https://github.com/adobe/spectrum-web-components/commit/9886ce4a6fd612bae33feffea26f8dbe8af9d690))
|
|
351
|
+
|
|
352
|
+
## [0.0.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/grid@0.0.2...@spectrum-web-components/grid@0.0.3) (2022-03-08)
|
|
353
|
+
|
|
354
|
+
**Note:** Version bump only for package @spectrum-web-components/grid
|
|
355
|
+
|
|
356
|
+
## 0.0.2 (2022-03-04)
|
|
357
|
+
|
|
358
|
+
### Bug Fixes
|
|
359
|
+
|
|
360
|
+
- add Grid pattern ([341f493](https://github.com/adobe/spectrum-web-components/commit/341f4932087487be47bde355d1b0894886ed44ad))
|
package/README.md
CHANGED
|
@@ -1,32 +1,183 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
|
-
An `<sp-grid>` element displays a virtualized grid of elements built from its `items`, a normalized array of
|
|
4
|
-
|
|
5
|
-
Elements displayed in the grid can be focused via the [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_roving_tabindex) that allows the grid to be entered via the `Tab` key and then subsequent elements to be focused via the arrow keys. To inform the `<sp-grid>` element what part of the DOM created by the `renderItem` method can be focused, supply a value to `focusableSelector`. Focus will always enter the element list at index 0 of ALL available elements, not just those currently realized to the page.
|
|
6
|
-
|
|
7
|
-
Elements rendered via `renderItem` can have their width and height customized by supplying a value for `itemSize` that accepts an object: `{ width: number, height: number }`. You can customize the space between these elements via the `gap` property that accepts a value of `0` or `${number}px`.
|
|
3
|
+
An `<sp-grid>` element displays a virtualized grid of elements built from its `items`, a normalized array of JavaScript objects, applied to a supplied `renderItem`, a `TemplateResult` returning method. The `<sp-grid>` is a class extension of [`lit-virtualizer`](https://www.npmjs.com/package/@lit-labs/virtualizer/v/0.7.0-pre.2) and as such surfaces all of its underlying methods and events.
|
|
8
4
|
|
|
9
5
|
### Usage
|
|
10
6
|
|
|
11
7
|
[](https://www.npmjs.com/package/@spectrum-web-components/grid)
|
|
12
8
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/grid)
|
|
13
9
|
|
|
14
|
-
```
|
|
10
|
+
```bash
|
|
15
11
|
yarn add @spectrum-web-components/grid
|
|
16
12
|
```
|
|
17
13
|
|
|
18
14
|
Import the side effectful registration of `<sp-grid>` via:
|
|
19
15
|
|
|
20
|
-
```
|
|
16
|
+
```javascript
|
|
21
17
|
import '@spectrum-web-components/grid/sp-grid.js';
|
|
22
18
|
```
|
|
23
19
|
|
|
24
20
|
When looking to leverage the `Grid` base class as a type and/or for extension purposes, do so via:
|
|
25
21
|
|
|
26
|
-
```
|
|
22
|
+
```javascript
|
|
27
23
|
import { Grid } from '@spectrum-web-components/grid';
|
|
28
24
|
```
|
|
29
25
|
|
|
26
|
+
### Anatomy
|
|
27
|
+
|
|
28
|
+
The grid consists of several key parts:
|
|
29
|
+
|
|
30
|
+
- A virtualized container that efficiently renders only visible items
|
|
31
|
+
- Individual grid items rendered via the `renderItem` method
|
|
32
|
+
- A roving tabindex system for keyboard navigation
|
|
33
|
+
- Configurable layout properties for item sizing and spacing
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<sp-grid id="basic-grid"></sp-grid>
|
|
37
|
+
<script type="module">
|
|
38
|
+
const grid = document.querySelector('#basic-grid');
|
|
39
|
+
grid.items = [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }];
|
|
40
|
+
grid.renderItem = (item) => {
|
|
41
|
+
const div = document.createElement('div');
|
|
42
|
+
div.textContent = item.name;
|
|
43
|
+
return div;
|
|
44
|
+
};
|
|
45
|
+
</script>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Options
|
|
49
|
+
|
|
50
|
+
#### Properties
|
|
51
|
+
|
|
52
|
+
The grid supports several properties for configuration:
|
|
53
|
+
|
|
54
|
+
##### Items
|
|
55
|
+
|
|
56
|
+
The `items` property accepts a normalized array of JavaScript objects that will be rendered in the grid:
|
|
57
|
+
|
|
58
|
+
```javascript
|
|
59
|
+
const grid = document.querySelector('sp-grid');
|
|
60
|
+
grid.items = [
|
|
61
|
+
{ name: 'Card 1', date: '10/15/18' },
|
|
62
|
+
{ name: 'Card 2', date: '10/16/18' },
|
|
63
|
+
{ name: 'Card 3', date: '10/17/18' },
|
|
64
|
+
];
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
##### Render Item
|
|
68
|
+
|
|
69
|
+
The `renderItem` property is a function that receives an item, index, and selected state, and returns a DOM element to be rendered:
|
|
70
|
+
|
|
71
|
+
```javascript
|
|
72
|
+
grid.renderItem = (item, index, selected) => {
|
|
73
|
+
const card = document.createElement('sp-card');
|
|
74
|
+
card.heading = item.name;
|
|
75
|
+
card.selected = selected;
|
|
76
|
+
return card;
|
|
77
|
+
};
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
##### Item Size
|
|
81
|
+
|
|
82
|
+
Control the dimensions of each grid item using the `itemSize` property, which accepts an object with `width` and `height` properties:
|
|
83
|
+
|
|
84
|
+
```javascript
|
|
85
|
+
grid.itemSize = {
|
|
86
|
+
width: 200,
|
|
87
|
+
height: 300,
|
|
88
|
+
};
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
##### Gap
|
|
92
|
+
|
|
93
|
+
Customize the space between grid items via the `gap` property, which accepts a value of `0` or `${number}px`:
|
|
94
|
+
|
|
95
|
+
```javascript
|
|
96
|
+
grid.gap = '10px';
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
##### Focusable Selector
|
|
100
|
+
|
|
101
|
+
Specify which element within the rendered item can receive focus by providing a CSS selector to the `focusableSelector` property:
|
|
102
|
+
|
|
103
|
+
```javascript
|
|
104
|
+
grid.focusableSelector = 'sp-card';
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
This informs the `<sp-grid>` element what part of the DOM created by the `renderItem` method can be focused via keyboard navigation.
|
|
108
|
+
|
|
109
|
+
### Behaviors
|
|
110
|
+
|
|
111
|
+
#### Virtualization
|
|
112
|
+
|
|
113
|
+
The `<sp-grid>` uses virtualization to efficiently render large lists of items. Only the items visible in the viewport (plus a small buffer) are rendered to the DOM, which significantly improves performance for large datasets. As you scroll, the grid dynamically updates which items are rendered.
|
|
114
|
+
|
|
115
|
+
#### Focus Management
|
|
116
|
+
|
|
117
|
+
Elements displayed in the grid can be focused via the [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_roving_tabindex) pattern. This allows the grid to be entered via the <kbd>Tab</kbd> key and then subsequent elements to be focused via the arrow keys.
|
|
118
|
+
|
|
119
|
+
Focus will always enter the element list at index 0 of all available elements, not just those currently realized to the page.
|
|
120
|
+
|
|
121
|
+
#### Selection Management
|
|
122
|
+
|
|
123
|
+
The grid supports selection of items. You can maintain a `selectedItems` array and update it based on user interactions:
|
|
124
|
+
|
|
125
|
+
```javascript
|
|
126
|
+
grid.selectedItems = [];
|
|
127
|
+
|
|
128
|
+
grid.renderItem = (item, index, selected) => {
|
|
129
|
+
const card = document.createElement('sp-card');
|
|
130
|
+
card.selected = grid.selectedItems.includes(card.value);
|
|
131
|
+
card.addEventListener('change', () => {
|
|
132
|
+
if (grid.selectedItems.includes(card.value)) {
|
|
133
|
+
grid.selectedItems = grid.selectedItems.filter(
|
|
134
|
+
(item) => item !== card.value
|
|
135
|
+
);
|
|
136
|
+
} else {
|
|
137
|
+
grid.selectedItems.push(card.value);
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
return card;
|
|
141
|
+
};
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Accessibility
|
|
145
|
+
|
|
146
|
+
The `<sp-grid>` is designed with accessibility in mind and follows ARIA best practices for grid patterns.
|
|
147
|
+
|
|
148
|
+
#### Keyboard Navigation
|
|
149
|
+
|
|
150
|
+
The grid supports keyboard navigation through the roving tabindex pattern:
|
|
151
|
+
|
|
152
|
+
- <kbd>Tab</kbd>: Enter the grid (focus moves to first item)
|
|
153
|
+
- <kbd>Arrow Keys</kbd>: Navigate between grid items
|
|
154
|
+
- Focus always starts at index 0 of all available elements
|
|
155
|
+
|
|
156
|
+
#### ARIA Attributes
|
|
157
|
+
|
|
158
|
+
When implementing a grid, ensure you provide appropriate ARIA attributes for screen reader support:
|
|
159
|
+
|
|
160
|
+
```javascript
|
|
161
|
+
grid.role = 'grid';
|
|
162
|
+
grid.ariaLabel = 'Select images';
|
|
163
|
+
grid.ariaMultiSelectable = 'true';
|
|
164
|
+
grid.ariaRowCount = `${grid.items.length}`;
|
|
165
|
+
grid.ariaColCount = 1;
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
Additionally, each rendered item should have appropriate ARIA attributes:
|
|
169
|
+
|
|
170
|
+
```javascript
|
|
171
|
+
card.role = 'row';
|
|
172
|
+
card.label = `Card Heading ${index}`;
|
|
173
|
+
card.ariaSelected = grid.selectedItems.includes(card.value);
|
|
174
|
+
card.ariaRowIndex = `${index + 1}`;
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
#### Focusable Elements
|
|
178
|
+
|
|
179
|
+
Use the `focusableSelector` property to specify which elements within each grid item should receive focus. This ensures that keyboard users can navigate to interactive elements within the grid.
|
|
180
|
+
|
|
30
181
|
## Example
|
|
31
182
|
|
|
32
183
|
To interact with a fully accessible grid example, reference our [Grid Storybook](https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/grid/) documentation.
|