@planningcenter/tapestry 3.4.1-rc.6 → 3.4.1-rc.7

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 +1199 -1199
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1199 -1199
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,327 +1,123 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
6
-
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:transparent;
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --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%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
25
-
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
28
-
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1
+ .tds-checkbox-group{
2
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3
+ --tds-checkbox-group-line-height:1.4;
4
+ --tds-checkbox-group-gap:var(--t-spacing-1);
32
5
 
33
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
6
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
7
+ --tds-checkbox-group-description-line-height:1.35;
8
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
9
+ --tds-checkbox-group-description-invalid-icon-display:none;
10
+ display:flex;
11
+ flex-direction:column;
12
+ gap:0;
13
+ padding:0;
14
+ margin:0;
35
15
 
36
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
16
+ font-size:var(--tds-checkbox-group-font-size);
17
+ line-height:var(--tds-checkbox-group-line-height);
18
+ border:0;
19
+ }
39
20
 
40
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
21
+ .tds-checkbox-group legend{
22
+ float:left;
23
+ padding:0;
24
+ margin:0;
45
25
  }
46
26
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
27
+ .tds-checkbox-group[aria-invalid="true"]{
28
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
29
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
49
30
  }
50
31
 
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
32
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
33
+ margin-left:.25ch;
34
+ color:var(--t-text-color-status-error);
35
+ content:"*";
55
36
  }
56
- }
57
37
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
38
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
39
+ content:none;
76
40
  }
77
- }
78
- }
79
41
 
80
- .tds-page-header{
42
+ .tds-checkbox-group-fields{
81
43
  display:flex;
82
44
  flex-direction:column;
83
- padding-top:var(--tds-page-header-padding-y);
84
- color:var(--tds-page-header-color);
85
- background:var(--tds-page-header-background-color);
86
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
45
+ gap:var(--tds-checkbox-group-gap);
46
+ align-items:flex-start;
47
+ margin-top:var(--t-spacing-1);
87
48
  }
88
49
 
89
- .tds-page-header:not(.has-nav){
90
- padding-bottom:var(--tds-page-header-padding-y);
91
- }
92
-
93
- .tds-page-header.inactive{
94
- background:var(--tds-page-header-background-color-inactive);
95
- }
96
-
97
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
- width:100%;
99
- }
50
+ .tds-checkbox-group-description{
51
+ display:flex;
52
+ gap:var(--t-spacing-half);
53
+ align-items:flex-start;
54
+ margin:var(--t-spacing-fourth) 0 0;
55
+ font-size:var(--tds-checkbox-group-description-font-size);
56
+ line-height:var(--tds-checkbox-group-description-line-height);
57
+ color:var(--tds-checkbox-group-description-color);
58
+ cursor:text;
59
+ }
100
60
 
101
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
- display:flex;
103
- flex-flow:row wrap;
104
- gap:var(--t-spacing-half) var(--t-spacing-1);
105
- align-items:flex-start;
106
- justify-content:flex-start;
107
- min-width:0;
61
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
62
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
63
+ flex-shrink:0;
64
+ margin-top:calc(.5lh - .5em);
65
+ line-height:var(--tds-checkbox-group-description-line-height);
108
66
  }
109
67
 
110
- :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{
111
- display:flex;
112
- gap:var(--tds-page-header-nav-gap);
113
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
- margin:0 0 -1px;
115
- overflow:auto;
116
- list-style:none;
117
- background:var(--tds-page-header-nav-background);
118
- }
68
+ .tds-checkbox-group--sm{
69
+ --tds-checkbox-group-line-height:1.35;
70
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
71
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
72
+ --tds-checkbox-group-description-line-height:1.3;
73
+ }
119
74
 
120
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
- position:relative;
122
- display:inline-flex;
123
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
- font-size:var(--t-font-size-sm);
125
- line-height:22px;
126
- color:var(--tds-page-header-nav-item-color);
127
- white-space:nowrap;
128
- text-decoration:none;
129
- -webkit-appearance:none;
130
- -moz-appearance:none;
131
- appearance:none;
132
- cursor:pointer;
133
- outline-offset:-2px;
134
- background-color:var(--tds-page-header-nav-item-background-color);
135
- background-clip:padding-box;
136
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
- }
75
+ .tds-checkbox{
76
+ --tds-checkbox-font-size:var(--t-font-size-md);
77
+ --tds-checkbox-cursor:pointer;
78
+ --tds-checkbox-line-height:1.4;
79
+ --tds-checkbox-transition-property:background-color, border-color;
140
80
 
141
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
146
- }
81
+ --tds-checkbox-input-size:var(--t-element-size-md);
82
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
83
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
84
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
147
85
 
148
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
- }
86
+ --tds-checkbox-input-icon:none;
87
+ --tds-checkbox-input-icon-visibility:hidden;
88
+ --tds-checkbox-input-icon-opacity:0;
89
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
154
90
 
155
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
- background-color:var(--tds-page-header-nav-item-background-color-active);
157
- border-color:var(--tds-page-header-nav-item-border-color-active);
158
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
- }
91
+ --tds-checkbox-label-color:var(--t-form-color);
160
92
 
161
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
- color:var(--tds-page-header-nav-item-color-disabled);
164
- cursor:not-allowed;
165
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
- opacity:1;
167
- }
93
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
94
+ --tds-checkbox-description-line-height:1.35;
95
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
96
+ --tds-checkbox-description-invalid-icon-display:none;
168
97
 
169
- @media (min-width: 600px){
170
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
- position:absolute;
172
- inset:auto -1px -1px;
173
- height:1px;
174
- pointer-events:none;
175
- content:"";
176
- background-color:var(--tds-page-header-bottom-border-color);
177
- }
178
- }
98
+ position:relative;
99
+ display:inline-grid;
100
+ grid-template-columns:auto;
101
+ grid-auto-columns:1fr;
102
+ gap:var(--t-spacing-fourth) 0;
103
+ line-height:var(--tds-checkbox-line-height);
104
+ -webkit-user-select:none;
105
+ -moz-user-select:none;
106
+ user-select:none;
107
+ }
179
108
 
180
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
- position:relative;
182
- }
109
+ .tds-checkbox label{
110
+ grid-area:1 / 2;
111
+ padding-inline-start:var(--t-spacing-1);
112
+ font-size:var(--tds-checkbox-font-size);
113
+ font-weight:var(--t-font-weight-normal);
114
+ color:var(--tds-checkbox-label-color);
115
+ cursor:var(--tds-checkbox-cursor);
116
+ }
183
117
 
184
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
187
- }
188
-
189
- :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{
190
- position:absolute;
191
- top:-5px;
192
- right:-2px;
193
- width:10px;
194
- height:10px;
195
- content:"";
196
- background:var(--tds-page-header-nav-item-indicator-color);
197
- border-radius:50%;
198
- }
199
-
200
- @media (prefers-reduced-motion: no-preference){
201
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
- animation:indicator-pulse 1.25s ease infinite;
203
- }
204
- }
205
-
206
- .tds-page-header__title-bar{
207
- display:flex;
208
- flex-direction:column;
209
- gap:var(--t-spacing-2) var(--t-spacing-1);
210
- align-items:flex-start;
211
- justify-content:space-between;
212
- padding:0 var(--tds-page-header-padding-x);
213
- }
214
-
215
- .tds-page-header--profile > .tds-page-header__title-bar{
216
- align-items:center;
217
- }
218
-
219
- .tds-page-header__primary{
220
- width:100%;
221
- }
222
-
223
- .tds-page-header__primary h1{
224
- margin:0;
225
- font-size:var(--tds-page-header-headline-font-size);
226
- font-weight:var(--t-font-weight-normal);
227
- line-height:32px;
228
- color:var(--tds-page-header-headline-color);
229
- overflow-wrap:break-word;
230
- }
231
-
232
- @media (min-width: 960px){
233
- .tds-page-header__primary{
234
- flex:1 1 max-content;
235
- width:auto;
236
- min-width:0;
237
- max-width:100%;
238
- }
239
-
240
- .tds-page-header__title-bar,
241
- .tds-page-header--profile .tds-page-header__title-bar{
242
- flex-flow:row nowrap;
243
- row-gap:12px;
244
- align-items:flex-start;
245
- }
246
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
- width:auto;
248
- }
249
-
250
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
- justify-content:flex-end;
252
- }
253
- }
254
-
255
- .tds-page-header-phone,
256
- .tds-page-header-email{
257
- color:var(--tds-page-header-color);
258
- white-space:nowrap;
259
- }
260
-
261
- .tds-page-header-email{
262
- max-width:100%;
263
- overflow:hidden;
264
- text-overflow:ellipsis;
265
- }
266
-
267
- @keyframes indicator-pulse{
268
- 0%{
269
- opacity:.3;
270
- transform:scale(.9);
271
- }
272
-
273
- 100%{
274
- opacity:0;
275
- transform:scale(1.75);
276
- }
277
- }
278
-
279
- .tds-checkbox{
280
- --tds-checkbox-font-size:var(--t-font-size-md);
281
- --tds-checkbox-cursor:pointer;
282
- --tds-checkbox-line-height:1.4;
283
- --tds-checkbox-transition-property:background-color, border-color;
284
-
285
- --tds-checkbox-input-size:var(--t-element-size-md);
286
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
287
- --tds-checkbox-input-border-color:var(--t-form-border-color);
288
- --tds-checkbox-input-background-color:var(--t-form-background-color);
289
-
290
- --tds-checkbox-input-icon:none;
291
- --tds-checkbox-input-icon-visibility:hidden;
292
- --tds-checkbox-input-icon-opacity:0;
293
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
294
-
295
- --tds-checkbox-label-color:var(--t-form-color);
296
-
297
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
298
- --tds-checkbox-description-line-height:1.35;
299
- --tds-checkbox-description-color:var(--t-text-color-secondary);
300
- --tds-checkbox-description-invalid-icon-display:none;
301
-
302
- position:relative;
303
- display:inline-grid;
304
- grid-template-columns:auto;
305
- grid-auto-columns:1fr;
306
- gap:var(--t-spacing-fourth) 0;
307
- line-height:var(--tds-checkbox-line-height);
308
- -webkit-user-select:none;
309
- -moz-user-select:none;
310
- user-select:none;
311
- }
312
-
313
- .tds-checkbox label{
314
- grid-area:1 / 2;
315
- padding-inline-start:var(--t-spacing-1);
316
- font-size:var(--tds-checkbox-font-size);
317
- font-weight:var(--t-font-weight-normal);
318
- color:var(--tds-checkbox-label-color);
319
- cursor:var(--tds-checkbox-cursor);
320
- }
321
-
322
- .tds-checkbox tds-indeterminate{
323
- display:flex;
324
- }
118
+ .tds-checkbox tds-indeterminate{
119
+ display:flex;
120
+ }
325
121
 
326
122
  .tds-checkbox input[type="checkbox"]{
327
123
  position:relative;
@@ -1395,144 +1191,94 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1395
1191
  }
1396
1192
  }
1397
1193
 
