@spectrum-web-components/tabs 0.47.2 → 0.48.0-beta.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.
Files changed (2) hide show
  1. package/package.json +7 -7
  2. package/custom-elements.json +0 -1055
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tabs",
3
- "version": "0.47.2",
3
+ "version": "0.48.0-beta.0",
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.2",
89
- "@spectrum-web-components/base": "^0.47.2",
90
- "@spectrum-web-components/icon": "^0.47.2",
91
- "@spectrum-web-components/icons-ui": "^0.47.2",
92
- "@spectrum-web-components/reactive-controllers": "^0.47.2",
93
- "@spectrum-web-components/shared": "^0.47.2"
89
+ "@spectrum-web-components/base": "^0.48.0-beta.0",
90
+ "@spectrum-web-components/icon": "^0.48.0-beta.0",
91
+ "@spectrum-web-components/icons-ui": "^0.48.0-beta.0",
92
+ "@spectrum-web-components/reactive-controllers": "^0.48.0-beta.0",
93
+ "@spectrum-web-components/shared": "^0.48.0-beta.0"
94
94
  },
95
95
  "devDependencies": {
96
96
  "@spectrum-css/tabs": "^5.1.0"
@@ -101,5 +101,5 @@
101
101
  "./sp-*.js",
102
102
  "./**/*.dev.js"
103
103
  ],
104
- "gitHead": "2784e4c65da6a65b6bc748d785154714c8498a8e"
104
+ "gitHead": "9a1377f0402a17b732b96e17ad06b800df6ab52e"
105
105
  }
