@planningcenter/tapestry 1.1.0-rc.7 → 1.1.0-rc.9

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 (26) hide show
  1. package/dist/ext/@stencil/core/internal/client/index.js +1 -17
  2. package/dist/ext/@stencil/core/internal/client/index.js.map +1 -1
  3. package/dist/index.css +128 -98
  4. package/dist/index.css.map +1 -1
  5. package/dist/packages/tapestry-wc/dist/components/popover-container.js +723 -0
  6. package/dist/packages/tapestry-wc/dist/components/popover-container.js.map +1 -0
  7. package/dist/packages/tapestry-wc/dist/components/sidenav-item-enhancer.js +2 -2
  8. package/dist/packages/tapestry-wc/dist/components/sidenav-item-enhancer.js.map +1 -1
  9. package/dist/packages/tapestry-wc/dist/components/sidenav-popover.js +93 -0
  10. package/dist/packages/tapestry-wc/dist/components/sidenav-popover.js.map +1 -0
  11. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +1 -1
  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 +3 -3
  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 +22 -8
  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 +2 -2
  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 +17 -16
  20. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  21. package/dist/unstable.css +128 -98
  22. package/dist/unstable.css.map +1 -1
  23. package/dist/webComponents.css +128 -98
  24. package/dist/webComponents.css.map +1 -1
  25. package/package.json +3 -3
  26. package/react-types/index.d.ts +12 -4
package/dist/webComponents.css CHANGED
@@ -9,90 +9,109 @@
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-interaction-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: 600px) {
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
+ );
111
+ --tds-page-header-nav-item-color-selected:
112
+ var(
113
+ --t-text-color-default-primary
114
+ );
96
115
  }
97
116
  }
98
117
  }
@@ -157,10 +176,10 @@
157
176
  display: flex;
158
177
  gap: var(--t-spacing-half);
159
178
  padding: 0 var(--tds-page-header-nav-padding-x);
160
- margin: 0 0 -1px 0;
179
+ margin: 0 0 -1px;
161
180
  overflow: auto;
162
- background: var(--tds-page-header-nav-background);
163
181
  list-style: none;
182
+ background: var(--tds-page-header-nav-background);
164
183
  }
165
184
 
166
185
  .tds-page-header nav[slot="navigation"] a,
@@ -168,7 +187,8 @@
168
187
  .tds-page-header nav.tds-page-header__nav a,
169
188
  .tds-page-header nav.tds-page-header__nav button {
170
189
  display: inline-flex;
171
- padding: var(--tds-page-header-nav-item-padding-y)
190
+ padding:
191
+ var(--tds-page-header-nav-item-padding-y)
172
192
  var(--tds-page-header-nav-item-padding-x);
173
193
  font-size: var(--t-font-size-md);
174
194
  color: var(--tds-page-header-nav-item-color);
@@ -180,7 +200,8 @@
180
200
  cursor: pointer;
181
201
  outline-offset: -2px;
182
202
  background-color: var(--tds-page-header-nav-item-background-color);
183
- border: var(--tds-page-header-nav-item-border-width) solid
203
+ border:
204
+ var(--tds-page-header-nav-item-border-width) solid
184
205
  var(--tds-page-header-nav-item-border-color);
185
206
  border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
186
207
  border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
@@ -190,18 +211,22 @@
190
211
  .tds-page-header nav[slot="navigation"] button.selected,
191
212
  .tds-page-header nav.tds-page-header__nav a.selected,
192
213
  .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
- );
214
+ --tds-page-header-nav-item-color:
215
+ var(
216
+ --tds-page-header-nav-item-color-selected
217
+ );
218
+ --tds-page-header-nav-item-border-color:
219
+ var(
220
+ --tds-page-header-nav-item-border-color-selected
221
+ );
222
+ --tds-page-header-nav-item-background-color:
223
+ var(
224
+ --tds-page-header-nav-item-background-color-selected
225
+ );
226
+ --tds-page-header-nav-item-border-bottom-color:
227
+ var(
228
+ --tds-page-header-nav-item-background-color-selected
229
+ );
205
230
  }
206
231
 
207
232
  .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
@@ -209,12 +234,14 @@
209
234
  .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
210
235
  .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
211
236
  --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
- );
237
+ --tds-page-header-nav-item-background-color:
238
+ var(
239
+ --tds-page-header-nav-item-background-color-hover
240
+ );
241
+ --tds-page-header-nav-item-border-color:
242
+ var(
243
+ --tds-page-header-nav-item-border-color-hover
244
+ );
218
245
  }
219
246
 
220
247
  .tds-page-header nav[slot="navigation"] a:not(.selected):active,
@@ -234,7 +261,7 @@
234
261
  opacity: 1;
235
262
  }
236
263
 
237
- @media (width >= 720px) {
264
+ @media (min-width: 720px) {
238
265
  .tds-page-header__title-bar,
239
266
  .tds-page-header--profile .tds-page-header__title-bar {
240
267
  flex-direction: row;
@@ -279,8 +306,11 @@
279
306
  --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
280
307
  }
281
308
 
282
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
309
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
283
310
  display: flex;
311
+ }
312
+
313
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
284
314
  flex-direction: column;
285
315
  gap: 4px;
286
316
  align-items: start;
@@ -458,31 +488,31 @@
458
488
 
459
489
  .tds-sidenav-responsive-header {
460
490
  display: flex;
491
+ gap: var(--t-spacing-2);
461
492
  align-items: center;
462
493
  width: 100%;
463
- gap: var(--t-spacing-2);
464
494
  }
465
495
 
466
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header__toggle {
496
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
467
497
  display: flex;
468
498
  align-items: center;
469
499
  justify-content: center;
470
500
  height: var(--t-container-size-md);
471
501
  padding: 3px var(--t-spacing-1);
472
- border-radius: var(--t-border-radius-md);
473
- border: 1px solid var(--t-border-color-button-neutral);
474
502
  background-color: var(--t-fill-color-button-neutral-outline-dim-default);
503
+ border: 1px solid var(--t-border-color-button-neutral);
504
+ border-radius: var(--t-border-radius-md);
475
505
  }
476
506
 
477
- :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header__toggle):focus,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header__toggle):focus-visible,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header__toggle):hover {
507
+ :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus-visible,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):hover {
478
508
  background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
479
509
  }
480
510
 
481
- :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header__toggle):active {
511
+ :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
482
512
  background-color: var(--t-fill-color-button-neutral-outline-dim-active);
483
513
  }
484
514
 
485
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header__label {
515
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
486
516
  flex: 1;
487
517
  margin: 0;
488
518
  font-size: var(--t-font-size-lg);
@@ -493,19 +523,19 @@
493
523
  @media (max-width: 767px) {
494
524
  .tds-sidenav-collapse {
495
525
  position: absolute;
526
+ top: anchor(bottom);
527
+ left: anchor(left);
496
528
  z-index: 7000;
529
+ justify-content: flex-start;
497
530
  max-width: 448px;
498
531
  padding: var(--t-spacing-2);
532
+ margin-top: 12px;
533
+ outline: 0;
499
534
  background: #fff;
535
+ border: 0;
500
536
  border-radius: 6px;
501
537
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
502
- margin-top: 12px;
503
538
  }
504
-
505
-
506
- .tds-sidenav-collapse:not(.show) {
507
- display: none;
508
- }
509
539
  }
510
540
 
511
541
  @media (min-width: 768px) {