@planningcenter/tapestry 3.2.2-rc.0 → 3.2.2-rc.2

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 (5) hide show
  1. package/dist/reactRender.css +894 -894
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +894 -894
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,364 +1,196 @@
1
+ .tds-checkbox{
2
+ --tds-checkbox-font-size:var(--t-font-size-md);
3
+ --tds-checkbox-cursor:pointer;
4
+ --tds-checkbox-line-height:1.4;
5
+ --tds-checkbox-transition-property:background-color, border-color;
1
6
 
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
7
- }
8
-
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
17
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
- --tds-sidenav-collapse-closed-opacity:0;
20
- --tds-sidenav-collapse-open-opacity:1;
21
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
- --tds-sidenav-collapse-open-transform:translateY(0);
23
-
24
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
28
-
29
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
- --tds-sidenav-item-nested-background-selected:transparent;
32
-
33
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
36
-
37
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
- }
40
-
41
- @media (prefers-reduced-motion: reduce){
42
- tds-sidenav,
43
- .tds-sidenav{
44
- --tds-sidenav-collapse-transition-enter:none;
45
- --tds-sidenav-collapse-transition-exit:none;
46
- --tds-sidenav-collapse-closed-transform:none;
47
- --tds-sidenav-collapse-open-transform:none;
48
- }
49
- }
50
-
51
- .tds-sidenav--theme-gray{
52
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
57
- }
58
- }
7
+ --tds-checkbox-input-size:var(--t-element-size-md);
8
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
10
+ --tds-checkbox-input-background-color:transparent;
59
11
 
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
62
- }
12
+ --tds-checkbox-input-icon:none;
13
+ --tds-checkbox-input-icon-visibility:hidden;
14
+ --tds-checkbox-input-icon-opacity:0;
15
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
63
16
 
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
68
- }
17
+ --tds-checkbox-label-color:var(--t-form-color);
69
18
 
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
- }
19
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
+ --tds-checkbox-description-line-height:1.35;
21
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
22
+ --tds-checkbox-description-invalid-icon-display:none;
76
23
 
77
- .tds-sidenav-section-header{
78
- display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
24
+ position:relative;
25
+ display:inline-grid;
26
+ grid-template-columns:auto;
27
+ grid-auto-columns:1fr;
28
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
+ line-height:var(--tds-checkbox-line-height);
30
+ cursor:var(--tds-checkbox-cursor);
31
+ -webkit-user-select:none;
32
+ -moz-user-select:none;
33
+ user-select:none;
82
34
  }
83
35
 
84
- .tds-sidenav-section-header h2{
85
- margin:0;
86
- font-size:var(--t-font-size-sm);
87
- font-weight:var(--t-font-weight-semibold);
88
- line-height:1.35;
89
- color:var(--t-text-color-secondary);
90
- text-transform:uppercase;
91
- }
92
-
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
36
+ .tds-checkbox label{
37
+ grid-area:1 / 2;
38
+ font-size:var(--tds-checkbox-font-size);
39
+ font-weight:var(--t-font-weight-normal);
40
+ color:var(--tds-checkbox-label-color);
41
+ cursor:var(--tds-checkbox-cursor);
95
42
  }
96
43
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
44
+ .tds-checkbox tds-indeterminate{
98
45
  display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
101
46
  }
102
47
 
103
- .tds-sidenav-section [slot="section-actions"]{
104
- display:flex;
105
- gap:12px;
106
- align-items:center;
107
- min-height:42px;
108
- padding:var(--t-spacing-1) 0;
109
- }
110
-
111
- .tds-sidenav-section-list,
112
- .tds-sidenav-item{
113
- width:100%;
114
- padding:0;
115
- margin:0;
116
- }
117
-
118
- .tds-sidenav-item :is(a,button){
48
+ .tds-checkbox input[type="checkbox"]{
119
49
  position:relative;
120
- display:flex;
121
- gap:12px;
122
- align-items:center;
123
- width:100%;
124
- padding:12px;
125
- overflow:hidden;
126
- font-size:var(--t-font-size-sm);
127
- line-height:18px;
128
- color:var(--t-text-color-headline);
129
- white-space:nowrap;
130
- text-decoration:none;
50
+ width:1em;
51
+ height:1em;
52
+ margin:calc((1lh - 1em) / 2) 0 0;
53
+ font-size:var(--tds-checkbox-font-size);
54
+ line-height:inherit;
131
55
  -webkit-appearance:none;
132
56
  -moz-appearance:none;
133
57
  appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
58
+ cursor:var(--tds-checkbox-cursor);
59
+ background-color:var(--tds-checkbox-input-background-color);
60
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
+ border-radius:var(--tds-checkbox-input-border-radius);
62
+ transition-timing-function:var(--t-ease-in-out);
63
+ transition-duration:var(--t-duration-200);
64
+ transition-property:var(--tds-checkbox-transition-property);
139
65
  }
140
66
 
141
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
- display:block;
143
- flex:1;
144
- overflow:hidden;
145
- text-overflow:ellipsis;
146
- text-align:left;
147
- white-space:nowrap;
67
+ :is(.tds-checkbox input[type="checkbox"])::before{
68
+ position:absolute;
69
+ top:50%;
70
+ left:50%;
71
+ visibility:var(--tds-checkbox-input-icon-visibility);
72
+ width:100%;
73
+ height:100%;
74
+ content:"";
75
+ background-color:var(--tds-checkbox-input-icon-fill);
76
+ border-radius:var(--tds-checkbox-input-border-radius);
77
+ opacity:var(--tds-checkbox-input-icon-opacity);
78
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
79
+ mask-image:var(--tds-checkbox-input-icon);
80
+ -webkit-mask-repeat:no-repeat;
81
+ mask-repeat:no-repeat;
82
+ -webkit-mask-size:contain;
83
+ mask-size:contain;
84
+ transform:translate(-50%, -50%);
148
85
  }
149
86
 
150
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
- color:var(--t-text-color-headline);
153
- text-decoration:none;
87
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
154
90
  }
155
91
 
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
92
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
+ outline:var(--t-focus-ring-outline);
94
+ outline-offset:var(--t-focus-ring-offset);
158
95
  }
159
96
 
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
97
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
98
+ pointer-events:none;
163
99
  }
164
100
 
165
- :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{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
169
- }
101
+ @media (prefers-reduced-motion: reduce){
170
102
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
103
+ .tds-checkbox input[type="checkbox"]{
104
+ --tds-checkbox-transition-property:none;
105
+ }
173
106
  }
174
107
 
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
108
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
+ --tds-checkbox-input-icon-visibility:visible;
112
+ --tds-checkbox-input-icon-opacity:1;
113
+ }
114
+
115
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
179
118
  }
180
119
 
181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
120
+ .tds-checkbox:has(input:checked){
121
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
+ }
184
123
 
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
124
+ .tds-checkbox:has(input:indeterminate){
125
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
187
126
  }
188
127
 
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
128
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
131
+ --tds-checkbox-description-invalid-icon-display:inline-block;
193
132
  }
