@planningcenter/tapestry 2.4.0-rc.3 → 2.4.0-rc.4

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/reactRender.css CHANGED
@@ -1,606 +1,606 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @layer t-critical {
4
- tds-page-header:not(.hydrated) {
5
- display: none;
6
- }
3
+
4
+ @media (prefers-reduced-motion: no-preference) {
5
+
6
+ :root {
7
+ interpolate-size: allow-keywords;
7
8
  }
9
+ }
8
10
 
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;
11
+ @layer tds-component {
12
+ tds-sidenav, .tds-sidenav {
13
+ --tds-sidenav-indent: 12px;
14
+ --tds-sidenav-item-depth: 0;
26
15
 
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);
16
+ --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
29
17
 
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);
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);
33
22
 
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);
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;
36
26
 
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);
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);
40
30
 
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);
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);
46
33
  }
47
34
 
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
- }
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);
65
42
  }
66
43
  }
67
44
 
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
- }
45
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
46
+ display: flex;
47
+ }
76
48
 
77
- .tds-page-header:not(.has-nav) {
78
- padding-bottom: var(--tds-page-header-padding-y);
79
- }
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
+ }
80
54
 
81
- .tds-page-header.inactive {
82
- background: var(--tds-page-header-background-color-inactive);
55
+ .tds-sidenav-section-list {
56
+ width: 100%;
57
+ padding: 0;
58
+ margin: 0;
59
+ list-style: none;
83
60
  }
84
61
 
85
- .tds-page-header__title-bar {
62
+ .tds-sidenav-section-header {
86
63
  display: flex;
87
- flex-direction: column;
88
- gap: var(--t-spacing-2) var(--t-spacing-1);
89
- align-items: flex-start;
64
+ align-items: baseline;
90
65
  justify-content: space-between;
91
- padding: 0 var(--tds-page-header-padding-x);
66
+ padding-top: var(--t-spacing-2);
92
67
  }
93
68
 
94
- .tds-page-header--profile > .tds-page-header__title-bar {
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;
95
91
  align-items: center;
92
+ min-height: 42px;
93
+ padding: var(--t-spacing-1) 0;
96
94
  }
97
95
 
98
- .tds-page-header__primary {
96
+ .tds-sidenav-section-list,
97
+ .tds-sidenav-item {
99
98
  width: 100%;
100
- }
101
-
102
- .tds-page-header__primary h1 {
99
+ padding: 0;
103
100
  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;
109
101
  }
110
102
 
111
- .tds-page-header [slot="actions"] {
112
- width: 100%;
113
- }
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
+ }
114
125
 
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
- }
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
+ }
124
134
 
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
- }
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
+ }
137
140
 
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
- }
141
+ :is(.tds-sidenav-item :is(a,button)):active {
142
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
143
+ }
161
144
 
162
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
163
- position: relative;
164
- }
145
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
146
+ overflow: hidden;
147
+ color: var(--tds-sidenav-item-icon-color);
148
+ }
165
149
 
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
- }
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
+ }
170
155
 
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
- }
182
-
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
- }
188
-
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
- }
198
-
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
- }
156
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
157
+ --tds-sidenav-indent: 19px;
158
+ }
207
159
 
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
- }
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
+ }
214
165
 
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
- }
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);
224
169
 
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%;
170
+ --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-selected);
171
+ font-weight: var(--t-font-weight-semibold);
231
172
  }
232
173
 
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;
174
+ .tds-sidenav-item:has(.tds-sidenav-section) {
175
+ display: flex;
176
+ flex-direction: column;
177
+ gap: var(--t-spacing-half);
238
178
  }
239
179
 
240
- .tds-page-header [slot="actions"] {
241
- width: auto;
180
+ .tds-sidenav-item .tds-sidenav-section-list {
181
+ --tds-sidenav-item-depth: 1;
182
+ gap: 0;
242
183
  }
243
184
 
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
- }
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
+ }
249
192
 
