@planningcenter/tapestry 3.1.0 → 3.1.1-rc.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 (9) hide show
  1. package/dist/index.css +113 -137
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +653 -677
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +653 -677
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/unstable.css +113 -137
  8. package/dist/unstable.css.map +1 -1
  9. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -1,290 +1,3 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
6
-
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
25
-
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
28
-
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
-
33
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
35
-
36
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
39
-
40
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
45
- }
46
-
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
49
- }
50
-
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
- }
56
- }
57
-
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
- }
76
- }
77
- }
78
-
79
- .tds-page-header{
80
- display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
- }
87
-
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
90
- }
91
-
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
94
- }
95
-
96
- .tds-page-header__title-bar{
97
- display:flex;
98
- flex-direction:column;
99
- gap:var(--t-spacing-2) var(--t-spacing-1);
100
- align-items:flex-start;
101
- justify-content:space-between;
102
- padding:0 var(--tds-page-header-padding-x);
103
- }
104
-
105
- .tds-page-header--profile > .tds-page-header__title-bar{
106
- align-items:center;
107
- }
108
-
109
- .tds-page-header__primary{
110
- width:100%;
111
- }
112
-
113
- .tds-page-header__primary h1{
114
- margin:0;
115
- font-size:var(--tds-page-header-headline-font-size);
116
- font-weight:var(--t-font-weight-normal);
117
- line-height:32px;
118
- color:var(--tds-page-header-headline-color);
119
- overflow-wrap:break-word;
120
- }
121
-
122
- .tds-page-header [slot="actions"],
123
- .tds-page-header .tds-page-header__actions{
124
- width:100%;
125
- }
126
-
127
- .has-multi-actions.tds-page-header [slot="actions"],
128
- .has-multi-actions.tds-page-header .tds-page-header__actions{
129
- display:flex;
130
- flex-flow:row wrap;
131
- gap:var(--t-spacing-half) var(--t-spacing-1);
132
- align-items:flex-start;
133
- justify-content:flex-start;
134
- min-width:0;
135
- }
136
-
137
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
138
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
139
- .tds-page-header nav[slot="navigation"] ul,
140
- .tds-page-header nav.tds-page-header__nav ul{
141
- display:flex;
142
- gap:var(--tds-page-header-nav-gap);
143
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
144
- margin:0 0 -1px;
145
- overflow:auto;
146
- list-style:none;
147
- background:var(--tds-page-header-nav-background);
148
- }
149
-
150
- .tds-page-header nav[slot="navigation"] a,
151
- .tds-page-header nav[slot="navigation"] button,
152
- .tds-page-header nav.tds-page-header__nav a,
153
- .tds-page-header nav.tds-page-header__nav button{
154
- position:relative;
155
- display:inline-flex;
156
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
157
- font-size:var(--t-font-size-sm);
158
- line-height:22px;
159
- color:var(--tds-page-header-nav-item-color);
160
- white-space:nowrap;
161
- text-decoration:none;
162
- -webkit-appearance:none;
163
- -moz-appearance:none;
164
- appearance:none;
165
- cursor:pointer;
166
- outline-offset:-2px;
167
- background-color:var(--tds-page-header-nav-item-background-color);
168
- background-clip:padding-box;
169
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
170
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
171
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
172
- }
173
-
174
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
175
- position:relative;
176
- }
177
-
178
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
179
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
180
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
181
- }
182
-
183
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
184
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
185
- position:absolute;
186
- top:-5px;
187
- right:-2px;
188
- width:10px;
189
- height:10px;
190
- content:"";
191
- background:var(--tds-page-header-nav-item-indicator-color);
192
- border-radius:50%;
193
- }
194
-
195
- @media (prefers-reduced-motion: no-preference){
196
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
197
- animation:indicator-pulse 1.25s ease infinite;
198
- }
199
- }
200
-
201
- .tds-page-header nav[slot="navigation"] a.selected,
202
- .tds-page-header nav[slot="navigation"] button.selected,
203
- .tds-page-header nav.tds-page-header__nav a.selected,
204
- .tds-page-header nav.tds-page-header__nav button.selected{
205
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
206
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
207
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
208
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
209
- }
210
-
211
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
212
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
213
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
214
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
215
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
216
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
217
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
218
- }
219
-
220
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
221
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
222
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
223
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
224
- background-color:var(--tds-page-header-nav-item-background-color-active);
225
- border-color:var(--tds-page-header-nav-item-border-color-active);
226
- }
227
-
228
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
229
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
230
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
231
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
232
- color:var(--tds-page-header-nav-item-color-disabled);
233
- cursor:not-allowed;
234
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
235
- opacity:1;
236
- }
237
-
238
- @media (min-width: 960px){
239
- .tds-page-header__primary{
240
- flex:1 1 max-content;
241
- width:auto;
242
- min-width:0;
243
- max-width:100%;
244
- }
245
-
246
- .tds-page-header__title-bar,
247
- .tds-page-header--profile .tds-page-header__title-bar{
248
- flex-flow:row nowrap;
249
- row-gap:12px;
250
- align-items:flex-start;
251
- }
252
-
253
- .tds-page-header [slot="actions"],
254
- .tds-page-header .tds-page-header__actions{
255
- width:auto;
256
- }
257
-
258
- .has-multi-actions.tds-page-header [slot="actions"],
259
- .has-multi-actions.tds-page-header .tds-page-header__actions{
260
- justify-content:flex-end;
261
- }
262
- }
263
-
264
- .tds-page-header-phone,
265
- .tds-page-header-email{
266
- color:var(--tds-page-header-color);
267
- white-space:nowrap;
268
- }
269
-
270
- .tds-page-header-email{
271
- max-width:100%;
272
- overflow:hidden;
273
- text-overflow:ellipsis;
274
- }
275
-
276
- @keyframes indicator-pulse{
277
- 0%{
278
- opacity:.3;
279
- transform:scale(.9);
280
- }
281
-
282
- 100%{
283
- opacity:0;
284
- transform:scale(1.75);
285
- }
286
- }
287
-
288
1
  .tds-checkbox{
289
2
  --tds-checkbox-font-size:var(--t-font-size-md);
290
3
  --tds-checkbox-cursor:pointer;
@@ -479,42 +192,454 @@
479
192
  --tds-checkbox-description-line-height:1.3;
480
193
  }
