@planningcenter/tapestry 3.1.0 → 3.1.1-rc.1

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 (11) hide show
  1. package/dist/index.css +123 -137
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +1247 -1261
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +1247 -1261
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tokens.css +10 -0
  8. package/dist/tokens.css.map +1 -1
  9. package/dist/unstable.css +123 -137
  10. package/dist/unstable.css.map +1 -1
  11. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -86,154 +86,133 @@
86
86
  }
87
87
 
88
88
  .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
90
- }
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
91
91
 
92
92
  .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
94
- }
95
-
96
- .tds-page-header__title-bar{
97
- display:flex;
98
- flex-direction:column;
99
- gap:var(--t-spacing-2) var(--t-spacing-1);
100
- align-items:flex-start;
101
- justify-content:space-between;
102
- padding:0 var(--tds-page-header-padding-x);
103
- }
93
+ background:var(--tds-page-header-background-color-inactive);
94
+ }
104
95
 
105
- .tds-page-header--profile > .tds-page-header__title-bar{
106
- align-items:center;
107
- }
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
98
+ }
108
99
 
109
- .tds-page-header__primary{
110
- width:100%;
111
- }
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
+ }
112
108
 
113
- .tds-page-header__primary h1{
114
- margin:0;
115
- font-size:var(--tds-page-header-headline-font-size);
116
- font-weight:var(--t-font-weight-normal);
117
- line-height:32px;
118
- color:var(--tds-page-header-headline-color);
119
- overflow-wrap:break-word;
120
- }
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
+ }
121
118
 
122
- .tds-page-header [slot="actions"],
123
- .tds-page-header .tds-page-header__actions{
124
- width:100%;
125
- }
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
+ }
126
146
 
127
- .has-multi-actions.tds-page-header [slot="actions"],
128
- .has-multi-actions.tds-page-header .tds-page-header__actions{
129
- display:flex;
130
- flex-flow:row wrap;
131
- gap:var(--t-spacing-half) var(--t-spacing-1);
132
- align-items:flex-start;
133
- justify-content:flex-start;
134
- min-width:0;
135
- }
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
+ }
136
152
 
137
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
138
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
139
- .tds-page-header nav[slot="navigation"] ul,
140
- .tds-page-header nav.tds-page-header__nav ul{
141
- display:flex;
142
- gap:var(--tds-page-header-nav-gap);
143
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
144
- margin:0 0 -1px;
145
- overflow:auto;
146
- list-style:none;
147
- background:var(--tds-page-header-nav-background);
148
- }
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
+ }
149
157
 
150
- .tds-page-header nav[slot="navigation"] a,
151
- .tds-page-header nav[slot="navigation"] button,
152
- .tds-page-header nav.tds-page-header__nav a,
153
- .tds-page-header nav.tds-page-header__nav button{
154
- position:relative;
155
- display:inline-flex;
156
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
157
- font-size:var(--t-font-size-sm);
158
- line-height:22px;
159
- color:var(--tds-page-header-nav-item-color);
160
- white-space:nowrap;
161
- text-decoration:none;
162
- -webkit-appearance:none;
163
- -moz-appearance:none;
164
- appearance:none;
165
- cursor:pointer;
166
- outline-offset:-2px;
167
- background-color:var(--tds-page-header-nav-item-background-color);
168
- background-clip:padding-box;
169
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
170
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
171
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
172
- }
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
+ }
173
164
 
174
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
175
- position:relative;
176
- }
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
167
+ }
177
168
 
178
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
179
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
180
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
181
- }
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
+ }
182
173
 
183
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
184
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
185
- position:absolute;
186
- top:-5px;
187
- right:-2px;
188
- width:10px;
189
- height:10px;
190
- content:"";
191
- background:var(--tds-page-header-nav-item-indicator-color);
192
- border-radius:50%;
193
- }
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
+ }
194
184
 
195
185
  @media (prefers-reduced-motion: no-preference){
196
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
197
- animation:indicator-pulse 1.25s ease infinite;
198
- }
199
- }
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
+ }
200
190
 
201
- .tds-page-header nav[slot="navigation"] a.selected,
202
- .tds-page-header nav[slot="navigation"] button.selected,
203
- .tds-page-header nav.tds-page-header__nav a.selected,
204
- .tds-page-header nav.tds-page-header__nav button.selected{
205
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
206
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
207
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
208
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
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);
209
198
  }
210
199
 
211
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
212
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
213
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
214
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
215
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
216
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
217
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
218
- }
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
202
+ }
219
203
 
220
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
221
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
222
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
223
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
224
- background-color:var(--tds-page-header-nav-item-background-color-active);
225
- border-color:var(--tds-page-header-nav-item-border-color-active);
204
+ .tds-page-header__primary{
205
+ width:100%;
226
206
  }
227
207
 
228
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
229
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
230
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
231
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
232
- color:var(--tds-page-header-nav-item-color-disabled);
233
- cursor:not-allowed;
234
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
235
- opacity:1;
236
- }
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
+ }
237
216
 
238
217
  @media (min-width: 960px){
239
218
  .tds-page-header__primary{
@@ -249,16 +228,13 @@
249
228
  row-gap:12px;
250
229
  align-items:flex-start;
251
230
  }
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
233
+ }
252
234
 
253
- .tds-page-header [slot="actions"],
254
- .tds-page-header .tds-page-header__actions{
255
- width:auto;
256
- }
257
-
258
- .has-multi-actions.tds-page-header [slot="actions"],
259
- .has-multi-actions.tds-page-header .tds-page-header__actions{
260
- justify-content:flex-end;
261
- }
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
237
+ }
262
238
  }
263
239
 
264
240
  .tds-page-header-phone,
@@ -285,938 +261,1263 @@
285
261
  }
286
262
  }
287
263
 
288
- .tds-checkbox{
289
- --tds-checkbox-font-size:var(--t-font-size-md);
290
- --tds-checkbox-cursor:pointer;
291
- --tds-checkbox-line-height:1.4;
292
- --tds-checkbox-transition-property:background-color, border-color;
293
-
294
- --tds-checkbox-input-size:var(--t-element-size-md);
295
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
296
- --tds-checkbox-input-border-color:var(--t-form-border-color);
297
- --tds-checkbox-input-background-color:transparent;
298
-
299
- --tds-checkbox-input-icon:none;
300
- --tds-checkbox-input-icon-visibility:hidden;
301
- --tds-checkbox-input-icon-opacity:0;
302
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
303
-
304
- --tds-checkbox-label-color:var(--t-form-color);
305
264
 
306
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
307
- --tds-checkbox-description-line-height:1.35;
308
- --tds-checkbox-description-color:var(--t-text-color-secondary);
309
- --tds-checkbox-description-invalid-icon-display:none;
265
+ @media (prefers-reduced-motion: no-preference){
310
266
 
311
- position:relative;
312
- display:inline-grid;
313
- grid-template-columns:auto;
314
- grid-auto-columns:1fr;
315
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
316
- line-height:var(--tds-checkbox-line-height);
317
- cursor:var(--tds-checkbox-cursor);
318
- -webkit-user-select:none;
319
- -moz-user-select:none;
320
- user-select:none;
267
+ :root{
268
+ interpolate-size:allow-keywords;
321
269
  }
322
-
323
- .tds-checkbox label{
324
- grid-area:1 / 2;
325
- font-size:var(--tds-checkbox-font-size);
326
- font-weight:var(--t-font-weight-normal);
327
- color:var(--tds-checkbox-label-color);
328
- cursor:var(--tds-checkbox-cursor);
329
270
  }
330
271
 
331
- .tds-checkbox tds-indeterminate{
332
- display:flex;
333
- }
272
+ @layer tds-component{
273
+ tds-sidenav,
274
+ .tds-sidenav{
275
+ --tds-sidenav-indent:12px;
276
+ --tds-sidenav-item-depth:0;
334
277
 
335
- .tds-checkbox input[type="checkbox"]{
336
- position:relative;
337
- width:1em;
338
- height:1em;
339
- margin:calc((1lh - 1em) / 2) 0 0;
340
- font-size:var(--tds-checkbox-font-size);
341
- line-height:inherit;
342
- -webkit-appearance:none;
343
- -moz-appearance:none;
344
- appearance:none;
345
- cursor:var(--tds-checkbox-cursor);
346
- background-color:var(--tds-checkbox-input-background-color);
347
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
348
- border-radius:var(--tds-checkbox-input-border-radius);
349
- transition-timing-function:ease-in-out;
350
- transition-duration:180ms;
351
- transition-property:var(--tds-checkbox-transition-property);
352
- }
278
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
353
279
 
354
- :is(.tds-checkbox input[type="checkbox"])::before{
355
- position:absolute;
356
- top:50%;
357
- left:50%;
358
- visibility:var(--tds-checkbox-input-icon-visibility);
359
- width:100%;
360
- height:100%;
361
- content:"";
362
- background-color:var(--tds-checkbox-input-icon-fill);
363
- border-radius:var(--tds-checkbox-input-border-radius);
364
- opacity:var(--tds-checkbox-input-icon-opacity);
365
- -webkit-mask-image:var(--tds-checkbox-input-icon);
366
- mask-image:var(--tds-checkbox-input-icon);
367
- -webkit-mask-repeat:no-repeat;
368
- mask-repeat:no-repeat;
369
- -webkit-mask-size:contain;
370
- mask-size:contain;
371
- transform:translate(-50%, -50%);
372
- }
280
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
281
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
282
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
283
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
373
284
 
374
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
375
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
376
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
377
- }
285
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
286
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
287
+ --tds-sidenav-item-nested-background-selected:transparent;
378
288
 
379
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
380
- outline:var(--t-focus-ring-outline);
381
- outline-offset:var(--t-focus-ring-offset);
382
- }
289
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
290
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
291
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
383
292
 
384
- :is(.tds-checkbox input[type="checkbox"]):disabled{
385
- pointer-events:none;
386
- }
293
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
294
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
295
+ }
387
296
 
388
- @media (prefers-reduced-motion: reduce){
297
+ .tds-sidenav--theme-gray{
298
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
299
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
300
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
301
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
302
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
303
+ }
304
+ }
389
305
 
390
- .tds-checkbox input[type="checkbox"]{
391
- --tds-checkbox-transition-property:none;
306
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
307
+ display:flex;
392
308
  }
393
- }
394
309
 
395
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
396
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
397
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
398
- --tds-checkbox-input-icon-visibility:visible;
399
- --tds-checkbox-input-icon-opacity:1;
310
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
311
+ flex-direction:column;
312
+ gap:var(--t-spacing-half);
313
+ width:100%;
400
314
  }
401
315
 
402
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
403
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
404
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
405
- }
316
+ .tds-sidenav-section-list{
317
+ width:100%;
318
+ padding:0;
319
+ margin:0;
320
+ list-style:none;
321
+ }
406
322
 
407
- .tds-checkbox:has(input:checked){
408
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
409
- }
323
+ .tds-sidenav-section-header{
324
+ display:flex;
325
+ align-items:baseline;
326
+ justify-content:space-between;
327
+ padding-top:var(--t-spacing-2);
328
+ }
410
329
 
