@ebay/skin 16.0.0-2 → 16.0.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.
@@ -22,25 +22,79 @@ export const base = () => /* HTML */ `
22
22
  <tbody>
23
23
  <tr>
24
24
  <td colspan="4"></td>
25
- <td><span class="calendar__cell--disabled">1</span></td>
26
- <td><span class="calendar__cell--disabled">2</span></td>
27
- <td><span class="calendar__cell--disabled">3</span></td>
25
+ <td>
26
+ <span class="calendar__cell--disabled"
27
+ >1<span class="clipped"> - inactive</span></span
28
+ >
29
+ </td>
30
+ <td>
31
+ <span class="calendar__cell--disabled"
32
+ >2<span class="clipped"> - inactive</span></span
33
+ >
34
+ </td>
35
+ <td>
36
+ <span class="calendar__cell--disabled"
37
+ >3<span class="clipped"> - inactive</span></span
38
+ >
39
+ </td>
28
40
  </tr>
29
41
  <tr>
30
- <td><span class="calendar__cell--disabled">4</span></td>
31
- <td><span class="calendar__cell--disabled">5</span></td>
32
- <td><span class="calendar__cell--disabled">6</span></td>
33
- <td><span class="calendar__cell--disabled">7</span></td>
34
- <td><span class="calendar__cell--disabled">8</span></td>
35
- <td><span class="calendar__cell--disabled">9</span></td>
36
- <td><span class="calendar__cell--disabled">10</span></td>
42
+ <td>
43
+ <span class="calendar__cell--disabled"
44
+ >4<span class="clipped"> - inactive</span></span
45
+ >
46
+ </td>
47
+ <td>
48
+ <span class="calendar__cell--disabled"
49
+ >5<span class="clipped"> - inactive</span></span
50
+ >
51
+ </td>
52
+ <td>
53
+ <span class="calendar__cell--disabled"
54
+ >6<span class="clipped"> - inactive</span></span
55
+ >
56
+ </td>
57
+ <td>
58
+ <span class="calendar__cell--disabled"
59
+ >7<span class="clipped"> - inactive</span></span
60
+ >
61
+ </td>
62
+ <td>
63
+ <span class="calendar__cell--disabled"
64
+ >8<span class="clipped"> - inactive</span></span
65
+ >
66
+ </td>
67
+ <td>
68
+ <span class="calendar__cell--disabled"
69
+ >9<span class="clipped"> - inactive</span></span
70
+ >
71
+ </td>
72
+ <td>
73
+ <span class="calendar__cell--disabled"
74
+ >10<span class="clipped"> - inactive</span></span
75
+ >
76
+ </td>
37
77
  </tr>
38
78
  <tr>
39
- <td><span class="calendar__cell--disabled">11</span></td>
40
- <td><span class="calendar__cell--disabled">12</span></td>
41
- <td><span class="calendar__cell--disabled">13</span></td>
42
- <td aria-current="date">
43
- <span>14</span>
79
+ <td>
80
+ <span class="calendar__cell--disabled"
81
+ >11<span class="clipped"> - inactive</span></span
82
+ >
83
+ </td>
84
+ <td>
85
+ <span class="calendar__cell--disabled"
86
+ >12<span class="clipped"> - inactive</span></span
87
+ >
88
+ </td>
89
+ <td>
90
+ <span class="calendar__cell--disabled"
91
+ >13<span class="clipped"> - inactive</span></span
92
+ >
93
+ </td>
94
+ <td>
95
+ <span class="calendar__cell--current"
96
+ >14<span class="clipped"> - today</span></span
97
+ >
44
98
  </td>
45
99
  <td><span>15</span></td>
46
100
  <td><span>16</span></td>
@@ -52,22 +106,32 @@ export const base = () => /* HTML */ `
52
106
  <td><span>20</span></td>
53
107
  <td><span>21</span></td>
54
108
  <td><span>22</span></td>
55
- <td class="calendar__range calendar__range--start" aria-selected="true">
56
- <span aria-label="23 - start of range">23</span>
109
+ <td
110
+ class="calendar__cell--selected calendar__range calendar__range--start"
111
+ >
112
+ <span
113
+ >23<span class="clipped">
114
+ - selected - start of range</span
115
+ ></span
116
+ >
57
117
  </td>