481
194
 
482
- .tds-radio{
483
- --tds-radio-font-size:var(--t-font-size-md);
484
- --tds-radio-cursor:pointer;
485
- --tds-radio-line-height:1.4;
486
- --tds-radio-transition-property:border-width;
487
195
 
488
- --tds-radio-input-size:var(--t-element-size-md);
489
- --tds-radio-input-border-radius:var(--t-border-radius-round);
490
- --tds-radio-input-border-color:var(--t-form-border-color);
491
- --tds-radio-input-border-width:var(--t-form-border-width);
492
- --tds-radio-input-background-color:transparent;
196
+ @media (prefers-reduced-motion: no-preference){
493
197
 
494
- --tds-radio-label-color:var(--t-form-color);
198
+ :root{
199
+ interpolate-size:allow-keywords;
200
+ }
201
+ }
495
202
 
496
- --tds-radio-description-font-size:var(--t-font-size-sm);
497
- --tds-radio-description-line-height:1.35;
498
- --tds-radio-description-color:var(--t-text-color-secondary);
203
+ @layer tds-component{
204
+ tds-sidenav,
205
+ .tds-sidenav{
206
+ --tds-sidenav-indent:12px;
207
+ --tds-sidenav-item-depth:0;
499
208
 
500
- position:relative;
501
- display:inline-grid;
502
- grid-template-columns:auto;
503
- grid-auto-columns:1fr;
504
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
505
- line-height:var(--tds-radio-line-height);
506
- cursor:var(--tds-radio-cursor);
507
- -webkit-user-select:none;
508
- -moz-user-select:none;
509
- user-select:none;
510
- }
209
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
511
210
 
512
- .tds-radio label{
513
- grid-area:1 / 2;
514
- font-size:var(--tds-radio-font-size);
515
- font-weight:var(--t-font-weight-normal);
516
- color:var(--tds-radio-label-color);
517
- cursor:var(--tds-radio-cursor);
211
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
212
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
213
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
214
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
215
+
216
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
217
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
218
+ --tds-sidenav-item-nested-background-selected:transparent;
219
+
220
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
221
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
222
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
223
+
224
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
225
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
226
+ }
227
+
228
+ .tds-sidenav--theme-gray{
229
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
230
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
231
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
232
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
233
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
234
+ }
235
+ }
236
+
237
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
238
+ display:flex;
239
+ }
240
+
241
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
242
+ flex-direction:column;
243
+ gap:var(--t-spacing-half);
244
+ width:100%;
245
+ }
246
+
247
+ .tds-sidenav-section-list{
248
+ width:100%;
249
+ padding:0;
250
+ margin:0;
251
+ list-style:none;
252
+ }
253
+
254
+ .tds-sidenav-section-header{
255
+ display:flex;
256
+ align-items:baseline;
257
+ justify-content:space-between;
258
+ padding-top:var(--t-spacing-2);
259
+ }
260
+
261
+ .tds-sidenav-section-header h2{
262
+ margin:0;
263
+ font-size:var(--t-font-size-sm);
264
+ font-weight:var(--t-font-weight-semibold);
265
+ line-height:1.35;
266
+ color:var(--t-text-color-secondary);
267
+ text-transform:uppercase;
268
+ }
269
+
270
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
271
+ padding-top:0;
272
+ }
273
+
274
+ .tds-sidenav-section-header [slot="label-actions"]{
275
+ display:flex;
276
+ gap:var(--t-spacing-half);
277
+ align-items:center;
278
+ }
279
+
280
+ .tds-sidenav-section [slot="section-actions"]{
281
+ display:flex;
282
+ gap:12px;
283
+ align-items:center;
284
+ min-height:42px;
285
+ padding:var(--t-spacing-1) 0;
286
+ }
287
+
288
+ .tds-sidenav-section-list,
289
+ .tds-sidenav-item{
290
+ width:100%;
291
+ padding:0;
292
+ margin:0;
293
+ }
294
+
295
+ .tds-sidenav-item :is(a,button){
296
+ position:relative;
297
+ display:flex;
298
+ gap:12px;
299
+ align-items:center;
300
+ width:100%;
301
+ padding:12px;
302
+ overflow:hidden;
303
+ font-size:var(--t-font-size-sm);
304
+ line-height:18px;
305
+ color:var(--t-text-color-headline);
306
+ white-space:nowrap;
307
+ text-decoration:none;
308
+ -webkit-appearance:none;
309
+ -moz-appearance:none;
310
+ appearance:none;
311
+ cursor:pointer;
312
+ background-color:var(--tds-sidenav-item-background, transparent);
313
+ border:0;
314
+ border-radius:var(--t-border-radius);
315
+ transition:var(--tds-sidenav-item-transition);
316
+ }
317
+
318
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
319
+ display:block;
320
+ flex:1;
321
+ overflow:hidden;
322
+ text-overflow:ellipsis;
323
+ text-align:left;
324
+ white-space:nowrap;
325
+ }
326
+
327
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
328
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
329
+ color:var(--t-text-color-headline);
330
+ text-decoration:none;
331
+ }
332
+
333
+ :is(.tds-sidenav-item :is(a,button)):active{
334
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
335
+ }
336
+
337
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
338
+ overflow:hidden;
339
+ color:var(--tds-sidenav-item-icon-color);
340
+ }
341
+
342
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
343
+ display:block;
344
+ width:var(--tds-sidenav-item-icon-size);
345
+ height:var(--tds-sidenav-item-icon-size);
346
+ }
347
+
348
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
349
+ --tds-sidenav-indent:19px;
350
+ }
351
+
352
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
353
+ visibility:visible;
354
+ block-size:auto;
355
+ opacity:1;
356
+ }
357
+
358
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
359
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
360
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
361
+
362
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
363
+ font-weight:var(--t-font-weight-semibold);
364
+ }
365
+
366
+ .tds-sidenav-item:has(.tds-sidenav-section){
367
+ display:flex;
368
+ flex-direction:column;
369
+ gap:var(--t-spacing-half);
370
+ }
371
+
372
+ .tds-sidenav-item .tds-sidenav-section-list{
373
+ --tds-sidenav-item-depth:1;
374
+ gap:0;
375
+ }
376
+
377
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
378
+ visibility:hidden;
379
+ block-size:0;
380
+ overflow-y:clip;
381
+ opacity:0;
382
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
383
+ }
384
+
385
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
386
+ --tds-sidenav-item-depth:2;
387
+ }
388
+
389
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
390
+ min-height:var(--t-element-size-2xl);
391
+ padding-block:9px;
392
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
393
+ line-height:1;
394
+ background-color:transparent;
395
+ }
396
+
397
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
398
+ position:absolute;
399
+ top:0;
400
+ bottom:0;
401
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
402
+ width:2px;
403
+ content:"";
404
+ background-color:var(--tds-sidenav-item-nested-border-color);
405
+ transition:var(--tds-sidenav-item-transition);
406
+ }
407
+
408
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
409
+ position:absolute;
410
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
411
+ z-index:-1;
412
+ height:100%;
413
+ content:"";
414
+ background-color:var(--tds-sidenav-item-nested-background);
415
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
416
+ transition:var(--tds-sidenav-item-transition);
417
+ }
418
+
419
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
420
+ display:block;
421
+ text-align:left;
422
+ white-space:normal;
423
+ }
424
+
425
+ :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{
426
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
427
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
428
+ }
429
+
430
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
431
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
432
+ }
433
+
434
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
435
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
436
+ font-weight:var(--t-font-weight-medium);
437
+ }
438
+
439
+ .tds-sidenav-responsive-header{
440
+ display:flex;
441
+ gap:var(--t-spacing-2);
442
+ align-items:center;
443
+ width:100%;
444
+ }
445
+
446
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
447
+ order:0;
448
+ }
449
+
450
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
451
+ flex:1;
452
+ order:1;
453
+ margin:0;
454
+ font-size:var(--t-font-size-lg);
455
+ font-weight:var(--t-font-weight-medium);
456
+ color:var(--t-text-color-headline);
457
+ }
458
+
459
+ @media (max-width: 719px){
460
+ .tds-sidenav-collapse{
461
+ z-index:10001;
462
+ display:none;
463
+ max-width:min(448px, calc(100vw - 48px));
464
+ padding:0;
465
+ margin:12px 0;
466
+ overflow:hidden;
467
+ outline:0;
468
+ background:var(--t-surface-color-card);
469
+ border:0;
470
+ border-radius:6px;
471
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
472
+ will-change:transform;
473
+ position-area:bottom span-right;
474
+ }
475
+
476
+ .tds-sidenav-scroll-container{
477
+ --webkit-overflow-scrolling:touch;
478
+ display:block;
479
+ width:100%;
480
+ height:-moz-fit-content;
481
+ height:fit-content;
482
+ padding:var(--t-spacing-2);
483
+ overflow-y:auto;
484
+ }
485
+
486
+ .tds-sidenav-item :is(a, button) :is(.prefix){
487
+ display:none;
488
+ }
489
+ @supports selector(:popover-open){
490
+ .tds-sidenav-collapse:popover-open{
491
+ display:flex;
492
+ }
493
+ }
494
+ @supports not selector(:popover-open){
495
+ .tds-sidenav-collapse.\:popover-open{
496
+ display:flex;
497
+ }
498
+ }
499
+ }
500
+
501
+ @media (min-width: 720px){
502
+ .tds-sidenav-responsive-header{
503
+ display:none;
504
+ }
505
+ }
506
+
507
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
508
+ display:none;
509
+ }
510
+
511
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
512
+ display:block;
513
+ }
514
+
515
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
516
+ display:flex;
517
+ flex-direction:column;
518
+ }
519
+
520
+ .tds-radio-group{
521
+ --tds-radio-group-font-size:var(--t-font-size-md);
522
+ --tds-radio-group-line-height:1.4;
523
+ --tds-radio-group-gap:var(--t-spacing-1);
524
+
525
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
526
+
527
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
528
+ --tds-radio-group-description-line-height:1.35;
529
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
530
+ --tds-radio-group-description-invalid-icon-display:none;
531
+ display:flex;
532
+ flex-direction:column;
533
+ gap:var(--tds-radio-group-gap);
534
+ padding:0;
535
+ margin:0;
536
+
537
+ font-size:var(--tds-radio-group-font-size);
538
+ line-height:var(--tds-radio-group-line-height);
539
+ border:0;
540
+ }
541
+
542
+ .tds-radio-group legend{
543
+ padding:0;
544
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
545
+ }
546
+
547
+ .tds-radio-group:has(.tds-radio-group-description){
548
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
549
+ }
550
+
551
+ .tds-radio-group[aria-invalid="true"]{
552
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
553
+ --tds-radio-group-description-invalid-icon-display:inline-block;
554
+ }
555
+
556
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
557
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
558
+ }
559
+
560
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
561
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
562
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
563
+ }
564
+
565
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
566
+ --tds-radio-input-background-color:var(--t-form-background-color);
567
+ }
568
+
569
+ .tds-radio-group:has(input:required) legend::after{
570
+ margin-left:.25ch;
571
+ color:var(--t-text-color-status-error);
572
+ content:"*";
573
+ }
574
+
575
+ .tds-radio-group-fields{
576
+ display:flex;
577
+ flex-direction:column;
578
+ gap:var(--tds-radio-group-gap);
579
+ align-items:flex-start;
580
+ }
581
+
582
+ .tds-radio-group-description{
583
+ display:flex;
584
+ gap:var(--t-spacing-half);
585
+ align-items:flex-start;
586
+ margin:0;
587
+ font-size:var(--tds-radio-group-description-font-size);
588
+ line-height:var(--tds-radio-group-description-line-height);
589
+ color:var(--tds-radio-group-description-color);
590
+ cursor:text;
591
+ }
592
+
593
+ .tds-radio-group-description-invalid-icon{
594
+ display:var(--tds-radio-group-description-invalid-icon-display);
595
+ flex-shrink:0;
596
+ margin-top:calc(.5lh - .5em);
597
+ line-height:var(--tds-radio-group-description-line-height);
598
+ }
599
+
600
+ .tds-radio-group--sm{
601
+ --tds-radio-group-line-height:1.35;
602
+ --tds-radio-group-font-size:var(--t-font-size-sm);
603
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
604
+ --tds-radio-group-description-line-height:1.3;
605
+ }
606
+
607
+ .tds-radio{
608
+ --tds-radio-font-size:var(--t-font-size-md);
609
+ --tds-radio-cursor:pointer;
610
+ --tds-radio-line-height:1.4;
611
+ --tds-radio-transition-property:border-width;
612
+
613
+ --tds-radio-input-size:var(--t-element-size-md);
614
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
615
+ --tds-radio-input-border-color:var(--t-form-border-color);
616
+ --tds-radio-input-border-width:var(--t-form-border-width);
617
+ --tds-radio-input-background-color:transparent;
618
+
619
+ --tds-radio-label-color:var(--t-form-color);
620
+
621
+ --tds-radio-description-font-size:var(--t-font-size-sm);
622
+ --tds-radio-description-line-height:1.35;
623
+ --tds-radio-description-color:var(--t-text-color-secondary);
624
+
625
+ position:relative;
626
+ display:inline-grid;
627
+ grid-template-columns:auto;
628
+ grid-auto-columns:1fr;
629
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
630
+ line-height:var(--tds-radio-line-height);
631
+ cursor:var(--tds-radio-cursor);
632
+ -webkit-user-select:none;
633
+ -moz-user-select:none;
634
+ user-select:none;
635
+ }
636
+
637
+ .tds-radio label{
638
+ grid-area:1 / 2;
639
+ font-size:var(--tds-radio-font-size);
640
+ font-weight:var(--t-font-weight-normal);
641
+ color:var(--tds-radio-label-color);
642
+ cursor:var(--tds-radio-cursor);
518
643
  }
