@planningcenter/tapestry 1.5.1-qa-259.0 → 1.5.1-rc.1

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 (3) hide show
  1. package/dist/webComponents.css +527 -527
  2. package/dist/webComponents.css.map +1 -1
  3. package/package.json +4 -4
package/dist/webComponents.css CHANGED
@@ -1,156 +1,460 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
-
4
- @media (prefers-reduced-motion: no-preference) {
5
-
6
- :root {
7
- interpolate-size: allow-keywords;
8
- }
3
+ @layer t-critical {
4
+ tds-page-header:not(.hydrated) {
5
+ display: none;
9
6
  }
7
+ }
10
8
 
11
- @layer tds-component {
12
- tds-sidenav {
13
- --tds-sidenav-indent: 12px;
14
- --tds-sidenav-item-depth: 0;
15
-
16
- --tds-sidenav-item-transition: background-color 0.2s
17
- cubic-bezier(0.19, 0.91, 0.38, 1);
18
-
19
- --tds-sidenav-item-background-hover: var(
20
- --t-fill-color-button-interaction-ghost-hover
9
+ @layer t-component {
10
+ .tds-page-header {
11
+ --tds-page-header-background-color: var(
12
+ --t-fill-color-product-current-gradient-tint,
13
+ var(--t-surface-color-card)
21
14
  );
22
- --tds-sidenav-item-background-active: var(
23
- --t-fill-color-button-interaction-ghost-active
15
+ --tds-page-header-background-color-inactive: var(
16
+ --t-fill-color-transparency-dark-010
24
17
  );
25
- --tds-sidenav-item-background-selected: var(
26
- --t-fill-color-button-interaction-ghost-active
18
+ --tds-page-header-color: var(--t-text-color-default-secondary);
19
+ --tds-page-header-headline-color: var(--t-text-color-default-headline);
20
+ --tds-page-header-padding-x: var(--t-spacing-2);
21
+ --tds-page-header-padding-y: var(--t-spacing-2);
22
+ --tds-page-header-nav-padding-x: var(
23
+ --tds-page-header-padding-x,
24
+ var(--t-spacing-3)
25
+ );
26
+ --tds-page-header-nav-background: linear-gradient(
27
+ 180deg,
28
+ rgba(0, 0, 0, 0) 0%,
29
+ rgba(0, 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: var(
35
+ --t-fill-color-transparency-light-060
27
36
  );
37
+ --tds-page-header-nav-item-border-width: 0;
28
38
 
29
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
30
- --tds-sidenav-item-nested-border-color-hover: var(
31
- --t-fill-color-neutral-050
39
+ --tds-page-header-nav-item-border-color: var(
40
+ --tds-page-header-nav-item-background-color
32
41
  );
33
- --tds-sidenav-item-nested-border-color-selected: var(
34
- --t-border-color-status-info
42
+ --tds-page-header-nav-item-border-bottom-color: var(
43
+ --t-border-color-default-base
35
44
  );
36
45
 
37
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
38
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
39
- }
46
+ --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
47
+ --tds-page-header-nav-item-background-color-hover: var(
48
+ --t-fill-color-neutral-080
49
+ );
50
+ --tds-page-header-nav-item-border-color-hover: var(
51
+ --tds-page-header-nav-item-background-color-hover
52
+ );
40
53
 
41
- .is-classic tds-sidenav,
42
- .tds-sidenav--theme-gray {
43
- --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
44
- --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
45
- --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
46
- --tds-sidenav-item-nested-border-color-hover: var(
47
- --t-fill-color-neutral-050
54
+ --tds-page-header-nav-item-background-color-active: var(
55
+ --t-fill-color-neutral-060
48
56
  );
49
- --tds-sidenav-item-nested-border-color-selected: var(
50
- --t-fill-color-neutral-010
57
+ --tds-page-header-nav-item-border-color-active: var(
58
+ --tds-page-header-nav-item-background-color-hover
51
59
  );
52
- }
53
- }
54
60
 
55
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
56
- display: flex;
57
- }
61
+ --tds-page-header-nav-item-color-disabled: var(
62
+ --t-text-color-default-disabled
63
+ );
64
+ --tds-page-header-nav-item-background-color-disabled: var(
65
+ --t-fill-color-neutral-080
66
+ );
67
+ --tds-page-header-nav-item-border-color-disabled: var(
68
+ --tds-page-header-nav-item-background-color-disabled
69
+ );
58
70
 
59
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
60
- flex-direction: column;
61
- gap: var(--t-spacing-half);
62
- width: 100%;
71
+ --tds-page-header-nav-item-color-selected: var(
72
+ --t-text-color-default-primary
73
+ );
74
+ --tds-page-header-nav-item-border-color-selected: var(
75
+ --t-border-color-default-base
76
+ );
77
+ --tds-page-header-nav-item-background-color-selected: var(
78
+ --t-fill-color-neutral-100
79
+ );
80
+ --tds-page-header-nav-item-border-bottom-color-selected: var(
81
+ --tds-page-header-nav-item-background-color-selected
82
+ );
83
+ --tds-page-header-nav-item-indicator-color: var(
84
+ --t-icon-color-status-warning-primary
85
+ );
63
86
  }
64
87
 
65
- .tds-sidenav-section-list {
66
- width: 100%;
67
- padding: 0;
68
- margin: 0;
69
- list-style: none;
88
+ @media (min-width: 720px) {
89
+ .tds-page-header {
90
+ --tds-page-header-background-color: var(--t-surface-color-card);
91
+ --tds-page-header-padding-x: var(--t-spacing-3);
92
+ --tds-page-header-nav-background: transparent;
93
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
94
+ --tds-page-header-nav-item-border-width: 1px;
95
+ --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
96
+ --tds-page-header-nav-item-background-color: var(
97
+ --t-fill-color-neutral-070
98
+ );
99
+ }
100
+ }
70
101
  }
71
102
 
72
- .tds-sidenav-section-header {
103
+ .tds-page-header {
73
104
  display: flex;
74
- align-items: baseline;
75
- justify-content: space-between;
76
- padding-top: var(--t-spacing-2);
105
+ flex-direction: column;
106
+ padding-top: var(--tds-page-header-padding-y);
107
+ color: var(--tds-page-header-color);
108
+ background: var(--tds-page-header-background-color);
109
+ border-bottom: 1px solid var(--t-border-color-default-base);
77
110
  }
78
111
 
79
- .tds-sidenav-section-header h2 {
80
- margin: 0;
81
- font-size: var(--t-font-size-sm);
82
- font-weight: var(--t-font-weight-semibold);
83
- color: var(--t-text-color-default-secondary);
84
- text-transform: uppercase;
85
- line-height: 1.35;
86
- }
87
-
88
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
89
- margin-top: 0;
90
- }
112
+ .tds-page-header:not(.has-nav) {
113
+ padding-bottom: var(--tds-page-header-padding-y);
114
+ }
91
115
 
92
- .tds-sidenav-section-header [slot="label-actions"] {
93
- display: flex;
94
- align-items: center;
95
- gap: var(--t-spacing-half);
96
- }
116
+ .tds-page-header.inactive {
117
+ background-color: var(--tds-page-header-background-color-inactive);
118
+ }
97
119
 
98
- .tds-sidenav-section [slot="section-actions"] {
120
+ .tds-page-header__title-bar {
99
121
  display: flex;
100
- align-items: center;
101
- min-height: 42px;
102
- padding: var(--t-spacing-1) 0;
103
- gap: 12px;
122
+ flex-direction: column;
123
+ gap: var(--t-spacing-2) var(--t-spacing-1);
124
+ align-items: flex-start;
125
+ justify-content: space-between;
126
+ padding: 0 var(--tds-page-header-padding-x);
104
127
  }
105
128
 
106
- .tds-sidenav-section-list,
107
- .tds-sidenav-item {
108
- width: 100%;
109
- padding: 0;
110
- margin: 0;
129
+ .tds-page-header--profile > .tds-page-header__title-bar {
130
+ align-items: center;
111
131
  }
112
132
 
113
- .tds-sidenav-item :is(a,button) {
114
- position: relative;
115
- display: flex;
116
- gap: 12px;
117
- align-items: center;
118
- width: 100%;
119
- padding: 12px;
120
- overflow: hidden;
121
- font-size: var(--t-font-size-sm);
122
- line-height: 18px;
123
- color: var(--t-text-color-default-headline);
124
- white-space: nowrap;
125
- text-decoration: none;
126
- -webkit-appearance: none;
127
- -moz-appearance: none;
128
- appearance: none;
129
- cursor: pointer;
130
- background-color: var(--tds-sidenav-item-background, transparent);
131
- border: 0;
132
- border-radius: var(--t-border-radius-default);
133
- transition: var(--tds-sidenav-item-transition);
134
- }
133
+ .tds-page-header__primary {
134
+ flex: 1 1 max-content;
135
+ min-width: 0;
136
+ max-width: 100%;
137
+ }
135
138
 
136
- :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)) {
137
- display: block;
138
- flex: 1;
139
- overflow: hidden;
140
- text-overflow: ellipsis;
141
- text-align: left;
142
- white-space: nowrap;
143
- }
139
+ .tds-page-header__primary h1 {
140
+ margin: 0;
141
+ font-size: var(--t-font-size-3xl);
142
+ font-weight: var(--t-font-weight-normal);
143
+ line-height: 40px;
144
+ color: var(--tds-page-header-headline-color);
145
+ overflow-wrap: break-word;
146
+ }
144
147
 
145
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
146
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
147
- color: var(--t-text-color-default-headline);
148
- text-decoration: none;
149
- }
148
+ .has-multi-actions.tds-page-header [slot="actions"],
149
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
150
+ display: flex;
151
+ flex-flow: row wrap;
152
+ gap: var(--t-spacing-half) var(--t-spacing-1);
153
+ align-items: flex-start;
154
+ justify-content: flex-start;
155
+ min-width: 0;
156
+ }
150
157
 
151
- :is(.tds-sidenav-item :is(a,button)):active {
152
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
153
- }
158
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
159
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
160
+ .tds-page-header nav[slot="navigation"] ul,
161
+ .tds-page-header nav.tds-page-header__nav ul {
162
+ display: flex;
163
+ gap: var(--t-spacing-half);
164
+ padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
165
+ margin: 0 0 -1px;
166
+ overflow: auto;
167
+ list-style: none;
168
+ background: var(--tds-page-header-nav-background);
169
+ }
170
+
171
+ .tds-page-header nav[slot="navigation"] a,
172
+ .tds-page-header nav[slot="navigation"] button,
173
+ .tds-page-header nav.tds-page-header__nav a,
174
+ .tds-page-header nav.tds-page-header__nav button {
175
+ position: relative;
176
+ display: inline-flex;
177
+ padding: var(--tds-page-header-nav-item-padding-y)
178
+ var(--tds-page-header-nav-item-padding-x);
179
+ font-size: var(--t-font-size-md);
180
+ color: var(--tds-page-header-nav-item-color);
181
+ white-space: nowrap;
182
+ text-decoration: none;
183
+ -webkit-appearance: none;
184
+ -moz-appearance: none;
185
+ appearance: none;
186
+ cursor: pointer;
187
+ outline-offset: -2px;
188
+ background-color: var(--tds-page-header-nav-item-background-color);
189
+ border: var(--tds-page-header-nav-item-border-width) solid
190
+ var(--tds-page-header-nav-item-border-color);
191
+ border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
192
+ border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
193
+ }
194
+
195
+ .tds-page-header
196
+ nav:is([slot="navigation"], .tds-page-header__nav)
197
+ li:has(.indicator) {
198
+ position: relative;
199
+ }
200
+
201
+ .tds-page-header
202
+ nav:is([slot="navigation"], .tds-page-header__nav)
203
+ li:has(.indicator)
204
+ :is(a, button) {
205
+ -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
206
+ mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
207
+ }
208
+
209
+ .tds-page-header
210
+ nav:is([slot="navigation"], .tds-page-header__nav)
211
+ li:has(.indicator)::before,
212
+ .tds-page-header
213
+ nav:is([slot="navigation"], .tds-page-header__nav)
214
+ li:has(.indicator)::after {
215
+ position: absolute;
216
+ top: -5px;
217
+ right: -2px;
218
+ width: 10px;
219
+ height: 10px;
220
+ content: "";
221
+ background: var(--tds-page-header-nav-item-indicator-color);
222
+ border-radius: 50%;
223
+ }
224
+
225
+ @media (prefers-reduced-motion: no-preference) {
226
+ .tds-page-header
227
+ nav:is([slot="navigation"], .tds-page-header__nav)
228
+ li:has(.indicator)::after {
229
+ animation: indicator-pulse 1.25s ease infinite;
230
+ }
231
+ }
232
+
233
+ .tds-page-header nav[slot="navigation"] a.selected,
234
+ .tds-page-header nav[slot="navigation"] button.selected,
235
+ .tds-page-header nav.tds-page-header__nav a.selected,
236
+ .tds-page-header nav.tds-page-header__nav button.selected {
237
+ --tds-page-header-nav-item-color: var(
238
+ --tds-page-header-nav-item-color-selected
239
+ );
240
+ --tds-page-header-nav-item-border-color: var(
241
+ --tds-page-header-nav-item-border-color-selected
242
+ );
243
+ --tds-page-header-nav-item-background-color: var(
244
+ --tds-page-header-nav-item-background-color-selected
245
+ );
246
+ --tds-page-header-nav-item-border-bottom-color: var(
247
+ --tds-page-header-nav-item-background-color-selected
248
+ );
249
+ }
250
+
251
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
252
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
253
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
254
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
255
+ --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
256
+ --tds-page-header-nav-item-background-color: var(
257
+ --tds-page-header-nav-item-background-color-hover
258
+ );
259
+ --tds-page-header-nav-item-border-color: var(
260
+ --tds-page-header-nav-item-border-color-hover
261
+ );
262
+ }
263
+
264
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
265
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
266
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
267
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
268
+ background-color: var(--tds-page-header-nav-item-background-color-active);
269
+ }
270
+
271
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
272
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
273
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
274
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
275
+ color: var(--tds-page-header-nav-item-color-disabled);
276
+ cursor: not-allowed;
277
+ background-color: var(--tds-page-header-nav-item-background-color-disabled);
278
+ opacity: 1;
279
+ }
280
+
281
+ @media (min-width: 960px) {
282
+ .tds-page-header__title-bar,
283
+ .tds-page-header--profile .tds-page-header__title-bar {
284
+ flex-flow: row nowrap;
285
+ row-gap: 12px;
286
+ align-items: flex-start;
287
+ }
288
+
289
+ .has-multi-actions.tds-page-header [slot="actions"],
290
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
291
+ justify-content: flex-end;
292
+ margin-top: var(--t-spacing-half);
293
+ }
294
+ }
295
+
296
+ @keyframes indicator-pulse {
297
+ 0% {
298
+ opacity: 0.3;
299
+ transform: scale(0.9);
300
+ }
301
+ 100% {
302
+ opacity: 0;
303
+ transform: scale(1.75);
304
+ }
305
+ }
306
+
307
+
308
+ @media (prefers-reduced-motion: no-preference) {
309
+
310
+ :root {
311
+ interpolate-size: allow-keywords;
312
+ }
313
+ }
314
+
315
+ @layer tds-component {
316
+ tds-sidenav {
317
+ --tds-sidenav-indent: 12px;
318
+ --tds-sidenav-item-depth: 0;
319
+
320
+ --tds-sidenav-item-transition: background-color 0.2s
321
+ cubic-bezier(0.19, 0.91, 0.38, 1);
322
+
323
+ --tds-sidenav-item-background-hover: var(
324
+ --t-fill-color-button-interaction-ghost-hover
325
+ );
326
+ --tds-sidenav-item-background-active: var(
327
+ --t-fill-color-button-interaction-ghost-active
328
+ );
329
+ --tds-sidenav-item-background-selected: var(
330
+ --t-fill-color-button-interaction-ghost-active
331
+ );
332
+
333
+ --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
334
+ --tds-sidenav-item-nested-border-color-hover: var(
335
+ --t-fill-color-neutral-050
336
+ );
337
+ --tds-sidenav-item-nested-border-color-selected: var(
338
+ --t-border-color-status-info
339
+ );
340
+
341
+ --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
342
+ --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
343
+ }
344
+
345
+ .is-classic tds-sidenav,
346
+ .tds-sidenav--theme-gray {
347
+ --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
348
+ --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
349
+ --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
350
+ --tds-sidenav-item-nested-border-color-hover: var(
351
+ --t-fill-color-neutral-050
352
+ );
353
+ --tds-sidenav-item-nested-border-color-selected: var(
354
+ --t-fill-color-neutral-010
355
+ );
356
+ }
357
+ }
358
+
359
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
360
+ display: flex;
361
+ }
362
+
363
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
364
+ flex-direction: column;
365
+ gap: var(--t-spacing-half);
366
+ width: 100%;
367
+ }
368
+
369
+ .tds-sidenav-section-list {
370
+ width: 100%;
371
+ padding: 0;
372
+ margin: 0;
373
+ list-style: none;
374
+ }
375
+
376
+ .tds-sidenav-section-header {
377
+ display: flex;
378
+ align-items: baseline;
379
+ justify-content: space-between;
380
+ padding-top: var(--t-spacing-2);
381
+ }
382
+
383
+ .tds-sidenav-section-header h2 {
384
+ margin: 0;
385
+ font-size: var(--t-font-size-sm);
386
+ font-weight: var(--t-font-weight-semibold);
387
+ color: var(--t-text-color-default-secondary);
388
+ text-transform: uppercase;
389
+ line-height: 1.35;
390
+ }
391
+
392
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
393
+ margin-top: 0;
394
+ }
395
+
396
+ .tds-sidenav-section-header [slot="label-actions"] {
397
+ display: flex;
398
+ align-items: center;
399
+ gap: var(--t-spacing-half);
400
+ }
401
+
402
+ .tds-sidenav-section [slot="section-actions"] {
403
+ display: flex;
404
+ align-items: center;
405
+ min-height: 42px;
406
+ padding: var(--t-spacing-1) 0;
407
+ gap: 12px;
408
+ }
409
+
410
+ .tds-sidenav-section-list,
411
+ .tds-sidenav-item {
412
+ width: 100%;
413
+ padding: 0;
414
+ margin: 0;
415
+ }
416
+
417
+ .tds-sidenav-item :is(a,button) {
418
+ position: relative;
419
+ display: flex;
420
+ gap: 12px;
421
+ align-items: center;
422
+ width: 100%;
423
+ padding: 12px;
424
+ overflow: hidden;
425
+ font-size: var(--t-font-size-sm);
426
+ line-height: 18px;
427
+ color: var(--t-text-color-default-headline);
428
+ white-space: nowrap;
429
+ text-decoration: none;
430
+ -webkit-appearance: none;
431
+ -moz-appearance: none;
432
+ appearance: none;
433
+ cursor: pointer;
434
+ background-color: var(--tds-sidenav-item-background, transparent);
435
+ border: 0;
436
+ border-radius: var(--t-border-radius-default);
437
+ transition: var(--tds-sidenav-item-transition);
438
+ }
439
+
440
+ :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)) {
441
+ display: block;
442
+ flex: 1;
443
+ overflow: hidden;
444
+ text-overflow: ellipsis;
445
+ text-align: left;
446
+ white-space: nowrap;
447
+ }
448
+
449
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
450
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
451
+ color: var(--t-text-color-default-headline);
452
+ text-decoration: none;
453
+ }
454
+
455
+ :is(.tds-sidenav-item :is(a,button)):active {
456
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
457
+ }
154
458
 