1398
- .tds-time-field-input{
1399
- --tds-field-date-segment-padding-inline:1px;
1400
- padding-block:var(--tds-field-padding-block);
1401
- padding-inline:var(--tds-field-padding-inline);
1402
- font-variant-numeric:tabular-nums;
1403
- }
1404
-
1405
- .tds-radio{
1406
- --tds-radio-font-size:var(--t-font-size-md);
1407
- --tds-radio-cursor:pointer;
1408
- --tds-radio-line-height:1.4;
1409
- --tds-radio-transition-property:border-width;
1410
-
1411
- --tds-radio-input-size:var(--t-element-size-md);
1412
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1413
- --tds-radio-input-border-color:var(--t-form-border-color);
1414
- --tds-radio-input-border-width:var(--t-form-border-width);
1415
- --tds-radio-input-background-color:var(--t-form-background-color);
1416
-
1417
- --tds-radio-label-color:var(--t-form-color);
1194
+ .tds-radio-group{
1195
+ --tds-radio-group-font-size:var(--t-font-size-md);
1196
+ --tds-radio-group-line-height:1.4;
1197
+ --tds-radio-group-gap:var(--t-spacing-1);
1418
1198
 
1419
- --tds-radio-description-font-size:var(--t-font-size-sm);
1420
- --tds-radio-description-line-height:1.35;
1421
- --tds-radio-description-color:var(--t-text-color-secondary);
1199
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1200
+ --tds-radio-group-description-line-height:1.35;
1201
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1202
+ --tds-radio-group-description-invalid-icon-display:none;
1203
+ display:flex;
1204
+ flex-direction:column;
1205
+ gap:0;
1206
+ padding:0;
1207
+ margin:0;
1422
1208
 
1423
- position:relative;
1424
- display:inline-grid;
1425
- grid-template-columns:auto;
1426
- grid-auto-columns:1fr;
1427
- gap:var(--t-spacing-fourth) 0;
1428
- line-height:var(--tds-radio-line-height);
1429
- -webkit-user-select:none;
1430
- -moz-user-select:none;
1431
- user-select:none;
1209
+ font-size:var(--tds-radio-group-font-size);
1210
+ line-height:var(--tds-radio-group-line-height);
1211
+ border:0;
1432
1212
  }
1433
1213
 
1434
- .tds-radio label{
1435
- grid-area:1 / 2;
1436
- padding-inline-start:var(--t-spacing-1);
1437
- font-size:var(--tds-radio-font-size);
1438
- font-weight:var(--t-font-weight-normal);
1439
- color:var(--tds-radio-label-color);
1440
- cursor:var(--tds-radio-cursor);
1214
+ .tds-radio-group legend{
1215
+ float:left;
1216
+ padding:0;
1217
+ margin:0;
1441
1218
  }
1442
1219
 
1443
- .tds-radio input[type="radio"]{
1444
- position:relative;
1445
- width:1em;
1446
- height:1em;
1447
- margin:calc((1lh - 1em) / 2) 0 0;
1448
- font-size:var(--tds-radio-font-size);
1449
- line-height:inherit;
1450
- -webkit-appearance:none;
1451
- -moz-appearance:none;
1452
- appearance:none;
1453
- cursor:var(--tds-radio-cursor);
1454
- background-color:var(--tds-radio-input-background-color);
1455
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1456
- border-radius:var(--tds-radio-input-border-radius);
1457
- transition-timing-function:var(--t-ease-in-out);
1458
- transition-duration:var(--t-duration-200);
1459
- transition-property:var(--tds-radio-transition-property);
1220
+ .tds-radio-group[aria-invalid="true"]{
1221
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1222
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1460
1223
  }
1461
1224
 
1462
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1463
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1464
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1465
- }
1466
-
1467
- :is(.tds-radio input[type="radio"]):focus-visible{
1468
- outline:var(--t-focus-ring-outline);
1469
- outline-offset:var(--t-focus-ring-offset);
1225
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1226
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1470
1227
  }
1471
1228
 
1472
- :is(.tds-radio input[type="radio"]):disabled{
1473
- pointer-events:none;
1474
- }
1229
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1230
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1231
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1232
+ }
1475
1233
 
1476
- @media (prefers-reduced-motion: reduce){
1234
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1235
+ --tds-radio-input-background-color:var(--t-form-background-color);
1236
+ }
1477
1237
 
1478
- .tds-radio input[type="radio"]{
1479
- --tds-radio-transition-property:none;
1480
- }
1238
+ .tds-radio-group:has(input:required) legend::after{
1239
+ margin-left:.25ch;
1240
+ color:var(--t-text-color-status-error);
1241
+ content:"*";
1481
1242
  }
1482
1243
 
1483
- .tds-radio:has(input:checked){
1484
- --tds-radio-input-background-color:var(--t-form-background-color);
1485
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1486
- --tds-radio-input-border-width:4px;
1487
- }
1244
+ .tds-radio-group-fields{
1245
+ display:flex;
1246
+ flex-direction:column;
1247
+ gap:var(--tds-radio-group-gap);
1248
+ align-items:flex-start;
1249
+ margin-top:var(--t-spacing-1);
1250
+ }
1488
1251
 
1489
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1490
- --tds-radio-input-background-color:var(--t-form-background-color);
1491
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1492
- }
1493
-
1494
- .tds-radio:has(input:user-invalid){
1495
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1496
- }
1497
-
1498
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1499
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1500
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1501
- }
1502
-
1503
- .tds-radio:has(input:disabled){
1504
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1505
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1506
-
1507
- --tds-radio-label-color:var(--t-form-color-disabled);
1508
- --tds-radio-description-color:var(--t-form-color-disabled);
1509
- --tds-radio-cursor:not-allowed;
1510
- }
1511
-
1512
- .tds-radio:has(input:disabled) input:checked{
1513
- --tds-radio-input-background-color:var(--t-form-background-color);
1514
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1515
- }
1516
-
1517
- .tds-radio-description{
1252
+ .tds-radio-group-description{
1518
1253
  display:flex;
1519
- grid-area:2 / 2;
1520
1254
  gap:var(--t-spacing-half);
1521
1255
  align-items:flex-start;
1522
- padding-inline-start:var(--t-spacing-1);
1523
- margin:0;
1524
- font-size:var(--tds-radio-description-font-size);
1525
- line-height:var(--tds-radio-description-line-height);
1526
- color:var(--tds-radio-description-color);
1256
+ margin:var(--t-spacing-fourth) 0 0;
1257
+ font-size:var(--tds-radio-group-description-font-size);
1258
+ line-height:var(--tds-radio-group-description-line-height);
1259
+ color:var(--tds-radio-group-description-color);
1527
1260
  cursor:text;
1528
1261
  }
1529
1262
 
1530
- .tds-radio--sm{
1531
- --tds-radio-line-height:1.35;
1532
- --tds-radio-input-size:var(--t-element-size-sm);
1533
- --tds-radio-font-size:var(--t-font-size-sm);
1534
- --tds-radio-description-font-size:var(--t-font-size-xs);
1535
- --tds-radio-description-line-height:1.3;
1263
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1264
+ display:var(--tds-radio-group-description-invalid-icon-display);
1265
+ flex-shrink:0;
1266
+ margin-top:calc(.5lh - .5em);
1267
+ line-height:var(--tds-radio-group-description-line-height);
1268
+ }
1269
+
1270
+ .tds-radio-group--sm{
1271
+ --tds-radio-group-line-height:1.35;
1272
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1273
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1274
+ --tds-radio-group-description-line-height:1.3;
1275
+ }
1276
+
1277
+ .tds-time-field-input{
1278
+ --tds-field-date-segment-padding-inline:1px;
1279
+ padding-block:var(--tds-field-padding-block);
1280
+ padding-inline:var(--tds-field-padding-inline);
1281
+ font-variant-numeric:tabular-nums;
1536
1282
  }
1537
1283
 
1538
1284
  .tds-number-stepper{
@@ -1586,551 +1332,243 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1586
1332
  margin-inline-end:var(--tds-number-stepper-button-offset);
1587
1333
  }
1588
1334
 
1589
- .tds-radio-group{
1590
- --tds-radio-group-font-size:var(--t-font-size-md);
1591
- --tds-radio-group-line-height:1.4;
1592
- --tds-radio-group-gap:var(--t-spacing-1);
1335
+ .tds-input:has(textarea){
1336
+ --tds-input-padding-block:6px;
1337
+ --tds-input-resizer-size:var(--t-element-size-sm);
1338
+ --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");
1339
+ }
1593
1340
 
1594
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1595
- --tds-radio-group-description-line-height:1.35;
1596
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1597
- --tds-radio-group-description-invalid-icon-display:none;
1598
- display:flex;
1599
- flex-direction:column;
1600
- gap:0;
1601
- padding:0;
1602
- margin:0;
1341
+ @supports (x: attr(x type(*))){
1603
1342
 
1604
- font-size:var(--tds-radio-group-font-size);
1605
- line-height:var(--tds-radio-group-line-height);
1606
- border:0;
1343
+ .tds-input textarea{
1344
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1607
1345
  }
1608
-
1609
- .tds-radio-group legend{
1610
- float:left;
1611
- padding:0;
1612
- margin:0;
1613
1346
  }
1614
1347
 
1615
- .tds-radio-group[aria-invalid="true"]{
1616
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1617
- --tds-radio-group-description-invalid-icon-display:inline-block;
1618
- }
1348
+ .tds-input.tds-textarea--resize-vertical textarea{
1349
+ resize:vertical;
1350
+ }
1619
1351
 
1620
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1621
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1352
+ .tds-input.tds-textarea--resize-none textarea{
1353
+ resize:none;
1622
1354
  }
1623
1355
 
1624
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1625
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1626
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1627
- }
1356
+ .tds-input.tds-textarea--resize-auto textarea{
1357
+ resize:vertical;
1358
+ }
1628
1359
 
1629
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1630
- --tds-radio-input-background-color:var(--t-form-background-color);
1360
+ @supports (field-sizing: content){
1361
+ .tds-input.tds-textarea--resize-auto textarea{
1362
+ field-sizing:content;
1363
+ resize:none;
1631
1364
  }
1632
-
1633
- .tds-radio-group:has(input:required) legend::after{
1634
- margin-left:.25ch;
1635
- color:var(--t-text-color-status-error);
1636
- content:"*";
1637
1365
  }
1638
1366
 
1639
- .tds-radio-group-fields{
1640
- display:flex;
1641
- flex-direction:column;
1642
- gap:var(--tds-radio-group-gap);
1643
- align-items:flex-start;
1644
- margin-top:var(--t-spacing-1);
1645
- }
1646
-
1647
- .tds-radio-group-description{
1648
- display:flex;
1649
- gap:var(--t-spacing-half);
1650
- align-items:flex-start;
1651
- margin:var(--t-spacing-fourth) 0 0;
1652
- font-size:var(--tds-radio-group-description-font-size);
1653
- line-height:var(--tds-radio-group-description-line-height);
1654
- color:var(--tds-radio-group-description-color);
1655
- cursor:text;
1656
- }
1657
-
1658
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1659
- display:var(--tds-radio-group-description-invalid-icon-display);
1660
- flex-shrink:0;
1661
- margin-top:calc(.5lh - .5em);
1662
- line-height:var(--tds-radio-group-description-line-height);
1663
- }
1664
-
1665
- .tds-radio-group--sm{
1666
- --tds-radio-group-line-height:1.35;
1667
- --tds-radio-group-font-size:var(--t-font-size-sm);
1668
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1669
- --tds-radio-group-description-line-height:1.3;
1670
- }
1671
-
1672
- .tds-input{
1673
- --tds-input-border-color:var(--t-form-border-color);
1674
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1675
- --tds-input-background-color:var(--t-form-background-color);
1676
- --tds-input-color:var(--t-form-color);
1677
- --tds-input-font-size:var(--t-font-size-md);
1678
- --tds-input-description-color:var(--t-text-color-secondary);
1679
- --tds-input-description-invalid-icon-display:none;
1680
- --tds-input-min-height:var(--t-container-size-md);
1681
- --tds-input-padding-inline:var(--t-spacing-1);
1682
-
1683
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1684
-
1685
- display:flex;
1686
- flex-direction:column;
1687
- gap:var(--t-spacing-half);
1367
+ .tds-input textarea{
1368
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1369
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1370
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1371
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1372
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1373
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1374
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1375
+ --tds-input-scrollbar-thumb-border-radius:999px;
1376
+ --tds-input-scrollbar-thumb-border-width:3px;
1377
+ --tds-input-scrollbar-track-margin-block:.125rem;
1378
+ scrollbar-color:initial;
1379
+ transition-timing-function:var(--t-ease-in-out);
1380
+ transition-duration:var(--t-duration-200);
1381
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1688
1382
  }
1689
1383
 
1690
- .tds-input label{
1691
- font-size:var(--t-font-size-md);
1692
- font-weight:var(--t-font-weight-normal);
1693
- color:var(--t-text-color);
1694
- }
1695
-
1696
- .tds-input :is(input,textarea){
1697
- inline-size:100%;
1698
- block-size:auto;
1699
- min-block-size:var(--tds-input-min-height);
1700
- padding-block:var(--tds-input-padding-block);
1701
- padding-inline:var(--tds-input-padding-inline);
1702
- font-family:inherit;
1703
- font-size:var(--tds-input-font-size);
1704
- color:var(--tds-input-color);
1705
- -webkit-appearance:none;
1706
- -moz-appearance:none;
1707
- appearance:none;
1708
- outline:var(--t-focus-ring-width) solid transparent;
1709
- outline-offset:0;
1710
- background-color:var(--tds-input-background-color);
1711
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
1712
- border-radius:var(--t-form-border-radius);
1713
- transition-timing-function:var(--t-ease-in-out);
1714
- transition-duration:var(--t-duration-200);
1715
- transition-property:var(--tds-input-transition-property);
1716
- }
1717
-
1718
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1719
- border-color:var(--tds-input-border-color-hover);
1384
+ @media (pointer: fine){
1385
+ :is(.tds-input textarea)::-webkit-scrollbar{
1386
+ width:12px;
1387
+ height:12px;
1388
+ cursor:default;
1720
1389
  }
1721
1390
 
1722
- :is(.tds-input :is(input,textarea)):focus{
1723
- outline-color:transparent;
1391
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1392
+ cursor:default;
1393
+ background:var(--tds-input-scrollbar-thumb-color);
1394
+ background-clip:content-box;
1395
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1396
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1724
1397
  }
1725
1398
 
1726
- :is(.tds-input :is(input,textarea)):focus-visible{
1727
- outline-color:var(--t-focus-ring-color);
1728
- outline-offset:var(--t-focus-ring-offset);
1729
- border-color:var(--t-form-border-color-focus);
1399
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1400
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1730
1401
  }
1731
1402
 
1732
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
1733
- color:var(--t-form-placeholder-color);
1734
- -moz-user-select:none;
1735
- user-select:none;
1403
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1404
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1736
1405
  }
1737
1406
 
1738
- :is(.tds-input :is(input,textarea))::placeholder{
1739
- color:var(--t-form-placeholder-color);
1740
- -webkit-user-select:none;
1741
- -moz-user-select:none;
1742
- user-select:none;
1407
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1408
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1743
1409
  }
1744
1410
 
1745
- @media (prefers-reduced-motion: reduce){
1746
-
1747
- .tds-input :is(input,textarea){
1748
- --tds-input-transition-property:none;
1749
- }
1411
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1412
+ background:var(--tds-input-scrollbar-surface-color);
1750
1413
  }
1751
1414
 
1752
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1753
- --tds-input-background-color:var(--t-form-background-color-error);
1754
- --tds-input-border-color:var(--t-form-border-color-error);
1755
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1756
- --tds-input-description-color:var(--t-text-color-status-error);
1757
- --tds-input-description-invalid-icon-display:inline-block;
1758
- }
1759
-
1760
- .tds-input:has(:is(input,textarea):required) label::after{
1761
- margin-left:.25ch;
1762
- color:var(--t-text-color-status-error);
1763
- content:"*";
1415
+ :is(.tds-input textarea)::-webkit-resizer{
1416
+ background:var(--tds-input-resizer-icon) no-repeat;
1417
+ background-position:right bottom;
1418
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1764
1419
  }
1765
1420
 
1766
- .tds-input:where(:has(:is(input,textarea):disabled)){
1767
- --tds-input-border-color:var(--t-form-border-color-disabled);
1768
- --tds-input-background-color:var(--t-form-background-color-disabled);
1769
- --tds-input-color:var(--t-form-color-disabled);
1770
- }
1771
-
1772
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1773
- cursor:not-allowed;
1421
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1422
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1423
+ cursor:default;
1774
1424
  }
1775
1425
 
1776
- .tds-input:where(:has(:is(input,textarea)[readonly])){
1777
- --tds-input-border-color:var(--t-form-border-color-readonly);
1778
- --tds-input-background-color:var(--t-form-background-color-readonly);
1779
- }
1426
+ @supports (-moz-appearance: none){
1427
+ :is(.tds-input textarea){
1428
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1429
+ scrollbar-width:thin;
1430
+ }
1780
1431
 
1781
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1782
- border-color:var(--tds-input-border-color-hover);
1432
+ @media (hover){
1433
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1434
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1435
+ }
1436
+ }
1783
1437
  }
1784
-
1785
- .tds-input.tds-input--lg{
1786
- --tds-input-min-height:var(--t-container-size-lg);
1787
- --tds-input-font-size:var(--t-font-size-lg);
1788
1438
  }
1789
1439
 
1790
- .tds-input-description{
1791
- display:flex;
1792
- gap:var(--t-spacing-half);
1793
- align-items:flex-start;
1794
- margin:0;
1795
- font-size:var(--t-font-size-sm);
1796
- line-height:1.35;
1797
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
1798
- cursor:text;
1799
- }
1440
+ .tds-radio{
1441
+ --tds-radio-font-size:var(--t-font-size-md);
1442
+ --tds-radio-cursor:pointer;
1443
+ --tds-radio-line-height:1.4;
1444
+ --tds-radio-transition-property:border-width;
1800
1445
 
1801
- .tds-input-description .tds-input-description-invalid-icon{
1802
- display:var(--tds-input-description-invalid-icon-display, none);
1803
- flex-shrink:0;
1804
- margin-block-start:calc(.5lh - .5em);
1805
- line-height:1.35;
1806
- }
1446
+ --tds-radio-input-size:var(--t-element-size-md);
1447
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1448
+ --tds-radio-input-border-color:var(--t-form-border-color);
1449
+ --tds-radio-input-border-width:var(--t-form-border-width);
1450
+ --tds-radio-input-background-color:var(--t-form-background-color);
1807
1451
 
1808
- .tds-field{
1809
- --tds-field-border-color:var(--t-form-border-color);
1810
- --tds-field-border-color-hover:var(--t-form-border-color-hover);
1811
- --tds-field-border-color-active:var(--t-form-border-color-focus);
1812
- --tds-field-background-color:var(--t-form-background-color);
1813
- --tds-field-color:var(--t-form-color);
1814
- --tds-field-placeholder-color:var(--t-form-placeholder-color);
1815
- --tds-field-font-size:var(--t-font-size-md);
1816
- --tds-field-min-height:var(--t-container-size-md);
1817
- --tds-field-padding-block:6px;
1818
- --tds-field-padding-inline:var(--t-spacing-1);
1819
- --tds-field-description-color:var(--t-text-color-secondary);
1820
- --tds-field-description-invalid-icon-display:none;
1452
+ --tds-radio-label-color:var(--t-form-color);
1453
+
1454
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1455
+ --tds-radio-description-line-height:1.35;
1456
+ --tds-radio-description-color:var(--t-text-color-secondary);
1821
1457
 
1822
1458
  position:relative;
1823
- display:flex;
1824
- flex-direction:column;
1825
- gap:var(--t-spacing-half);
1459
+ display:inline-grid;
1460
+ grid-template-columns:auto;
1461
+ grid-auto-columns:1fr;
1462
+ gap:var(--t-spacing-fourth) 0;
1463
+ line-height:var(--tds-radio-line-height);
1464
+ -webkit-user-select:none;
1465
+ -moz-user-select:none;
1466
+ user-select:none;
1826
1467
  }
1827
1468
 
1828
- .tds-field[data-required] .tds-field-label::after{
1829
- margin-left:.25ch;
1830
- color:var(--t-text-color-status-error);
1831
- content:"*";
1469
+ .tds-radio label{
1470
+ grid-area:1 / 2;
1471
+ padding-inline-start:var(--t-spacing-1);
1472
+ font-size:var(--tds-radio-font-size);
1473
+ font-weight:var(--t-font-weight-normal);
1474
+ color:var(--tds-radio-label-color);
1475
+ cursor:var(--tds-radio-cursor);
1832
1476
  }
1833
1477
 
1834
- .tds-field[data-invalid]{
1835
- --tds-field-border-color:var(--t-form-border-color-error);
1836
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1837
- --tds-field-border-color-active:var(--t-form-border-color-error-hover);
1838
- --tds-field-background-color:var(--t-form-background-color-error);
1839
- --tds-field-description-color:var(--t-text-color-status-error);
1840
- --tds-field-description-invalid-icon-display:inline-block;
1478
+ .tds-radio input[type="radio"]{
1479
+ position:relative;
1480
+ width:1em;
1481
+ height:1em;
1482
+ margin:calc((1lh - 1em) / 2) 0 0;
1483
+ font-size:var(--tds-radio-font-size);
1484
+ line-height:inherit;
1485
+ -webkit-appearance:none;
1486
+ -moz-appearance:none;
1487
+ appearance:none;
1488
+ cursor:var(--tds-radio-cursor);
1489
+ background-color:var(--tds-radio-input-background-color);
1490
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1491
+ border-radius:var(--tds-radio-input-border-radius);
1492
+ transition-timing-function:var(--t-ease-in-out);
1493
+ transition-duration:var(--t-duration-200);
1494
+ transition-property:var(--tds-radio-transition-property);
1841
1495
  }
1842
1496
 
1843
- .tds-field[data-disabled]{
1844
- --tds-field-border-color:var(--t-form-border-color-disabled);
1845
- --tds-field-background-color:var(--t-form-background-color-disabled);
1846
- --tds-field-color:var(--t-form-color-disabled);
1847
- --tds-field-placeholder-color:var(--t-form-color-disabled);
1848
- }
1497
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1498
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1499
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1500
+ }
1849
1501
 
1850
- .tds-field[data-disabled] .tds-field-control{
1851
- cursor:not-allowed;
1502
+ :is(.tds-radio input[type="radio"]):focus-visible{
1503
+ outline:var(--t-focus-ring-outline);
1504
+ outline-offset:var(--t-focus-ring-offset);
1852
1505
  }
1853
1506
 
1854
- .tds-field--lg{
1855
- --tds-field-min-height:var(--t-container-size-lg);
1856
- --tds-field-font-size:var(--t-font-size-lg);
1857
- }
1507
+ :is(.tds-radio input[type="radio"]):disabled{
1508
+ pointer-events:none;
1509
+ }
1858
1510
 
1859
- .tds-field-label{
1860
- font-size:var(--t-font-size-md);
1861
- font-weight:var(--t-font-weight-normal);
1862
- color:var(--t-text-color);
1863
- cursor:default;
1864
- }
1511
+ @media (prefers-reduced-motion: reduce){
1865
1512
 
1866
- .tds-field-control{
1867
- display:flex;
1868
- align-items:center;
1869
- inline-size:100%;
1870
- min-block-size:var(--tds-field-min-height);
1871
- font-family:inherit;
1872
- font-size:var(--tds-field-font-size);
1873
- line-height:1;
1874
- color:var(--tds-field-color);
1875
- -webkit-appearance:none;
1876
- -moz-appearance:none;
1877
- appearance:none;
1878
- cursor:text;
1879
- outline:var(--t-focus-ring-width) solid transparent;
1880
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1881
- outline-offset:0;
1882
- background-color:var(--tds-field-background-color);
1883
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1884
- border-radius:var(--t-form-border-radius);
1885
- transition-timing-function:var(--t-ease-in-out);
1886
- transition-duration:var(--t-duration-200);
1887
- transition-property:background-color, border-color, outline-color, outline-offset;
1888
- }
1513
+ .tds-radio input[type="radio"]{
1514
+ --tds-radio-transition-property:none;
1515
+ }
1516
+ }
1889
1517
 
1890
- .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
1891
- border-color:var(--tds-field-border-color-hover);
1518
+ .tds-radio:has(input:checked){
1519
+ --tds-radio-input-background-color:var(--t-form-background-color);
1520
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1521
+ --tds-radio-input-border-width:4px;
1892
1522
  }
1893
1523
 
1894
- .tds-field-control[data-focus-within]{
1895
- outline-color:var(--t-focus-ring-color);
1896
- outline-offset:var(--t-focus-ring-offset);
1897
- border-color:var(--tds-field-border-color-active);
1524
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1525
+ --tds-radio-input-background-color:var(--t-form-background-color);
1526
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1527
+ }
1528
+
1529
+ .tds-radio:has(input:user-invalid){
1530
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1898
1531
  }
1899
1532
 
1900
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
1901
- --tds-field-border-color:var(--t-form-border-color-readonly);
1902
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1903
- --tds-field-background-color:var(--t-form-background-color-readonly);
1904
- color:var(--t-form-color-readonly);
1533
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1534
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1535
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1536
+ }
1537
+
1538
+ .tds-radio:has(input:disabled){
1539
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1540
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1541
+
1542
+ --tds-radio-label-color:var(--t-form-color-disabled);
1543
+ --tds-radio-description-color:var(--t-form-color-disabled);
1544
+ --tds-radio-cursor:not-allowed;
1905
1545
  }
1906
1546
 
1907
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
1908
- border-color:var(--t-form-border-color-hover);
1547
+ .tds-radio:has(input:disabled) input:checked{
1548
+ --tds-radio-input-background-color:var(--t-form-background-color);
1549
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1909
1550
  }
1910
1551
 
1911
- .tds-field-description{
1552
+ .tds-radio-description{
1912
1553
  display:flex;
1554
+ grid-area:2 / 2;
1913
1555
  gap:var(--t-spacing-half);
1914
1556
  align-items:flex-start;
1557
+ padding-inline-start:var(--t-spacing-1);
1915
1558
  margin:0;
1916
- font-size:var(--t-font-size-sm);
1917
- line-height:1.35;
1918
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
1559
+ font-size:var(--tds-radio-description-font-size);
1560
+ line-height:var(--tds-radio-description-line-height);
1561
+ color:var(--tds-radio-description-color);
1919
1562
  cursor:text;
1920
1563
  }
1921
1564
 
1922
- .tds-field-description .tds-field-description-invalid-icon{
1923
- display:var(--tds-field-description-invalid-icon-display, none);
1924
- flex-shrink:0;
1925
- margin-block-start:calc(.5lh - .5em);
1926
- line-height:1.35;
1927
- }
1928
-
1929
- .tds-field-date-segment{
1930
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
1931
- text-align:end;
1932
- text-wrap:nowrap;
1933
- caret-color:transparent;
1934
- border-radius:var(--t-border-radius-sm);
1935
- }
1936
-
1937
- .tds-field-date-segment[data-placeholder]{
1938
- color:var(--tds-field-placeholder-color);
1939
- }
1940
-
1941
- .tds-field-date-segment[data-focused]{
1942
- color:var(--t-text-color-inverted);
1943
- outline:0;
1944
- background-color:var(--t-fill-color-interaction);
1945
- }
1946
-
1947
- .tds-field-date-segment-separator{
1948
- padding-inline:0;
1949
- color:var(--tds-field-placeholder-color);
1950
- }
1951
-
1952
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
1953
- color:var(--tds-field-color);
1954
- }
1955
-
1956
- .tds-input:has(textarea){
1957
- --tds-input-padding-block:6px;
1958
- --tds-input-resizer-size:var(--t-element-size-sm);
1959
- --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");
1960
- }
1961
-
1962
- @supports (x: attr(x type(*))){
1963
-
1964
- .tds-input textarea{
1965
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1966
- }
1967
- }
1968
-
1969
- .tds-input.tds-textarea--resize-vertical textarea{
1970
- resize:vertical;
1971
- }
1972
-
1973
- .tds-input.tds-textarea--resize-none textarea{
1974
- resize:none;
1975
- }
1976
-
1977
- .tds-input.tds-textarea--resize-auto textarea{
1978
- resize:vertical;
1979
- }
1980
-
1981
- @supports (field-sizing: content){
1982
- .tds-input.tds-textarea--resize-auto textarea{
1983
- field-sizing:content;
1984
- resize:none;
1985
- }
1986
- }
1987
-
1988
- .tds-input textarea{
1989
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1990
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1991
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1992
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1993
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1994
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1995
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1996
- --tds-input-scrollbar-thumb-border-radius:999px;
1997
- --tds-input-scrollbar-thumb-border-width:3px;
1998
- --tds-input-scrollbar-track-margin-block:.125rem;
1999
- scrollbar-color:initial;
2000
- transition-timing-function:var(--t-ease-in-out);
2001
- transition-duration:var(--t-duration-200);
2002
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2003
- }
2004
-
2005
- @media (pointer: fine){
2006
- :is(.tds-input textarea)::-webkit-scrollbar{
2007
- width:12px;
2008
- height:12px;
2009
- cursor:default;
2010
- }
2011
-
2012
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2013
- cursor:default;
2014
- background:var(--tds-input-scrollbar-thumb-color);
2015
- background-clip:content-box;
2016
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2017
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2018
- }
2019
-
2020
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2021
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2022
- }
2023
-
2024
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2025
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2026
- }
2027
-
2028
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2029
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2030
- }
2031
-
2032
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2033
- background:var(--tds-input-scrollbar-surface-color);
2034
- }
2035
-
2036
- :is(.tds-input textarea)::-webkit-resizer{
2037
- background:var(--tds-input-resizer-icon) no-repeat;
2038
- background-position:right bottom;
2039
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2040
- }
2041
-
2042
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2043
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2044
- cursor:default;
2045
- }
2046
-
2047
- @supports (-moz-appearance: none){
2048
- :is(.tds-input textarea){
2049
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2050
- scrollbar-width:thin;
2051
- }
2052
-
2053
- @media (hover){
2054
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2055
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2056
- }
2057
- }
2058
- }
2059
- }
2060
-
2061
- .tds-checkbox-group{
2062
- --tds-checkbox-group-font-size:var(--t-font-size-md);
2063
- --tds-checkbox-group-line-height:1.4;
2064
- --tds-checkbox-group-gap:var(--t-spacing-1);
2065
-
2066
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
2067
- --tds-checkbox-group-description-line-height:1.35;
2068
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
2069
- --tds-checkbox-group-description-invalid-icon-display:none;
2070
- display:flex;
2071
- flex-direction:column;
2072
- gap:0;
2073
- padding:0;
2074
- margin:0;
2075
-
2076
- font-size:var(--tds-checkbox-group-font-size);
2077
- line-height:var(--tds-checkbox-group-line-height);
2078
- border:0;
2079
- }
2080
-
2081
- .tds-checkbox-group legend{
2082
- float:left;
2083
- padding:0;
2084
- margin:0;
2085
- }
2086
-
2087
- .tds-checkbox-group[aria-invalid="true"]{
2088
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
2089
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
2090
- }
2091
-
2092
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
2093
- margin-left:.25ch;
2094
- color:var(--t-text-color-status-error);
2095
- content:"*";
2096
- }
2097
-
2098
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
2099
- content:none;
2100
- }
2101
-
2102
- .tds-checkbox-group-fields{
2103
- display:flex;
2104
- flex-direction:column;
2105
- gap:var(--tds-checkbox-group-gap);
2106
- align-items:flex-start;
2107
- margin-top:var(--t-spacing-1);
2108
- }
2109
-
2110
- .tds-checkbox-group-description{
2111
- display:flex;
2112
- gap:var(--t-spacing-half);
2113
- align-items:flex-start;
2114
- margin:var(--t-spacing-fourth) 0 0;
2115
- font-size:var(--tds-checkbox-group-description-font-size);
2116
- line-height:var(--tds-checkbox-group-description-line-height);
2117
- color:var(--tds-checkbox-group-description-color);
2118
- cursor:text;
2119
- }
2120
-
2121
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
2122
- display:var(--tds-checkbox-group-description-invalid-icon-display);
2123
- flex-shrink:0;
2124
- margin-top:calc(.5lh - .5em);
2125
- line-height:var(--tds-checkbox-group-description-line-height);
2126
- }
2127
-
2128
- .tds-checkbox-group--sm{
2129
- --tds-checkbox-group-line-height:1.35;
2130
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
2131
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
2132
- --tds-checkbox-group-description-line-height:1.3;
2133
- }
1565
+ .tds-radio--sm{
1566
+ --tds-radio-line-height:1.35;
1567
+ --tds-radio-input-size:var(--t-element-size-sm);
1568
+ --tds-radio-font-size:var(--t-font-size-sm);
1569
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1570
+ --tds-radio-description-line-height:1.3;
1571
+ }
2134
1572
 
