@spectrum-web-components/tabs 0.11.0 → 0.11.1-overlay.8

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/tabs",
3
- "version": "0.11.0",
3
+ "version": "0.11.1-overlay.8+499d5fe96",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -86,10 +86,10 @@
86
86
  "dependencies": {
87
87
  "@lit-labs/observers": "^1.0.1",
88
88
  "@spectrum-web-components/base": "^0.7.4",
89
- "@spectrum-web-components/icon": "^0.12.5",
90
- "@spectrum-web-components/icons-ui": "^0.9.5",
89
+ "@spectrum-web-components/icon": "^0.12.8",
90
+ "@spectrum-web-components/icons-ui": "^0.9.8",
91
91
  "@spectrum-web-components/reactive-controllers": "^0.3.5",
92
- "@spectrum-web-components/shared": "^0.15.5"
92
+ "@spectrum-web-components/shared": "^0.15.6-overlay.99+499d5fe96"
93
93
  },
94
94
  "devDependencies": {
95
95
  "@spectrum-css/tabs": "^3.2.27"
@@ -100,5 +100,5 @@
100
100
  "./sp-*.js",
101
101
  "./**/*.dev.js"
102
102
  ],
103
- "gitHead": "19b71bd41bc476cdae09afe3f2e48ba8b9b5dcdd"
103
+ "gitHead": "499d5fe966f35eb862c1983eb3a42641f213ac6a"
104
104
  }
