@planningcenter/tapestry 2.2.0-rc.3 → 2.2.1-qa-362.0

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