58
118
  <td class="calendar__range">
59
- <span aria-label="24 - in range">24</span>
119
+ <span>24<span class="clipped"> - in range</span></span>
60
120
  </td>
61
121
  </tr>
62
122
  <tr>
63
123
  <td class="calendar__range">
64
- <span aria-label="25 - in range">25</span>
124
+ <span>25<span class="clipped"> - in range</span></span>
65
125
  </td>
66
126
  <td class="calendar__range">
67
- <span aria-label="26 - in range">26</span>
127
+ <span>26<span class="clipped"> - in range</span></span>
68
128
  </td>
69
- <td class="calendar__range calendar__range--end" aria-selected="true">
70
- <span aria-label="27 - end of range">27</span>
129
+ <td
130
+ class="calendar__cell--selected calendar__range calendar__range--end"
131
+ >
132
+ <span
133
+ >27<span class="clipped"> - selected - end of range</span></span
134
+ >
71
135
  </td>
72
136
  <td><span>28</span></td>
73
137
  <td><span>29</span></td>
@@ -120,8 +184,8 @@ export const interactive = () => /* HTML */ `
120
184
  <td><button tabindex="-1" disabled>11</button></td>
121
185
  <td><button tabindex="-1" disabled>12</button></td>
122
186
  <td><button tabindex="-1" disabled>13</button></td>
123
- <td aria-current="date">
124
- <button>14</button>
187
+ <td>
188
+ <button aria-current="date">14</button>
125
189
  </td>
126
190
  <td><button tabindex="-1">15</button></td>
127
191
  <td><button tabindex="-1">16</button></td>
@@ -133,8 +197,12 @@ export const interactive = () => /* HTML */ `
133
197
  <td><button tabindex="-1">20</button></td>
134
198
  <td><button tabindex="-1">21</button></td>
135
199
  <td><button tabindex="-1">22</button></td>
136
- <td class="calendar__range calendar__range--start" aria-selected="true">
137
- <button tabindex="-1" aria-label="23 - start of range">23</button>
200
+ <td
201
+ class="calendar__cell--selected calendar__range calendar__range--start"
202
+ >
203
+ <button tabindex="-1" aria-label="23 - selected - start of range">
204
+ 23
205
+ </button>
138
206
  </td>
139
207
  <td class="calendar__range">
140
208
  <button tabindex="-1" aria-label="24 - in range">24</button>
@@ -147,8 +215,12 @@ export const interactive = () => /* HTML */ `
147
215
  <td class="calendar__range">
148
216
  <button tabindex="-1" aria-label="26 - in range">26</button>
149
217
  </td>
150
- <td class="calendar__range calendar__range--end" aria-selected="true">
151
- <button tabindex="-1" aria-label="27 - end of range">27</button>
218
+ <td
219
+ class="calendar__cell--selected calendar__range calendar__range--end"
220
+ >
221
+ <button tabindex="-1" aria-label="27 - selected - end of range">
222
+ 27
223
+ </button>
152
224
  </td>
153
225
  <td><button tabindex="-1">28</button></td>
154
226
  <td><button tabindex="-1">29</button></td>
@@ -207,25 +279,79 @@ export const header = () => /* HTML */ `
207
279
  <tbody>
208
280
  <tr>
209
281
  <td colspan="4"></td>
210
- <td><span class="calendar__cell--disabled">1</span></td>
211
- <td><span class="calendar__cell--disabled">2</span></td>
212
- <td><span class="calendar__cell--disabled">3</span></td>
282
+ <td>
283
+ <span class="calendar__cell--disabled"
284
+ >1<span class="clipped"> - inactive</span></span
285
+ >
286
+ </td>
287
+ <td>
288
+ <span class="calendar__cell--disabled"
289
+ >2<span class="clipped"> - inactive</span></span
290
+ >
291
+ </td>
292
+ <td>
293
+ <span class="calendar__cell--disabled"
294
+ >3<span class="clipped"> - inactive</span></span
295
+ >
296
+ </td>
213
297
  </tr>
214
298
  <tr>
