@spectrum-web-components/action-button 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 (33) hide show
  1. package/README.md +564 -0
  2. package/package.json +76 -0
  3. package/sp-action-button.d.ts +6 -0
  4. package/sp-action-button.dev.js +5 -0
  5. package/sp-action-button.dev.js.map +7 -0
  6. package/sp-action-button.js +2 -0
  7. package/sp-action-button.js.map +7 -0
  8. package/src/ActionButton.d.ts +67 -0
  9. package/src/ActionButton.dev.js +229 -0
  10. package/src/ActionButton.dev.js.map +7 -0
  11. package/src/ActionButton.js +6 -0
  12. package/src/ActionButton.js.map +7 -0
  13. package/src/action-button-overrides.css.d.ts +2 -0
  14. package/src/action-button-overrides.css.dev.js +7 -0
  15. package/src/action-button-overrides.css.dev.js.map +7 -0
  16. package/src/action-button-overrides.css.js +4 -0
  17. package/src/action-button-overrides.css.js.map +7 -0
  18. package/src/action-button.css.d.ts +2 -0
  19. package/src/action-button.css.dev.js +7 -0
  20. package/src/action-button.css.dev.js.map +7 -0
  21. package/src/action-button.css.js +4 -0
  22. package/src/action-button.css.js.map +7 -0
  23. package/src/index.d.ts +1 -0
  24. package/src/index.dev.js +3 -0
  25. package/src/index.dev.js.map +7 -0
  26. package/src/index.js +2 -0
  27. package/src/index.js.map +7 -0
  28. package/src/spectrum-action-button.css.d.ts +2 -0
  29. package/src/spectrum-action-button.css.dev.js +7 -0
  30. package/src/spectrum-action-button.css.dev.js.map +7 -0
  31. package/src/spectrum-action-button.css.js +4 -0
  32. package/src/spectrum-action-button.css.js.map +7 -0
  33. package/src/spectrum-config.js +223 -0