194
133
 
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
199
-
200
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
- visibility:hidden;
202
- block-size:0;
203
- overflow-y:clip;
204
- opacity:0;
205
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
- }
207
-
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
134
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
210
137
  }
211
138
 
212
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
- min-height:var(--t-element-size-2xl);
214
- padding-block:9px;
215
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
- line-height:1;
217
- background-color:transparent;
139
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
140
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
218
142
  }
219
143
 
220
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
- position:absolute;
222
- top:0;
223
- bottom:0;
224
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
- width:2px;
226
- content:"";
227
- background-color:var(--tds-sidenav-item-nested-border-color);
228
- transition:var(--tds-sidenav-item-transition);
229
- }
230
-
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
232
- position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
236
- content:"";
237
- background-color:var(--tds-sidenav-item-nested-background);
238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
- transition:var(--tds-sidenav-item-transition);
240
- }
241
-
242
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
- display:block;
244
- text-align:left;
245
- white-space:normal;
246
- }
247
-
248
- :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{
249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
251
- }
252
-
253
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
144
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
145
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
255
147
  }
256
148
 
257
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
- font-weight:var(--t-font-weight-medium);
149
+ .tds-checkbox:has(input:required) label::after{
150
+ margin-left:.25ch;
151
+ color:var(--t-text-color-status-error);
152
+ content:"*";
260
153
  }
261
154
 
262
- .tds-sidenav-responsive-header{
263
- display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
267
- }
268
-
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
271
- }
272
-
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
276
- margin:0;
277
- font-size:var(--t-font-size-lg);
278
- font-weight:var(--t-font-weight-medium);
279
- color:var(--t-text-color-headline);
280
- }
281
-
282
- @media (max-width: 719px){
283
- .tds-sidenav-collapse{
284
- z-index:10001;
285
- display:none;
286
- max-width:min(448px, calc(100vw - 48px));
287
- padding:0;
288
- margin:12px 0;
289
- position-area:bottom span-right;
290
- overflow:hidden;
291
- outline:0;
292
- background:var(--t-surface-color-card);
293
- border:0;
294
- border-radius:6px;
295
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
- opacity:var(--tds-sidenav-collapse-open-opacity);
297
- transform:var(--tds-sidenav-collapse-open-transform);
298
- transition:var(--tds-sidenav-collapse-transition-enter);
299
- will-change:transform;
300
- }
301
-
302
- .tds-sidenav-scroll-container{
303
- --webkit-overflow-scrolling:touch;
304
- display:block;
305
- width:100%;
306
- height:-moz-fit-content;
307
- height:fit-content;
308
- padding:var(--t-spacing-2);
309
- overflow-y:auto;
310
- }
155
+ .tds-checkbox:has(input:disabled){
156
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
311
158
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
159
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
160
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
161
+ --tds-checkbox-cursor:not-allowed;
314
162
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
318
- }
319
-
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
323
- }
324
163
 
325
- @starting-style{
326
- .tds-sidenav-collapse:popover-open{
327
- opacity:var(--tds-sidenav-collapse-closed-opacity);
328
- transform:var(--tds-sidenav-collapse-closed-transform);
329
- }
330
- }
331
- }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
164
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
335
166
  }
336
167
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- transition:var(--tds-sidenav-collapse-transition-exit);
340
- }
341
- }
168
+ .tds-checkbox-description{
169
+ display:flex;
170
+ grid-area:2 / 2;
171
+ gap:var(--t-spacing-half);
172
+ align-items:flex-start;
173
+ margin:0;
174
+ font-size:var(--tds-checkbox-description-font-size);
175
+ line-height:var(--tds-checkbox-description-line-height);
176
+ color:var(--tds-checkbox-description-color);
177
+ cursor:text;
342
178
  }
343
179
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
180
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
+ display:var(--tds-checkbox-description-invalid-icon-display);
182
+ flex-shrink:0;
183
+ margin-top:calc(.5lh - .5em);
184
+ line-height:var(--tds-checkbox-description-line-height);
347
185
  }
348
- }
349
-
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
353
-
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
357
186
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
187
+ .tds-checkbox--sm{
188
+ --tds-checkbox-line-height:1.35;
189
+ --tds-checkbox-input-size:var(--t-element-size-sm);
190
+ --tds-checkbox-font-size:var(--t-font-size-sm);
191
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
+ --tds-checkbox-description-line-height:1.3;
193
+ }
362
194
 
363
195
 
364
196
  :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
@@ -384,463 +216,605 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
384
216
  }
385
217
  }
386
218
 
387
- .tds-checkbox{
388
- --tds-checkbox-font-size:var(--t-font-size-md);
389
- --tds-checkbox-cursor:pointer;
390
- --tds-checkbox-line-height:1.4;
391
- --tds-checkbox-transition-property:background-color, border-color;
219
+ .tds-input:has(textarea){
220
+ --tds-input-padding-block:6px;
221
+ --tds-input-resizer-size:var(--t-element-size-sm);
222
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
223
+ }
392
224
 
393
- --tds-checkbox-input-size:var(--t-element-size-md);
394
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
395
- --tds-checkbox-input-border-color:var(--t-form-border-color);
396
- --tds-checkbox-input-background-color:transparent;
225
+ @supports (x: attr(x type(*))){
397
226
 
398
- --tds-checkbox-input-icon:none;
399
- --tds-checkbox-input-icon-visibility:hidden;
400
- --tds-checkbox-input-icon-opacity:0;
401
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
227
+ .tds-input:has(textarea){
228
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
229
+ }
230
+ }
402
231
 
403
- --tds-checkbox-label-color:var(--t-form-color);
232
+ .tds-input.tds-textarea--resize-vertical textarea{
233
+ resize:vertical;
234
+ }
404
235
 
405
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
406
- --tds-checkbox-description-line-height:1.35;
407
- --tds-checkbox-description-color:var(--t-text-color-secondary);
408
- --tds-checkbox-description-invalid-icon-display:none;
236
+ .tds-input.tds-textarea--resize-none textarea{
237
+ resize:none;
238
+ }
409
239
 
410
- position:relative;
411
- display:inline-grid;
412
- grid-template-columns:auto;
413
- grid-auto-columns:1fr;
414
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
415
- line-height:var(--tds-checkbox-line-height);
416
- cursor:var(--tds-checkbox-cursor);
417
- -webkit-user-select:none;
418
- -moz-user-select:none;
419
- user-select:none;
420
- }
240
+ .tds-input.tds-textarea--resize-auto textarea{
241
+ resize:vertical;
242
+ }
421
243
 
422
- .tds-checkbox label{
423
- grid-area:1 / 2;
424
- font-size:var(--tds-checkbox-font-size);
425
- font-weight:var(--t-font-weight-normal);
426
- color:var(--tds-checkbox-label-color);
427
- cursor:var(--tds-checkbox-cursor);
428
- }
244
+ @supports (field-sizing: content){
245
+ .tds-input.tds-textarea--resize-auto textarea{
246
+ field-sizing:content;
247
+ resize:none;
248
+ }
249
+ }
429
250
 
