@planningcenter/tapestry 1.2.0-rc.7 → 1.2.0-rc.8

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