2135
1573
  .tds-toggle-switch{
2136
1574
  --tds-toggle-switch-font-size:var(--t-font-size-md);
@@ -2272,292 +1710,576 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2272
1710
  --tds-toggle-switch-display:inline-flex;
2273
1711
  }
2274
1712
 
2275
- .tds-select{
2276
- --tds-select-border-color:var(--t-form-border-color);
2277
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
2278
- --tds-select-border-color-active:var(--t-form-border-color-hover);
2279
- --tds-select-background-color:var(--t-form-background-color);
2280
- --tds-select-color:var(--t-form-color);
2281
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
2282
- --tds-select-font-size:var(--t-font-size-md);
2283
- --tds-select-min-height:var(--t-container-size-md);
2284
- --tds-select-padding-block:0;
2285
- --tds-select-description-color:var(--t-text-color-secondary);
2286
- --tds-select-description-invalid-icon-display:none;
2287
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2288
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2289
- --tds-select-caret-size:1em;
2290
- --tds-select-caret-inline-offset:.75em;
2291
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2292
-
2293
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
2294
- --tds-select-dropdown-border:1px solid var(--t-border-color);
2295
- --tds-select-dropdown-padding:var(--t-spacing-1);
2296
- --tds-select-dropdown-margin-block:5px;
2297
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
2298
- --tds-select-dropdown-scrollbar-width:thin;
2299
- --tds-select-dropdown-border-radius:var(--t-border-radius);
2300
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2301
- --tds-select-dropdown-scroll-behavior:smooth;
2302
- --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2303
- --tds-select-dropdown-closed-opacity:0;
2304
- --tds-select-dropdown-open-opacity:1;
2305
- --tds-select-dropdown-closed-translate:0 -8px;
2306
- --tds-select-dropdown-open-translate:0 0;
1713
+ .tds-input{
1714
+ --tds-input-border-color:var(--t-form-border-color);
1715
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1716
+ --tds-input-background-color:var(--t-form-background-color);
1717
+ --tds-input-color:var(--t-form-color);
1718
+ --tds-input-font-size:var(--t-font-size-md);
1719
+ --tds-input-description-color:var(--t-text-color-secondary);
1720
+ --tds-input-description-invalid-icon-display:none;
1721
+ --tds-input-min-height:var(--t-container-size-md);
1722
+ --tds-input-padding-inline:var(--t-spacing-1);
2307
1723
 
2308
- --tds-select-option-gap:var(--t-spacing-1);
2309
- --tds-select-option-padding-block:var(--t-spacing-1);
2310
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2311
- --tds-select-option-font-size:1rem;
2312
- --tds-select-option-color:var(--t-text-color);
2313
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2314
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2315
- --tds-select-option-border-radius:var(--t-border-radius);
1724
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2316
1725
 
2317
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2318
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2319
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
2320
- --tds-select-group-label-font-size:var(--t-font-size-sm);
2321
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2322
- --tds-select-group-label-letter-spacing:0;
2323
- --tds-select-group-label-color:var(--t-text-color-secondary);
2324
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2325
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2326
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2327
-
2328
- position:relative;
2329
1726
  display:flex;
2330
1727
  flex-direction:column;
2331
1728
  gap:var(--t-spacing-half);
2332
1729
  }
2333
1730
 
2334
- .tds-select :is(label,.tds-select-label){
1731
+ .tds-input label{
2335
1732
  font-size:var(--t-font-size-md);
2336
1733
  font-weight:var(--t-font-weight-normal);
2337
1734
  color:var(--t-text-color);
2338
- cursor:default;
2339
1735
  }
2340
1736
 
2341
- .tds-select :is(select,button){
2342
- position:relative;
2343
- place-items:center;
1737
+ .tds-input :is(input,textarea){
2344
1738
  inline-size:100%;
2345
- min-block-size:var(--tds-select-min-height);
2346
- padding-block:var(--tds-select-padding-block);
2347
- padding-inline:var(--t-spacing-1);
2348
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1739
+ block-size:auto;
1740
+ min-block-size:var(--tds-input-min-height);
1741
+ padding-block:var(--tds-input-padding-block);
1742
+ padding-inline:var(--tds-input-padding-inline);
2349
1743
  font-family:inherit;
2350
- font-size:var(--tds-select-font-size);
2351
- line-height:1.15;
2352
- color:var(--tds-select-color);
2353
- text-align:left;
1744
+ font-size:var(--tds-input-font-size);
1745
+ color:var(--tds-input-color);
2354
1746
  -webkit-appearance:none;
2355
1747
  -moz-appearance:none;
2356
1748
  appearance:none;
2357
- cursor:var(--tds-select-cursor, default);
2358
1749
  outline:var(--t-focus-ring-width) solid transparent;
2359
1750
  outline-offset:0;
2360
- background-color:var(--tds-select-background-color);
2361
- background-image:var(--tds-select-background-image);
2362
- background-repeat:no-repeat;
2363
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
2364
- background-size:var(--tds-select-caret-size);
2365
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
1751
+ background-color:var(--tds-input-background-color);
1752
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2366
1753
  border-radius:var(--t-form-border-radius);
2367
1754
  transition-timing-function:var(--t-ease-in-out);
2368
- transition-duration:var(--t-duration-300);
2369
- transition-property:var(--tds-select-transition-property);
1755
+ transition-duration:var(--t-duration-200);
1756
+ transition-property:var(--tds-input-transition-property);
2370
1757
  }
2371
1758
 
2372
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2373
- border-color:var(--tds-select-border-color-hover);
1759
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1760
+ border-color:var(--tds-input-border-color-hover);
2374
1761
  }
2375
1762
 
2376
- :is(.tds-select :is(select,button)):focus{
1763
+ :is(.tds-input :is(input,textarea)):focus{
1764
+ outline-color:transparent;
1765
+ }
1766
+
1767
+ :is(.tds-input :is(input,textarea)):focus-visible{
2377
1768
  outline-color:var(--t-focus-ring-color);
2378
1769
  outline-offset:var(--t-focus-ring-offset);
2379
- border-color:var(--tds-select-border-color-active);
1770
+ border-color:var(--t-form-border-color-focus);
2380
1771
  }
2381
1772
 
2382
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2383
- color:var(--tds-select-placeholder-color);
1773
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
1774
+ color:var(--t-form-placeholder-color);
1775
+ -moz-user-select:none;
1776
+ user-select:none;
2384
1777
  }
2385
1778
 
2386
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2387
- --tds-select-border-color:var(--t-form-border-color-error);
2388
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2389
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2390
- --tds-select-background-color:var(--t-form-background-color-error);
2391
- --tds-select-description-color:var(--t-text-color-status-error);
2392
- --tds-select-description-invalid-icon-display:inline-block;
2393
- }
2394
-
2395
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2396
- margin-left:.25ch;
2397
- color:var(--t-text-color-status-error);
2398
- content:"*";
1779
+ :is(.tds-input :is(input,textarea))::placeholder{
1780
+ color:var(--t-form-placeholder-color);
1781
+ -webkit-user-select:none;
1782
+ -moz-user-select:none;
1783
+ user-select:none;
2399
1784
  }
2400
1785
 
2401
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2402
- --tds-select-border-color:var(--t-form-border-color-disabled);
2403
- --tds-select-background-color:var(--t-form-background-color-disabled);
2404
- --tds-select-color:var(--t-form-color-disabled);
2405
- --tds-select-cursor:not-allowed;
2406
- }
1786
+ @media (prefers-reduced-motion: reduce){
2407
1787
 
2408
- .tds-select:has( > [popover]:popover-open) > button{
2409
- border-color:var(--tds-select-border-color-active);
1788
+ .tds-input :is(input,textarea){
1789
+ --tds-input-transition-property:none;
2410
1790
  }
2411
-
2412
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2413
- transform:rotate(.5turn);
2414
1791
  }
2415
1792
 
2416
- .tds-select :is(hr,li[role="separator"]){
2417
- margin-block:var(--t-spacing-half);
2418
- color:var(--tds-select-border-color);
2419
- border:0;
2420
- border-top:1px solid;
2421
- }
2422
-
2423
- .tds-select :is(li[role="option"],option:not([hidden])){
2424
- display:block;
2425
- padding-block:var(--tds-select-option-padding-block);
2426
- padding-inline:var(--tds-select-option-padding-inline);
2427
- overflow:hidden;
2428
- text-overflow:ellipsis;
2429
- font-size:var(--tds-select-option-font-size);
2430
- line-height:1;
2431
- color:var(--tds-select-option-color);
2432
- white-space:nowrap;
2433
- cursor:default;
2434
- border-radius:var(--tds-select-option-border-radius);
1793
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1794
+ --tds-input-background-color:var(--t-form-background-color-error);
1795
+ --tds-input-border-color:var(--t-form-border-color-error);
1796
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1797
+ --tds-input-description-color:var(--t-text-color-status-error);
1798
+ --tds-input-description-invalid-icon-display:inline-block;
2435
1799
  }
2436
1800
 
2437
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2438
- outline:0;
2439
- }
2440
-
2441
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2442
- background:var(--tds-select-option-background-hover);
1801
+ .tds-input:has(:is(input,textarea):required) label::after{
1802
+ margin-left:.25ch;
1803
+ color:var(--t-text-color-status-error);
1804
+ content:"*";
2443
1805
  }
