@planningcenter/tapestry 1.5.0-rc.5 → 1.5.0-rc.7

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 (43) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/index.css +46 -5
  4. package/dist/index.css.map +1 -1
  5. package/dist/tapestry-wc/dist/components/{p-8VcUueQf.js → p-BhFogp_U.js} +48 -4
  6. package/dist/tapestry-wc/dist/components/p-BhFogp_U.js.map +1 -0
  7. package/dist/tapestry-wc/dist/components/{p-BjrGeLUO.js → p-BlDSVodf.js} +6 -18
  8. package/dist/tapestry-wc/dist/components/p-BlDSVodf.js.map +1 -0
  9. package/dist/tapestry-wc/dist/components/{p-CVU9VS_l.js → p-CD2U028j.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-CVU9VS_l.js.map → p-CD2U028j.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-CtUHEdIS.js → p-COUwC7N7.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-CtUHEdIS.js.map → p-COUwC7N7.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-DbVPeVA8.js → p-CbHRhwTr.js} +6 -14
  14. package/dist/tapestry-wc/dist/components/p-CbHRhwTr.js.map +1 -0
  15. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  16. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  17. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  18. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +6 -6
  20. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +4 -4
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav.js +10 -13
  26. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  27. package/dist/tokens/ts/tokens.d.ts +33 -0
  28. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  29. package/dist/tokens/ts/tokens.js +33 -0
  30. package/dist/tokens/ts/tokens.js.map +1 -1
  31. package/dist/tokens.css +33 -0
  32. package/dist/tokens.css.map +1 -1
  33. package/dist/unstable.css +400 -359
  34. package/dist/unstable.css.map +1 -1
  35. package/dist/webComponents.css +400 -359
  36. package/dist/webComponents.css.map +1 -1
  37. package/package.json +3 -3
  38. package/react-types/index.d.ts +8 -12
  39. package/dist/tapestry-wc/dist/components/p-8VcUueQf.js.map +0 -1
  40. package/dist/tapestry-wc/dist/components/p-BjrGeLUO.js.map +0 -1
  41. package/dist/tapestry-wc/dist/components/p-DbVPeVA8.js.map +0 -1
  42. package/dist/tapestry-wc/dist/components/p-W7OaybYL.js +0 -93
  43. package/dist/tapestry-wc/dist/components/p-W7OaybYL.js.map +0 -1
@@ -1,389 +1,117 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @layer t-critical {
4
- tds-page-header:not(.hydrated) {
5
- display: none;
6
- }
7
- }
8
3
 
9
- @layer t-component {
10
- .tds-page-header {
11
- --tds-page-header-background-color: var(--t-surface-color-card);
12
- --tds-page-header-background-color-inactive:
13
- var(
14
- --t-fill-color-transparency-dark-010
15
- );
16
- --tds-page-header-color: var(--t-text-color-default-secondary);
17
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
18
- --tds-page-header-padding-x: var(--t-spacing-2);
19
- --tds-page-header-padding-y: var(--t-spacing-2);
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
- );
31
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
32
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
33
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
34
- --tds-page-header-nav-item-background-color:
35
- var(
36
- --t-fill-color-transparency-light-060
37
- );
38
- --tds-page-header-nav-item-border-width: 0;
4
+ @media (prefers-reduced-motion: no-preference) {
39
5
 
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
- );
6
+ :root {
7
+ interpolate-size: allow-keywords;
8
+ }
9
+ }
48
10
 
49
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
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
- );
11
+ @layer tds-component {
12
+ tds-sidenav {
13
+ --tds-sidenav-indent: 12px;
14
+ --tds-sidenav-item-depth: 0;
58
15
 
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
- );
16
+ --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
67
17
 
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
- );
18
+ --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
19
+ --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
20
+ --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
80
21
 
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
- );
97
- }
22
+ --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
23
+ --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
24
+ --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
98
25
 
26
+ --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
27
+ --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
28
+ }
99
29
 