430
- .tds-checkbox tds-indeterminate{
431
- display:flex;
432
- }
251
+ .tds-input textarea{
252
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
253
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
254
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
255
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
256
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
257
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
258
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
259
+ --tds-input-scrollbar-thumb-border-radius:999px;
260
+ --tds-input-scrollbar-thumb-border-width:3px;
261
+ --tds-input-scrollbar-track-margin-block:.125rem;
262
+ scrollbar-color:initial;
263
+ transition-timing-function:var(--t-ease-in-out);
264
+ transition-duration:var(--t-duration-200);
265
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
266
+ }
433
267
 
434
- .tds-checkbox input[type="checkbox"]{
268
+ @media (pointer: fine){
269
+ :is(.tds-input textarea)::-webkit-scrollbar{
270
+ width:12px;
271
+ height:12px;
272
+ cursor:default;
273
+ }
274
+
275
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
276
+ cursor:default;
277
+ background:var(--tds-input-scrollbar-thumb-color);
278
+ background-clip:content-box;
279
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
280
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
281
+ }
282
+
283
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
284
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
285
+ }
286
+
287
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
288
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
289
+ }
290
+
291
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
292
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
293
+ }
294
+
295
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
296
+ background:var(--tds-input-scrollbar-surface-color);
297
+ }
298
+
299
+ :is(.tds-input textarea)::-webkit-resizer{
300
+ background:var(--tds-input-resizer-icon) no-repeat;
301
+ background-position:right bottom;
302
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
303
+ }
304
+
305
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
306
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
307
+ cursor:default;
308
+ }
309
+
310
+ @supports (-moz-appearance: none){
311
+ :is(.tds-input textarea){
312
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
313
+ scrollbar-width:thin;
314
+ }
315
+
316
+ @media (hover){
317
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
318
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
319
+ }
320
+ }
321
+ }
322
+ }
323
+
324
+ .tds-radio{
325
+ --tds-radio-font-size:var(--t-font-size-md);
326
+ --tds-radio-cursor:pointer;
327
+ --tds-radio-line-height:1.4;
328
+ --tds-radio-transition-property:border-width;
329
+
330
+ --tds-radio-input-size:var(--t-element-size-md);
331
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
332
+ --tds-radio-input-border-color:var(--t-form-border-color);
333
+ --tds-radio-input-border-width:var(--t-form-border-width);
334
+ --tds-radio-input-background-color:transparent;
335
+
336
+ --tds-radio-label-color:var(--t-form-color);
337
+
338
+ --tds-radio-description-font-size:var(--t-font-size-sm);
339
+ --tds-radio-description-line-height:1.35;
340
+ --tds-radio-description-color:var(--t-text-color-secondary);
341
+
342
+ position:relative;
343
+ display:inline-grid;
344
+ grid-template-columns:auto;
345
+ grid-auto-columns:1fr;
346
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
347
+ line-height:var(--tds-radio-line-height);
348
+ cursor:var(--tds-radio-cursor);
349
+ -webkit-user-select:none;
350
+ -moz-user-select:none;
351
+ user-select:none;
352
+ }
353
+
354
+ .tds-radio label{
355
+ grid-area:1 / 2;
356
+ font-size:var(--tds-radio-font-size);
357
+ font-weight:var(--t-font-weight-normal);
358
+ color:var(--tds-radio-label-color);
359
+ cursor:var(--tds-radio-cursor);
360
+ }
361
+
362
+ .tds-radio input[type="radio"]{
435
363
  position:relative;
436
364
  width:1em;
437
365
  height:1em;
438
366
  margin:calc((1lh - 1em) / 2) 0 0;
439
- font-size:var(--tds-checkbox-font-size);
367
+ font-size:var(--tds-radio-font-size);
440
368
  line-height:inherit;
441
369
  -webkit-appearance:none;
442
370
  -moz-appearance:none;
443
371
  appearance:none;
444
- cursor:var(--tds-checkbox-cursor);
445
- background-color:var(--tds-checkbox-input-background-color);
446
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
447
- border-radius:var(--tds-checkbox-input-border-radius);
372
+ cursor:var(--tds-radio-cursor);
373
+ background-color:var(--tds-radio-input-background-color);
374
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
375
+ border-radius:var(--tds-radio-input-border-radius);
448
376
  transition-timing-function:var(--t-ease-in-out);
449
377
  transition-duration:var(--t-duration-200);
450
- transition-property:var(--tds-checkbox-transition-property);
378
+ transition-property:var(--tds-radio-transition-property);
451
379
  }
452
380
 
453
- :is(.tds-checkbox input[type="checkbox"])::before{
454
- position:absolute;
455
- top:50%;
456
- left:50%;
457
- visibility:var(--tds-checkbox-input-icon-visibility);
458
- width:100%;
459
- height:100%;
460
- content:"";
461
- background-color:var(--tds-checkbox-input-icon-fill);
462
- border-radius:var(--tds-checkbox-input-border-radius);
463
- opacity:var(--tds-checkbox-input-icon-opacity);
464
- -webkit-mask-image:var(--tds-checkbox-input-icon);
465
- mask-image:var(--tds-checkbox-input-icon);
466
- -webkit-mask-repeat:no-repeat;
467
- mask-repeat:no-repeat;
468
- -webkit-mask-size:contain;
469
- mask-size:contain;
470
- transform:translate(-50%, -50%);
471
- }
472
-
473
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
474
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
475
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
381
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
382
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
383
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
476
384
  }
477
385
 
478
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
386
+ :is(.tds-radio input[type="radio"]):focus-visible{
479
387
  outline:var(--t-focus-ring-outline);
480
388
  outline-offset:var(--t-focus-ring-offset);
481
389
  }
482
390
 
483
- :is(.tds-checkbox input[type="checkbox"]):disabled{
391
+ :is(.tds-radio input[type="radio"]):disabled{
484
392
  pointer-events:none;
485
393
  }
486
394
 
487
395
  @media (prefers-reduced-motion: reduce){
488
396
 
489
- .tds-checkbox input[type="checkbox"]{
490
- --tds-checkbox-transition-property:none;
397
+ .tds-radio input[type="radio"]{
398
+ --tds-radio-transition-property:none;
491
399
  }
492
400
  }
493
401
 
494
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
495
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
496
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
497
- --tds-checkbox-input-icon-visibility:visible;
498
- --tds-checkbox-input-icon-opacity:1;
402
+ .tds-radio:has(input:checked){
403
+ --tds-radio-input-background-color:var(--t-form-background-color);
404
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
405
+ --tds-radio-input-border-width:4px;
499
406
  }
500
407
 
501
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
502
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
503
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
408
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
409
+ --tds-radio-input-background-color:var(--t-form-background-color);
410
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
504
411
  }
505
412
 
506
- .tds-checkbox:has(input:checked){
507
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
508
- }
509
-
510
- .tds-checkbox:has(input:indeterminate){
511
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
512
- }
513
-
514
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
515
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
516
- --tds-checkbox-description-color:var(--t-text-color-status-error);
517
- --tds-checkbox-description-invalid-icon-display:inline-block;
413
+ .tds-radio:has(input:user-invalid){
414
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
518
415
  }
519
416
 
520
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
521
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
522
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
523
- }
524
-
525
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
526
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
527
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
528
- }
529
-
530
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
531
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
532
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
533
- }
534
-
535
- .tds-checkbox:has(input:required) label::after{
536
- margin-left:.25ch;
537
- color:var(--t-text-color-status-error);
538
- content:"*";
417
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
418
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
419
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
539
420
  }