2444
1806
 
2445
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2446
- background:var(--tds-select-option-background-active);
2447
- }
1807
+ .tds-input:where(:has(:is(input,textarea):disabled)){
1808
+ --tds-input-border-color:var(--t-form-border-color-disabled);
1809
+ --tds-input-background-color:var(--t-form-background-color-disabled);
1810
+ --tds-input-color:var(--t-form-color-disabled);
1811
+ }
2448
1812
 
2449
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2450
- color:var(--t-form-color-disabled);
1813
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2451
1814
  cursor:not-allowed;
2452
1815
  }
2453
1816
 
2454
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2455
- background:transparent;
2456
- }
2457
-
2458
- .tds-select :is(li[role="presentation"],legend){
2459
- position:sticky;
2460
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2461
- z-index:1;
2462
- float:inline-start;
2463
- inline-size:100%;
2464
- padding-block:var(--tds-select-group-label-padding-block);
2465
- padding-inline:var(--tds-select-group-label-padding-inline);
2466
- container-type:scroll-state;
2467
- font-size:var(--tds-select-group-label-font-size);
2468
- font-weight:var(--tds-select-group-label-font-weight);
2469
- letter-spacing:var(--tds-select-group-label-letter-spacing);
2470
- background:var(--tds-select-group-label-background);
2471
- text-box:trim-both cap alphabetic;
1817
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
1818
+ --tds-input-border-color:var(--t-form-border-color-readonly);
1819
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2472
1820
  }