519
644
 
520
645
  .tds-radio input[type="radio"]{
@@ -880,93 +1005,6 @@
880
1005
  --tds-toggle-switch-display:inline-flex;
881
1006
  }
882
1007
 
883
- .tds-radio-group{
884
- --tds-radio-group-font-size:var(--t-font-size-md);
885
- --tds-radio-group-line-height:1.4;
886
- --tds-radio-group-gap:var(--t-spacing-1);
887
-
888
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
889
-
890
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
891
- --tds-radio-group-description-line-height:1.35;
892
- --tds-radio-group-description-color:var(--t-text-color-secondary);
893
- --tds-radio-group-description-invalid-icon-display:none;
894
- display:flex;
895
- flex-direction:column;
896
- gap:var(--tds-radio-group-gap);
897
- padding:0;
898
- margin:0;
899
-
900
- font-size:var(--tds-radio-group-font-size);
901
- line-height:var(--tds-radio-group-line-height);
902
- border:0;
903
- }
904
-
905
- .tds-radio-group legend{
906
- padding:0;
907
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
908
- }
909
-
910
- .tds-radio-group:has(.tds-radio-group-description){
911
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
912
- }
913
-
914
- .tds-radio-group[aria-invalid="true"]{
915
- --tds-radio-group-description-color:var(--t-text-color-status-error);
916
- --tds-radio-group-description-invalid-icon-display:inline-block;
917
- }
918
-
919
- .tds-radio-group[aria-invalid="true"] .tds-radio{
920
- --tds-radio-input-border-color:var(--t-form-border-color-error);
921
- }
922
-
923
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
924
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
925
- --tds-radio-input-background-color:var(--t-form-background-color-error);
926
- }
927
-
928
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
929
- --tds-radio-input-background-color:var(--t-form-background-color);
930
- }
931
-
932
- .tds-radio-group:has(input:required) legend::after{
933
- margin-left:.25ch;
934
- color:var(--t-text-color-status-error);
935
- content:"*";
936
- }
937
-
938
- .tds-radio-group-fields{
939
- display:flex;
940
- flex-direction:column;
941
- gap:var(--tds-radio-group-gap);
942
- align-items:flex-start;
943
- }
944
-
945
- .tds-radio-group-description{
946
- display:flex;
947
- gap:var(--t-spacing-half);
948
- align-items:flex-start;
949
- margin:0;
950
- font-size:var(--tds-radio-group-description-font-size);
951
- line-height:var(--tds-radio-group-description-line-height);
952
- color:var(--tds-radio-group-description-color);
953
- cursor:text;
954
- }
955
-
956
- .tds-radio-group-description-invalid-icon{
957
- display:var(--tds-radio-group-description-invalid-icon-display);
958
- flex-shrink:0;
959
- margin-top:calc(.5lh - .5em);
960
- line-height:var(--tds-radio-group-description-line-height);
961
- }
962
-
963
- .tds-radio-group--sm{
964
- --tds-radio-group-line-height:1.35;
965
- --tds-radio-group-font-size:var(--t-font-size-sm);
966
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
967
- --tds-radio-group-description-line-height:1.3;
968
- }
969
-
970
1008
  .tds-select{
971
1009
  --tds-select-border-color:var(--t-form-border-color);
972
1010
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -1398,330 +1436,268 @@
1398
1436
  }
