@planningcenter/tapestry 1.5.0-rc.8 → 1.5.0-rc.9

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 (32) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/index.css +40 -2
  4. package/dist/index.css.map +1 -1
  5. package/dist/tapestry-wc/dist/components/{p-gd5DM39S.js → p-BXF2ikKJ.js} +3 -3
  6. package/dist/tapestry-wc/dist/components/{p-gd5DM39S.js.map → p-BXF2ikKJ.js.map} +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-BsCSoHCX.js → p-BtKXmsi1.js} +2 -2
  8. package/dist/tapestry-wc/dist/components/{p-BsCSoHCX.js.map → p-BtKXmsi1.js.map} +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-DViuoVas.js → p-CjbssJif.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-DViuoVas.js.map → p-CjbssJif.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-TUEssIhI.js → p-DIT8Hjbc.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-TUEssIhI.js.map → p-DIT8Hjbc.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-CCPYkPRW.js → p-DYl3wxke.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/{p-CCPYkPRW.js.map → p-DYl3wxke.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  16. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  17. package/dist/tapestry-wc/dist/components/tds-page-header.js +5 -5
  18. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  20. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  26. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  27. package/dist/unstable.css +521 -483
  28. package/dist/unstable.css.map +1 -1
  29. package/dist/webComponents.css +521 -483
  30. package/dist/webComponents.css.map +1 -1
  31. package/package.json +3 -3
  32. package/react-types/index.d.ts +1 -0
package/dist/unstable.css CHANGED
@@ -1,587 +1,625 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @layer t-critical {
4
- tds-page-header:not(.hydrated) {
5
- display: none;
6
- }
7
- }
8
3
 
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:
13
- var(
14
- --t-fill-color-transparency-dark-010
15
- );
16
- --tds-page-header-color: var(--t-text-color-default-secondary);
17
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
18
- --tds-page-header-padding-x: var(--t-spacing-2);
19
- --tds-page-header-padding-y: var(--t-spacing-2);
20
- --tds-page-header-nav-padding-x:
21
- var(
22
- --tds-page-header-padding-x,
23
- var(--t-spacing-3)
24
- );
25
- --tds-page-header-nav-background:
26
- linear-gradient(
27
- 180deg,
28
- rgba(0, 0, 0, 0) 0%,
29
- rgba(0, 0, 0, .1) 100%
30
- );
31
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
32
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
33
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
34
- --tds-page-header-nav-item-background-color:
35
- var(
36
- --t-fill-color-transparency-light-060
37
- );
38
- --tds-page-header-nav-item-border-width: 0;
4
+ @media (prefers-reduced-motion: no-preference) {
39
5
 
40
- --tds-page-header-nav-item-border-color:
41
- var(
42
- --tds-page-header-nav-item-background-color
43
- );
44
- --tds-page-header-nav-item-border-bottom-color:
45
- var(
46
- --t-border-color-default-base
47
- );
6
+ :root {
7
+ interpolate-size: allow-keywords;
8
+ }
9
+ }
48
10
 
49
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
50
- --tds-page-header-nav-item-background-color-hover:
51
- var(
52
- --t-fill-color-neutral-080
53
- );
54
- --tds-page-header-nav-item-border-color-hover:
55
- var(
56
- --tds-page-header-nav-item-background-color-hover
57
- );
11
+ @layer tds-component {
12
+ tds-sidenav {
13
+ --tds-sidenav-indent: 12px;
14
+ --tds-sidenav-item-depth: 0;
58
15
 
59
- --tds-page-header-nav-item-background-color-active:
60
- var(
61
- --t-fill-color-neutral-060
62
- );
63
- --tds-page-header-nav-item-border-color-active:
64
- var(
65
- --tds-page-header-nav-item-background-color-hover
66
- );
16
+ --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
67
17
 
68
- --tds-page-header-nav-item-color-disabled:
69
- var(
70
- --t-text-color-default-disabled
71
- );
72
- --tds-page-header-nav-item-background-color-disabled:
73
- var(
74
- --t-fill-color-neutral-080
75
- );
76
- --tds-page-header-nav-item-border-color-disabled:
77
- var(
78
- --tds-page-header-nav-item-background-color-disabled
79
- );
18
+ --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
19
+ --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
20
+ --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
80
21
 
81
- --tds-page-header-nav-item-color-selected:
82
- var(
83
- --t-text-color-default-primary
84
- );
85
- --tds-page-header-nav-item-border-color-selected:
86
- var(
87
- --t-border-color-default-base
88
- );
89
- --tds-page-header-nav-item-background-color-selected:
90
- var(
91
- --t-fill-color-neutral-100
92
- );
93
- --tds-page-header-nav-item-border-bottom-color-selected:
94
- var(
95
- --tds-page-header-nav-item-background-color-selected
96
- );
97
- }
22
+ --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
23
+ --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
24
+ --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
98
25
 
26
+ --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
27
+ --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
28
+ }
99
29
 
100
- @media (min-width: 720px) {
101
- .tds-page-header {
102
- --tds-page-header-background-color: var(--t-surface-color-card);
103
- --tds-page-header-padding-x: var(--t-spacing-3);
104
- --tds-page-header-nav-background: transparent;
105
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
106
- --tds-page-header-nav-item-border-width: 1px;
107
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
108
- --tds-page-header-nav-item-background-color:
109
- var(
110
- --t-fill-color-neutral-070
111
- );
112
- }
30
+ .is-classic tds-sidenav,
31
+ .tds-sidenav--theme-gray {
32
+ --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
33
+ --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
34
+ --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
35
+ --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
36
+ --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
113
37
  }
114
38
  }
115
39
 
116
- .tds-page-header {
117
- display: flex;
118
- flex-direction: column;
119
- gap: var(--t-spacing-1);
120
- padding-top: var(--tds-page-header-padding-y);
121
- color: var(--tds-page-header-color);
122
- background: var(--tds-page-header-background-color);
123
- border-bottom: 1px solid var(--t-border-color-default-base);
124
- }
40
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
41
+ display: flex;
42
+ }
125
43
 