2473
1821
 
2474
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2475
- display:inline-flex;
2476
- gap:var(--t-spacing-half);
2477
- align-items:center;
2478
- color:var(--tds-select-group-label-color);
2479
- transition:var(--tds-select-group-label-transition);
2480
- }
2481
-
2482
- @container scroll-state(stuck){
2483
-
2484
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2485
- color:var(--tds-select-group-label-color-stuck);
2486
- }
2487
-
2488
- @media (forced-colors: active){
2489
-
2490
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2491
- color:var(--tds-select-group-label-color-stuck);
1822
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1823
+ border-color:var(--tds-input-border-color-hover);
2492
1824
  }
2493
- }
2494
- }
2495
1825
 
2496
- .tds-select.tds-select--lg{
2497
- --tds-select-min-height:var(--t-container-size-lg);
2498
- --tds-select-font-size:var(--t-font-size-lg);
2499
- }
2500
-
2501
- @media (prefers-reduced-motion: reduce){
2502
-
2503
- .tds-select{
2504
- --tds-select-transition-property:none;
2505
- --tds-select-dropdown-transition:none;
2506
- --tds-select-dropdown-scroll-behavior:auto;
2507
- --tds-select-dropdown-closed-translate:none;
2508
- --tds-select-dropdown-open-translate:none;
2509
- --tds-select-caret-transition:none;
2510
- }
1826
+ .tds-input.tds-input--lg{
1827
+ --tds-input-min-height:var(--t-container-size-lg);
1828
+ --tds-input-font-size:var(--t-font-size-lg);
2511
1829
  }
2512
1830
 
2513
- .tds-select-description{
1831
+ .tds-input-description{
2514
1832
  display:flex;
2515
1833
  gap:var(--t-spacing-half);
2516
1834
  align-items:flex-start;
2517
1835
  margin:0;
2518
1836
  font-size:var(--t-font-size-sm);
2519
1837
  line-height:1.35;
2520
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1838
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2521
1839
  cursor:text;
2522
1840
  }
2523
1841
 
2524
- .tds-select-description .tds-select-description-invalid-icon{
2525
- display:var(--tds-select-description-invalid-icon-display, none);
1842
+ .tds-input-description .tds-input-description-invalid-icon{
1843
+ display:var(--tds-input-description-invalid-icon-display, none);
2526
1844
  flex-shrink:0;
2527
1845
  margin-block-start:calc(.5lh - .5em);
2528
1846
  line-height:1.35;
2529
1847
  }
2530
1848
 
2531
- .tds-select > .tds-select-hidden-select{
2532
- position:absolute;
2533
- inline-size:1px;
2534
- block-size:1px;
2535
- padding:0;
2536
- margin:0;
2537
- pointer-events:none;
2538
- opacity:0;
2539
- }
1849
+ .tds-field{
1850
+ --tds-field-border-color:var(--t-form-border-color);
1851
+ --tds-field-border-color-hover:var(--t-form-border-color-hover);
1852
+ --tds-field-border-color-active:var(--t-form-border-color-focus);
1853
+ --tds-field-background-color:var(--t-form-background-color);
1854
+ --tds-field-color:var(--t-form-color);
1855
+ --tds-field-placeholder-color:var(--t-form-placeholder-color);
1856
+ --tds-field-font-size:var(--t-font-size-md);
1857
+ --tds-field-min-height:var(--t-container-size-md);
1858
+ --tds-field-padding-block:6px;
1859
+ --tds-field-padding-inline:var(--t-spacing-1);
1860
+ --tds-field-description-color:var(--t-text-color-secondary);
1861
+ --tds-field-description-invalid-icon-display:none;
2540
1862
 
2541
- .tds-select:has(> button){
2542
- anchor-scope:--tds-select-anchor;
1863
+ position:relative;
1864
+ display:flex;
1865
+ flex-direction:column;
1866
+ gap:var(--t-spacing-half);
2543
1867
  }
2544
1868
 
2545
- .tds-select:has( > button) > button{
2546
- display:block;
2547
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2548
- anchor-name:--tds-select-anchor;
2549
- overflow:hidden;
2550
- text-overflow:ellipsis;
2551
- color:var(--tds-select-placeholder-color);
2552
- white-space:nowrap;
2553
- background-image:none;
2554
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
2555
- -webkit-tap-highlight-color:transparent;
1869
+ .tds-field[data-required] .tds-field-label::after{
1870
+ margin-left:.25ch;
1871
+ color:var(--t-text-color-status-error);
1872
+ content:"*";
2556
1873
  }
2557
1874
 
2558
- :is(.tds-select:has( > button) > button)::after{
2559
- position:absolute;
2560
- inset-block:0;
1875
+ .tds-field[data-invalid]{
1876
+ --tds-field-border-color:var(--t-form-border-color-error);
1877
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1878
+ --tds-field-border-color-active:var(--t-form-border-color-error-hover);
1879
+ --tds-field-background-color:var(--t-form-background-color-error);
1880
+ --tds-field-description-color:var(--t-text-color-status-error);
1881
+ --tds-field-description-invalid-icon-display:inline-block;
1882
+ }
1883
+
1884
+ .tds-field[data-disabled]{
1885
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1886
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1887
+ --tds-field-color:var(--t-form-color-disabled);
1888
+ --tds-field-placeholder-color:var(--t-form-color-disabled);
1889
+ }
1890
+
1891
+ .tds-field[data-disabled] .tds-field-control{
1892
+ cursor:not-allowed;
1893
+ }
1894
+
1895
+ .tds-field--lg{
1896
+ --tds-field-min-height:var(--t-container-size-lg);
1897
+ --tds-field-font-size:var(--t-font-size-lg);
1898
+ }
1899
+
1900
+ .tds-field-label{
1901
+ font-size:var(--t-font-size-md);
1902
+ font-weight:var(--t-font-weight-normal);
1903
+ color:var(--t-text-color);
1904
+ cursor:default;
1905
+ }
1906
+
1907
+ .tds-field-control{
1908
+ display:flex;
1909
+ align-items:center;
1910
+ inline-size:100%;
1911
+ min-block-size:var(--tds-field-min-height);
1912
+ font-family:inherit;
1913
+ font-size:var(--tds-field-font-size);
1914
+ line-height:1;
1915
+ color:var(--tds-field-color);
1916
+ -webkit-appearance:none;
1917
+ -moz-appearance:none;
1918
+ appearance:none;
1919
+ cursor:text;
1920
+ outline:var(--t-focus-ring-width) solid transparent;
1921
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1922
+ outline-offset:0;
1923
+ background-color:var(--tds-field-background-color);
1924
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1925
+ border-radius:var(--t-form-border-radius);
1926
+ transition-timing-function:var(--t-ease-in-out);
1927
+ transition-duration:var(--t-duration-200);
1928
+ transition-property:background-color, border-color, outline-color, outline-offset;
1929
+ }
1930
+
1931
+ .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
1932
+ border-color:var(--tds-field-border-color-hover);
1933
+ }
1934
+
1935
+ .tds-field-control[data-focus-within]{
1936
+ outline-color:var(--t-focus-ring-color);
1937
+ outline-offset:var(--t-focus-ring-offset);
1938
+ border-color:var(--tds-field-border-color-active);
1939
+ }
1940
+
1941
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
1942
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1943
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1944
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1945
+ color:var(--t-form-color-readonly);
1946
+ }
1947
+
1948
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
1949
+ border-color:var(--t-form-border-color-hover);
1950
+ }
1951
+
1952
+ .tds-field-description{
1953
+ display:flex;
1954
+ gap:var(--t-spacing-half);
1955
+ align-items:flex-start;
1956
+ margin:0;
1957
+ font-size:var(--t-font-size-sm);
1958
+ line-height:1.35;
1959
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
1960
+ cursor:text;
1961
+ }
1962
+
1963
+ .tds-field-description .tds-field-description-invalid-icon{
1964
+ display:var(--tds-field-description-invalid-icon-display, none);
1965
+ flex-shrink:0;
1966
+ margin-block-start:calc(.5lh - .5em);
1967
+ line-height:1.35;
1968
+ }
1969
+
1970
+ .tds-field-date-segment{
1971
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
1972
+ text-align:end;
1973
+ text-wrap:nowrap;
1974
+ caret-color:transparent;
1975
+ border-radius:var(--t-border-radius-sm);
1976
+ }
1977
+
1978
+ .tds-field-date-segment[data-placeholder]{
1979
+ color:var(--tds-field-placeholder-color);
1980
+ }
1981
+
1982
+ .tds-field-date-segment[data-focused]{
1983
+ color:var(--t-text-color-inverted);
1984
+ outline:0;
1985
+ background-color:var(--t-fill-color-interaction);
1986
+ }
1987
+
1988
+ .tds-field-date-segment-separator{
1989
+ padding-inline:0;
1990
+ color:var(--tds-field-placeholder-color);
1991
+ }
1992
+
1993
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
1994
+ color:var(--tds-field-color);
1995
+ }
1996
+
1997
+ .tds-select{
1998
+ --tds-select-border-color:var(--t-form-border-color);
1999
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
2000
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
2001
+ --tds-select-background-color:var(--t-form-background-color);
2002
+ --tds-select-color:var(--t-form-color);
2003
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
2004
+ --tds-select-font-size:var(--t-font-size-md);
2005
+ --tds-select-min-height:var(--t-container-size-md);
2006
+ --tds-select-padding-block:0;
2007
+ --tds-select-description-color:var(--t-text-color-secondary);
2008
+ --tds-select-description-invalid-icon-display:none;
2009
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2010
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2011
+ --tds-select-caret-size:1em;
2012
+ --tds-select-caret-inline-offset:.75em;
2013
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2014
+
2015
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
2016
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
2017
+ --tds-select-dropdown-padding:var(--t-spacing-1);
2018
+ --tds-select-dropdown-margin-block:5px;
2019
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
2020
+ --tds-select-dropdown-scrollbar-width:thin;
2021
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
2022
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2023
+ --tds-select-dropdown-scroll-behavior:smooth;
2024
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2025
+ --tds-select-dropdown-closed-opacity:0;
2026
+ --tds-select-dropdown-open-opacity:1;
2027
+ --tds-select-dropdown-closed-translate:0 -8px;
2028
+ --tds-select-dropdown-open-translate:0 0;
2029
+
2030
+ --tds-select-option-gap:var(--t-spacing-1);
2031
+ --tds-select-option-padding-block:var(--t-spacing-1);
2032
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2033
+ --tds-select-option-font-size:1rem;
2034
+ --tds-select-option-color:var(--t-text-color);
2035
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2036
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2037
+ --tds-select-option-border-radius:var(--t-border-radius);
2038
+
2039
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2040
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2041
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
2042
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
2043
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2044
+ --tds-select-group-label-letter-spacing:0;
2045
+ --tds-select-group-label-color:var(--t-text-color-secondary);
2046
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2047
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2048
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2049
+
2050
+ position:relative;
2051
+ display:flex;
2052
+ flex-direction:column;
2053
+ gap:var(--t-spacing-half);
2054
+ }
2055
+
2056
+ .tds-select :is(label,.tds-select-label){
2057
+ font-size:var(--t-font-size-md);
2058
+ font-weight:var(--t-font-weight-normal);
2059
+ color:var(--t-text-color);
2060
+ cursor:default;
2061
+ }
2062
+
2063
+ .tds-select :is(select,button){
2064
+ position:relative;
2065
+ place-items:center;
2066
+ inline-size:100%;
2067
+ min-block-size:var(--tds-select-min-height);
2068
+ padding-block:var(--tds-select-padding-block);
2069
+ padding-inline:var(--t-spacing-1);
2070
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2071
+ font-family:inherit;
2072
+ font-size:var(--tds-select-font-size);
2073
+ line-height:1.15;
2074
+ color:var(--tds-select-color);
2075
+ text-align:left;
2076
+ -webkit-appearance:none;
2077
+ -moz-appearance:none;
2078
+ appearance:none;
2079
+ cursor:var(--tds-select-cursor, default);
2080
+ outline:var(--t-focus-ring-width) solid transparent;
2081
+ outline-offset:0;
2082
+ background-color:var(--tds-select-background-color);
2083
+ background-image:var(--tds-select-background-image);
2084
+ background-repeat:no-repeat;
2085
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
2086
+ background-size:var(--tds-select-caret-size);
2087
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
2088
+ border-radius:var(--t-form-border-radius);
2089
+ transition-timing-function:var(--t-ease-in-out);
2090
+ transition-duration:var(--t-duration-300);
2091
+ transition-property:var(--tds-select-transition-property);
2092
+ }
2093
+
2094
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2095
+ border-color:var(--tds-select-border-color-hover);
2096
+ }
2097
+
2098
+ :is(.tds-select :is(select,button)):focus{
2099
+ outline-color:var(--t-focus-ring-color);
2100
+ outline-offset:var(--t-focus-ring-offset);
2101
+ border-color:var(--tds-select-border-color-active);
2102
+ }
2103
+
2104
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2105
+ color:var(--tds-select-placeholder-color);
2106
+ }
2107
+
2108
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2109
+ --tds-select-border-color:var(--t-form-border-color-error);
2110
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2111
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2112
+ --tds-select-background-color:var(--t-form-background-color-error);
2113
+ --tds-select-description-color:var(--t-text-color-status-error);
2114
+ --tds-select-description-invalid-icon-display:inline-block;
2115
+ }
2116
+
2117
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2118
+ margin-left:.25ch;
2119
+ color:var(--t-text-color-status-error);
2120
+ content:"*";
2121
+ }
2122
+
2123
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2124
+ --tds-select-border-color:var(--t-form-border-color-disabled);
2125
+ --tds-select-background-color:var(--t-form-background-color-disabled);
2126
+ --tds-select-color:var(--t-form-color-disabled);
2127
+ --tds-select-cursor:not-allowed;
2128
+ }
2129
+
2130
+ .tds-select:has( > [popover]:popover-open) > button{
2131
+ border-color:var(--tds-select-border-color-active);
2132
+ }
2133
+
2134
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2135
+ transform:rotate(.5turn);
2136
+ }
2137
+
2138
+ .tds-select :is(hr,li[role="separator"]){
2139
+ margin-block:var(--t-spacing-half);
2140
+ color:var(--tds-select-border-color);
2141
+ border:0;
2142
+ border-top:1px solid;
2143
+ }
2144
+
2145
+ .tds-select :is(li[role="option"],option:not([hidden])){
2146
+ display:block;
2147
+ padding-block:var(--tds-select-option-padding-block);
2148
+ padding-inline:var(--tds-select-option-padding-inline);
2149
+ overflow:hidden;
2150
+ text-overflow:ellipsis;
2151
+ font-size:var(--tds-select-option-font-size);
2152
+ line-height:1;
2153
+ color:var(--tds-select-option-color);
2154
+ white-space:nowrap;
2155
+ cursor:default;
2156
+ border-radius:var(--tds-select-option-border-radius);
2157
+ }
2158
+
2159
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2160
+ outline:0;
2161
+ }
2162
+
2163
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2164
+ background:var(--tds-select-option-background-hover);
2165
+ }
2166
+
2167
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2168
+ background:var(--tds-select-option-background-active);
2169
+ }
2170
+
2171
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2172
+ color:var(--t-form-color-disabled);
2173
+ cursor:not-allowed;
2174
+ }
2175
+
2176
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2177
+ background:transparent;
2178
+ }
2179
+
2180
+ .tds-select :is(li[role="presentation"],legend){
2181
+ position:sticky;
2182
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2183
+ z-index:1;
2184
+ float:inline-start;
2185
+ inline-size:100%;
2186
+ padding-block:var(--tds-select-group-label-padding-block);
2187
+ padding-inline:var(--tds-select-group-label-padding-inline);
2188
+ container-type:scroll-state;
2189
+ font-size:var(--tds-select-group-label-font-size);
2190
+ font-weight:var(--tds-select-group-label-font-weight);
2191
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
2192
+ background:var(--tds-select-group-label-background);
2193
+ text-box:trim-both cap alphabetic;
2194
+ }
2195
+
2196
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2197
+ display:inline-flex;
2198
+ gap:var(--t-spacing-half);
2199
+ align-items:center;
2200
+ color:var(--tds-select-group-label-color);
2201
+ transition:var(--tds-select-group-label-transition);
2202
+ }
2203
+
2204
+ @container scroll-state(stuck){
2205
+
2206
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2207
+ color:var(--tds-select-group-label-color-stuck);
2208
+ }
2209
+
2210
+ @media (forced-colors: active){
2211
+
2212
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2213
+ color:var(--tds-select-group-label-color-stuck);
2214
+ }
2215
+ }
2216
+ }
2217
+
2218
+ .tds-select.tds-select--lg{
2219
+ --tds-select-min-height:var(--t-container-size-lg);
2220
+ --tds-select-font-size:var(--t-font-size-lg);
2221
+ }
2222
+
2223
+ @media (prefers-reduced-motion: reduce){
2224
+
2225
+ .tds-select{
2226
+ --tds-select-transition-property:none;
2227
+ --tds-select-dropdown-transition:none;
2228
+ --tds-select-dropdown-scroll-behavior:auto;
2229
+ --tds-select-dropdown-closed-translate:none;
2230
+ --tds-select-dropdown-open-translate:none;
2231
+ --tds-select-caret-transition:none;
2232
+ }
2233
+ }
2234
+
2235
+ .tds-select-description{
2236
+ display:flex;
2237
+ gap:var(--t-spacing-half);
2238
+ align-items:flex-start;
2239
+ margin:0;
2240
+ font-size:var(--t-font-size-sm);
2241
+ line-height:1.35;
2242
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
2243
+ cursor:text;
2244
+ }
2245
+
2246
+ .tds-select-description .tds-select-description-invalid-icon{
2247
+ display:var(--tds-select-description-invalid-icon-display, none);
2248
+ flex-shrink:0;
2249
+ margin-block-start:calc(.5lh - .5em);
2250
+ line-height:1.35;
2251
+ }
2252
+
2253
+ .tds-select > .tds-select-hidden-select{
2254
+ position:absolute;
2255
+ inline-size:1px;
2256
+ block-size:1px;
2257
+ padding:0;
2258
+ margin:0;
2259
+ pointer-events:none;
2260
+ opacity:0;
2261
+ }
2262
+
2263
+ .tds-select:has(> button){
2264
+ anchor-scope:--tds-select-anchor;
2265
+ }
2266
+
2267
+ .tds-select:has( > button) > button{
2268
+ display:block;
2269
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2270
+ anchor-name:--tds-select-anchor;
2271
+ overflow:hidden;
2272
+ text-overflow:ellipsis;
2273
+ color:var(--tds-select-placeholder-color);
2274
+ white-space:nowrap;
2275
+ background-image:none;
2276
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
2277
+ -webkit-tap-highlight-color:transparent;
2278
+ }
2279
+
2280
+ :is(.tds-select:has( > button) > button)::after{
2281
+ position:absolute;
2282
+ inset-block:0;
2561
2283
  inset-inline-end:var(--tds-select-caret-inline-offset);
2562
2284
  width:var(--tds-select-caret-size);
2563
2285
  height:var(--tds-select-caret-size);
@@ -2604,114 +2326,392 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2604
2326
  transition:var(--tds-select-dropdown-transition);
2605
2327
  }