215
- <td><span class="calendar__cell--disabled">4</span></td>
216
- <td><span class="calendar__cell--disabled">5</span></td>
217
- <td><span class="calendar__cell--disabled">6</span></td>
218
- <td><span class="calendar__cell--disabled">7</span></td>
219
- <td><span class="calendar__cell--disabled">8</span></td>
220
- <td><span class="calendar__cell--disabled">9</span></td>
221
- <td><span class="calendar__cell--disabled">10</span></td>
299
+ <td>
300
+ <span class="calendar__cell--disabled"
301
+ >4<span class="clipped"> - inactive</span></span
302
+ >
303
+ </td>
304
+ <td>
305
+ <span class="calendar__cell--disabled"
306
+ >5<span class="clipped"> - inactive</span></span
307
+ >
308
+ </td>
309
+ <td>
310
+ <span class="calendar__cell--disabled"
311
+ >6<span class="clipped"> - inactive</span></span
312
+ >
313
+ </td>
314
+ <td>
315
+ <span class="calendar__cell--disabled"
316
+ >7<span class="clipped"> - inactive</span></span
317
+ >
318
+ </td>
319
+ <td>
320
+ <span class="calendar__cell--disabled"
321
+ >8<span class="clipped"> - inactive</span></span
322
+ >
323
+ </td>
324
+ <td>
325
+ <span class="calendar__cell--disabled"
326
+ >9<span class="clipped"> - inactive</span></span
327
+ >
328
+ </td>
329
+ <td>
330
+ <span class="calendar__cell--disabled"
331
+ >10<span class="clipped"> - inactive</span></span
332
+ >
333
+ </td>
222
334
  </tr>
223
335
  <tr>
224
- <td><span class="calendar__cell--disabled">11</span></td>
225
- <td><span class="calendar__cell--disabled">12</span></td>
226
- <td><span class="calendar__cell--disabled">13</span></td>
227
- <td aria-current="date">
228
- <span>14</span>
336
+ <td>
337
+ <span class="calendar__cell--disabled"
338
+ >11<span class="clipped"> - inactive</span></span
339
+ >
340
+ </td>
341
+ <td>
342
+ <span class="calendar__cell--disabled"
343
+ >12<span class="clipped"> - inactive</span></span
344
+ >
345
+ </td>
346
+ <td>
347
+ <span class="calendar__cell--disabled"
348
+ >13<span class="clipped"> - inactive</span></span
349
+ >
350
+ </td>
351
+ <td>
352
+ <span class="calendar__cell--current"
353
+ >14<span class="clipped"> - today</span></span
354
+ >
229
355
  </td>
230
356
  <td><span>15</span></td>
231
357
  <td><span>16</span></td>
@@ -237,22 +363,32 @@ export const header = () => /* HTML */ `
237
363
  <td><span>20</span></td>
238
364
  <td><span>21</span></td>
239
365
  <td><span>22</span></td>
240
- <td class="calendar__range calendar__range--start" aria-selected="true">
241
- <span aria-label="23 - start of range">23</span>
366
+ <td
367
+ class="calendar__cell--selected calendar__range calendar__range--start"
368
+ >
369
+ <span
370
+ >23<span class="clipped">
371
+ - selected - start of range</span
372
+ ></span
373
+ >
242
374
  </td>
243
375
  <td class="calendar__range">
244
- <span aria-label="24 - in range">24</span>
376
+ <span>24<span class="clipped"> - in range</span></span>
245
377
  </td>
246
378
  </tr>
247
379
  <tr>
248
380
  <td class="calendar__range">
249
- <span aria-label="25 - in range">25</span>
381
+ <span>25<span class="clipped"> - in range</span></span>
250
382
  </td>
251
383
  <td class="calendar__range">
252
- <span aria-label="26 - in range">26</span>
384
+ <span>26<span class="clipped"> - in range</span></span>
253
385
  </td>
254
- <td class="calendar__range calendar__range--end" aria-selected="true">
255
- <span aria-label="27 - end of range">27</span>
386
+ <td
387
+ class="calendar__cell--selected calendar__range calendar__range--end"
388
+ >
389
+ <span
390
+ >27<span class="clipped"> - selected - end of range</span></span
391
+ >
256
392
  </td>
257
393
  <td><span>28</span></td>
258
394
  <td><span>29</span></td>
@@ -288,25 +424,79 @@ export const double = () => /* HTML */ `
288
424
  <tbody>
