@planningcenter/tapestry 3.1.0-rc.11 → 3.1.0-rc.12

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