2606
2328
 
2607
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
2608
- opacity:var(--tds-select-dropdown-closed-opacity);
2609
- translate:var(--tds-select-dropdown-closed-translate);
2610
- }
2329
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
2330
+ opacity:var(--tds-select-dropdown-closed-opacity);
2331
+ translate:var(--tds-select-dropdown-closed-translate);
2332
+ }
2333
+
2334
+ :is(.tds-select:has( > button) [popover]) ul{
2335
+ padding:0;
2336
+ margin:0;
2337
+ list-style:none;
2338
+ }
2339
+
2340
+ @starting-style{
2341
+ :is(.tds-select:has( > button) [popover]):popover-open{
2342
+ opacity:var(--tds-select-dropdown-closed-opacity);
2343
+ translate:var(--tds-select-dropdown-closed-translate);
2344
+ }
2345
+ }
2346
+
2347
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2348
+ .tds-select select:has(> button){
2349
+ padding-inline-end:0;
2350
+ background-image:none;
2351
+ }
2352
+ @media (hover) and (pointer: fine){
2353
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2354
+ padding-block:0;
2355
+ -webkit-appearance:base-select;
2356
+ -moz-appearance:base-select;
2357
+ appearance:base-select;
2358
+ }
2359
+ }
2360
+ :is(.tds-select select:has( > button))::picker-icon{
2361
+ flex-shrink:0;
2362
+ width:var(--tds-select-caret-size);
2363
+ height:var(--tds-select-caret-size);
2364
+ margin-inline-end:var(--tds-select-caret-inline-offset);
2365
+ line-height:1;
2366
+ content:var(--tds-select-background-image);
2367
+ transition:var(--tds-select-caret-transition);
2368
+ }
2369
+
2370
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2371
+ opacity:var(--tds-select-dropdown-closed-opacity);
2372
+ translate:var(--tds-select-dropdown-closed-translate);
2373
+ }
2374
+
2375
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2376
+ outline-color:var(--t-focus-ring-color);
2377
+ outline-offset:var(--t-focus-ring-offset);
2378
+ border-color:var(--tds-select-border-color-active);
2379
+ }
2380
+
2381
+ :is(.tds-select select:has( > button)):open::picker-icon{
2382
+ opacity:1;
2383
+ transform:rotate(.5turn);
2384
+ }
2385
+
2386
+ :is(.tds-select select:has( > button)) selectedcontent{
2387
+ overflow:hidden;
2388
+ text-overflow:ellipsis;
2389
+ line-height:calc(var(--tds-select-min-height) - 2px);
2390
+ white-space:nowrap;
2391
+ }
2392
+
2393
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2394
+ color:var(--tds-select-placeholder-color);
2395
+ }
2396
+
2397
+ :is(.tds-select select:has( > button))::picker(select){
2398
+ inset:auto;
2399
+ inline-size:-moz-max-content;
2400
+ inline-size:max-content;
2401
+ min-inline-size:anchor-size(width);
2402
+ max-inline-size:100vi;
2403
+ padding:var(--tds-select-dropdown-padding);
2404
+ margin-block:var(--tds-select-dropdown-margin-block);
2405
+ position-area:block-end span-inline-start;
2406
+ position-try-fallbacks:flip-block, flip-inline;
2407
+ overflow:auto;
2408
+ overflow-x:hidden;
2409
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2410
+ overscroll-behavior:none;
2411
+ -webkit-user-select:none;
2412
+ -moz-user-select:none;
2413
+ user-select:none;
2414
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2415
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2416
+ background:var(--tds-select-dropdown-background-color);
2417
+ border:var(--tds-select-dropdown-border);
2418
+ border-radius:var(--tds-select-dropdown-border-radius);
2419
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2420
+ opacity:var(--tds-select-dropdown-open-opacity);
2421
+ translate:var(--tds-select-dropdown-open-translate);
2422
+ transition:var(--tds-select-dropdown-transition);
2423
+ }
2424
+
2425
+ :is(.tds-select select:has( > button)) option::checkmark{
2426
+ display:none;
2427
+ }
2428
+
2429
+ @starting-style{
2430
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
2431
+ opacity:var(--tds-select-dropdown-closed-opacity);
2432
+ translate:var(--tds-select-dropdown-closed-translate);
2433
+ }
2434
+ }
2435
+ }
2436
+
2437
+ @layer t-critical{
2438
+ tds-page-header:not(.hydrated){
2439
+ display:none;
2440
+ }
2441
+ }
2442
+
2443
+ @layer t-component{
2444
+ .tds-page-header{
2445
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2446
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2447
+ --tds-page-header-color:var(--t-text-color);
2448
+ --tds-page-header-bottom-border-color:transparent;
2449
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2450
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2451
+ --tds-page-header-padding-x:var(--t-spacing-2);
2452
+ --tds-page-header-padding-y:var(--t-spacing-2);
2453
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2454
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2455
+ --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%);
2456
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2457
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2458
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2459
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2460
+ --tds-page-header-nav-item-border-width:1px;
2461
+
2462
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2463
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2464
+
2465
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2466
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2467
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2468
+
2469
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2470
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2471
+
2472
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2473
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2474
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2475
+
2476
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2477
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2478
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2479
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2480
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2481
+ }
2482
+
2483
+ .tds-page-header--profile{
2484
+ --tds-page-header-padding-y:20px;
2485
+ }
2486
+
2487
+ @supports (color: light-dark(#fff, #000)){
2488
+ .tds-page-header{
2489
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2490
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2491
+ }
2492
+ }
2493
+
2494
+ @media (min-width: 600px){
2495
+ .tds-page-header{
2496
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2497
+ --tds-page-header-color:var(--t-text-color-secondary);
2498
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2499
+ --tds-page-header-padding-x:var(--t-spacing-3);
2500
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2501
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2502
+ --tds-page-header-nav-background:transparent;
2503
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2504
+ --tds-page-header-nav-item-border-width:1px;
2505
+ --tds-page-header-nav-item-color:var(--t-text-color);
2506
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2507
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2508
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2509
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2510
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2511
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2512
+ }
2513
+ }
2514
+ }
2515
+
2516
+ .tds-page-header{
2517
+ display:flex;
2518
+ flex-direction:column;
2519
+ padding-top:var(--tds-page-header-padding-y);
2520
+ color:var(--tds-page-header-color);
2521
+ background:var(--tds-page-header-background-color);
2522
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2523
+ }
2524
+
2525
+ .tds-page-header:not(.has-nav){
2526
+ padding-bottom:var(--tds-page-header-padding-y);
2527
+ }
2528
+
2529
+ .tds-page-header.inactive{
2530
+ background:var(--tds-page-header-background-color-inactive);
2531
+ }
2611
2532
 