155
459
  :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
156
460
  overflow: hidden;
@@ -216,435 +520,131 @@
216
520
  top: 0;
217
521
  bottom: 0;
218
522
  left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
219
- width: 2px;
220
- content: "";
221
- background-color: var(--tds-sidenav-item-nested-border-color);
222
- transition: var(--tds-sidenav-item-transition);
223
- }
224
-
225
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
226
- position: absolute;
227
- inset: 0 0 0
228
- calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
229
- z-index: -1;
230
- height: 100%;
231
- content: "";
232
- background-color: var(--tds-sidenav-item-background);
233
- border-radius: 0 var(--t-border-radius-default)
234
- var(--t-border-radius-default) 0;
235
- transition: var(--tds-sidenav-item-transition);
236
- }
237
-
238
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible {
239
- --tds-sidenav-item-nested-border-color: var(
240
- --tds-sidenav-item-nested-border-color-hover
241
- );
242
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
243
- }
244
-
245
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
246
- --tds-sidenav-item-nested-border-color: var(
247
- --tds-sidenav-item-nested-border-color-selected
248
- );
249
- }
250
-
251
- .tds-sidenav-responsive-header {
252
- display: flex;
253
- gap: var(--t-spacing-2);
254
- align-items: center;
255
- width: 100%;
256
- }
257
-
258
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
259
- display: flex;
260
- align-items: center;
261
- justify-content: center;
262
- order: 0;
263
- height: var(--t-container-size-md);
264
- padding: 3px var(--t-spacing-1);
265
- background-color: var(--t-fill-color-button-neutral-outline-dim-default);
266
- border: 1px solid var(--t-border-color-button-neutral);
267
- border-radius: var(--t-border-radius-md);
268
- }
269
-
270
- :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 {
271
- background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
272
- }
273
-
274
- :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
275
- background-color: var(--t-fill-color-button-neutral-outline-dim-active);
276
- }
277
-
278
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
279
- flex: 1;
280
- order: 1;
281
- margin: 0;
282
- font-size: var(--t-font-size-lg);
283
- font-weight: var(--t-font-weight-medium);
284
- color: var(--t-text-color-default-headline);
285
- }
286
-
287
- @media (max-width: 719px) {
288
- .tds-sidenav-collapse {
289
- position: absolute;
290
- z-index: 10001;
291
- display: none;
292
- max-width: min(448px, calc(100vw - 48px));
293
- padding: 0;
294
- margin: 12px 0;
295
- overflow: hidden;
296
- outline: 0;
297
- background: var(--t-surface-color-card);
298
- border: 0;
299
- border-radius: 6px;
300
- box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.25);
301
- will-change: transform;
302
- position-area: bottom span-right;
303
- }
304
-
305
- .tds-sidenav-collapse:popover-open,
306
- .tds-sidenav-collapse.\:popover-open {
307
- display: flex;
308
- }
309
-
310
- .tds-sidenav-scroll-container {
311
- --webkit-overflow-scrolling: touch;
312
- display: block;
313
- width: 100%;
314
- height: -moz-fit-content;
315
- height: fit-content;
316
- padding: var(--t-spacing-2);
317
- overflow-y: auto;
318
- }
319
-
320
- .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
321
- display: none;
322
- }
323
- }
324
-
325
- @media (min-width: 720px) {
326
- .tds-sidenav-responsive-header {
327
- display: none;
328
- }
329
- }
330
-
331
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
332
- display: none;
333
- }
334
-
335
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
336
- display: block;
337
- }
338
-
339
- tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
340
- display: flex;
341
- flex-direction: column;
342
- }
343
-
344
- @layer t-critical {
345
- tds-page-header:not(.hydrated) {
346
- display: none;
347
- }
348
- }
349
-
350
- @layer t-component {
351
- .tds-page-header {
352
- --tds-page-header-background-color: var(
353
- --t-fill-color-product-current-gradient-tint,
354
- var(--t-surface-color-card)
355
- );
356
- --tds-page-header-background-color-inactive: var(
357
- --t-fill-color-transparency-dark-010
358
- );
359
- --tds-page-header-color: var(--t-text-color-default-secondary);
360
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
361
- --tds-page-header-padding-x: var(--t-spacing-2);
362
- --tds-page-header-padding-y: var(--t-spacing-2);
363
- --tds-page-header-nav-padding-x: var(
364
- --tds-page-header-padding-x,
365
- var(--t-spacing-3)
366
- );
367
- --tds-page-header-nav-background: linear-gradient(
368
- 180deg,
369
- rgba(0, 0, 0, 0) 0%,
370
- rgba(0, 0, 0, 0.1) 100%
371
- );
372
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
373
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
374
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
375
- --tds-page-header-nav-item-background-color: var(
376
- --t-fill-color-transparency-light-060
377
- );
378
- --tds-page-header-nav-item-border-width: 0;
379
-
380
- --tds-page-header-nav-item-border-color: var(
381
- --tds-page-header-nav-item-background-color
382
- );
383
- --tds-page-header-nav-item-border-bottom-color: var(
384
- --t-border-color-default-base
385
- );
386
-
387
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
388
- --tds-page-header-nav-item-background-color-hover: var(
389
- --t-fill-color-neutral-080
390
- );
391
- --tds-page-header-nav-item-border-color-hover: var(
392
- --tds-page-header-nav-item-background-color-hover
393
- );
394
-
395
- --tds-page-header-nav-item-background-color-active: var(
396
- --t-fill-color-neutral-060
397
- );
398
- --tds-page-header-nav-item-border-color-active: var(
399
- --tds-page-header-nav-item-background-color-hover
400
- );
401
-
402
- --tds-page-header-nav-item-color-disabled: var(
403
- --t-text-color-default-disabled
404
- );
405
- --tds-page-header-nav-item-background-color-disabled: var(
406
- --t-fill-color-neutral-080
407
- );
408
- --tds-page-header-nav-item-border-color-disabled: var(
409
- --tds-page-header-nav-item-background-color-disabled
410
- );
411
-
412
- --tds-page-header-nav-item-color-selected: var(
413
- --t-text-color-default-primary
414
- );
415
- --tds-page-header-nav-item-border-color-selected: var(
416
- --t-border-color-default-base
417
- );
418
- --tds-page-header-nav-item-background-color-selected: var(
419
- --t-fill-color-neutral-100
420
- );
421
- --tds-page-header-nav-item-border-bottom-color-selected: var(
422
- --tds-page-header-nav-item-background-color-selected
423
- );
424
- --tds-page-header-nav-item-indicator-color: var(
425
- --t-icon-color-status-warning-primary
426
- );
427
- }
428
-
429
- @media (min-width: 720px) {
430
- .tds-page-header {
431
- --tds-page-header-background-color: var(--t-surface-color-card);
432
- --tds-page-header-padding-x: var(--t-spacing-3);
433
- --tds-page-header-nav-background: transparent;
434
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
435
- --tds-page-header-nav-item-border-width: 1px;
436
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
437
- --tds-page-header-nav-item-background-color: var(
438
- --t-fill-color-neutral-070
439
- );
440
- }
441
- }
442
- }
443
-
444
- .tds-page-header {
445
- display: flex;
446
- flex-direction: column;
447
- padding-top: var(--tds-page-header-padding-y);
448
- color: var(--tds-page-header-color);
449
- background: var(--tds-page-header-background-color);
450
- border-bottom: 1px solid var(--t-border-color-default-base);
451
- }
452
-
453
- .tds-page-header:not(.has-nav) {
454
- padding-bottom: var(--tds-page-header-padding-y);
455
- }
456
-
457
- .tds-page-header.inactive {
458
- background-color: var(--tds-page-header-background-color-inactive);
459
- }
460
-
461
- .tds-page-header__title-bar {
462
- display: flex;
463
- flex-direction: column;
464
- gap: var(--t-spacing-2) var(--t-spacing-1);
465
- align-items: flex-start;
466
- justify-content: space-between;
467
- padding: 0 var(--tds-page-header-padding-x);
468
- }
469
-
470
- .tds-page-header--profile > .tds-page-header__title-bar {
471
- align-items: center;
472
- }
523
+ width: 2px;
524
+ content: "";
525
+ background-color: var(--tds-sidenav-item-nested-border-color);
526
+ transition: var(--tds-sidenav-item-transition);
527
+ }
473
528
 