100
- @media (min-width: 720px) {
101
- .tds-page-header {
102
- --tds-page-header-padding-x: var(--t-spacing-3);
103
- --tds-page-header-nav-background: transparent;
104
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
105
- --tds-page-header-nav-item-border-width: 1px;
106
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
107
- --tds-page-header-nav-item-background-color:
108
- var(
109
- --t-fill-color-neutral-070
110
- );
111
- }
30
+ .is-classic tds-sidenav,
31
+ .tds-sidenav--theme-gray {
32
+ --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
33
+ --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
34
+ --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
35
+ --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
36
+ --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
112
37
  }
113
38
  }
114
39
 
115
- .tds-page-header {
116
- display: flex;
117
- flex-direction: column;
118
- gap: var(--t-spacing-2);
119
- padding-top: var(--tds-page-header-padding-y);
120
- color: var(--tds-page-header-color);
121
- background-color: var(--tds-page-header-background-color);
122
- border-bottom: 1px solid var(--t-border-color-default-base);
123
- }
40
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
41
+ display: flex;
42
+ }
124
43
 
125
- .tds-page-header:not(.has-nav) {
126
- padding-bottom: var(--tds-page-header-padding-y);
127
- }
44
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
45
+ flex-direction: column;
46
+ gap: var(--t-spacing-half);
47
+ width: 100%;
48
+ }
128
49
 