540
421
 
541
- .tds-checkbox:has(input:disabled){
542
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
543
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
422
+ .tds-radio:has(input:disabled){
423
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
424
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
544
425
 
545
- --tds-checkbox-label-color:var(--t-form-color-disabled);
546
- --tds-checkbox-description-color:var(--t-form-color-disabled);
547
- --tds-checkbox-cursor:not-allowed;
426
+ --tds-radio-label-color:var(--t-form-color-disabled);
427
+ --tds-radio-description-color:var(--t-form-color-disabled);
428
+ --tds-radio-cursor:not-allowed;
548
429
  }
549
430
 
550
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
551
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
431
+ .tds-radio:has(input:disabled) input:checked{
432
+ --tds-radio-input-background-color:var(--t-form-background-color);
433
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
552
434
  }
553
435
 
554
- .tds-checkbox-description{
436
+ .tds-radio-description{
555
437
  display:flex;
556
438
  grid-area:2 / 2;
557
439
  gap:var(--t-spacing-half);
558
440
  align-items:flex-start;
559
441
  margin:0;
560
- font-size:var(--tds-checkbox-description-font-size);
561
- line-height:var(--tds-checkbox-description-line-height);
562
- color:var(--tds-checkbox-description-color);
442
+ font-size:var(--tds-radio-description-font-size);
443
+ line-height:var(--tds-radio-description-line-height);
444
+ color:var(--tds-radio-description-color);
563
445
  cursor:text;
564
446
  }
565
447
 
566
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
567
- display:var(--tds-checkbox-description-invalid-icon-display);
568
- flex-shrink:0;
569
- margin-top:calc(.5lh - .5em);
570
- line-height:var(--tds-checkbox-description-line-height);
571
- }
572
-
573
- .tds-checkbox--sm{
574
- --tds-checkbox-line-height:1.35;
575
- --tds-checkbox-input-size:var(--t-element-size-sm);
576
- --tds-checkbox-font-size:var(--t-font-size-sm);
577
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
578
- --tds-checkbox-description-line-height:1.3;
448
+ .tds-radio--sm{
449
+ --tds-radio-line-height:1.35;
450
+ --tds-radio-input-size:var(--t-element-size-sm);
451
+ --tds-radio-font-size:var(--t-font-size-sm);
452
+ --tds-radio-description-font-size:var(--t-font-size-xs);
453
+ --tds-radio-description-line-height:1.3;
579
454
  }
580
455
 
581
- @layer t-critical{
582
- tds-page-header:not(.hydrated){
583
- display:none;
584
- }
456
+
457
+ @media (prefers-reduced-motion: no-preference){
458
+
459
+ :root{
460
+ interpolate-size:allow-keywords;
585
461
  }
462
+ }
586
463
 
587
- @layer t-component{
588
- .tds-page-header{
589
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
590
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
591
- --tds-page-header-color:var(--t-text-color);
592
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
593
- --tds-page-header-headline-color:var(--t-text-color-headline);
594
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
595
- --tds-page-header-padding-x:var(--t-spacing-2);
596
- --tds-page-header-padding-y:var(--t-spacing-2);
597
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
598
- --tds-page-header-nav-gap:var(--t-spacing-1);
599
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
600
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
601
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
602
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
603
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
604
- --tds-page-header-nav-item-border-width:1px;
464
+ @layer tds-component{
465
+ tds-sidenav,
466
+ .tds-sidenav{
467
+ --tds-sidenav-indent:12px;
468
+ --tds-sidenav-item-depth:0;
605
469
 
606
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
607
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
470
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
608
471
 
609
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
610
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
611
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
472
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
473
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
474
+ --tds-sidenav-collapse-closed-opacity:0;
475
+ --tds-sidenav-collapse-open-opacity:1;
476
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
477
+ --tds-sidenav-collapse-open-transform:translateY(0);
612
478
 
613
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
614
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
479
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
480
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
481
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
482
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
615
483
 
616
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
617
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
618
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
484
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
485
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
486
+ --tds-sidenav-item-nested-background-selected:transparent;
619
487
 
620
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
621
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
622
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
623
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
624
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
625
- }
488
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
489
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
490
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
626
491
 
627
- .tds-page-header--profile{
628
- --tds-page-header-padding-y:20px;
492
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
493
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
629
494
  }
630
495
 
631
- @supports (color: light-dark(#fff, #000)){
632
- .tds-page-header{
633
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
634
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
496
+ @media (prefers-reduced-motion: reduce){
497
+ tds-sidenav,
498
+ .tds-sidenav{
499
+ --tds-sidenav-collapse-transition-enter:none;
500
+ --tds-sidenav-collapse-transition-exit:none;
501
+ --tds-sidenav-collapse-closed-transform:none;
502
+ --tds-sidenav-collapse-open-transform:none;
503
+ }
635
504
  }
505
+
506
+ .tds-sidenav--theme-gray{
507
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
508
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
509
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
510
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
511
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
636
512
  }
513
+ }
637
514
 
638
- @media (min-width: 600px){
639
- .tds-page-header{
640
- --tds-page-header-background-color:var(--t-surface-color-canvas);
641
- --tds-page-header-color:var(--t-text-color-secondary);
642
- --tds-page-header-bottom-border-color:var(--t-border-color);
643
- --tds-page-header-padding-x:var(--t-spacing-3);
644
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
645
- --tds-page-header-nav-gap:var(--t-spacing-half);
646
- --tds-page-header-nav-background:transparent;
647
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
648
- --tds-page-header-nav-item-border-width:1px;
649
- --tds-page-header-nav-item-color:var(--t-text-color);
650
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
651
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
652
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
653
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
654
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
655
- }
515
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
516
+ display:flex;
517
+ }
518
+
519
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
520
+ flex-direction:column;
521
+ gap:var(--t-spacing-half);
522
+ width:100%;
656
523
  }
524
+
525
+ .tds-sidenav-section-list{
526
+ width:100%;
527
+ padding:0;
528
+ margin:0;
529
+ list-style:none;
657
530
  }
658
531
 
659
- .tds-page-header{
532
+ .tds-sidenav-section-header{
660
533
  display:flex;
661
- flex-direction:column;
662
- padding-top:var(--tds-page-header-padding-y);
663
- color:var(--tds-page-header-color);
664
- background:var(--tds-page-header-background-color);
665
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
534
+ align-items:baseline;
535
+ justify-content:space-between;
536
+ padding-top:var(--t-spacing-2);
666
537
  }
667
538
 
668
- .tds-page-header:not(.has-nav){
669
- padding-bottom:var(--tds-page-header-padding-y);
539
+ .tds-sidenav-section-header h2{
540
+ margin:0;
541
+ font-size:var(--t-font-size-sm);
542
+ font-weight:var(--t-font-weight-semibold);
543
+ line-height:1.35;
544
+ color:var(--t-text-color-secondary);
545
+ text-transform:uppercase;
670
546
  }
671
547
 
672
- .tds-page-header.inactive{
673
- background:var(--tds-page-header-background-color-inactive);
548
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
549
+ padding-top:0;
674
550
  }
675
551
 
676
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
677
- width:100%;
552
+ .tds-sidenav-section-header [slot="label-actions"]{
553
+ display:flex;
554
+ gap:var(--t-spacing-half);
555
+ align-items:center;
678
556
  }
679
557
 
680
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
558
+ .tds-sidenav-section [slot="section-actions"]{
559
+ display:flex;
560
+ gap:12px;
561
+ align-items:center;
562
+ min-height:42px;
563
+ padding:var(--t-spacing-1) 0;
564
+ }
565
+
566
+ .tds-sidenav-section-list,
567
+ .tds-sidenav-item{
568
+ width:100%;
569
+ padding:0;
570
+ margin:0;
571
+ }
572
+
573
+ .tds-sidenav-item :is(a,button){
574
+ position:relative;
681
575
  display:flex;
682
- flex-flow:row wrap;
683
- gap:var(--t-spacing-half) var(--t-spacing-1);
684
- align-items:flex-start;
685
- justify-content:flex-start;
686
- min-width:0;
576
+ gap:12px;
577
+ align-items:center;
578
+ width:100%;
579
+ padding:12px;
580
+ overflow:hidden;
581
+ font-size:var(--t-font-size-sm);
582
+ line-height:18px;
583
+ color:var(--t-text-color-headline);
584
+ white-space:nowrap;
585
+ text-decoration:none;
586
+ -webkit-appearance:none;
587
+ -moz-appearance:none;
588
+ appearance:none;
589
+ cursor:pointer;
590
+ background-color:var(--tds-sidenav-item-background, transparent);
591
+ border:0;
592
+ border-radius:var(--t-border-radius);
593
+ transition:var(--tds-sidenav-item-transition);
687
594
  }
688
595
 
689
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
690
- display:flex;
691
- gap:var(--tds-page-header-nav-gap);
692
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
693
- margin:0 0 -1px;
694
- overflow:auto;
695
- list-style:none;
696
- background:var(--tds-page-header-nav-background);
596
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
597
+ display:block;
598
+ flex:1;
599
+ overflow:hidden;
600
+ text-overflow:ellipsis;
601
+ text-align:left;
602
+ white-space:nowrap;
697
603
  }
698
604
 
699
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
700
- position:relative;
701
- display:inline-flex;
702
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
703
- font-size:var(--t-font-size-sm);
704
- line-height:22px;
705
- color:var(--tds-page-header-nav-item-color);
706
- white-space:nowrap;
605
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
606
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
607
+ color:var(--t-text-color-headline);
707
608
  text-decoration:none;
708
- -webkit-appearance:none;
709
- -moz-appearance:none;
710
- appearance:none;
711
- cursor:pointer;
712
- outline-offset:-2px;
713
- background-color:var(--tds-page-header-nav-item-background-color);
714
- background-clip:padding-box;
715
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
716
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
717
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
718
609
  }
719
610
 
720
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
721
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
722
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
723
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
724
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
725
- }
611
+ :is(.tds-sidenav-item :is(a,button)):active{
612
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
613
+ }
726
614
 
727
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
728
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
729
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
730
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
731
- }
615
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
616
+ overflow:hidden;
617
+ color:var(--tds-sidenav-item-icon-color);
618
+ }
732
619
 
733
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
734
- background-color:var(--tds-page-header-nav-item-background-color-active);
735
- border-color:var(--tds-page-header-nav-item-border-color-active);
736
- }
620
+ :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{
621
+ display:block;
622
+ width:var(--tds-sidenav-item-icon-size);
623
+ height:var(--tds-sidenav-item-icon-size);
624
+ }
737
625
 
738
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
739
- color:var(--tds-page-header-nav-item-color-disabled);
740
- cursor:not-allowed;
741
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
742
- opacity:1;
743
- }
626
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
627
+ --tds-sidenav-indent:19px;
628
+ }
744
629
 
745
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
746
- position:relative;
630
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
631
+ visibility:visible;
632
+ block-size:auto;
633
+ opacity:1;
747
634
  }
