@planningcenter/tapestry 2.2.0-rc.2 → 2.2.0-rc.3

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