411
- .tds-checkbox:has(input:indeterminate){
412
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
330
+ .tds-sidenav-section-header h2{
331
+ margin:0;
332
+ font-size:var(--t-font-size-sm);
333
+ font-weight:var(--t-font-weight-semibold);
334
+ line-height:1.35;
335
+ color:var(--t-text-color-secondary);
336
+ text-transform:uppercase;
413
337
  }
414
338
 
415
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
416
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
417
- --tds-checkbox-description-color:var(--t-text-color-status-error);
418
- --tds-checkbox-description-invalid-icon-display:inline-block;
339
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
340
+ padding-top:0;
419
341
  }
420
342
 
421
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
422
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
423
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
424
- }
425
-
426
- :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{
427
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
428
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
429
- }
430
-
431
- :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){
432
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
433
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
434
- }
435
-
436
- .tds-checkbox:has(input:required) label::after{
437
- margin-left:.25ch;
438
- color:var(--t-text-color-status-error);
439
- content:"*";
440
- }
441
-
442
- .tds-checkbox:has(input:disabled){
443
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
444
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
445
-
446
- --tds-checkbox-label-color:var(--t-form-color-disabled);
447
- --tds-checkbox-description-color:var(--t-form-color-disabled);
448
- --tds-checkbox-cursor:not-allowed;
343
+ .tds-sidenav-section-header [slot="label-actions"]{
344
+ display:flex;
345
+ gap:var(--t-spacing-half);
346
+ align-items:center;
449
347
  }
450
348
 
451
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
452
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
453
- }
454
-
455
- .tds-checkbox-description{
349
+ .tds-sidenav-section [slot="section-actions"]{
456
350
  display:flex;
457
- grid-area:2 / 2;
458
- gap:var(--t-spacing-half);
459
- align-items:flex-start;
460
- margin:0;
461
- font-size:var(--tds-checkbox-description-font-size);
462
- line-height:var(--tds-checkbox-description-line-height);
463
- color:var(--tds-checkbox-description-color);
464
- cursor:text;
465
- }
466
-
467
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
468
- display:var(--tds-checkbox-description-invalid-icon-display);
469
- flex-shrink:0;
470
- margin-top:calc(.5lh - .5em);
471
- line-height:var(--tds-checkbox-description-line-height);
472
- }
473
-
474
- .tds-checkbox--sm{
475
- --tds-checkbox-line-height:1.35;
476
- --tds-checkbox-input-size:var(--t-element-size-sm);
477
- --tds-checkbox-font-size:var(--t-font-size-sm);
478
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
479
- --tds-checkbox-description-line-height:1.3;
351
+ gap:12px;
352
+ align-items:center;
353
+ min-height:42px;
354
+ padding:var(--t-spacing-1) 0;
480
355
  }
481
356
 
482
- .tds-radio{
483
- --tds-radio-font-size:var(--t-font-size-md);
484
- --tds-radio-cursor:pointer;
485
- --tds-radio-line-height:1.4;
486
- --tds-radio-transition-property:border-width;
487
-
488
- --tds-radio-input-size:var(--t-element-size-md);
489
- --tds-radio-input-border-radius:var(--t-border-radius-round);
490
- --tds-radio-input-border-color:var(--t-form-border-color);
491
- --tds-radio-input-border-width:var(--t-form-border-width);
492
- --tds-radio-input-background-color:transparent;
493
-
494
- --tds-radio-label-color:var(--t-form-color);
495
-
496
- --tds-radio-description-font-size:var(--t-font-size-sm);
497
- --tds-radio-description-line-height:1.35;
498
- --tds-radio-description-color:var(--t-text-color-secondary);
499
-
500
- position:relative;
501
- display:inline-grid;
502
- grid-template-columns:auto;
503
- grid-auto-columns:1fr;
504
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
505
- line-height:var(--tds-radio-line-height);
506
- cursor:var(--tds-radio-cursor);
507
- -webkit-user-select:none;
508
- -moz-user-select:none;
509
- user-select:none;
357
+ .tds-sidenav-section-list,
358
+ .tds-sidenav-item{
359
+ width:100%;
360
+ padding:0;
361
+ margin:0;
510
362
  }
511
363
 
512
- .tds-radio label{
513
- grid-area:1 / 2;
514
- font-size:var(--tds-radio-font-size);
515
- font-weight:var(--t-font-weight-normal);
516
- color:var(--tds-radio-label-color);
517
- cursor:var(--tds-radio-cursor);
518
- }
519
-
520
- .tds-radio input[type="radio"]{
364
+ .tds-sidenav-item :is(a,button){
521
365
  position:relative;
522
- width:1em;
523
- height:1em;
524
- margin:calc((1lh - 1em) / 2) 0 0;
525
- font-size:var(--tds-radio-font-size);
526
- line-height:inherit;
366
+ display:flex;
367
+ gap:12px;
368
+ align-items:center;
369
+ width:100%;
370
+ padding:12px;
371
+ overflow:hidden;
372
+ font-size:var(--t-font-size-sm);
373
+ line-height:18px;
374
+ color:var(--t-text-color-headline);
375
+ white-space:nowrap;
376
+ text-decoration:none;
527
377
  -webkit-appearance:none;
528
378
  -moz-appearance:none;
529
379
  appearance:none;
530
- cursor:var(--tds-radio-cursor);
531
- background-color:var(--tds-radio-input-background-color);
532
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
533
- border-radius:var(--tds-radio-input-border-radius);
534
- transition-timing-function:ease-in-out;
535
- transition-duration:180ms;
536
- transition-property:var(--tds-radio-transition-property);
380
+ cursor:pointer;
381
+ background-color:var(--tds-sidenav-item-background, transparent);
382
+ border:0;
383
+ border-radius:var(--t-border-radius);
384
+ transition:var(--tds-sidenav-item-transition);
537
385
  }
538
386
 
539
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
540
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
541
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
387
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
388
+ display:block;
389
+ flex:1;
390
+ overflow:hidden;
391
+ text-overflow:ellipsis;
392
+ text-align:left;
393
+ white-space:nowrap;
542
394
  }
543
395
 
544
- :is(.tds-radio input[type="radio"]):focus-visible{
545
- outline:var(--t-focus-ring-outline);
546
- outline-offset:var(--t-focus-ring-offset);
396
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
397
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
398
+ color:var(--t-text-color-headline);
399
+ text-decoration:none;
547
400
  }
548
401
 
549
- :is(.tds-radio input[type="radio"]):disabled{
550
- pointer-events:none;
402
+ :is(.tds-sidenav-item :is(a,button)):active{
403
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
551
404
  }
552
405
 
553
- @media (prefers-reduced-motion: reduce){
554
-
555
- .tds-radio input[type="radio"]{
556
- --tds-radio-transition-property:none;
557
- }
406
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
407
+ overflow:hidden;
408
+ color:var(--tds-sidenav-item-icon-color);
558
409
  }
559
410
 
560
- .tds-radio:has(input:checked){
561
- --tds-radio-input-background-color:var(--t-form-background-color);
562
- --tds-radio-input-border-color:var(--t-border-color-control-info);
563
- --tds-radio-input-border-width:4px;
564
- }
411
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
412
+ display:block;
413
+ width:var(--tds-sidenav-item-icon-size);
414
+ height:var(--tds-sidenav-item-icon-size);
415
+ }
565
416
 
566
- .tds-radio:has(input:checked) input:hover:not(:disabled){
567
- --tds-radio-input-background-color:var(--t-form-background-color);
568
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
417
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
418
+ --tds-sidenav-indent:19px;
569
419
  }
570
420
 
571
- .tds-radio:has(input:user-invalid){
572
- --tds-radio-input-border-color:var(--t-form-border-color-error);
573
- }
574
-
575
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
576
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
577
- --tds-radio-input-background-color:var(--t-form-background-color-error);
421
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
422
+ visibility:visible;
423
+ block-size:auto;
424
+ opacity:1;
578
425
  }
579
426
 
580
- .tds-radio:has(input:disabled){
581
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
582
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
427
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
428
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
429
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
583
430
 
584
- --tds-radio-label-color:var(--t-form-color-disabled);
585
- --tds-radio-description-color:var(--t-form-color-disabled);
586
- --tds-radio-cursor:not-allowed;
431
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
432
+ font-weight:var(--t-font-weight-semibold);
587
433
  }
588
434
 
589
- .tds-radio:has(input:disabled) input:checked{
590
- --tds-radio-input-background-color:var(--t-form-background-color);
591
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
592
- }
593
-
594
- .tds-radio-description{
595
- display:flex;
596
- grid-area:2 / 2;
597
- gap:var(--t-spacing-half);
598
- align-items:flex-start;
599
- margin:0;
600
- font-size:var(--tds-radio-description-font-size);
601
- line-height:var(--tds-radio-description-line-height);
602
- color:var(--tds-radio-description-color);
603
- cursor:text;
604
- }
605
-
606
- .tds-radio--sm{
607
- --tds-radio-line-height:1.35;
608
- --tds-radio-input-size:var(--t-element-size-sm);
609
- --tds-radio-font-size:var(--t-font-size-sm);
610
- --tds-radio-description-font-size:var(--t-font-size-xs);
611
- --tds-radio-description-line-height:1.3;
612
- }
435
+ .tds-sidenav-item:has(.tds-sidenav-section){
436
+ display:flex;
437
+ flex-direction:column;
438
+ gap:var(--t-spacing-half);
439
+ }
613
440
 
441
+ .tds-sidenav-item .tds-sidenav-section-list{
442
+ --tds-sidenav-item-depth:1;
443
+ gap:0;
444
+ }
614
445
 
615
- :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{
616
- -webkit-appearance:none;
617
- appearance:none;
446
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
447
+ visibility:hidden;
448
+ block-size:0;
449
+ overflow-y:clip;
450
+ opacity:0;
451
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
618
452
  }
619
453
 
620
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
621
- inline-size:1em;
622
- block-size:2em;
454
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
455
+ --tds-sidenav-item-depth:2;
623
456
  }
624
457
 
625
- @supports (field-sizing: content){
626
- .tds-input--auto-width{
627
- inline-size:-moz-fit-content;
628
- inline-size:fit-content;
629
- }
458
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
459
+ min-height:var(--t-element-size-2xl);
460
+ padding-block:9px;
461
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
462
+ line-height:1;
463
+ background-color:transparent;
464
+ }
630
465
 
631
- .tds-input--auto-width input{
632
- field-sizing:content;
633
- inline-size:auto;
634
- }
635
- }
466
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
467
+ position:absolute;
468
+ top:0;
469
+ bottom:0;
470
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
471
+ width:2px;
472
+ content:"";
473
+ background-color:var(--tds-sidenav-item-nested-border-color);
474
+ transition:var(--tds-sidenav-item-transition);
475
+ }
636
476
 
637
- .tds-input:has(textarea){
638
- --tds-input-padding-block:6px;
639
- --tds-input-resizer-size:var(--t-element-size-sm);
640
- --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");
641
- }
477
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
478
+ position:absolute;
479
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
480
+ z-index:-1;
481
+ height:100%;
482
+ content:"";
483
+ background-color:var(--tds-sidenav-item-nested-background);
484
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
485
+ transition:var(--tds-sidenav-item-transition);
486
+ }
642
487
 
643
- @supports (x: attr(x type(*))){
488
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
489
+ display:block;
490
+ text-align:left;
491
+ white-space:normal;
492
+ }
644
493
 
645
- .tds-input:has(textarea){
646
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
647
- }
648
- }
494
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
495
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
496
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
497
+ }
649
498
 