1399
1437
  }
1400
1438
 
1401
-
1402
- @media (prefers-reduced-motion: no-preference){
1403
-
1404
- :root{
1405
- interpolate-size:allow-keywords;
1406
- }
1407
- }
1408
-
1409
- @layer tds-component{
1410
- tds-sidenav,
1411
- .tds-sidenav{
1412
- --tds-sidenav-indent:12px;
1413
- --tds-sidenav-item-depth:0;
1414
-
1415
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
1416
-
1417
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1418
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1419
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1420
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1421
-
1422
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1423
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1424
- --tds-sidenav-item-nested-background-selected:transparent;
1425
-
1426
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1427
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1428
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1429
-
1430
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1431
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1432
- }
1433
-
1434
- .tds-sidenav--theme-gray{
1435
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1436
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1437
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1438
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1439
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1440
- }
1441
- }
1442
-
1443
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1444
- display:flex;
1445
- }
1446
-
1447
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1448
- flex-direction:column;
1449
- gap:var(--t-spacing-half);
1450
- width:100%;
1451
- }
1452
-
1453
- .tds-sidenav-section-list{
1454
- width:100%;
1455
- padding:0;
1456
- margin:0;
1457
- list-style:none;
1458
- }
1459
-
1460
- .tds-sidenav-section-header{
1461
- display:flex;
1462
- align-items:baseline;
1463
- justify-content:space-between;
1464
- padding-top:var(--t-spacing-2);
1465
- }
1466
-
1467
- .tds-sidenav-section-header h2{
1468
- margin:0;
1469
- font-size:var(--t-font-size-sm);
1470
- font-weight:var(--t-font-weight-semibold);
1471
- line-height:1.35;
1472
- color:var(--t-text-color-secondary);
1473
- text-transform:uppercase;
1474
- }
1475
-
1476
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1477
- padding-top:0;
1478
- }
1479
-
1480
- .tds-sidenav-section-header [slot="label-actions"]{
1481
- display:flex;
1482
- gap:var(--t-spacing-half);
1483
- align-items:center;
1439
+ @layer t-critical{
1440
+ tds-page-header:not(.hydrated){
1441
+ display:none;
1484
1442
  }
1485
-
1486
- .tds-sidenav-section [slot="section-actions"]{
1487
- display:flex;
1488
- gap:12px;
1489
- align-items:center;
1490
- min-height:42px;
1491
- padding:var(--t-spacing-1) 0;
1492
- }
1493
-
1494
- .tds-sidenav-section-list,
1495
- .tds-sidenav-item{
1496
- width:100%;
1497
- padding:0;
1498
- margin:0;
1499
1443
  }
1500
1444
 
1501
- .tds-sidenav-item :is(a,button){
1502
- position:relative;
1503
- display:flex;
1504
- gap:12px;
1505
- align-items:center;
1506
- width:100%;
1507
- padding:12px;
1508
- overflow:hidden;
1509
- font-size:var(--t-font-size-sm);
1510
- line-height:18px;
1511
- color:var(--t-text-color-headline);
1512
- white-space:nowrap;
1513
- text-decoration:none;
1514
- -webkit-appearance:none;
1515
- -moz-appearance:none;
1516
- appearance:none;
1517
- cursor:pointer;
1518
- background-color:var(--tds-sidenav-item-background, transparent);
1519
- border:0;
1520
- border-radius:var(--t-border-radius);
1521
- transition:var(--tds-sidenav-item-transition);
1522
- }
1445
+ @layer t-component{
1446
+ .tds-page-header{
1447
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1448
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1449
+ --tds-page-header-color:var(--t-text-color);
1450
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1451
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1452
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1453
+ --tds-page-header-padding-x:var(--t-spacing-2);
1454
+ --tds-page-header-padding-y:var(--t-spacing-2);
1455
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1456
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1457
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1458
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1459
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1460
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1461
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1462
+ --tds-page-header-nav-item-border-width:1px;
1523
1463
 
1524
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1525
- display:block;
1526
- flex:1;
1527
- overflow:hidden;
1528
- text-overflow:ellipsis;
1529
- text-align:left;
1530
- white-space:nowrap;
1531
- }
1464
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1465
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1532
1466
 
1533
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1534
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1535
- color:var(--t-text-color-headline);
1536
- text-decoration:none;
1537
- }
1467
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1468
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1469
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1538
1470
 
1539
- :is(.tds-sidenav-item :is(a,button)):active{
1540
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1541
- }
1471
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1472
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1542
1473
 
1543
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1544
- overflow:hidden;
1545
- color:var(--tds-sidenav-item-icon-color);
1546
- }
1474
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1475
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1476
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1547
1477
 
1548
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1549
- display:block;
1550
- width:var(--tds-sidenav-item-icon-size);
1551
- height:var(--tds-sidenav-item-icon-size);
1552
- }
1478
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1479
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1480
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1481
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1482
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1483
+ }
1553
1484
 
