@planningcenter/tapestry 2.4.0-rc.1 → 2.4.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 +490 -490
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +490 -490
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -1,607 +1,607 @@
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-canvas));
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-canvas);
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-canvas);
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
- display: none;
271
- max-width: min(448px, calc(100vw - 48px));
272
- padding: 0;
273
- margin: 12px 0;
274
- overflow: hidden;
275
- outline: 0;
276
- background: var(--t-surface-color-card);
277
- border: 0;
278
- border-radius: 6px;
279
- box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
280
- will-change: transform;
281
- position-area: bottom span-right;
282
- }
289
+ --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
283
290
 
284
- .tds-sidenav-scroll-container {
285
- --webkit-overflow-scrolling: touch;
286
- display: block;
287
- width: 100%;
288
- height: -moz-fit-content;
289
- height: fit-content;
290
- padding: var(--t-spacing-2);
291
- overflow-y: auto;
292
- }
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);
293
295
 
294
- .tds-sidenav-item :is(a, button) :is(.prefix) {
295
- display: none;
296
- }
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;
297
299
 
298
- /* Modern browsers only */
299
- @supports selector(:popover-open) {
300
- .tds-sidenav-collapse:popover-open {
301
- display: flex;
302
- }
303
- }
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);
304
303
 
305
- /* Older browsers only, running the polyfill */
306
- @supports not selector(:popover-open) {
307
- .tds-sidenav-collapse.\:popover-open {
308
- display: flex;
309
- }
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);
310
306
  }
311
- }
312
307
 
313
- @media (min-width: 720px) {
314
- .tds-sidenav-responsive-header {
315
- 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);
316
315
  }
317
316
  }
318
317
 
319
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
320
- display: none;
321
- }
318
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
319
+ display: flex;
320
+ }
322
321
 
323
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
324
- display: block;
325
- }
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
+ }
326
327
 
327
- tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
328
- display: flex;
329
- flex-direction: column;
330
- }
328
+ .tds-sidenav-section-list {
329
+ width: 100%;
330
+ padding: 0;
331
+ margin: 0;
332
+ list-style: none;
333
+ }
331
334
 
332
- @layer t-critical {
333
- tds-page-header:not(.hydrated) {
334
- display: none;
335
- }
335
+ .tds-sidenav-section-header {
336
+ display: flex;
337
+ align-items: baseline;
338
+ justify-content: space-between;
339
+ padding-top: var(--t-spacing-2);
336
340
  }
337
341
 
338
- @layer t-component {
339
- .tds-page-header {
340
- --tds-page-header-background-color: var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
341
- --tds-page-header-background-color-inactive: var(--t-fill-color-neutral-090);
342
- --tds-page-header-color: var(--t-text-color-default-primary);
343
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
344
- --tds-page-header-headline-font-size: var(--t-font-size-2xl);
345
- --tds-page-header-padding-x: var(--t-spacing-2);
346
- --tds-page-header-padding-y: var(--t-spacing-2);
347
- --tds-page-header-nav-padding-x: var(--tds-page-header-padding-x, var(--t-spacing-3));
348
- --tds-page-header-nav-gap: var(--t-spacing-1);
349
- --tds-page-header-nav-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
350
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
351
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
352
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
353
- --tds-page-header-nav-item-background-color: var(--t-fill-color-transparency-light-060);
354
- --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
+ }
355
350
 
356
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-background-color);
357
- --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
+ }
358
354
 
359
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
360
- --tds-page-header-nav-item-background-color-hover: var(--t-fill-color-neutral-080);
361
- --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
+ }
362
360
 
363
- --tds-page-header-nav-item-background-color-active: var(--t-fill-color-neutral-060);
364
- --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
+ }
365
368
 
366
- --tds-page-header-nav-item-color-disabled: var(--t-text-color-default-disabled);
367
- --tds-page-header-nav-item-background-color-disabled: var(--t-fill-color-neutral-080);
368
- --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
+ }
369
375
 
370
- --tds-page-header-nav-item-color-selected: var(--t-text-color-default-primary);
371
- --tds-page-header-nav-item-background-color-selected: var(--t-surface-color-canvas);
372
- --tds-page-header-nav-item-border-color-selected: var(--tds-page-header-nav-item-background-color-selected);
373
- --tds-page-header-nav-item-border-bottom-color-selected: var(--tds-page-header-nav-item-background-color-selected);
374
- --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);
375
397
  }
376
398
 
