@planningcenter/tapestry 3.0.0-rc.27 → 3.0.0-rc.28

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