126
- .tds-page-header:not(.has-nav) {
127
- padding-bottom: var(--tds-page-header-padding-y);
128
- }
44
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
45
+ flex-direction: column;
46
+ gap: var(--t-spacing-half);
47
+ width: 100%;
48
+ }
129
49
 
130
- .tds-page-header.inactive {
131
- background-color: var(--tds-page-header-background-color-inactive);
50
+ .tds-sidenav-section-list {
51
+ width: 100%;
52
+ padding: 0;
53
+ margin: 0;
54
+ list-style: none;
132
55
  }
133
56
 
134
- .tds-page-header__title-bar {
57
+ .tds-sidenav-section-header {
135
58
  display: flex;
136
- flex-direction: column;
137
- gap: var(--t-spacing-2) var(--t-spacing-half);
138
- align-items: flex-start;
59
+ align-items: baseline;
139
60
  justify-content: space-between;
140
- padding: 0 var(--tds-page-header-padding-x);
61
+ padding-top: var(--t-spacing-2);
141
62
  }
142
63
 
143
- .tds-page-header--profile > .tds-page-header__title-bar {
144
- align-items: center;
145
- }
64
+ .tds-sidenav-section-header h2 {
65
+ margin: 0;
66
+ font-size: var(--t-font-size-sm);
67
+ font-weight: var(--t-font-weight-semibold);
68
+ color: var(--t-text-color-default-secondary);
69
+ text-transform: uppercase;
70
+ line-height: 1.35;
71
+ }
146
72
 
147
- .tds-page-header__primary {
148
- flex: 1 1 auto;
149
- width: 100%;
150
- }
73
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
74
+ margin-top: 0;
75
+ }
151
76
 
152
- .tds-page-header__primary h1 {
77
+ .tds-sidenav-section-list,
78
+ .tds-sidenav-item {
79
+ width: 100%;
80
+ padding: 0;
153
81
  margin: 0;
154
- font-size: var(--t-font-size-3xl);
155
- font-weight: var(--t-font-weight-normal);
156
- line-height: 40px;
157
- color: var(--tds-page-header-headline-color);
158
82
  }
159
83
 
160
- .has-multi-actions.tds-page-header [slot="actions"],
161
- .has-multi-actions.tds-page-header .tds-page-header__actions {
162
- display: flex;
163
- flex-flow: row wrap;
164
- gap: var(--t-spacing-half) var(--t-spacing-1);
165
- align-items: flex-start;
166
- justify-content: flex-start;
167
- }
84
+ .tds-sidenav-item :is(a,button) {
85
+ position: relative;
86
+ display: flex;
87
+ gap: 12px;
88
+ align-items: center;
89
+ width: 100%;
90
+ padding: 12px;
91
+ overflow: hidden;
92
+ font-size: var(--t-font-size-sm);
93
+ line-height: 18px;
94
+ color: var(--t-text-color-default-headline);
95
+ white-space: nowrap;
96
+ text-decoration: none;
97
+ -webkit-appearance: none;
98
+ -moz-appearance: none;
99
+ appearance: none;
100
+ cursor: pointer;
101
+ background-color: var(--tds-sidenav-item-background, transparent);
102
+ border: 0;
103
+ border-radius: var(--t-border-radius-default);
104
+ transition: var(--tds-sidenav-item-transition);
105
+ }
168
106
 
169
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
170
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
171
- .tds-page-header nav[slot="navigation"] ul,
172
- .tds-page-header nav.tds-page-header__nav ul {
173
- display: flex;
174
- gap: var(--t-spacing-half);
175
- padding: var(--t-spacing-1) var(--tds-page-header-nav-padding-x) 0;
176
- margin: 0 0 -1px;
177
- overflow: auto;
178
- list-style: none;
179
- background: var(--tds-page-header-nav-background);
180
- }
107
+ :is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
108
+ display: block;
109
+ flex: 1;
110
+ overflow: hidden;
111
+ text-overflow: ellipsis;
112
+ text-align: left;
113
+ white-space: nowrap;
114
+ }
181
115
 
182
- .tds-page-header nav[slot="navigation"] a,
183
- .tds-page-header nav[slot="navigation"] button,
184
- .tds-page-header nav.tds-page-header__nav a,
185
- .tds-page-header nav.tds-page-header__nav button {
186
- position: relative;
187
- display: inline-flex;
188
- padding:
189
- var(--tds-page-header-nav-item-padding-y)
190
- var(--tds-page-header-nav-item-padding-x);
191
- font-size: var(--t-font-size-md);
192
- color: var(--tds-page-header-nav-item-color);
193
- white-space: nowrap;
194
- text-decoration: none;
195
- -webkit-appearance: none;
196
- -moz-appearance: none;
197
- appearance: none;
198
- cursor: pointer;
199
- outline-offset: -2px;
200
- background-color: var(--tds-page-header-nav-item-background-color);
201
- border:
202
- var(--tds-page-header-nav-item-border-width) solid
203
- var(--tds-page-header-nav-item-border-color);
204
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
205
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
206
- }
116
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
117
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
118
+ color: var(--t-text-color-default-headline);
119
+ text-decoration: none;
120
+ }
207
121
 