289
425
  <tr>
290
426
  <td colspan="4"></td>
291
- <td><span class="calendar__cell--disabled">1</span></td>
292
- <td><span class="calendar__cell--disabled">2</span></td>
293
- <td><span class="calendar__cell--disabled">3</span></td>
427
+ <td>
428
+ <span class="calendar__cell--disabled"
429
+ >1<span class="clipped"> - inactive</span></span
430
+ >
431
+ </td>
432
+ <td>
433
+ <span class="calendar__cell--disabled"
434
+ >2<span class="clipped"> - inactive</span></span
435
+ >
436
+ </td>
437
+ <td>
438
+ <span class="calendar__cell--disabled"
439
+ >3<span class="clipped"> - inactive</span></span
440
+ >
441
+ </td>
294
442
  </tr>
295
443
  <tr>
296
- <td><span class="calendar__cell--disabled">4</span></td>
297
- <td><span class="calendar__cell--disabled">5</span></td>
298
- <td><span class="calendar__cell--disabled">6</span></td>
299
- <td><span class="calendar__cell--disabled">7</span></td>
300
- <td><span class="calendar__cell--disabled">8</span></td>
301
- <td><span class="calendar__cell--disabled">9</span></td>
302
- <td><span class="calendar__cell--disabled">10</span></td>
444
+ <td>
445
+ <span class="calendar__cell--disabled"
446
+ >4<span class="clipped"> - inactive</span></span
447
+ >
448
+ </td>
449
+ <td>
450
+ <span class="calendar__cell--disabled"
451
+ >5<span class="clipped"> - inactive</span></span
452
+ >
453
+ </td>
454
+ <td>
455
+ <span class="calendar__cell--disabled"
456
+ >6<span class="clipped"> - inactive</span></span
457
+ >
458
+ </td>
459
+ <td>
460
+ <span class="calendar__cell--disabled"
461
+ >7<span class="clipped"> - inactive</span></span
462
+ >
463
+ </td>
464
+ <td>
465
+ <span class="calendar__cell--disabled"
466
+ >8<span class="clipped"> - inactive</span></span
467
+ >
468
+ </td>
469
+ <td>
470
+ <span class="calendar__cell--disabled"
471
+ >9<span class="clipped"> - inactive</span></span
472
+ >
473
+ </td>
474
+ <td>
475
+ <span class="calendar__cell--disabled"
476
+ >10<span class="clipped"> - inactive</span></span
477
+ >
478
+ </td>
303
479
  </tr>
304
480
  <tr>
305
- <td><span class="calendar__cell--disabled">11</span></td>
306
- <td><span class="calendar__cell--disabled">12</span></td>
307
- <td><span class="calendar__cell--disabled">13</span></td>
308
- <td aria-current="date">
309
- <span>14</span>
481
+ <td>
482
+ <span class="calendar__cell--disabled"
483
+ >11<span class="clipped"> - inactive</span></span
484
+ >
485
+ </td>
486
+ <td>
487
+ <span class="calendar__cell--disabled"
488
+ >12<span class="clipped"> - inactive</span></span
489
+ >
490
+ </td>
491
+ <td>
492
+ <span class="calendar__cell--disabled"
493
+ >13<span class="clipped"> - inactive</span></span
494
+ >
495
+ </td>
496
+ <td>
497
+ <span class="calendar__cell--current"
498
+ >14<span class="clipped"> - today</span></span
499
+ >
310
500
  </td>
311
501
  <td><span>15</span></td>
312
502
  <td><span>16</span></td>