474
- .tds-page-header__primary {
475
- flex: 1 1 max-content;
476
- min-width: 0;
477
- max-width: 100%;
478
- }
529
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
530
+ position: absolute;
531
+ inset: 0 0 0
532
+ calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
533
+ z-index: -1;
534
+ height: 100%;
535
+ content: "";
536
+ background-color: var(--tds-sidenav-item-background);
537
+ border-radius: 0 var(--t-border-radius-default)
538
+ var(--t-border-radius-default) 0;
539
+ transition: var(--tds-sidenav-item-transition);
540
+ }
479
541
 
480
- .tds-page-header__primary h1 {
481
- margin: 0;
482
- font-size: var(--t-font-size-3xl);
483
- font-weight: var(--t-font-weight-normal);
484
- line-height: 40px;
485
- color: var(--tds-page-header-headline-color);
486
- overflow-wrap: break-word;
487
- }
542
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible {
543
+ --tds-sidenav-item-nested-border-color: var(
544
+ --tds-sidenav-item-nested-border-color-hover
545
+ );
546
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
547
+ }
488
548
 
489
- .has-multi-actions.tds-page-header [slot="actions"],
490
- .has-multi-actions.tds-page-header .tds-page-header__actions {
491
- display: flex;
492
- flex-flow: row wrap;
493
- gap: var(--t-spacing-half) var(--t-spacing-1);
494
- align-items: flex-start;
495
- justify-content: flex-start;
496
- min-width: 0;
497
- }
549
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
550
+ --tds-sidenav-item-nested-border-color: var(
551
+ --tds-sidenav-item-nested-border-color-selected
552
+ );
553
+ }
498
554
 