208
- .tds-page-header nav[slot="navigation"] a.selected,
209
- .tds-page-header nav[slot="navigation"] button.selected,
210
- .tds-page-header nav.tds-page-header__nav a.selected,
211
- .tds-page-header nav.tds-page-header__nav button.selected {
212
- --tds-page-header-nav-item-color:
213
- var(
214
- --tds-page-header-nav-item-color-selected
215
- );
216
- --tds-page-header-nav-item-border-color:
217
- var(
218
- --tds-page-header-nav-item-border-color-selected
219
- );
220
- --tds-page-header-nav-item-background-color:
221
- var(
222
- --tds-page-header-nav-item-background-color-selected
223
- );
224
- --tds-page-header-nav-item-border-bottom-color:
225
- var(
226
- --tds-page-header-nav-item-background-color-selected
227
- );
228
- }
122
+ :is(.tds-sidenav-item :is(a,button)):active {
123
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
124
+ }
229
125
 
230
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
231
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
232
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
233
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
234
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
235
- --tds-page-header-nav-item-background-color:
236
- var(
237
- --tds-page-header-nav-item-background-color-hover
238
- );
239
- --tds-page-header-nav-item-border-color:
240
- var(
241
- --tds-page-header-nav-item-border-color-hover
242
- );
243
- }
126
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
127
+ overflow: hidden;
128
+ color: var(--tds-sidenav-item-icon-color);
129
+ }
244
130
 
245
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
246
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
247
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
248
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
249
- background-color: var(--tds-page-header-nav-item-background-color-active);
250
- }
131
+ :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 {
132
+ display: block;
133
+ width: var(--t-element-size-md);
134
+ height: var(--t-element-size-md);
135
+ }
251
136
 
252
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
253
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
254
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
255
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
256
- color: var(--tds-page-header-nav-item-color-disabled);
257
- cursor: not-allowed;
258
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
259
- opacity: 1;
260
- }
137
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
138
+ --tds-sidenav-indent: 19px;
139
+ }
261
140
 