377
- .tds-page-header--profile {
378
- --tds-page-header-padding-y: 20px;
379
- }
380
- @media (min-width: 600px) {
381
- .tds-page-header {
382
- --tds-page-header-background-color: var(--t-surface-color-canvas);
383
- --tds-page-header-color: var(--t-text-color-default-secondary);
384
- --tds-page-header-padding-x: var(--t-spacing-3);
385
- --tds-page-header-headline-font-size: var(--t-font-size-3xl);
386
- --tds-page-header-nav-gap: var(--t-spacing-half);
387
- --tds-page-header-nav-background: transparent;
388
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
389
- --tds-page-header-nav-item-border-width: 1px;
390
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
391
- --tds-page-header-nav-item-background-color: var(--t-fill-color-neutral-070);
392
- --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;
393
406
  }
394
- }
395
- }
396
407
 
397
- .tds-page-header {
398
- display: flex;
399
- flex-direction: column;
400
- padding-top: var(--tds-page-header-padding-y);
401
- color: var(--tds-page-header-color);
402
- background: var(--tds-page-header-background-color);
403
- border-bottom: 1px solid var(--t-border-color-default-base);
404
- }
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
+ }
405
413
 
406
- .tds-page-header:not(.has-nav) {
407
- padding-bottom: var(--tds-page-header-padding-y);
408
- }
414
+ :is(.tds-sidenav-item :is(a,button)):active {
415
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
416
+ }
409
417
 
410
- .tds-page-header.inactive {
411
- background: var(--tds-page-header-background-color-inactive);
412
- }
418
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
419
+ overflow: hidden;
420
+ color: var(--tds-sidenav-item-icon-color);
421
+ }
413
422
 
414
- .tds-page-header__title-bar {
415
- display: flex;
416
- flex-direction: column;
417
- gap: var(--t-spacing-2) var(--t-spacing-1);
418
- align-items: flex-start;
419
- justify-content: space-between;
420
- padding: 0 var(--tds-page-header-padding-x);
421
- }
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
+ }
422
428
 
423
- .tds-page-header--profile > .tds-page-header__title-bar {
424
- align-items: center;
425
- }
429
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
430
+ --tds-sidenav-indent: 19px;
431
+ }
426
432
 
427
- .tds-page-header__primary {
428
- width: 100%;
429
- }
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
+ }
430
438
 
431
- .tds-page-header__primary h1 {
432
- margin: 0;
433
- font-size: var(--tds-page-header-headline-font-size);
434
- font-weight: var(--t-font-weight-normal);
435
- line-height: 32px;
436
- color: var(--tds-page-header-headline-color);
437
- overflow-wrap: break-word;
438
- }
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);
439
442
 
440
- .tds-page-header [slot="actions"] {
441
- width: 100%;
442
- }
443
+ --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-selected);
444
+ font-weight: var(--t-font-weight-semibold);
445
+ }
443
446
 
444
- .has-multi-actions.tds-page-header [slot="actions"],
445
- .has-multi-actions.tds-page-header .tds-page-header__actions {
446
- display: flex;
447
- flex-flow: row wrap;
448
- gap: var(--t-spacing-half) var(--t-spacing-1);
449
- align-items: flex-start;
450
- justify-content: flex-start;
451
- min-width: 0;
452
- }
447
+ .tds-sidenav-item:has(.tds-sidenav-section) {
448
+ display: flex;
449
+ flex-direction: column;
450
+ gap: var(--t-spacing-half);
451
+ }
453
452
 
454
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
455
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
456
- .tds-page-header nav[slot="navigation"] ul,
457
- .tds-page-header nav.tds-page-header__nav ul {
458
- display: flex;
459
- gap: var(--tds-page-header-nav-gap);
460
- padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
461
- margin: 0 0 -1px;
462
- overflow: auto;
463
- list-style: none;
464
- background: var(--tds-page-header-nav-background);
465
- }
453
+ .tds-sidenav-item .tds-sidenav-section-list {
454
+ --tds-sidenav-item-depth: 1;
455
+ gap: 0;
456
+ }
466
457
 
467
- .tds-page-header nav[slot="navigation"] a,
468
- .tds-page-header nav[slot="navigation"] button,
469
- .tds-page-header nav.tds-page-header__nav a,
470
- .tds-page-header nav.tds-page-header__nav button {
471
- position: relative;
472
- display: inline-flex;
473
- padding: var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
474
- font-size: var(--t-font-size-sm);
475
- line-height: 22px;
476
- color: var(--tds-page-header-nav-item-color);
477
- white-space: nowrap;
478
- text-decoration: none;
479
- -webkit-appearance: none;
480
- -moz-appearance: none;
481
- appearance: none;
482
- cursor: pointer;
483
- outline-offset: -2px;
484
- background-color: var(--tds-page-header-nav-item-background-color);
485
- background-clip: padding-box;
486
- border: var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
487
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
488
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
489
- }
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
+ }
490
465
 
491
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
492
- position: relative;
493
- }
466
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
467
+ --tds-sidenav-item-depth: 2;
468
+ }
494
469
 
495
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button) {
496
- -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
497
- mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
498
- }
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
+ }
499
477
 
