@planningcenter/tapestry 3.2.2-rc.10 → 3.2.2-rc.12

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 +1090 -1090
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1090 -1090
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,219 +1,396 @@
1
- .tds-checkbox{
2
- --tds-checkbox-font-size:var(--t-font-size-md);
3
- --tds-checkbox-cursor:pointer;
4
- --tds-checkbox-line-height:1.4;
5
- --tds-checkbox-transition-property:background-color, border-color;
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
6
6
 
7
- --tds-checkbox-input-size:var(--t-element-size-md);
8
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
- --tds-checkbox-input-border-color:var(--t-form-border-color);
10
- --tds-checkbox-input-background-color:transparent;
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:var(--t-surface-color-canvas);
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;
11
25
 
12
- --tds-checkbox-input-icon:none;
13
- --tds-checkbox-input-icon-visibility:hidden;
14
- --tds-checkbox-input-icon-opacity:0;
15
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
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-bottom-border-color);
16
28
 
17
- --tds-checkbox-label-color:var(--t-form-color);
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);
18
32
 
19
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
- --tds-checkbox-description-line-height:1.35;
21
- --tds-checkbox-description-color:var(--t-text-color-secondary);
22
- --tds-checkbox-description-invalid-icon-display:none;
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);
35
+
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);
39
+
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);
45
+ }
46
+
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
49
+ }
50
+
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));
55
+ }
56
+ }
57
+
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-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
+ }
76
+ }
77
+ }
78
+
79
+ .tds-page-header{
80
+ display:flex;
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
+ }
87
+
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
91
+
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
94
+ }
95
+
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
98
+ }
99
+
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
+ display:flex;
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
107
+ }
108
+
109
+ :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{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
117
+ }
118
+
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
127
+ text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
138
+ }
139
+
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ }
146
+
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
152
+
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
157
+
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
164
+
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
167
+ }
168
+
169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
172
+ }
173
+
174
+ :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{
175
+ position:absolute;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
180
+ content:"";
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
183
+ }
184
+
185
+ @media (prefers-reduced-motion: no-preference){
186
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
+ animation:indicator-pulse 1.25s ease infinite;
188
+ }
189
+ }
190
+
191
+ .tds-page-header__title-bar{
192
+ display:flex;
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
195
+ align-items:flex-start;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
198
+ }
199
+
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
202
+ }
203
+
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
207
+
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
215
+ }
216
+
217
+ @media (min-width: 960px){
218
+ .tds-page-header__primary{
219
+ flex:1 1 max-content;
220
+ width:auto;
221
+ min-width:0;
222
+ max-width:100%;
223
+ }
224
+
225
+ .tds-page-header__title-bar,
226
+ .tds-page-header--profile .tds-page-header__title-bar{
227
+ flex-flow:row nowrap;
228
+ row-gap:12px;
229
+ align-items:flex-start;
230
+ }
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
233
+ }
234
+
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
237
+ }
238
+ }
239
+
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
244
+ }
245
+
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
251
+
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
257
+
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
262
+ }
263
+
264
+ .tds-radio{
265
+ --tds-radio-font-size:var(--t-font-size-md);
266
+ --tds-radio-cursor:pointer;
267
+ --tds-radio-line-height:1.4;
268
+ --tds-radio-transition-property:border-width;
269
+
270
+ --tds-radio-input-size:var(--t-element-size-md);
271
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
272
+ --tds-radio-input-border-color:var(--t-form-border-color);
273
+ --tds-radio-input-border-width:var(--t-form-border-width);
274
+ --tds-radio-input-background-color:transparent;
275
+
276
+ --tds-radio-label-color:var(--t-form-color);
277
+
278
+ --tds-radio-description-font-size:var(--t-font-size-sm);
279
+ --tds-radio-description-line-height:1.35;
280
+ --tds-radio-description-color:var(--t-text-color-secondary);
23
281
 
24
282
  position:relative;
25
283
  display:inline-grid;
26
284
  grid-template-columns:auto;
27
285
  grid-auto-columns:1fr;
28
286
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
- line-height:var(--tds-checkbox-line-height);
30
- cursor:var(--tds-checkbox-cursor);
287
+ line-height:var(--tds-radio-line-height);
288
+ cursor:var(--tds-radio-cursor);
31
289
  -webkit-user-select:none;
32
290
  -moz-user-select:none;
33
291
  user-select:none;
34
292
  }
35
293
 
36
- .tds-checkbox label{
294
+ .tds-radio label{
37
295
  grid-area:1 / 2;
38
- font-size:var(--tds-checkbox-font-size);
296
+ font-size:var(--tds-radio-font-size);
39
297
  font-weight:var(--t-font-weight-normal);
40
- color:var(--tds-checkbox-label-color);
41
- cursor:var(--tds-checkbox-cursor);
42
- }
43
-
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
298
+ color:var(--tds-radio-label-color);
299
+ cursor:var(--tds-radio-cursor);
46
300
  }
47
301
 
48
- .tds-checkbox input[type="checkbox"]{
302
+ .tds-radio input[type="radio"]{
49
303
  position:relative;
50
304
  width:1em;
51
305
  height:1em;
52
306
  margin:calc((1lh - 1em) / 2) 0 0;
53
- font-size:var(--tds-checkbox-font-size);
307
+ font-size:var(--tds-radio-font-size);
54
308
  line-height:inherit;
55
309
  -webkit-appearance:none;
56
310
  -moz-appearance:none;
57
311
  appearance:none;
58
- cursor:var(--tds-checkbox-cursor);
59
- background-color:var(--tds-checkbox-input-background-color);
60
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
- border-radius:var(--tds-checkbox-input-border-radius);
312
+ cursor:var(--tds-radio-cursor);
313
+ background-color:var(--tds-radio-input-background-color);
314
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
315
+ border-radius:var(--tds-radio-input-border-radius);
62
316
  transition-timing-function:var(--t-ease-in-out);
63
317
  transition-duration:var(--t-duration-200);
64
- transition-property:var(--tds-checkbox-transition-property);
318
+ transition-property:var(--tds-radio-transition-property);
65
319
  }
66
320
 
67
- :is(.tds-checkbox input[type="checkbox"])::before{
68
- position:absolute;
69
- top:50%;
70
- left:50%;
71
- visibility:var(--tds-checkbox-input-icon-visibility);
72
- width:100%;
73
- height:100%;
74
- content:"";
75
- background-color:var(--tds-checkbox-input-icon-fill);
76
- border-radius:var(--tds-checkbox-input-border-radius);
77
- opacity:var(--tds-checkbox-input-icon-opacity);
78
- -webkit-mask-image:var(--tds-checkbox-input-icon);
79
- mask-image:var(--tds-checkbox-input-icon);
80
- -webkit-mask-repeat:no-repeat;
81
- mask-repeat:no-repeat;
82
- -webkit-mask-size:contain;
83
- mask-size:contain;
84
- transform:translate(-50%, -50%);
85
- }
86
-
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
321
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
322
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
323
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
324
  }
91
325
 
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
326
+ :is(.tds-radio input[type="radio"]):focus-visible{
93
327
  outline:var(--t-focus-ring-outline);
94
328
  outline-offset:var(--t-focus-ring-offset);
95
329
  }
96
330
 
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
331
+ :is(.tds-radio input[type="radio"]):disabled{
98
332
  pointer-events:none;
99
333
  }
100
334
 
101
335
  @media (prefers-reduced-motion: reduce){
102
336
 
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
- }
106
- }
107
-
108
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
- --tds-checkbox-input-icon-visibility:visible;
112
- --tds-checkbox-input-icon-opacity:1;
113
- }
114
-
115
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
- }
119
-
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
- }
123
-
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
126
- }
127
-
128
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
- --tds-checkbox-description-color:var(--t-text-color-status-error);
131
- --tds-checkbox-description-invalid-icon-display:inline-block;
132
- }
133
-
134
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
337
+ .tds-radio input[type="radio"]{
338
+ --tds-radio-transition-property:none;
339
+ }
137
340
  }
138
341
 
139
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
140
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
342
+ .tds-radio:has(input:checked){
343
+ --tds-radio-input-background-color:var(--t-form-background-color);
344
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
345
+ --tds-radio-input-border-width:4px;
346
+ }
347
+
348
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
349
+ --tds-radio-input-background-color:var(--t-form-background-color);
350
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
142
351
  }
143
352
 
144
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
145
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
147
- }
353
+ .tds-radio:has(input:user-invalid){
354
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
355
+ }
148
356
 
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
357
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
358
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
359
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
153
360
  }
154
361
 
155
- .tds-checkbox:has(input:disabled){
156
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
362
+ .tds-radio:has(input:disabled){
363
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
364
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
158
365
 
159
- --tds-checkbox-label-color:var(--t-form-color-disabled);
160
- --tds-checkbox-description-color:var(--t-form-color-disabled);
161
- --tds-checkbox-cursor:not-allowed;
366
+ --tds-radio-label-color:var(--t-form-color-disabled);
367
+ --tds-radio-description-color:var(--t-form-color-disabled);
368
+ --tds-radio-cursor:not-allowed;
162
369
  }
163
370
 
164
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
371
+ .tds-radio:has(input:disabled) input:checked{
372
+ --tds-radio-input-background-color:var(--t-form-background-color);
373
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
166
374
  }
167
375
 
168
- .tds-checkbox-description{
376
+ .tds-radio-description{
169
377
  display:flex;
170
378
  grid-area:2 / 2;
171
379
  gap:var(--t-spacing-half);
172
380
  align-items:flex-start;
173
381
  margin:0;
174
- font-size:var(--tds-checkbox-description-font-size);
175
- line-height:var(--tds-checkbox-description-line-height);
176
- color:var(--tds-checkbox-description-color);
382
+ font-size:var(--tds-radio-description-font-size);
383
+ line-height:var(--tds-radio-description-line-height);
384
+ color:var(--tds-radio-description-color);
177
385
  cursor:text;
178
386
  }
179
387
 
180
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
- display:var(--tds-checkbox-description-invalid-icon-display);
182
- flex-shrink:0;
183
- margin-top:calc(.5lh - .5em);
184
- line-height:var(--tds-checkbox-description-line-height);
185
- }
186
-
187
- .tds-checkbox--sm{
188
- --tds-checkbox-line-height:1.35;
189
- --tds-checkbox-input-size:var(--t-element-size-sm);
190
- --tds-checkbox-font-size:var(--t-font-size-sm);
191
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
- --tds-checkbox-description-line-height:1.3;
193
- }
194
-
195
-
196
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
197
- -webkit-appearance:none;
198
- appearance:none;
199
- }
200
-
201
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
202
- inline-size:1em;
203
- block-size:2em;
204
- }
205
-
206
- @supports (field-sizing: content){
207
- .tds-input--auto-width{
208
- inline-size:-moz-fit-content;
209
- inline-size:fit-content;
210
- min-inline-size:min(100%, 122px);
211
- }
212
-
213
- .tds-input--auto-width input{
214
- field-sizing:content;
215
- inline-size:auto;
216
- }
388
+ .tds-radio--sm{
389
+ --tds-radio-line-height:1.35;
390
+ --tds-radio-input-size:var(--t-element-size-sm);
391
+ --tds-radio-font-size:var(--t-font-size-sm);
392
+ --tds-radio-description-font-size:var(--t-font-size-xs);
393
+ --tds-radio-description-line-height:1.3;
217
394
  }
218
395
 
219
396
 
@@ -578,592 +755,451 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
578
755
  flex-direction:column;
579
756
  }
