@planningcenter/tapestry 1.1.0-rc.8 → 1.1.1-qa-144.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 (28) hide show
  1. package/dist/index.css +160 -99
  2. package/dist/index.css.map +1 -1
  3. package/dist/packages/tapestry-wc/dist/components/index2.js +22 -0
  4. package/dist/packages/tapestry-wc/dist/components/index2.js.map +1 -0
  5. package/dist/packages/tapestry-wc/dist/components/popover-container.js +93 -7
  6. package/dist/packages/tapestry-wc/dist/components/popover-container.js.map +1 -1
  7. package/dist/packages/tapestry-wc/dist/components/sidenav-popover.js +4 -4
  8. package/dist/packages/tapestry-wc/dist/components/sidenav-popover.js.map +1 -1
  9. package/dist/packages/tapestry-wc/dist/components/sidenav-responsive-header.js +62 -0
  10. package/dist/packages/tapestry-wc/dist/components/sidenav-responsive-header.js.map +1 -0
  11. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +8 -3
  12. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  13. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +23 -11
  14. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  15. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -55
  16. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  17. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +12 -3
  18. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  19. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +25 -8
  20. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  21. package/dist/unstable.css +163 -100
  22. package/dist/unstable.css.map +1 -1
  23. package/dist/webComponents.css +163 -100
  24. package/dist/webComponents.css.map +1 -1
  25. package/package.json +4 -3
  26. package/react-types/index.d.ts +46 -16
  27. package/dist/packages/tapestry-wc/dist/components/sidenav-item-enhancer.js +0 -63
  28. package/dist/packages/tapestry-wc/dist/components/sidenav-item-enhancer.js.map +0 -1
