@spectrum-web-components/tabs 0.30.0 → 0.30.1-overlay.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +7 -7
  2. package/custom-elements.json +0 -863
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tabs",
3
- "version": "0.30.0",
3
+ "version": "0.30.1-overlay.30+1df211c75",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -86,11 +86,11 @@
86
86
  ],
87
87
  "dependencies": {
88
88
  "@lit-labs/observers": "^2.0.0",
89
- "@spectrum-web-components/base": "^0.30.0",
90
- "@spectrum-web-components/icon": "^0.30.0",
91
- "@spectrum-web-components/icons-ui": "^0.30.0",
92
- "@spectrum-web-components/reactive-controllers": "^0.30.0",
93
- "@spectrum-web-components/shared": "^0.30.0"
89
+ "@spectrum-web-components/base": "^0.30.1-overlay.30+1df211c75",
90
+ "@spectrum-web-components/icon": "^0.30.1-overlay.30+1df211c75",
91
+ "@spectrum-web-components/icons-ui": "^0.30.1-overlay.30+1df211c75",
92
+ "@spectrum-web-components/reactive-controllers": "^0.30.1-overlay.30+1df211c75",
93
+ "@spectrum-web-components/shared": "^0.30.1-overlay.30+1df211c75"
94
94
  },
95
95
  "devDependencies": {
96
96
  "@spectrum-css/tabs": "^3.2.43"
@@ -101,5 +101,5 @@
101
101
  "./sp-*.js",
102
102
  "./**/*.dev.js"
103
103
  ],
104
- "gitHead": "e34a26bf2bbea5f60a5e415e0f12c97654f0e20d"
104
+ "gitHead": "1df211c7581b6fd6ec624cf2b09bc81aeec29c26"
105
105
  }
