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