package/custom-elements.json DELETED
@@ -1,1055 +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
- "kind": "custom-element-definition",
12
- "name": "sp-tab-panel",
13
- "declaration": {
14
- "name": "TabPanel",
15
- "module": "/src/TabPanel.js"
16
- }
17
- }
18
- ]
19
- },
20
- {
21
- "kind": "javascript-module",
22
- "path": "sp-tab.js",
23
- "declarations": [],
24
- "exports": [
25
- {
26
- "kind": "custom-element-definition",
27
- "name": "sp-tab",
28
- "declaration": {
29
- "name": "Tab",
30
- "module": "/src/Tab.js"
31
- }
32
- }
33
- ]
34
- },
35
- {
36
- "kind": "javascript-module",
37
- "path": "sp-tabs-overflow.js",
38
- "declarations": [],
39
- "exports": [
40
- {
41
- "kind": "custom-element-definition",
42
- "name": "sp-tabs-overflow",
43
- "declaration": {
44
- "name": "TabsOverflow",
45
- "module": "/src/TabsOverflow.js"
46
- }
47
- }
48
- ]
49
- },
50
- {
51
- "kind": "javascript-module",
52
- "path": "sp-tabs.js",
53
- "declarations": [],
54
- "exports": [
55
- {
56
- "kind": "custom-element-definition",
57
- "name": "sp-tabs",
58
- "declaration": {
59
- "name": "Tabs",
60
- "module": "/src/Tabs.js"
61
- }
62
- }
63
- ]
64
- },
65
- {
66
- "kind": "javascript-module",
67
- "path": "src/Tab.js",
68
- "declarations": [
69
- {
70
- "kind": "class",
71
- "description": "",
72
- "name": "Tab",
73
- "slots": [
74
- {
75
- "description": "text label of the Tab",
76
- "name": ""
77
- },
78
- {
79
- "description": "The icon that appears on the left of the label",
80
- "name": "icon"
81
- }
82
- ],
83
- "members": [
84
- {
85
- "kind": "field",
86
- "name": "hasIcon",
87
- "type": {
88
- "text": "boolean"
89
- },
90
- "privacy": "protected",
91
- "readonly": true
92
- },
93
- {
94
- "kind": "field",
95
- "name": "hasLabel",
96
- "type": {
97
- "text": "boolean"
98
- },
99
- "privacy": "protected",
100
- "readonly": true
101
- },
102
- {
103
- "kind": "field",
104
- "name": "disabled",
105
- "type": {
106
- "text": "boolean"
107
- },
108
- "privacy": "public",
109
- "default": "false",
110
- "attribute": "disabled",
111
- "reflects": true
112
- },
113
- {
114
- "kind": "field",
115
- "name": "label",
116
- "type": {
117
- "text": "string"
118
- },
119
- "privacy": "public",
120
- "default": "''",
121
- "attribute": "label",
122
- "reflects": true
123
- },
124
- {
125
- "kind": "field",
126
- "name": "selected",
127
- "type": {
128
- "text": "boolean"
129
- },
130
- "privacy": "public",
131
- "default": "false",
132
- "attribute": "selected",
133
- "reflects": true
134
- },
135
- {
136
- "kind": "field",
137
- "name": "vertical",
138
- "type": {
139
- "text": "boolean"
140
- },
141
- "privacy": "public",
142
- "default": "false",
143
- "attribute": "vertical",
144
- "reflects": true
145
- },
146
- {
147
- "kind": "field",
148
- "name": "value",
149
- "type": {
150
- "text": "string"
151
- },
152
- "privacy": "public",
153
- "default": "''",
154
- "attribute": "value",
155
- "reflects": true
156
- }
157
- ],
158
- "attributes": [
159
- {
160
- "name": "disabled",
161
- "type": {
162
- "text": "boolean"
163
- },
164
- "default": "false",
165
- "fieldName": "disabled"
166
- },
167
- {
168
- "name": "label",
169
- "type": {
170
- "text": "string"
171
- },
172
- "default": "''",
173
- "fieldName": "label"
174
- },
175
- {
176
- "name": "selected",
177
- "type": {
178
- "text": "boolean"
179
- },
180
- "default": "false",
181
- "fieldName": "selected"
182
- },
183
- {
184
- "name": "vertical",
185
- "type": {
186
- "text": "boolean"
187
- },
188
- "default": "false",
189
- "fieldName": "vertical"
190
- },
191
- {
192
- "name": "value",
193
- "type": {
194
- "text": "string"
195
- },
196
- "default": "''",
197
- "fieldName": "value"
198
- }
199
- ],
200
- "mixins": [
201
- {
202
- "name": "FocusVisiblePolyfillMixin",
203
- "package": "@spectrum-web-components/shared/src/focus-visible.js"
204
- },
205
- {
206
- "name": "ObserveSlotText",
207
- "package": "@spectrum-web-components/shared/src/observe-slot-text.js"
208
- },
209
- {
210
- "name": "ObserveSlotPresence",
211
- "package": "@spectrum-web-components/shared/src/observe-slot-presence.js"
212
- }
213
- ],
214
- "superclass": {
215
- "name": "SpectrumElement",
216
- "package": "@spectrum-web-components/base"
217
- },
218
- "tagName": "sp-tab",
219
- "customElement": true
220
- }
221
- ],
222
- "exports": [
223
- {
224
- "kind": "js",
225
- "name": "Tab",
226
- "declaration": {
227
- "name": "Tab",
228
- "module": "src/Tab.js"
229
- }
230
- }
231
- ]
232
- },
233
- {
234
- "kind": "javascript-module",
235
- "path": "src/TabPanel.js",
236
- "declarations": [
237
- {
238
- "kind": "class",
239
- "description": "",
240
- "name": "TabPanel",
241
- "slots": [
242
- {
243
- "description": "content of the Tab Panel",
244
- "name": ""
245
- }
246
- ],
247
- "members": [
248
- {
249
- "kind": "field",
250
- "name": "selected",
251
- "type": {
252
- "text": "boolean"
253
- },
254
- "privacy": "public",
255
- "default": "false",
256
- "attribute": "selected",
257
- "reflects": true
258
- },
259
- {
260
- "kind": "field",
261
- "name": "value",
262
- "type": {
263
- "text": "string"
264
- },
265
- "privacy": "public",
266
- "default": "''",
267
- "attribute": "value",
268
- "reflects": true
269
- },
270
- {
271
- "kind": "method",
272
- "name": "handleFocusin",
273
- "privacy": "protected",
274
- "return": {
275
- "type": {
276
- "text": "void"
277
- }
278
- }
279
- },
280
- {
281
- "kind": "method",
282
- "name": "handleFocusout",
283
- "privacy": "protected",
284
- "return": {
285
- "type": {
286
- "text": "void"
287
- }
288
- }
289
- }
290
- ],
291
- "attributes": [
292
- {
293
- "name": "selected",
294
- "type": {
295
- "text": "boolean"
296
- },
297
- "default": "false",
298
- "fieldName": "selected"
299
- },
300
- {
301
- "name": "value",
302
- "type": {
303
- "text": "string"
304
- },
305
- "default": "''",
306
- "fieldName": "value"
307
- }
308
- ],
309
- "superclass": {
310
- "name": "SpectrumElement",
311
- "package": "@spectrum-web-components/base"
312
- },
313
- "tagName": "sp-tab-panel",
314
- "customElement": true
315
- }
316
- ],
317
- "exports": [
318
- {
319
- "kind": "js",
320
- "name": "TabPanel",
321
- "declaration": {
322
- "name": "TabPanel",
323
- "module": "src/TabPanel.js"
324
- }
325
- }
326
- ]
327
- },
328
- {
329
- "kind": "javascript-module",
330
- "path": "src/Tabs.js",
331
- "declarations": [
332
- {
333
- "kind": "variable",
334
- "name": "ScaledIndicator",
335
- "type": {
336
- "text": "object"
337
- },
338
- "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}"
339
- },
340
- {
341
- "kind": "function",
342
- "name": "calculateScrollTargetForRightSide",
343
- "return": {
344
- "type": {
345
- "text": "number"
346
- }
347
- },
348
- "parameters": [
349
- {
350
- "name": "index",
351
- "type": {
352
- "text": "number"
353
- }
354
- },
355
- {
356
- "name": "direction",
357
- "type": {
358
- "text": "'rtl' | 'ltr'"
359
- }
360
- },
361
- {
362
- "name": "tabs",
363
- "type": {
364
- "text": "Tab[]"
365
- }
366
- },
367
- {
368
- "name": "container",
369
- "type": {
370
- "text": "HTMLDivElement"
371
- }
372
- }
373
- ],
374
- "description": "Given that the scroll needs to be on the right side of the viewport.\nReturns the coordonate x it needs to scroll so that the tab with given index is visible."
375
- },
376
- {
377
- "kind": "function",
378
- "name": "calculateScrollTargetForLeftSide",
379
- "return": {
380
- "type": {
381
- "text": "number"
382
- }
383
- },
384
- "parameters": [
385
- {
386
- "name": "index",
387
- "type": {
388
- "text": "number"
389
- }
390
- },
391
- {
392
- "name": "direction",
393
- "type": {
394
- "text": "'rtl' | 'ltr'"
395
- }
396
- },
397
- {
398
- "name": "tabs",
399
- "type": {
400
- "text": "Tab[]"
401
- }
402
- },
403
- {
404
- "name": "container",
405
- "type": {
406
- "text": "HTMLDivElement"
407
- }
408
- }
409
- ],
410
- "description": "Given that the scroll needs to be on the left side of the viewport.\nReturns the coordonate x it needs to scroll so that the tab with given index is visible."
411
- },
412
- {
413
- "kind": "class",
414
- "description": "",
415
- "name": "Tabs",
416
- "cssParts": [
417
- {
418
- "description": "Container element for the slotted sp-tab elements",
419
- "name": "tablist"
420
- }
421
- ],
422
- "slots": [
423
- {
424
- "description": "Tab elements to manage as a group",
425
- "name": ""
426
- },
427
- {
428
- "description": "Tab Panel elements related to the listed Tab elements",
429
- "name": "tab-panel"
430
- }
431
- ],
432
- "members": [
433
- {
434
- "kind": "field",
435
- "name": "auto",
436
- "type": {
437
- "text": "boolean"
438
- },
439
- "privacy": "public",
440
- "default": "false",
441
- "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",
442
- "attribute": "auto"
443
- },
444
- {
445
- "kind": "field",
446
- "name": "compact",
447
- "type": {
448
- "text": "boolean"
449
- },
450
- "privacy": "public",
451
- "default": "false",
452
- "description": "The tab items are displayed closer together.",
453
- "attribute": "compact",
454
- "reflects": true
455
- },
456
- {
457
- "kind": "field",
458
- "name": "dir",
459
- "type": {
460
- "text": "'ltr' | 'rtl'"
461
- },
462
- "privacy": "public",
463
- "attribute": "dir",
464
- "reflects": true
465
- },
466
- {
467
- "kind": "field",
468
- "name": "direction",
469
- "type": {
470
- "text": "'vertical' | 'vertical-right' | 'horizontal'"
471
- },
472
- "privacy": "public",
473
- "default": "'horizontal'",
474
- "attribute": "direction",
475
- "reflects": true
476
- },
477
- {
478
- "kind": "field",
479
- "name": "emphasized",
480
- "type": {
481
- "text": "boolean"
482
- },
483
- "privacy": "public",
484
- "default": "false",
485
- "attribute": "emphasized",
486
- "reflects": true
487
- },
488
- {
489
- "kind": "field",
490
- "name": "label",
491
- "type": {
492
- "text": "string"
493
- },
494
- "privacy": "public",
495
- "default": "''",
496
- "attribute": "label"
497
- },
498
- {
499
- "kind": "field",
500
- "name": "enableTabsScroll",
501
- "type": {
502
- "text": "boolean"
503
- },
504
- "privacy": "public",
505
- "default": "false",
506
- "attribute": "enableTabsScroll"
507
- },
508
- {
509
- "kind": "field",
510
- "name": "quiet",
511
- "type": {
512
- "text": "boolean"
513
- },
514
- "privacy": "public",
515
- "default": "false",
516
- "description": "The tab list is displayed without a border.",
517
- "attribute": "quiet",
518
- "reflects": true
519
- },
520
- {
521
- "kind": "field",
522
- "name": "selectionIndicatorStyle",
523
- "privacy": "public"
524
- },
525
- {
526
- "kind": "field",
527
- "name": "shouldAnimate",
528
- "type": {
529
- "text": "boolean"
530
- },
531
- "privacy": "public",
532
- "default": "false"
533
- },
534
- {
535
- "kind": "field",
536
- "name": "slotEl",
537
- "type": {
538
- "text": "HTMLSlotElement"
539
- },
540
- "privacy": "private"
541
- },
542
- {
543
- "kind": "field",
544
- "name": "tabList",
545
- "type": {
546
- "text": "HTMLDivElement"
547
- },
548
- "privacy": "private"
549
- },
550
- {
551
- "kind": "field",
552
- "name": "selected",
553
- "type": {
554
- "text": "string"
555
- },
556
- "default": "''",
557
- "attribute": "selected",
558
- "reflects": true
559
- },
560
- {
561
- "kind": "field",
562
- "name": "tabs",
563
- "privacy": "private",
564
- "type": {
565
- "text": "Tab[]"
566
- }
567
- },
568
- {
569
- "kind": "field",
570
- "name": "_tabs",
571
- "type": {
572
- "text": "Tab[]"
573
- },
574
- "privacy": "private",
575
- "default": "[]"
576
- },
577
- {
578
- "kind": "field",
579
- "name": "resizeController",
580
- "privacy": "protected",
581
- "default": "new ResizeController(this, {\n callback: () => {\n this.updateSelectionIndicator();\n },\n })"
582
- },
583
- {
584
- "kind": "field",
585
- "name": "rovingTabindexController",
586
- "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: () => 'both',\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 })"
587
- },
588
- {
589
- "kind": "field",
590
- "name": "focusElement",
591
- "type": {
592
- "text": "Tab | this"
593
- },
594
- "privacy": "private",
595
- "readonly": true
596
- },
597
- {
598
- "kind": "method",
599
- "name": "scrollTabs",
600
- "privacy": "public",
601
- "return": {
602
- "type": {
603
- "text": "void"
604
- }
605
- },
606
- "parameters": [
607
- {
608
- "name": "delta",
609
- "type": {
610
- "text": "number"
611
- }
612
- },
613
- {
614
- "name": "behavior",
615
- "default": "'smooth'",
616
- "type": {
617
- "text": "ScrollBehavior"
618
- }
619
- }
620
- ]
621
- },
622
- {
623
- "kind": "field",
624
- "name": "scrollState",
625
- "type": {
626
- "text": "Record<string, boolean>"
627
- },
628
- "privacy": "public",
629
- "readonly": true
630
- },
631
- {
632
- "kind": "method",
633
- "name": "getUpdateComplete",
634
- "return": {
635
- "type": {
636
- "text": "Promise<boolean>"
637
- }
638
- }
639
- },
640
- {
641
- "kind": "method",
642
- "name": "getNecessaryAutoScroll",
643
- "privacy": "private",
644
- "return": {
645
- "type": {
646
- "text": "number"
647
- }
648
- },
649
- "parameters": [
650
- {
651
- "name": "index",
652
- "type": {
653
- "text": "number"
654
- }
655
- }
656
- ]
657
- },
658
- {
659
- "kind": "method",
660
- "name": "scrollToSelection",
661
- "privacy": "public",
662
- "return": {
663
- "type": {
664
- "text": "Promise<void>"
665
- }
666
- }
667
- },
668
- {
669
- "kind": "method",
670
- "name": "managePanels",
671
- "privacy": "protected",
672
- "return": {
673
- "type": {
674
- "text": "void"
675
- }
676
- },
677
- "parameters": [
678
- {
679
- "name": "{\n target,\n }",
680
- "type": {
681
- "text": "Event & { target: HTMLSlotElement }"
682
- }
683
- }
684
- ]
685
- },
686
- {
687
- "kind": "field",
688
- "name": "onTabsScroll",
689
- "privacy": "private"
690
- },
691
- {
692
- "kind": "field",
693
- "name": "onClick",
694
- "privacy": "private"
695
- },
696
- {
697
- "kind": "field",
698
- "name": "onKeyDown",
699
- "privacy": "private"
700
- },
701
- {
702
- "kind": "method",
703
- "name": "selectTarget",
704
- "privacy": "private",
705
- "return": {
706
- "type": {
707
- "text": "void"
708
- }
709
- },
710
- "parameters": [
711
- {
712
- "name": "target",
713
- "type": {
714
- "text": "HTMLElement"
715
- }
716
- }
717
- ]
718
- },
719
- {
720
- "kind": "method",
721
- "name": "onSlotChange",
722
- "privacy": "private",
723
- "return": {
724
- "type": {
725
- "text": "void"
726
- }
727
- }
728
- },
729
- {
730
- "kind": "field",
731
- "name": "updateCheckedState",
732
- "privacy": "private"
733
- },
734
- {
735
- "kind": "field",
736
- "name": "updateSelectionIndicator",
737
- "privacy": "private"
738
- }
739
- ],
740
- "events": [
741
- {
742
- "name": "change",
743
- "type": {
744
- "text": "Event"
745
- },
746
- "description": "The selected Tab child has changed."
747
- }
748
- ],
749
- "attributes": [
750
- {
751
- "name": "auto",
752
- "type": {
753
- "text": "boolean"
754
- },
755
- "default": "false",
756
- "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",
757
- "fieldName": "auto"
758
- },
759
- {
760
- "name": "compact",
761
- "type": {
762
- "text": "boolean"
763
- },
764
- "default": "false",
765
- "description": "The tab items are displayed closer together.",
766
- "fieldName": "compact"
767
- },
768
- {
769
- "name": "dir",
770
- "type": {
771
- "text": "'ltr' | 'rtl'"
772
- },
773
- "fieldName": "dir"
774
- },
775
- {
776
- "name": "direction",
777
- "type": {
778
- "text": "'vertical' | 'vertical-right' | 'horizontal'"
779
- },
780
- "default": "'horizontal'",
781
- "fieldName": "direction"
782
- },
783
- {
784
- "name": "emphasized",
785
- "type": {
786
- "text": "boolean"
787
- },
788
- "default": "false",
789
- "fieldName": "emphasized"
790
- },
791
- {
792
- "name": "label",
793
- "type": {
794
- "text": "string"
795
- },
796
- "default": "''",
797
- "fieldName": "label"
798
- },
799
- {
800
- "name": "enableTabsScroll",
801
- "type": {
802
- "text": "boolean"
803
- },
804
- "default": "false",
805
- "fieldName": "enableTabsScroll"
806
- },
807
- {
808
- "name": "quiet",
809
- "type": {
810
- "text": "boolean"
811
- },
812
- "default": "false",
813
- "description": "The tab list is displayed without a border.",
814
- "fieldName": "quiet"
815
- },
816
- {
817
- "name": "selected",
818
- "type": {
819
- "text": "string"
820
- },
821
- "default": "''",
822
- "fieldName": "selected"
823
- }
824
- ],
825
- "mixins": [
826
- {
827
- "name": "SizedMixin",
828
- "package": "@spectrum-web-components/base"
829
- }
830
- ],
831
- "superclass": {
832
- "name": "Focusable",
833
- "package": "@spectrum-web-components/shared"
834
- },
835
- "tagName": "sp-tabs",
836
- "customElement": true
837
- }
838
- ],
839
- "exports": [
840
- {
841
- "kind": "js",
842
- "name": "ScaledIndicator",
843
- "declaration": {
844
- "name": "ScaledIndicator",
845
- "module": "src/Tabs.js"
846
- }
847
- },
848
- {
849
- "kind": "js",
850
- "name": "calculateScrollTargetForRightSide",
851
- "declaration": {
852
- "name": "calculateScrollTargetForRightSide",
853
- "module": "src/Tabs.js"
854
- }
855
- },
856
- {
857
- "kind": "js",
858
- "name": "calculateScrollTargetForLeftSide",
859
- "declaration": {
860
- "name": "calculateScrollTargetForLeftSide",
861
- "module": "src/Tabs.js"
862
- }
863
- },
864
- {
865
- "kind": "js",
866
- "name": "Tabs",
867
- "declaration": {
868
- "name": "Tabs",
869
- "module": "src/Tabs.js"
870
- }
871
- }
872
- ]
873
- },
874
- {
875
- "kind": "javascript-module",
876
- "path": "src/TabsOverflow.js",
877
- "declarations": [
878
- {
879
- "kind": "class",
880
- "description": "",
881
- "name": "TabsOverflow",
882
- "members": [
883
- {
884
- "kind": "field",
885
- "name": "compact",
886
- "type": {
887
- "text": "boolean"
888
- },
889
- "privacy": "public",
890
- "default": "false",
891
- "attribute": "compact",
892
- "reflects": true
893
- },
894
- {
895
- "kind": "field",
896
- "name": "labelPrevious",
897
- "type": {
898
- "text": "string"
899
- },
900
- "privacy": "public",
901
- "default": "'Scroll to previous tabs'",
902
- "attribute": "label-previous"
903
- },
904
- {
905
- "kind": "field",
906
- "name": "labelNext",
907
- "type": {
908
- "text": "string"
909
- },
910
- "privacy": "public",
911
- "default": "'Scroll to next tabs'",
912
- "attribute": "label-next"
913
- },
914
- {
915
- "kind": "field",
916
- "name": "dir",
917
- "type": {
918
- "text": "'ltr' | 'rtl'"
919
- },
920
- "privacy": "public",
921
- "attribute": "dir",
922
- "reflects": true
923
- },
924
- {
925
- "kind": "field",
926
- "name": "overflowState",
927
- "type": {
928
- "text": "TabsOverflowState"
929
- },
930
- "privacy": "private",
931
- "default": "{\n canScrollLeft: false,\n canScrollRight: false,\n }"
932
- },
933
- {
934
- "kind": "field",
935
- "name": "scrollContent",
936
- "type": {
937
- "text": "Tabs[]"
938
- },
939
- "privacy": "private"
940
- },
941
- {
942
- "kind": "field",
943
- "name": "overflowContainer",
944
- "type": {
945
- "text": "HTMLDivElement"
946
- },
947
- "privacy": "private"
948
- },
949
- {
950
- "kind": "field",
951
- "name": "resizeController",
952
- "type": {
953
- "text": "ResizeController"
954
- },
955
- "default": "new ResizeController(this, {\n target: this,\n callback: (): void => {\n this._updateScrollState();\n },\n })"
956
- },
957
- {
958
- "kind": "method",
959
- "name": "_handleSlotChange",
960
- "privacy": "private",
961
- "return": {
962
- "type": {
963
- "text": "Promise<void>"
964
- }
965
- }
966
- },
967
- {
968
- "kind": "method",
969
- "name": "_updateScrollState",
970
- "privacy": "private",
971
- "return": {
972
- "type": {
973
- "text": "void"
974
- }
975
- }
976
- },
977
- {
978
- "kind": "method",
979
- "name": "_handleScrollClick",
980
- "privacy": "private",
981
- "return": {
982
- "type": {
983
- "text": "void"
984
- }
985
- },
986
- "parameters": [
987
- {
988
- "name": "event",
989
- "type": {
990
- "text": "MouseEvent"
991
- }
992
- }
993
- ]
994
- }
995
- ],
996
- "attributes": [
997
- {
998
- "name": "compact",
999
- "type": {
1000
- "text": "boolean"
1001
- },
1002
- "default": "false",
1003
- "fieldName": "compact"
1004
- },
1005
- {
1006
- "name": "label-previous",
1007
- "type": {
1008
- "text": "string"
1009
- },
1010
- "default": "'Scroll to previous tabs'",
1011
- "fieldName": "labelPrevious"
1012
- },
1013
- {
1014
- "name": "label-next",
1015
- "type": {
1016
- "text": "string"
1017
- },
1018
- "default": "'Scroll to next tabs'",
1019
- "fieldName": "labelNext"
1020
- },
1021
- {
1022
- "name": "dir",
1023
- "type": {
1024
- "text": "'ltr' | 'rtl'"
1025
- },
1026
- "fieldName": "dir"
1027
- }
1028
- ],
1029
- "mixins": [
1030
- {
1031
- "name": "SizedMixin",
1032
- "package": "@spectrum-web-components/base"
1033
- }
1034
- ],
1035
- "superclass": {
1036
- "name": "SpectrumElement",
1037
- "package": "@spectrum-web-components/base"
1038
- },
1039
- "tagName": "sp-tabs-overflow",
1040
- "customElement": true
1041
- }
1042
- ],
1043
- "exports": [
1044
- {
1045
- "kind": "js",
1046
- "name": "TabsOverflow",
1047
- "declaration": {
1048
- "name": "TabsOverflow",
1049
- "module": "src/TabsOverflow.js"
1050
- }
1051
- }
1052
- ]
1053
- }
1054
- ]
1055
- }