129
- .tds-page-header.inactive {
130
- background-color: var(--tds-page-header-background-color-inactive);
50
+ .tds-sidenav-section-list {
51
+ width: 100%;
52
+ padding: 0;
53
+ margin: 0;
54
+ list-style: none;
131
55
  }
132
56
 
133
- .tds-page-header__title-bar {
57
+ .tds-sidenav-section-header {
134
58
  display: flex;
135
- flex-direction: column;
136
- gap: var(--t-spacing-2) var(--t-spacing-half);
137
- align-items: flex-start;
59
+ align-items: baseline;
138
60
  justify-content: space-between;
139
- padding: 0 var(--tds-page-header-padding-x);
61
+ padding-top: var(--t-spacing-2);
140
62
  }
141
63
 
142
- .tds-page-header--profile > .tds-page-header__title-bar {
143
- align-items: center;
144
- }
64
+ .tds-sidenav-section-header h2 {
65
+ margin: 0;
66
+ font-size: var(--t-font-size-sm);
67
+ font-weight: var(--t-font-weight-semibold);
68
+ color: var(--t-text-color-default-secondary);
69
+ text-transform: uppercase;
70
+ line-height: 1.35;
71
+ }
145
72
 
146
- .tds-page-header__primary {
147
- flex: 1 1 auto;
148
- width: 100%;
149
- }
73
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
74
+ margin-top: 0;
75
+ }
150
76
 
151
- .tds-page-header__primary h1 {
77
+ .tds-sidenav-section-list,
78
+ .tds-sidenav-item {
79
+ width: 100%;
80
+ padding: 0;
152
81
  margin: 0;
153
- font-size: var(--t-font-size-3xl);
154
- font-weight: var(--t-font-weight-normal);
155
- line-height: 40px;
156
- color: var(--tds-page-header-headline-color);
157
82
  }
158
83
 
159
- .has-multi-actions.tds-page-header [slot="actions"],
160
- .has-multi-actions.tds-page-header .tds-page-header__actions {
161
- display: flex;
162
- flex-flow: row wrap;
163
- gap: var(--t-spacing-half) var(--t-spacing-1);
164
- align-items: flex-start;
165
- justify-content: flex-start;
166
- }
84
+ .tds-sidenav-item :is(a,button) {
85
+ position: relative;
86
+ display: flex;
87
+ gap: 12px;
88
+ align-items: center;
89
+ width: 100%;
90
+ padding: 12px;
91
+ overflow: hidden;
92
+ font-size: var(--t-font-size-sm);
93
+ line-height: 18px;
94
+ color: var(--t-text-color-default-headline);
95
+ white-space: nowrap;
96
+ text-decoration: none;
97
+ -webkit-appearance: none;
98
+ -moz-appearance: none;
99
+ appearance: none;
100
+ cursor: pointer;
101
+ background-color: var(--tds-sidenav-item-background, transparent);
102
+ border: 0;
103
+ border-radius: var(--t-border-radius-default);
104
+ transition: var(--tds-sidenav-item-transition);
105
+ }
167
106
 
168
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
169
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
170
- .tds-page-header nav[slot="navigation"] ul,
171
- .tds-page-header nav.tds-page-header__nav ul {
172
- display: flex;
173
- gap: var(--t-spacing-half);
174
- padding: 0 var(--tds-page-header-nav-padding-x);
175
- margin: 0 0 -1px;
176
- overflow: auto;
177
- list-style: none;
178
- background: var(--tds-page-header-nav-background);
179
- }
180
-
181
- .tds-page-header nav[slot="navigation"] a,
182
- .tds-page-header nav[slot="navigation"] button,
183
- .tds-page-header nav.tds-page-header__nav a,
184
- .tds-page-header nav.tds-page-header__nav button {
185
- display: inline-flex;
186
- padding:
187
- var(--tds-page-header-nav-item-padding-y)
188
- var(--tds-page-header-nav-item-padding-x);
189
- font-size: var(--t-font-size-md);
190
- color: var(--tds-page-header-nav-item-color);
191
- white-space: nowrap;
192
- text-decoration: none;
193
- -webkit-appearance: none;
194
- -moz-appearance: none;
195
- appearance: none;
196
- cursor: pointer;
197
- outline-offset: -2px;
198
- background-color: var(--tds-page-header-nav-item-background-color);
199
- border:
200
- var(--tds-page-header-nav-item-border-width) solid
201
- var(--tds-page-header-nav-item-border-color);
202
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
203
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
204
- }
205
-
206
- .tds-page-header nav[slot="navigation"] a.selected,
207
- .tds-page-header nav[slot="navigation"] button.selected,
208
- .tds-page-header nav.tds-page-header__nav a.selected,
209
- .tds-page-header nav.tds-page-header__nav button.selected {
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
- );
226
- }
227
-
228
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
229
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
230
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
231
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
232
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
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
- );
241
- }
242
-
243
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
244
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
245
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
246
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
247
- background-color: var(--tds-page-header-nav-item-background-color-active);
248
- }
249
-
250
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
251
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
252
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
253
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
254
- color: var(--tds-page-header-nav-item-color-disabled);
255
- cursor: not-allowed;
256
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
257
- opacity: 1;
258
- }
259
-
260
- @media (min-width: 720px) {
261
- .tds-page-header__title-bar,
262
- .tds-page-header--profile .tds-page-header__title-bar {
263
- flex-direction: row;
264
- align-items: flex-start;
265
- }
266
-
267
- .tds-page-header__primary {
268
- width: auto;
269
- }
270
-
271
- [slot="actions"],
272
- .tds-page-header__actions {
273
- margin-left: auto;
274
- }
275
-
276
- .has-multi-actions.tds-page-header [slot="actions"],
277
- .has-multi-actions.tds-page-header .tds-page-header__actions {
278
- flex-flow: row wrap;
279
- margin-top: var(--t-spacing-half);
280
- }
281
- }
282
-
283
-
284
- @media (prefers-reduced-motion: no-preference) {
285
-
286
- :root {
287
- interpolate-size: allow-keywords;
288
- }
289
- }
290
-
291
- @layer tds-component {
292
- tds-sidenav {
293
- --tds-sidenav-indent: 12px;
294
- --tds-sidenav-item-depth: 0;
295
-
296
- --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
297
-
298
- --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
299
- --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
300
- --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
301
-
302
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
303
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
304
- --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
305
-
306
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
307
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
308
- }
309
-
310
- .is-classic tds-sidenav,
311
- .tds-sidenav--theme-gray {
312
- --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
313
- --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
314
- --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
315
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
316
- --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
317
- }
318
- }
319
-
320
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
321
- display: flex;
322
- }
323
-
324
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
325
- flex-direction: column;
326
- gap: var(--t-spacing-half);
327
- width: 100%;
328
- }
329
-
330
- .tds-sidenav-section-list {
331
- width: 100%;
332
- padding: 0;
333
- margin: 0;
334
- list-style: none;
335
- }
336
-
337
- .tds-sidenav-section-header {
338
- margin: var(--t-spacing-2) 0 0 0;
339
- font-size: var(--t-font-size-sm);
340
- font-weight: var(--t-font-weight-semibold);
341
- color: var(--t-text-color-default-secondary);
342
- text-transform: uppercase;
343
- }
344
-
345
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
346
- margin-top: 0;
347
- }
348
-
349
- .tds-sidenav-section-list,
350
- .tds-sidenav-item {
351
- width: 100%;
352
- padding: 0;
353
- margin: 0;
354
- }
355
-
356
- .tds-sidenav-item :is(a,button) {
357
- position: relative;
358
- display: flex;
359
- gap: 12px;
360
- align-items: center;
361
- width: 100%;
362
- padding: 12px;
363
- overflow: hidden;
364
- font-size: var(--t-font-size-sm);
365
- line-height: 18px;
366
- color: var(--t-text-color-default-headline);
367
- white-space: nowrap;
368
- text-decoration: none;
369
- -webkit-appearance: none;
370
- -moz-appearance: none;
371
- appearance: none;
372
- cursor: pointer;
373
- background-color: var(--tds-sidenav-item-background, transparent);
374
- border: 0;
375
- border-radius: var(--t-border-radius-default);
376
- transition: var(--tds-sidenav-item-transition);
377
- }
378
-
379
- :is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
380
- display: block;
381
- flex: 1;
382
- overflow: hidden;
383
- text-overflow: ellipsis;
384
- text-align: left;
385
- white-space: nowrap;
386
- }
107
+ :is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
108
+ display: block;
109
+ flex: 1;
110
+ overflow: hidden;
111
+ text-overflow: ellipsis;
112
+ text-align: left;
113
+ white-space: nowrap;
114
+ }
387
115
 