package/README.md ADDED
@@ -0,0 +1,564 @@
1
+ ## Description
2
+
3
+ An `<sp-action-button>` represents an action a user can take.
4
+
5
+ ### Usage
6
+
7
+ [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-button)
8
+ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-button)
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/mOF1zUEjLJzODGXFYaIU/src/index.ts)
10
+
11
+ ```
12
+ yarn add @spectrum-web-components/action-button
13
+ ```
14
+
15
+ Import the side effectful registration of `<sp-action-button>` via:
16
+
17
+ ```
18
+ import '@spectrum-web-components/action-button/sp-action-button.js';
19
+ ```
20
+
21
+ When looking to leverage the `ActionButton` base class as a type and/or for extension purposes, do so via:
22
+
23
+ ```
24
+ import { ActionButton } from '@spectrum-web-components/action-button';
25
+ ```
26
+
27
+ ## Sizes
28
+
29
+ <sp-tabs selected="m" auto label="Size Attribute Options">
30
+ <sp-tab value="xs">Extra Small</sp-tab>
31
+ <sp-tab-panel value="xs">
32
+
33
+ ```html demo
34
+ <sp-action-group size="xs">
35
+ <sp-action-button>Edit</sp-action-button>
36
+ <sp-action-button>
37
+ <sp-icon-edit slot="icon"></sp-icon-edit>
38
+ Edit
39
+ </sp-action-button>
40
+ <sp-action-button>
41
+ <sp-icon-edit slot="icon"></sp-icon-edit>
42
+ </sp-action-button>
43
+ <sp-action-button hold-affordance>
44
+ <sp-icon-edit slot="icon"></sp-icon-edit>
45
+ </sp-action-button>
46
+ </sp-action-group>
47
+ ```
48
+
49
+ </sp-tab-panel>
50
+ <sp-tab value="s">Small</sp-tab>
51
+ <sp-tab-panel value="s">
52
+
53
+ ```html demo
54
+ <sp-action-group size="s">
55
+ <sp-action-button>Edit</sp-action-button>
56
+ <sp-action-button>
57
+ <sp-icon-edit slot="icon"></sp-icon-edit>
58
+ Edit
59
+ </sp-action-button>
60
+ <sp-action-button>
61
+ <sp-icon-edit slot="icon"></sp-icon-edit>
62
+ </sp-action-button>
63
+ <sp-action-button hold-affordance>
64
+ <sp-icon-edit slot="icon"></sp-icon-edit>
65
+ </sp-action-button>
66
+ </sp-action-group>
67
+ ```
68
+
69
+ </sp-tab-panel>
70
+ <sp-tab value="m">Medium</sp-tab>
71
+ <sp-tab-panel value="m">
72
+
73
+ ```html demo
74
+ <sp-action-group size="m">
75
+ <sp-action-button>Edit</sp-action-button>
76
+ <sp-action-button>
77
+ <sp-icon-edit slot="icon"></sp-icon-edit>
78
+ Edit
79
+ </sp-action-button>
80
+ <sp-action-button>
81
+ <sp-icon-edit slot="icon"></sp-icon-edit>
82
+ </sp-action-button>
83
+ <sp-action-button hold-affordance>
84
+ <sp-icon-edit slot="icon"></sp-icon-edit>
85
+ </sp-action-button>
86
+ </sp-action-group>
87
+ ```
88
+
89
+ </sp-tab-panel>
90
+ <sp-tab value="l">Large</sp-tab>
91
+ <sp-tab-panel value="l">
92
+
93
+ ```html demo
94
+ <sp-action-group size="l">
95
+ <sp-action-button>Edit</sp-action-button>
96
+ <sp-action-button>
97
+ <sp-icon-edit slot="icon"></sp-icon-edit>
98
+ Edit
99
+ </sp-action-button>
100
+ <sp-action-button>
101
+ <sp-icon-edit slot="icon"></sp-icon-edit>
102
+ </sp-action-button>
103
+ <sp-action-button hold-affordance>
104
+ <sp-icon-edit slot="icon"></sp-icon-edit>
105
+ </sp-action-button>
106
+ </sp-action-group>
107
+ ```
108
+
109
+ </sp-tab-panel>
110
+ <sp-tab value="xl">Extra Large</sp-tab>
111
+ <sp-tab-panel value="xl">
112
+
113
+ ```html demo
114
+ <sp-action-group size="xl">
115
+ <sp-action-button>Edit</sp-action-button>
116
+ <sp-action-button>
117
+ <sp-icon-edit slot="icon"></sp-icon-edit>
118
+ Edit
119
+ </sp-action-button>
120
+ <sp-action-button>
121
+ <sp-icon-edit slot="icon"></sp-icon-edit>
122
+ </sp-action-button>
123
+ <sp-action-button hold-affordance>
124
+ <sp-icon-edit slot="icon"></sp-icon-edit>
125
+ </sp-action-button>
126
+ </sp-action-group>
127
+ ```
128
+
129
+ </sp-tab-panel>
130
+ </sp-tabs>
131
+
132
+ ## Variants
133
+
134
+ The `<sp-action-button>` can be customized with either or both of the `emphasized` and `quiet` attributes. These will pair with either or both of the state attributes (`selected` and `disabled`) to decide the final visual delivery of the `<sp-action-button>`. Content addressed to the `icon` slot can also be provided and will be positioned just before the rest of the the supplied button content.
135
+
136
+ ### Standard
137
+
138
+ ```html demo
139
+ <div
140
+ style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
141
+ >
142
+ <div>
143
+ <sp-field-label for="standard">Default</sp-field-label>
144
+ <sp-action-group id="standard">
145
+ <sp-action-button>Edit</sp-action-button>
146
+ <sp-action-button>
147
+ <sp-icon-edit slot="icon"></sp-icon-edit>
148
+ Edit
149
+ </sp-action-button>
150
+ <sp-action-button>
151
+ <sp-icon-edit slot="icon"></sp-icon-edit>
152
+ </sp-action-button>
153
+ <sp-action-button hold-affordance>
154
+ <sp-icon-edit slot="icon"></sp-icon-edit>
155
+ </sp-action-button>
156
+ </sp-action-group>
157
+ </div>
158
+
159
+ <div>
160
+ <sp-field-label for="standard-selected">Selected</sp-field-label>
161
+ <sp-action-group id="standard-selected">
162
+ <sp-action-button selected>Edit</sp-action-button>
163
+ <sp-action-button selected>
164
+ <sp-icon-edit slot="icon"></sp-icon-edit>
165
+ Edit
166
+ </sp-action-button>
167
+ <sp-action-button selected>
168
+ <sp-icon-edit slot="icon"></sp-icon-edit>
169
+ </sp-action-button>
170
+ <sp-action-button selected hold-affordance>
171
+ <sp-icon-edit slot="icon"></sp-icon-edit>
172
+ </sp-action-button>
173
+ </sp-action-group>
174
+ </div>
175
+
176
+ <div>
177
+ <sp-field-label for="standard-disabled">Disabled</sp-field-label>
178
+ <sp-action-group id="standard-disabled">
179
+ <sp-action-button disabled>Edit</sp-action-button>
180
+ <sp-action-button disabled>
181
+ <sp-icon-edit slot="icon"></sp-icon-edit>
182
+ Edit
183
+ </sp-action-button>
184
+ <sp-action-button disabled>
185
+ <sp-icon-edit slot="icon"></sp-icon-edit>
186
+ </sp-action-button>
187
+ <sp-action-button disabled hold-affordance>
188
+ <sp-icon-edit slot="icon"></sp-icon-edit>
189
+ </sp-action-button>
190
+ </sp-action-group>
191
+ </div>
192
+
193
+ <div>
194
+ <sp-field-label for="standard-disabled-selected">
195
+ Disabled + Selected
196
+ </sp-field-label>
197
+ <sp-action-group id="standard-disabled-selected">
198
+ <sp-action-button disabled selected>Edit</sp-action-button>
199
+ <sp-action-button disabled selected>
200
+ <sp-icon-edit slot="icon"></sp-icon-edit>
201
+ Edit
202
+ </sp-action-button>
203
+ <sp-action-button disabled selected>
204
+ <sp-icon-edit slot="icon"></sp-icon-edit>
205
+ </sp-action-button>
206
+ <sp-action-button disabled selected hold-affordance>
207
+ <sp-icon-edit slot="icon"></sp-icon-edit>
208
+ </sp-action-button>
209
+ </sp-action-group>
210
+ </div>
211
+ </div>
212
+ ```
213
+
214
+ ### Quiet
215
+
216
+ ```html demo
217
+ <div
218
+ style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
219
+ >
220
+ <div>
221
+ <sp-field-label for="standard">Default</sp-field-label>
222
+ <sp-action-group quiet id="standard">
223
+ <sp-action-button quiet>Edit</sp-action-button>
224
+ <sp-action-button quiet>
225
+ <sp-icon-edit slot="icon"></sp-icon-edit>
226
+ Edit
227
+ </sp-action-button>
228
+ <sp-action-button quiet>
229
+ <sp-icon-edit slot="icon"></sp-icon-edit>
230
+ </sp-action-button>
231
+ <sp-action-button quiet hold-affordance>
232
+ <sp-icon-edit slot="icon"></sp-icon-edit>
233
+ </sp-action-button>
234
+ </sp-action-group>
235
+ </div>
236
+
237
+ <div>
238
+ <sp-field-label for="standard-selected">Selected</sp-field-label>
239
+ <sp-action-group quiet id="standard-selected">
240
+ <sp-action-button quiet selected>Edit</sp-action-button>
241
+ <sp-action-button quiet selected>
242
+ <sp-icon-edit slot="icon"></sp-icon-edit>
243
+ Edit
244
+ </sp-action-button>
245
+ <sp-action-button quiet selected>
246
+ <sp-icon-edit slot="icon"></sp-icon-edit>
247
+ </sp-action-button>
248
+ <sp-action-button quiet selected hold-affordance>
249
+ <sp-icon-edit slot="icon"></sp-icon-edit>
250
+ </sp-action-button>
251
+ </sp-action-group>
252
+ </div>
253
+
254
+ <div>
255
+ <sp-field-label for="standard-disabled">Disabled</sp-field-label>
256
+ <sp-action-group quiet id="standard-disabled">
257
+ <sp-action-button quiet disabled>Edit</sp-action-button>
258
+ <sp-action-button quiet disabled>
259
+ <sp-icon-edit slot="icon"></sp-icon-edit>
260
+ Edit
261
+ </sp-action-button>
262
+ <sp-action-button quiet disabled>
263
+ <sp-icon-edit slot="icon"></sp-icon-edit>
264
+ </sp-action-button>
265
+ <sp-action-button quiet disabled hold-affordance>
266
+ <sp-icon-edit slot="icon"></sp-icon-edit>
267
+ </sp-action-button>
268
+ </sp-action-group>
269
+ </div>
270
+
271
+ <div>
272
+ <sp-field-label for="standard-disabled-selected">
273
+ Disabled + Selected
274
+ </sp-field-label>
275
+ <sp-action-group quiet id="standard-disabled-selected">
276
+ <sp-action-button quiet disabled selected>Edit</sp-action-button>
277
+ <sp-action-button quiet disabled selected>
278
+ <sp-icon-edit slot="icon"></sp-icon-edit>
279
+ Edit
280
+ </sp-action-button>
281
+ <sp-action-button quiet disabled selected>
282
+ <sp-icon-edit slot="icon"></sp-icon-edit>
283
+ </sp-action-button>
284
+ <sp-action-button quiet disabled selected hold-affordance>
285
+ <sp-icon-edit slot="icon"></sp-icon-edit>
286
+ </sp-action-button>
287
+ </sp-action-group>
288
+ </div>
289
+ </div>
290
+ ```
291
+
292
+ ### Emphasized
293
+
294
+ ```html demo
295
+ <div
296
+ style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
297
+ >
298
+ <div>
299
+ <sp-field-label for="standard">Default</sp-field-label>
300
+ <sp-action-group emphasized id="standard">
301
+ <sp-action-button emphasized>Edit</sp-action-button>
302
+ <sp-action-button emphasized>
303
+ <sp-icon-edit slot="icon"></sp-icon-edit>
304
+ Edit
305
+ </sp-action-button>
306
+ <sp-action-button emphasized>
307
+ <sp-icon-edit slot="icon"></sp-icon-edit>
308
+ </sp-action-button>
309
+ <sp-action-button emphasized hold-affordance>
310
+ <sp-icon-edit slot="icon"></sp-icon-edit>
311
+ </sp-action-button>
312
+ </sp-action-group>
313
+ </div>
314
+
315
+ <div>
316
+ <sp-field-label for="standard-selected">Selected</sp-field-label>
317
+ <sp-action-group emphasized id="standard-selected">
318
+ <sp-action-button emphasized selected>Edit</sp-action-button>
319
+ <sp-action-button emphasized selected>
320
+ <sp-icon-edit slot="icon"></sp-icon-edit>
321
+ Edit
322
+ </sp-action-button>
323
+ <sp-action-button emphasized selected>
324
+ <sp-icon-edit slot="icon"></sp-icon-edit>
325
+ </sp-action-button>
326
+ <sp-action-button emphasized selected hold-affordance>
327
+ <sp-icon-edit slot="icon"></sp-icon-edit>
328
+ </sp-action-button>
329
+ </sp-action-group>
330
+ </div>
331
+
332
+ <div>
333
+ <sp-field-label for="standard-disabled">Disabled</sp-field-label>
334
+ <sp-action-group emphasized id="standard-disabled">
335
+ <sp-action-button emphasized disabled>Edit</sp-action-button>
336
+ <sp-action-button emphasized disabled>
337
+ <sp-icon-edit slot="icon"></sp-icon-edit>
338
+ Edit
339
+ </sp-action-button>
340
+ <sp-action-button emphasized disabled>
341
+ <sp-icon-edit slot="icon"></sp-icon-edit>
342
+ </sp-action-button>
343
+ <sp-action-button emphasized disabled hold-affordance>
344
+ <sp-icon-edit slot="icon"></sp-icon-edit>
345
+ </sp-action-button>
346
+ </sp-action-group>
347
+ </div>
348
+
349
+ <div>
350
+ <sp-field-label for="standard-disabled-selected">
351
+ Disabled + Selected
352
+ </sp-field-label>
353
+ <sp-action-group emphasized id="standard-disabled-selected">
354
+ <sp-action-button emphasized disabled selected>
355
+ Edit
356
+ </sp-action-button>
357
+ <sp-action-button emphasized disabled selected>
358
+ <sp-icon-edit slot="icon"></sp-icon-edit>
359
+ Edit
360
+ </sp-action-button>
361
+ <sp-action-button emphasized disabled selected>
362
+ <sp-icon-edit slot="icon"></sp-icon-edit>
363
+ </sp-action-button>
364
+ <sp-action-button emphasized disabled selected hold-affordance>
365
+ <sp-icon-edit slot="icon"></sp-icon-edit>
366
+ </sp-action-button>
367
+ </sp-action-group>
368
+ </div>
369
+ </div>
370
+ ```
371
+
372
+ ### Emphasized + Quiet
373
+
374
+ ```html demo
375
+ <div
376
+ style="display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2em;"
377
+ >
378
+ <div>
379
+ <sp-field-label for="standard">Default</sp-field-label>
380
+ <sp-action-group emphasized quiet id="standard">
381
+ <sp-action-button emphasized quiet>Edit</sp-action-button>
382
+ <sp-action-button emphasized quiet>
383
+ <sp-icon-edit slot="icon"></sp-icon-edit>
384
+ Edit
385
+ </sp-action-button>
386
+ <sp-action-button emphasized quiet>
387
+ <sp-icon-edit slot="icon"></sp-icon-edit>
388
+ </sp-action-button>
389
+ <sp-action-button emphasized quiet hold-affordance>
390
+ <sp-icon-edit slot="icon"></sp-icon-edit>
391
+ </sp-action-button>
392
+ </sp-action-group>
393
+ </div>
394
+
395
+ <div>
396
+ <sp-field-label for="standard-selected">Selected</sp-field-label>
397
+ <sp-action-group emphasized quiet id="standard-selected">
398
+ <sp-action-button emphasized quiet selected>Edit</sp-action-button>
399
+ <sp-action-button emphasized quiet selected>
400
+ <sp-icon-edit slot="icon"></sp-icon-edit>
401
+ Edit
402
+ </sp-action-button>
403
+ <sp-action-button emphasized quiet selected>
404
+ <sp-icon-edit slot="icon"></sp-icon-edit>
405
+ </sp-action-button>
406
+ <sp-action-button emphasized quiet selected hold-affordance>
407
+ <sp-icon-edit slot="icon"></sp-icon-edit>
408
+ </sp-action-button>
409
+ </sp-action-group>
410
+ </div>
411
+
412
+ <div>
413
+ <sp-field-label for="standard-disabled">Disabled</sp-field-label>
414
+ <sp-action-group emphasized quiet id="standard-disabled">
415
+ <sp-action-button emphasized quiet disabled>Edit</sp-action-button>
416
+ <sp-action-button emphasized quiet disabled>
417
+ <sp-icon-edit slot="icon"></sp-icon-edit>
418
+ Edit
419
+ </sp-action-button>
420
+ <sp-action-button emphasized quiet disabled>
421
+ <sp-icon-edit slot="icon"></sp-icon-edit>
422
+ </sp-action-button>
423
+ <sp-action-button emphasized quiet disabled hold-affordance>
424
+ <sp-icon-edit slot="icon"></sp-icon-edit>
425
+ </sp-action-button>
426
+ </sp-action-group>
427
+ </div>
428
+
429
+ <div>
430
+ <sp-field-label for="standard-disabled-selected">
431
+ Disabled + Selected
432
+ </sp-field-label>
433
+ <sp-action-group emphasized quiet id="standard-disabled-selected">
434
+ <sp-action-button emphasized quiet disabled selected>
435
+ Edit
436
+ </sp-action-button>
437
+ <sp-action-button emphasized quiet disabled selected>
438
+ <sp-icon-edit slot="icon"></sp-icon-edit>
439
+ Edit
440
+ </sp-action-button>
441
+ <sp-action-button emphasized quiet disabled selected>
442
+ <sp-icon-edit slot="icon"></sp-icon-edit>
443
+ </sp-action-button>
444
+ <sp-action-button
445
+ emphasized
446
+ quiet
447
+ disabled
448
+ selected
449
+ hold-affordance
450
+ >
451
+ <sp-icon-edit slot="icon"></sp-icon-edit>
452
+ </sp-action-button>
453
+ </sp-action-group>
454
+ </div>
455
+ </div>
456
+ ```
457
+
458
+ ## Action button with hold affordance
459
+
460
+ The use of the `hold-affordance` attribute signifies that the `<sp-action-button>` in question will be delivered with a visual affordance outlining that special interaction with the button will dispatch a `longpress` event. Via a pointer input, this even will be dispatched when 300ms has passed after a `pointerdown` event without the presence of a `pointerup` or `pointercancel` event. Via the keyboard, an event with a code of `Space` or or `ArrowDown` while `altKey === true` will dispatch the event.
461
+
462
+ ```html demo
463
+ <div
464
+ style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2em;"
465
+ >
466
+ <overlay-trigger placement="bottom-start">
467
+ <sp-action-button label="Edit" hold-affordance slot="trigger">
468
+ <sp-icon-edit slot="icon"></sp-icon-edit>
469
+ </sp-action-button>
470
+ <sp-popover slot="longpress-content" dialog tip>
471
+ <p style="color: var(--spectrum-neutral-content-color-default);">
472
+ This content is triggered by the "longpress" interaction.
473
+ </p>
474
+ </sp-popover>
475
+ </overlay-trigger>
476
+
477
+ <overlay-trigger placement="top">
478
+ <sp-action-button hold-affordance quiet slot="trigger">
479
+ Show Longpress Content
480
+ </sp-action-button>
481
+ <sp-popover slot="longpress-content" dialog tip>
482
+ <p style="color: var(--spectrum-neutral-content-color-default);">
483
+ This content is triggered by the "longpress" interaction.
484
+ </p>
485
+ </sp-popover>
486
+ </overlay-trigger>
487
+
488
+ <overlay-trigger placement="top-end">
489
+ <sp-action-button hold-affordance selected slot="trigger">
490
+ <sp-icon-edit slot="icon"></sp-icon-edit>
491
+ Extended Content with Longpress
492
+ </sp-action-button>
493
+ <sp-popover slot="longpress-content" dialog tip>
494
+ <p style="color: var(--spectrum-neutral-content-color-default);">
495
+ This content is triggered by the "longpress" interaction.
496
+ </p>
497
+ </sp-popover>
498
+ </overlay-trigger>
499
+ </div>
500
+ ```
501
+
502
+ ## Toggles
503
+
504
+ With the application of the `toggles` attribute, the button will self manage its `selected` property on `click`. When this value is updated, a cancellable `change` event will be dispatched to inform the parent application.
505
+
506
+ ```html demo
507
+ <div
508
+ style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 2em;"
509
+ >
510
+ <div>
511
+ <sp-field-label for="toggles-default">Standard</sp-field-label>
512
+ <sp-action-button toggles id="toggles-default">
513
+ Toggle button
514
+ </sp-action-button>
515
+ </div>
516
+ <div>
517
+ <sp-field-label for="toggles-quiet">Quiet</sp-field-label>
518
+ <sp-action-button toggles quiet id="toggles-quiet">
519
+ Toggle button
520
+ </sp-action-button>
521
+ </div>
522
+ <div>
523
+ <sp-field-label for="toggles-emphasized">Emphasized</sp-field-label>
524
+ <sp-action-button toggles emphasized id="toggles-emphasized">
525
+ Toggle button
526
+ </sp-action-button>
527
+ </div>
528
+ <div>
529
+ <sp-field-label for="toggles-emphasized-quiet">
530
+ Emphasized + Quiet
531
+ </sp-field-label>
532
+ <sp-action-button
533
+ toggles
534
+ emphasized
535
+ quiet
536
+ id="toggles-emphasized-quiet"
537
+ >
538
+ Toggle button
539
+ </sp-action-button>
540
+ </div>
541
+ </div>
542
+ ```
543
+
544
+ ## Handling events
545
+
546
+ Events handlers for clicks and other user actions can be registered on a
547
+ `<sp-action-button>` as on a standard HTML `<button>` element.
548
+
549
+ ```html
550
+ <sp-button onclick="spAlert(this, '<sp-action-button> clicked!')">
551
+ Click me
552
+ </sp-button>
553
+ ```
554
+
555
+ In addition to handling events like a native `<button>` HTML element, one can also use a `<sp-action-button>` in place of the `<a>` HTML element by using the `href` and optional `target` attribute.
556
+
557
+ ```html
558
+ <sp-action-button
559
+ href="https://github.com/adobe/spectrum-web-components"
560
+ target="_blank"
561
+ >
562
+ Click me
563
+ </sp-action-button>
564
+ ```
package/package.json ADDED
@@ -0,0 +1,76 @@
1
+ {
2
+ "name": "@spectrum-web-components/action-button",
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/action-button"
13
+ },
14
+ "author": "",
15
+ "homepage": "https://opensource.adobe.com/spectrum-web-components/components/action-button",
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/ActionButton.js": {
29
+ "development": "./src/ActionButton.dev.js",
30
+ "default": "./src/ActionButton.js"
31
+ },
32
+ "./src/action-button-overrides.css.js": "./src/action-button-overrides.css.js",
33
+ "./src/action-button.css.js": "./src/action-button.css.js",
34
+ "./src/index.js": {
35
+ "development": "./src/index.dev.js",
36
+ "default": "./src/index.js"
37
+ },
38
+ "./sp-action-button.js": {
39
+ "development": "./sp-action-button.dev.js",
40
+ "default": "./sp-action-button.js"
41
+ }
42
+ },
43
+ "scripts": {
44
+ "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
45
+ },
46
+ "files": [
47
+ "**/*.d.ts",
48
+ "**/*.js",
49
+ "**/*.js.map",
50
+ "custom-elements.json",
51
+ "!stories/",
52
+ "!test/"
53
+ ],
54
+ "keywords": [
55
+ "spectrum css",
56
+ "web components",
57
+ "lit-element",
58
+ "lit-html"
59
+ ],
60
+ "dependencies": {
61
+ "@spectrum-web-components/base": "0.0.0-20241209155954",
62
+ "@spectrum-web-components/button": "0.0.0-20241209155954",
63
+ "@spectrum-web-components/icon": "0.0.0-20241209155954",
64
+ "@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
65
+ "@spectrum-web-components/shared": "0.0.0-20241209155954"
66
+ },
67
+ "devDependencies": {
68
+ "@spectrum-css/actionbutton": "^7.0.0-s2-foundations.22"
69
+ },
70
+ "types": "./src/index.d.ts",
71
+ "customElements": "custom-elements.json",
72
+ "sideEffects": [
73
+ "./sp-*.js",
74
+ "./**/*.dev.js"
75
+ ]
76
+ }
package/sp-action-button.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ActionButton } from './src/ActionButton.js';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'sp-action-button': ActionButton;
5
+ }
6
+ }
package/sp-action-button.dev.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ import { ActionButton } from "./src/ActionButton.dev.js";
3
+ import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
4
+ defineElement("sp-action-button", ActionButton);
5
+ //# sourceMappingURL=sp-action-button.dev.js.map
package/sp-action-button.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-action-button.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 { ActionButton } from './src/ActionButton.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-action-button', ActionButton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-action-button': ActionButton;\n }\n}\n"],
5
+ "mappings": ";AAYA,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAE9B,cAAc,oBAAoB,YAAY;",
6
+ "names": []
7
+ }
package/sp-action-button.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";import{ActionButton as t}from"./src/ActionButton.js";import{defineElement as o}from"@spectrum-web-components/base/src/define-element.js";o("sp-action-button",t);
2
+ //# sourceMappingURL=sp-action-button.js.map
package/sp-action-button.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["sp-action-button.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 { ActionButton } from './src/ActionButton.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-action-button', ActionButton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-action-button': ActionButton;\n }\n}\n"],
5
+ "mappings": "aAYA,OAAS,gBAAAA,MAAoB,wBAC7B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,mBAAoBD,CAAY",
6
+ "names": ["ActionButton", "defineElement"]
7
+ }