@planningcenter/tapestry 2.0.0-rc.2 → 2.0.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 +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 +5 -3
package/dist/reactRender.css CHANGED
@@ -1,597 +1,597 @@
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-card));
12
- --tds-page-header-background-color-inactive: var(--t-fill-color-transparency-dark-010);
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-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);
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-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
- }
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
- }
207
-
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
- }
156
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
157
+ --tds-sidenav-indent: 19px;
158
+ }
214
159
 
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
- }
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
+ }
224
165
 
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%;
231
- }
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);
232
169
 
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;
170
+ --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-selected);
171
+ font-weight: var(--t-font-weight-semibold);
238
172
  }
239
173
 
240
- .tds-page-header [slot="actions"] {
241
- width: auto;
174
+ .tds-sidenav-item:has(.tds-sidenav-section) {
175
+ display: flex;
176
+ flex-direction: column;
177
+ gap: var(--t-spacing-half);
242
178
  }
243
179
 
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;
180
+ .tds-sidenav-item .tds-sidenav-section-list {
181
+ --tds-sidenav-item-depth: 1;
182
+ gap: 0;
247
183
  }
248
- }
249
-
250
- .tds-page-header-phone,
251
- .tds-page-header-email {
252
- color: var(--tds-page-header-color);
253
- white-space: nowrap;
254
- }
255
-
256
- /* Truncate email */
257
184
 
258
- .tds-page-header-email {
259
- max-width: 100%;
260
- overflow: hidden;
261
- text-overflow: ellipsis;
262
- }
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
+ }
263
192
 
264
- @keyframes indicator-pulse {
265
- 0% {
266
- opacity: .3;
267
- transform: scale(.9);
268
- }
193
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
194
+ --tds-sidenav-item-depth: 2;
195
+ }
269
196
 
270
- 100% {
271
- opacity: 0;
272
- transform: scale(1.75);
273
- }
274
- }
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
+ }
275
204
 
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
+ }
276
215
 
277
- @media (prefers-reduced-motion: no-preference) {
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
+ }
278
226
 
279
- :root {
280
- interpolate-size: allow-keywords;
281
- }
282
- }
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
+ }
283
232
 
284
- @layer tds-component {
285
- tds-sidenav, .tds-sidenav {
286
- --tds-sidenav-indent: 12px;
287
- --tds-sidenav-item-depth: 0;
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
+ }
288
237
 
289
- --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
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
+ }
290
241
 
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);
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
+ }
295
246
 
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;
247
+ .tds-sidenav-responsive-header {
248
+ display: flex;
249
+ gap: var(--t-spacing-2);
250
+ align-items: center;
251
+ width: 100%;
252
+ }
299
253
 
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);
254
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
255
+ order: 0;
256
+ }
303
257
 
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);
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);
306
265
  }
307
266
 
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);
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;
315
282
  }
316
- }
317
283
 
318
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
284
+ .tds-sidenav-collapse:popover-open,
285
+ .tds-sidenav-collapse.\:popover-open {
319
286
  display: flex;
320
287
  }
321
288
 
322
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
323
- flex-direction: column;
324
- gap: var(--t-spacing-half);
289
+ .tds-sidenav-scroll-container {
290
+ --webkit-overflow-scrolling: touch;
291
+ display: block;
325
292
  width: 100%;
293
+ height: -moz-fit-content;
294
+ height: fit-content;
295
+ padding: var(--t-spacing-2);
296
+ overflow-y: auto;
326
297
  }
327
298
 
328
- .tds-sidenav-section-list {
329
- width: 100%;
330
- padding: 0;
331
- margin: 0;
332
- list-style: none;
299
+ .tds-sidenav-item :is(a, button) :is(.prefix) {
300
+ display: none;
301
+ }
333
302
  }
334
303
 
335
- .tds-sidenav-section-header {
336
- display: flex;
337
- align-items: baseline;
338
- justify-content: space-between;
339
- padding-top: var(--t-spacing-2);
304
+ @media (min-width: 720px) {
305
+ .tds-sidenav-responsive-header {
306
+ display: none;
307
+ }
340
308
  }
341
309
 
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
- }
350
-
351
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
352
- padding-top: 0;
353
- }
354
-
355
- .tds-sidenav-section-header [slot="label-actions"] {
356
- display: flex;
357
- gap: var(--t-spacing-half);
358
- align-items: center;
359
- }
360
-
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
- }
368
-
369
- .tds-sidenav-section-list,
370
- .tds-sidenav-item {
371
- width: 100%;
372
- padding: 0;
373
- margin: 0;
374
- }
375
-
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
- }
310
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
311
+ display: none;
312
+ }
398
313
 