650
- .tds-input.tds-textarea--resize-vertical textarea{
651
- resize:vertical;
652
- }
499
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
500
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
501
+ }
653
502
 
654
- .tds-input.tds-textarea--resize-none textarea{
655
- resize:none;
503
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
504
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
505
+ font-weight:var(--t-font-weight-medium);
656
506
  }
657
507
 
658
- .tds-input.tds-textarea--resize-auto textarea{
659
- resize:vertical;
660
- }
508
+ .tds-sidenav-responsive-header{
509
+ display:flex;
510
+ gap:var(--t-spacing-2);
511
+ align-items:center;
512
+ width:100%;
513
+ }
661
514
 
662
- @supports (field-sizing: content){
663
- .tds-input.tds-textarea--resize-auto textarea{
664
- field-sizing:content;
665
- resize:none;
666
- }
667
- }
515
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
516
+ order:0;
517
+ }
668
518
 
669
- .tds-input textarea{
670
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
671
- --tds-input-scrollbar-thumb-color-hidden:transparent;
672
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
673
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
674
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
675
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
676
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
677
- --tds-input-scrollbar-thumb-border-radius:999px;
678
- --tds-input-scrollbar-thumb-border-width:3px;
679
- --tds-input-scrollbar-track-margin-block:.125rem;
680
- scrollbar-color:initial;
681
- transition-timing-function:ease-in-out;
682
- transition-duration:180ms;
683
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
684
- }
519
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
520
+ flex:1;
521
+ order:1;
522
+ margin:0;
523
+ font-size:var(--t-font-size-lg);
524
+ font-weight:var(--t-font-weight-medium);
525
+ color:var(--t-text-color-headline);
526
+ }
685
527
 
686
- @media (pointer: fine){
687
- :is(.tds-input textarea)::-webkit-scrollbar{
688
- width:12px;
689
- height:12px;
690
- cursor:default;
691
- }
528
+ @media (max-width: 719px){
529
+ .tds-sidenav-collapse{
530
+ z-index:10001;
531
+ display:none;
532
+ max-width:min(448px, calc(100vw - 48px));
533
+ padding:0;
534
+ margin:12px 0;
535
+ overflow:hidden;
536
+ outline:0;
537
+ background:var(--t-surface-color-card);
538
+ border:0;
539
+ border-radius:6px;
540
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
541
+ will-change:transform;
542
+ position-area:bottom span-right;
543
+ }
692
544
 
693
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
694
- cursor:default;
695
- background:var(--tds-input-scrollbar-thumb-color);
696
- background-clip:content-box;
697
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
698
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
699
- }
545
+ .tds-sidenav-scroll-container{
546
+ --webkit-overflow-scrolling:touch;
547
+ display:block;
548
+ width:100%;
549
+ height:-moz-fit-content;
550
+ height:fit-content;
551
+ padding:var(--t-spacing-2);
552
+ overflow-y:auto;
553
+ }
700
554
 
701
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
702
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
555
+ .tds-sidenav-item :is(a, button) :is(.prefix){
556
+ display:none;
557
+ }
558
+ @supports selector(:popover-open){
559
+ .tds-sidenav-collapse:popover-open{
560
+ display:flex;
561
+ }
562
+ }
563
+ @supports not selector(:popover-open){
564
+ .tds-sidenav-collapse.\:popover-open{
565
+ display:flex;
703
566
  }
567
+ }
568
+ }
704
569
 
705
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
706
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
570
+ @media (min-width: 720px){
571
+ .tds-sidenav-responsive-header{
572
+ display:none;
573
+ }
574
+ }
575
+
576
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
577
+ display:none;
707
578
  }
708
579
 
709
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
710
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
580
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
581
+ display:block;
711
582
  }
712
583
 
713
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
714
- background:var(--tds-input-scrollbar-surface-color);
584
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
585
+ display:flex;
586
+ flex-direction:column;
715
587
  }
716
588
 
717
- :is(.tds-input textarea)::-webkit-resizer{
718
- background:var(--tds-input-resizer-icon) no-repeat;
719
- background-position:right bottom;
720
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
589
+
590
+ :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{
591
+ -webkit-appearance:none;
592
+ appearance:none;
721
593
  }
722
594
 
723
- :is(.tds-input textarea)::-webkit-scrollbar-track{
724
- margin-block:var(--tds-input-scrollbar-track-margin-block);
725
- cursor:default;
595
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
596
+ inline-size:1em;
597
+ block-size:2em;
726
598
  }
727
599
 
728
- @supports (-moz-appearance: none){
729
- :is(.tds-input textarea){
730
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
731
- scrollbar-width:thin;
732
- }
600
+ @supports (field-sizing: content){
601
+ .tds-input--auto-width{
602
+ inline-size:-moz-fit-content;
603
+ inline-size:fit-content;
604
+ }
733
605
 
734
- @media (hover){
735
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
736
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
737
- }
738
- }
739
- }
606
+ .tds-input--auto-width input{
607
+ field-sizing:content;
608
+ inline-size:auto;
740
609
  }
610
+ }
741
611
 
742
- .tds-toggle-switch{
743
- --tds-toggle-switch-font-size:var(--t-font-size-md);
744
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
745
- --tds-toggle-switch-cursor:pointer;
746
- --tds-toggle-switch-display:inline-grid;
747
- --tds-toggle-switch-line-height:1.4;
612
+ .tds-radio{
613
+ --tds-radio-font-size:var(--t-font-size-md);
614
+ --tds-radio-cursor:pointer;
615
+ --tds-radio-line-height:1.4;
616
+ --tds-radio-transition-property:border-width;
748
617
 
749
- --tds-toggle-switch-label-color:var(--t-form-color);
618
+ --tds-radio-input-size:var(--t-element-size-md);
619
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
620
+ --tds-radio-input-border-color:var(--t-form-border-color);
621
+ --tds-radio-input-border-width:var(--t-form-border-width);
622
+ --tds-radio-input-background-color:transparent;
750
623
 
751
- --tds-toggle-switch-track-width:var(--t-container-size-md);
752
- --tds-toggle-switch-track-outline:none;
753
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
754
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
755
- --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
624
+ --tds-radio-label-color:var(--t-form-color);
756
625
 
757
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
758
- --tds-toggle-switch-thumb-transform:translateX(0);
759
- --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
626
+ --tds-radio-description-font-size:var(--t-font-size-sm);
627
+ --tds-radio-description-line-height:1.35;
628
+ --tds-radio-description-color:var(--t-text-color-secondary);
760
629
 
761
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
762
- --tds-toggle-switch-description-line-height:1.35;
763
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
764
630
  position:relative;
765
-
766
- display:var(--tds-toggle-switch-display);
631
+ display:inline-grid;
767
632
  grid-template-columns:auto;
768
633
  grid-auto-columns:1fr;
769
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
634
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
635
+ line-height:var(--tds-radio-line-height);
636
+ cursor:var(--tds-radio-cursor);
770
637
  -webkit-user-select:none;
771
638
  -moz-user-select:none;
772
639
  user-select:none;
773
640
  }
774
641
 
775
- .tds-toggle-switch input[type="checkbox"]{
776
- position:absolute;
777
- width:var(--tds-toggle-switch-track-width);
778
- height:var(--tds-toggle-switch-track-height);
779
- margin:0;
642
+ .tds-radio label{
643
+ grid-area:1 / 2;
644
+ font-size:var(--tds-radio-font-size);
645
+ font-weight:var(--t-font-weight-normal);
646
+ color:var(--tds-radio-label-color);
647
+ cursor:var(--tds-radio-cursor);
648
+ }
649
+
650
+ .tds-radio input[type="radio"]{
651
+ position:relative;
652
+ width:1em;
653
+ height:1em;
654
+ margin:calc((1lh - 1em) / 2) 0 0;
655
+ font-size:var(--tds-radio-font-size);
656
+ line-height:inherit;
780
657
  -webkit-appearance:none;
781
658
  -moz-appearance:none;
782
659
  appearance:none;
783
- cursor:var(--tds-toggle-switch-cursor);
784
- outline:var(--tds-toggle-switch-track-outline);
785
- outline-offset:var(--t-focus-ring-offset);
786
- background-color:transparent;
787
- border:0;
788
- border-radius:var(--t-border-radius-round);
660
+ cursor:var(--tds-radio-cursor);
661
+ background-color:var(--tds-radio-input-background-color);
662
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
663
+ border-radius:var(--tds-radio-input-border-radius);
664
+ transition-timing-function:ease-in-out;
665
+ transition-duration:180ms;
666
+ transition-property:var(--tds-radio-transition-property);
789
667
  }
790
668
 
791
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
792
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
669
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
670
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
671
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
793
672
  }
794
673
 
795
- .tds-toggle-switch label{
796
- display:inline-flex;
797
- grid-area:1 / 2;
798
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
799
- column-gap:var(--tds-toggle-switch-column-gap);
800
- margin-top:-.09375em;
801
- font-size:var(--tds-toggle-switch-font-size);
802
- font-weight:var(--t-font-weight-normal);
803
- line-height:var(--tds-toggle-switch-line-height);
804
- color:var(--tds-toggle-switch-label-color);
805
- cursor:var(--tds-toggle-switch-cursor);
806
- }
674
+ :is(.tds-radio input[type="radio"]):focus-visible{
675
+ outline:var(--t-focus-ring-outline);
676
+ outline-offset:var(--t-focus-ring-offset);
677
+ }
807
678
 
808
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
809
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
810
- }
679
+ :is(.tds-radio input[type="radio"]):disabled{
680
+ pointer-events:none;
681
+ }
811
682
 
812
- .tds-toggle-switch:has(input:checked){
813
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
814
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
815
- }
683
+ @media (prefers-reduced-motion: reduce){
816
684
 
817
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
818
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
685
+ .tds-radio input[type="radio"]{
686
+ --tds-radio-transition-property:none;
687
+ }
819
688
  }
820
689
 
821
- .tds-toggle-switch:has(input:disabled){
822
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
823
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
824
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
825
- --tds-toggle-switch-cursor:not-allowed;
690
+ .tds-radio:has(input:checked){
691
+ --tds-radio-input-background-color:var(--t-form-background-color);
692
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
693
+ --tds-radio-input-border-width:4px;
826
694
  }
827
695
 
828
- .tds-toggle-switch-track{
829
- position:relative;
830
- flex-shrink:0;
831
- width:var(--tds-toggle-switch-track-width);
832
- height:var(--tds-toggle-switch-track-height);
833
- background-color:var(--tds-toggle-switch-track-background-color);
834
- border-radius:var(--t-border-radius-round);
835
- transition:var(--tds-toggle-switch-track-transition);
836
- }
696
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
697
+ --tds-radio-input-background-color:var(--t-form-background-color);
698
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
699
+ }
837
700
 