package/dist/unstable.css CHANGED
@@ -9,90 +9,105 @@
9
9
  @layer t-component {
10
10
  .tds-page-header {
11
11
  --tds-page-header-background-color: var(--t-surface-color-card);
12
- --tds-page-header-background-color-inactive: var(
13
- --t-fill-color-transparency-dark-010
14
- );
12
+ --tds-page-header-background-color-inactive:
13
+ var(
14
+ --t-fill-color-transparency-dark-010
15
+ );
15
16
  --tds-page-header-color: var(--t-text-color-default-secondary);
16
17
  --tds-page-header-headline-color: var(--t-text-color-default-headline);
17
18
  --tds-page-header-padding-x: var(--t-spacing-2);
18
19
  --tds-page-header-padding-y: var(--t-spacing-2);
19
- --tds-page-header-nav-padding-x: var(
20
- --tds-page-header-padding-x,
21
- var(--t-spacing-3)
22
- );
23
- --tds-page-header-nav-background: linear-gradient(
24
- 180deg,
25
- rgba(0, 0, 0, 0) 0%,
26
- rgba(0, 0, 0, 0.1) 100%
27
- );
20
+ --tds-page-header-nav-padding-x:
21
+ var(
22
+ --tds-page-header-padding-x,
23
+ var(--t-spacing-3)
24
+ );
25
+ --tds-page-header-nav-background:
26
+ linear-gradient(
27
+ 180deg,
28
+ rgba(0, 0, 0, 0) 0%,
29
+ rgba(0, 0, 0, .1) 100%
30
+ );
28
31
  --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
29
32
  --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
30
33
  --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
31
- --tds-page-header-nav-item-background-color: var(
32
- --t-fill-color-transparency-light-060
33
- );
34
+ --tds-page-header-nav-item-background-color:
35
+ var(
36
+ --t-fill-color-transparency-light-060
37
+ );
34
38
  --tds-page-header-nav-item-border-width: 0;
35
39
 
36
- --tds-page-header-nav-item-border-color: var(
37
- --tds-page-header-nav-item-background-color
38
- );
39
- --tds-page-header-nav-item-border-bottom-color: var(
40
- --t-border-color-default-base
41
- );
40
+ --tds-page-header-nav-item-border-color:
41
+ var(
42
+ --tds-page-header-nav-item-background-color
43
+ );
44
+ --tds-page-header-nav-item-border-bottom-color:
45
+ var(
46
+ --t-border-color-default-base
47
+ );
42
48
 
43
49
  --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
44
- --tds-page-header-nav-item-background-color-hover: var(
45
- --t-fill-color-neutral-080
46
- );
47
- --tds-page-header-nav-item-border-color-hover: var(
48
- --tds-page-header-nav-item-background-color-hover
49
- );
50
+ --tds-page-header-nav-item-background-color-hover:
51
+ var(
52
+ --t-fill-color-neutral-080
53
+ );
54
+ --tds-page-header-nav-item-border-color-hover:
55
+ var(
56
+ --tds-page-header-nav-item-background-color-hover
57
+ );
50
58
 
51
- --tds-page-header-nav-item-background-color-active: var(
52
- --t-fill-color-neutral-060
53
- );
54
- --tds-page-header-nav-item-border-color-active: var(
55
- --tds-page-header-nav-item-background-color-hover
56
- );
59
+ --tds-page-header-nav-item-background-color-active:
60
+ var(
61
+ --t-fill-color-neutral-060
62
+ );
63
+ --tds-page-header-nav-item-border-color-active:
64
+ var(
65
+ --tds-page-header-nav-item-background-color-hover
66
+ );
57
67
 
58
- --tds-page-header-nav-item-color-disabled: var(
59
- --t-text-color-default-disabled
60
- );
61
- --tds-page-header-nav-item-background-color-disabled: var(
62
- --t-fill-color-neutral-080
63
- );
64
- --tds-page-header-nav-item-border-color-disabled: var(
65
- --tds-page-header-nav-item-background-color-disabled
66
- );
68
+ --tds-page-header-nav-item-color-disabled:
69
+ var(
70
+ --t-text-color-default-disabled
71
+ );
72
+ --tds-page-header-nav-item-background-color-disabled:
73
+ var(
74
+ --t-fill-color-neutral-080
75
+ );
76
+ --tds-page-header-nav-item-border-color-disabled:
77
+ var(
78
+ --tds-page-header-nav-item-background-color-disabled
79
+ );
67
80
 
68
- --tds-page-header-nav-item-color-selected: var(
69
- --t-text-color-interaction-primary
70
- );
71
- --tds-page-header-nav-item-border-color-selected: var(
72
- --t-border-color-default-base
73
- );
74
- --tds-page-header-nav-item-background-color-selected: var(
75
- --t-fill-color-neutral-100
76
- );
77
- --tds-page-header-nav-item-border-bottom-color-selected: var(
78
- --tds-page-header-nav-item-background-color-selected
79
- );
81
+ --tds-page-header-nav-item-color-selected:
82
+ var(
83
+ --t-text-color-default-primary
84
+ );
85
+ --tds-page-header-nav-item-border-color-selected:
86
+ var(
87
+ --t-border-color-default-base
88
+ );
89
+ --tds-page-header-nav-item-background-color-selected:
90
+ var(
91
+ --t-fill-color-neutral-100
92
+ );
93
+ --tds-page-header-nav-item-border-bottom-color-selected:
94
+ var(
95
+ --tds-page-header-nav-item-background-color-selected
96
+ );
80
97
  }
81
98
 
82
99
 
83
- @media (width >= 600px) {
100
+ @media (min-width: 720px) {
84
101
  .tds-page-header {
85
102
  --tds-page-header-padding-x: var(--t-spacing-3);
86
103
  --tds-page-header-nav-background: transparent;
87
104
  --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
88
105
  --tds-page-header-nav-item-border-width: 1px;
89
106
  --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
90
- --tds-page-header-nav-item-background-color: var(
91
- --t-fill-color-neutral-070
92
- );
93
- --tds-page-header-nav-item-color-selected: var(
94
- --t-text-color-default-primary
95
- );
107
+ --tds-page-header-nav-item-background-color:
108
+ var(
109
+ --t-fill-color-neutral-070
110
+ );
96
111
  }
97
112
  }
98
113
  }
@@ -157,10 +172,10 @@
157
172
  display: flex;
158
173
  gap: var(--t-spacing-half);
159
174
  padding: 0 var(--tds-page-header-nav-padding-x);
160
- margin: 0 0 -1px 0;
175
+ margin: 0 0 -1px;
161
176
  overflow: auto;
162
- background: var(--tds-page-header-nav-background);
163
177
  list-style: none;
178
+ background: var(--tds-page-header-nav-background);
164
179
  }
165
180
 