748
635
 
749
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
750
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
751
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
636
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
637
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
638
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
639
+
640
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
641
+ font-weight:var(--t-font-weight-semibold);
642
+ }
643
+
644
+ .tds-sidenav-item:has(.tds-sidenav-section){
645
+ display:flex;
646
+ flex-direction:column;
647
+ gap:var(--t-spacing-half);
648
+ }
649
+
650
+ .tds-sidenav-item .tds-sidenav-section-list{
651
+ --tds-sidenav-item-depth:1;
652
+ gap:0;
653
+ }
654
+
655
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
656
+ visibility:hidden;
657
+ block-size:0;
658
+ overflow-y:clip;
659
+ opacity:0;
660
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
661
+ }
662
+
663
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
664
+ --tds-sidenav-item-depth:2;
665
+ }
666
+
667
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
668
+ min-height:var(--t-element-size-2xl);
669
+ padding-block:9px;
670
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
671
+ line-height:1;
672
+ background-color:transparent;
673
+ }
674
+
675
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
676
+ position:absolute;
677
+ top:0;
678
+ bottom:0;
679
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
680
+ width:2px;
681
+ content:"";
682
+ background-color:var(--tds-sidenav-item-nested-border-color);
683
+ transition:var(--tds-sidenav-item-transition);
752
684
  }
753
685
 
754
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
686
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
755
687
  position:absolute;
756
- top:-5px;
757
- right:-2px;
758
- width:10px;
759
- height:10px;
688
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
689
+ z-index:-1;
690
+ height:100%;
760
691
  content:"";
761
- background:var(--tds-page-header-nav-item-indicator-color);
762
- border-radius:50%;
692
+ background-color:var(--tds-sidenav-item-nested-background);
693
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
694
+ transition:var(--tds-sidenav-item-transition);
763
695
  }
764
696
 
765
- @media (prefers-reduced-motion: no-preference){
766
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
767
- animation:indicator-pulse 1.25s ease infinite;
768
- }
697
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
698
+ display:block;
699
+ text-align:left;
700
+ white-space:normal;
769
701
  }
770
702
 
771
- .tds-page-header__title-bar{
772
- display:flex;
773
- flex-direction:column;
774
- gap:var(--t-spacing-2) var(--t-spacing-1);
775
- align-items:flex-start;
776
- justify-content:space-between;
777
- padding:0 var(--tds-page-header-padding-x);
778
- }
703
+ :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{
704
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
705
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
706
+ }
779
707
 