399
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)) {
314
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
400
315
  display: block;
401
- flex: 1;
402
- overflow: hidden;
403
- text-overflow: ellipsis;
404
- text-align: left;
405
- white-space: nowrap;
406
316
  }
407
317
 
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;
318
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
319
+ display: flex;
320
+ flex-direction: column;
412
321
  }
413
322
 
414
- :is(.tds-sidenav-item :is(a,button)):active {
415
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
416
- }
323
+ @layer t-critical {
324
+ tds-page-header:not(.hydrated) {
325
+ display: none;
326
+ }
327
+ }
417
328
 
418
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
419
- overflow: hidden;
420
- color: var(--tds-sidenav-item-icon-color);
421
- }
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-transparency-dark-010);
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;
422
346
 
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
- }
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);
428
349
 
429
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
430
- --tds-sidenav-indent: 19px;
431
- }
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);
432
353
 
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
- }
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);
438
356
 
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);
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);
442
360
 
443
- --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-selected);
444
- font-weight: var(--t-font-weight-semibold);
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);
445
366
  }
446
367
 
447
- .tds-sidenav-item:has(.tds-sidenav-section) {
448
- display: flex;
449
- flex-direction: column;
450
- gap: var(--t-spacing-half);
368
+ .tds-page-header--profile {
369
+ --tds-page-header-padding-y: 20px;
451
370
  }
452
-
453
- .tds-sidenav-item .tds-sidenav-section-list {
454
- --tds-sidenav-item-depth: 1;
455
- gap: 0;
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);
384
+ }
456
385
  }
386
+ }
457
387
 
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
- }
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
+ }
465
396
 
466
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
467
- --tds-sidenav-item-depth: 2;
468
- }
397
+ .tds-page-header:not(.has-nav) {
398
+ padding-bottom: var(--tds-page-header-padding-y);
399
+ }
469
400
 
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
- }
401
+ .tds-page-header.inactive {
402
+ background: var(--tds-page-header-background-color-inactive);
403
+ }
477
404
 
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
- }
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
+ }
488
413
 
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
- }
414
+ .tds-page-header--profile > .tds-page-header__title-bar {
415
+ align-items: center;
416
+ }
499
417
 
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
- }
418
+ .tds-page-header__primary {
419
+ width: 100%;
420
+ }
505
421
 
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
- }
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
+ }
510
430
 
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
- }
431
+ .tds-page-header [slot="actions"] {
432
+ width: 100%;
433
+ }
514
434
 
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
- }
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
+ }
519
444
 
520
- .tds-sidenav-responsive-header {
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 {
521
449
  display: flex;
522
- gap: var(--t-spacing-2);
523
- align-items: center;
524
- width: 100%;
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);
525
456
  }
526
457
 
527
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
528
- order: 0;
529
- }
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
+ }
530
481
 
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);
482
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
483
+ position: relative;
484
+ }
485
+
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
+ }
490
+
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
+ }
502
+
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;
538
506
  }
507
+ }
539
508
 
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;
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
+ }
518
+
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);
526
+ }
527
+
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
+ }
534
+
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
+ }
544
+
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%;
555
551
  }
556
552
 
557
- .tds-sidenav-collapse:popover-open,
558
- .tds-sidenav-collapse.\:popover-open {
559
- display: flex;
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;
560
558
  }
561
559
 
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;
560
+ .tds-page-header [slot="actions"] {
561
+ width: auto;
570
562
  }
571
563
 
572
- .tds-sidenav-item :is(a, button) :is(.prefix) {
573
- display: none;
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;
574
567
  }
575
568
  }
576
569
 
577
- @media (min-width: 720px) {
578
- .tds-sidenav-responsive-header {
579
- display: none;
580
- }
570
+ .tds-page-header-phone,
571
+ .tds-page-header-email {
572
+ color: var(--tds-page-header-color);
573
+ white-space: nowrap;
581
574
  }
582
575
 
583
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
584
- display: none;
585
- }
576
+ /* Truncate email */
586
577
 
587
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
588
- display: block;
589
- }
578
+ .tds-page-header-email {
579
+ max-width: 100%;
580
+ overflow: hidden;
581
+ text-overflow: ellipsis;
582
+ }
590
583
 
591
- tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
592
- display: flex;
593
- flex-direction: column;
594
- }
584
+ @keyframes indicator-pulse {
585
+ 0% {
586
+ opacity: .3;
587
+ transform: scale(.9);
588
+ }
589
+
590
+ 100% {
591
+ opacity: 0;
592
+ transform: scale(1.75);
593
+ }
594
+ }
595
595
 
596
596
  .tds-loading-spinner {
597
597
  --tds-loading-spinner-border-width: 4px; /* Default for md size */