@@ -370,37 +560,47 @@ export const double = () => /* HTML */ `
370
560
  </tr>
371
561
  <tr>
372
562
  <td><span>15</span></td>
373
- <td class="calendar__range calendar__range--start" aria-selected="true">
374
- <span aria-label="16 - start of range">16</span>
563
+ <td
564
+ class="calendar__cell--selected calendar__range calendar__range--start"
565
+ >
566
+ <span
567
+ >16<span class="clipped">
568
+ - selected - start of range</span
569
+ ></span
570
+ >
375
571
  </td>
376
572
  <td class="calendar__range">
377
- <span aria-label="17 - in range">17</span>
573
+ <span>17<span class="clipped"> - in range</span></span>
378
574
  </td>
379
575
  <td class="calendar__range">
380
- <span aria-label="18 - in range">18</span>
576
+ <span>18<span class="clipped"> - in range</span></span>
381
577
  </td>
382
578
  <td class="calendar__range">
383
- <span aria-label="19 - in range">19</span>
579
+ <span>19<span class="clipped"> - in range</span></span>
384
580
  </td>
385
581
  <td class="calendar__range">
386
- <span aria-label="20 - in range">20</span>
582
+ <span>20<span class="clipped"> - in range</span></span>
387
583
  </td>
388
584
  <td class="calendar__range">
389
- <span aria-label="21 - in range">21</span>
585
+ <span>21<span class="clipped"> - in range</span></span>
390
586
  </td>
391
587
  </tr>
392
588
  <tr>
393
589
  <td class="calendar__range">
394
- <span aria-label="22 - in range">22</span>
590
+ <span>22<span class="clipped"> - in range</span></span>
395
591
  </td>
396
592
  <td class="calendar__range">
397
- <span aria-label="23 - in range">23</span>
593
+ <span>23<span class="clipped"> - in range</span></span>
398
594
  </td>
399
595
  <td class="calendar__range">
400
- <span aria-label="24 - in range">24</span>
596
+ <span>24<span class="clipped"> - in range</span></span>
401
597
  </td>
402
- <td class="calendar__range calendar__range--end" aria-selected="true">
403
- <span aria-label="25 - end of range">25</span>
598
+ <td
599
+ class="calendar__cell--selected calendar__range calendar__range--end"
600
+ >
601
+ <span
602
+ >25<span class="clipped"> - selected - end of range</span></span
603
+ >
404
604
  </td>
405
605
  <td><span>26</span></td>
406
606
  <td><span>27</span></td>
@@ -463,25 +663,79 @@ export const doubleWithHeader = () => /* HTML */ `
463
663
  <tbody>
464
664
  <tr>
465
665
  <td colspan="4"></td>
466
- <td><span class="calendar__cell--disabled">1</span></td>
467
- <td><span class="calendar__cell--disabled">2</span></td>
468
- <td><span class="calendar__cell--disabled">3</span></td>
666
+ <td>
667
+ <span class="calendar__cell--disabled"
668
+ >1<span class="clipped"> - inactive</span></span
669
+ >
670
+ </td>
671
+ <td>
672
+ <span class="calendar__cell--disabled"
673
+ >2<span class="clipped"> - inactive</span></span
674
+ >
675
+ </td>
676
+ <td>
677
+ <span class="calendar__cell--disabled"
678
+ >3<span class="clipped"> - inactive</span></span
679
+ >
680
+ </td>
469
681
  </tr>
470
682
  <tr>
471
- <td><span class="calendar__cell--disabled">4</span></td>
472
- <td><span class="calendar__cell--disabled">5</span></td>
473
- <td><span class="calendar__cell--disabled">6</span></td>
474
- <td><span class="calendar__cell--disabled">7</span></td>
475
- <td><span class="calendar__cell--disabled">8</span></td>
476
- <td><span class="calendar__cell--disabled">9</span></td>
477
- <td><span class="calendar__cell--disabled">10</span></td>
683
+ <td>
684
+ <span class="calendar__cell--disabled"
685
+ >4<span class="clipped"> - inactive</span></span
686
+ >
687
+ </td>
688
+ <td>
689
+ <span class="calendar__cell--disabled"
690
+ >5<span class="clipped"> - inactive</span></span
691
+ >
692
+ </td>
693
+ <td>
694
+ <span class="calendar__cell--disabled"
695
+ >6<span class="clipped"> - inactive</span></span
696
+ >
697
+ </td>
698
+ <td>
699
+ <span class="calendar__cell--disabled"
700
+ >7<span class="clipped"> - inactive</span></span
701
+ >
702
+ </td>
703
+ <td>
704
+ <span class="calendar__cell--disabled"
705
+ >8<span class="clipped"> - inactive</span></span
706
+ >
707
+ </td>
708
+ <td>
709
+ <span class="calendar__cell--disabled"
710
+ >9<span class="clipped"> - inactive</span></span
711
+ >
712
+ </td>
713
+ <td>
714
+ <span class="calendar__cell--disabled"
715
+ >10<span class="clipped"> - inactive</span></span
716
+ >
717
+ </td>
478
718
  </tr>