838
- .tds-toggle-switch-track::before{
839
- position:absolute;
840
- top:var(--t-spacing-fourth);
841
- left:var(--t-spacing-fourth);
842
- width:var(--tds-toggle-switch-thumb-size);
843
- height:var(--tds-toggle-switch-thumb-size);
844
- content:"";
845
- background-color:#fff;
846
- border-radius:var(--t-border-radius-round);
847
- transform:var(--tds-toggle-switch-thumb-transform);
848
- transition:var(--tds-toggle-switch-thumb-transition);
701
+ .tds-radio:has(input:user-invalid){
702
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
849
703
  }
850
704
 
851
- @media (prefers-reduced-motion: reduce){
705
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
706
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
707
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
708
+ }
852
709
 
853
- .tds-toggle-switch-track{
854
- --tds-toggle-switch-track-transition:none;
855
- --tds-toggle-switch-thumb-transition:none;
856
- }
710
+ .tds-radio:has(input:disabled){
711
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
712
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
713
+
714
+ --tds-radio-label-color:var(--t-form-color-disabled);
715
+ --tds-radio-description-color:var(--t-form-color-disabled);
716
+ --tds-radio-cursor:not-allowed;
857
717
  }
858
718
 
859
- .tds-toggle-switch-description{
719
+ .tds-radio:has(input:disabled) input:checked{
720
+ --tds-radio-input-background-color:var(--t-form-background-color);
721
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
722
+ }
723
+
724
+ .tds-radio-description{
860
725
  display:flex;
861
726
  grid-area:2 / 2;
727
+ gap:var(--t-spacing-half);
862
728
  align-items:flex-start;
863
729
  margin:0;
864
- font-size:var(--tds-toggle-switch-description-font-size);
865
- line-height:var(--tds-toggle-switch-description-line-height);
866
- color:var(--tds-toggle-switch-description-color);
730
+ font-size:var(--tds-radio-description-font-size);
731
+ line-height:var(--tds-radio-description-line-height);
732
+ color:var(--tds-radio-description-color);
867
733
  cursor:text;
868
734
  }
869
735
 
870
- .tds-toggle-switch--sm{
871
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
872
- --tds-toggle-switch-line-height:1.35;
873
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
874
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
875
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
876
- --tds-toggle-switch-description-line-height:1.3;
736
+ .tds-radio--sm{
737
+ --tds-radio-line-height:1.35;
738
+ --tds-radio-input-size:var(--t-element-size-sm);
739
+ --tds-radio-font-size:var(--t-font-size-sm);
740
+ --tds-radio-description-font-size:var(--t-font-size-xs);
741
+ --tds-radio-description-line-height:1.3;
877
742
  }
878
743
 
879
- .tds-toggle-switch--hide-label{
880
- --tds-toggle-switch-display:inline-flex;
881
- }
744
+ .tds-checkbox{
745
+ --tds-checkbox-font-size:var(--t-font-size-md);
746
+ --tds-checkbox-cursor:pointer;
747
+ --tds-checkbox-line-height:1.4;
748
+ --tds-checkbox-transition-property:background-color, border-color;
882
749
 
883
- .tds-radio-group{
884
- --tds-radio-group-font-size:var(--t-font-size-md);
885
- --tds-radio-group-line-height:1.4;
886
- --tds-radio-group-gap:var(--t-spacing-1);
750
+ --tds-checkbox-input-size:var(--t-element-size-md);
751
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
752
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
753
+ --tds-checkbox-input-background-color:transparent;
887
754
 
888
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
755
+ --tds-checkbox-input-icon:none;
756
+ --tds-checkbox-input-icon-visibility:hidden;
757
+ --tds-checkbox-input-icon-opacity:0;
758
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
889
759
 
890
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
891
- --tds-radio-group-description-line-height:1.35;
892
- --tds-radio-group-description-color:var(--t-text-color-secondary);
893
- --tds-radio-group-description-invalid-icon-display:none;
894
- display:flex;
895
- flex-direction:column;
896
- gap:var(--tds-radio-group-gap);
897
- padding:0;
898
- margin:0;
760
+ --tds-checkbox-label-color:var(--t-form-color);
899
761
 
900
- font-size:var(--tds-radio-group-font-size);
901
- line-height:var(--tds-radio-group-line-height);
902
- border:0;
762
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
763
+ --tds-checkbox-description-line-height:1.35;
764
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
765
+ --tds-checkbox-description-invalid-icon-display:none;
766
+
767
+ position:relative;
768
+ display:inline-grid;
769
+ grid-template-columns:auto;
770
+ grid-auto-columns:1fr;
771
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
772
+ line-height:var(--tds-checkbox-line-height);
773
+ cursor:var(--tds-checkbox-cursor);
774
+ -webkit-user-select:none;
775
+ -moz-user-select:none;
776
+ user-select:none;
903
777
  }
904
778
 
905
- .tds-radio-group legend{
906
- padding:0;
907
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
779
+ .tds-checkbox label{
780
+ grid-area:1 / 2;
781
+ font-size:var(--tds-checkbox-font-size);
782
+ font-weight:var(--t-font-weight-normal);
783
+ color:var(--tds-checkbox-label-color);
784
+ cursor:var(--tds-checkbox-cursor);
908
785
  }
909
786
 
910
- .tds-radio-group:has(.tds-radio-group-description){
911
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
787
+ .tds-checkbox tds-indeterminate{
788
+ display:flex;
912
789
  }
913
790
 
914
- .tds-radio-group[aria-invalid="true"]{
915
- --tds-radio-group-description-color:var(--t-text-color-status-error);
916
- --tds-radio-group-description-invalid-icon-display:inline-block;
791
+ .tds-checkbox input[type="checkbox"]{
792
+ position:relative;
793
+ width:1em;
794
+ height:1em;
795
+ margin:calc((1lh - 1em) / 2) 0 0;
796
+ font-size:var(--tds-checkbox-font-size);
797
+ line-height:inherit;
798
+ -webkit-appearance:none;
799
+ -moz-appearance:none;
800
+ appearance:none;
801
+ cursor:var(--tds-checkbox-cursor);
802
+ background-color:var(--tds-checkbox-input-background-color);
803
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
804
+ border-radius:var(--tds-checkbox-input-border-radius);
805
+ transition-timing-function:ease-in-out;
806
+ transition-duration:180ms;
807
+ transition-property:var(--tds-checkbox-transition-property);
917
808
  }
918
809
 
919
- .tds-radio-group[aria-invalid="true"] .tds-radio{
920
- --tds-radio-input-border-color:var(--t-form-border-color-error);
810
+ :is(.tds-checkbox input[type="checkbox"])::before{
811
+ position:absolute;
812
+ top:50%;
813
+ left:50%;
814
+ visibility:var(--tds-checkbox-input-icon-visibility);
815
+ width:100%;
816
+ height:100%;
817
+ content:"";
818
+ background-color:var(--tds-checkbox-input-icon-fill);
819
+ border-radius:var(--tds-checkbox-input-border-radius);
820
+ opacity:var(--tds-checkbox-input-icon-opacity);
821
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
822
+ mask-image:var(--tds-checkbox-input-icon);
823
+ -webkit-mask-repeat:no-repeat;
824
+ mask-repeat:no-repeat;
825
+ -webkit-mask-size:contain;
826
+ mask-size:contain;
827
+ transform:translate(-50%, -50%);
921
828
  }
922
829
 
923
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
924
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
925
- --tds-radio-input-background-color:var(--t-form-background-color-error);
926
- }
830
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
831
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
832
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
833
+ }
927
834
 
928
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
929
- --tds-radio-input-background-color:var(--t-form-background-color);
835
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
836
+ outline:var(--t-focus-ring-outline);
837
+ outline-offset:var(--t-focus-ring-offset);
838
+ }
839
+
840
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
841
+ pointer-events:none;
842
+ }
843
+
844
+ @media (prefers-reduced-motion: reduce){
845
+
846
+ .tds-checkbox input[type="checkbox"]{
847
+ --tds-checkbox-transition-property:none;
848
+ }
849
+ }
850
+
851
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
852
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
853
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
854
+ --tds-checkbox-input-icon-visibility:visible;
855
+ --tds-checkbox-input-icon-opacity:1;
856
+ }
857
+
858
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
859
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
860
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
861
+ }
862
+
863
+ .tds-checkbox:has(input:checked){
864
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
865
+ }
866
+
867
+ .tds-checkbox:has(input:indeterminate){
868
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
869
+ }
870
+
871
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
872
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
873
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
874
+ --tds-checkbox-description-invalid-icon-display:inline-block;
875
+ }
876
+
877
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
878
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
879
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
880
+ }
881
+
882
+ :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{
883
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
884
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
885
+ }
886
+
887
+ :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){
888
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
889
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
930
890
  }
931
891
 
932
- .tds-radio-group:has(input:required) legend::after{
892
+ .tds-checkbox:has(input:required) label::after{
933
893
  margin-left:.25ch;
934
894
  color:var(--t-text-color-status-error);
935
895
  content:"*";
936
896
  }
937
897
 
938
- .tds-radio-group-fields{
939
- display:flex;
940
- flex-direction:column;
941
- gap:var(--tds-radio-group-gap);
942
- align-items:flex-start;
943
- }
898
+ .tds-checkbox:has(input:disabled){
899
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
900
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
944
901
 
945
- .tds-radio-group-description{
902
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
903
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
904
+ --tds-checkbox-cursor:not-allowed;
905
+ }
906
+
907
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
908
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
909
+ }
910
+
911
+ .tds-checkbox-description{
946
912
  display:flex;
913
+ grid-area:2 / 2;
947
914
  gap:var(--t-spacing-half);
948
915
  align-items:flex-start;
949
916
  margin:0;
950
- font-size:var(--tds-radio-group-description-font-size);
951
- line-height:var(--tds-radio-group-description-line-height);
952
- color:var(--tds-radio-group-description-color);
917
+ font-size:var(--tds-checkbox-description-font-size);
918
+ line-height:var(--tds-checkbox-description-line-height);
919
+ color:var(--tds-checkbox-description-color);
953
920
  cursor:text;
954
921
  }
955
922
 
956
- .tds-radio-group-description-invalid-icon{
957
- display:var(--tds-radio-group-description-invalid-icon-display);
958
- flex-shrink:0;
959
- margin-top:calc(.5lh - .5em);
960
- line-height:var(--tds-radio-group-description-line-height);
961
- }
923
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
924
+ display:var(--tds-checkbox-description-invalid-icon-display);
925
+ flex-shrink:0;
926
+ margin-top:calc(.5lh - .5em);
927
+ line-height:var(--tds-checkbox-description-line-height);
928
+ }
962
929
 