580
757
 
581
- @layer t-critical{
582
- tds-page-header:not(.hydrated){
583
- display:none;
584
- }
585
- }
586
-
587
- @layer t-component{
588
- .tds-page-header{
589
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
590
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
591
- --tds-page-header-color:var(--t-text-color);
592
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
593
- --tds-page-header-headline-color:var(--t-text-color-headline);
594
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
595
- --tds-page-header-padding-x:var(--t-spacing-2);
596
- --tds-page-header-padding-y:var(--t-spacing-2);
597
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
598
- --tds-page-header-nav-gap:var(--t-spacing-1);
599
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
600
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
601
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
602
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
603
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
604
- --tds-page-header-nav-item-border-width:1px;
605
-
606
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
607
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
608
-
609
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
610
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
611
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
612
-
613
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
614
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
615
-
616
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
617
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
618
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
619
-
620
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
621
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
622
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
623
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
624
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
625
- }
626
-
627
- .tds-page-header--profile{
628
- --tds-page-header-padding-y:20px;
629
- }
630
-
631
- @supports (color: light-dark(#fff, #000)){
632
- .tds-page-header{
633
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
634
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
635
- }
636
- }
758
+ .tds-radio-group{
759
+ --tds-radio-group-font-size:var(--t-font-size-md);
760
+ --tds-radio-group-line-height:1.4;
761
+ --tds-radio-group-gap:var(--t-spacing-1);
637
762
 
638
- @media (min-width: 600px){
639
- .tds-page-header{
640
- --tds-page-header-background-color:var(--t-surface-color-canvas);
641
- --tds-page-header-color:var(--t-text-color-secondary);
642
- --tds-page-header-bottom-border-color:var(--t-border-color);
643
- --tds-page-header-padding-x:var(--t-spacing-3);
644
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
645
- --tds-page-header-nav-gap:var(--t-spacing-half);
646
- --tds-page-header-nav-background:transparent;
647
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
648
- --tds-page-header-nav-item-border-width:1px;
649
- --tds-page-header-nav-item-color:var(--t-text-color);
650
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
651
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
652
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
653
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
654
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
655
- }
656
- }
657
- }
763
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
658
764
 
659
- .tds-page-header{
765
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
766
+ --tds-radio-group-description-line-height:1.35;
767
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
768
+ --tds-radio-group-description-invalid-icon-display:none;
660
769
  display:flex;
661
770
  flex-direction:column;
662
- padding-top:var(--tds-page-header-padding-y);
663
- color:var(--tds-page-header-color);
664
- background:var(--tds-page-header-background-color);
665
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
666
- }
667
-
668
- .tds-page-header:not(.has-nav){
669
- padding-bottom:var(--tds-page-header-padding-y);
670
- }
671
-
672
- .tds-page-header.inactive{
673
- background:var(--tds-page-header-background-color-inactive);
674
- }
675
-
676
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
677
- width:100%;
678
- }
679
-
680
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
681
- display:flex;
682
- flex-flow:row wrap;
683
- gap:var(--t-spacing-half) var(--t-spacing-1);
684
- align-items:flex-start;
685
- justify-content:flex-start;
686
- min-width:0;
687
- }
688
-
689
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
690
- display:flex;
691
- gap:var(--tds-page-header-nav-gap);
692
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
693
- margin:0 0 -1px;
694
- overflow:auto;
695
- list-style:none;
696
- background:var(--tds-page-header-nav-background);
697
- }
698
-
699
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
700
- position:relative;
701
- display:inline-flex;
702
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
703
- font-size:var(--t-font-size-sm);
704
- line-height:22px;
705
- color:var(--tds-page-header-nav-item-color);
706
- white-space:nowrap;
707
- text-decoration:none;
708
- -webkit-appearance:none;
709
- -moz-appearance:none;
710
- appearance:none;
711
- cursor:pointer;
712
- outline-offset:-2px;
713
- background-color:var(--tds-page-header-nav-item-background-color);
714
- background-clip:padding-box;
715
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
716
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
717
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
718
- }
719
-
720
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
721
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
722
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
723
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
724
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
725
- }
771
+ gap:var(--tds-radio-group-gap);
772
+ padding:0;
773
+ margin:0;
726
774
 
727
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
728
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
729
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
730
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
731
- }
775
+ font-size:var(--tds-radio-group-font-size);
776
+ line-height:var(--tds-radio-group-line-height);
777
+ border:0;
778
+ }
732
779
 
733
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
734
- background-color:var(--tds-page-header-nav-item-background-color-active);
735
- border-color:var(--tds-page-header-nav-item-border-color-active);
736
- }
780
+ .tds-radio-group legend{
781
+ padding:0;
782
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
783
+ }
737
784
 
738
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
739
- color:var(--tds-page-header-nav-item-color-disabled);
740
- cursor:not-allowed;
741
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
742
- opacity:1;
743
- }
785
+ .tds-radio-group:has(.tds-radio-group-description){
786
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
787
+ }
744
788
 
745
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
746
- position:relative;
789
+ .tds-radio-group[aria-invalid="true"]{
790
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
791
+ --tds-radio-group-description-invalid-icon-display:inline-block;
792
+ }
793
+
794
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
795
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
747
796
  }
748
797
 
749
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
750
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
751
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
798
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
799
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
800
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
752
801
  }
753
802
 
754
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
755
- position:absolute;
756
- top:-5px;
757
- right:-2px;
758
- width:10px;
759
- height:10px;
760
- content:"";
761
- background:var(--tds-page-header-nav-item-indicator-color);
762
- border-radius:50%;
803
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
804
+ --tds-radio-input-background-color:var(--t-form-background-color);
763
805
  }
764
806
 
765
- @media (prefers-reduced-motion: no-preference){
766
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
767
- animation:indicator-pulse 1.25s ease infinite;
768
- }
769
- }
807
+ .tds-radio-group:has(input:required) legend::after{
808
+ margin-left:.25ch;
809
+ color:var(--t-text-color-status-error);
810
+ content:"*";
811
+ }
770
812
 