780
- .tds-page-header--profile > .tds-page-header__title-bar{
781
- align-items:center;
782
- }
708
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
709
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
710
+ }
783
711
 
784
- .tds-page-header__primary{
712
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
713
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
714
+ font-weight:var(--t-font-weight-medium);
715
+ }
716
+
717
+ .tds-sidenav-responsive-header{
718
+ display:flex;
719
+ gap:var(--t-spacing-2);
720
+ align-items:center;
785
721
  width:100%;
786
722
  }
787
723
 
788
- .tds-page-header__primary h1{
724
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
725
+ order:0;
726
+ }
727
+
728
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
729
+ flex:1;
730
+ order:1;
789
731
  margin:0;
790
- font-size:var(--tds-page-header-headline-font-size);
791
- font-weight:var(--t-font-weight-normal);
792
- line-height:32px;
793
- color:var(--tds-page-header-headline-color);
794
- overflow-wrap:break-word;
732
+ font-size:var(--t-font-size-lg);
733
+ font-weight:var(--t-font-weight-medium);
734
+ color:var(--t-text-color-headline);
795
735
  }
796
736
 
797
- @media (min-width: 960px){
798
- .tds-page-header__primary{
799
- flex:1 1 max-content;
800
- width:auto;
801
- min-width:0;
802
- max-width:100%;
737
+ @media (max-width: 719px){
738
+ .tds-sidenav-collapse{
739
+ z-index:10001;
740
+ display:none;
741
+ max-width:min(448px, calc(100vw - 48px));
742
+ padding:0;
743
+ margin:12px 0;
744
+ position-area:bottom span-right;
745
+ overflow:hidden;
746
+ outline:0;
747
+ background:var(--t-surface-color-card);
748
+ border:0;
749
+ border-radius:6px;
750
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
751
+ opacity:var(--tds-sidenav-collapse-open-opacity);
752
+ transform:var(--tds-sidenav-collapse-open-transform);
753
+ transition:var(--tds-sidenav-collapse-transition-enter);
754
+ will-change:transform;
803
755
  }
804
756
 
805
- .tds-page-header__title-bar,
806
- .tds-page-header--profile .tds-page-header__title-bar{
807
- flex-flow:row nowrap;
808
- row-gap:12px;
809
- align-items:flex-start;
757
+ .tds-sidenav-scroll-container{
758
+ --webkit-overflow-scrolling:touch;
759
+ display:block;
760
+ width:100%;
761
+ height:-moz-fit-content;
762
+ height:fit-content;
763
+ padding:var(--t-spacing-2);
764
+ overflow-y:auto;
810
765
  }
811
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
812
- width:auto;
813
- }
814
766
 
815
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
816
- justify-content:flex-end;
767
+ .tds-sidenav-item :is(a, button) :is(.prefix){
768
+ display:none;
769
+ }
770
+ @supports selector(:popover-open){
771
+ .tds-sidenav-collapse:popover-open{
772
+ display:flex;
817
773
  }
818
- }
819
774
 
820
- .tds-page-header-phone,
821
- .tds-page-header-email{
822
- color:var(--tds-page-header-color);
823
- white-space:nowrap;
824
- }
775
+ .tds-sidenav-collapse:not(:popover-open){
776
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
777
+ transition:var(--tds-sidenav-collapse-transition-exit);
778
+ }
825
779
 
826
- .tds-page-header-email{
827
- max-width:100%;
828
- overflow:hidden;
829
- text-overflow:ellipsis;
830
- }
780
+ @starting-style{
781
+ .tds-sidenav-collapse:popover-open{
782
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
783
+ transform:var(--tds-sidenav-collapse-closed-transform);
784
+ }
785
+ }
786
+ }
787
+ @supports not selector(:popover-open){
788
+ .tds-sidenav-collapse.\:popover-open{
789
+ display:flex;
790
+ }
831
791
 
832
- @keyframes indicator-pulse{
833
- 0%{
834
- opacity:.3;
835
- transform:scale(.9);
792
+ .tds-sidenav-collapse:not(.\:popover-open){
793
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
794
+ transition:var(--tds-sidenav-collapse-transition-exit);
795
+ }
836
796
  }
797
+ }
837
798
 
838
- 100%{
839
- opacity:0;
840
- transform:scale(1.75);
799
+ @media (min-width: 720px){
800
+ .tds-sidenav-responsive-header{
801
+ display:none;
841
802
  }
842
803
  }
843
804
 
805
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
806
+ display:none;
807
+ }
808
+
809
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
810
+ display:block;
811
+ }
812
+
813
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
814
+ display:flex;
815
+ flex-direction:column;
816
+ }
817
+
844
818
  .tds-radio-group{
845
819
  --tds-radio-group-font-size:var(--t-font-size-md);
846
820
  --tds-radio-group-line-height:1.4;
@@ -1069,260 +1043,23 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1069
1043
  --tds-toggle-switch-display:inline-flex;
1070
1044
  }
1071
1045
 
1072
- .tds-radio{
1073
- --tds-radio-font-size:var(--t-font-size-md);
1074
- --tds-radio-cursor:pointer;
1075
- --tds-radio-line-height:1.4;
1076
- --tds-radio-transition-property:border-width;
1077
-
1078
- --tds-radio-input-size:var(--t-element-size-md);
1079
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1080
- --tds-radio-input-border-color:var(--t-form-border-color);
1081
- --tds-radio-input-border-width:var(--t-form-border-width);
1082
- --tds-radio-input-background-color:transparent;
1083
-
1084
- --tds-radio-label-color:var(--t-form-color);
1085
-
1086
- --tds-radio-description-font-size:var(--t-font-size-sm);
1087
- --tds-radio-description-line-height:1.35;
1088
- --tds-radio-description-color:var(--t-text-color-secondary);
1089
-
1090
- position:relative;
1091
- display:inline-grid;
1092
- grid-template-columns:auto;
1093
- grid-auto-columns:1fr;
1094
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1095
- line-height:var(--tds-radio-line-height);
1096
- cursor:var(--tds-radio-cursor);
1097
- -webkit-user-select:none;
1098
- -moz-user-select:none;
1099
- user-select:none;
1100
- }
1101
-
1102
- .tds-radio label{
1103
- grid-area:1 / 2;
1104
- font-size:var(--tds-radio-font-size);
1105
- font-weight:var(--t-font-weight-normal);
1106
- color:var(--tds-radio-label-color);
1107
- cursor:var(--tds-radio-cursor);
1108
- }
1109
-
1110
- .tds-radio input[type="radio"]{
1111
- position:relative;
1112
- width:1em;
1113
- height:1em;
1114
- margin:calc((1lh - 1em) / 2) 0 0;
1115
- font-size:var(--tds-radio-font-size);
1116
- line-height:inherit;
1117
- -webkit-appearance:none;
1118
- -moz-appearance:none;
1119
- appearance:none;
1120
- cursor:var(--tds-radio-cursor);
1121
- background-color:var(--tds-radio-input-background-color);
1122
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1123
- border-radius:var(--tds-radio-input-border-radius);
1124
- transition-timing-function:var(--t-ease-in-out);
1125
- transition-duration:var(--t-duration-200);
1126
- transition-property:var(--tds-radio-transition-property);
1127
- }
1128
-
1129
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1130
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1131
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1132
- }
1133
-
1134
- :is(.tds-radio input[type="radio"]):focus-visible{
1135
- outline:var(--t-focus-ring-outline);
1136
- outline-offset:var(--t-focus-ring-offset);
1137
- }
1138
-
1139
- :is(.tds-radio input[type="radio"]):disabled{
1140
- pointer-events:none;
1141
- }
1142
-
1143
- @media (prefers-reduced-motion: reduce){
1144
-
1145
- .tds-radio input[type="radio"]{
1146
- --tds-radio-transition-property:none;
1147
- }
1148
- }
1149
-
1150
- .tds-radio:has(input:checked){
1151
- --tds-radio-input-background-color:var(--t-form-background-color);
1152
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1153
- --tds-radio-input-border-width:4px;
1154
- }
1155
-
1156
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1157
- --tds-radio-input-background-color:var(--t-form-background-color);
1158
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1159
- }
1160
-
1161
- .tds-radio:has(input:user-invalid){
1162
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1163
- }
1164
-
1165
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1166
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1167
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1168
- }
1169
-
1170
- .tds-radio:has(input:disabled){
1171
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1172
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1173
-
1174
- --tds-radio-label-color:var(--t-form-color-disabled);
1175
- --tds-radio-description-color:var(--t-form-color-disabled);
1176
- --tds-radio-cursor:not-allowed;
1177
- }
1178
-
1179
- .tds-radio:has(input:disabled) input:checked{
1180
- --tds-radio-input-background-color:var(--t-form-background-color);
1181
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1182
- }
1183
-
1184
- .tds-radio-description{
1185
- display:flex;
1186
- grid-area:2 / 2;
1187
- gap:var(--t-spacing-half);
1188
- align-items:flex-start;
1189
- margin:0;
1190
- font-size:var(--tds-radio-description-font-size);
1191
- line-height:var(--tds-radio-description-line-height);
1192
- color:var(--tds-radio-description-color);
1193
- cursor:text;
1194
- }
1195
-
1196
- .tds-radio--sm{
1197
- --tds-radio-line-height:1.35;
1198
- --tds-radio-input-size:var(--t-element-size-sm);
1199
- --tds-radio-font-size:var(--t-font-size-sm);
1200
- --tds-radio-description-font-size:var(--t-font-size-xs);
1201
- --tds-radio-description-line-height:1.3;
1202
- }
1203
-
1204
- .tds-input:has(textarea){
1205
- --tds-input-padding-block:6px;
1206
- --tds-input-resizer-size:var(--t-element-size-sm);
1207
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1208
- }
1209
-
1210
- @supports (x: attr(x type(*))){
1211
-
1212
- .tds-input:has(textarea){
1213
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1214
- }
1215
- }
1216
-
1217
- .tds-input.tds-textarea--resize-vertical textarea{
1218
- resize:vertical;
1219
- }
1220
-
1221
- .tds-input.tds-textarea--resize-none textarea{
1222
- resize:none;
1223
- }
1224
-
1225
- .tds-input.tds-textarea--resize-auto textarea{
1226
- resize:vertical;
1227
- }
1228
-
1229
- @supports (field-sizing: content){
1230
- .tds-input.tds-textarea--resize-auto textarea{
1231
- field-sizing:content;
1232
- resize:none;
1233
- }
1234
- }
1235
-
1236
- .tds-input textarea{
1237
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1238
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1239
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1240
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1241
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1242
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1243
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1244
- --tds-input-scrollbar-thumb-border-radius:999px;
1245
- --tds-input-scrollbar-thumb-border-width:3px;
1246
- --tds-input-scrollbar-track-margin-block:.125rem;
1247
- scrollbar-color:initial;
1248
- transition-timing-function:var(--t-ease-in-out);
1249
- transition-duration:var(--t-duration-200);
1250
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1251
- }
1252
-
1253
- @media (pointer: fine){
1254
- :is(.tds-input textarea)::-webkit-scrollbar{
1255
- width:12px;
1256
- height:12px;
1257
- cursor:default;
1258
- }
1259
-
1260
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1261
- cursor:default;
1262
- background:var(--tds-input-scrollbar-thumb-color);
1263
- background-clip:content-box;
1264
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1265
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1266
- }
1267
-
1268
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1270
- }
1271
-
1272
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1274
- }
1275
-
1276
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1278
- }
1279
-
1280
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
- background:var(--tds-input-scrollbar-surface-color);
1282
- }
1283
-
1284
- :is(.tds-input textarea)::-webkit-resizer{
1285
- background:var(--tds-input-resizer-icon) no-repeat;
1286
- background-position:right bottom;
1287
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1288
- }
1289
-
1290
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
- cursor:default;
1293
- }
1294
-
1295
- @supports (-moz-appearance: none){
1296
- :is(.tds-input textarea){
1297
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
- scrollbar-width:thin;
1299
- }
1300
-
1301
- @media (hover){
1302
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
- }
1305
- }
1306
- }
1307
- }
1308
-
1309
- .tds-select{
1310
- --tds-select-border-color:var(--t-form-border-color);
1311
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1312
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1313
- --tds-select-background-color:var(--t-form-background-color);
1314
- --tds-select-color:var(--t-form-color);
1315
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1316
- --tds-select-font-size:var(--t-font-size-md);
1317
- --tds-select-min-height:var(--t-container-size-md);
1318
- --tds-select-padding-block:6px;
1319
- --tds-select-description-color:var(--t-text-color-secondary);
1320
- --tds-select-description-invalid-icon-display:none;
1321
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1322
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1323
- --tds-select-caret-size:1em;
1324
- --tds-select-caret-inline-offset:.75em;
1325
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1046
+ .tds-select{
1047
+ --tds-select-border-color:var(--t-form-border-color);
1048
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1049
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1050
+ --tds-select-background-color:var(--t-form-background-color);
1051
+ --tds-select-color:var(--t-form-color);
1052
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1053
+ --tds-select-font-size:var(--t-font-size-md);
1054
+ --tds-select-min-height:var(--t-container-size-md);
1055
+ --tds-select-padding-block:6px;
1056
+ --tds-select-description-color:var(--t-text-color-secondary);
1057
+ --tds-select-description-invalid-icon-display:none;
1058
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1059
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1060
+ --tds-select-caret-size:1em;
1061
+ --tds-select-caret-inline-offset:.75em;
1062
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1326
1063
 
1327
1064
  --tds-select-dropdown-background-color:var(--t-surface-color-card);
1328
1065
  --tds-select-dropdown-border:1px solid var(--t-border-color);
@@ -1738,6 +1475,269 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1738
1475
  }
1739
1476
  }
