@planningcenter/tapestry 2.0.1-rc.0 → 2.0.1-rc.1

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