771
- .tds-page-header__title-bar{
813
+ .tds-radio-group-fields{
772
814
  display:flex;
773
815
  flex-direction:column;
774
- gap:var(--t-spacing-2) var(--t-spacing-1);
816
+ gap:var(--tds-radio-group-gap);
775
817
  align-items:flex-start;
776
- justify-content:space-between;
777
- padding:0 var(--tds-page-header-padding-x);
778
818
  }
779
819
 
780
- .tds-page-header--profile > .tds-page-header__title-bar{
781
- align-items:center;
820
+ .tds-radio-group-description{
821
+ display:flex;
822
+ gap:var(--t-spacing-half);
823
+ align-items:flex-start;
824
+ margin:0;
825
+ font-size:var(--tds-radio-group-description-font-size);
826
+ line-height:var(--tds-radio-group-description-line-height);
827
+ color:var(--tds-radio-group-description-color);
828
+ cursor:text;
829
+ }
830
+
831
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
832
+ display:var(--tds-radio-group-description-invalid-icon-display);
833
+ flex-shrink:0;
834
+ margin-top:calc(.5lh - .5em);
835
+ line-height:var(--tds-radio-group-description-line-height);
782
836
  }
783
837
 
784
- .tds-page-header__primary{
785
- width:100%;
838
+ .tds-radio-group--sm{
839
+ --tds-radio-group-line-height:1.35;
840
+ --tds-radio-group-font-size:var(--t-font-size-sm);
841
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
842
+ --tds-radio-group-description-line-height:1.3;
786
843
  }
787
844
 
788
- .tds-page-header__primary h1{
845
+ .tds-toggle-switch{
846
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
847
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
848
+ --tds-toggle-switch-cursor:pointer;
849
+ --tds-toggle-switch-display:inline-grid;
850
+ --tds-toggle-switch-line-height:1.4;
851
+
852
+ --tds-toggle-switch-label-color:var(--t-form-color);
853
+
854
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
855
+ --tds-toggle-switch-track-outline:none;
856
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
857
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
858
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
859
+
860
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
861
+ --tds-toggle-switch-thumb-transform:translateX(0);
862
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
863
+
864
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
865
+ --tds-toggle-switch-description-line-height:1.35;
866
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
867
+ position:relative;
868
+
869
+ display:var(--tds-toggle-switch-display);
870
+ grid-template-columns:auto;
871
+ grid-auto-columns:1fr;
872
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
873
+ -webkit-user-select:none;
874
+ -moz-user-select:none;
875
+ user-select:none;
876
+ }
877
+
878
+ .tds-toggle-switch input[type="checkbox"]{
879
+ position:absolute;
880
+ width:var(--tds-toggle-switch-track-width);
881
+ height:var(--tds-toggle-switch-track-height);
789
882
  margin:0;
790
- font-size:var(--tds-page-header-headline-font-size);
883
+ -webkit-appearance:none;
884
+ -moz-appearance:none;
885
+ appearance:none;
886
+ cursor:var(--tds-toggle-switch-cursor);
887
+ outline:var(--tds-toggle-switch-track-outline);
888
+ outline-offset:var(--t-focus-ring-offset);
889
+ background-color:transparent;
890
+ border:0;
891
+ border-radius:var(--t-border-radius-round);
892
+ }
893
+
894
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
895
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
896
+ }
897
+
898
+ .tds-toggle-switch label{
899
+ display:inline-flex;
900
+ grid-area:1 / 2;
901
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
902
+ column-gap:var(--tds-toggle-switch-column-gap);
903
+ margin-top:-.09375em;
904
+ font-size:var(--tds-toggle-switch-font-size);
791
905
  font-weight:var(--t-font-weight-normal);
792
- line-height:32px;
793
- color:var(--tds-page-header-headline-color);
794
- overflow-wrap:break-word;
906
+ line-height:var(--tds-toggle-switch-line-height);
907
+ color:var(--tds-toggle-switch-label-color);
908
+ cursor:var(--tds-toggle-switch-cursor);
795
909
  }
796
910
 
797
- @media (min-width: 960px){
798
- .tds-page-header__primary{
799
- flex:1 1 max-content;
800
- width:auto;
801
- min-width:0;
802
- max-width:100%;
911
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
912
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
803
913
  }
804
914
 
805
- .tds-page-header__title-bar,
806
- .tds-page-header--profile .tds-page-header__title-bar{
807
- flex-flow:row nowrap;
808
- row-gap:12px;
809
- align-items:flex-start;
915
+ .tds-toggle-switch:has(input:checked){
916
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
917
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
810
918
  }
811
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
812
- width:auto;
813
- }
814
919
 
815
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
816
- justify-content:flex-end;
920
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
921
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
817
922
  }
818
- }
819
923
 
820
- .tds-page-header-phone,
821
- .tds-page-header-email{
822
- color:var(--tds-page-header-color);
823
- white-space:nowrap;
824
- }
924
+ .tds-toggle-switch:has(input:disabled){
925
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
926
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
927
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
928
+ --tds-toggle-switch-cursor:not-allowed;
929
+ }
825
930
 
826
- .tds-page-header-email{
827
- max-width:100%;
828
- overflow:hidden;
829
- text-overflow:ellipsis;
931
+ .tds-toggle-switch-track{
932
+ position:relative;
933
+ flex-shrink:0;
934
+ width:var(--tds-toggle-switch-track-width);
935
+ height:var(--tds-toggle-switch-track-height);
936
+ background-color:var(--tds-toggle-switch-track-background-color);
937
+ border-radius:var(--t-border-radius-round);
938
+ transition:var(--tds-toggle-switch-track-transition);
830
939
  }
831
940
 
832
- @keyframes indicator-pulse{
833
- 0%{
834
- opacity:.3;
835
- transform:scale(.9);
941
+ .tds-toggle-switch-track::before{
942
+ position:absolute;
943
+ top:var(--t-spacing-fourth);
944
+ left:var(--t-spacing-fourth);
945
+ width:var(--tds-toggle-switch-thumb-size);
946
+ height:var(--tds-toggle-switch-thumb-size);
947
+ content:"";
948
+ background-color:#fff;
949
+ border-radius:var(--t-border-radius-round);
950
+ transform:var(--tds-toggle-switch-thumb-transform);
951
+ transition:var(--tds-toggle-switch-thumb-transition);
836
952
  }
837
953
 
838
- 100%{
839
- opacity:0;
840
- transform:scale(1.75);
954
+ @media (prefers-reduced-motion: reduce){
955
+
956
+ .tds-toggle-switch-track{
957
+ --tds-toggle-switch-track-transition:none;
958
+ --tds-toggle-switch-thumb-transition:none;
959
+ }
841
960
  }
961
+
962
+ .tds-toggle-switch-description{
963
+ display:flex;
964
+ grid-area:2 / 2;
965
+ align-items:flex-start;
966
+ margin:0;
967
+ font-size:var(--tds-toggle-switch-description-font-size);
968
+ line-height:var(--tds-toggle-switch-description-line-height);
969
+ color:var(--tds-toggle-switch-description-color);
970
+ cursor:text;
842
971
  }
843
972
 
844
- .tds-radio{
845
- --tds-radio-font-size:var(--t-font-size-md);
846
- --tds-radio-cursor:pointer;
847
- --tds-radio-line-height:1.4;
848
- --tds-radio-transition-property:border-width;
973
+ .tds-toggle-switch--sm{
974
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
975
+ --tds-toggle-switch-line-height:1.35;
976
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
977
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
978
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
979
+ --tds-toggle-switch-description-line-height:1.3;
980
+ }
981
+
982
+ .tds-toggle-switch--hide-label{
983
+ --tds-toggle-switch-display:inline-flex;
984
+ }
985
+
986
+ .tds-checkbox{
987
+ --tds-checkbox-font-size:var(--t-font-size-md);
988
+ --tds-checkbox-cursor:pointer;
989
+ --tds-checkbox-line-height:1.4;
990
+ --tds-checkbox-transition-property:background-color, border-color;
849
991
 
850
- --tds-radio-input-size:var(--t-element-size-md);
851
- --tds-radio-input-border-radius:var(--t-border-radius-round);
852
- --tds-radio-input-border-color:var(--t-form-border-color);
853
- --tds-radio-input-border-width:var(--t-form-border-width);
854
- --tds-radio-input-background-color:transparent;
992
+ --tds-checkbox-input-size:var(--t-element-size-md);
993
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
994
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
995
+ --tds-checkbox-input-background-color:transparent;
855
996
 
856
- --tds-radio-label-color:var(--t-form-color);
997
+ --tds-checkbox-input-icon:none;
998
+ --tds-checkbox-input-icon-visibility:hidden;
999
+ --tds-checkbox-input-icon-opacity:0;
1000
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
857
1001
 
858
- --tds-radio-description-font-size:var(--t-font-size-sm);
859
- --tds-radio-description-line-height:1.35;
860
- --tds-radio-description-color:var(--t-text-color-secondary);
1002
+ --tds-checkbox-label-color:var(--t-form-color);
1003
+
1004
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1005
+ --tds-checkbox-description-line-height:1.35;
1006
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1007
+ --tds-checkbox-description-invalid-icon-display:none;
861
1008
 
862
1009
  position:relative;
863
1010
  display:inline-grid;
864
1011
  grid-template-columns:auto;
865
1012
  grid-auto-columns:1fr;
866
1013
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
867
- line-height:var(--tds-radio-line-height);
868
- cursor:var(--tds-radio-cursor);
1014
+ line-height:var(--tds-checkbox-line-height);
1015
+ cursor:var(--tds-checkbox-cursor);
869
1016
  -webkit-user-select:none;
870
1017
  -moz-user-select:none;
871
1018
  user-select:none;
872
1019
  }
873
1020
 
874
- .tds-radio label{
1021
+ .tds-checkbox label{
875
1022
  grid-area:1 / 2;
876
- font-size:var(--tds-radio-font-size);
1023
+ font-size:var(--tds-checkbox-font-size);
877
1024
  font-weight:var(--t-font-weight-normal);
878
- color:var(--tds-radio-label-color);
879
- cursor:var(--tds-radio-cursor);
1025
+ color:var(--tds-checkbox-label-color);
1026
+ cursor:var(--tds-checkbox-cursor);
880
1027
  }
881
1028
 
882
- .tds-radio input[type="radio"]{
1029
+ .tds-checkbox tds-indeterminate{
1030
+ display:flex;
1031
+ }
1032
+
1033
+ .tds-checkbox input[type="checkbox"]{
883
1034
  position:relative;
884
1035
  width:1em;
885
1036
  height:1em;
886
1037
  margin:calc((1lh - 1em) / 2) 0 0;
887
- font-size:var(--tds-radio-font-size);
1038
+ font-size:var(--tds-checkbox-font-size);
888
1039
  line-height:inherit;
889
1040
  -webkit-appearance:none;
890
1041
  -moz-appearance:none;
891
1042
  appearance:none;
892
- cursor:var(--tds-radio-cursor);
893
- background-color:var(--tds-radio-input-background-color);
894
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
895
- border-radius:var(--tds-radio-input-border-radius);
1043
+ cursor:var(--tds-checkbox-cursor);
1044
+ background-color:var(--tds-checkbox-input-background-color);
1045
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1046
+ border-radius:var(--tds-checkbox-input-border-radius);
896
1047
  transition-timing-function:var(--t-ease-in-out);
897
1048
  transition-duration:var(--t-duration-200);
898
- transition-property:var(--tds-radio-transition-property);
1049
+ transition-property:var(--tds-checkbox-transition-property);
899
1050
  }
900
1051
 
901
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
902
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
903
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1052
+ :is(.tds-checkbox input[type="checkbox"])::before{
1053
+ position:absolute;
1054
+ top:50%;
1055
+ left:50%;
1056
+ visibility:var(--tds-checkbox-input-icon-visibility);
1057
+ width:100%;
1058
+ height:100%;
1059
+ content:"";
1060
+ background-color:var(--tds-checkbox-input-icon-fill);
1061
+ border-radius:var(--tds-checkbox-input-border-radius);
1062
+ opacity:var(--tds-checkbox-input-icon-opacity);
1063
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1064
+ mask-image:var(--tds-checkbox-input-icon);
1065
+ -webkit-mask-repeat:no-repeat;
1066
+ mask-repeat:no-repeat;
1067
+ -webkit-mask-size:contain;
1068
+ mask-size:contain;
1069
+ transform:translate(-50%, -50%);
904
1070
  }
905
1071
 
906
- :is(.tds-radio input[type="radio"]):focus-visible{
1072
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1073
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1074
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1075
+ }
1076
+
1077
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
907
1078
  outline:var(--t-focus-ring-outline);
908
1079
  outline-offset:var(--t-focus-ring-offset);
909
1080
  }
910
1081
 
911
- :is(.tds-radio input[type="radio"]):disabled{
1082
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
912
1083
  pointer-events:none;
913
1084
  }
914
1085
 
915
1086
  @media (prefers-reduced-motion: reduce){
916
1087
 
917
- .tds-radio input[type="radio"]{
918
- --tds-radio-transition-property:none;
919
- }
920
- }
921
-
922
- .tds-radio:has(input:checked){
923
- --tds-radio-input-background-color:var(--t-form-background-color);
924
- --tds-radio-input-border-color:var(--t-border-color-control-info);
925
- --tds-radio-input-border-width:4px;
926
- }
927
-
928
- .tds-radio:has(input:checked) input:hover:not(:disabled){
929
- --tds-radio-input-background-color:var(--t-form-background-color);
930
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
931
- }
932
-
933
- .tds-radio:has(input:user-invalid){
934
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1088
+ .tds-checkbox input[type="checkbox"]{
1089
+ --tds-checkbox-transition-property:none;
935
1090
  }
936
-
937
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
938
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
939
- --tds-radio-input-background-color:var(--t-form-background-color-error);
940
1091
  }
941
1092
 
942
- .tds-radio:has(input:disabled){
943
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
-
946
- --tds-radio-label-color:var(--t-form-color-disabled);
947
- --tds-radio-description-color:var(--t-form-color-disabled);
948
- --tds-radio-cursor:not-allowed;
1093
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1094
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1095
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1096
+ --tds-checkbox-input-icon-visibility:visible;
1097
+ --tds-checkbox-input-icon-opacity:1;
949
1098
  }
950
1099
 
951
- .tds-radio:has(input:disabled) input:checked{
952
- --tds-radio-input-background-color:var(--t-form-background-color);
953
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1100
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1101
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1102
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
954
1103
  }
955
1104
 
956
- .tds-radio-description{
957
- display:flex;
958
- grid-area:2 / 2;
959
- gap:var(--t-spacing-half);
960
- align-items:flex-start;
961
- margin:0;
962
- font-size:var(--tds-radio-description-font-size);
963
- line-height:var(--tds-radio-description-line-height);
964
- color:var(--tds-radio-description-color);
965
- cursor:text;
966
- }
967
-
968
- .tds-radio--sm{
969
- --tds-radio-line-height:1.35;
970
- --tds-radio-input-size:var(--t-element-size-sm);
971
- --tds-radio-font-size:var(--t-font-size-sm);
972
- --tds-radio-description-font-size:var(--t-font-size-xs);
973
- --tds-radio-description-line-height:1.3;
974
- }
975
-
976
- .tds-radio-group{
977
- --tds-radio-group-font-size:var(--t-font-size-md);
978
- --tds-radio-group-line-height:1.4;
979
- --tds-radio-group-gap:var(--t-spacing-1);
980
-
981
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
982
-
983
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
984
- --tds-radio-group-description-line-height:1.35;
985
- --tds-radio-group-description-color:var(--t-text-color-secondary);
986
- --tds-radio-group-description-invalid-icon-display:none;
987
- display:flex;
988
- flex-direction:column;
989
- gap:var(--tds-radio-group-gap);
990
- padding:0;
991
- margin:0;
992
-
993
- font-size:var(--tds-radio-group-font-size);
994
- line-height:var(--tds-radio-group-line-height);
995
- border:0;
996
- }
997
-
998
- .tds-radio-group legend{
999
- padding:0;
1000
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1001
- }
1002
-
1003
- .tds-radio-group:has(.tds-radio-group-description){
1004
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1005
- }
1006
-
1007
- .tds-radio-group[aria-invalid="true"]{
1008
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1009
- --tds-radio-group-description-invalid-icon-display:inline-block;
1105
+ .tds-checkbox:has(input:checked){
1106
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1010
1107
  }
1011
1108
 
1012
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1013
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1014
- }
1015
-
1016
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1017
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1018
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1019
- }
1020
-
1021
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1022
- --tds-radio-input-background-color:var(--t-form-background-color);
1023
- }
1024
-
1025
- .tds-radio-group:has(input:required) legend::after{
1026
- margin-left:.25ch;
1027
- color:var(--t-text-color-status-error);
1028
- content:"*";
1029
- }
1030
-
1031
- .tds-radio-group-fields{
1032
- display:flex;
1033
- flex-direction:column;
1034
- gap:var(--tds-radio-group-gap);
1035
- align-items:flex-start;
1036
- }
1037
-
1038
- .tds-radio-group-description{
1039
- display:flex;
1040
- gap:var(--t-spacing-half);
1041
- align-items:flex-start;
1042
- margin:0;
1043
- font-size:var(--tds-radio-group-description-font-size);
1044
- line-height:var(--tds-radio-group-description-line-height);
1045
- color:var(--tds-radio-group-description-color);
1046
- cursor:text;
1047
- }
1048
-
1049
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1050
- display:var(--tds-radio-group-description-invalid-icon-display);
1051
- flex-shrink:0;
1052
- margin-top:calc(.5lh - .5em);
1053
- line-height:var(--tds-radio-group-description-line-height);
1109
+ .tds-checkbox:has(input:indeterminate){
1110
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1054
1111
  }
1055
1112
 
1056
- .tds-radio-group--sm{
1057
- --tds-radio-group-line-height:1.35;
1058
- --tds-radio-group-font-size:var(--t-font-size-sm);
1059
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1060
- --tds-radio-group-description-line-height:1.3;
1061
- }
1062
-
1063
- .tds-input:has(textarea){
1064
- --tds-input-padding-block:6px;
1065
- --tds-input-resizer-size:var(--t-element-size-sm);
1066
- --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");
1067
- }
1068
-
1069
- @supports (x: attr(x type(*))){
1070
-
1071
- .tds-input:has(textarea){
1072
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1073
- }
1113
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1114
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1115
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1116
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1074
1117
  }
1075
-
1076
- .tds-input.tds-textarea--resize-vertical textarea{
1077
- resize:vertical;
1078
- }
1079
-
1080
- .tds-input.tds-textarea--resize-none textarea{
1081
- resize:none;
1118
+
1119
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1120
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1121
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1082
1122
  }
1083
1123
 
1084
- .tds-input.tds-textarea--resize-auto textarea{
1085
- resize:vertical;
1124
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1125
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1126
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1086
1127
  }
1087
1128
 
1088
- @supports (field-sizing: content){
1089
- .tds-input.tds-textarea--resize-auto textarea{
1090
- field-sizing:content;
1091
- resize:none;
1129
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1130
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1131
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1092
1132
  }
1133
+
1134
+ .tds-checkbox:has(input:required) label::after{
1135
+ margin-left:.25ch;
1136
+ color:var(--t-text-color-status-error);
1137
+ content:"*";
1093
1138
  }
1094
1139
 
1095
- .tds-input textarea{
1096
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1097
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1098
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1099
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1100
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1101
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1102
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1103
- --tds-input-scrollbar-thumb-border-radius:999px;
1104
- --tds-input-scrollbar-thumb-border-width:3px;
1105
- --tds-input-scrollbar-track-margin-block:.125rem;
1106
- scrollbar-color:initial;
1107
- transition-timing-function:var(--t-ease-in-out);
1108
- transition-duration:var(--t-duration-200);
1109
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1110
- }
1140
+ .tds-checkbox:has(input:disabled){
1141
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1142
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1111
1143
 
1112
- @media (pointer: fine){
1113
- :is(.tds-input textarea)::-webkit-scrollbar{
1114
- width:12px;
1115
- height:12px;
1116
- cursor:default;
1117
- }
1144
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1145
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1146
+ --tds-checkbox-cursor:not-allowed;
1147
+ }
1118
1148
 
1119
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1120
- cursor:default;
1121
- background:var(--tds-input-scrollbar-thumb-color);
1122
- background-clip:content-box;
1123
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1124
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1149
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1150
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1125
1151
  }
1126
1152
 
1127
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1128
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1129
- }
1153
+ .tds-checkbox-description{
1154
+ display:flex;
1155
+ grid-area:2 / 2;
1156
+ gap:var(--t-spacing-half);
1157
+ align-items:flex-start;
1158
+ margin:0;
1159
+ font-size:var(--tds-checkbox-description-font-size);
1160
+ line-height:var(--tds-checkbox-description-line-height);
1161
+ color:var(--tds-checkbox-description-color);
1162
+ cursor:text;
1163
+ }
1130
1164
 
1131
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1132
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1133
- }
1165
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1166
+ display:var(--tds-checkbox-description-invalid-icon-display);
1167
+ flex-shrink:0;
1168
+ margin-top:calc(.5lh - .5em);
1169
+ line-height:var(--tds-checkbox-description-line-height);
1170
+ }
1134
1171
 
1135
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1136
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1137
- }
1172
+ .tds-checkbox--sm{
1173
+ --tds-checkbox-line-height:1.35;
1174
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1175
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1176
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1177
+ --tds-checkbox-description-line-height:1.3;
1178
+ }
1138
1179
 
1139
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1140
- background:var(--tds-input-scrollbar-surface-color);
1141
- }
1142
1180
 
1143
- :is(.tds-input textarea)::-webkit-resizer{
1144
- background:var(--tds-input-resizer-icon) no-repeat;
1145
- background-position:right bottom;
1146
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1181
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1182
+ -webkit-appearance:none;
1183
+ appearance:none;
1147
1184
  }
1148
1185
 
1149
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1150
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1151
- cursor:default;
1186
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1187
+ inline-size:1em;
1188
+ block-size:2em;
1152
1189
  }