package/custom-elements.json DELETED
@@ -1,863 +0,0 @@
1
- {
2
- "schemaVersion": "1.0.0",
3
- "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "sp-tab-panel.js",
8
- "declarations": [],
9
- "exports": []
10
- },
11
- {
12
- "kind": "javascript-module",
13
- "path": "sp-tab.js",
14
- "declarations": [],
15
- "exports": []
16
- },
17
- {
18
- "kind": "javascript-module",
19
- "path": "sp-tabs-overflow.js",
20
- "declarations": [],
21
- "exports": []
22
- },
23
- {
24
- "kind": "javascript-module",
25
- "path": "sp-tabs.js",
26
- "declarations": [],
27
- "exports": []
28
- },
29
- {
30
- "kind": "javascript-module",
31
- "path": "src/Tab.js",
32
- "declarations": [
33
- {
34
- "kind": "class",
35
- "description": "",
36
- "name": "Tab",
37
- "slots": [
38
- {
39
- "description": "text label of the Tab",
40
- "name": ""
41
- },
42
- {
43
- "description": "The icon that appears on the left of the label",
44
- "name": "icon"
45
- }
46
- ],
47
- "members": [
48
- {
49
- "kind": "field",
50
- "name": "instanceCount",
51
- "type": {
52
- "text": "number"
53
- },
54
- "static": true,
55
- "default": "0",
56
- "privacy": "private"
57
- },
58
- {
59
- "kind": "field",
60
- "name": "hasIcon",
61
- "type": {
62
- "text": "boolean"
63
- },
64
- "privacy": "protected"
65
- },
66
- {
67
- "kind": "field",
68
- "name": "hasLabel",
69
- "type": {
70
- "text": "boolean"
71
- },
72
- "privacy": "protected"
73
- },
74
- {
75
- "kind": "field",
76
- "name": "disabled",
77
- "type": {
78
- "text": "boolean"
79
- },
80
- "privacy": "public",
81
- "default": "false",
82
- "attribute": "disabled",
83
- "reflects": true
84
- },
85
- {
86
- "kind": "field",
87
- "name": "label",
88
- "type": {
89
- "text": "string"
90
- },
91
- "privacy": "public",
92
- "default": "''",
93
- "attribute": "label",
94
- "reflects": true
95
- },
96
- {
97
- "kind": "field",
98
- "name": "selected",
99
- "type": {
100
- "text": "boolean"
101
- },
102
- "privacy": "public",
103
- "default": "false",
104
- "attribute": "selected",
105
- "reflects": true
106
- },
107
- {
108
- "kind": "field",
109
- "name": "vertical",
110
- "type": {
111
- "text": "boolean"
112
- },
113
- "privacy": "public",
114
- "default": "false",
115
- "attribute": "vertical",
116
- "reflects": true
117
- },
118
- {
119
- "kind": "field",
120
- "name": "value",
121
- "type": {
122
- "text": "string"
123
- },
124
- "privacy": "public",
125
- "default": "''",
126
- "attribute": "value",
127
- "reflects": true
128
- }
129
- ],
130
- "attributes": [
131
- {
132
- "name": "disabled",
133
- "type": {
134
- "text": "boolean"
135
- },
136
- "default": "false",
137
- "fieldName": "disabled"
138
- },
139
- {
140
- "name": "label",
141
- "type": {
142
- "text": "string"
143
- },
144
- "default": "''",
145
- "fieldName": "label"
146
- },
147
- {
148
- "name": "selected",
149
- "type": {
150
- "text": "boolean"
151
- },
152
- "default": "false",
153
- "fieldName": "selected"
154
- },
155
- {
156
- "name": "vertical",
157
- "type": {
158
- "text": "boolean"
159
- },
160
- "default": "false",
161
- "fieldName": "vertical"
162
- },
163
- {
164
- "name": "value",
165
- "type": {
166
- "text": "string"
167
- },
168
- "default": "''",
169
- "fieldName": "value"
170
- }
171
- ],
172
- "mixins": [
173
- {
174
- "name": "FocusVisiblePolyfillMixin",
175
- "package": "@spectrum-web-components/shared"
176
- },
177
- {
178
- "name": "ObserveSlotText",
179
- "package": "@spectrum-web-components/shared"
180
- },
181
- {
182
- "name": "ObserveSlotPresence",
183
- "package": "@spectrum-web-components/shared"
184
- }
185
- ],
186
- "superclass": {
187
- "name": "SpectrumElement",
188
- "package": "@spectrum-web-components/base"
189
- },
190
- "tagName": "sp-tab",
191
- "customElement": true
192
- }
193
- ],
194
- "exports": [
195
- {
196
- "kind": "js",
197
- "name": "Tab",
198
- "declaration": {
199
- "name": "Tab",
200
- "module": "src/Tab.js"
201
- }
202
- }
203
- ]
204
- },
205
- {
206
- "kind": "javascript-module",
207
- "path": "src/TabPanel.js",
208
- "declarations": [
209
- {
210
- "kind": "class",
211
- "description": "",
212
- "name": "TabPanel",
213
- "slots": [
214
- {
215
- "description": "content of the Tab Panel",
216
- "name": ""
217
- }
218
- ],
219
- "members": [
220
- {
221
- "kind": "field",
222
- "name": "instanceCount",
223
- "type": {
224
- "text": "number"
225
- },
226
- "static": true,
227
- "default": "0",
228
- "privacy": "private"
229
- },
230
- {
231
- "kind": "field",
232
- "name": "selected",
233
- "type": {
234
- "text": "boolean"
235
- },
236
- "privacy": "public",
237
- "default": "false",
238
- "attribute": "selected",
239
- "reflects": true
240
- },
241
- {
242
- "kind": "field",
243
- "name": "value",
244
- "type": {
245
- "text": "string"
246
- },
247
- "privacy": "public",
248
- "default": "''",
249
- "attribute": "value",
250
- "reflects": true
251
- }
252
- ],
253
- "attributes": [
254
- {
255
- "name": "selected",
256
- "type": {
257
- "text": "boolean"
258
- },
259
- "default": "false",
260
- "fieldName": "selected"
261
- },
262
- {
263
- "name": "value",
264
- "type": {
265
- "text": "string"
266
- },
267
- "default": "''",
268
- "fieldName": "value"
269
- }
270
- ],
271
- "superclass": {
272
- "name": "SpectrumElement",
273
- "package": "@spectrum-web-components/base"
274
- },
275
- "tagName": "sp-tab-panel",
276
- "customElement": true
277
- }
278
- ],
279
- "exports": [
280
- {
281
- "kind": "js",
282
- "name": "TabPanel",
283
- "declaration": {
284
- "name": "TabPanel",
285
- "module": "src/TabPanel.js"
286
- }
287
- }
288
- ]
289
- },
290
- {
291
- "kind": "javascript-module",
292
- "path": "src/Tabs.js",
293
- "declarations": [
294
- {
295
- "kind": "variable",
296
- "name": "ScaledIndicator",
297
- "type": {
298
- "text": "object"
299
- },
300
- "default": "{\n baseSize: 100 as const,\n noSelectionStyle: 'transform: translateX(0px) scaleX(0) scaleY(0)',\n\n transformX(left: number, width: number): string {\n const scale = width / this.baseSize;\n return `transform: translateX(${left}px) scaleX(${scale});`;\n },\n\n transformY(top: number, height: number): string {\n const scale = height / this.baseSize;\n return `transform: translateY(${top}px) scaleY(${scale});`;\n },\n\n baseStyles(): CSSResult {\n return css`\n :host([direction='vertical-right']) #selection-indicator,\n :host([direction='vertical']) #selection-indicator {\n height: ${this.baseSize}px;\n }\n :host([dir][direction='horizontal']) #selection-indicator {\n width: ${this.baseSize}px;\n }\n `;\n },\n}"
301
- },
302
- {
303
- "kind": "class",
304
- "description": "",
305
- "name": "Tabs",
306
- "cssParts": [
307
- {
308
- "description": "Container element for the slotted sp-tab elements",
309
- "name": "tablist"
310
- }
311
- ],
312
- "slots": [
313
- {
314
- "description": "Tab elements to manage as a group",
315
- "name": ""
316
- },
317
- {
318
- "description": "Tab Panel elements related to the listed Tab elements",
319
- "name": "tab-panel"
320
- }
321
- ],
322
- "members": [
323
- {
324
- "kind": "field",
325
- "name": "auto",
326
- "type": {
327
- "text": "boolean"
328
- },
329
- "privacy": "public",
330
- "default": "false",
331
- "description": "Whether to activate a tab on keyboard focus or not.\n\nBy default a tab is activated via a \"click\" interaction. This is specifically intended for when\ntab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\nTo learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\nhttps://w3c.github.io/aria-practices/#kbd_selection_follows_focus",
332
- "attribute": "auto"
333
- },
334
- {
335
- "kind": "field",
336
- "name": "compact",
337
- "type": {
338
- "text": "boolean"
339
- },
340
- "privacy": "public",
341
- "default": "false",
342
- "description": "The tab items are displayed closer together.",
343
- "attribute": "compact",
344
- "reflects": true
345
- },
346
- {
347
- "kind": "field",
348
- "name": "dir",
349
- "type": {
350
- "text": "'ltr' | 'rtl'"
351
- },
352
- "privacy": "public",
353
- "attribute": "dir",
354
- "reflects": true
355
- },
356
- {
357
- "kind": "field",
358
- "name": "direction",
359
- "type": {
360
- "text": "'vertical' | 'vertical-right' | 'horizontal'"
361
- },
362
- "privacy": "public",
363
- "default": "'horizontal'",
364
- "attribute": "direction",
365
- "reflects": true
366
- },
367
- {
368
- "kind": "field",
369
- "name": "emphasized",
370
- "type": {
371
- "text": "boolean"
372
- },
373
- "privacy": "public",
374
- "default": "false",
375
- "attribute": "emphasized",
376
- "reflects": true
377
- },
378
- {
379
- "kind": "field",
380
- "name": "label",
381
- "type": {
382
- "text": "string"
383
- },
384
- "privacy": "public",
385
- "default": "''",
386
- "attribute": "label"
387
- },
388
- {
389
- "kind": "field",
390
- "name": "enableTabsScroll",
391
- "type": {
392
- "text": "boolean"
393
- },
394
- "privacy": "public",
395
- "default": "false",
396
- "attribute": "enableTabsScroll"
397
- },
398
- {
399
- "kind": "field",
400
- "name": "quiet",
401
- "type": {
402
- "text": "boolean"
403
- },
404
- "privacy": "public",
405
- "default": "false",
406
- "description": "The tab list is displayed without a border.",
407
- "attribute": "quiet",
408
- "reflects": true
409
- },
410
- {
411
- "kind": "field",
412
- "name": "selectionIndicatorStyle",
413
- "privacy": "public"
414
- },
415
- {
416
- "kind": "field",
417
- "name": "shouldAnimate",
418
- "type": {
419
- "text": "boolean"
420
- },
421
- "privacy": "public",
422
- "default": "false"
423
- },
424
- {
425
- "kind": "field",
426
- "name": "slotEl",
427
- "type": {
428
- "text": "HTMLSlotElement"
429
- },
430
- "privacy": "private"
431
- },
432
- {
433
- "kind": "field",
434
- "name": "tabList",
435
- "type": {
436
- "text": "HTMLDivElement"
437
- },
438
- "privacy": "private"
439
- },
440
- {
441
- "kind": "field",
442
- "name": "selected",
443
- "type": {
444
- "text": "string"
445
- },
446
- "default": "''",
447
- "attribute": "selected",
448
- "reflects": true
449
- },
450
- {
451
- "kind": "field",
452
- "name": "tabs",
453
- "privacy": "private",
454
- "type": {
455
- "text": "Tab[]"
456
- }
457
- },
458
- {
459
- "kind": "field",
460
- "name": "_tabs",
461
- "type": {
462
- "text": "Tab[]"
463
- },
464
- "privacy": "private",
465
- "default": "[]"
466
- },
467
- {
468
- "kind": "field",
469
- "name": "resizeController",
470
- "privacy": "protected",
471
- "default": "new ResizeController(this, {\n callback: () => {\n this.updateSelectionIndicator();\n },\n })"
472
- },
473
- {
474
- "kind": "field",
475
- "name": "rovingTabindexController",
476
- "default": "new RovingTabindexController<Tab>(this, {\n focusInIndex: (elements) => {\n let focusInIndex = 0;\n const firstFocusableElement = elements.find((el, index) => {\n const focusInElement = this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n focusInIndex = index;\n return focusInElement;\n });\n return firstFocusableElement ? focusInIndex : -1;\n },\n direction: () =>\n this.direction === 'horizontal' ? 'horizontal' : 'vertical',\n elementEnterAction: (el) => {\n if (!this.auto) return;\n\n this.shouldAnimate = true;\n this.selectTarget(el);\n },\n elements: () => this.tabs,\n isFocusableElement: (el) => !el.disabled,\n listenerScope: () => this.tabList,\n })"
477
- },
478
- {
479
- "kind": "field",
480
- "name": "focusElement",
481
- "type": {
482
- "text": "Tab | this"
483
- },
484
- "privacy": "private"
485
- },
486
- {
487
- "kind": "method",
488
- "name": "scrollTabs",
489
- "privacy": "public",
490
- "return": {
491
- "type": {
492
- "text": "void"
493
- }
494
- },
495
- "parameters": [
496
- {
497
- "name": "delta",
498
- "type": {
499
- "text": "number"
500
- }
501
- },
502
- {
503
- "name": "behavior",
504
- "default": "'smooth'",
505
- "type": {
506
- "text": "ScrollBehavior"
507
- }
508
- }
509
- ]
510
- },
511
- {
512
- "kind": "field",
513
- "name": "scrollState",
514
- "type": {
515
- "text": "Record<string, boolean>"
516
- },
517
- "privacy": "public"
518
- },
519
- {
520
- "kind": "method",
521
- "name": "manageAutoFocus",
522
- "privacy": "protected",
523
- "return": {
524
- "type": {
525
- "text": "void"
526
- }
527
- }
528
- },
529
- {
530
- "kind": "method",
531
- "name": "managePanels",
532
- "privacy": "protected",
533
- "return": {
534
- "type": {
535
- "text": "void"
536
- }
537
- },
538
- "parameters": [
539
- {
540
- "name": "{\n target,\n }",
541
- "type": {
542
- "text": "Event & { target: HTMLSlotElement }"
543
- }
544
- }
545
- ]
546
- },
547
- {
548
- "kind": "field",
549
- "name": "onTabsScroll",
550
- "privacy": "private"
551
- },
552
- {
553
- "kind": "field",
554
- "name": "onClick",
555
- "privacy": "private"
556
- },
557
- {
558
- "kind": "field",
559
- "name": "onKeyDown",
560
- "privacy": "private"
561
- },
562
- {
563
- "kind": "method",
564
- "name": "selectTarget",
565
- "privacy": "private",
566
- "return": {
567
- "type": {
568
- "text": "void"
569
- }
570
- },
571
- "parameters": [
572
- {
573
- "name": "target",
574
- "type": {
575
- "text": "HTMLElement"
576
- }
577
- }
578
- ]
579
- },
580
- {
581
- "kind": "method",
582
- "name": "onSlotChange",
583
- "privacy": "private",
584
- "return": {
585
- "type": {
586
- "text": "void"
587
- }
588
- }
589
- },
590
- {
591
- "kind": "field",
592
- "name": "updateCheckedState",
593
- "privacy": "private"
594
- },
595
- {
596
- "kind": "field",
597
- "name": "updateSelectionIndicator",
598
- "privacy": "private"
599
- }
600
- ],
601
- "events": [
602
- {
603
- "name": "change",
604
- "type": {
605
- "text": "Event"
606
- },
607
- "description": "The selected Tab child has changed."
608
- }
609
- ],
610
- "attributes": [
611
- {
612
- "name": "auto",
613
- "type": {
614
- "text": "boolean"
615
- },
616
- "default": "false",
617
- "description": "Whether to activate a tab on keyboard focus or not.\n\nBy default a tab is activated via a \"click\" interaction. This is specifically intended for when\ntab content cannot be displayed instantly, e.g. not all of the DOM content is available, etc.\nTo learn more about \"Deciding When to Make Selection Automatically Follow Focus\", visit:\nhttps://w3c.github.io/aria-practices/#kbd_selection_follows_focus",
618
- "fieldName": "auto"
619
- },
620
- {
621
- "name": "compact",
622
- "type": {
623
- "text": "boolean"
624
- },
625
- "default": "false",
626
- "description": "The tab items are displayed closer together.",
627
- "fieldName": "compact"
628
- },
629
- {
630
- "name": "dir",
631
- "type": {
632
- "text": "'ltr' | 'rtl'"
633
- },
634
- "fieldName": "dir"
635
- },
636
- {
637
- "name": "direction",
638
- "type": {
639
- "text": "'vertical' | 'vertical-right' | 'horizontal'"
640
- },
641
- "default": "'horizontal'",
642
- "fieldName": "direction"
643
- },
644
- {
645
- "name": "emphasized",
646
- "type": {
647
- "text": "boolean"
648
- },
649
- "default": "false",
650
- "fieldName": "emphasized"
651
- },
652
- {
653
- "name": "label",
654
- "type": {
655
- "text": "string"
656
- },
657
- "default": "''",
658
- "fieldName": "label"
659
- },
660
- {
661
- "name": "enableTabsScroll",
662
- "type": {
663
- "text": "boolean"
664
- },
665
- "default": "false",
666
- "fieldName": "enableTabsScroll"
667
- },
668
- {
669
- "name": "quiet",
670
- "type": {
671
- "text": "boolean"
672
- },
673
- "default": "false",
674
- "description": "The tab list is displayed without a border.",
675
- "fieldName": "quiet"
676
- },
677
- {
678
- "name": "selected",
679
- "type": {
680
- "text": "string"
681
- },
682
- "default": "''",
683
- "fieldName": "selected"
684
- }
685
- ],
686
- "mixins": [
687
- {
688
- "name": "SizedMixin",
689
- "package": "@spectrum-web-components/base"
690
- }
691
- ],
692
- "superclass": {
693
- "name": "Focusable",
694
- "package": "@spectrum-web-components/shared"
695
- },
696
- "tagName": "sp-tabs",
697
- "customElement": true
698
- }
699
- ],
700
- "exports": [
701
- {
702
- "kind": "js",
703
- "name": "ScaledIndicator",
704
- "declaration": {
705
- "name": "ScaledIndicator",
706
- "module": "src/Tabs.js"
707
- }
708
- },
709
- {
710
- "kind": "js",
711
- "name": "Tabs",
712
- "declaration": {
713
- "name": "Tabs",
714
- "module": "src/Tabs.js"
715
- }
716
- }
717
- ]
718
- },
719
- {
720
- "kind": "javascript-module",
721
- "path": "src/TabsOverflow.js",
722
- "declarations": [
723
- {
724
- "kind": "class",
725
- "description": "",
726
- "name": "TabsOverflow",
727
- "members": [
728
- {
729
- "kind": "field",
730
- "name": "compact",
731
- "type": {
732
- "text": "boolean"
733
- },
734
- "default": "false",
735
- "attribute": "compact",
736
- "reflects": true
737
- },
738
- {
739
- "kind": "field",
740
- "name": "dir",
741
- "type": {
742
- "text": "'ltr' | 'rtl'"
743
- },
744
- "privacy": "public",
745
- "attribute": "dir",
746
- "reflects": true
747
- },
748
- {
749
- "kind": "field",
750
- "name": "overflowState",
751
- "type": {
752
- "text": "TabsOverflowState"
753
- },
754
- "privacy": "private",
755
- "default": "{\n canScrollLeft: false,\n canScrollRight: false,\n }"
756
- },
757
- {
758
- "kind": "field",
759
- "name": "scrollContent",
760
- "type": {
761
- "text": "Tabs[]"
762
- },
763
- "privacy": "private"
764
- },
765
- {
766
- "kind": "field",
767
- "name": "overflowContainer",
768
- "type": {
769
- "text": "HTMLDivElement"
770
- },
771
- "privacy": "private"
772
- },
773
- {
774
- "kind": "field",
775
- "name": "resizeController",
776
- "type": {
777
- "text": "ResizeController"
778
- },
779
- "default": "new ResizeController(this, {\n target: this,\n callback: (): void => {\n this._updateScrollState();\n },\n })"
780
- },
781
- {
782
- "kind": "method",
783
- "name": "_handleSlotChange",
784
- "privacy": "private",
785
- "return": {
786
- "type": {
787
- "text": "Promise<void>"
788
- }
789
- }
790
- },
791
- {
792
- "kind": "method",
793
- "name": "_updateScrollState",
794
- "privacy": "private",
795
- "return": {
796
- "type": {
797
- "text": "void"
798
- }
799
- }
800
- },
801
- {
802
- "kind": "method",
803
- "name": "_handleScrollClick",
804
- "privacy": "private",
805
- "return": {
806
- "type": {
807
- "text": "void"
808
- }
809
- },
810
- "parameters": [
811
- {
812
- "name": "event",
813
- "type": {
814
- "text": "MouseEvent"
815
- }
816
- }
817
- ]
818
- }
819
- ],
820
- "attributes": [
821
- {
822
- "name": "compact",
823
- "type": {
824
- "text": "boolean"
825
- },
826
- "default": "false",
827
- "fieldName": "compact"
828
- },
829
- {
830
- "name": "dir",
831
- "type": {
832
- "text": "'ltr' | 'rtl'"
833
- },
834
- "fieldName": "dir"
835
- }
836
- ],
837
- "mixins": [
838
- {
839
- "name": "SizedMixin",
840
- "package": "@spectrum-web-components/base"
841
- }
842
- ],
843
- "superclass": {
844
- "name": "SpectrumElement",
845
- "package": "@spectrum-web-components/base"
846
- },
847
- "tagName": "sp-tabs-overflow",
848
- "customElement": true
849
- }
850
- ],
851
- "exports": [
852
- {
853
- "kind": "js",
854
- "name": "TabsOverflow",
855
- "declaration": {
856
- "name": "TabsOverflow",
857
- "module": "src/TabsOverflow.js"
858
- }
859
- }
860
- ]
861
- }
862
- ]
863
- }