166
181
  .tds-page-header nav[slot="navigation"] a,
@@ -168,19 +183,21 @@
168
183
  .tds-page-header nav.tds-page-header__nav a,
169
184
  .tds-page-header nav.tds-page-header__nav button {
170
185
  display: inline-flex;
171
- padding: var(--tds-page-header-nav-item-padding-y)
186
+ padding:
187
+ var(--tds-page-header-nav-item-padding-y)
172
188
  var(--tds-page-header-nav-item-padding-x);
173
189
  font-size: var(--t-font-size-md);
174
190
  color: var(--tds-page-header-nav-item-color);
175
191
  white-space: nowrap;
176
192
  text-decoration: none;
177
193
  -webkit-appearance: none;
178
- -moz-appearance: none;
179
- appearance: none;
194
+ -moz-appearance: none;
195
+ appearance: none;
180
196
  cursor: pointer;
181
197
  outline-offset: -2px;
182
198
  background-color: var(--tds-page-header-nav-item-background-color);
183
- border: var(--tds-page-header-nav-item-border-width) solid
199
+ border:
200
+ var(--tds-page-header-nav-item-border-width) solid
184
201
  var(--tds-page-header-nav-item-border-color);
185
202
  border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
186
203
  border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
@@ -190,18 +207,22 @@
190
207
  .tds-page-header nav[slot="navigation"] button.selected,
191
208
  .tds-page-header nav.tds-page-header__nav a.selected,
192
209
  .tds-page-header nav.tds-page-header__nav button.selected {
193
- --tds-page-header-nav-item-color: var(
194
- --tds-page-header-nav-item-color-selected
195
- );
196
- --tds-page-header-nav-item-border-color: var(
197
- --tds-page-header-nav-item-border-color-selected
198
- );
199
- --tds-page-header-nav-item-background-color: var(
200
- --tds-page-header-nav-item-background-color-selected
201
- );
202
- --tds-page-header-nav-item-border-bottom-color: var(
203
- --tds-page-header-nav-item-background-color-selected
204
- );
210
+ --tds-page-header-nav-item-color:
211
+ var(
212
+ --tds-page-header-nav-item-color-selected
213
+ );
214
+ --tds-page-header-nav-item-border-color:
215
+ var(
216
+ --tds-page-header-nav-item-border-color-selected
217
+ );
218
+ --tds-page-header-nav-item-background-color:
219
+ var(
220
+ --tds-page-header-nav-item-background-color-selected
221
+ );
222
+ --tds-page-header-nav-item-border-bottom-color:
223
+ var(
224
+ --tds-page-header-nav-item-background-color-selected
225
+ );
205
226
  }
206
227
 
207
228
  .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
@@ -209,12 +230,14 @@
209
230
  .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
210
231
  .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
211
232
  --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
212
- --tds-page-header-nav-item-background-color: var(
213
- --tds-page-header-nav-item-background-color-hover
214
- );
215
- --tds-page-header-nav-item-border-color: var(
216
- --tds-page-header-nav-item-border-color-hover
217
- );
233
+ --tds-page-header-nav-item-background-color:
234
+ var(
235
+ --tds-page-header-nav-item-background-color-hover
236
+ );
237
+ --tds-page-header-nav-item-border-color:
238
+ var(
239
+ --tds-page-header-nav-item-border-color-hover
240
+ );
218
241
  }
219
242
 
220
243
  .tds-page-header nav[slot="navigation"] a:not(.selected):active,
@@ -234,7 +257,7 @@
234
257
  opacity: 1;
235
258
  }
236
259
 