1153
1190
 
1154
- @supports (-moz-appearance: none){
1155
- :is(.tds-input textarea){
1156
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1157
- scrollbar-width:thin;
1158
- }
1191
+ @supports (field-sizing: content){
1192
+ .tds-input--auto-width{
1193
+ inline-size:-moz-fit-content;
1194
+ inline-size:fit-content;
1195
+ min-inline-size:min(100%, 122px);
1196
+ }
1159
1197
 
1160
- @media (hover){
1161
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1162
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1163
- }
1164
- }
1165
- }
1198
+ .tds-input--auto-width input{
1199
+ field-sizing:content;
1200
+ inline-size:auto;
1166
1201
  }
1202
+ }
1167
1203
 
1168
1204
  .tds-select{
1169
1205
  --tds-select-border-color:var(--t-form-border-color);
@@ -1599,146 +1635,110 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1599
1635
  }
1600
1636
  }
1601
1637
 
1602
- .tds-toggle-switch{
1603
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1604
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1605
- --tds-toggle-switch-cursor:pointer;
1606
- --tds-toggle-switch-display:inline-grid;
1607
- --tds-toggle-switch-line-height:1.4;
1608
-
1609
- --tds-toggle-switch-label-color:var(--t-form-color);
1610
-
1611
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1612
- --tds-toggle-switch-track-outline:none;
1613
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1614
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1615
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1616
-
1617
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1618
- --tds-toggle-switch-thumb-transform:translateX(0);
1619
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1638
+ .tds-input:has(textarea){
1639
+ --tds-input-padding-block:6px;
1640
+ --tds-input-resizer-size:var(--t-element-size-sm);
1641
+ --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");
1642
+ }
1620
1643
 
1621
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1622
- --tds-toggle-switch-description-line-height:1.35;
1623
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1624
- position:relative;
1644
+ @supports (x: attr(x type(*))){
1625
1645
 
1626
- display:var(--tds-toggle-switch-display);
1627
- grid-template-columns:auto;
1628
- grid-auto-columns:1fr;
1629
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1630
- -webkit-user-select:none;
1631
- -moz-user-select:none;
1632
- user-select:none;
1646
+ .tds-input:has(textarea){
1647
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1633
1648
  }
1634
-
1635
- .tds-toggle-switch input[type="checkbox"]{
1636
- position:absolute;
1637
- width:var(--tds-toggle-switch-track-width);
1638
- height:var(--tds-toggle-switch-track-height);
1639
- margin:0;
1640
- -webkit-appearance:none;
1641
- -moz-appearance:none;
1642
- appearance:none;
1643
- cursor:var(--tds-toggle-switch-cursor);
1644
- outline:var(--tds-toggle-switch-track-outline);
1645
- outline-offset:var(--t-focus-ring-offset);
1646
- background-color:transparent;
1647
- border:0;
1648
- border-radius:var(--t-border-radius-round);
1649
1649
  }
1650
1650
 
1651
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1652
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1651
+ .tds-input.tds-textarea--resize-vertical textarea{
1652
+ resize:vertical;
1653
1653
  }
1654
1654
 
1655
- .tds-toggle-switch label{
1656
- display:inline-flex;
1657
- grid-area:1 / 2;
1658
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1659
- column-gap:var(--tds-toggle-switch-column-gap);
1660
- margin-top:-.09375em;
1661
- font-size:var(--tds-toggle-switch-font-size);
1662
- font-weight:var(--t-font-weight-normal);
1663
- line-height:var(--tds-toggle-switch-line-height);
1664
- color:var(--tds-toggle-switch-label-color);
1665
- cursor:var(--tds-toggle-switch-cursor);
1666
- }
1655
+ .tds-input.tds-textarea--resize-none textarea{
1656
+ resize:none;
1657
+ }
1667
1658
 
1668
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1669
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1670
- }
1659
+ .tds-input.tds-textarea--resize-auto textarea{
1660
+ resize:vertical;
1661
+ }
1671
1662
 
1672
- .tds-toggle-switch:has(input:checked){
1673
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1674
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1675
- }
1663
+ @supports (field-sizing: content){
1664
+ .tds-input.tds-textarea--resize-auto textarea{
1665
+ field-sizing:content;
1666
+ resize:none;
1667
+ }
1668
+ }
1676
1669
 
1677
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1678
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1670
+ .tds-input textarea{
1671
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1672
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1673
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1674
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1675
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1676
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1677
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1678
+ --tds-input-scrollbar-thumb-border-radius:999px;
1679
+ --tds-input-scrollbar-thumb-border-width:3px;
1680
+ --tds-input-scrollbar-track-margin-block:.125rem;
1681
+ scrollbar-color:initial;
1682
+ transition-timing-function:var(--t-ease-in-out);
1683
+ transition-duration:var(--t-duration-200);
1684
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1685
+ }
1686
+
1687
+ @media (pointer: fine){
1688
+ :is(.tds-input textarea)::-webkit-scrollbar{
1689
+ width:12px;
1690
+ height:12px;
1691
+ cursor:default;
1679
1692
  }
1680
1693
 
1681
- .tds-toggle-switch:has(input:disabled){
1682
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1683
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1684
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1685
- --tds-toggle-switch-cursor:not-allowed;
1686
- }
1694
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1695
+ cursor:default;
1696
+ background:var(--tds-input-scrollbar-thumb-color);
1697
+ background-clip:content-box;
1698
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1699
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1700
+ }
1701
+
1702
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1703
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1704
+ }
1687
1705
 