499
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
500
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
501
- .tds-page-header nav[slot="navigation"] ul,
502
- .tds-page-header nav.tds-page-header__nav ul {
555
+ .tds-sidenav-responsive-header {
503
556
  display: flex;
504
- gap: var(--t-spacing-half);
505
- padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
506
- margin: 0 0 -1px;
507
- overflow: auto;
508
- list-style: none;
509
- background: var(--tds-page-header-nav-background);
510
- }
511
-
512
- .tds-page-header nav[slot="navigation"] a,
513
- .tds-page-header nav[slot="navigation"] button,
514
- .tds-page-header nav.tds-page-header__nav a,
515
- .tds-page-header nav.tds-page-header__nav button {
516
- position: relative;
517
- display: inline-flex;
518
- padding: var(--tds-page-header-nav-item-padding-y)
519
- var(--tds-page-header-nav-item-padding-x);
520
- font-size: var(--t-font-size-md);
521
- color: var(--tds-page-header-nav-item-color);
522
- white-space: nowrap;
523
- text-decoration: none;
524
- -webkit-appearance: none;
525
- -moz-appearance: none;
526
- appearance: none;
527
- cursor: pointer;
528
- outline-offset: -2px;
529
- background-color: var(--tds-page-header-nav-item-background-color);
530
- border: var(--tds-page-header-nav-item-border-width) solid
531
- var(--tds-page-header-nav-item-border-color);
532
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
533
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
557
+ gap: var(--t-spacing-2);
558
+ align-items: center;
559
+ width: 100%;
534
560
  }
535
561
 
536
- .tds-page-header
537
- nav:is([slot="navigation"], .tds-page-header__nav)
538
- li:has(.indicator) {
539
- position: relative;
540
- }
562
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
563
+ display: flex;
564
+ align-items: center;
565
+ justify-content: center;
566
+ order: 0;
567
+ height: var(--t-container-size-md);
568
+ padding: 3px var(--t-spacing-1);
569
+ background-color: var(--t-fill-color-button-neutral-outline-dim-default);
570
+ border: 1px solid var(--t-border-color-button-neutral);
571
+ border-radius: var(--t-border-radius-md);
572
+ }
541
573
 