1554
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1555
- --tds-sidenav-indent:19px;
1485
+ .tds-page-header--profile{
1486
+ --tds-page-header-padding-y:20px;
1487
+ }
1488
+
1489
+ @supports (color: light-dark(#fff, #000)){
1490
+ .tds-page-header{
1491
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1492
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1556
1493
  }
1494
+ }
1557
1495
 
1558
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1559
- visibility:visible;
1560
- block-size:auto;
1561
- opacity:1;
1496
+ @media (min-width: 600px){
1497
+ .tds-page-header{
1498
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1499
+ --tds-page-header-color:var(--t-text-color-secondary);
1500
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1501
+ --tds-page-header-padding-x:var(--t-spacing-3);
1502
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1503
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1504
+ --tds-page-header-nav-background:transparent;
1505
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1506
+ --tds-page-header-nav-item-border-width:1px;
1507
+ --tds-page-header-nav-item-color:var(--t-text-color);
1508
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1509
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1510
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1511
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1512
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1562
1513
  }
1514
+ }
1515
+ }
1563
1516
 
1564
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1565
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1566
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1517
+ .tds-page-header{
1518
+ display:flex;
1519
+ flex-direction:column;
1520
+ padding-top:var(--tds-page-header-padding-y);
1521
+ color:var(--tds-page-header-color);
1522
+ background:var(--tds-page-header-background-color);
1523
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1524
+ }
1567
1525
 