963
- .tds-radio-group--sm{
964
- --tds-radio-group-line-height:1.35;
965
- --tds-radio-group-font-size:var(--t-font-size-sm);
966
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
967
- --tds-radio-group-description-line-height:1.3;
930
+ .tds-checkbox--sm{
931
+ --tds-checkbox-line-height:1.35;
932
+ --tds-checkbox-input-size:var(--t-element-size-sm);
933
+ --tds-checkbox-font-size:var(--t-font-size-sm);
934
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
935
+ --tds-checkbox-description-line-height:1.3;
968
936
  }
969
937
 
970
- .tds-select{
971
- --tds-select-border-color:var(--t-form-border-color);
972
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
973
- --tds-select-border-color-active:var(--t-form-border-color-hover);
974
- --tds-select-background-color:var(--t-form-background-color);
975
- --tds-select-color:var(--t-form-color);
976
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
977
- --tds-select-font-size:var(--t-font-size-md);
978
- --tds-select-min-height:var(--t-container-size-md);
979
- --tds-select-padding-block:6px;
980
- --tds-select-description-color:var(--t-text-color-secondary);
981
- --tds-select-description-invalid-icon-display:none;
982
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
983
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQzYTQwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIgNSA2IDYgNi02Ii8+PC9zdmc+");
984
- --tds-select-caret-size:.75em;
985
- --tds-select-caret-inline-offset:.75em;
986
- --tds-select-caret-transition:transform 180ms cubic-bezier(.45, 0, .4, 1);;
938
+ .tds-toggle-switch{
939
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
940
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
941
+ --tds-toggle-switch-cursor:pointer;
942
+ --tds-toggle-switch-display:inline-grid;
943
+ --tds-toggle-switch-line-height:1.4;
987
944
 
988
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
989
- --tds-select-dropdown-border:1px solid var(--t-border-color);
990
- --tds-select-dropdown-padding:var(--t-spacing-1);
991
- --tds-select-dropdown-margin-block:5px;
992
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
993
- --tds-select-dropdown-scrollbar-width:thin;
994
- --tds-select-dropdown-border-radius:var(--t-border-radius);
995
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
996
- --tds-select-dropdown-scroll-behavior:smooth;
997
- --tds-select-dropdown-transition-enter:opacity 160ms ease, transform 160ms cubic-bezier(0, 0, .4, 1), display 160ms allow-discrete, overlay 160ms allow-discrete;
998
- --tds-select-dropdown-transition-exit:opacity 130ms ease, transform 130ms cubic-bezier(.5, 0, 1, 1), display 130ms allow-discrete, overlay 130ms allow-discrete;
999
- --tds-select-dropdown-closed-opacity:0;
1000
- --tds-select-dropdown-open-opacity:1;
1001
- --tds-select-dropdown-closed-transform:translateY(-8px);
1002
- --tds-select-dropdown-open-transform:translateY(0);
945
+ --tds-toggle-switch-label-color:var(--t-form-color);
1003
946
 
1004
- --tds-select-option-gap:var(--t-spacing-1);
1005
- --tds-select-option-padding-block:var(--t-spacing-1);
1006
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1007
- --tds-select-option-font-size:1rem;
1008
- --tds-select-option-color:var(--t-text-color);
1009
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1010
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1011
- --tds-select-option-outline-offset:-1px;
1012
- --tds-select-option-border-radius:var(--t-border-radius);
947
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
948
+ --tds-toggle-switch-track-outline:none;
949
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
950
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
951
+ --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
1013
952
 
1014
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1015
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1016
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
1017
- --tds-select-group-label-font-size:var(--t-font-size-sm);
1018
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1019
- --tds-select-group-label-letter-spacing:0;
1020
- --tds-select-group-label-color:var(--t-text-color-secondary);
1021
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1022
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1023
- --tds-select-group-label-transition:color .3s ease;
953
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
954
+ --tds-toggle-switch-thumb-transform:translateX(0);
955
+ --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
1024
956
 
957
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
958
+ --tds-toggle-switch-description-line-height:1.35;
959
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1025
960
  position:relative;
1026
- display:flex;
1027
- flex-direction:column;
1028
- gap:var(--t-spacing-half);
1029
- }
1030
961
 
1031
- .tds-select :is(label,.tds-select-label){
1032
- font-size:var(--t-font-size-md);
1033
- font-weight:var(--t-font-weight-normal);
1034
- color:var(--t-text-color);
1035
- cursor:default;
1036
- }
962
+ display:var(--tds-toggle-switch-display);
963
+ grid-template-columns:auto;
964
+ grid-auto-columns:1fr;
965
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
966
+ -webkit-user-select:none;
967
+ -moz-user-select:none;
968
+ user-select:none;
969
+ }
1037
970
 
1038
- .tds-select :is(select,button){
1039
- position:relative;
1040
- place-items:center;
1041
- inline-size:100%;
1042
- min-block-size:var(--tds-select-min-height);
1043
- padding-block:var(--tds-select-padding-block);
1044
- padding-inline:var(--t-spacing-1);
1045
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1046
- font-family:inherit;
1047
- font-size:var(--tds-select-font-size);
1048
- line-height:1;
1049
- color:var(--tds-select-color);
1050
- text-align:left;
971
+ .tds-toggle-switch input[type="checkbox"]{
972
+ position:absolute;
973
+ width:var(--tds-toggle-switch-track-width);
974
+ height:var(--tds-toggle-switch-track-height);
975
+ margin:0;
1051
976
  -webkit-appearance:none;
1052
977
  -moz-appearance:none;
1053
978
  appearance:none;
1054
- cursor:var(--tds-select-cursor, default);
1055
- outline:var(--t-focus-ring-width) solid transparent;
1056
- outline-offset:0;
1057
- background-color:var(--tds-select-background-color);
1058
- background-image:var(--tds-select-background-image);
1059
- background-repeat:no-repeat;
1060
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
1061
- background-size:var(--tds-select-caret-size);
1062
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
1063
- border-radius:var(--t-form-border-radius);
1064
- transition-timing-function:ease-in-out;
1065
- transition-duration:160ms;
1066
- transition-property:var(--tds-select-transition-property);
979
+ cursor:var(--tds-toggle-switch-cursor);
980
+ outline:var(--tds-toggle-switch-track-outline);
981
+ outline-offset:var(--t-focus-ring-offset);
982
+ background-color:transparent;
983
+ border:0;
984
+ border-radius:var(--t-border-radius-round);
1067
985
  }
1068
986
 
1069
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1070
- border-color:var(--tds-select-border-color-hover);
987
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
988
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1071
989
  }
1072
990
 
1073
- :is(.tds-select :is(select,button)):focus{
1074
- outline-color:var(--t-focus-ring-color);
1075
- outline-offset:var(--t-focus-ring-offset);
1076
- border-color:var(--tds-select-border-color-active);
1077
- }
991
+ .tds-toggle-switch label{
992
+ display:inline-flex;
993
+ grid-area:1 / 2;
994
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
995
+ column-gap:var(--tds-toggle-switch-column-gap);
996
+ margin-top:-.09375em;
997
+ font-size:var(--tds-toggle-switch-font-size);
998
+ font-weight:var(--t-font-weight-normal);
999
+ line-height:var(--tds-toggle-switch-line-height);
1000
+ color:var(--tds-toggle-switch-label-color);
1001
+ cursor:var(--tds-toggle-switch-cursor);
1002
+ }
1078
1003
 
1079
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1080
- color:var(--tds-select-placeholder-color);
1081
- }
1004
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1005
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1006
+ }
1082
1007
 
1083
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1084
- --tds-select-border-color:var(--t-form-border-color-error);
1085
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1086
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1087
- --tds-select-background-color:var(--t-form-background-color-error);
1088
- --tds-select-description-color:var(--t-text-color-status-error);
1089
- --tds-select-description-invalid-icon-display:inline-block;
1008
+ .tds-toggle-switch:has(input:checked){
1009
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1010
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1090
1011
  }
1091
1012
 
1092
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1093
- margin-left:.25ch;
1094
- color:var(--t-text-color-status-error);
1095
- content:"*";
1013
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1014
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1096
1015
  }
1097
1016
 
1098
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1099
- --tds-select-border-color:var(--t-form-border-color-disabled);
1100
- --tds-select-background-color:var(--t-form-background-color-disabled);
1101
- --tds-select-color:var(--t-form-color-disabled);
1102
- --tds-select-cursor:not-allowed;
1017
+ .tds-toggle-switch:has(input:disabled){
1018
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1019
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1020
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1021
+ --tds-toggle-switch-cursor:not-allowed;
1103
1022
  }
1104
1023
 
1105
- .tds-select:has( > [popover]:popover-open) > button{
1106
- border-color:var(--tds-select-border-color-active);
1024
+ .tds-toggle-switch-track{
1025
+ position:relative;
1026
+ flex-shrink:0;
1027
+ width:var(--tds-toggle-switch-track-width);
1028
+ height:var(--tds-toggle-switch-track-height);
1029
+ background-color:var(--tds-toggle-switch-track-background-color);
1030
+ border-radius:var(--t-border-radius-round);
1031
+ transition:var(--tds-toggle-switch-track-transition);
1032
+ }
1033
+
1034
+ .tds-toggle-switch-track::before{
1035
+ position:absolute;
1036
+ top:var(--t-spacing-fourth);
1037
+ left:var(--t-spacing-fourth);
1038
+ width:var(--tds-toggle-switch-thumb-size);
1039
+ height:var(--tds-toggle-switch-thumb-size);
1040
+ content:"";
1041
+ background-color:#fff;
1042
+ border-radius:var(--t-border-radius-round);
1043
+ transform:var(--tds-toggle-switch-thumb-transform);
1044
+ transition:var(--tds-toggle-switch-thumb-transition);
1107
1045
  }
1108
1046
 
1109
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1110
- transform:translateY(-50%) rotate(.5turn);
1111
- }
1047
+ @media (prefers-reduced-motion: reduce){
1112
1048
 
1113
- .tds-select :is(hr,li[role="separator"]){
1114
- margin-block:var(--t-spacing-half);
1115
- color:var(--tds-select-border-color);
1116
- border:0;
1117
- border-top:1px solid;
1049
+ .tds-toggle-switch-track{
1050
+ --tds-toggle-switch-track-transition:none;
1051
+ --tds-toggle-switch-thumb-transition:none;
1052
+ }
1118
1053
  }
1119
1054
 
1120
- .tds-select :is(li[role="option"],option:not([hidden])){
1121
- display:block;
1122
- padding-block:var(--tds-select-option-padding-block);
1123
- padding-inline:var(--tds-select-option-padding-inline);
1124
- overflow:hidden;
1125
- text-overflow:ellipsis;
1126
- font-size:var(--tds-select-option-font-size);
1127
- color:var(--tds-select-option-color);
1128
- white-space:nowrap;
1129
- cursor:default;
1130
- outline-offset:var(--tds-select-option-outline-offset);
1131
- border-radius:var(--tds-select-option-border-radius);
1055
+ .tds-toggle-switch-description{
1056
+ display:flex;
1057
+ grid-area:2 / 2;
1058
+ align-items:flex-start;
1059
+ margin:0;
1060
+ font-size:var(--tds-toggle-switch-description-font-size);
1061
+ line-height:var(--tds-toggle-switch-description-line-height);
1062
+ color:var(--tds-toggle-switch-description-color);
1063
+ cursor:text;
1064
+ }
1065
+
1066
+ .tds-toggle-switch--sm{
1067
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1068
+ --tds-toggle-switch-line-height:1.35;
1069
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1070
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1071
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1072
+ --tds-toggle-switch-description-line-height:1.3;
1073
+ }
1074
+
1075
+ .tds-toggle-switch--hide-label{
1076
+ --tds-toggle-switch-display:inline-flex;
1077
+ }
1078
+
1079
+ .tds-input:has(textarea){
1080
+ --tds-input-padding-block:6px;
1081
+ --tds-input-resizer-size:var(--t-element-size-sm);
1082
+ --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");
1083
+ }
1084
+
1085
+ @supports (x: attr(x type(*))){
1086
+
1087
+ .tds-input:has(textarea){
1088
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1089
+ }
1132
1090
  }
1133
1091
 
1134
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1135
- outline:var(--t-focus-ring-outline);
1136
- outline-offset:var(--tds-select-option-outline-offset);
1092
+ .tds-input.tds-textarea--resize-vertical textarea{
1093
+ resize:vertical;
1137
1094
  }
1138
1095
 
1139
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1140
- background:var(--tds-select-option-background-hover);
1096
+ .tds-input.tds-textarea--resize-none textarea{
1097
+ resize:none;
1141
1098
  }
1142
1099
 
1143
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked){
1144
- background:var(--tds-select-option-background-active);
1100
+ .tds-input.tds-textarea--resize-auto textarea{
1101
+ resize:vertical;
1145
1102
  }
1146
1103
 
1147
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1148
- color:var(--t-form-color-disabled);
1149
- cursor:not-allowed;
1104
+ @supports (field-sizing: content){
1105
+ .tds-input.tds-textarea--resize-auto textarea{
1106
+ field-sizing:content;
1107
+ resize:none;
1108
+ }
1150
1109
  }
1151
1110
 
1152
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1153
- background:transparent;
1154
- }
1111
+ .tds-input textarea{
1112
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1113
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1114
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1115
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1116
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1117
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1118
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1119
+ --tds-input-scrollbar-thumb-border-radius:999px;
1120
+ --tds-input-scrollbar-thumb-border-width:3px;
1121
+ --tds-input-scrollbar-track-margin-block:.125rem;
1122
+ scrollbar-color:initial;
1123
+ transition-timing-function:ease-in-out;
1124
+ transition-duration:180ms;
1125
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1126
+ }
1155
1127
 
1156
- .tds-select :is(li[role="presentation"],legend){
1157
- position:sticky;
1158
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1159
- z-index:1;
1160
- float:inline-start;
1161
- inline-size:100%;
1162
- padding-block:var(--tds-select-group-label-padding-block);
1163
- padding-inline:var(--tds-select-group-label-padding-inline);
1164
- container-type:scroll-state;
1165
- font-size:var(--tds-select-group-label-font-size);
1166
- font-weight:var(--tds-select-group-label-font-weight);
1167
- letter-spacing:var(--tds-select-group-label-letter-spacing);
1168
- background:var(--tds-select-group-label-background);
1169
- text-box:trim-both cap alphabetic;
1170
- }
1128
+ @media (pointer: fine){
1129
+ :is(.tds-input textarea)::-webkit-scrollbar{
1130
+ width:12px;
1131
+ height:12px;
1132
+ cursor:default;
1133
+ }
1171
1134
 
1172
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1173
- display:inline-flex;
1174
- gap:var(--t-spacing-half);
1175
- align-items:center;
1176
- color:var(--tds-select-group-label-color);
1177
- transition:var(--tds-select-group-label-transition);
1135
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1136
+ cursor:default;
1137
+ background:var(--tds-input-scrollbar-thumb-color);
1138
+ background-clip:content-box;
1139
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1140
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1178
1141
  }
1179
1142
 
1180
- @container scroll-state(stuck){
1143
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1144
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1145
+ }
1181
1146
 
1182
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1183
- color:var(--tds-select-group-label-color-stuck);
1147
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1148
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1184
1149
  }