479
719
  <tr>
480
- <td><span class="calendar__cell--disabled">11</span></td>
481
- <td><span class="calendar__cell--disabled">12</span></td>
482
- <td><span class="calendar__cell--disabled">13</span></td>
483
- <td aria-current="date">
484
- <span>14</span>
720
+ <td>
721
+ <span class="calendar__cell--disabled"
722
+ >11<span class="clipped"> - inactive</span></span
723
+ >
724
+ </td>
725
+ <td>
726
+ <span class="calendar__cell--disabled"
727
+ >12<span class="clipped"> - inactive</span></span
728
+ >
729
+ </td>
730
+ <td>
731
+ <span class="calendar__cell--disabled"
732
+ >13<span class="clipped"> - inactive</span></span
733
+ >
734
+ </td>
735
+ <td>
736
+ <span class="calendar__cell--current"
737
+ >14<span class="clipped"> - today</span></span
738
+ >
485
739
  </td>
486
740
  <td><span>15</span></td>
487
741
  <td><span>16</span></td>
@@ -545,37 +799,47 @@ export const doubleWithHeader = () => /* HTML */ `
545
799
  </tr>
546
800
  <tr>
547
801
  <td><span>15</span></td>
548
- <td class="calendar__range calendar__range--start" aria-selected="true">
549
- <span aria-label="16 - start of range">16</span>
802
+ <td
803
+ class="calendar__cell--selected calendar__range calendar__range--start"
804
+ >
805
+ <span
806
+ >16<span class="clipped">
807
+ - selected - start of range</span
808
+ ></span
809
+ >
550
810
  </td>
551
811
  <td class="calendar__range">
552
- <span aria-label="17 - in range">17</span>
812
+ <span>17<span class="clipped"> - in range</span></span>
553
813
  </td>
554
814
  <td class="calendar__range">
555
- <span aria-label="18 - in range">18</span>
815
+ <span>18<span class="clipped"> - in range</span></span>
556
816
  </td>
557
817
  <td class="calendar__range">
558
- <span aria-label="19 - in range">19</span>
818
+ <span>19<span class="clipped"> - in range</span></span>
559
819
  </td>
560
820
  <td class="calendar__range">
561
- <span aria-label="20 - in range">20</span>
821
+ <span>20<span class="clipped"> - in range</span></span>
562
822
  </td>
563
823
  <td class="calendar__range">
564
- <span aria-label="21 - in range">21</span>
824
+ <span>21<span class="clipped"> - in range</span></span>
565
825
  </td>
566
826
  </tr>
567
827
  <tr>
568
828
  <td class="calendar__range">
569
- <span aria-label="22 - in range">22</span>
829
+ <span>22<span class="clipped"> - in range</span></span>
570
830
  </td>
571
831
  <td class="calendar__range">
572
- <span aria-label="23 - in range">23</span>
832
+ <span>23<span class="clipped"> - in range</span></span>
573
833
  </td>
574
834
  <td class="calendar__range">
575
- <span aria-label="24 - in range">24</span>
576
- </td>
577
- <td class="calendar__range calendar__range--end" aria-selected="true">
578
- <span aria-label="25 - end of range">25</span>
835
+ <span>24<span class="clipped"> - in range</span></span>
836
+ </td>
837
+ <td
838
+ class="calendar__cell--selected calendar__range calendar__range--end"
839
+ >
840
+ <span
841
+ >25<span class="clipped"> - selected - end of range</span></span
842
+ >
579
843
  </td>
580
844
  <td><span>26</span></td>
581
845
  <td><span>27</span></td>