1568
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1569
- font-weight:var(--t-font-weight-semibold);
1526
+ .tds-page-header:not(.has-nav){
1527
+ padding-bottom:var(--tds-page-header-padding-y);
1570
1528
  }
1571
1529
 
1572
- .tds-sidenav-item:has(.tds-sidenav-section){
1573
- display:flex;
1574
- flex-direction:column;
1575
- gap:var(--t-spacing-half);
1530
+ .tds-page-header.inactive{
1531
+ background:var(--tds-page-header-background-color-inactive);
1576
1532
  }
1577
1533
 
1578
- .tds-sidenav-item .tds-sidenav-section-list{
1579
- --tds-sidenav-item-depth:1;
1580
- gap:0;
1534
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1535
+ width:100%;
1581
1536
  }
1582
1537
 
1583
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1584
- visibility:hidden;
1585
- block-size:0;
1586
- overflow-y:clip;
1587
- opacity:0;
1588
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1589
- }
1538
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1539
+ display:flex;
1540
+ flex-flow:row wrap;
1541
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1542
+ align-items:flex-start;
1543
+ justify-content:flex-start;
1544
+ min-width:0;
1545
+ }
1590
1546
 
1591
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1592
- --tds-sidenav-item-depth:2;
1547
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1548
+ display:flex;
1549
+ gap:var(--tds-page-header-nav-gap);
1550
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1551
+ margin:0 0 -1px;
1552
+ overflow:auto;
1553
+ list-style:none;
1554
+ background:var(--tds-page-header-nav-background);
1593
1555
  }
