@spectrum-web-components/picker 0.0.0-20241209155954

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 (63) hide show
  1. package/README.md +464 -0
  2. package/package.json +111 -0
  3. package/sp-picker.d.ts +6 -0
  4. package/sp-picker.dev.js +5 -0
  5. package/sp-picker.dev.js.map +7 -0
  6. package/sp-picker.js +2 -0
  7. package/sp-picker.js.map +7 -0
  8. package/src/DesktopController.d.ts +7 -0
  9. package/src/DesktopController.dev.js +72 -0
  10. package/src/DesktopController.dev.js.map +7 -0
  11. package/src/DesktopController.js +2 -0
  12. package/src/DesktopController.js.map +7 -0
  13. package/src/InteractionController.d.ts +43 -0
  14. package/src/InteractionController.dev.js +121 -0
  15. package/src/InteractionController.dev.js.map +7 -0
  16. package/src/InteractionController.js +2 -0
  17. package/src/InteractionController.js.map +7 -0
  18. package/src/MobileController.d.ts +9 -0
  19. package/src/MobileController.dev.js +51 -0
  20. package/src/MobileController.dev.js.map +7 -0
  21. package/src/MobileController.js +2 -0
  22. package/src/MobileController.js.map +7 -0
  23. package/src/Picker.d.ts +133 -0
  24. package/src/Picker.dev.js +713 -0
  25. package/src/Picker.dev.js.map +7 -0
  26. package/src/Picker.js +116 -0
  27. package/src/Picker.js.map +7 -0
  28. package/src/index.d.ts +1 -0
  29. package/src/index.dev.js +3 -0
  30. package/src/index.dev.js.map +7 -0
  31. package/src/index.js +2 -0
  32. package/src/index.js.map +7 -0
  33. package/src/picker-overrides.css.d.ts +2 -0
  34. package/src/picker-overrides.css.dev.js +7 -0
  35. package/src/picker-overrides.css.dev.js.map +7 -0
  36. package/src/picker-overrides.css.js +4 -0
  37. package/src/picker-overrides.css.js.map +7 -0
  38. package/src/picker.css.d.ts +2 -0
  39. package/src/picker.css.dev.js +7 -0
  40. package/src/picker.css.dev.js.map +7 -0
  41. package/src/picker.css.js +4 -0
  42. package/src/picker.css.js.map +7 -0
  43. package/src/spectrum-config.js +124 -0
  44. package/src/spectrum-picker.css.d.ts +2 -0
  45. package/src/spectrum-picker.css.dev.js +7 -0
  46. package/src/spectrum-picker.css.dev.js.map +7 -0
  47. package/src/spectrum-picker.css.js +4 -0
  48. package/src/spectrum-picker.css.js.map +7 -0
  49. package/src/strategies.d.ts +6 -0
  50. package/src/strategies.dev.js +8 -0
  51. package/src/strategies.dev.js.map +7 -0
  52. package/src/strategies.js +2 -0
  53. package/src/strategies.js.map +7 -0
  54. package/sync/index.d.ts +3 -0
  55. package/sync/index.dev.js +5 -0
  56. package/sync/index.dev.js.map +7 -0
  57. package/sync/index.js +2 -0
  58. package/sync/index.js.map +7 -0
  59. package/sync/sp-picker.d.ts +2 -0
  60. package/sync/sp-picker.dev.js +4 -0
  61. package/sync/sp-picker.dev.js.map +7 -0
  62. package/sync/sp-picker.js +2 -0
  63. package/sync/sp-picker.js.map +7 -0