542
- .tds-page-header
543
- nav:is([slot="navigation"], .tds-page-header__nav)
544
- li:has(.indicator)
545
- :is(a, button) {
546
- -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
547
- mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
- }
574
+ :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 {
575
+ background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
576
+ }
549
577
 
550
- .tds-page-header
551
- nav:is([slot="navigation"], .tds-page-header__nav)
552
- li:has(.indicator)::before,
553
- .tds-page-header
554
- nav:is([slot="navigation"], .tds-page-header__nav)
555
- li:has(.indicator)::after {
556
- position: absolute;
557
- top: -5px;
558
- right: -2px;
559
- width: 10px;
560
- height: 10px;
561
- content: "";
562
- background: var(--tds-page-header-nav-item-indicator-color);
563
- border-radius: 50%;
564
- }
578
+ :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
579
+ background-color: var(--t-fill-color-button-neutral-outline-dim-active);
580
+ }
565
581
 
566
- @media (prefers-reduced-motion: no-preference) {
567
- .tds-page-header
568
- nav:is([slot="navigation"], .tds-page-header__nav)
569
- li:has(.indicator)::after {
570
- animation: indicator-pulse 1.25s ease infinite;
582
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
583
+ flex: 1;
584
+ order: 1;
585
+ margin: 0;
586
+ font-size: var(--t-font-size-lg);
587
+ font-weight: var(--t-font-weight-medium);
588
+ color: var(--t-text-color-default-headline);
571
589
  }
572
- }
573
-
574
- .tds-page-header nav[slot="navigation"] a.selected,
575
- .tds-page-header nav[slot="navigation"] button.selected,
576
- .tds-page-header nav.tds-page-header__nav a.selected,
577
- .tds-page-header nav.tds-page-header__nav button.selected {
578
- --tds-page-header-nav-item-color: var(
579
- --tds-page-header-nav-item-color-selected
580
- );
581
- --tds-page-header-nav-item-border-color: var(
582
- --tds-page-header-nav-item-border-color-selected
583
- );
584
- --tds-page-header-nav-item-background-color: var(
585
- --tds-page-header-nav-item-background-color-selected
586
- );
587
- --tds-page-header-nav-item-border-bottom-color: var(
588
- --tds-page-header-nav-item-background-color-selected
589
- );
590
- }
591
-
592
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
593
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
594
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
595
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
596
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
597
- --tds-page-header-nav-item-background-color: var(
598
- --tds-page-header-nav-item-background-color-hover
599
- );
600
- --tds-page-header-nav-item-border-color: var(
601
- --tds-page-header-nav-item-border-color-hover
602
- );
603
- }
604
590
 