@@ -1,892 +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": "instanceCount",
87
- "type": {
88
- "text": "number"
89
- },
90
- "static": true,
91
- "default": "0",
92
- "privacy": "private"
93
- },
94
- {
95
- "kind": "field",
96
- "name": "hasIcon",
97
- "type": {
98
- "text": "boolean"
99
- },
100
- "privacy": "protected"
101
- },
102
- {
103
- "kind": "field",
104
- "name": "hasLabel",
105
- "type": {
106
- "text": "boolean"
107
- },
108
- "privacy": "protected"
109
- },
110
- {
111
- "kind": "field",
112
- "name": "disabled",
113
- "type": {
114
- "text": "boolean"
115
- },
116
- "privacy": "public",
117
- "default": "false",
118
- "attribute": "disabled",
119
- "reflects": true
120
- },
121
- {
122
- "kind": "field",
123
- "name": "label",
124
- "type": {
125
- "text": "string"
126
- },
127
- "privacy": "public",
128
- "default": "''",
129
- "attribute": "label",
130
- "reflects": true
131
- },
132
- {
133
- "kind": "field",
134
- "name": "selected",
135
- "type": {
136
- "text": "boolean"
137
- },
138
- "privacy": "public",
139
- "default": "false",
140
- "attribute": "selected",
141
- "reflects": true
142
- },
143
- {
144
- "kind": "field",
145
- "name": "vertical",
146
- "type": {
147
- "text": "boolean"
148
- },
149
- "privacy": "public",
150
- "default": "false",
151
- "attribute": "vertical",
152
- "reflects": true
153
- },
154
- {
155
- "kind": "field",
156
- "name": "value",
157
- "type": {
158
- "text": "string"
159
- },
160
- "privacy": "public",
161
- "default": "''",
162
- "attribute": "value",
163
- "reflects": true
164
- },
165
- {
166
- "kind": "method",
167
- "name": "handleContentChange",
168
- "privacy": "protected",
169
- "return": {
170
- "type": {
171
- "text": "void"
172
- }
173
- }
174
- }
175
- ],
176
- "events": [
177
- {
178
- "name": "sp-tab-contentchange",
179
- "type": {
180
- "text": "Event"
181
- },
182
- "description": "When the content in a tab has changed, JS powered layout related to that content may also need to be changed."
183
- }
184
- ],
185
- "attributes": [
186
- {
187
- "name": "disabled",
188
- "type": {
189
- "text": "boolean"
190
- },
191
- "default": "false",
192
- "fieldName": "disabled"
193
- },
194
- {
195
- "name": "label",
196
- "type": {
197
- "text": "string"
198
- },
199
- "default": "''",
200
- "fieldName": "label"
201
- },
202
- {
203
- "name": "selected",
204
- "type": {
205
- "text": "boolean"
206
- },
207
- "default": "false",
208
- "fieldName": "selected"
209
- },
210
- {
211
- "name": "vertical",
212
- "type": {
213
- "text": "boolean"
214
- },
215
- "default": "false",
216
- "fieldName": "vertical"
217
- },
218
- {
219
- "name": "value",
220
- "type": {
221
- "text": "string"
222
- },
223
- "default": "''",
224
- "fieldName": "value"
225
- }
226
- ],
227
- "mixins": [
228
- {
229
- "name": "FocusVisiblePolyfillMixin",
230
- "package": "@spectrum-web-components/shared"
231
- },
232
- {
233
- "name": "ObserveSlotText",
234
- "package": "@spectrum-web-components/shared"
235
- },
236
- {
237
- "name": "ObserveSlotPresence",
238
- "package": "@spectrum-web-components/shared"
239
- }
240
- ],
241
- "superclass": {
242
- "name": "SpectrumElement",
243
- "package": "@spectrum-web-components/base"
244
- },
245
- "tagName": "sp-tab",
246
- "customElement": true
247
- }
248
- ],
249
- "exports": [
250
- {
251
- "kind": "js",
252
- "name": "Tab",
253
- "declaration": {
254
- "name": "Tab",
255
- "module": "src/Tab.js"
256
- }
257
- }
258
- ]
259
- },
260
- {
261
- "kind": "javascript-module",
262
- "path": "src/TabPanel.js",
263
- "declarations": [
264
- {
265
- "kind": "class",
266
- "description": "",
267
- "name": "TabPanel",
268
- "slots": [
269
- {
270
- "description": "content of the Tab Panel",
271
- "name": ""
272
- }
273
- ],
274
- "members": [
275
- {
276
- "kind": "field",
277
- "name": "instanceCount",
278
- "type": {
279
- "text": "number"
280
- },
281
- "static": true,
282
- "default": "0",
283
- "privacy": "private"
284
- },
285
- {
286
- "kind": "field",
287
- "name": "selected",
288
- "type": {
289
- "text": "boolean"
290
- },
291
- "privacy": "public",
292
- "default": "false",
293
- "attribute": "selected",
294
- "reflects": true
295
- },
296
- {
297
- "kind": "field",
298
- "name": "value",
299
- "type": {
300
- "text": "string"
301
- },
302
- "privacy": "public",
303
- "default": "''",
304
- "attribute": "value",
305
- "reflects": true
306
- }
307
- ],
308
- "attributes": [
309
- {
310
- "name": "selected",
311
- "type": {
312
- "text": "boolean"
313
- },
314
- "default": "false",
315
- "fieldName": "selected"
316
- },
317
- {
318
- "name": "value",
319
- "type": {
320
- "text": "string"
321
- },
322
- "default": "''",
323
- "fieldName": "value"
324
- }
325
- ],
326
- "superclass": {
327
- "name": "SpectrumElement",
328
- "package": "@spectrum-web-components/base"
329
- },
330
- "tagName": "sp-tab-panel",
331
- "customElement": true
332
- }
333
- ],
334
- "exports": [
335
- {
336
- "kind": "js",
337
- "name": "TabPanel",
338
- "declaration": {
339
- "name": "TabPanel",
340
- "module": "src/TabPanel.js"
341
- }
342
- }
343
- ]
344
- },
345
- {
346
- "kind": "javascript-module",
347
- "path": "src/Tabs.js",
348
- "declarations": [
349
- {
350
- "kind": "variable",
351
- "name": "ScaledIndicator",
352
- "type": {
353
- "text": "object"
354
- },
355
- "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}"
356
- },
357
- {
358
- "kind": "class",
359
- "description": "",
360
- "name": "Tabs",
361
- "cssParts": [
362
- {
363
- "description": "Container element for the slotted sp-tab elements",
364
- "name": "tablist"
365
- }
366
- ],
367
- "slots": [
368
- {
369
- "description": "Tab elements to manage as a group",
370
- "name": ""
371
- },
372
- {
373
- "description": "Tab Panel elements related to the listed Tab elements",
374
- "name": "tab-panel"
375
- }
376
- ],
377
- "members": [
378
- {
379
- "kind": "field",
380
- "name": "auto",
381
- "type": {
382
- "text": "boolean"
383
- },
384
- "privacy": "public",
385
- "default": "false",
386
- "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",
387
- "attribute": "auto"
388
- },
389
- {
390
- "kind": "field",
391
- "name": "compact",
392
- "type": {
393
- "text": "boolean"
394
- },
395
- "privacy": "public",
396
- "default": "false",
397
- "description": "The tab items are displayed closer together.",
398
- "attribute": "compact",
399
- "reflects": true
400
- },
401
- {
402
- "kind": "field",
403
- "name": "direction",
404
- "type": {
405
- "text": "'vertical' | 'vertical-right' | 'horizontal'"
406
- },
407
- "privacy": "public",
408
- "default": "'horizontal'",
409
- "attribute": "direction",
410
- "reflects": true
411
- },
412
- {
413
- "kind": "field",
414
- "name": "emphasized",
415
- "type": {
416
- "text": "boolean"
417
- },
418
- "privacy": "public",
419
- "default": "false",
420
- "attribute": "emphasized",
421
- "reflects": true
422
- },
423
- {
424
- "kind": "field",
425
- "name": "label",
426
- "type": {
427
- "text": "string"
428
- },
429
- "privacy": "public",
430
- "default": "''",
431
- "attribute": "label"
432
- },
433
- {
434
- "kind": "field",
435
- "name": "enableTabsScroll",
436
- "type": {
437
- "text": "boolean"
438
- },
439
- "privacy": "public",
440
- "default": "false",
441
- "attribute": "enableTabsScroll"
442
- },
443
- {
444
- "kind": "field",
445
- "name": "quiet",
446
- "type": {
447
- "text": "boolean"
448
- },
449
- "privacy": "public",
450
- "default": "false",
451
- "description": "The tab list is displayed without a border.",
452
- "attribute": "quiet",
453
- "reflects": true
454
- },
455
- {
456
- "kind": "field",
457
- "name": "selectionIndicatorStyle",
458
- "privacy": "public"
459
- },
460
- {
461
- "kind": "field",
462
- "name": "shouldAnimate",
463
- "type": {
464
- "text": "boolean"
465
- },
466
- "privacy": "public",
467
- "default": "false"
468
- },
469
- {
470
- "kind": "field",
471
- "name": "tabList",
472
- "type": {
473
- "text": "HTMLDivElement"
474
- },
475
- "privacy": "private"
476
- },
477
- {
478
- "kind": "field",
479
- "name": "selected",
480
- "type": {
481
- "text": "string"
482
- },
483
- "privacy": "public",
484
- "attribute": "selected",
485
- "reflects": true
486
- },
487
- {
488
- "kind": "field",
489
- "name": "_selected",
490
- "type": {
491
- "text": "string"
492
- },
493
- "privacy": "private",
494
- "default": "''"
495
- },
496
- {
497
- "kind": "field",
498
- "name": "tabs",
499
- "privacy": "private",
500
- "type": {
501
- "text": "Tab[]"
502
- }
503
- },
504
- {
505
- "kind": "field",
506
- "name": "_tabs",
507
- "type": {
508
- "text": "Tab[]"
509
- },
510
- "privacy": "private",
511
- "default": "[]"
512
- },
513
- {
514
- "kind": "field",
515
- "name": "rovingTabindexController",
516
- "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 })"
517
- },
518
- {
519
- "kind": "field",
520
- "name": "focusElement",
521
- "type": {
522
- "text": "Tab | this"
523
- },
524
- "privacy": "private"
525
- },
526
- {
527
- "kind": "method",
528
- "name": "scrollTabs",
529
- "privacy": "public",
530
- "return": {
531
- "type": {
532
- "text": "void"
533
- }
534
- },
535
- "parameters": [
536
- {
537
- "name": "delta",
538
- "type": {
539
- "text": "number"
540
- }
541
- },
542
- {
543
- "name": "behavior",
544
- "default": "'smooth'",
545
- "type": {
546
- "text": "ScrollBehavior"
547
- }
548
- }
549
- ]
550
- },
551
- {
552
- "kind": "field",
553
- "name": "scrollState",
554
- "type": {
555
- "text": "Record<string, boolean>"
556
- },
557
- "privacy": "public"
558
- },
559
- {
560
- "kind": "method",
561
- "name": "manageAutoFocus",
562
- "privacy": "protected",
563
- "return": {
564
- "type": {
565
- "text": "void"
566
- }
567
- }
568
- },
569
- {
570
- "kind": "method",
571
- "name": "managePanels",
572
- "privacy": "protected",
573
- "return": {
574
- "type": {
575
- "text": "void"
576
- }
577
- },
578
- "parameters": [
579
- {
580
- "name": "{\n target,\n }",
581
- "type": {
582
- "text": "Event & { target: HTMLSlotElement }"
583
- }
584
- }
585
- ]
586
- },
587
- {
588
- "kind": "field",
589
- "name": "onTabsScroll",
590
- "privacy": "private"
591
- },
592
- {
593
- "kind": "field",
594
- "name": "onClick",
595
- "privacy": "private"
596
- },
597
- {
598
- "kind": "field",
599
- "name": "onKeyDown",
600
- "privacy": "private"
601
- },
602
- {
603
- "kind": "method",
604
- "name": "selectTarget",
605
- "privacy": "private",
606
- "return": {
607
- "type": {
608
- "text": "void"
609
- }
610
- },
611
- "parameters": [
612
- {
613
- "name": "target",
614
- "type": {
615
- "text": "HTMLElement"
616
- }
617
- }
618
- ]
619
- },
620
- {
621
- "kind": "method",
622
- "name": "onSlotChange",
623
- "privacy": "private",
624
- "return": {
625
- "type": {
626
- "text": "void"
627
- }
628
- }
629
- },
630
- {
631
- "kind": "method",
632
- "name": "shouldUpdateCheckedState",
633
- "privacy": "private",
634
- "return": {
635
- "type": {
636
- "text": "void"
637
- }
638
- }
639
- },
640
- {
641
- "kind": "field",
642
- "name": "updateCheckedState",
643
- "privacy": "private"
644
- },
645
- {
646
- "kind": "field",
647
- "name": "updateSelectionIndicator",
648
- "privacy": "private"
649
- },
650
- {
651
- "kind": "field",
652
- "name": "tabChangePromise",
653
- "privacy": "private"
654
- },
655
- {
656
- "kind": "field",
657
- "name": "tabChangeResolver",
658
- "type": {
659
- "text": "() => void"
660
- },
661
- "privacy": "private",
662
- "default": "function () {\n return;\n }"
663
- },
664
- {
665
- "kind": "method",
666
- "name": "getUpdateComplete",
667
- "privacy": "protected",
668
- "return": {
669
- "type": {
670
- "text": "Promise<boolean>"
671
- }
672
- }
673
- }
674
- ],
675
- "events": [
676
- {
677
- "name": "change",
678
- "type": {
679
- "text": "Event"
680
- },
681
- "description": "The selected Tab child has changed."
682
- }
683
- ],
684
- "attributes": [
685
- {
686
- "name": "auto",
687
- "type": {
688
- "text": "boolean"
689
- },
690
- "default": "false",
691
- "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",
692
- "fieldName": "auto"
693
- },
694
- {
695
- "name": "compact",
696
- "type": {
697
- "text": "boolean"
698
- },
699
- "default": "false",
700
- "description": "The tab items are displayed closer together.",
701
- "fieldName": "compact"
702
- },
703
- {
704
- "name": "direction",
705
- "type": {
706
- "text": "'vertical' | 'vertical-right' | 'horizontal'"
707
- },
708
- "default": "'horizontal'",
709
- "fieldName": "direction"
710
- },
711
- {
712
- "name": "emphasized",
713
- "type": {
714
- "text": "boolean"
715
- },
716
- "default": "false",
717
- "fieldName": "emphasized"
718
- },
719
- {
720
- "name": "label",
721
- "type": {
722
- "text": "string"
723
- },
724
- "default": "''",
725
- "fieldName": "label"
726
- },
727
- {
728
- "name": "enableTabsScroll",
729
- "type": {
730
- "text": "boolean"
731
- },
732
- "default": "false",
733
- "fieldName": "enableTabsScroll"
734
- },
735
- {
736
- "name": "quiet",
737
- "type": {
738
- "text": "boolean"
739
- },
740
- "default": "false",
741
- "description": "The tab list is displayed without a border.",
742
- "fieldName": "quiet"
743
- },
744
- {
745
- "name": "selected",
746
- "type": {
747
- "text": "string"
748
- },
749
- "fieldName": "selected"
750
- }
751
- ],
752
- "mixins": [
753
- {
754
- "name": "SizedMixin",
755
- "package": "@spectrum-web-components/base"
756
- }
757
- ],
758
- "superclass": {
759
- "name": "Focusable",
760
- "package": "@spectrum-web-components/shared"
761
- },
762
- "tagName": "sp-tabs",
763
- "customElement": true
764
- }
765
- ],
766
- "exports": [
767
- {
768
- "kind": "js",
769
- "name": "ScaledIndicator",
770
- "declaration": {
771
- "name": "ScaledIndicator",
772
- "module": "src/Tabs.js"
773
- }
774
- },
775
- {
776
- "kind": "js",
777
- "name": "Tabs",
778
- "declaration": {
779
- "name": "Tabs",
780
- "module": "src/Tabs.js"
781
- }
782
- }
783
- ]
784
- },
785
- {
786
- "kind": "javascript-module",
787
- "path": "src/TabsOverflow.js",
788
- "declarations": [
789
- {
790
- "kind": "class",
791
- "description": "",
792
- "name": "TabsOverflow",
793
- "members": [
794
- {
795
- "kind": "field",
796
- "name": "overflowState",
797
- "type": {
798
- "text": "TabsOverflowState"
799
- },
800
- "privacy": "private",
801
- "default": "{\n canScrollLeft: false,\n canScrollRight: false,\n }"
802
- },
803
- {
804
- "kind": "field",
805
- "name": "scrollContent",
806
- "type": {
807
- "text": "Tabs[]"
808
- },
809
- "privacy": "private"
810
- },
811
- {
812
- "kind": "field",
813
- "name": "overflowContainer",
814
- "type": {
815
- "text": "HTMLDivElement"
816
- },
817
- "privacy": "private"
818
- },
819
- {
820
- "kind": "field",
821
- "name": "resizeController",
822
- "type": {
823
- "text": "ResizeController"
824
- },
825
- "default": "new ResizeController(this, {\n target: this,\n callback: (): void => {\n this._updateScrollState();\n },\n })"
826
- },
827
- {
828
- "kind": "method",
829
- "name": "_handleSlotChange",
830
- "privacy": "private",
831
- "return": {
832
- "type": {
833
- "text": "Promise<void>"
834
- }
835
- }
836
- },
837
- {
838
- "kind": "method",
839
- "name": "_updateScrollState",
840
- "privacy": "private",
841
- "return": {
842
- "type": {
843
- "text": "void"
844
- }
845
- }
846
- },
847
- {
848
- "kind": "method",
849
- "name": "_handleScrollClick",
850
- "privacy": "private",
851
- "return": {
852
- "type": {
853
- "text": "void"
854
- }
855
- },
856
- "parameters": [
857
- {
858
- "name": "event",
859
- "type": {
860
- "text": "MouseEvent"
861
- }
862
- }
863
- ]
864
- }
865
- ],
866
- "mixins": [
867
- {
868
- "name": "SizedMixin",
869
- "package": "@spectrum-web-components/base"
870
- }
871
- ],
872
- "superclass": {
873
- "name": "SpectrumElement",
874
- "package": "@spectrum-web-components/base"
875
- },
876
- "tagName": "sp-tabs-overflow",
877
- "customElement": true
878
- }
879
- ],
880
- "exports": [
881
- {
882
- "kind": "js",
883
- "name": "TabsOverflow",
884
- "declaration": {
885
- "name": "TabsOverflow",
886
- "module": "src/TabsOverflow.js"
887
- }
888
- }
889
- ]
890
- }
891
- ]
892
- }