package/README.md ADDED
@@ -0,0 +1,464 @@
1
+ ## Description
2
+
3
+ An `<sp-picker>` is an alternative to HTML's `<select>` element. Use `<sp-menu-item>` elements to outline the options that will be made available to the user when interacting with the `<sp-picker>` element.
4
+
5
+ ### Usage
6
+
7
+ [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/picker?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/picker)
8
+ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/picker?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/picker)
9
+ [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/guTpKeAjgecibF150Qbg/src/index.ts)
10
+
11
+ ```
12
+ yarn add @spectrum-web-components/picker
13
+ ```
14
+
15
+ Import the side effectful registration of `<sp-picker>` via:
16
+
17
+ ```
18
+ import '@spectrum-web-components/picker/sp-picker.js';
19
+ ```
20
+
21
+ The default of `<sp-picker>` will load dependencies in `@spectrum-web-components/overlay` asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `<sp-picker>` as follows:
22
+
23
+ ```
24
+ import '@spectrum-web-components/picker/sync/sp-picker.js';
25
+ ```
26
+
27
+ When looking to leverage the `Picker` base class as a type and/or for extension purposes, do so via:
28
+
29
+ ```
30
+ import { Picker } from '@spectrum-web-components/picker';
31
+ ```
32
+
33
+ ## Sizes
34
+
35
+ <sp-tabs selected="m" auto label="Size Attribute Options">
36
+ <sp-tab value="s">Small</sp-tab>
37
+ <sp-tab-panel value="s">
38
+
39
+ ```html demo
40
+ <sp-field-group>
41
+ <div>
42
+ <sp-field-label for="picker-s" size="s">Selection type:</sp-field-label>
43
+ <sp-picker id="picker-s" size="s" label="Selection type">
44
+ <sp-menu-item>Deselect</sp-menu-item>
45
+ <sp-menu-item>Select inverse</sp-menu-item>
46
+ <sp-menu-item>Feather...</sp-menu-item>
47
+ <sp-menu-item>Select and mask...</sp-menu-item>
48
+ <sp-menu-divider></sp-menu-divider>
49
+ <sp-menu-item>Save selection</sp-menu-item>
50
+ <sp-menu-item disabled>Make work path</sp-menu-item>
51
+ </sp-picker>
52
+ </div>
53
+ <div>
54
+ <sp-field-label for="picker-s-quiet" size="s">
55
+ Selection type:
56
+ </sp-field-label>
57
+ <sp-picker id="picker-s-quiet" quiet size="s" label="Selection type">
58
+ <sp-menu-item>Deselect</sp-menu-item>
59
+ <sp-menu-item>Select inverse</sp-menu-item>
60
+ <sp-menu-item>Feather...</sp-menu-item>
61
+ <sp-menu-item>Select and mask...</sp-menu-item>
62
+ <sp-menu-divider></sp-menu-divider>
63
+ <sp-menu-item>Save selection</sp-menu-item>
64
+ <sp-menu-item disabled>Make work path</sp-menu-item>
65
+ </sp-picker>
66
+ </div>
67
+ </sp-field-group>
68
+ ```
69
+
70
+ </sp-tab-panel>
71
+ <sp-tab value="m">Medium</sp-tab>
72
+ <sp-tab-panel value="m">
73
+
74
+ ```html demo
75
+ <sp-field-group>
76
+ <div>
77
+ <sp-field-label for="picker-m" size="m">Selection type:</sp-field-label>
78
+ <sp-picker id="picker-m" size="m" label="Selection type">
79
+ <sp-menu-item>Deselect</sp-menu-item>
80
+ <sp-menu-item>Select inverse</sp-menu-item>
81
+ <sp-menu-item>Feather...</sp-menu-item>
82
+ <sp-menu-item>Select and mask...</sp-menu-item>
83
+ <sp-menu-divider></sp-menu-divider>
84
+ <sp-menu-item>Save selection</sp-menu-item>
85
+ <sp-menu-item disabled>Make work path</sp-menu-item>
86
+ </sp-picker>
87
+ </div>
88
+ <div>
89
+ <sp-field-label for="picker-m-quiet" size="m">
90
+ Selection type:
91
+ </sp-field-label>
92
+ <sp-picker id="picker-m-quiet" quiet size="m" label="Selection type">
93
+ <sp-menu-item>Deselect</sp-menu-item>
94
+ <sp-menu-item>Select inverse</sp-menu-item>
95
+ <sp-menu-item>Feather...</sp-menu-item>
96
+ <sp-menu-item>Select and mask...</sp-menu-item>
97
+ <sp-menu-divider></sp-menu-divider>
98
+ <sp-menu-item>Save selection</sp-menu-item>
99
+ <sp-menu-item disabled>Make work path</sp-menu-item>
100
+ </sp-picker>
101
+ </div>
102
+ </sp-field-group>
103
+ ```
104
+
105
+ </sp-tab-panel>
106
+ <sp-tab value="l">Large</sp-tab>
107
+ <sp-tab-panel value="l">
108
+
109
+ ```html demo
110
+ <sp-field-group>
111
+ <div>
112
+ <sp-field-label for="picker-l" size="l">Selection type:</sp-field-label>
113
+ <sp-picker id="picker-l" size="l" label="Selection type">
114
+ <sp-menu-item>Deselect</sp-menu-item>
115
+ <sp-menu-item>Select inverse</sp-menu-item>
116
+ <sp-menu-item>Feather...</sp-menu-item>
117
+ <sp-menu-item>Select and mask...</sp-menu-item>
118
+ <sp-menu-divider></sp-menu-divider>
119
+ <sp-menu-item>Save selection</sp-menu-item>
120
+ <sp-menu-item disabled>Make work path</sp-menu-item>
121
+ </sp-picker>
122
+ </div>
123
+ <div>
124
+ <sp-field-label for="picker-l-quiet" size="l">
125
+ Selection type:
126
+ </sp-field-label>
127
+ <sp-picker id="picker-l-quiet" quiet size="l" label="Selection type">
128
+ <sp-menu-item>Deselect</sp-menu-item>
129
+ <sp-menu-item>Select inverse</sp-menu-item>
130
+ <sp-menu-item>Feather...</sp-menu-item>
131
+ <sp-menu-item>Select and mask...</sp-menu-item>
132
+ <sp-menu-divider></sp-menu-divider>
133
+ <sp-menu-item>Save selection</sp-menu-item>
134
+ <sp-menu-item disabled>Make work path</sp-menu-item>
135
+ </sp-picker>
136
+ </div>
137
+ </sp-field-group>
138
+ ```
139
+
140
+ </sp-tab-panel>
141
+ <sp-tab value="xl">Extra Large</sp-tab>
142
+ <sp-tab-panel value="xl">
143
+
144
+ ```html demo
145
+ <sp-field-group>
146
+ <div>
147
+ <sp-field-label for="picker-xl" size="xl">
148
+ Selection type:
149
+ </sp-field-label>
150
+ <sp-picker id="picker-xl" size="xl" label="Selection type">
151
+ <sp-menu-item>Deselect</sp-menu-item>
152
+ <sp-menu-item>Select inverse</sp-menu-item>
153
+ <sp-menu-item>Feather...</sp-menu-item>
154
+ <sp-menu-item>Select and mask...</sp-menu-item>
155
+ <sp-menu-divider></sp-menu-divider>
156
+ <sp-menu-item>Save selection</sp-menu-item>
157
+ <sp-menu-item disabled>Make work path</sp-menu-item>
158
+ </sp-picker>
159
+ </div>
160
+ <div>
161
+ <sp-field-label for="picker-xl-quiet" size="xl">
162
+ Selection type:
163
+ </sp-field-label>
164
+ <sp-picker id="picker-xl-quiet" quiet size="xl" label="Selection type">
165
+ <sp-menu-item>Deselect</sp-menu-item>
166
+ <sp-menu-item>Select inverse</sp-menu-item>
167
+ <sp-menu-item>Feather...</sp-menu-item>
168
+ <sp-menu-item>Select and mask...</sp-menu-item>
169
+ <sp-menu-divider></sp-menu-divider>
170
+ <sp-menu-item>Save selection</sp-menu-item>
171
+ <sp-menu-item disabled>Make work path</sp-menu-item>
172
+ </sp-picker>
173
+ </div>
174
+ </sp-field-group>
175
+ ```
176
+
177
+ </sp-tab-panel>
178
+ </sp-tabs>
179
+
180
+ ## Icons
181
+
182
+ `<sp-menu-item>`s in an `<sp-picker>` that are provided content addressed to their `icon` slot will be passed to the `<sp-picker>` element when that item is chosen.
183
+
184
+ ```html
185
+ <sp-field-label for="picker-icons">Choose an action...</sp-field-label>
186
+ <sp-picker label="What would you like to do?" value="item-2" id="picker-icons">
187
+ <sp-menu-item>
188
+ <sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>
189
+ Save
190
+ </sp-menu-item>
191
+ <sp-menu-item>
192
+ <sp-icon-stopwatch slot="icon"></sp-icon-stopwatch>
193
+ Finish
194
+ </sp-menu-item>
195
+ <sp-menu-item>
196
+ <sp-icon-user-activity slot="icon"></sp-icon-user-activity>
197
+ Review
198
+ </sp-menu-item>
199
+ </sp-picker>
200
+ ```
201
+
202
+ When you choose to leverage `<sp-menu-item>` elements without text content, you will need to be sure to leverage the `value` attribute so that the `<sp-picker>` element can differentiate between the available options. Further, it is important that you apply accessible labeling to the `[slot="icon"]` content as follows:
203
+
204
+ ```html
205
+ <sp-field-label for="picker-icons-only">Choose an action...</sp-field-label>
206
+ <sp-picker
207
+ label="What would you like to do?"
208
+ value="item-2"
209
+ id="picker-icons-only"
210
+ >
211
+ <sp-menu-item value="item-1">
212
+ <sp-icon-save-floppy slot="icon" label="Save"></sp-icon-save-floppy>
213
+ </sp-menu-item>
214
+ <sp-menu-item value="item-2">
215
+ <sp-icon-stopwatch slot="icon" label="Finish"></sp-icon-stopwatch>
216
+ </sp-menu-item>
217
+ <sp-menu-item value="item-3">
218
+ <sp-icon-user-activity
219
+ slot="icon"
220
+ label="Review"
221
+ ></sp-icon-user-activity>
222
+ </sp-menu-item>
223
+ </sp-picker>
224
+ ```
225
+
226
+ ### Advanced icon management
227
+
228
+ The `icons` attribute allows you to manage whether to `only` display the icon in the `<sp-picker>` element or to display `none` of the icons in the `<sp-picker>`.
229
+
230
+ When using `icons="only"` and your `<sp-menu-item>` elements still have text content, that content will be applied to `<sp-picker>` element in a non-visible way.
231
+
232
+ ```html
233
+ <sp-field-label for="picker-icons-value">Choose an action...</sp-field-label>
234
+ <sp-picker
235
+ label="What would you like to do?"
236
+ value="item-2"
237
+ id="picker-icons-value"
238
+ icons="only"
239
+ >
240
+ <sp-menu-item>
241
+ <sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>
242
+ Save
243
+ </sp-menu-item>
244
+ <sp-menu-item>
245
+ <sp-icon-stopwatch slot="icon"></sp-icon-stopwatch>
246
+ Finish
247
+ </sp-menu-item>
248
+ <sp-menu-item>
249
+ <sp-icon-user-activity slot="icon"></sp-icon-user-activity>
250
+ Review
251
+ </sp-menu-item>
252
+ </sp-picker>
253
+ ```
254
+
255
+ When using `icons="none"`, the icons will only be available in the overlaid menu.
256
+
257
+ ```html
258
+ <sp-field-label for="picker-icons-none">Choose an action...</sp-field-label>
259
+ <sp-picker
260
+ label="What would you like to do?"
261
+ value="item-2"
262
+ id="picker-icons-none"
263
+ icons="none"
264
+ >
265
+ <sp-menu-item>
266
+ <sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>
267
+ Save
268
+ </sp-menu-item>
269
+ <sp-menu-item>
270
+ <sp-icon-stopwatch slot="icon"></sp-icon-stopwatch>
271
+ Finish
272
+ </sp-menu-item>
273
+ <sp-menu-item>
274
+ <sp-icon-user-activity slot="icon"></sp-icon-user-activity>
275
+ Review
276
+ </sp-menu-item>
277
+ </sp-picker>
278
+ ```
279
+
280
+ ## Value
281
+
282
+ When the `value` of an `<sp-picker>` matches the `value` attribute or the trimmed `textContent` (or `itemText`) of a descendent `<sp-menu-item>` element, it will make that element as `selected`.
283
+
284
+ ### Matching `value`
285
+
286
+ ```html
287
+ <sp-field-label for="picker-value">Selection type:</sp-field-label>
288
+ <sp-picker
289
+ label="Select a Country with a very long label, too long in fact"
290
+ value="item-2"
291
+ id="picker-value"
292
+ >
293
+ <sp-menu-item value="item-1">Deselect</sp-menu-item>
294
+ <sp-menu-item value="item-2">Select inverse</sp-menu-item>
295
+ <sp-menu-item value="item-3">Feather...</sp-menu-item>
296
+ <sp-menu-item value="item-4">Select and mask...</sp-menu-item>
297
+ <sp-menu-divider></sp-menu-divider>
298
+ <sp-menu-item value="item-5">Save selection</sp-menu-item>
299
+ <sp-menu-item disabled value="item-6">Make work path</sp-menu-item>
300
+ </sp-picker>
301
+ ```
302
+
303
+ ### Matching `itemText`
304
+
305
+ ```html
306
+ <sp-field-label for="picker-item-text">Selection type:</sp-field-label>
307
+ <sp-picker
308
+ label="Select a Country with a very long label, too long in fact"
309
+ value="Feather..."
310
+ id="picker-item-text"
311
+ >
312
+ <sp-menu-item>Deselect</sp-menu-item>
313
+ <sp-menu-item>Select inverse</sp-menu-item>
314
+ <sp-menu-item>Feather...</sp-menu-item>
315
+ <sp-menu-item>Select and mask...</sp-menu-item>
316
+ <sp-menu-divider></sp-menu-divider>
317
+ <sp-menu-item>Save selection</sp-menu-item>
318
+ <sp-menu-item>Make work path</sp-menu-item>
319
+ </sp-picker>
320
+ ```
321
+
322
+ ## States
323
+
324
+ ### Invalid
325
+
326
+ ```html
327
+ <sp-field-label for="picker-invalid">Standard:</sp-field-label>
328
+ <sp-picker
329
+ label="Select a Country with a very long label, too long in fact"
330
+ invalid
331
+ id="picker-invalid"
332
+ >
333
+ <sp-menu-item>Deselect</sp-menu-item>
334
+ <sp-menu-item>Select inverse</sp-menu-item>
335
+ <sp-menu-item>Feather...</sp-menu-item>
336
+ <sp-menu-item>Select and mask...</sp-menu-item>
337
+ <sp-menu-divider></sp-menu-divider>
338
+ <sp-menu-item>Save selection</sp-menu-item>
339
+ <sp-menu-item disabled>Make work path</sp-menu-item>
340
+ </sp-picker>
341
+ <br />
342
+ <br />
343
+ <sp-field-label for="picker-invalid-quiet">Quiet:</sp-field-label>
344
+ <sp-picker
345
+ label="Select a Country with a very long label, too long in fact"
346
+ invalid
347
+ quiet
348
+ id="picker-invalid-quiet"
349
+ >
350
+ <sp-menu-item>Deselect</sp-menu-item>
351
+ <sp-menu-item>Select inverse</sp-menu-item>
352
+ <sp-menu-item>Feather...</sp-menu-item>
353
+ <sp-menu-item>Select and mask...</sp-menu-item>
354
+ <sp-menu-divider></sp-menu-divider>
355
+ <sp-menu-item>Save selection</sp-menu-item>
356
+ <sp-menu-item disabled>Make work path</sp-menu-item>
357
+ </sp-picker>
358
+ ```
359
+
360
+ ### Side Label
361
+
362
+ ```html
363
+ <sp-field-label side-aligned="start" for="picker-sideLabel">
364
+ Standard:
365
+ </sp-field-label>
366
+ <sp-picker
367
+ label="Select a Country with a very long label, too long in fact"
368
+ id="picker-sideLabel"
369
+ >
370
+ <sp-menu-item>Deselect</sp-menu-item>
371
+ <sp-menu-item>Select inverse</sp-menu-item>
372
+ <sp-menu-item>Feather...</sp-menu-item>
373
+ <sp-menu-item>Select and mask...</sp-menu-item>
374
+ <sp-menu-divider></sp-menu-divider>
375
+ <sp-menu-item>Save selection</sp-menu-item>
376
+ <sp-menu-item disabled>Make work path</sp-menu-item>
377
+ </sp-picker>
378
+ <br />
379
+ <br />
380
+ <sp-field-label side-aligned="start" for="picker-sideLabel-quiet">
381
+ Quiet:
382
+ </sp-field-label>
383
+ <sp-picker
384
+ label="Select a Country with a very long label, too long in fact"
385
+ quiet
386
+ id="picker-sideLabel-quiet"
387
+ >
388
+ <sp-menu-item>Deselect</sp-menu-item>
389
+ <sp-menu-item>Select inverse</sp-menu-item>
390
+ <sp-menu-item>Feather...</sp-menu-item>
391
+ <sp-menu-item>Select and mask...</sp-menu-item>
392
+ <sp-menu-divider></sp-menu-divider>
393
+ <sp-menu-item>Save selection</sp-menu-item>
394
+ <sp-menu-item disabled>Make work path</sp-menu-item>
395
+ </sp-picker>
396
+ ```
397
+
398
+ ### Disabled
399
+
400
+ ```html
401
+ <sp-field-label for="picker-disabled">Standard:</sp-field-label>
402
+ <sp-picker
403
+ label="Select a Country with a very long label, too long in fact"
404
+ disabled
405
+ id="picker-disabled"
406
+ >
407
+ <sp-menu-item>Deselect</sp-menu-item>
408
+ <sp-menu-item>Select inverse</sp-menu-item>
409
+ <sp-menu-item>Feather...</sp-menu-item>
410
+ <sp-menu-item>Select and mask...</sp-menu-item>
411
+ <sp-menu-divider></sp-menu-divider>
412
+ <sp-menu-item>Save selection</sp-menu-item>
413
+ <sp-menu-item disabled>Make work path</sp-menu-item>
414
+ </sp-picker>
415
+ <br />
416
+ <br />
417
+ <sp-field-label for="picker-disabled-quiet">Quiet:</sp-field-label>
418
+ <sp-picker
419
+ label="Select a Country with a very long label, too long in fact"
420
+ disabled
421
+ quiet
422
+ id="picker-disabled-quiet"
423
+ >
424
+ <sp-menu-item>Deselect</sp-menu-item>
425
+ <sp-menu-item>Select inverse</sp-menu-item>
426
+ <sp-menu-item>Feather...</sp-menu-item>
427
+ <sp-menu-item>Select and mask...</sp-menu-item>
428
+ <sp-menu-divider></sp-menu-divider>
429
+ <sp-menu-item>Save selection</sp-menu-item>
430
+ <sp-menu-item disabled>Make work path</sp-menu-item>
431
+ </sp-picker>
432
+ ```
433
+
434
+ ### Pending
435
+
436
+ When in pending state, `<sp-picker>` elements will not respond to click events and will be delivered with a `<sp-progress-circle>` to visually outline that it is pending. It will not toggle open or display its `<sp-menu-item>` descendants until the attribute is removed.
437
+
438
+ ```html
439
+ <sp-field-label for="picker-loading">Standard:</sp-field-label>
440
+ <sp-picker id="picker-loading" label="Loading blending modes..." pending>
441
+ <sp-menu-item>Pass through</sp-menu-item>
442
+ <sp-menu-item>Normal</sp-menu-item>
443
+ <sp-menu-item>Multiply</sp-menu-item>
444
+ <sp-menu-item>Screen</sp-menu-item>
445
+ </sp-picker>
446
+ <br />
447
+ <br />
448
+ <sp-field-label for="picker-loading-quiet">Quiet:</sp-field-label>
449
+ <sp-picker
450
+ id="picker-loading-quiet"
451
+ label="Loading blending modes..."
452
+ pending
453
+ quiet
454
+ >
455
+ <sp-menu-item>Pass through</sp-menu-item>
456
+ <sp-menu-item>Normal</sp-menu-item>
457
+ <sp-menu-item>Multiply</sp-menu-item>
458
+ <sp-menu-item>Screen</sp-menu-item>
459
+ </sp-picker>
460
+ ```
461
+
462
+ ## Accessibility
463
+
464
+ To render accessibly, an `<sp-picker>` element should be paired with an `<sp-field-label>` element that has a `for` attribute referencing the `id` of the `<sp-picker>` element. For an accessible label that renders within the bounds of the picker itself, but still fulfills the accessibility contract, use the `label` attribute or a `<span slot="label">` as a child element of `<sp-picker>`.
package/package.json ADDED
@@ -0,0 +1,111 @@
1
+ {
2
+ "name": "@spectrum-web-components/picker",
3
+ "version": "0.0.0-20241209155954",
4
+ "publishConfig": {
5
+ "access": "public"
6
+ },
7
+ "description": "",
8
+ "license": "Apache-2.0",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/adobe/spectrum-web-components.git",
12
+ "directory": "packages/picker"
13
+ },
14
+ "author": "",
15
+ "homepage": "https://opensource.adobe.com/spectrum-web-components/components/picker",
16
+ "bugs": {
17
+ "url": "https://github.com/adobe/spectrum-web-components/issues"
18
+ },
19
+ "main": "src/index.js",
20
+ "module": "src/index.js",
21
+ "type": "module",
22
+ "exports": {
23
+ ".": {
24
+ "development": "./src/index.dev.js",
25
+ "default": "./src/index.js"
26
+ },
27
+ "./package.json": "./package.json",
28
+ "./src/DesktopController.js": {
29
+ "development": "./src/DesktopController.dev.js",
30
+ "default": "./src/DesktopController.js"
31
+ },
32
+ "./src/InteractionController.js": {
33
+ "development": "./src/InteractionController.dev.js",
34
+ "default": "./src/InteractionController.js"
35
+ },
36
+ "./src/MobileController.js": {
37
+ "development": "./src/MobileController.dev.js",
38
+ "default": "./src/MobileController.js"
39
+ },
40
+ "./src/Picker.js": {
41
+ "development": "./src/Picker.dev.js",
42
+ "default": "./src/Picker.js"
43
+ },
44
+ "./src/index.js": {
45
+ "development": "./src/index.dev.js",
46
+ "default": "./src/index.js"
47
+ },
48
+ "./src/picker-overrides.css.js": "./src/picker-overrides.css.js",
49
+ "./src/picker.css.js": "./src/picker.css.js",
50
+ "./src/strategies.js": {
51
+ "development": "./src/strategies.dev.js",
52
+ "default": "./src/strategies.js"
53
+ },
54
+ "./sync/index.js": {
55
+ "development": "./sync/index.dev.js",
56
+ "default": "./sync/index.js"
57
+ },
58
+ "./sync/sp-picker.js": {
59
+ "development": "./sync/sp-picker.dev.js",
60
+ "default": "./sync/sp-picker.js"
61
+ },
62
+ "./sp-picker.js": {
63
+ "development": "./sp-picker.dev.js",
64
+ "default": "./sp-picker.js"
65
+ }
66
+ },
67
+ "scripts": {
68
+ "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
69
+ },
70
+ "files": [
71
+ "**/*.d.ts",
72
+ "**/*.js",
73
+ "**/*.js.map",
74
+ "custom-elements.json",
75
+ "!stories/",
76
+ "!test/"
77
+ ],
78
+ "keywords": [
79
+ "spectrum css",
80
+ "web components",
81
+ "lit-element",
82
+ "lit-html"
83
+ ],
84
+ "dependencies": {
85
+ "@spectrum-web-components/base": "0.0.0-20241209155954",
86
+ "@spectrum-web-components/button": "0.0.0-20241209155954",
87
+ "@spectrum-web-components/field-label": "0.0.0-20241209155954",
88
+ "@spectrum-web-components/icon": "0.0.0-20241209155954",
89
+ "@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
90
+ "@spectrum-web-components/icons-workflow": "0.0.0-20241209155954",
91
+ "@spectrum-web-components/menu": "0.0.0-20241209155954",
92
+ "@spectrum-web-components/overlay": "0.0.0-20241209155954",
93
+ "@spectrum-web-components/popover": "0.0.0-20241209155954",
94
+ "@spectrum-web-components/progress-circle": "0.0.0-20241209155954",
95
+ "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
96
+ "@spectrum-web-components/shared": "0.0.0-20241209155954",
97
+ "@spectrum-web-components/tooltip": "0.0.0-20241209155954",
98
+ "@spectrum-web-components/tray": "0.0.0-20241209155954"
99
+ },
100
+ "devDependencies": {
101
+ "@spectrum-css/picker": "^9.0.0-s2-foundations.15"
102
+ },
103
+ "types": "./src/index.d.ts",
104
+ "customElements": "custom-elements.json",
105
+ "sideEffects": [
106
+ "./sp-*.js",
107
+ "./**/*.dev.js",
108
+ "./sync/index.js",
109
+ "./sync/sp-*.js"
110
+ ]
111
+ }
package/sp-picker.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { Picker } from './src/Picker.js';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'sp-picker': Picker;
5
+ }
6
+ }
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ import { Picker } from "./src/Picker.dev.js";
3
+ import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
4
+ defineElement("sp-picker", Picker);
5
+ //# sourceMappingURL=sp-picker.dev.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-picker.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Picker } from './src/Picker.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-picker', Picker);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-picker': Picker;\n }\n}\n"],
5
+ "mappings": ";AAYA,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,cAAc,aAAa,MAAM;",
6
+ "names": []
7
+ }
package/sp-picker.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";import{Picker as e}from"./src/Picker.js";import{defineElement as r}from"@spectrum-web-components/base/src/define-element.js";r("sp-picker",e);
2
+ //# sourceMappingURL=sp-picker.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-picker.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { Picker } from './src/Picker.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-picker', Picker);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-picker': Picker;\n }\n}\n"],
5
+ "mappings": "aAYA,OAAS,UAAAA,MAAc,kBACvB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,YAAaD,CAAM",
6
+ "names": ["Picker", "defineElement"]
7
+ }
@@ -0,0 +1,7 @@
1
+ import { InteractionController, InteractionTypes } from './InteractionController.js';
2
+ export declare class DesktopController extends InteractionController {
3
+ type: InteractionTypes;
4
+ handlePointerdown(event: PointerEvent): void;
5
+ handleActivate(event?: Event): void;
6
+ init(): void;
7
+ }