262
- @media (min-width: 720px) {
263
- .tds-page-header__title-bar,
264
- .tds-page-header--profile .tds-page-header__title-bar {
265
- flex-direction: row;
266
- align-items: flex-start;
267
- }
141
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list {
142
+ visibility: visible;
143
+ block-size: auto;
144
+ opacity: 1;
145
+ }
268
146
 
269
- .tds-page-header__primary {
270
- width: auto;
147
+ .tds-sidenav-item.selected :is(a,button) {
148
+ --tds-sidenav-item-nested-background: transparent;
149
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-selected);
150
+ --tds-sidenav-item-icon-color: var(--tds-sidenav-item-icon-color-selected);
151
+ font-weight: 600;
271
152
  }
272
153
 
273
- [slot="actions"],
274
- .tds-page-header__actions {
275
- margin-left: auto;
154
+ .tds-sidenav-item .tds-sidenav-section-list {
155
+ --tds-sidenav-item-depth: 1;
156
+ gap: 0;
276
157
  }
277
158
 
278
- .has-multi-actions.tds-page-header [slot="actions"],
279
- .has-multi-actions.tds-page-header .tds-page-header__actions {
280
- flex-flow: row wrap;
281
- margin-top: var(--t-spacing-half);
282
- }
283
- }
159
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list) {
160
+ visibility: hidden;
161
+ block-size: 0;
162
+ overflow-y: clip;
163
+ opacity: 0;
164
+ transition: content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
165
+ }
166
+
167
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
168
+ --tds-sidenav-item-depth: 2;
169
+ }
284
170
 
171
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
172
+ height: 32px;
173
+ padding-block: 9px;
174
+ padding-left: calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + 2px);
175
+ line-height: 1;
176
+ background-color: transparent;
177
+ }
285
178
 
286
- @media (prefers-reduced-motion: no-preference) {
179
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
180
+ position: absolute;
181
+ top: 0;
182
+ bottom: 0;
183
+ left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
184
+ width: 2px;
185
+ content: "";
186
+ background-color: var(--tds-sidenav-item-nested-border-color);
187
+ transition: var(--tds-sidenav-item-transition);
188
+ }
287
189
 
288
- :root {
289
- interpolate-size: allow-keywords;
290
- }
291
- }
190
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
191
+ position: absolute;
192
+ inset: 0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
193
+ z-index: -1;
194
+ height: 100%;
195
+ content: "";
196
+ background-color: var(--tds-sidenav-item-background);
197
+ border-radius: 0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
198
+ transition: var(--tds-sidenav-item-transition);
199
+ }
292
200
 
293
- @layer tds-component {
294
- tds-sidenav {
295
- --tds-sidenav-indent: 12px;
296
- --tds-sidenav-item-depth: 0;
201
+ :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 {
202
+ --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-hover);
203
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
204
+ }
297
205
 
298
- --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
206
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
207
+ --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-selected);
208
+ }
299
209
 
300
- --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
301
- --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
302
- --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
210
+ .tds-sidenav-responsive-header {
211
+ display: flex;
212
+ gap: var(--t-spacing-2);
213
+ align-items: center;
214
+ width: 100%;
215
+ }
303
216
 
304
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
305
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
306
- --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
217
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
218
+ display: flex;
219
+ align-items: center;
220
+ justify-content: center;
221
+ order: 0;
222
+ height: var(--t-container-size-md);
223
+ padding: 3px var(--t-spacing-1);
224
+ background-color: var(--t-fill-color-button-neutral-outline-dim-default);
225
+ border: 1px solid var(--t-border-color-button-neutral);
226
+ border-radius: var(--t-border-radius-md);
227
+ }
307
228
 
308
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
309
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
229
+ :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus-visible,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):hover {
230
+ background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
231
+ }
232
+
233
+ :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
234
+ background-color: var(--t-fill-color-button-neutral-outline-dim-active);
235
+ }
236
+
237
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
238
+ flex: 1;
239
+ order: 1;
240
+ margin: 0;
241
+ font-size: var(--t-font-size-lg);
242
+ font-weight: var(--t-font-weight-medium);
243
+ color: var(--t-text-color-default-headline);
310
244
  }
311
245
 