250
- .tds-page-header-phone,
251
- .tds-page-header-email {
252
- color: var(--tds-page-header-color);
253
- white-space: nowrap;
254
- }
193
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
194
+ --tds-sidenav-item-depth: 2;
195
+ }
255
196
 
256
- /* Truncate email */
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
+ }
257
204
 
258
- .tds-page-header-email {
259
- max-width: 100%;
260
- overflow: hidden;
261
- text-overflow: ellipsis;
262
- }
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
+ }
263
215
 
264
- @keyframes indicator-pulse {
265
- 0% {
266
- opacity: .3;
267
- transform: scale(.9);
268
- }
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
+ }
269
226
 
270
- 100% {
271
- opacity: 0;
272
- transform: scale(1.75);
273
- }
274
- }
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
+ }
275
232
 
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
+ }
276
237
 
277
- @media (prefers-reduced-motion: no-preference) {
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
+ }
278
241
 
279
- :root {
280
- interpolate-size: allow-keywords;
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
+ }
246
+
247
+ .tds-sidenav-responsive-header {
248
+ display: flex;
249
+ gap: var(--t-spacing-2);
250
+ align-items: center;
251
+ width: 100%;
281
252
  }
282
- }
283
253
 
284
- @layer tds-component {
285
- tds-sidenav, .tds-sidenav {
286
- --tds-sidenav-indent: 12px;
287
- --tds-sidenav-item-depth: 0;
254
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
255
+ order: 0;
256
+ }
288
257
 
289
- --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
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
+ }
290
266
 
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);
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
+ }
295
283
 
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;
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
+ }
299
293
 
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);
294
+ .tds-sidenav-item :is(a, button) :is(.prefix) {
295
+ display: none;
296
+ }
303
297
 
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);
298
+ /* Modern browsers only */
299
+ @supports selector(:popover-open) {
300
+ .tds-sidenav-collapse:popover-open {
301
+ display: flex;
302
+ }
306
303
  }
307
304
 
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);
305
+ /* Older browsers only, running the polyfill */
306
+ @supports not selector(:popover-open) {
307
+ .tds-sidenav-collapse.\:popover-open {
308
+ display: flex;
309
+ }
315
310
  }
316
311
  }
317
312
 
318
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
319
- display: flex;
313
+ @media (min-width: 720px) {
314
+ .tds-sidenav-responsive-header {
315
+ display: none;
320
316
  }
317
+ }
321
318
 
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
- }
319
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
320
+ display: none;
321
+ }
327
322
 
328
- .tds-sidenav-section-list {
329
- width: 100%;
330
- padding: 0;
331
- margin: 0;
332
- list-style: none;
333
- }
323
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
324
+ display: block;
325
+ }
334
326
 
335
- .tds-sidenav-section-header {
336
- display: flex;
337
- align-items: baseline;
338
- justify-content: space-between;
339
- padding-top: var(--t-spacing-2);
340
- }
327
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
328
+ display: flex;
329
+ flex-direction: column;
330
+ }
341
331
 
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;
332
+ @layer t-critical {
333
+ tds-page-header:not(.hydrated) {
334
+ display: none;
349
335
  }
336
+ }
350
337
 
351
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
352
- padding-top: 0;
353
- }
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;
354
355
 
355
- .tds-sidenav-section-header [slot="label-actions"] {
356
- display: flex;
357
- gap: var(--t-spacing-half);
358
- align-items: center;
359
- }
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);
360
358
 
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
- }
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);
368
362
 
369
- .tds-sidenav-section-list,
370
- .tds-sidenav-item {
371
- width: 100%;
372
- padding: 0;
373
- margin: 0;
374
- }
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);
375
365
 
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
- }
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);
398
369
 
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
- }
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);
375
+ }
407
376
 
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;
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);
412
393
  }
394
+ }
395
+ }
413
396
 