237
- @media (width >= 720px) {
260
+ @media (min-width: 720px) {
238
261
  .tds-page-header__title-bar,
239
262
  .tds-page-header--profile .tds-page-header__title-bar {
240
263
  flex-direction: row;
@@ -329,7 +352,9 @@
329
352
  color: var(--t-text-color-default-headline);
330
353
  white-space: nowrap;
331
354
  text-decoration: none;
332
- appearance: none;
355
+ -webkit-appearance: none;
356
+ -moz-appearance: none;
357
+ appearance: none;
333
358
  cursor: pointer;
334
359
  outline: 0;
335
360
  background-color: transparent;
@@ -347,14 +372,14 @@
347
372
  white-space: nowrap;
348
373
  }
349
374
 
350
- [aria-current="page"]:is(.tds-sidenav-item :is(a,button)) {
375
+ .selected > :is(.tds-sidenav-item :is(a,button)) {
351
376
  --tds-sidenav-item-nested-background: transparent;
352
377
  --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-selected);
353
378
  font-weight: 600;
354
379
  background-color: var(--tds-sidenav-item-background-selected);
355
380
  }
356
381
 
357
- [aria-current="page"]:is(.tds-sidenav-item :is(a,button)) .prefix,[aria-current="page"]:is(.tds-sidenav-item :is(a,button)) [slot="prefix"] {
382
+ :is(.selected > :is(.tds-sidenav-item :is(a,button))) .prefix,:is(.selected > :is(.tds-sidenav-item :is(a,button))) [slot="prefix"] {
358
383
  color: var(--t-icon-color-default-primary);
359
384
  }
360
385
 
@@ -376,6 +401,8 @@
376
401
 
377
402
  :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg {
378
403
  display: block;
404
+ width: 16px;
405
+ height: 16px;
379
406
  }
380
407
 
381
408
  :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
@@ -470,6 +497,7 @@
470
497
  display: flex;
471
498
  align-items: center;
472
499
  justify-content: center;
500
+ order: 0;
473
501
  height: var(--t-container-size-md);
474
502
  padding: 3px var(--t-spacing-1);
475
503
  background-color: var(--t-fill-color-button-neutral-outline-dim-default);
@@ -487,36 +515,69 @@
487
515
 
488
516
  .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
489
517
  flex: 1;
518
+ order: 1;
490
519
  margin: 0;
491
520
  font-size: var(--t-font-size-lg);
492
521
  font-weight: var(--t-font-weight-medium);
493
522
  color: var(--t-text-color-default-headline);
494
523
  }
495
524
 
496
- @media (max-width: 767px) {
525
+ @media (max-width: 719px) {
497
526
  .tds-sidenav-collapse {
498
527
  position: absolute;
499
- top: anchor(bottom);
500
- left: anchor(left);
501
- z-index: 7000;
502
- justify-content: flex-start;
503
- max-width: 448px;
504
- padding: var(--t-spacing-2);
505
- margin-top: 12px;
528
+ z-index: 10001;
529
+ max-width: min(448px, calc(100vw - 48px));
530
+ padding: 0;
531
+ margin: 12px 0;
532
+ overflow: hidden;
506
533
  outline: 0;
507
- background: #fff;
534
+ background: var(--t-surface-color-card);
508
535
  border: 0;
509
536
  border-radius: 6px;
510
537
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
538
+ will-change: transform;
539
+ position-area: bottom span-right;
540
+ }
541
+
542
+ .tds-sidenav-collapse:popover-open,
543
+ .tds-sidenav-collapse.\:popover-open {
544
+ display: flex;
545
+ }
546
+
547
+ .tds-sidenav-scroll-container {
548
+ --webkit-overflow-scrolling: touch;
549
+ display: block;
550
+ width: 100%;
551
+ height: -moz-fit-content;
552
+ height: fit-content;
553
+ padding: var(--t-spacing-2);
554
+ overflow-y: auto;
555
+ }
556
+
557
+ .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
558
+ display: none;
511
559
  }
512
560
  }
513
561
 
514
- @media (min-width: 768px) {
562
+ @media (min-width: 720px) {
515
563
  .tds-sidenav-responsive-header {
516
564
  display: none;
517
565
  }
518
566
  }
519
567
 
568
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > * {
569
+ display: none;
570
+ }
571
+
572
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
573
+ display: block;
574
+ }
575
+
576
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
577
+ display: flex;
578
+ flex-direction: column;
579
+ }
580
+
520
581
  /**
521
582
  * Do not edit directly, this file was auto-generated.
522
583
  */
@@ -1136,7 +1197,9 @@
1136
1197
  text-align: center;
1137
1198
  text-decoration: none;
1138
1199
  cursor: pointer;
1139
- user-select: none;
1200
+ -webkit-user-select: none;
1201
+ -moz-user-select: none;
1202
+ user-select: none;
1140
1203
  background-color: var(--tds-btn-bg);
1141
1204
  border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1142
1205
  border-radius: var(--tds-btn-border-radius);