312
- .is-classic tds-sidenav,
313
- .tds-sidenav--theme-gray {
314
- --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
315
- --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
316
- --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
317
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
318
- --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
246
+ @media (max-width: 719px) {
247
+ .tds-sidenav-collapse {
248
+ position: absolute;
249
+ z-index: 10001;
250
+ display: none;
251
+ max-width: min(448px, calc(100vw - 48px));
252
+ padding: 0;
253
+ margin: 12px 0;
254
+ overflow: hidden;
255
+ outline: 0;
256
+ background: var(--t-surface-color-card);
257
+ border: 0;
258
+ border-radius: 6px;
259
+ box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
260
+ will-change: transform;
261
+ position-area: bottom span-right;
319
262
  }
320
- }
321
263
 
322
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
264
+ .tds-sidenav-collapse:popover-open,
265
+ .tds-sidenav-collapse.\:popover-open {
323
266
  display: flex;
324
267
  }
325
268
 
326
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
327
- flex-direction: column;
328
- gap: var(--t-spacing-half);
269
+ .tds-sidenav-scroll-container {
270
+ --webkit-overflow-scrolling: touch;
271
+ display: block;
329
272
  width: 100%;
273
+ height: -moz-fit-content;
274
+ height: fit-content;
275
+ padding: var(--t-spacing-2);
276
+ overflow-y: auto;
330
277
  }
331
278
 
332
- .tds-sidenav-section-list {
333
- width: 100%;
334
- padding: 0;
335
- margin: 0;
336
- list-style: none;
337
- }
338
-
339
- .tds-sidenav-section-header {
340
- display: flex;
341
- align-items: baseline;
342
- justify-content: space-between;
343
- padding-top: var(--t-spacing-2);
344
- }
345
-
346
- .tds-sidenav-section-header h2 {
347
- margin: 0;
348
- font-size: var(--t-font-size-sm);
349
- font-weight: var(--t-font-weight-semibold);
350
- color: var(--t-text-color-default-secondary);
351
- text-transform: uppercase;
352
- line-height: 1.35;
279
+ .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
280
+ display: none;
353
281
  }
282
+ }
354
283
 
355
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
356
- margin-top: 0;
284
+ @media (min-width: 720px) {
285
+ .tds-sidenav-responsive-header {
286
+ display: none;
357
287
  }
358
-
359
- .tds-sidenav-section-list,
360
- .tds-sidenav-item {
361
- width: 100%;
362
- padding: 0;
363
- margin: 0;
364
288
  }
365
289
 
366
- .tds-sidenav-item :is(a,button) {
367
- position: relative;
368
- display: flex;
369
- gap: 12px;
370
- align-items: center;
371
- width: 100%;
372
- padding: 12px;
373
- overflow: hidden;
374
- font-size: var(--t-font-size-sm);
375
- line-height: 18px;
376
- color: var(--t-text-color-default-headline);
377
- white-space: nowrap;
378
- text-decoration: none;
379
- -webkit-appearance: none;
380
- -moz-appearance: none;
381
- appearance: none;
382
- cursor: pointer;
383
- background-color: var(--tds-sidenav-item-background, transparent);
384
- border: 0;
385
- border-radius: var(--t-border-radius-default);
386
- transition: var(--tds-sidenav-item-transition);
387
- }
290
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
291
+ display: none;
292
+ }
388
293
 
389
- :is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
294
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
390
295
  display: block;
391
- flex: 1;
392
- overflow: hidden;
393
- text-overflow: ellipsis;
394
- text-align: left;
395
- white-space: nowrap;
396
296
  }
397
297
 
398
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
399
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
400
- color: var(--t-text-color-default-headline);
401
- text-decoration: none;
298
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
299
+ display: flex;
300
+ flex-direction: column;
402
301
  }
403
302
 
404
- :is(.tds-sidenav-item :is(a,button)):active {
405
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
406
- }
303
+ @layer t-critical {
304
+ tds-page-header:not(.hydrated) {
305
+ display: none;
306
+ }
307
+ }
407
308
 
408
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
409
- overflow: hidden;
410
- color: var(--tds-sidenav-item-icon-color);
411
- }
309
+ @layer t-component {
310
+ .tds-page-header {
311
+ --tds-page-header-background-color: var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-card));
312
+ --tds-page-header-background-color-inactive:
313
+ var(
314
+ --t-fill-color-transparency-dark-010
315
+ );
316
+ --tds-page-header-color: var(--t-text-color-default-secondary);
317
+ --tds-page-header-headline-color: var(--t-text-color-default-headline);
318
+ --tds-page-header-padding-x: var(--t-spacing-2);
319
+ --tds-page-header-padding-y: var(--t-spacing-2);
320
+ --tds-page-header-nav-padding-x:
321
+ var(
322
+ --tds-page-header-padding-x,
323
+ var(--t-spacing-3)
324
+ );
325
+ --tds-page-header-nav-background:
326
+ linear-gradient(
327
+ 180deg,
328
+ rgba(0, 0, 0, 0) 0%,
329
+ rgba(0, 0, 0, .1) 100%
330
+ );
331
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
332
+ --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
333
+ --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
334
+ --tds-page-header-nav-item-background-color:
335
+ var(
336
+ --t-fill-color-transparency-light-060
337
+ );
338
+ --tds-page-header-nav-item-border-width: 0;
412
339
 