1688
- .tds-toggle-switch-track{
1689
- position:relative;
1690
- flex-shrink:0;
1691
- width:var(--tds-toggle-switch-track-width);
1692
- height:var(--tds-toggle-switch-track-height);
1693
- background-color:var(--tds-toggle-switch-track-background-color);
1694
- border-radius:var(--t-border-radius-round);
1695
- transition:var(--tds-toggle-switch-track-transition);
1696
- }
1706
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1707
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1708
+ }
1697
1709
 
1698
- .tds-toggle-switch-track::before{
1699
- position:absolute;
1700
- top:var(--t-spacing-fourth);
1701
- left:var(--t-spacing-fourth);
1702
- width:var(--tds-toggle-switch-thumb-size);
1703
- height:var(--tds-toggle-switch-thumb-size);
1704
- content:"";
1705
- background-color:#fff;
1706
- border-radius:var(--t-border-radius-round);
1707
- transform:var(--tds-toggle-switch-thumb-transform);
1708
- transition:var(--tds-toggle-switch-thumb-transition);
1709
- }
1710
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1711
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1712
+ }
1710
1713
 
1711
- @media (prefers-reduced-motion: reduce){
1714
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1715
+ background:var(--tds-input-scrollbar-surface-color);
1716
+ }
1712
1717
 
1713
- .tds-toggle-switch-track{
1714
- --tds-toggle-switch-track-transition:none;
1715
- --tds-toggle-switch-thumb-transition:none;
1716
- }
1717
- }
1718
+ :is(.tds-input textarea)::-webkit-resizer{
1719
+ background:var(--tds-input-resizer-icon) no-repeat;
1720
+ background-position:right bottom;
1721
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1722
+ }
1718
1723
 
1719
- .tds-toggle-switch-description{
1720
- display:flex;
1721
- grid-area:2 / 2;
1722
- align-items:flex-start;
1723
- margin:0;
1724
- font-size:var(--tds-toggle-switch-description-font-size);
1725
- line-height:var(--tds-toggle-switch-description-line-height);
1726
- color:var(--tds-toggle-switch-description-color);
1727
- cursor:text;
1728
- }
1724
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1725
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1726
+ cursor:default;
1727
+ }
1729
1728
 
1730
- .tds-toggle-switch--sm{
1731
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1732
- --tds-toggle-switch-line-height:1.35;
1733
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1734
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1735
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1736
- --tds-toggle-switch-description-line-height:1.3;
1737
- }
1729
+ @supports (-moz-appearance: none){
1730
+ :is(.tds-input textarea){
1731
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1732
+ scrollbar-width:thin;
1733
+ }
1738
1734
 
1739
- .tds-toggle-switch--hide-label{
1740
- --tds-toggle-switch-display:inline-flex;
1741
- }
1735
+ @media (hover){
1736
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1737
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1738
+ }
1739
+ }
1740
+ }
1741
+ }
1742
1742
 
