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