413
- :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 {
414
- display: block;
415
- width: var(--t-element-size-md);
416
- height: var(--t-element-size-md);
417
- }
340
+ --tds-page-header-nav-item-border-color:
341
+ var(
342
+ --tds-page-header-nav-item-background-color
343
+ );
344
+ --tds-page-header-nav-item-border-bottom-color:
345
+ var(
346
+ --t-border-color-default-base
347
+ );
418
348
 
419
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
420
- --tds-sidenav-indent: 19px;
421
- }
349
+ --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
350
+ --tds-page-header-nav-item-background-color-hover:
351
+ var(
352
+ --t-fill-color-neutral-080
353
+ );
354
+ --tds-page-header-nav-item-border-color-hover:
355
+ var(
356
+ --tds-page-header-nav-item-background-color-hover
357
+ );
422
358
 
423
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list {
424
- visibility: visible;
425
- block-size: auto;
426
- opacity: 1;
427
- }
359
+ --tds-page-header-nav-item-background-color-active:
360
+ var(
361
+ --t-fill-color-neutral-060
362
+ );
363
+ --tds-page-header-nav-item-border-color-active:
364
+ var(
365
+ --tds-page-header-nav-item-background-color-hover
366
+ );
428
367
 
429
- .tds-sidenav-item.selected :is(a,button) {
430
- --tds-sidenav-item-nested-background: transparent;
431
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-selected);
432
- --tds-sidenav-item-icon-color: var(--tds-sidenav-item-icon-color-selected);
433
- font-weight: 600;
368
+ --tds-page-header-nav-item-color-disabled:
369
+ var(
370
+ --t-text-color-default-disabled
371
+ );
372
+ --tds-page-header-nav-item-background-color-disabled:
373
+ var(
374
+ --t-fill-color-neutral-080
375
+ );
376
+ --tds-page-header-nav-item-border-color-disabled:
377
+ var(
378
+ --tds-page-header-nav-item-background-color-disabled
379
+ );
380
+
381
+ --tds-page-header-nav-item-color-selected:
382
+ var(
383
+ --t-text-color-default-primary
384
+ );
385
+ --tds-page-header-nav-item-border-color-selected:
386
+ var(
387
+ --t-border-color-default-base
388
+ );
389
+ --tds-page-header-nav-item-background-color-selected:
390
+ var(
391
+ --t-fill-color-neutral-100
392
+ );
393
+ --tds-page-header-nav-item-border-bottom-color-selected:
394
+ var(
395
+ --tds-page-header-nav-item-background-color-selected
396
+ );
397
+ --tds-page-header-nav-item-indicator-color: var(--t-icon-color-status-warning-primary);
398
+ }
399
+
400
+
401
+ @media (min-width: 720px) {
402
+ .tds-page-header {
403
+ --tds-page-header-background-color: var(--t-surface-color-card);
404
+ --tds-page-header-padding-x: var(--t-spacing-3);
405
+ --tds-page-header-nav-background: transparent;
406
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
407
+ --tds-page-header-nav-item-border-width: 1px;
408
+ --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
409
+ --tds-page-header-nav-item-background-color:
410
+ var(
411
+ --t-fill-color-neutral-070
412
+ );
413
+ }
434
414
  }
415
+ }
416
+
417
+ .tds-page-header {
418
+ display: flex;
419
+ flex-direction: column;
420
+ padding-top: var(--tds-page-header-padding-y);
421
+ color: var(--tds-page-header-color);
422
+ background: var(--tds-page-header-background-color);
423
+ border-bottom: 1px solid var(--t-border-color-default-base);
424
+ }
425
+
426
+ .tds-page-header:not(.has-nav) {
427
+ padding-bottom: var(--tds-page-header-padding-y);
428
+ }
429
+
430
+ .tds-page-header.inactive {
431
+ background-color: var(--tds-page-header-background-color-inactive);
432
+ }
433
+
434
+ .tds-page-header__title-bar {
435
+ display: flex;
436
+ flex-direction: column;
437
+ gap: var(--t-spacing-2) var(--t-spacing-half);
438
+ align-items: flex-start;
439
+ justify-content: space-between;
440
+ padding: 0 var(--tds-page-header-padding-x);
441
+ }
435
442
 
436
- .tds-sidenav-item .tds-sidenav-section-list {
437
- --tds-sidenav-item-depth: 1;
438
- gap: 0;
439
- }
443
+ .tds-page-header--profile > .tds-page-header__title-bar {
444
+ align-items: center;
445
+ }
440
446
 