1185
1150
 
1186
- @media (forced-colors: active){
1151
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1152
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1153
+ }
1187
1154
 
1188
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1189
- color:var(--tds-select-group-label-color-stuck);
1155
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1156
+ background:var(--tds-input-scrollbar-surface-color);
1190
1157
  }
1191
- }
1158
+
1159
+ :is(.tds-input textarea)::-webkit-resizer{
1160
+ background:var(--tds-input-resizer-icon) no-repeat;
1161
+ background-position:right bottom;
1162
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1163
+ }
1164
+
1165
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1166
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1167
+ cursor:default;
1168
+ }
1169
+
1170
+ @supports (-moz-appearance: none){
1171
+ :is(.tds-input textarea){
1172
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1173
+ scrollbar-width:thin;
1192
1174
  }
1193
1175
 
1194
- .tds-select.tds-select--lg{
1195
- --tds-select-min-height:var(--t-container-size-lg);
1196
- --tds-select-font-size:var(--t-font-size-lg);
1176
+ @media (hover){
1177
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1178
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1179
+ }
1180
+ }
1181
+ }
1197
1182
  }
1198
1183
 
1199
- @media (prefers-reduced-motion: reduce){
1184
+ .tds-radio-group{
1185
+ --tds-radio-group-font-size:var(--t-font-size-md);
1186
+ --tds-radio-group-line-height:1.4;
1187
+ --tds-radio-group-gap:var(--t-spacing-1);
1200
1188
 
1201
- .tds-select{
1202
- --tds-select-transition-property:none;
1203
- --tds-select-dropdown-transition-enter:none;
1204
- --tds-select-dropdown-transition-exit:none;
1205
- --tds-select-dropdown-scroll-behavior:auto;
1206
- --tds-select-dropdown-closed-transform:none;
1207
- --tds-select-dropdown-open-transform:none;
1208
- --tds-select-caret-transition:none;
1209
- }
1210
- }
1189
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1211
1190
 
1212
- .tds-select-description{
1191
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1192
+ --tds-radio-group-description-line-height:1.35;
1193
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1194
+ --tds-radio-group-description-invalid-icon-display:none;
1213
1195
  display:flex;
1214
- gap:var(--t-spacing-half);
1215
- align-items:flex-start;
1196
+ flex-direction:column;
1197
+ gap:var(--tds-radio-group-gap);
1198
+ padding:0;
1216
1199
  margin:0;
1217
- font-size:var(--t-font-size-sm);
1218
- line-height:1.35;
1219
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1200
+
1201
+ font-size:var(--tds-radio-group-font-size);
1202
+ line-height:var(--tds-radio-group-line-height);
1203
+ border:0;
1204
+ }
1205
+
1206
+ .tds-radio-group legend{
1207
+ padding:0;
1208
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1209
+ }
1210
+
1211
+ .tds-radio-group:has(.tds-radio-group-description){
1212
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1213
+ }
1214
+
1215
+ .tds-radio-group[aria-invalid="true"]{
1216
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1217
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1218
+ }
1219
+
1220
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1221
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1222
+ }
1223
+
1224
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1225
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1226
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1227
+ }
1228
+
1229
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1230
+ --tds-radio-input-background-color:var(--t-form-background-color);
1231
+ }
1232
+
1233
+ .tds-radio-group:has(input:required) legend::after{
1234
+ margin-left:.25ch;
1235
+ color:var(--t-text-color-status-error);
1236
+ content:"*";
1237
+ }
1238
+
1239
+ .tds-radio-group-fields{
1240
+ display:flex;
1241
+ flex-direction:column;
1242
+ gap:var(--tds-radio-group-gap);
1243
+ align-items:flex-start;
1244
+ }
1245
+
1246
+ .tds-radio-group-description{
1247
+ display:flex;
1248
+ gap:var(--t-spacing-half);
1249
+ align-items:flex-start;
1250
+ margin:0;
1251
+ font-size:var(--tds-radio-group-description-font-size);
1252
+ line-height:var(--tds-radio-group-description-line-height);
1253
+ color:var(--tds-radio-group-description-color);
1254
+ cursor:text;
1255
+ }
1256
+
1257
+ .tds-radio-group-description-invalid-icon{
1258
+ display:var(--tds-radio-group-description-invalid-icon-display);
1259
+ flex-shrink:0;
1260
+ margin-top:calc(.5lh - .5em);
1261
+ line-height:var(--tds-radio-group-description-line-height);
1262
+ }
1263
+
1264
+ .tds-radio-group--sm{
1265
+ --tds-radio-group-line-height:1.35;
1266
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1267
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1268
+ --tds-radio-group-description-line-height:1.3;
1269
+ }
1270
+
1271
+ .tds-select{
1272
+ --tds-select-border-color:var(--t-form-border-color);
1273
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1274
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1275
+ --tds-select-background-color:var(--t-form-background-color);
1276
+ --tds-select-color:var(--t-form-color);
1277
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1278
+ --tds-select-font-size:var(--t-font-size-md);
1279
+ --tds-select-min-height:var(--t-container-size-md);
1280
+ --tds-select-padding-block:6px;
1281
+ --tds-select-description-color:var(--t-text-color-secondary);
1282
+ --tds-select-description-invalid-icon-display:none;
1283
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1284
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzQzYTQwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIgNSA2IDYgNi02Ii8+PC9zdmc+");
1285
+ --tds-select-caret-size:.75em;
1286
+ --tds-select-caret-inline-offset:.75em;
1287
+ --tds-select-caret-transition:transform 180ms cubic-bezier(.45, 0, .4, 1);;
1288
+
1289
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1290
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1291
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1292
+ --tds-select-dropdown-margin-block:5px;
1293
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1294
+ --tds-select-dropdown-scrollbar-width:thin;
1295
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1296
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1297
+ --tds-select-dropdown-scroll-behavior:smooth;
1298
+ --tds-select-dropdown-transition-enter:opacity 160ms ease, transform 160ms cubic-bezier(0, 0, .4, 1), display 160ms allow-discrete, overlay 160ms allow-discrete;
1299
+ --tds-select-dropdown-transition-exit:opacity 130ms ease, transform 130ms cubic-bezier(.5, 0, 1, 1), display 130ms allow-discrete, overlay 130ms allow-discrete;
1300
+ --tds-select-dropdown-closed-opacity:0;
1301
+ --tds-select-dropdown-open-opacity:1;
1302
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1303
+ --tds-select-dropdown-open-transform:translateY(0);
1304
+
1305
+ --tds-select-option-gap:var(--t-spacing-1);
1306
+ --tds-select-option-padding-block:var(--t-spacing-1);
1307
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1308
+ --tds-select-option-font-size:1rem;
1309
+ --tds-select-option-color:var(--t-text-color);
1310
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1311
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1312
+ --tds-select-option-outline-offset:-1px;
1313
+ --tds-select-option-border-radius:var(--t-border-radius);
1314
+
1315
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1316
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1317
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1318
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1319
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1320
+ --tds-select-group-label-letter-spacing:0;
1321
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1322
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1323
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1324
+ --tds-select-group-label-transition:color .3s ease;
1325
+
1326
+ position:relative;
1327
+ display:flex;
1328
+ flex-direction:column;
1329
+ gap:var(--t-spacing-half);
1330
+ }
1331
+
1332
+ .tds-select :is(label,.tds-select-label){
1333
+ font-size:var(--t-font-size-md);
1334
+ font-weight:var(--t-font-weight-normal);
1335
+ color:var(--t-text-color);
1336
+ cursor:default;
1337
+ }
1338
+
1339
+ .tds-select :is(select,button){
1340
+ position:relative;
1341
+ place-items:center;
1342
+ inline-size:100%;
1343
+ min-block-size:var(--tds-select-min-height);
1344
+ padding-block:var(--tds-select-padding-block);
1345
+ padding-inline:var(--t-spacing-1);
1346
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1347
+ font-family:inherit;
1348
+ font-size:var(--tds-select-font-size);
1349
+ line-height:1;
1350
+ color:var(--tds-select-color);
1351
+ text-align:left;
1352
+ -webkit-appearance:none;
1353
+ -moz-appearance:none;
1354
+ appearance:none;
1355
+ cursor:var(--tds-select-cursor, default);
1356
+ outline:var(--t-focus-ring-width) solid transparent;
1357
+ outline-offset:0;
1358
+ background-color:var(--tds-select-background-color);
1359
+ background-image:var(--tds-select-background-image);
1360
+ background-repeat:no-repeat;
1361
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1362
+ background-size:var(--tds-select-caret-size);
1363
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1364
+ border-radius:var(--t-form-border-radius);
1365
+ transition-timing-function:ease-in-out;
1366
+ transition-duration:160ms;
1367
+ transition-property:var(--tds-select-transition-property);
1368
+ }
1369
+
1370
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1371
+ border-color:var(--tds-select-border-color-hover);
1372
+ }
1373
+
1374
+ :is(.tds-select :is(select,button)):focus{
1375
+ outline-color:var(--t-focus-ring-color);
1376
+ outline-offset:var(--t-focus-ring-offset);
1377
+ border-color:var(--tds-select-border-color-active);
1378
+ }
1379
+
1380
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1381
+ color:var(--tds-select-placeholder-color);
1382
+ }
1383
+
1384
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1385
+ --tds-select-border-color:var(--t-form-border-color-error);
1386
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1387
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1388
+ --tds-select-background-color:var(--t-form-background-color-error);
1389
+ --tds-select-description-color:var(--t-text-color-status-error);
1390
+ --tds-select-description-invalid-icon-display:inline-block;
1391
+ }
1392
+
1393
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1394
+ margin-left:.25ch;
1395
+ color:var(--t-text-color-status-error);
1396
+ content:"*";
1397
+ }
1398
+
1399
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1400
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1401
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1402
+ --tds-select-color:var(--t-form-color-disabled);
1403
+ --tds-select-cursor:not-allowed;
1404
+ }
1405
+
1406
+ .tds-select:has( > [popover]:popover-open) > button{
1407
+ border-color:var(--tds-select-border-color-active);
1408
+ }
1409
+
1410
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1411
+ transform:translateY(-50%) rotate(.5turn);
1412
+ }
1413
+
1414
+ .tds-select :is(hr,li[role="separator"]){
1415
+ margin-block:var(--t-spacing-half);
1416
+ color:var(--tds-select-border-color);
1417
+ border:0;
1418
+ border-top:1px solid;
1419
+ }
1420
+
1421
+ .tds-select :is(li[role="option"],option:not([hidden])){
1422
+ display:block;
1423
+ padding-block:var(--tds-select-option-padding-block);
1424
+ padding-inline:var(--tds-select-option-padding-inline);
1425
+ overflow:hidden;
1426
+ text-overflow:ellipsis;
1427
+ font-size:var(--tds-select-option-font-size);
1428
+ color:var(--tds-select-option-color);
1429
+ white-space:nowrap;
1430
+ cursor:default;
1431
+ outline-offset:var(--tds-select-option-outline-offset);
1432
+ border-radius:var(--tds-select-option-border-radius);
1433
+ }
1434
+
1435
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1436
+ outline:var(--t-focus-ring-outline);
1437
+ outline-offset:var(--tds-select-option-outline-offset);
1438
+ }
1439
+
1440
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1441
+ background:var(--tds-select-option-background-hover);
1442
+ }
1443
+
1444
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked){
1445
+ background:var(--tds-select-option-background-active);
1446
+ }
1447
+
1448
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1449
+ color:var(--t-form-color-disabled);
1450
+ cursor:not-allowed;
1451
+ }
1452
+
1453
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1454
+ background:transparent;
1455
+ }
1456
+
1457
+ .tds-select :is(li[role="presentation"],legend){
1458
+ position:sticky;
1459
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1460
+ z-index:1;
1461
+ float:inline-start;
1462
+ inline-size:100%;
1463
+ padding-block:var(--tds-select-group-label-padding-block);
1464
+ padding-inline:var(--tds-select-group-label-padding-inline);
1465
+ container-type:scroll-state;
1466
+ font-size:var(--tds-select-group-label-font-size);
1467
+ font-weight:var(--tds-select-group-label-font-weight);
1468
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1469
+ background:var(--tds-select-group-label-background);
1470
+ text-box:trim-both cap alphabetic;
1471
+ }
1472
+
1473
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1474
+ display:inline-flex;
1475
+ gap:var(--t-spacing-half);
1476
+ align-items:center;
1477
+ color:var(--tds-select-group-label-color);
1478
+ transition:var(--tds-select-group-label-transition);
1479
+ }
1480
+
1481
+ @container scroll-state(stuck){
1482
+
1483
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1484
+ color:var(--tds-select-group-label-color-stuck);
1485
+ }
1486
+
1487
+ @media (forced-colors: active){
1488
+
1489
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1490
+ color:var(--tds-select-group-label-color-stuck);
1491
+ }
1492
+ }
1493
+ }
1494
+
1495
+ .tds-select.tds-select--lg{
1496
+ --tds-select-min-height:var(--t-container-size-lg);
1497
+ --tds-select-font-size:var(--t-font-size-lg);
1498
+ }
1499
+
1500
+ @media (prefers-reduced-motion: reduce){
1501
+
1502
+ .tds-select{
1503
+ --tds-select-transition-property:none;
1504
+ --tds-select-dropdown-transition-enter:none;
1505
+ --tds-select-dropdown-transition-exit:none;
1506
+ --tds-select-dropdown-scroll-behavior:auto;
1507
+ --tds-select-dropdown-closed-transform:none;
1508
+ --tds-select-dropdown-open-transform:none;
1509
+ --tds-select-caret-transition:none;
1510
+ }
1511
+ }
1512
+
1513
+ .tds-select-description{
1514
+ display:flex;
1515
+ gap:var(--t-spacing-half);
1516
+ align-items:flex-start;
1517
+ margin:0;
1518
+ font-size:var(--t-font-size-sm);
1519
+ line-height:1.35;
1520
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1220
1521
  cursor:text;
1221
1522
  }