388
116
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
389
117
  --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
@@ -572,6 +300,286 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
572
300
  flex-direction: column;
573
301
  }
574
302
 
303
+ @layer t-critical {
304
+ tds-page-header:not(.hydrated) {
305
+ display: none;
306
+ }
307
+ }
308
+
309
+ @layer t-component {
310
+ .tds-page-header {
311
+ --tds-page-header-background-color: var(--t-surface-color-card);
312
+ --tds-page-header-background-color-inactive:
313
+ var(
314
+ --t-fill-color-transparency-dark-010
315
+ );
316
+ --tds-page-header-color: var(--t-text-color-default-secondary);
317
+ --tds-page-header-headline-color: var(--t-text-color-default-headline);
318
+ --tds-page-header-padding-x: var(--t-spacing-2);
319
+ --tds-page-header-padding-y: var(--t-spacing-2);
320
+ --tds-page-header-nav-padding-x:
321
+ var(
322
+ --tds-page-header-padding-x,
323
+ var(--t-spacing-3)
324
+ );
325
+ --tds-page-header-nav-background:
326
+ linear-gradient(
327
+ 180deg,
328
+ rgba(0, 0, 0, 0) 0%,
329
+ rgba(0, 0, 0, .1) 100%
330
+ );
331
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
332
+ --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
333
+ --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
334
+ --tds-page-header-nav-item-background-color:
335
+ var(
336
+ --t-fill-color-transparency-light-060
337
+ );
338
+ --tds-page-header-nav-item-border-width: 0;
339
+
340
+ --tds-page-header-nav-item-border-color:
341
+ var(
342
+ --tds-page-header-nav-item-background-color
343
+ );
344
+ --tds-page-header-nav-item-border-bottom-color:
345
+ var(
346
+ --t-border-color-default-base
347
+ );
348
+
349
+ --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
350
+ --tds-page-header-nav-item-background-color-hover:
351
+ var(
352
+ --t-fill-color-neutral-080
353
+ );
354
+ --tds-page-header-nav-item-border-color-hover:
355
+ var(
356
+ --tds-page-header-nav-item-background-color-hover
357
+ );
358
+
359
+ --tds-page-header-nav-item-background-color-active:
360
+ var(
361
+ --t-fill-color-neutral-060
362
+ );
363
+ --tds-page-header-nav-item-border-color-active:
364
+ var(
365
+ --tds-page-header-nav-item-background-color-hover
366
+ );
367
+
368
+ --tds-page-header-nav-item-color-disabled:
369
+ var(
370
+ --t-text-color-default-disabled
371
+ );
372
+ --tds-page-header-nav-item-background-color-disabled:
373
+ var(
374
+ --t-fill-color-neutral-080
375
+ );
376
+ --tds-page-header-nav-item-border-color-disabled:
377
+ var(
378
+ --tds-page-header-nav-item-background-color-disabled
379
+ );
380
+
381
+ --tds-page-header-nav-item-color-selected:
382
+ var(
383
+ --t-text-color-default-primary
384
+ );
385
+ --tds-page-header-nav-item-border-color-selected:
386
+ var(
387
+ --t-border-color-default-base
388
+ );
389
+ --tds-page-header-nav-item-background-color-selected:
390
+ var(
391
+ --t-fill-color-neutral-100
392
+ );
393
+ --tds-page-header-nav-item-border-bottom-color-selected:
394
+ var(
395
+ --tds-page-header-nav-item-background-color-selected
396
+ );
397
+ }
398
+
399
+
400
+ @media (min-width: 720px) {
401
+ .tds-page-header {
402
+ --tds-page-header-padding-x: var(--t-spacing-3);
403
+ --tds-page-header-nav-background: transparent;
404
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
405
+ --tds-page-header-nav-item-border-width: 1px;
406
+ --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
407
+ --tds-page-header-nav-item-background-color:
408
+ var(
409
+ --t-fill-color-neutral-070
410
+ );
411
+ }
412
+ }
413
+ }
414
+
415
+ .tds-page-header {
416
+ display: flex;
417
+ flex-direction: column;
418
+ gap: var(--t-spacing-2);
419
+ padding-top: var(--tds-page-header-padding-y);
420
+ color: var(--tds-page-header-color);
421
+ background-color: var(--tds-page-header-background-color);
422
+ border-bottom: 1px solid var(--t-border-color-default-base);
423
+ }
424
+
425
+ .tds-page-header:not(.has-nav) {
426
+ padding-bottom: var(--tds-page-header-padding-y);
427
+ }
428
+
429
+ .tds-page-header.inactive {
430
+ background-color: var(--tds-page-header-background-color-inactive);
431
+ }
432
+
433
+ .tds-page-header__title-bar {
434
+ display: flex;
435
+ flex-direction: column;
436
+ gap: var(--t-spacing-2) var(--t-spacing-half);
437
+ align-items: flex-start;
438
+ justify-content: space-between;
439
+ padding: 0 var(--tds-page-header-padding-x);
440
+ }
441
+
442
+ .tds-page-header--profile > .tds-page-header__title-bar {
443
+ align-items: center;
444
+ }
445
+
446
+ .tds-page-header__primary {
447
+ flex: 1 1 auto;
448
+ width: 100%;
449
+ }
450
+
451
+ .tds-page-header__primary h1 {
452
+ margin: 0;
453
+ font-size: var(--t-font-size-3xl);
454
+ font-weight: var(--t-font-weight-normal);
455
+ line-height: 40px;
456
+ color: var(--tds-page-header-headline-color);
457
+ }
458
+
459
+ .has-multi-actions.tds-page-header [slot="actions"],
460
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
461
+ display: flex;
462
+ flex-flow: row wrap;
463
+ gap: var(--t-spacing-half) var(--t-spacing-1);
464
+ align-items: flex-start;
465
+ justify-content: flex-start;
466
+ }
467
+
468
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
469
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
470
+ .tds-page-header nav[slot="navigation"] ul,
471
+ .tds-page-header nav.tds-page-header__nav ul {
472
+ display: flex;
473
+ gap: var(--t-spacing-half);
474
+ padding: 0 var(--tds-page-header-nav-padding-x);
475
+ margin: 0 0 -1px;
476
+ overflow: auto;
477
+ list-style: none;
478
+ background: var(--tds-page-header-nav-background);
479
+ }
480
+
481
+ .tds-page-header nav[slot="navigation"] a,
482
+ .tds-page-header nav[slot="navigation"] button,
483
+ .tds-page-header nav.tds-page-header__nav a,
484
+ .tds-page-header nav.tds-page-header__nav button {
485
+ display: inline-flex;
486
+ padding:
487
+ var(--tds-page-header-nav-item-padding-y)
488
+ var(--tds-page-header-nav-item-padding-x);
489
+ font-size: var(--t-font-size-md);
490
+ color: var(--tds-page-header-nav-item-color);
491
+ white-space: nowrap;
492
+ text-decoration: none;
493
+ -webkit-appearance: none;
494
+ -moz-appearance: none;
495
+ appearance: none;
496
+ cursor: pointer;
497
+ outline-offset: -2px;
498
+ background-color: var(--tds-page-header-nav-item-background-color);
499
+ border:
500
+ var(--tds-page-header-nav-item-border-width) solid
501
+ var(--tds-page-header-nav-item-border-color);
502
+ border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
503
+ border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
504
+ }
505
+
506
+ .tds-page-header nav[slot="navigation"] a.selected,
507
+ .tds-page-header nav[slot="navigation"] button.selected,
508
+ .tds-page-header nav.tds-page-header__nav a.selected,
509
+ .tds-page-header nav.tds-page-header__nav button.selected {
510
+ --tds-page-header-nav-item-color:
511
+ var(
512
+ --tds-page-header-nav-item-color-selected
513
+ );
514
+ --tds-page-header-nav-item-border-color:
515
+ var(
516
+ --tds-page-header-nav-item-border-color-selected
517
+ );
518
+ --tds-page-header-nav-item-background-color:
519
+ var(
520
+ --tds-page-header-nav-item-background-color-selected
521
+ );
522
+ --tds-page-header-nav-item-border-bottom-color:
523
+ var(
524
+ --tds-page-header-nav-item-background-color-selected
525
+ );
526
+ }
527
+
528
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
529
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
530
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
531
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
532
+ --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
533
+ --tds-page-header-nav-item-background-color:
534
+ var(
535
+ --tds-page-header-nav-item-background-color-hover
536
+ );
537
+ --tds-page-header-nav-item-border-color:
538
+ var(
539
+ --tds-page-header-nav-item-border-color-hover
540
+ );
541
+ }
542
+
543
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
544
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
545
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
546
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
547
+ background-color: var(--tds-page-header-nav-item-background-color-active);
548
+ }
549
+
550
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
551
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
552
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
553
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
554
+ color: var(--tds-page-header-nav-item-color-disabled);
555
+ cursor: not-allowed;
556
+ background-color: var(--tds-page-header-nav-item-background-color-disabled);
557
+ opacity: 1;
558
+ }
559
+
560
+ @media (min-width: 720px) {
561
+ .tds-page-header__title-bar,
562
+ .tds-page-header--profile .tds-page-header__title-bar {
563
+ flex-direction: row;
564
+ align-items: flex-start;
565
+ }
566
+
567
+ .tds-page-header__primary {
568
+ width: auto;
569
+ }
570
+
571
+ [slot="actions"],
572
+ .tds-page-header__actions {
573
+ margin-left: auto;
574
+ }
575
+
576
+ .has-multi-actions.tds-page-header [slot="actions"],
577
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
578
+ flex-flow: row wrap;
579
+ margin-top: var(--t-spacing-half);
580
+ }
581
+ }
582
+
575
583
  /**
576
584
  * Do not edit directly, this file was auto-generated.
577
585
  */