1740
1477
 
1478
+ @layer t-critical{
1479
+ tds-page-header:not(.hydrated){
1480
+ display:none;
1481
+ }
1482
+ }
1483
+
1484
+ @layer t-component{
1485
+ .tds-page-header{
1486
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1487
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1488
+ --tds-page-header-color:var(--t-text-color);
1489
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1490
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1491
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1492
+ --tds-page-header-padding-x:var(--t-spacing-2);
1493
+ --tds-page-header-padding-y:var(--t-spacing-2);
1494
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1495
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1496
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1497
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1498
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1499
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1500
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1501
+ --tds-page-header-nav-item-border-width:1px;
1502
+
1503
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1504
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1505
+
1506
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1507
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1508
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1509
+
1510
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1511
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1512
+
1513
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1514
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1515
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1516
+
1517
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1518
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1519
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1520
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1521
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1522
+ }
1523
+
1524
+ .tds-page-header--profile{
1525
+ --tds-page-header-padding-y:20px;
1526
+ }
1527
+
1528
+ @supports (color: light-dark(#fff, #000)){
1529
+ .tds-page-header{
1530
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1531
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1532
+ }
1533
+ }
1534
+
1535
+ @media (min-width: 600px){
1536
+ .tds-page-header{
1537
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1538
+ --tds-page-header-color:var(--t-text-color-secondary);
1539
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1540
+ --tds-page-header-padding-x:var(--t-spacing-3);
1541
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1542
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1543
+ --tds-page-header-nav-background:transparent;
1544
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1545
+ --tds-page-header-nav-item-border-width:1px;
1546
+ --tds-page-header-nav-item-color:var(--t-text-color);
1547
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1548
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1549
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1550
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1551
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1552
+ }
1553
+ }
1554
+ }
1555
+
1556
+ .tds-page-header{
1557
+ display:flex;
1558
+ flex-direction:column;
1559
+ padding-top:var(--tds-page-header-padding-y);
1560
+ color:var(--tds-page-header-color);
1561
+ background:var(--tds-page-header-background-color);
1562
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1563
+ }
1564
+
1565
+ .tds-page-header:not(.has-nav){
1566
+ padding-bottom:var(--tds-page-header-padding-y);
1567
+ }
1568
+
1569
+ .tds-page-header.inactive{
1570
+ background:var(--tds-page-header-background-color-inactive);
1571
+ }
1572
+
1573
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1574
+ width:100%;
1575
+ }
1576
+
1577
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1578
+ display:flex;
1579
+ flex-flow:row wrap;
1580
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1581
+ align-items:flex-start;
1582
+ justify-content:flex-start;
1583
+ min-width:0;
1584
+ }
1585
+
1586
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1587
+ display:flex;
1588
+ gap:var(--tds-page-header-nav-gap);
1589
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1590
+ margin:0 0 -1px;
1591
+ overflow:auto;
1592
+ list-style:none;
1593
+ background:var(--tds-page-header-nav-background);
1594
+ }
1595
+
1596
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1597
+ position:relative;
1598
+ display:inline-flex;
1599
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1600
+ font-size:var(--t-font-size-sm);
1601
+ line-height:22px;
1602
+ color:var(--tds-page-header-nav-item-color);
1603
+ white-space:nowrap;
1604
+ text-decoration:none;
1605
+ -webkit-appearance:none;
1606
+ -moz-appearance:none;
1607
+ appearance:none;
1608
+ cursor:pointer;
1609
+ outline-offset:-2px;
1610
+ background-color:var(--tds-page-header-nav-item-background-color);
1611
+ background-clip:padding-box;
1612
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1613
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1614
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1615
+ }
1616
+
1617
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1618
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1619
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1620
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1621
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1622
+ }
1623
+
1624
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1625
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1626
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1627
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1628
+ }
1629
+
1630
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1631
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1632
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1633
+ }
1634
+
1635
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1636
+ color:var(--tds-page-header-nav-item-color-disabled);
1637
+ cursor:not-allowed;
1638
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1639
+ opacity:1;
1640
+ }
1641
+
1642
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1643
+ position:relative;
1644
+ }
1645
+
1646
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1647
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1648
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1649
+ }
1650
+
1651
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1652
+ position:absolute;
1653
+ top:-5px;
1654
+ right:-2px;
1655
+ width:10px;
1656
+ height:10px;
1657
+ content:"";
1658
+ background:var(--tds-page-header-nav-item-indicator-color);
1659
+ border-radius:50%;
1660
+ }
1661
+
1662
+ @media (prefers-reduced-motion: no-preference){
1663
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1664
+ animation:indicator-pulse 1.25s ease infinite;
1665
+ }
1666
+ }
1667
+
1668
+ .tds-page-header__title-bar{
1669
+ display:flex;
1670
+ flex-direction:column;
1671
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1672
+ align-items:flex-start;
1673
+ justify-content:space-between;
1674
+ padding:0 var(--tds-page-header-padding-x);
1675
+ }
1676
+
1677
+ .tds-page-header--profile > .tds-page-header__title-bar{
1678
+ align-items:center;
1679
+ }
1680
+
1681
+ .tds-page-header__primary{
1682
+ width:100%;
1683
+ }
1684
+
1685
+ .tds-page-header__primary h1{
1686
+ margin:0;
1687
+ font-size:var(--tds-page-header-headline-font-size);
1688
+ font-weight:var(--t-font-weight-normal);
1689
+ line-height:32px;
1690
+ color:var(--tds-page-header-headline-color);
1691
+ overflow-wrap:break-word;
1692
+ }
1693
+
1694
+ @media (min-width: 960px){
1695
+ .tds-page-header__primary{
1696
+ flex:1 1 max-content;
1697
+ width:auto;
1698
+ min-width:0;
1699
+ max-width:100%;
1700
+ }
1701
+
1702
+ .tds-page-header__title-bar,
1703
+ .tds-page-header--profile .tds-page-header__title-bar{
1704
+ flex-flow:row nowrap;
1705
+ row-gap:12px;
1706
+ align-items:flex-start;
1707
+ }
1708
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1709
+ width:auto;
1710
+ }
1711
+
1712
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1713
+ justify-content:flex-end;
1714
+ }
1715
+ }
1716
+
1717
+ .tds-page-header-phone,
1718
+ .tds-page-header-email{
1719
+ color:var(--tds-page-header-color);
1720
+ white-space:nowrap;
1721
+ }
1722
+
1723
+ .tds-page-header-email{
1724
+ max-width:100%;
1725
+ overflow:hidden;
1726
+ text-overflow:ellipsis;
1727
+ }
1728
+
1729
+ @keyframes indicator-pulse{
1730
+ 0%{
1731
+ opacity:.3;
1732
+ transform:scale(.9);
1733
+ }
1734
+
1735
+ 100%{
1736
+ opacity:0;
1737
+ transform:scale(1.75);
1738
+ }
1739
+ }
1740
+
1741
1741
  .tds-input{
1742
1742
  --tds-input-border-color:var(--t-form-border-color);
1743
1743
  --tds-input-border-color-hover:var(--t-form-border-color-hover);