1222
1523
 
@@ -1290,438 +1591,113 @@
1290
1591
  box-shadow:var(--tds-select-dropdown-box-shadow);
1291
1592
  opacity:var(--tds-select-dropdown-open-opacity);
1292
1593
  transform:var(--tds-select-dropdown-open-transform);
1293
- transition:var(--tds-select-dropdown-transition-enter);
1294
- }
1295
-
1296
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1297
- opacity:var(--tds-select-dropdown-closed-opacity);
1298
- transform:var(--tds-select-dropdown-closed-transform);
1299
- transition:var(--tds-select-dropdown-transition-exit);
1300
- }
1301
-
1302
- :is(.tds-select:has( > button) [popover]) ul{
1303
- padding:0;
1304
- margin:0;
1305
- list-style:none;
1306
- }
1307
-
1308
- @starting-style{
1309
- :is(.tds-select:has( > button) [popover]):popover-open{
1310
- opacity:var(--tds-select-dropdown-closed-opacity);
1311
- transform:var(--tds-select-dropdown-closed-transform);
1312
- }
1313
- }
1314
-
1315
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1316
- .tds-select select:has(> button){
1317
- padding-inline-end:0;
1318
- background-image:none;
1319
- }
1320
- @media (hover) and (pointer: fine){
1321
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1322
- padding-block:0;
1323
- -webkit-appearance:base-select;
1324
- -moz-appearance:base-select;
1325
- appearance:base-select;
1326
- }
1327
- }
1328
- :is(.tds-select select:has( > button))::picker-icon{
1329
- flex-shrink:0;
1330
- width:var(--tds-select-caret-size);
1331
- margin-inline-end:var(--tds-select-caret-inline-offset);
1332
- content:var(--tds-select-background-image);
1333
- transition:var(--tds-select-caret-transition);
1334
- }
1335
-
1336
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1337
- opacity:var(--tds-select-dropdown-closed-opacity);
1338
- transform:var(--tds-select-dropdown-closed-transform);
1339
- transition:var(--tds-select-dropdown-transition-exit);
1340
- }
1341
-
1342
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1343
- outline-color:var(--t-focus-ring-color);
1344
- outline-offset:var(--t-focus-ring-offset);
1345
- border-color:var(--tds-select-border-color-active);
1346
- }
1347
-
1348
- :is(.tds-select select:has( > button)):open::picker-icon{
1349
- opacity:1;
1350
- transform:rotate(.5turn);
1351
- }
1352
-
1353
- :is(.tds-select select:has( > button)) selectedcontent{
1354
- overflow:hidden;
1355
- text-overflow:ellipsis;
1356
- line-height:calc(var(--tds-select-min-height) - 2px);
1357
- white-space:nowrap;
1358
- }
1359
-
1360
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1361
- color:var(--tds-select-placeholder-color);
1362
- }
1363
-
1364
- :is(.tds-select select:has( > button))::picker(select){
1365
- inset:auto;
1366
- inline-size:-moz-max-content;
1367
- inline-size:max-content;
1368
- min-inline-size:anchor-size(width);
1369
- max-inline-size:100vi;
1370
- padding:var(--tds-select-dropdown-padding);
1371
- margin-block:var(--tds-select-dropdown-margin-block);
1372
- position-try-fallbacks:flip-block, flip-inline;
1373
- overflow:clip;
1374
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1375
- -webkit-user-select:none;
1376
- -moz-user-select:none;
1377
- user-select:none;
1378
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1379
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1380
- background:var(--tds-select-dropdown-background-color);
1381
- border:var(--tds-select-dropdown-border);
1382
- border-radius:var(--tds-select-dropdown-border-radius);
1383
- box-shadow:var(--tds-select-dropdown-box-shadow);
1384
- opacity:var(--tds-select-dropdown-open-opacity);
1385
- transform:var(--tds-select-dropdown-open-transform);
1386
- transition:var(--tds-select-dropdown-transition-enter);
1387
- }
1388
-
1389
- :is(.tds-select select:has( > button)) option::checkmark{
1390
- display:none;
1391
- }
1392
-
1393
- @starting-style{
1394
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1395
- opacity:var(--tds-select-dropdown-closed-opacity);
1396
- transform:var(--tds-select-dropdown-closed-transform);
1397
- }
1398
- }
1399
- }
1400
-
1401
-
1402
- @media (prefers-reduced-motion: no-preference){
1403
-
1404
- :root{
1405
- interpolate-size:allow-keywords;
1406
- }
1407
- }
1408
-
1409
- @layer tds-component{
1410
- tds-sidenav,
1411
- .tds-sidenav{
1412
- --tds-sidenav-indent:12px;
1413
- --tds-sidenav-item-depth:0;
1414
-
1415
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
1416
-
1417
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1418
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1419
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1420
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1421
-
1422
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1423
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1424
- --tds-sidenav-item-nested-background-selected:transparent;
1425
-
1426
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1427
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1428
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1429
-
1430
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1431
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1432
- }
1433
-
1434
- .tds-sidenav--theme-gray{
1435
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1436
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1437
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1438
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1439
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1440
- }
1441
- }
1442
-
1443
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1444
- display:flex;
1445
- }
1446
-
1447
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1448
- flex-direction:column;
1449
- gap:var(--t-spacing-half);
1450
- width:100%;
1451
- }
1452
-
1453
- .tds-sidenav-section-list{
1454
- width:100%;
1455
- padding:0;
1456
- margin:0;
1457
- list-style:none;
1458
- }
1459
-
1460
- .tds-sidenav-section-header{
1461
- display:flex;
1462
- align-items:baseline;
1463
- justify-content:space-between;
1464
- padding-top:var(--t-spacing-2);
1465
- }
1466
-
1467
- .tds-sidenav-section-header h2{
1468
- margin:0;
1469
- font-size:var(--t-font-size-sm);
1470
- font-weight:var(--t-font-weight-semibold);
1471
- line-height:1.35;
1472
- color:var(--t-text-color-secondary);
1473
- text-transform:uppercase;
1474
- }
1475
-
1476
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1477
- padding-top:0;
1478
- }
1479
-
1480
- .tds-sidenav-section-header [slot="label-actions"]{
1481
- display:flex;
1482
- gap:var(--t-spacing-half);
1483
- align-items:center;
1484
- }
1485
-
1486
- .tds-sidenav-section [slot="section-actions"]{
1487
- display:flex;
1488
- gap:12px;
1489
- align-items:center;
1490
- min-height:42px;
1491
- padding:var(--t-spacing-1) 0;
1492
- }
1493
-
1494
- .tds-sidenav-section-list,
1495
- .tds-sidenav-item{
1496
- width:100%;
1497
- padding:0;
1498
- margin:0;
1499
- }
1500
-
1501
- .tds-sidenav-item :is(a,button){
1502
- position:relative;
1503
- display:flex;
1504
- gap:12px;
1505
- align-items:center;
1506
- width:100%;
1507
- padding:12px;
1508
- overflow:hidden;
1509
- font-size:var(--t-font-size-sm);
1510
- line-height:18px;
1511
- color:var(--t-text-color-headline);
1512
- white-space:nowrap;
1513
- text-decoration:none;
1514
- -webkit-appearance:none;
1515
- -moz-appearance:none;
1516
- appearance:none;
1517
- cursor:pointer;
1518
- background-color:var(--tds-sidenav-item-background, transparent);
1519
- border:0;
1520
- border-radius:var(--t-border-radius);
1521
- transition:var(--tds-sidenav-item-transition);
1594
+ transition:var(--tds-select-dropdown-transition-enter);
1522
1595
  }