605
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
606
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
607
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
608
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
609
- background-color: var(--tds-page-header-nav-item-background-color-active);
610
- }
591
+ @media (max-width: 719px) {
592
+ .tds-sidenav-collapse {
593
+ position: absolute;
594
+ z-index: 10001;
595
+ display: none;
596
+ max-width: min(448px, calc(100vw - 48px));
597
+ padding: 0;
598
+ margin: 12px 0;
599
+ overflow: hidden;
600
+ outline: 0;
601
+ background: var(--t-surface-color-card);
602
+ border: 0;
603
+ border-radius: 6px;
604
+ box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.25);
605
+ will-change: transform;
606
+ position-area: bottom span-right;
607
+ }
611
608
 
612
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
613
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
614
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
615
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
616
- color: var(--tds-page-header-nav-item-color-disabled);
617
- cursor: not-allowed;
618
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
619
- opacity: 1;
620
- }
609
+ .tds-sidenav-collapse:popover-open,
610
+ .tds-sidenav-collapse.\:popover-open {
611
+ display: flex;
612
+ }
621
613
 
622
- @media (min-width: 960px) {
623
- .tds-page-header__title-bar,
624
- .tds-page-header--profile .tds-page-header__title-bar {
625
- flex-flow: row nowrap;
626
- row-gap: 12px;
627
- align-items: flex-start;
614
+ .tds-sidenav-scroll-container {
615
+ --webkit-overflow-scrolling: touch;
616
+ display: block;
617
+ width: 100%;
618
+ height: -moz-fit-content;
619
+ height: fit-content;
620
+ padding: var(--t-spacing-2);
621
+ overflow-y: auto;
628
622
  }
629
623
 
630
- .has-multi-actions.tds-page-header [slot="actions"],
631
- .has-multi-actions.tds-page-header .tds-page-header__actions {
632
- justify-content: flex-end;
633
- margin-top: var(--t-spacing-half);
624
+ .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
625
+ display: none;
634
626
  }
635
627
  }
636
628
 
637
- @keyframes indicator-pulse {
638
- 0% {
639
- opacity: 0.3;
640
- transform: scale(0.9);
641
- }
642
- 100% {
643
- opacity: 0;
644
- transform: scale(1.75);
629
+ @media (min-width: 720px) {
630
+ .tds-sidenav-responsive-header {
631
+ display: none;
645
632
  }
646
633
  }
647
634
 
635
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
636
+ display: none;
637
+ }
638
+
639
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
640
+ display: block;
641
+ }
642
+
643
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
644
+ display: flex;
645
+ flex-direction: column;
646
+ }
647
+
648
648
  /**
649
649
  * Do not edit directly, this file was auto-generated.
650
650
  */