500
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
501
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
502
- position: absolute;
503
- top: -5px;
504
- right: -2px;
505
- width: 10px;
506
- height: 10px;
507
- content: "";
508
- background: var(--tds-page-header-nav-item-indicator-color);
509
- border-radius: 50%;
510
- }
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
+ }
511
488
 
512
- @media (prefers-reduced-motion: no-preference) {
513
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
514
- animation: indicator-pulse 1.25s ease infinite;
515
- }
516
- }
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
+ }
517
499
 
518
- .tds-page-header nav[slot="navigation"] a.selected,
519
- .tds-page-header nav[slot="navigation"] button.selected,
520
- .tds-page-header nav.tds-page-header__nav a.selected,
521
- .tds-page-header nav.tds-page-header__nav button.selected {
522
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-selected);
523
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-selected);
524
- --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-selected);
525
- --tds-page-header-nav-item-border-bottom-color: var(--tds-page-header-nav-item-background-color-selected);
526
- }
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
+ }
527
505
 
528
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
529
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
530
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
531
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
532
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
533
- --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-hover);
534
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-hover);
535
- }
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
+ }
536
510
 
537
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
538
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
539
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
540
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
541
- background-color: var(--tds-page-header-nav-item-background-color-active);
542
- }
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
+ }
543
514
 
544
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
545
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
546
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
547
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
548
- color: var(--tds-page-header-nav-item-color-disabled);
549
- cursor: not-allowed;
550
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
551
- 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%;
552
525
  }
553
526
 
554
- @media (min-width: 960px) {
555
- .tds-page-header__primary {
556
- flex: 1 1 max-content;
557
- width: auto;
558
- min-width: 0;
559
- max-width: 100%;
527
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
528
+ order: 0;
560
529
  }
561
530
 
562
- .tds-page-header__title-bar,
563
- .tds-page-header--profile .tds-page-header__title-bar {
564
- flex-flow: row nowrap;
565
- row-gap: 12px;
566
- 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);
567
538
  }
568
539
 
569
- .tds-page-header [slot="actions"] {
570
- width: auto;
540
+ @media (max-width: 719px) {
541
+ .tds-sidenav-collapse {
542
+ z-index: 10001;
543
+ display: none;
544
+ max-width: min(448px, calc(100vw - 48px));
545
+ padding: 0;
546
+ margin: 12px 0;
547
+ overflow: hidden;
548
+ outline: 0;
549
+ background: var(--t-surface-color-card);
550
+ border: 0;
551
+ border-radius: 6px;
552
+ box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
553
+ will-change: transform;
554
+ position-area: bottom span-right;
571
555
  }
572
556
 
573
- .has-multi-actions.tds-page-header [slot="actions"],
574
- .has-multi-actions.tds-page-header .tds-page-header__actions {
575
- justify-content: flex-end;
557
+ .tds-sidenav-scroll-container {
558
+ --webkit-overflow-scrolling: touch;
559
+ display: block;
560
+ width: 100%;
561
+ height: -moz-fit-content;
562
+ height: fit-content;
563
+ padding: var(--t-spacing-2);
564
+ overflow-y: auto;
576
565
  }
577
- }
578
566
 
579
- .tds-page-header-phone,
580
- .tds-page-header-email {
581
- color: var(--tds-page-header-color);
582
- white-space: nowrap;
583
- }
584
-
585
- /* Truncate email */
567
+ .tds-sidenav-item :is(a, button) :is(.prefix) {
568
+ display: none;
569
+ }
586
570
 
587
- .tds-page-header-email {
588
- max-width: 100%;
589
- overflow: hidden;
590
- text-overflow: ellipsis;
591
- }
571
+ /* Modern browsers only */
572
+ @supports selector(:popover-open) {
573
+ .tds-sidenav-collapse:popover-open {
574
+ display: flex;
575
+ }
576
+ }
592
577
 
593
- @keyframes indicator-pulse {
594
- 0% {
595
- opacity: .3;
596
- transform: scale(.9);
578
+ /* Older browsers only, running the polyfill */
579
+ @supports not selector(:popover-open) {
580
+ .tds-sidenav-collapse.\:popover-open {
581
+ display: flex;
582
+ }
597
583
  }
584
+ }
598
585
 
599
- 100% {
600
- opacity: 0;
601
- transform: scale(1.75);
586
+ @media (min-width: 720px) {
587
+ .tds-sidenav-responsive-header {
588
+ display: none;
602
589
  }
603
590
  }
604
591
 
592
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
593
+ display: none;
594
+ }
595
+
596
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
597
+ display: block;
598
+ }
599
+
600
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
601
+ display: flex;
602
+ flex-direction: column;
603
+ }
604
+
605
605
  .tds-loading-spinner {
606
606
  --tds-loading-spinner-size: 1.25em;
607
607