414
- :is(.tds-sidenav-item :is(a,button)):active {
415
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
416
- }
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
+ }
417
405
 
418
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
419
- overflow: hidden;
420
- color: var(--tds-sidenav-item-icon-color);
421
- }
406
+ .tds-page-header:not(.has-nav) {
407
+ padding-bottom: var(--tds-page-header-padding-y);
408
+ }
422
409
 
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
- }
410
+ .tds-page-header.inactive {
411
+ background: var(--tds-page-header-background-color-inactive);
412
+ }
428
413
 
429
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
430
- --tds-sidenav-indent: 19px;
431
- }
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
+ }
432
422
 
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
- }
423
+ .tds-page-header--profile > .tds-page-header__title-bar {
424
+ align-items: center;
425
+ }
438
426
 
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);
427
+ .tds-page-header__primary {
428
+ width: 100%;
429
+ }
442
430
 
443
- --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-selected);
444
- font-weight: var(--t-font-weight-semibold);
445
- }
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
+ }
446
439
 
447
- .tds-sidenav-item:has(.tds-sidenav-section) {
448
- display: flex;
449
- flex-direction: column;
450
- gap: var(--t-spacing-half);
451
- }
440
+ .tds-page-header [slot="actions"] {
441
+ width: 100%;
442
+ }
452
443
 
453
- .tds-sidenav-item .tds-sidenav-section-list {
454
- --tds-sidenav-item-depth: 1;
455
- gap: 0;
456
- }
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
+ }
457
453
 
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
- }
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
+ }
465
466
 
466
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
467
- --tds-sidenav-item-depth: 2;
468
- }
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
+ }
469
490
 
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
- }
491
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
492
+ position: relative;
493
+ }
477
494
 
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
- }
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
+ }
488
499
 
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
- }
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
+ }
499
511
 
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
- }
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
+ }
505
517
 
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
- }
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
+ }
510
527
 
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
- }
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
+ }
514
536
 
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
- }
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
+ }
519
543
 
520
- .tds-sidenav-responsive-header {
521
- display: flex;
522
- gap: var(--t-spacing-2);
523
- align-items: center;
524
- width: 100%;
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;
525
552
  }
526
553
 
527
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
528
- order: 0;
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%;
529
560
  }
530
561
 
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);
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;
538
567
  }
539
568
 
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;
569
+ .tds-page-header [slot="actions"] {
570
+ width: auto;
555
571
  }
556
572
 
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;
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;
565
576
  }
577
+ }
566
578
 
567
- .tds-sidenav-item :is(a, button) :is(.prefix) {
568
- display: none;
569
- }
579
+ .tds-page-header-phone,
580
+ .tds-page-header-email {
581
+ color: var(--tds-page-header-color);
582
+ white-space: nowrap;
583
+ }
570
584
 
571
- /* Modern browsers only */
572
- @supports selector(:popover-open) {
573
- .tds-sidenav-collapse:popover-open {
574
- display: flex;
575
- }
576
- }
585
+ /* Truncate email */
577
586
 
578
- /* Older browsers only, running the polyfill */
579
- @supports not selector(:popover-open) {
580
- .tds-sidenav-collapse.\:popover-open {
581
- display: flex;
582
- }
583
- }
587
+ .tds-page-header-email {
588
+ max-width: 100%;
589
+ overflow: hidden;
590
+ text-overflow: ellipsis;
584
591
  }
585
592
 
586
- @media (min-width: 720px) {
587
- .tds-sidenav-responsive-header {
588
- display: none;
593
+ @keyframes indicator-pulse {
594
+ 0% {
595
+ opacity: .3;
596
+ transform: scale(.9);
589
597
  }
590
- }
591
598
 
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
- }
599
+ 100% {
600
+ opacity: 0;
601
+ transform: scale(1.75);
602
+ }
603
+ }
604
604
 
605
605
  .tds-loading-spinner {
606
606
  --tds-loading-spinner-size: 1.25em;