1594
1556
 
1595
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1596
- min-height:var(--t-element-size-2xl);
1597
- padding-block:9px;
1598
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1599
- line-height:1;
1600
- background-color:transparent;
1557
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1558
+ position:relative;
1559
+ display:inline-flex;
1560
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1561
+ font-size:var(--t-font-size-sm);
1562
+ line-height:22px;
1563
+ color:var(--tds-page-header-nav-item-color);
1564
+ white-space:nowrap;
1565
+ text-decoration:none;
1566
+ -webkit-appearance:none;
1567
+ -moz-appearance:none;
1568
+ appearance:none;
1569
+ cursor:pointer;
1570
+ outline-offset:-2px;
1571
+ background-color:var(--tds-page-header-nav-item-background-color);
1572
+ background-clip:padding-box;
1573
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1574
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1575
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1576
+ }
1577
+
1578
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1579
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1580
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1581
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1582
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1583
+ }
1584
+
1585
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1586
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1587
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1588
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1589
+ }
1590
+
1591
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1592
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1593
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1594
+ }
1595
+
1596
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1597
+ color:var(--tds-page-header-nav-item-color-disabled);
1598
+ cursor:not-allowed;
1599
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1600
+ opacity:1;
1601
+ }
1602
+
1603
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1604
+ position:relative;
1601
1605
  }
1602
1606
 
1603
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1604
- position:absolute;
1605
- top:0;
1606
- bottom:0;
1607
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1608
- width:2px;
1609
- content:"";
1610
- background-color:var(--tds-sidenav-item-nested-border-color);
1611
- transition:var(--tds-sidenav-item-transition);
1607
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1608
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1609
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1612
1610
  }
1613
1611
 
1614
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1612
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1615
1613
  position:absolute;
1616
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1617
- z-index:-1;
1618
- height:100%;
1614
+ top:-5px;
1615
+ right:-2px;
1616
+ width:10px;
1617
+ height:10px;
1619
1618
  content:"";
1620
- background-color:var(--tds-sidenav-item-nested-background);
1621
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1622
- transition:var(--tds-sidenav-item-transition);
1623
- }
1624
-
1625
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1626
- display:block;
1627
- text-align:left;
1628
- white-space:normal;
1619
+ background:var(--tds-page-header-nav-item-indicator-color);
1620
+ border-radius:50%;
1629
1621
  }