@@ -796,6 +804,39 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
796
804
  --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
797
805
  --t-fill-color-product-staff-dark: hsl(328, 100%, 38%);
798
806
  --t-fill-color-product-staff-darker: hsl(328, 100%, 33%);
807
+ --t-fill-color-product-accounts-gradient-brand: linear-gradient(-45deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
808
+ --t-fill-color-product-accounts-gradient-page: linear-gradient(-21.717456154496844deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
809
+ --t-fill-color-product-accounts-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
810
+ --t-fill-color-product-api-gradient-brand: linear-gradient(-90deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
811
+ --t-fill-color-product-calendar-gradient-brand: linear-gradient(-45deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
812
+ --t-fill-color-product-calendar-gradient-page: linear-gradient(-21.717456154496844deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
813
+ --t-fill-color-product-calendar-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(9, 60%, 93%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
814
+ --t-fill-color-product-cc-gradient-brand: linear-gradient(-45deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
815
+ --t-fill-color-product-checkins-gradient-brand: linear-gradient(-45deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
816
+ --t-fill-color-product-checkins-gradient-page: linear-gradient(-21.717456154496844deg, hsl(283, 21%, 77%), hsl(227, 36%, 78%) 41.999998688697815%, hsl(204, 67%, 73%));
817
+ --t-fill-color-product-checkins-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 41.999998688697815%, hsl(204, 67%, 92%));
818
+ --t-fill-color-product-giving-gradient-brand: linear-gradient(0deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
819
+ --t-fill-color-product-giving-gradient-page: linear-gradient(-21.717456154496844deg, hsl(42, 84%, 80%), hsl(255, 21%, 89%) 58.49999785423279%, hsl(204, 67%, 73%));
820
+ --t-fill-color-product-giving-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(42, 87%, 94%), hsl(260, 18%, 97%) 58.49999785423279%, hsl(204, 67%, 92%));
821
+ --t-fill-color-product-groups-gradient-brand: linear-gradient(-45deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
822
+ --t-fill-color-product-groups-gradient-page: linear-gradient(-21.717456154496844deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
823
+ --t-fill-color-product-groups-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
824
+ --t-fill-color-product-headcounts-gradient-brand: linear-gradient(-45deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
825
+ --t-fill-color-product-home-gradient-page: linear-gradient(-21.717456154496844deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
826
+ --t-fill-color-product-home-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
827
+ --t-fill-color-product-musicstand-gradient-brand: linear-gradient(-45deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
828
+ --t-fill-color-product-people-gradient-brand: linear-gradient(-45deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
829
+ --t-fill-color-product-people-gradient-page: linear-gradient(-21.717456154496844deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
830
+ --t-fill-color-product-people-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
831
+ --t-fill-color-product-publishing-gradient-brand: linear-gradient(-45deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
832
+ --t-fill-color-product-publishing-gradient-page: linear-gradient(-21.717456154496844deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 44.999998807907104%, hsl(204, 67%, 73%));
833
+ --t-fill-color-product-publishing-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 44.999998807907104%, hsl(204, 67%, 92%));
834
+ --t-fill-color-product-registrations-gradient-brand: linear-gradient(-45deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
835
+ --t-fill-color-product-registrations-gradient-page: linear-gradient(-21.717456154496844deg, hsl(175, 27%, 74%), hsl(196, 46%, 73%) 39.500001072883606%, hsl(204, 67%, 73%));
836
+ --t-fill-color-product-registrations-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(175, 28%, 92%), hsl(196, 46%, 92%) 39.500001072883606%, hsl(204, 67%, 92%));
837
+ --t-fill-color-product-services-gradient-brand: linear-gradient(-45deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
838
+ --t-fill-color-product-services-gradient-page: linear-gradient(-21.717456154496844deg, hsl(89, 31%, 73%), hsl(122, 29%, 78%) 39.500001072883606%, hsl(204, 67%, 73%));
839
+ --t-fill-color-product-services-gradient-tint: linear-gradient(-21.717456154496844deg, hsl(88, 32%, 92%), hsl(126, 29%, 93%) 39.500001072883606%, hsl(204, 67%, 92%));
799
840
  --t-fill-color-tag-gray-010: hsl(0, 0%, 93%);
800
841
  --t-fill-color-tag-gray-020: hsl(0, 0%, 88%);
801
842
  --t-fill-color-tag-gray-030: hsl(0, 0%, 88%);