1523
1596
 
1524
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1525
- display:block;
1526
- flex:1;
1527
- overflow:hidden;
1528
- text-overflow:ellipsis;
1529
- text-align:left;
1530
- white-space:nowrap;
1531
- }
1532
-
1533
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1534
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1535
- color:var(--t-text-color-headline);
1536
- text-decoration:none;
1597
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1598
+ opacity:var(--tds-select-dropdown-closed-opacity);
1599
+ transform:var(--tds-select-dropdown-closed-transform);
1600
+ transition:var(--tds-select-dropdown-transition-exit);
1537
1601
  }
1538
1602
 
1539
- :is(.tds-sidenav-item :is(a,button)):active{
1540
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1603
+ :is(.tds-select:has( > button) [popover]) ul{
1604
+ padding:0;
1605
+ margin:0;
1606
+ list-style:none;
1541
1607
  }
1542
1608
 
1543
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1544
- overflow:hidden;
1545
- color:var(--tds-sidenav-item-icon-color);
1609
+ @starting-style{
1610
+ :is(.tds-select:has( > button) [popover]):popover-open{
1611
+ opacity:var(--tds-select-dropdown-closed-opacity);
1612
+ transform:var(--tds-select-dropdown-closed-transform);
1613
+ }
1546
1614
  }
1547
1615
 
1548
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1549
- display:block;
1550
- width:var(--tds-sidenav-item-icon-size);
1551
- height:var(--tds-sidenav-item-icon-size);
1616
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1617
+ .tds-select select:has(> button){
1618
+ padding-inline-end:0;
1619
+ background-image:none;
1620
+ }
1621
+ @media (hover) and (pointer: fine){
1622
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1623
+ padding-block:0;
1624
+ -webkit-appearance:base-select;
1625
+ -moz-appearance:base-select;
1626
+ appearance:base-select;
1552
1627
  }
1553
-
1554
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1555
- --tds-sidenav-indent:19px;
1556
1628
  }
1557
-
1558
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1559
- visibility:visible;
1560
- block-size:auto;
1561
- opacity:1;
1629
+ :is(.tds-select select:has( > button))::picker-icon{
1630
+ flex-shrink:0;
1631
+ width:var(--tds-select-caret-size);
1632
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1633
+ content:var(--tds-select-background-image);
1634
+ transition:var(--tds-select-caret-transition);
1562
1635
  }
1563
1636
 
1564
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1565
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1566
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1567
-
1568
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1569
- font-weight:var(--t-font-weight-semibold);
1570
- }
1571
-
1572
- .tds-sidenav-item:has(.tds-sidenav-section){
1573
- display:flex;
1574
- flex-direction:column;
1575
- gap:var(--t-spacing-half);
1576
- }
1577
-
1578
- .tds-sidenav-item .tds-sidenav-section-list{
1579
- --tds-sidenav-item-depth:1;
1580
- gap:0;
1581
- }
1582
-
1583
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1584
- visibility:hidden;
1585
- block-size:0;
1586
- overflow-y:clip;
1587
- opacity:0;
1588
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1637
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1638
+ opacity:var(--tds-select-dropdown-closed-opacity);
1639
+ transform:var(--tds-select-dropdown-closed-transform);
1640
+ transition:var(--tds-select-dropdown-transition-exit);
1589
1641
  }
1590
1642
 
1591
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1592
- --tds-sidenav-item-depth:2;
1643
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1644
+ outline-color:var(--t-focus-ring-color);
1645
+ outline-offset:var(--t-focus-ring-offset);
1646
+ border-color:var(--tds-select-border-color-active);
1593
1647
  }
1594
1648
 
1595
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1596
- min-height:var(--t-element-size-2xl);
1597
- padding-block:9px;
1598
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1599
- line-height:1;
1600
- background-color:transparent;
1649
+ :is(.tds-select select:has( > button)):open::picker-icon{
1650
+ opacity:1;
1651
+ transform:rotate(.5turn);
1601
1652
  }
1602
1653
 
1603
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1604
- position:absolute;
1605
- top:0;
1606
- bottom:0;
1607
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1608
- width:2px;
1609
- content:"";
1610
- background-color:var(--tds-sidenav-item-nested-border-color);
1611
- transition:var(--tds-sidenav-item-transition);
1612
- }
1613
-
1614
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1615
- position:absolute;
1616
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1617
- z-index:-1;
1618
- height:100%;
1619
- content:"";
1620
- background-color:var(--tds-sidenav-item-nested-background);
1621
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1622
- transition:var(--tds-sidenav-item-transition);
1623
- }
1624
-
1625
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1626
- display:block;
1627
- text-align:left;
1628
- white-space:normal;
1629
- }
1630
-
1631
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1632
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1633
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1634
- }
1635
-
1636
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1637
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1638
- }
1639
-
1640
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1641
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1642
- font-weight:var(--t-font-weight-medium);
1654
+ :is(.tds-select select:has( > button)) selectedcontent{
1655
+ overflow:hidden;
1656
+ text-overflow:ellipsis;
1657
+ line-height:calc(var(--tds-select-min-height) - 2px);
1658
+ white-space:nowrap;
1643
1659
  }
1644
1660
 
1645
- .tds-sidenav-responsive-header{
1646
- display:flex;
1647
- gap:var(--t-spacing-2);
1648
- align-items:center;
1649
- width:100%;
1650
- }
1651
-
1652
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1653
- order:0;
1654
- }
1655
-
1656
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1657
- flex:1;
1658
- order:1;
1659
- margin:0;
1660
- font-size:var(--t-font-size-lg);
1661
- font-weight:var(--t-font-weight-medium);
1662
- color:var(--t-text-color-headline);
1663
- }
1664
-
1665
- @media (max-width: 719px){
1666
- .tds-sidenav-collapse{
1667
- z-index:10001;
1668
- display:none;
1669
- max-width:min(448px, calc(100vw - 48px));
1670
- padding:0;
1671
- margin:12px 0;
1672
- overflow:hidden;
1673
- outline:0;
1674
- background:var(--t-surface-color-card);
1675
- border:0;
1676
- border-radius:6px;
1677
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1678
- will-change:transform;
1679
- position-area:bottom span-right;
1680
- }
1681
-
1682
- .tds-sidenav-scroll-container{
1683
- --webkit-overflow-scrolling:touch;
1684
- display:block;
1685
- width:100%;
1686
- height:-moz-fit-content;
1687
- height:fit-content;
1688
- padding:var(--t-spacing-2);
1689
- overflow-y:auto;
1690
- }
1691
-
1692
- .tds-sidenav-item :is(a, button) :is(.prefix){
1693
- display:none;
1694
- }
1695
- @supports selector(:popover-open){
1696
- .tds-sidenav-collapse:popover-open{
1697
- display:flex;
1698
- }
1699
- }
1700
- @supports not selector(:popover-open){
1701
- .tds-sidenav-collapse.\:popover-open{
1702
- display:flex;
1661
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1662
+ color:var(--tds-select-placeholder-color);
1703
1663
  }
1704
- }
1705
- }
1706
-
1707
- @media (min-width: 720px){
1708
- .tds-sidenav-responsive-header{
1709
- display:none;
1710
- }
1711
- }
1712
1664
 
1713
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1714
- display:none;
1665
+ :is(.tds-select select:has( > button))::picker(select){
1666
+ inset:auto;
1667
+ inline-size:-moz-max-content;
1668
+ inline-size:max-content;
1669
+ min-inline-size:anchor-size(width);
1670
+ max-inline-size:100vi;
1671
+ padding:var(--tds-select-dropdown-padding);
1672
+ margin-block:var(--tds-select-dropdown-margin-block);
1673
+ position-try-fallbacks:flip-block, flip-inline;
1674
+ overflow:clip;
1675
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1676
+ -webkit-user-select:none;
1677
+ -moz-user-select:none;
1678
+ user-select:none;
1679
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1680
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1681
+ background:var(--tds-select-dropdown-background-color);
1682
+ border:var(--tds-select-dropdown-border);
1683
+ border-radius:var(--tds-select-dropdown-border-radius);
1684
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1685
+ opacity:var(--tds-select-dropdown-open-opacity);
1686
+ transform:var(--tds-select-dropdown-open-transform);
1687
+ transition:var(--tds-select-dropdown-transition-enter);
1715
1688
  }
1716
1689
 
1717
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1718
- display:block;
1690
+ :is(.tds-select select:has( > button)) option::checkmark{
1691
+ display:none;
1719
1692
  }
1720
1693
 
1721
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1722
- display:flex;
1723
- flex-direction:column;
1694
+ @starting-style{
1695
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1696
+ opacity:var(--tds-select-dropdown-closed-opacity);
1697
+ transform:var(--tds-select-dropdown-closed-transform);
1698
+ }
1724
1699
  }
1700
+ }
1725
1701
 
1726
1702
  .tds-input{
1727
1703
  --tds-input-border-color:var(--t-form-border-color);
@@ -2756,6 +2732,16 @@ a[class="tds-btn"]{
2756
2732
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
2757
2733
  --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
2758
2734
  --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
2735
+ --t-ease-linear:linear;
2736
+ --t-ease-in:cubic-bezier(0.5, 0, 1, 1);
2737
+ --t-ease-out:cubic-bezier(0, 0, 0.4, 1);
2738
+ --t-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
2739
+ --t-duration-0:0ms;
2740
+ --t-duration-100:85ms;
2741
+ --t-duration-200:130ms;
2742
+ --t-duration-300:160ms;
2743
+ --t-duration-400:240ms;
2744
+ --t-duration-500:400ms;
2759
2745
  --t-focus-ring-color:var(--t-fill-color-interaction);
2760
2746
  --t-focus-ring-offset:2px;
2761
2747
  --t-focus-ring-outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);