1630
1622
 
1631
- :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{
1632
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1633
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1634
- }
1635
-
1636
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1637
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1623
+ @media (prefers-reduced-motion: no-preference){
1624
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1625
+ animation:indicator-pulse 1.25s ease infinite;
1626
+ }
1638
1627
  }
1639
1628
 
1640
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1641
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1642
- font-weight:var(--t-font-weight-medium);
1643
- }
1644
-
1645
- .tds-sidenav-responsive-header{
1629
+ .tds-page-header__title-bar{
1646
1630
  display:flex;
1647
- gap:var(--t-spacing-2);
1648
- align-items:center;
1649
- width:100%;
1631
+ flex-direction:column;
1632
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1633
+ align-items:flex-start;
1634
+ justify-content:space-between;
1635
+ padding:0 var(--tds-page-header-padding-x);
1650
1636
  }
1651
1637
 
1652
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1653
- order:0;
1638
+ .tds-page-header--profile > .tds-page-header__title-bar{
1639
+ align-items:center;
1654
1640
  }
1655
1641
 
1656
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1657
- flex:1;
1658
- order:1;
1659
- margin:0;
1660
- font-size:var(--t-font-size-lg);
1661
- font-weight:var(--t-font-weight-medium);
1662
- color:var(--t-text-color-headline);
1663
- }
1642
+ .tds-page-header__primary{
1643
+ width:100%;
1644
+ }
1664
1645
 
1665
- @media (max-width: 719px){
1666
- .tds-sidenav-collapse{
1667
- z-index:10001;
1668
- display:none;
1669
- max-width:min(448px, calc(100vw - 48px));
1670
- padding:0;
1671
- margin:12px 0;
1672
- overflow:hidden;
1673
- outline:0;
1674
- background:var(--t-surface-color-card);
1675
- border:0;
1676
- border-radius:6px;
1677
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1678
- will-change:transform;
1679
- position-area:bottom span-right;
1646
+ .tds-page-header__primary h1{
1647
+ margin:0;
1648
+ font-size:var(--tds-page-header-headline-font-size);
1649
+ font-weight:var(--t-font-weight-normal);
1650
+ line-height:32px;
1651
+ color:var(--tds-page-header-headline-color);
1652
+ overflow-wrap:break-word;
1680
1653
  }
1681
1654
 
1682
- .tds-sidenav-scroll-container{
1683
- --webkit-overflow-scrolling:touch;
1684
- display:block;
1685
- width:100%;
1686
- height:-moz-fit-content;
1687
- height:fit-content;
1688
- padding:var(--t-spacing-2);
1689
- overflow-y:auto;
1655
+ @media (min-width: 960px){
1656
+ .tds-page-header__primary{
1657
+ flex:1 1 max-content;
1658
+ width:auto;
1659
+ min-width:0;
1660
+ max-width:100%;
1690
1661
  }
1691
1662
 
1692
- .tds-sidenav-item :is(a, button) :is(.prefix){
1693
- display:none;
1663
+ .tds-page-header__title-bar,
1664
+ .tds-page-header--profile .tds-page-header__title-bar{
1665
+ flex-flow:row nowrap;
1666
+ row-gap:12px;
1667
+ align-items:flex-start;
1694
1668
  }
1695
- @supports selector(:popover-open){
1696
- .tds-sidenav-collapse:popover-open{
1697
- display:flex;
1669
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1670
+ width:auto;
1698
1671
  }
1699
- }
1700
- @supports not selector(:popover-open){
1701
- .tds-sidenav-collapse.\:popover-open{
1702
- display:flex;
1672
+
1673
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1674
+ justify-content:flex-end;
1703
1675
  }
1704
- }
1705
1676
  }
1706
1677
 
1707
- @media (min-width: 720px){
1708
- .tds-sidenav-responsive-header{
1709
- display:none;
1710
- }
1678
+ .tds-page-header-phone,
1679
+ .tds-page-header-email{
1680
+ color:var(--tds-page-header-color);
1681
+ white-space:nowrap;
1711
1682
  }
1712
1683
 
1713
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1714
- display:none;
1715
- }
1684
+ .tds-page-header-email{
1685
+ max-width:100%;
1686
+ overflow:hidden;
1687
+ text-overflow:ellipsis;
1688
+ }
1716
1689
 
1717
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1718
- display:block;
1719
- }
1690
+ @keyframes indicator-pulse{
1691
+ 0%{
1692
+ opacity:.3;
1693
+ transform:scale(.9);
1694
+ }
1720
1695
 
1721
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1722
- display:flex;
1723
- flex-direction:column;
1724
- }
1696
+ 100%{
1697
+ opacity:0;
1698
+ transform:scale(1.75);
1699
+ }
1700
+ }
1725
1701
 
1726
1702
  .tds-input{
1727
1703
  --tds-input-border-color:var(--t-form-border-color);