441
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list) {
442
- visibility: hidden;
443
- block-size: 0;
444
- overflow-y: clip;
445
- opacity: 0;
446
- transition: content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
447
- }
447
+ .tds-page-header__primary {
448
+ flex: 1 1 auto;
449
+ width: 100%;
450
+ }
448
451
 
449
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
450
- --tds-sidenav-item-depth: 2;
451
- }
452
+ .tds-page-header__primary h1 {
453
+ margin: 0;
454
+ font-size: var(--t-font-size-3xl);
455
+ font-weight: var(--t-font-weight-normal);
456
+ line-height: 40px;
457
+ color: var(--tds-page-header-headline-color);
458
+ }
452
459
 
453
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
454
- height: 32px;
455
- padding-block: 9px;
456
- padding-left: calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + 2px);
457
- line-height: 1;
458
- background-color: transparent;
459
- }
460
+ .has-multi-actions.tds-page-header [slot="actions"],
461
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
462
+ display: flex;
463
+ flex-flow: row wrap;
464
+ gap: var(--t-spacing-half) var(--t-spacing-1);
465
+ align-items: flex-start;
466
+ justify-content: flex-start;
467
+ }
460
468
 
461
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
462
- position: absolute;
463
- top: 0;
464
- bottom: 0;
465
- left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
466
- width: 2px;
467
- content: "";
468
- background-color: var(--tds-sidenav-item-nested-border-color);
469
- transition: var(--tds-sidenav-item-transition);
470
- }
469
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
470
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
471
+ .tds-page-header nav[slot="navigation"] ul,
472
+ .tds-page-header nav.tds-page-header__nav ul {
473
+ display: flex;
474
+ gap: var(--t-spacing-half);
475
+ padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
476
+ margin: 0 0 -1px;
477
+ overflow: auto;
478
+ list-style: none;
479
+ background: var(--tds-page-header-nav-background);
480
+ }
471
481
 
472
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
473
- position: absolute;
474
- inset: 0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
475
- z-index: -1;
476
- height: 100%;
477
- content: "";
478
- background-color: var(--tds-sidenav-item-background);
479
- border-radius: 0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
480
- transition: var(--tds-sidenav-item-transition);
481
- }
482
+ .tds-page-header nav[slot="navigation"] a,
483
+ .tds-page-header nav[slot="navigation"] button,
484
+ .tds-page-header nav.tds-page-header__nav a,
485
+ .tds-page-header nav.tds-page-header__nav button {
486
+ position: relative;
487
+ display: inline-flex;
488
+ padding:
489
+ var(--tds-page-header-nav-item-padding-y)
490
+ var(--tds-page-header-nav-item-padding-x);
491
+ font-size: var(--t-font-size-md);
492
+ color: var(--tds-page-header-nav-item-color);
493
+ white-space: nowrap;
494
+ text-decoration: none;
495
+ -webkit-appearance: none;
496
+ -moz-appearance: none;
497
+ appearance: none;
498
+ cursor: pointer;
499
+ outline-offset: -2px;
500
+ background-color: var(--tds-page-header-nav-item-background-color);
501
+ border:
502
+ var(--tds-page-header-nav-item-border-width) solid
503
+ var(--tds-page-header-nav-item-border-color);
504
+ border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
505
+ border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
506
+ }
482
507
 
483
- :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 {
484
- --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-hover);
485
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
486
- }
508
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
509
+ position: relative;
510
+ }
487
511
 
488
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
489
- --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-selected);
490
- }
512
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button) {
513
+ -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
514
+ mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
515
+ }
491
516
 
492
- .tds-sidenav-responsive-header {
493
- display: flex;
494
- gap: var(--t-spacing-2);
495
- align-items: center;
496
- width: 100%;
517
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
518
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
519
+ position: absolute;
520
+ top: -5px;
521
+ right: -2px;
522
+ width: 10px;
523
+ height: 10px;
524
+ content: "";
525
+ background: var(--tds-page-header-nav-item-indicator-color);
526
+ border-radius: 50%;
497
527
  }
498
528
 
499
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
500
- display: flex;
501
- align-items: center;
502
- justify-content: center;
503
- order: 0;
504
- height: var(--t-container-size-md);
505
- padding: 3px var(--t-spacing-1);
506
- background-color: var(--t-fill-color-button-neutral-outline-dim-default);
507
- border: 1px solid var(--t-border-color-button-neutral);
508
- border-radius: var(--t-border-radius-md);
529
+ @media (prefers-reduced-motion: no-preference) {
530
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
531
+ animation: indicator-pulse 1.25s ease infinite;
509
532
  }