2612
- :is(.tds-select:has( > button) [popover]) ul{
2613
- padding:0;
2614
- margin:0;
2533
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2534
+ width:100%;
2535
+ }
2536
+
2537
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2538
+ display:flex;
2539
+ flex-flow:row wrap;
2540
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2541
+ align-items:flex-start;
2542
+ justify-content:flex-start;
2543
+ min-width:0;
2544
+ }
2545
+
2546
+ :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{
2547
+ display:flex;
2548
+ gap:var(--tds-page-header-nav-gap);
2549
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2550
+ margin:0 0 -1px;
2551
+ overflow:auto;
2615
2552
  list-style:none;
2553
+ background:var(--tds-page-header-nav-background);
2616
2554
  }
2617
2555
 
2618
- @starting-style{
2619
- :is(.tds-select:has( > button) [popover]):popover-open{
2620
- opacity:var(--tds-select-dropdown-closed-opacity);
2621
- translate:var(--tds-select-dropdown-closed-translate);
2622
- }
2556
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2557
+ position:relative;
2558
+ display:inline-flex;
2559
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2560
+ font-size:var(--t-font-size-sm);
2561
+ line-height:22px;
2562
+ color:var(--tds-page-header-nav-item-color);
2563
+ white-space:nowrap;
2564
+ text-decoration:none;
2565
+ -webkit-appearance:none;
2566
+ -moz-appearance:none;
2567
+ appearance:none;
2568
+ cursor:pointer;
2569
+ outline-offset:-2px;
2570
+ background-color:var(--tds-page-header-nav-item-background-color);
2571
+ background-clip:padding-box;
2572
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2573
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2574
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2623
2575
  }