1743
1743
  .tds-input{
1744
1744
  --tds-input-border-color:var(--t-form-border-color);
@@ -3401,19 +3401,19 @@ a[class="tds-btn"]{
3401
3401
  --tds-checkbox-group-description-line-height:1.3;
3402
3402
  }
3403
3403
 
3404
- .tds-combo-box{
3405
- --tds-combo-box-border-color:var(--t-form-border-color);
3406
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3407
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3408
- --tds-combo-box-background-color:var(--t-form-background-color);
3409
- --tds-combo-box-color:var(--t-form-color);
3410
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3411
- --tds-combo-box-font-size:var(--t-font-size-md);
3412
- --tds-combo-box-min-height:var(--t-container-size-md);
3413
- --tds-combo-box-padding-block:6px;
3414
- --tds-combo-box-button-offset:4px;
3415
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3416
- --tds-combo-box-description-invalid-icon-display:none;
3404
+ .tds-date-picker{
3405
+ --tds-date-picker-border-color:var(--t-form-border-color);
3406
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3407
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3408
+ --tds-date-picker-background-color:var(--t-form-background-color);
3409
+ --tds-date-picker-color:var(--t-form-color);
3410
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3411
+ --tds-date-picker-font-size:var(--t-font-size-md);
3412
+ --tds-date-picker-min-height:var(--t-container-size-md);
3413
+ --tds-date-picker-padding-block:6px;
3414
+ --tds-date-picker-button-offset:4px;
3415
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3416
+ --tds-date-picker-description-invalid-icon-display:none;
3417
3417
 
3418
3418
  position:relative;
3419
3419
  display:flex;
@@ -3421,181 +3421,170 @@ a[class="tds-btn"]{
3421
3421
  gap:var(--t-spacing-half);
3422
3422
  }
3423
3423
 
3424
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3424
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3425
3425
  margin-left:.25ch;
3426
3426
  color:var(--t-text-color-status-error);
3427
3427
  content:"*";
3428
3428
  }
3429
3429
 
3430
- .tds-combo-box[data-invalid]{
3431
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3432
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3433
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3434
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3435
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3436
- --tds-combo-box-description-invalid-icon-display:inline-block;
3430
+ .tds-date-picker[data-invalid]{
3431
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3432
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3433
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3434
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3435
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3436
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3437
3437
  }
3438
3438
 
3439
- .tds-combo-box[data-disabled]{
3440
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3441
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3442
- --tds-combo-box-color:var(--t-form-color-disabled);
3439
+ .tds-date-picker[data-disabled]{
3440
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3441
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3442
+ --tds-date-picker-color:var(--t-form-color-disabled);
3443
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3443
3444
  }
3444
3445
 
3445
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3446
- color:var(--t-form-color-disabled);
3447
- }
3448
-
3449
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3446
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3450
3447
  cursor:not-allowed;
3451
3448
  }
3452
3449
 
3453
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3454
- transform:rotate(.5turn);
3455
- }
3456
-
3457
- .tds-combo-box--lg{
3458
- --tds-combo-box-min-height:var(--t-container-size-lg);
3459
- --tds-combo-box-font-size:var(--t-font-size-lg);
3460
- --tds-combo-box-button-offset:5px;
3450
+ .tds-date-picker--lg{
3451
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3452
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3453
+ --tds-date-picker-button-offset:5px;
3461
3454
  }
3462
3455
 
3463
- .tds-combo-box-label{
3456
+ .tds-date-picker-label{
3464
3457
  font-size:var(--t-font-size-md);
3465
3458
  font-weight:var(--t-font-weight-normal);
3466
3459
  color:var(--t-text-color);
3467
3460
  cursor:default;
3468
3461
  }
3469
3462
 
3470
- .tds-combo-box-field{
3463
+ .tds-date-picker-field{
3471
3464
  display:flex;
3472
3465
  align-items:center;
3473
3466
  inline-size:100%;
3474
- min-block-size:var(--tds-combo-box-min-height);
3467
+ min-block-size:var(--tds-date-picker-min-height);
3475
3468
  font-family:inherit;
3476
- font-size:var(--tds-combo-box-font-size);
3469
+ font-size:var(--tds-date-picker-font-size);
3477
3470
  line-height:1;
3478
- color:var(--tds-combo-box-color);
3471
+ color:var(--tds-date-picker-color);
3479
3472
  -webkit-appearance:none;
3480
3473
  -moz-appearance:none;
3481
3474
  appearance:none;
3482
- cursor:default;
3475
+ cursor:text;
3483
3476
  outline:var(--t-focus-ring-width) solid transparent;
3484
3477
  outline-offset:0;
3485
- background-color:var(--tds-combo-box-background-color);
3486
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3478
+ background-color:var(--tds-date-picker-background-color);
3479
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3487
3480
  border-radius:var(--t-form-border-radius);
3488
3481
  }
3489
3482
 
3490
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3491
- border-color:var(--tds-combo-box-border-color-hover);
3483
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3484
+ border-color:var(--tds-date-picker-border-color-hover);
3492
3485
  }
3493
3486
 
3494
- .tds-combo-box-field[data-focus-within]{
3487
+ .tds-date-picker-field[data-focus-within]{
3495
3488
  outline-color:var(--t-focus-ring-color);
3496
3489
  outline-offset:var(--t-focus-ring-offset);
3497
- border-color:var(--tds-combo-box-border-color-active);
3490
+ border-color:var(--tds-date-picker-border-color-active);
3498
3491
  }
3499
3492
 
3500
- .tds-combo-box-field:has([readonly]){
3501
- --tds-input-border-color:var(--t-form-border-color-readonly);
3502
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3493
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3494
+ color:var(--t-form-color-readonly);
3495
+ background-color:var(--t-form-background-color-readonly);
3496
+ border-color:var(--t-form-border-color-readonly);
3503
3497
  }
3504
3498
 
3505
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3499
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3500
+ border-color:var(--t-form-border-color-readonly);
3501
+ }
3502
+
3503
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3504
+ outline-color:var(--t-focus-ring-color);
3505
+ outline-offset:var(--t-focus-ring-offset);
3506
3506
  border-color:var(--t-form-border-color-hover);
3507
3507
  }
3508
3508
 
3509
- .tds-combo-box-input{
3510
- display:flex;
3509
+ .tds-date-picker-input{
3511
3510
  flex:1;
3512
- align-items:center;
3513
- padding-block:var(--tds-combo-box-padding-block);
3511
+ padding-block:var(--tds-date-picker-padding-block);
3514
3512
  padding-inline-start:var(--t-spacing-1);
3515
- font-family:inherit;
3516
- font-size:inherit;
3517
- color:inherit;
3518
- outline:0;
3519
- background:transparent;
3520
- border:0;
3513
+ font-variant-numeric:tabular-nums;
3521
3514
  }
3522
3515
 
3523
- .tds-combo-box-input::-moz-placeholder{
3524
- color:var(--tds-combo-box-placeholder-color);
3525
- -moz-user-select:none;
3526
- user-select:none;
3516
+ .tds-date-picker-segment{
3517
+ padding-inline:2px;
3518
+ caret-color:transparent;
3519
+ border-radius:var(--t-border-radius-sm);
3520
+ }
3521
+
3522
+ .tds-date-picker-segment[data-placeholder]{
3523
+ color:var(--tds-date-picker-placeholder-color);
3527
3524
  }
3528
3525
 
3529
- .tds-combo-box-input::placeholder{
3530
- color:var(--tds-combo-box-placeholder-color);
3531
- -webkit-user-select:none;
3532
- -moz-user-select:none;
3533
- user-select:none;
3526
+ .tds-date-picker-segment[data-focused]{
3527
+ color:var(--t-text-color-inverted);
3528
+ outline:0;
3529
+ background:var(--t-fill-color-interaction);
3534
3530
  }
3535
3531
 
3536
- .tds-combo-box-button{
3537
- flex-shrink:0;
3538
- align-self:center;
3539
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3540
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3541
- padding:0;
3542
- margin-inline-end:var(--tds-combo-box-button-offset);
3532
+ .tds-date-picker-segment-separator{
3533
+ padding-inline:0;
3534
+ color:var(--tds-date-picker-placeholder-color);
3543
3535
  }
3544
3536
 
3545
- .tds-combo-box-button > svg{
3546
- inline-size:var(--tds-combo-box-font-size);
3547
- block-size:var(--tds-combo-box-font-size);
3548
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3549
- }
3537
+ .tds-date-picker-description{
3538
+ display:flex;
3539
+ gap:var(--t-spacing-half);
3540
+ align-items:flex-start;
3541
+ margin:0;
3542
+ font-size:var(--t-font-size-sm);
3543
+ line-height:1.35;
3544
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3545
+ cursor:text;
3546
+ }
3550
3547
 
3551
- .tds-combo-box-button:not(.tds-btn){
3552
- display:inline-flex;
3553
- align-items:center;
3554
- justify-content:center;
3555
- inline-size:auto;
3556
- block-size:auto;
3557
- margin-inline-end:.75em;
3558
- color:var(--t-icon-color);
3559
- cursor:default;
3560
- background:transparent;
3561
- border:0;
3548
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3549
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3550
+ flex-shrink:0;
3551
+ margin-block-start:calc(.5lh - .5em);
3552
+ line-height:1.35;
3562
3553
  }
3563
3554
 
3564
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3565
- outline:0;
3566
- }
3555
+ .tds-date-picker-button{
3556
+ flex-shrink:0;
3557
+ align-self:center;
3558
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3559
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3560
+ padding:0;
3561
+ margin-inline-end:var(--tds-date-picker-button-offset);
3562
+ }
3567
3563
 
3568
- .tds-combo-box-popover{
3569
- width:var(--trigger-width);
3570
- max-block-size:inherit;
3571
- padding:var(--t-spacing-1);
3572
- overflow:auto;
3573
- outline:0;
3574
- scrollbar-color:#0004 #0000;
3575
- scrollbar-width:thin;
3564
+ .tds-date-picker-popover{
3565
+ padding:var(--t-spacing-2);
3576
3566
  background:var(--t-surface-color-card);
3577
- background-clip:padding-box;
3578
3567
  border:1px solid var(--t-border-color);
3579
3568
  border-radius:var(--t-border-radius);
3580
3569
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3581
3570
  }
3582
3571
 
3583
- .tds-combo-box-popover[data-entering]{
3584
- animation:tds-combo-box-popover-enter 160ms ease;
3572
+ .tds-date-picker-popover[data-entering]{
3573
+ animation:tds-date-picker-popover-enter 160ms ease;
3585
3574
  }
3586
3575
 
3587
- .tds-combo-box-popover[data-exiting]{
3588
- animation:tds-combo-box-popover-exit 130ms ease;
3576
+ .tds-date-picker-popover[data-exiting]{
3577
+ animation:tds-date-picker-popover-exit 130ms ease;
3589
3578
  }
3590
3579
 
3591
- @keyframes tds-combo-box-popover-enter{
3580
+ @keyframes tds-date-picker-popover-enter{
3592
3581
  from{
3593
3582
  opacity:0;
3594
3583
  transform:translateY(-8px);
3595
3584
  }
3596
3585
  }
3597
3586
 
3598
- @keyframes tds-combo-box-popover-exit{
3587
+ @keyframes tds-date-picker-popover-exit{
3599
3588
  to{
3600
3589
  opacity:0;
3601
3590
  transform:translateY(-8px);
@@ -3603,99 +3592,133 @@ a[class="tds-btn"]{
3603
3592
  }
3604
3593
 
3605
3594
  @media (prefers-reduced-motion: reduce){
3606
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3595
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3607
3596
  animation:none;
3608
3597
  }
3598
+ }
3609
3599
 
3610
- .tds-combo-box-button > svg{
3611
- transition:none;
3612
- }
3600
+ .tds-date-picker-calendar{
3601
+ inline-size:-moz-fit-content;
3602
+ inline-size:fit-content;
3613
3603
  }
3614
3604
 
3615
- .tds-combo-box-list{
3616
- padding:0;
3605
+ .tds-date-picker-calendar-header{
3606
+ display:flex;
3607
+ align-items:center;
3608
+ justify-content:space-between;
3609
+ padding-block-end:var(--t-spacing-1);
3610
+ }
3611
+
3612
+ .tds-date-picker-calendar-title{
3613
+ flex:1;
3617
3614
  margin:0;
3615
+ font-size:var(--t-font-size-md);
3616
+ font-weight:var(--t-font-weight-semibold);
3617
+ text-align:center;
3618
3618
  }
3619
3619
 
3620
- .tds-combo-box-list-item{
3621
- display:block;
3622
- padding-block:var(--t-spacing-1);
3623
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3624
- overflow:hidden;
3625
- text-overflow:ellipsis;
3626
- font-size:1rem;
3620
+ .tds-date-picker-calendar-nav{
3621
+ display:flex;
3622
+ align-items:center;
3623
+ justify-content:center;
3624
+ padding:var(--t-spacing-half);
3627
3625
  color:var(--t-text-color);
3628
- white-space:nowrap;
3629
3626
  cursor:default;
3630
- outline-offset:-1px;
3631
- border-radius:var(--t-border-radius);
3627
+ outline:0;
3628
+ background:transparent;
3629
+ border:0;
3630
+ border-radius:var(--t-border-radius-sm);
3632
3631
  }
3633
3632
 
3634
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3633
+ .tds-date-picker-calendar-nav[data-hovered]{
3635
3634
  background:var(--t-fill-color-neutral-070);
3636
3635
  }
3637
3636
 
3638
- .tds-combo-box-list-item[data-selected]{
3637
+ .tds-date-picker-calendar-nav[data-pressed]{
3639
3638
  background:var(--t-fill-color-button-interaction-ghost-active);
3640
3639
  }
3641
3640
 
3642
- .tds-combo-box-list-item[data-focus-visible]{
3643
- outline:var(--t-focus-ring-outline);
3644
- outline-offset:-1px;
3641
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3642
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3643
+ outline-offset:var(--t-focus-ring-offset);
3645
3644
  }
3646
3645
 
3647
- .tds-combo-box-list-item[data-disabled]{
3646
+ .tds-date-picker-calendar-nav[data-disabled]{
3648
3647
  color:var(--t-form-color-disabled);
3649
3648
  cursor:not-allowed;
3650
3649
  }
3651
3650
 
3652
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3653
- background:transparent;
3654
- }
3655
-
3656
- .tds-combo-box-list-section:not(:first-child){
3657
- margin-block-start:var(--t-spacing-half);
3658
- }
3651
+ .tds-date-picker-calendar-grid{
3652
+ border-collapse:collapse;
3653
+ }
3659
3654
 
3660
- .tds-combo-box-section-header{
3661
- padding-block:var(--t-spacing-1);
3662
- padding-inline:var(--t-spacing-1);
3655
+ .tds-date-picker-calendar-header-cell{
3656
+ padding-block:var(--t-spacing-half);
3663
3657
  font-size:var(--t-font-size-sm);
3664
- font-weight:var(--t-font-weight-semibold);
3658
+ font-weight:var(--t-font-weight-normal);
3665
3659
  color:var(--t-text-color-secondary);
3660
+ text-align:center;
3666
3661
  }
3667
3662
 
3668
- .tds-combo-box-description{
3663
+ .tds-date-picker-calendar-cell{
3669
3664
  display:flex;
3670
- gap:var(--t-spacing-half);
3671
- align-items:flex-start;
3672
- margin:0;
3673
- font-size:var(--t-font-size-sm);
3674
- line-height:1.35;
3675
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3676
- cursor:text;
3665
+ align-items:center;
3666
+ justify-content:center;
3667
+ inline-size:2.25rem;
3668
+ block-size:2.25rem;
3669
+ font-size:var(--t-font-size-md);
3670
+ color:var(--t-text-color);
3671
+ cursor:default;
3672
+ outline:0;
3673
+ border-radius:var(--t-border-radius-sm);
3677
3674
  }
3678
3675
 
3679
- .tds-combo-box-description-invalid-icon{
3680
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3681
- flex-shrink:0;
3682
- margin-block-start:calc(.5lh - .5em);
3683
- line-height:1.35;
3684
- }
3676
+ .tds-date-picker-calendar-cell[data-hovered]{
3677
+ background:var(--t-fill-color-neutral-070);
3678
+ }
3685
3679
 
3686
- .tds-date-picker{
3687
- --tds-date-picker-border-color:var(--t-form-border-color);
3688
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-date-picker-background-color:var(--t-form-background-color);
3691
- --tds-date-picker-color:var(--t-form-color);
3692
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3693
- --tds-date-picker-font-size:var(--t-font-size-md);
3694
- --tds-date-picker-min-height:var(--t-container-size-md);
3695
- --tds-date-picker-padding-block:6px;
3696
- --tds-date-picker-button-offset:4px;
3697
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3698
- --tds-date-picker-description-invalid-icon-display:none;
3680
+ .tds-date-picker-calendar-cell[data-pressed]{
3681
+ background:var(--t-fill-color-button-interaction-ghost-active);
3682
+ }
3683
+
3684
+ .tds-date-picker-calendar-cell[data-selected]{
3685
+ color:var(--t-text-color-inverted);
3686
+ background:var(--t-fill-color-interaction);
3687
+ }
3688
+
3689
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3690
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3691
+ outline-offset:var(--t-focus-ring-offset);
3692
+ }
3693
+
3694
+ .tds-date-picker-calendar-cell[data-unavailable]{
3695
+ color:var(--t-text-color-secondary);
3696
+ text-decoration:line-through;
3697
+ cursor:not-allowed;
3698
+ }
3699
+
3700
+ .tds-date-picker-calendar-cell[data-disabled]{
3701
+ color:var(--t-form-color-disabled);
3702
+ cursor:not-allowed;
3703
+ }
3704
+
3705
+ .tds-date-picker-calendar-cell[data-outside-month]{
3706
+ color:var(--t-text-color-secondary);
3707
+ }
3708
+
3709
+ .tds-combo-box{
3710
+ --tds-combo-box-border-color:var(--t-form-border-color);
3711
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3712
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3713
+ --tds-combo-box-background-color:var(--t-form-background-color);
3714
+ --tds-combo-box-color:var(--t-form-color);
3715
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3716
+ --tds-combo-box-font-size:var(--t-font-size-md);
3717
+ --tds-combo-box-min-height:var(--t-container-size-md);
3718
+ --tds-combo-box-padding-block:6px;
3719
+ --tds-combo-box-button-offset:4px;
3720
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3721
+ --tds-combo-box-description-invalid-icon-display:none;
3699
3722
 
3700
3723
  position:relative;
3701
3724
  display:flex;
@@ -3703,170 +3726,181 @@ a[class="tds-btn"]{
3703
3726
  gap:var(--t-spacing-half);
3704
3727
  }
3705
3728
 
3706
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3729
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3707
3730
  margin-left:.25ch;
3708
3731
  color:var(--t-text-color-status-error);
3709
3732
  content:"*";
3710
3733
  }
3711
3734
 
3712
- .tds-date-picker[data-invalid]{
3713
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3714
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3715
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3716
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3717
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3718
- --tds-date-picker-description-invalid-icon-display:inline-block;
3735
+ .tds-combo-box[data-invalid]{
3736
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3737
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3738
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3739
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3740
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3741
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3719
3742
  }
3720
3743
 
3721
- .tds-date-picker[data-disabled]{
3722
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3723
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3724
- --tds-date-picker-color:var(--t-form-color-disabled);
3725
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3744
+ .tds-combo-box[data-disabled]{
3745
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3746
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3747
+ --tds-combo-box-color:var(--t-form-color-disabled);
3726
3748
  }
3727
3749
 
3728
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3750
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3751
+ color:var(--t-form-color-disabled);
3752
+ }
3753
+
3754
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3729
3755
  cursor:not-allowed;
3730
3756
  }
3731
3757
 
3732
- .tds-date-picker--lg{
3733
- --tds-date-picker-min-height:var(--t-container-size-lg);
3734
- --tds-date-picker-font-size:var(--t-font-size-lg);
3735
- --tds-date-picker-button-offset:5px;
3758
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3759
+ transform:rotate(.5turn);
3760
+ }
3761
+
3762
+ .tds-combo-box--lg{
3763
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3764
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3765
+ --tds-combo-box-button-offset:5px;
3736
3766
  }
3737
3767
 
3738
- .tds-date-picker-label{
3768
+ .tds-combo-box-label{
3739
3769
  font-size:var(--t-font-size-md);
3740
3770
  font-weight:var(--t-font-weight-normal);
3741
3771
  color:var(--t-text-color);
3742
3772
  cursor:default;
3743
3773
  }
3744
3774
 
3745
- .tds-date-picker-field{
3775
+ .tds-combo-box-field{
3746
3776
  display:flex;
3747
3777
  align-items:center;
3748
3778
  inline-size:100%;
3749
- min-block-size:var(--tds-date-picker-min-height);
3779
+ min-block-size:var(--tds-combo-box-min-height);
3750
3780
  font-family:inherit;
3751
- font-size:var(--tds-date-picker-font-size);
3781
+ font-size:var(--tds-combo-box-font-size);
3752
3782
  line-height:1;
3753
- color:var(--tds-date-picker-color);
3783
+ color:var(--tds-combo-box-color);
3754
3784
  -webkit-appearance:none;
3755
3785
  -moz-appearance:none;
3756
3786
  appearance:none;
3757
- cursor:text;
3787
+ cursor:default;
3758
3788
  outline:var(--t-focus-ring-width) solid transparent;
3759
3789
  outline-offset:0;
3760
- background-color:var(--tds-date-picker-background-color);
3761
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3790
+ background-color:var(--tds-combo-box-background-color);
3791
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3762
3792
  border-radius:var(--t-form-border-radius);
3763
3793
  }
3764
3794
 
3765
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3766
- border-color:var(--tds-date-picker-border-color-hover);
3795
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3796
+ border-color:var(--tds-combo-box-border-color-hover);
3767
3797
  }
3768
3798
 
3769
- .tds-date-picker-field[data-focus-within]{
3799
+ .tds-combo-box-field[data-focus-within]{
3770
3800
  outline-color:var(--t-focus-ring-color);
3771
3801
  outline-offset:var(--t-focus-ring-offset);
3772
- border-color:var(--tds-date-picker-border-color-active);
3802
+ border-color:var(--tds-combo-box-border-color-active);
3773
3803
  }
3774
3804
 
3775
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3776
- color:var(--t-form-color-readonly);
3777
- background-color:var(--t-form-background-color-readonly);
3778
- border-color:var(--t-form-border-color-readonly);
3805
+ .tds-combo-box-field:has([readonly]){
3806
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3807
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3779
3808
  }
3780
3809
 
3781
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3782
- border-color:var(--t-form-border-color-readonly);
3783
- }
3784
-
3785
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3786
- outline-color:var(--t-focus-ring-color);
3787
- outline-offset:var(--t-focus-ring-offset);
3810
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3788
3811
  border-color:var(--t-form-border-color-hover);
3789
3812
  }
3790
3813
 
3791
- .tds-date-picker-input{
3814
+ .tds-combo-box-input{
3815
+ display:flex;
3792
3816
  flex:1;
3793
- padding-block:var(--tds-date-picker-padding-block);
3817
+ align-items:center;
3818
+ padding-block:var(--tds-combo-box-padding-block);
3794
3819
  padding-inline-start:var(--t-spacing-1);
3795
- font-variant-numeric:tabular-nums;
3796
- }
3797
-
3798
- .tds-date-picker-segment{
3799
- padding-inline:2px;
3800
- caret-color:transparent;
3801
- border-radius:var(--t-border-radius-sm);
3820
+ font-family:inherit;
3821
+ font-size:inherit;
3822
+ color:inherit;
3823
+ outline:0;
3824
+ background:transparent;
3825
+ border:0;
3802
3826
  }
3803
3827
 
3804
- .tds-date-picker-segment[data-placeholder]{
3805
- color:var(--tds-date-picker-placeholder-color);
3828
+ .tds-combo-box-input::-moz-placeholder{
3829
+ color:var(--tds-combo-box-placeholder-color);
3830
+ -moz-user-select:none;
3831
+ user-select:none;
3806
3832
  }
3807
3833
 
3808
- .tds-date-picker-segment[data-focused]{
3809
- color:var(--t-text-color-inverted);
3810
- outline:0;
3811
- background:var(--t-fill-color-interaction);
3834
+ .tds-combo-box-input::placeholder{
3835
+ color:var(--tds-combo-box-placeholder-color);
3836
+ -webkit-user-select:none;
3837
+ -moz-user-select:none;
3838
+ user-select:none;
3812
3839
  }
3813
3840
 
3814
- .tds-date-picker-segment-separator{
3815
- padding-inline:0;
3816
- color:var(--tds-date-picker-placeholder-color);
3841
+ .tds-combo-box-button{
3842
+ flex-shrink:0;
3843
+ align-self:center;
3844
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3845
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3846
+ padding:0;
3847
+ margin-inline-end:var(--tds-combo-box-button-offset);
3817
3848
  }
3818
3849
 
3819
- .tds-date-picker-description{
3820
- display:flex;
3821
- gap:var(--t-spacing-half);
3822
- align-items:flex-start;
3823
- margin:0;
3824
- font-size:var(--t-font-size-sm);
3825
- line-height:1.35;
3826
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3827
- cursor:text;
3828
- }
3850
+ .tds-combo-box-button > svg{
3851
+ inline-size:var(--tds-combo-box-font-size);
3852
+ block-size:var(--tds-combo-box-font-size);
3853
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3854
+ }
3829
3855
 
3830
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3831
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3832
- flex-shrink:0;
3833
- margin-block-start:calc(.5lh - .5em);
3834
- line-height:1.35;
3856
+ .tds-combo-box-button:not(.tds-btn){
3857
+ display:inline-flex;
3858
+ align-items:center;
3859
+ justify-content:center;
3860
+ inline-size:auto;
3861
+ block-size:auto;
3862
+ margin-inline-end:.75em;
3863
+ color:var(--t-icon-color);
3864
+ cursor:default;
3865
+ background:transparent;
3866
+ border:0;
3835
3867
  }
3836
3868
 
3837
- .tds-date-picker-button{
3838
- flex-shrink:0;
3839
- align-self:center;
3840
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3841
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3842
- padding:0;
3843
- margin-inline-end:var(--tds-date-picker-button-offset);
3844
- }
3869
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3870
+ outline:0;
3871
+ }
3845
3872
 
3846
- .tds-date-picker-popover{
3847
- padding:var(--t-spacing-2);
3873
+ .tds-combo-box-popover{
3874
+ width:var(--trigger-width);
3875
+ max-block-size:inherit;
3876
+ padding:var(--t-spacing-1);
3877
+ overflow:auto;
3878
+ outline:0;
3879
+ scrollbar-color:#0004 #0000;
3880
+ scrollbar-width:thin;
3848
3881
  background:var(--t-surface-color-card);
3882
+ background-clip:padding-box;
3849
3883
  border:1px solid var(--t-border-color);
3850
3884
  border-radius:var(--t-border-radius);
3851
3885
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3852
3886
  }
3853
3887
 
3854
- .tds-date-picker-popover[data-entering]{
3855
- animation:tds-date-picker-popover-enter 160ms ease;
3888
+ .tds-combo-box-popover[data-entering]{
3889
+ animation:tds-combo-box-popover-enter 160ms ease;
3856
3890
  }
3857
3891
 
3858
- .tds-date-picker-popover[data-exiting]{
3859
- animation:tds-date-picker-popover-exit 130ms ease;
3892
+ .tds-combo-box-popover[data-exiting]{
3893
+ animation:tds-combo-box-popover-exit 130ms ease;
3860
3894
  }
3861
3895
 
3862
- @keyframes tds-date-picker-popover-enter{
3896
+ @keyframes tds-combo-box-popover-enter{
3863
3897
  from{
3864
3898
  opacity:0;
3865
3899
  transform:translateY(-8px);
3866
3900
  }
3867
3901
  }
3868
3902
 
3869
- @keyframes tds-date-picker-popover-exit{
3903
+ @keyframes tds-combo-box-popover-exit{
3870
3904
  to{
3871
3905
  opacity:0;
3872
3906
  transform:translateY(-8px);
@@ -3874,119 +3908,85 @@ a[class="tds-btn"]{
3874
3908
  }
3875
3909
 
3876
3910
  @media (prefers-reduced-motion: reduce){
3877
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3911
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3878
3912
  animation:none;
3879
3913
  }
3880
- }
3881
-
3882
- .tds-date-picker-calendar{
3883
- inline-size:-moz-fit-content;
3884
- inline-size:fit-content;
3885
- }
3886
3914
 
3887
- .tds-date-picker-calendar-header{
3888
- display:flex;
3889
- align-items:center;
3890
- justify-content:space-between;
3891
- padding-block-end:var(--t-spacing-1);
3915
+ .tds-combo-box-button > svg{
3916
+ transition:none;
3917
+ }
3892
3918
  }
3893
3919
 
3894
- .tds-date-picker-calendar-title{
3895
- flex:1;
3920
+ .tds-combo-box-list{
3921
+ padding:0;
3896
3922
  margin:0;
3897
- font-size:var(--t-font-size-md);
3898
- font-weight:var(--t-font-weight-semibold);
3899
- text-align:center;
3900
3923
  }
3901
3924
 
3902
- .tds-date-picker-calendar-nav{
3903
- display:flex;
3904
- align-items:center;
3905
- justify-content:center;
3906
- padding:var(--t-spacing-half);
3925
+ .tds-combo-box-list-item{
3926
+ display:block;
3927
+ padding-block:var(--t-spacing-1);
3928
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3929
+ overflow:hidden;
3930
+ text-overflow:ellipsis;
3931
+ font-size:1rem;
3907
3932
  color:var(--t-text-color);
3933
+ white-space:nowrap;
3908
3934
  cursor:default;
3909
- outline:0;
3910
- background:transparent;
3911
- border:0;
3912
- border-radius:var(--t-border-radius-sm);
3935
+ outline-offset:-1px;
3936
+ border-radius:var(--t-border-radius);
3913
3937
  }
3914
3938
 
3915
- .tds-date-picker-calendar-nav[data-hovered]{
3939
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3916
3940
  background:var(--t-fill-color-neutral-070);
3917
3941
  }
3918
3942
 
3919
- .tds-date-picker-calendar-nav[data-pressed]{
3943
+ .tds-combo-box-list-item[data-selected]{
3920
3944
  background:var(--t-fill-color-button-interaction-ghost-active);
3921
3945
  }
3922
3946
 
3923
- .tds-date-picker-calendar-nav[data-focus-visible]{
3924
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3925
- outline-offset:var(--t-focus-ring-offset);
3947
+ .tds-combo-box-list-item[data-focus-visible]{
3948
+ outline:var(--t-focus-ring-outline);
3949
+ outline-offset:-1px;
3926
3950
  }
3927
3951
 
3928
- .tds-date-picker-calendar-nav[data-disabled]{
3952
+ .tds-combo-box-list-item[data-disabled]{
3929
3953
  color:var(--t-form-color-disabled);
3930
3954
  cursor:not-allowed;
3931
3955
  }
3932
3956
 
3933
- .tds-date-picker-calendar-grid{
3934
- border-collapse:collapse;
3935
- }
3957
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3958
+ background:transparent;
3959
+ }
3936
3960
 
3937
- .tds-date-picker-calendar-header-cell{
3938
- padding-block:var(--t-spacing-half);
3961
+ .tds-combo-box-list-section:not(:first-child){
3962
+ margin-block-start:var(--t-spacing-half);
3963
+ }
3964
+
3965
+ .tds-combo-box-section-header{
3966
+ padding-block:var(--t-spacing-1);
3967
+ padding-inline:var(--t-spacing-1);
3939
3968
  font-size:var(--t-font-size-sm);
3940
- font-weight:var(--t-font-weight-normal);
3969
+ font-weight:var(--t-font-weight-semibold);
3941
3970
  color:var(--t-text-color-secondary);
3942
- text-align:center;
3943
3971
  }
3944
3972
 
3945
- .tds-date-picker-calendar-cell{
3973
+ .tds-combo-box-description{
3946
3974
  display:flex;
3947
- align-items:center;
3948
- justify-content:center;
3949
- inline-size:2.25rem;
3950
- block-size:2.25rem;
3951
- font-size:var(--t-font-size-md);
3952
- color:var(--t-text-color);
3953
- cursor:default;
3954
- outline:0;
3955
- border-radius:var(--t-border-radius-sm);
3975
+ gap:var(--t-spacing-half);
3976
+ align-items:flex-start;
3977
+ margin:0;
3978
+ font-size:var(--t-font-size-sm);
3979
+ line-height:1.35;
3980
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3981
+ cursor:text;
3956
3982
  }
3957
3983
 
3958
- .tds-date-picker-calendar-cell[data-hovered]{
3959
- background:var(--t-fill-color-neutral-070);
3960
- }
3961
-
3962
- .tds-date-picker-calendar-cell[data-pressed]{
3963
- background:var(--t-fill-color-button-interaction-ghost-active);
3964
- }
3965
-
3966
- .tds-date-picker-calendar-cell[data-selected]{
3967
- color:var(--t-text-color-inverted);
3968
- background:var(--t-fill-color-interaction);
3969
- }
3970
-
3971
- .tds-date-picker-calendar-cell[data-focus-visible]{
3972
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3973
- outline-offset:var(--t-focus-ring-offset);
3974
- }
3975
-
3976
- .tds-date-picker-calendar-cell[data-unavailable]{
3977
- color:var(--t-text-color-secondary);
3978
- text-decoration:line-through;
3979
- cursor:not-allowed;
3980
- }
3981
-
3982
- .tds-date-picker-calendar-cell[data-disabled]{
3983
- color:var(--t-form-color-disabled);
3984
- cursor:not-allowed;
3985
- }
3986
-
3987
- .tds-date-picker-calendar-cell[data-outside-month]{
3988
- color:var(--t-text-color-secondary);
3989
- }
3984
+ .tds-combo-box-description-invalid-icon{
3985
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3986
+ flex-shrink:0;
3987
+ margin-block-start:calc(.5lh - .5em);
3988
+ line-height:1.35;
3989
+ }
3990
3990
 
3991
3991
  .tds-number-stepper{
3992
3992
  --tds-number-stepper-border-color:var(--t-form-border-color);