533
+ }
510
534
 
511
- :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):focus-visible,:is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):hover {
512
- background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
513
- }
535
+ .tds-page-header nav[slot="navigation"] a.selected,
536
+ .tds-page-header nav[slot="navigation"] button.selected,
537
+ .tds-page-header nav.tds-page-header__nav a.selected,
538
+ .tds-page-header nav.tds-page-header__nav button.selected {
539
+ --tds-page-header-nav-item-color:
540
+ var(
541
+ --tds-page-header-nav-item-color-selected
542
+ );
543
+ --tds-page-header-nav-item-border-color:
544
+ var(
545
+ --tds-page-header-nav-item-border-color-selected
546
+ );
547
+ --tds-page-header-nav-item-background-color:
548
+ var(
549
+ --tds-page-header-nav-item-background-color-selected
550
+ );
551
+ --tds-page-header-nav-item-border-bottom-color:
552
+ var(
553
+ --tds-page-header-nav-item-background-color-selected
554
+ );
555
+ }
514
556
 
515
- :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
516
- background-color: var(--t-fill-color-button-neutral-outline-dim-active);
517
- }
557
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
558
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
559
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
560
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
561
+ --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
562
+ --tds-page-header-nav-item-background-color:
563
+ var(
564
+ --tds-page-header-nav-item-background-color-hover
565
+ );
566
+ --tds-page-header-nav-item-border-color:
567
+ var(
568
+ --tds-page-header-nav-item-border-color-hover
569
+ );
570
+ }
518
571
 
519
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
520
- flex: 1;
521
- order: 1;
522
- margin: 0;
523
- font-size: var(--t-font-size-lg);
524
- font-weight: var(--t-font-weight-medium);
525
- color: var(--t-text-color-default-headline);
526
- }
572
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
573
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
574
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
575
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
576
+ background-color: var(--tds-page-header-nav-item-background-color-active);
577
+ }
527
578
 
528
- @media (max-width: 719px) {
529
- .tds-sidenav-collapse {
530
- position: absolute;
531
- z-index: 10001;
532
- display: none;
533
- max-width: min(448px, calc(100vw - 48px));
534
- padding: 0;
535
- margin: 12px 0;
536
- overflow: hidden;
537
- outline: 0;
538
- background: var(--t-surface-color-card);
539
- border: 0;
540
- border-radius: 6px;
541
- box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
542
- will-change: transform;
543
- position-area: bottom span-right;
579
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
580
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
581
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
582
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
583
+ color: var(--tds-page-header-nav-item-color-disabled);
584
+ cursor: not-allowed;
585
+ background-color: var(--tds-page-header-nav-item-background-color-disabled);
586
+ opacity: 1;
587
+ }
588
+
589
+ @media (min-width: 720px) {
590
+ .tds-page-header__title-bar,
591
+ .tds-page-header--profile .tds-page-header__title-bar {
592
+ flex-direction: row;
593
+ align-items: flex-start;
544
594
  }
545
595
 
546
- .tds-sidenav-collapse:popover-open,
547
- .tds-sidenav-collapse.\:popover-open {
548
- display: flex;
596
+ .tds-page-header__primary {
597
+ width: auto;
549
598
  }
550
599
 
551
- .tds-sidenav-scroll-container {
552
- --webkit-overflow-scrolling: touch;
553
- display: block;
554
- width: 100%;
555
- height: -moz-fit-content;
556
- height: fit-content;
557
- padding: var(--t-spacing-2);
558
- overflow-y: auto;
600
+ [slot="actions"],
601
+ .tds-page-header__actions {
602
+ margin-left: auto;
559
603
  }
560
604
 
561
- .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
562
- display: none;
605
+ .has-multi-actions.tds-page-header [slot="actions"],
606
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
607
+ flex-flow: row wrap;
608
+ margin-top: var(--t-spacing-half);
563
609
  }
564
610
  }
565
611
 
566
- @media (min-width: 720px) {
567
- .tds-sidenav-responsive-header {
568
- display: none;
612
+ @keyframes indicator-pulse {
613
+ 0% {
614
+ opacity: .3;
615
+ transform: scale(.9);
616
+ }
617
+ 100% {
618
+ opacity: 0;
619
+ transform: scale(1.75);
569
620
  }
570
621
  }
571
622
 
572
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
573
- display: none;
574
- }
575
-
576
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
577
- display: block;
578
- }
579
-
580
- tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
581
- display: flex;
582
- flex-direction: column;
583
- }
584
-
585
623
  /**
586
624
  * Do not edit directly, this file was auto-generated.
587
625
  */