2624
2576
 
2625
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2626
- .tds-select select:has(> button){
2627
- padding-inline-end:0;
2628
- background-image:none;
2629
- }
2630
- @media (hover) and (pointer: fine){
2631
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2632
- padding-block:0;
2633
- -webkit-appearance:base-select;
2634
- -moz-appearance:base-select;
2635
- appearance:base-select;
2577
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2578
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2579
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2580
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2581
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2636
2582
  }
2637
- }
2638
- :is(.tds-select select:has( > button))::picker-icon{
2639
- flex-shrink:0;
2640
- width:var(--tds-select-caret-size);
2641
- height:var(--tds-select-caret-size);
2642
- margin-inline-end:var(--tds-select-caret-inline-offset);
2643
- line-height:1;
2644
- content:var(--tds-select-background-image);
2645
- transition:var(--tds-select-caret-transition);
2646
- }
2647
2583
 
2648
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2649
- opacity:var(--tds-select-dropdown-closed-opacity);
2650
- translate:var(--tds-select-dropdown-closed-translate);
2651
- }
2584
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2585
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2586
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2587
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2588
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2589
+ }
2652
2590
 
2653
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2654
- outline-color:var(--t-focus-ring-color);
2655
- outline-offset:var(--t-focus-ring-offset);
2656
- border-color:var(--tds-select-border-color-active);
2657
- }
2591
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2592
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2593
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2594
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2595
+ }
2658
2596
 
2659
- :is(.tds-select select:has( > button)):open::picker-icon{
2660
- opacity:1;
2661
- transform:rotate(.5turn);
2662
- }
2597
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2598
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2599
+ color:var(--tds-page-header-nav-item-color-disabled);
2600
+ cursor:not-allowed;
2601
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2602
+ opacity:1;
2603
+ }
2663
2604
 
2664
- :is(.tds-select select:has( > button)) selectedcontent{
2665
- overflow:hidden;
2666
- text-overflow:ellipsis;
2667
- line-height:calc(var(--tds-select-min-height) - 2px);
2668
- white-space:nowrap;
2669
- }
2605
+ @media (min-width: 600px){
2606
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2607
+ position:absolute;
2608
+ inset:auto -1px -1px;
2609
+ height:1px;
2610
+ pointer-events:none;
2611
+ content:"";
2612
+ background-color:var(--tds-page-header-bottom-border-color);
2613
+ }
2614
+ }
2670
2615
 
2671
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2672
- color:var(--tds-select-placeholder-color);
2616
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2617
+ position:relative;
2673
2618
  }
2674
2619
 
2675
- :is(.tds-select select:has( > button))::picker(select){
2676
- inset:auto;
2677
- inline-size:-moz-max-content;
2678
- inline-size:max-content;
2679
- min-inline-size:anchor-size(width);
2680
- max-inline-size:100vi;
2681
- padding:var(--tds-select-dropdown-padding);
2682
- margin-block:var(--tds-select-dropdown-margin-block);
2683
- position-area:block-end span-inline-start;
2684
- position-try-fallbacks:flip-block, flip-inline;
2685
- overflow:auto;
2686
- overflow-x:hidden;
2687
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2688
- overscroll-behavior:none;
2689
- -webkit-user-select:none;
2690
- -moz-user-select:none;
2691
- user-select:none;
2692
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2693
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2694
- background:var(--tds-select-dropdown-background-color);
2695
- border:var(--tds-select-dropdown-border);
2696
- border-radius:var(--tds-select-dropdown-border-radius);
2697
- box-shadow:var(--tds-select-dropdown-box-shadow);
2698
- opacity:var(--tds-select-dropdown-open-opacity);
2699
- translate:var(--tds-select-dropdown-open-translate);
2700
- transition:var(--tds-select-dropdown-transition);
2701
- }
2620
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2621
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2622
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2623
+ }
2702
2624
 
2703
- :is(.tds-select select:has( > button)) option::checkmark{
2704
- display:none;
2705
- }
2625
+ :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{
2626
+ position:absolute;
2627
+ top:-5px;
2628
+ right:-2px;
2629
+ width:10px;
2630
+ height:10px;
2631
+ content:"";
2632
+ background:var(--tds-page-header-nav-item-indicator-color);
2633
+ border-radius:50%;
2634
+ }
2706
2635
 
2707
- @starting-style{
2708
- :is(.tds-select select:has( > button))::picker(select):popover-open{
2709
- opacity:var(--tds-select-dropdown-closed-opacity);
2710
- translate:var(--tds-select-dropdown-closed-translate);
2636
+ @media (prefers-reduced-motion: no-preference){
2637
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2638
+ animation:indicator-pulse 1.25s ease infinite;
2639
+ }
2711
2640
  }
2641
+
2642
+ .tds-page-header__title-bar{
2643
+ display:flex;
2644
+ flex-direction:column;
2645
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2646
+ align-items:flex-start;
2647
+ justify-content:space-between;
2648
+ padding:0 var(--tds-page-header-padding-x);
2649
+ }
2650
+
2651
+ .tds-page-header--profile > .tds-page-header__title-bar{
2652
+ align-items:center;
2653
+ }
2654
+
2655
+ .tds-page-header__primary{
2656
+ width:100%;
2657
+ }
2658
+
2659
+ .tds-page-header__primary h1{
2660
+ margin:0;
2661
+ font-size:var(--tds-page-header-headline-font-size);
2662
+ font-weight:var(--t-font-weight-normal);
2663
+ line-height:32px;
2664
+ color:var(--tds-page-header-headline-color);
2665
+ overflow-wrap:break-word;
2666
+ }
2667
+
2668
+ @media (min-width: 960px){
2669
+ .tds-page-header__primary{
2670
+ flex:1 1 max-content;
2671
+ width:auto;
2672
+ min-width:0;
2673
+ max-width:100%;
2674
+ }
2675
+
2676
+ .tds-page-header__title-bar,
2677
+ .tds-page-header--profile .tds-page-header__title-bar{
2678
+ flex-flow:row nowrap;
2679
+ row-gap:12px;
2680
+ align-items:flex-start;
2681
+ }
2682
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2683
+ width:auto;
2684
+ }
2685
+
2686
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2687
+ justify-content:flex-end;
2712
2688
  }
2713
2689
  }
2714
2690
 
2691
+ .tds-page-header-phone,
2692
+ .tds-page-header-email{
2693
+ color:var(--tds-page-header-color);
2694
+ white-space:nowrap;
2695
+ }
2696
+
2697
+ .tds-page-header-email{
2698
+ max-width:100%;
2699
+ overflow:hidden;
2700
+ text-overflow:ellipsis;
2701
+ }
2702
+
2703
+ @keyframes indicator-pulse{
2704
+ 0%{
2705
+ opacity:.3;
2706
+ transform:scale(.9);
2707
+ }
2708
+
2709
+ 100%{
2710
+ opacity:0;
2711
+ transform:scale(1.75);
2712
+ }
2713
+ }
2714
+
2715
2715
  .tds-loading-spinner{
2716
2716
  --tds-loading-spinner-size:1.25em;
2717
2717