@planningcenter/tapestry 1.5.0-rc.4 → 1.5.0-rc.5

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