@planningcenter/tapestry 3.3.1-qa-891.0 → 3.3.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 (24) hide show
  1. package/dist/components/button/DropdownButton.d.ts +4 -11
  2. package/dist/components/button/DropdownButton.d.ts.map +1 -1
  3. package/dist/components/button/DropdownButton.js.map +1 -1
  4. package/dist/components/date-picker/DatePicker.js +138 -7
  5. package/dist/components/date-picker/DatePicker.js.map +1 -1
  6. package/dist/ext/@internationalized/date/dist/string.js +19 -1
  7. package/dist/ext/@internationalized/date/dist/string.js.map +1 -1
  8. package/dist/reactRender.css +1589 -1714
  9. package/dist/reactRender.css.map +1 -1
  10. package/dist/reactRenderLegacy.css +1589 -1714
  11. package/dist/reactRenderLegacy.css.map +1 -1
  12. package/dist/unstable.css +76 -201
  13. package/dist/unstable.css.map +1 -1
  14. package/dist/unstable.d.ts +1 -2
  15. package/dist/unstable.d.ts.map +1 -1
  16. package/dist/unstable.js +26 -23
  17. package/dist/unstable.js.map +1 -1
  18. package/package.json +5 -5
  19. package/dist/components/dropdown/Dropdown.d.ts +0 -139
  20. package/dist/components/dropdown/Dropdown.d.ts.map +0 -1
  21. package/dist/components/dropdown/Dropdown.js +0 -97
  22. package/dist/components/dropdown/Dropdown.js.map +0 -1
  23. package/dist/components/dropdown/index.d.ts +0 -4
  24. package/dist/components/dropdown/index.d.ts.map +0 -1
package/dist/reactRender.css CHANGED
@@ -276,663 +276,459 @@
276
276
  }
277
277
  }
278
278
 
279
+ .tds-checkbox{
280
+ --tds-checkbox-font-size:var(--t-font-size-md);
281
+ --tds-checkbox-cursor:pointer;
282
+ --tds-checkbox-line-height:1.4;
283
+ --tds-checkbox-transition-property:background-color, border-color;
279
284
 
280
- @media (prefers-reduced-motion: no-preference){
281
-
282
- :root{
283
- interpolate-size:allow-keywords;
284
- }
285
- }
286
-
287
- @layer tds-component{
288
- tds-sidenav,
289
- .tds-sidenav{
290
- --tds-sidenav-indent:12px;
291
- --tds-sidenav-item-depth:0;
292
-
293
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
294
-
295
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
296
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
297
- --tds-sidenav-collapse-closed-opacity:0;
298
- --tds-sidenav-collapse-open-opacity:1;
299
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
300
- --tds-sidenav-collapse-open-transform:translateY(0);
301
-
302
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
303
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
304
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
305
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
306
-
307
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
308
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
309
- --tds-sidenav-item-nested-background-selected:transparent;
310
-
311
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
312
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
313
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
314
-
315
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
316
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
317
- }
318
-
319
- @media (prefers-reduced-motion: reduce){
320
- tds-sidenav,
321
- .tds-sidenav{
322
- --tds-sidenav-collapse-transition-enter:none;
323
- --tds-sidenav-collapse-transition-exit:none;
324
- --tds-sidenav-collapse-closed-transform:none;
325
- --tds-sidenav-collapse-open-transform:none;
326
- }
327
- }
328
-
329
- .tds-sidenav--theme-gray{
330
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
331
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
332
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
333
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
334
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
335
- }
336
- }
285
+ --tds-checkbox-input-size:var(--t-element-size-md);
286
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
287
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
288
+ --tds-checkbox-input-background-color:transparent;
337
289
 
338
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
339
- display:flex;
340
- }
290
+ --tds-checkbox-input-icon:none;
291
+ --tds-checkbox-input-icon-visibility:hidden;
292
+ --tds-checkbox-input-icon-opacity:0;
293
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
341
294
 
342
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
343
- flex-direction:column;
344
- gap:var(--t-spacing-half);
345
- width:100%;
346
- }
295
+ --tds-checkbox-label-color:var(--t-form-color);
347
296
 
348
- .tds-sidenav-section-list{
349
- width:100%;
350
- padding:0;
351
- margin:0;
352
- list-style:none;
353
- }
297
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
298
+ --tds-checkbox-description-line-height:1.35;
299
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
300
+ --tds-checkbox-description-invalid-icon-display:none;
354
301
 
355
- .tds-sidenav-section-header{
356
- display:flex;
357
- align-items:baseline;
358
- justify-content:space-between;
359
- padding-top:var(--t-spacing-2);
302
+ position:relative;
303
+ display:inline-grid;
304
+ grid-template-columns:auto;
305
+ grid-auto-columns:1fr;
306
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
307
+ line-height:var(--tds-checkbox-line-height);
308
+ cursor:var(--tds-checkbox-cursor);
309
+ -webkit-user-select:none;
310
+ -moz-user-select:none;
311
+ user-select:none;
360
312
  }
361
313
 
362
- .tds-sidenav-section-header h2{
363
- margin:0;
364
- font-size:var(--t-font-size-sm);
365
- font-weight:var(--t-font-weight-semibold);
366
- line-height:1.35;
367
- color:var(--t-text-color-secondary);
368
- text-transform:uppercase;
369
- }
370
-
371
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
372
- padding-top:0;
314
+ .tds-checkbox label{
315
+ grid-area:1 / 2;
316
+ font-size:var(--tds-checkbox-font-size);
317
+ font-weight:var(--t-font-weight-normal);
318
+ color:var(--tds-checkbox-label-color);
319
+ cursor:var(--tds-checkbox-cursor);
373
320
  }
374
321
 
375
- .tds-sidenav-section-header [slot="label-actions"]{
322
+ .tds-checkbox tds-indeterminate{
376
323
  display:flex;
377
- gap:var(--t-spacing-half);
378
- align-items:center;
379
324
  }
380
325
 
381
- .tds-sidenav-section [slot="section-actions"]{
382
- display:flex;
383
- gap:12px;
384
- align-items:center;
385
- min-height:42px;
386
- padding:var(--t-spacing-1) 0;
387
- }
388
-
389
- .tds-sidenav-section-list,
390
- .tds-sidenav-item{
391
- width:100%;
392
- padding:0;
393
- margin:0;
394
- }
395
-
396
- .tds-sidenav-item :is(a,button){
326
+ .tds-checkbox input[type="checkbox"]{
397
327
  position:relative;
398
- display:flex;
399
- gap:12px;
400
- align-items:center;
401
- width:100%;
402
- padding:12px;
403
- overflow:hidden;
404
- font-size:var(--t-font-size-sm);
405
- line-height:18px;
406
- color:var(--t-text-color-headline);
407
- white-space:nowrap;
408
- text-decoration:none;
328
+ width:1em;
329
+ height:1em;
330
+ margin:calc((1lh - 1em) / 2) 0 0;
331
+ font-size:var(--tds-checkbox-font-size);
332
+ line-height:inherit;
409
333
  -webkit-appearance:none;
410
334
  -moz-appearance:none;
411
335
  appearance:none;
412
- cursor:pointer;
413
- background-color:var(--tds-sidenav-item-background, transparent);
414
- border:0;
415
- border-radius:var(--t-border-radius);
416
- transition:var(--tds-sidenav-item-transition);
336
+ cursor:var(--tds-checkbox-cursor);
337
+ background-color:var(--tds-checkbox-input-background-color);
338
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
339
+ border-radius:var(--tds-checkbox-input-border-radius);
340
+ transition-timing-function:var(--t-ease-in-out);
341
+ transition-duration:var(--t-duration-200);
342
+ transition-property:var(--tds-checkbox-transition-property);
417
343
  }
418
344
 
419
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
420
- display:block;
421
- flex:1;
422
- overflow:hidden;
423
- text-overflow:ellipsis;
424
- text-align:left;
425
- white-space:nowrap;
345
+ :is(.tds-checkbox input[type="checkbox"])::before{
346
+ position:absolute;
347
+ top:50%;
348
+ left:50%;
349
+ visibility:var(--tds-checkbox-input-icon-visibility);
350
+ width:100%;
351
+ height:100%;
352
+ content:"";
353
+ background-color:var(--tds-checkbox-input-icon-fill);
354
+ border-radius:var(--tds-checkbox-input-border-radius);
355
+ opacity:var(--tds-checkbox-input-icon-opacity);
356
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
357
+ mask-image:var(--tds-checkbox-input-icon);
358
+ -webkit-mask-repeat:no-repeat;
359
+ mask-repeat:no-repeat;
360
+ -webkit-mask-size:contain;
361
+ mask-size:contain;
362
+ transform:translate(-50%, -50%);
426
363
  }
427
364
 
428
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
429
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
430
- color:var(--t-text-color-headline);
431
- text-decoration:none;
365
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
366
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
367
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
432
368
  }
433
369
 
434
- :is(.tds-sidenav-item :is(a,button)):active{
435
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
370
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
371
+ outline:var(--t-focus-ring-outline);
372
+ outline-offset:var(--t-focus-ring-offset);
436
373
  }
437
374
 
438
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
439
- overflow:hidden;
440
- color:var(--tds-sidenav-item-icon-color);
375
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
376
+ pointer-events:none;
441
377
  }
442
378
 
443
- :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{
444
- display:block;
445
- width:var(--tds-sidenav-item-icon-size);
446
- height:var(--tds-sidenav-item-icon-size);
447
- }
379
+ @media (prefers-reduced-motion: reduce){
448
380
 
449
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
450
- --tds-sidenav-indent:19px;
381
+ .tds-checkbox input[type="checkbox"]{
382
+ --tds-checkbox-transition-property:none;
383
+ }
451
384
  }
452
385
 
453
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
454
- visibility:visible;
455
- block-size:auto;
456
- opacity:1;
386
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
387
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
388
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
389
+ --tds-checkbox-input-icon-visibility:visible;
390
+ --tds-checkbox-input-icon-opacity:1;
391
+ }
392
+
393
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
394
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
395
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
457
396
  }
458
397
 
459
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
460
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
461
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
398
+ .tds-checkbox:has(input:checked){
399
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
400
+ }
462
401
 
463
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
464
- font-weight:var(--t-font-weight-semibold);
402
+ .tds-checkbox:has(input:indeterminate){
403
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
465
404
  }
466
405
 
467
- .tds-sidenav-item:has(.tds-sidenav-section){
468
- display:flex;
469
- flex-direction:column;
470
- gap:var(--t-spacing-half);
406
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
407
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
408
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
409
+ --tds-checkbox-description-invalid-icon-display:inline-block;
471
410
  }
472
411
 
473
- .tds-sidenav-item .tds-sidenav-section-list{
474
- --tds-sidenav-item-depth:1;
475
- gap:0;
476
- }
477
-
478
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
479
- visibility:hidden;
480
- block-size:0;
481
- overflow-y:clip;
482
- opacity:0;
483
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
484
- }
485
-
486
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
487
- --tds-sidenav-item-depth:2;
412
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
413
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
414
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
488
415
  }
489
416
 
490
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
491
- min-height:var(--t-element-size-2xl);
492
- padding-block:9px;
493
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
494
- line-height:1;
495
- background-color:transparent;
417
+ :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{
418
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
419
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
496
420
  }
497
421
 
498
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
499
- position:absolute;
500
- top:0;
501
- bottom:0;
502
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
503
- width:2px;
504
- content:"";
505
- background-color:var(--tds-sidenav-item-nested-border-color);
506
- transition:var(--tds-sidenav-item-transition);
507
- }
508
-
509
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
510
- position:absolute;
511
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
512
- z-index:-1;
513
- height:100%;
514
- content:"";
515
- background-color:var(--tds-sidenav-item-nested-background);
516
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
517
- transition:var(--tds-sidenav-item-transition);
422
+ :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){
423
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
424
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
518
425
  }
519
426
 
520
- :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)){
521
- display:block;
522
- text-align:left;
523
- white-space:normal;
524
- }
427
+ .tds-checkbox:has(input:required) label::after{
428
+ margin-left:.25ch;
429
+ color:var(--t-text-color-status-error);
430
+ content:"*";
431
+ }
525
432
 
526
- :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{
527
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
528
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
529
- }
433
+ .tds-checkbox:has(input:disabled){
434
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
435
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
530
436
 
531
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
532
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
533
- }
437
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
438
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
439
+ --tds-checkbox-cursor:not-allowed;
440
+ }
534
441
 
535
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
536
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
537
- font-weight:var(--t-font-weight-medium);
442
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
443
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
538
444
  }
539
445
 
540
- .tds-sidenav-responsive-header{
446
+ .tds-checkbox-description{
541
447
  display:flex;
542
- gap:var(--t-spacing-2);
543
- align-items:center;
544
- width:100%;
448
+ grid-area:2 / 2;
449
+ gap:var(--t-spacing-half);
450
+ align-items:flex-start;
451
+ margin:0;
452
+ font-size:var(--tds-checkbox-description-font-size);
453
+ line-height:var(--tds-checkbox-description-line-height);
454
+ color:var(--tds-checkbox-description-color);
455
+ cursor:text;
545
456
  }
546
457
 
547
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
- order:0;
458
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
459
+ display:var(--tds-checkbox-description-invalid-icon-display);
460
+ flex-shrink:0;
461
+ margin-top:calc(.5lh - .5em);
462
+ line-height:var(--tds-checkbox-description-line-height);
549
463
  }
550
464
 
551
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
552
- flex:1;
553
- order:1;
554
- margin:0;
555
- font-size:var(--t-font-size-lg);
556
- font-weight:var(--t-font-weight-medium);
557
- color:var(--t-text-color-headline);
558
- }
465
+ .tds-checkbox--sm{
466
+ --tds-checkbox-line-height:1.35;
467
+ --tds-checkbox-input-size:var(--t-element-size-sm);
468
+ --tds-checkbox-font-size:var(--t-font-size-sm);
469
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
470
+ --tds-checkbox-description-line-height:1.3;
471
+ }
559
472
 
560
- @media (max-width: 719px){
561
- .tds-sidenav-collapse{
562
- z-index:10001;
563
- display:none;
564
- max-width:min(448px, calc(100vw - 48px));
473
+ .tds-checkbox-group{
474
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
475
+ --tds-checkbox-group-line-height:1.4;
476
+ --tds-checkbox-group-gap:var(--t-spacing-1);
477
+
478
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
479
+
480
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
481
+ --tds-checkbox-group-description-line-height:1.35;
482
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
483
+ --tds-checkbox-group-description-invalid-icon-display:none;
484
+ display:flex;
485
+ flex-direction:column;
486
+ gap:var(--tds-checkbox-group-gap);
487
+ padding:0;
488
+ margin:0;
489
+
490
+ font-size:var(--tds-checkbox-group-font-size);
491
+ line-height:var(--tds-checkbox-group-line-height);
492
+ border:0;
493
+ }
494
+
495
+ .tds-checkbox-group legend{
565
496
  padding:0;
566
- margin:12px 0;
567
- position-area:bottom span-right;
568
- overflow:hidden;
569
- outline:0;
570
- background:var(--t-surface-color-card);
571
- border:0;
572
- border-radius:6px;
573
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
574
- opacity:var(--tds-sidenav-collapse-open-opacity);
575
- transform:var(--tds-sidenav-collapse-open-transform);
576
- transition:var(--tds-sidenav-collapse-transition-enter);
577
- will-change:transform;
497
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
578
498
  }
579
499
 
580
- .tds-sidenav-scroll-container{
581
- --webkit-overflow-scrolling:touch;
582
- display:block;
583
- width:100%;
584
- height:-moz-fit-content;
585
- height:fit-content;
586
- padding:var(--t-spacing-2);
587
- overflow-y:auto;
500
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
501
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
588
502
  }
589
503
 
590
- .tds-sidenav-item :is(a, button) :is(.prefix){
591
- display:none;
504
+ .tds-checkbox-group[aria-invalid="true"]{
505
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
506
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
592
507
  }
593
- @supports selector(:popover-open){
594
- .tds-sidenav-collapse:popover-open{
595
- display:flex;
596
- }
597
508
 
598
- .tds-sidenav-collapse:not(:popover-open){
599
- opacity:var(--tds-sidenav-collapse-closed-opacity);
600
- transition:var(--tds-sidenav-collapse-transition-exit);
509
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
510
+ margin-left:.25ch;
511
+ color:var(--t-text-color-status-error);
512
+ content:"*";
601
513
  }
602
514
 
603
- @starting-style{
604
- .tds-sidenav-collapse:popover-open{
605
- opacity:var(--tds-sidenav-collapse-closed-opacity);
606
- transform:var(--tds-sidenav-collapse-closed-transform);
607
- }
608
- }
609
- }
610
- @supports not selector(:popover-open){
611
- .tds-sidenav-collapse.\:popover-open{
612
- display:flex;
515
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
516
+ content:none;
613
517
  }
614
518
 
615
- .tds-sidenav-collapse:not(.\:popover-open){
616
- opacity:var(--tds-sidenav-collapse-closed-opacity);
617
- transition:var(--tds-sidenav-collapse-transition-exit);
618
- }
619
- }
519
+ .tds-checkbox-group-fields{
520
+ display:flex;
521
+ flex-direction:column;
522
+ gap:var(--tds-checkbox-group-gap);
523
+ align-items:flex-start;
620
524
  }
621
525
 
622
- @media (min-width: 720px){
623
- .tds-sidenav-responsive-header{
624
- display:none;
625
- }
526
+ .tds-checkbox-group-description{
527
+ display:flex;
528
+ gap:var(--t-spacing-half);
529
+ align-items:flex-start;
530
+ margin:0;
531
+ font-size:var(--tds-checkbox-group-description-font-size);
532
+ line-height:var(--tds-checkbox-group-description-line-height);
533
+ color:var(--tds-checkbox-group-description-color);
534
+ cursor:text;
626
535
  }
627
536
 
628
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
- display:none;
630
- }
537
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
538
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
539
+ flex-shrink:0;
540
+ margin-top:calc(.5lh - .5em);
541
+ line-height:var(--tds-checkbox-group-description-line-height);
542
+ }
631
543
 
632
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
- display:block;
634
- }
544
+ .tds-checkbox-group--sm{
545
+ --tds-checkbox-group-line-height:1.35;
546
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
547
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
548
+ --tds-checkbox-group-description-line-height:1.3;
549
+ }
635
550
 
636
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
- display:flex;
638
- flex-direction:column;
639
- }
551
+ .tds-combo-box{
552
+ --tds-combo-box-button-offset:4px;
553
+ }
640
554
 
641
- .tds-checkbox{
642
- --tds-checkbox-font-size:var(--t-font-size-md);
643
- --tds-checkbox-cursor:pointer;
644
- --tds-checkbox-line-height:1.4;
645
- --tds-checkbox-transition-property:background-color, border-color;
555
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
556
+ transform:rotate(.5turn);
557
+ }
646
558
 
647
- --tds-checkbox-input-size:var(--t-element-size-md);
648
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
- --tds-checkbox-input-border-color:var(--t-form-border-color);
650
- --tds-checkbox-input-background-color:transparent;
559
+ .tds-combo-box--lg{
560
+ --tds-combo-box-button-offset:5px;
561
+ }
651
562
 
652
- --tds-checkbox-input-icon:none;
653
- --tds-checkbox-input-icon-visibility:hidden;
654
- --tds-checkbox-input-icon-opacity:0;
655
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
563
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
564
+ display:none;
565
+ }
656
566
 
657
- --tds-checkbox-label-color:var(--t-form-color);
567
+ .tds-combo-box-input{
568
+ display:flex;
569
+ flex:1;
570
+ align-items:center;
571
+ padding-block:var(--tds-field-padding-block);
572
+ padding-inline:var(--tds-field-padding-inline);
573
+ font-family:inherit;
574
+ font-size:inherit;
575
+ color:inherit;
576
+ outline:0;
577
+ background:transparent;
578
+ border:0;
579
+ }
658
580
 
659
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
- --tds-checkbox-description-line-height:1.35;
661
- --tds-checkbox-description-color:var(--t-text-color-secondary);
662
- --tds-checkbox-description-invalid-icon-display:none;
581
+ .tds-combo-box-input:has( + .tds-combo-box-button){
582
+ padding-inline-end:0;
583
+ }
663
584
 
664
- position:relative;
665
- display:inline-grid;
666
- grid-template-columns:auto;
667
- grid-auto-columns:1fr;
668
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
669
- line-height:var(--tds-checkbox-line-height);
670
- cursor:var(--tds-checkbox-cursor);
585
+ .tds-combo-box-input::-moz-placeholder{
586
+ color:var(--tds-field-placeholder-color);
587
+ -moz-user-select:none;
588
+ user-select:none;
589
+ }
590
+
591
+ .tds-combo-box-input::placeholder{
592
+ color:var(--tds-field-placeholder-color);
593
+ -webkit-user-select:none;
594
+ -moz-user-select:none;
595
+ user-select:none;
596
+ }
597
+
598
+ .tds-combo-box-button{
599
+ flex-shrink:0;
600
+ align-self:center;
601
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
602
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
603
+ padding:0;
604
+ margin-inline-end:var(--tds-combo-box-button-offset);
605
+ }
606
+
607
+ .tds-combo-box-button > svg{
608
+ inline-size:var(--tds-field-font-size);
609
+ block-size:var(--tds-field-font-size);
610
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
611
+ }
612
+
613
+ .tds-combo-box-popover{
614
+ width:var(--trigger-width);
615
+ max-block-size:inherit;
616
+ padding:var(--t-spacing-1);
617
+ overflow:auto;
618
+ scroll-behavior:smooth;
619
+ overscroll-behavior:none;
671
620
  -webkit-user-select:none;
672
621
  -moz-user-select:none;
673
622
  user-select:none;
623
+ outline:0;
624
+ scrollbar-color:#0004 #0000;
625
+ scrollbar-width:thin;
626
+ background:var(--t-surface-color-card);
627
+ background-clip:padding-box;
628
+ border:1px solid var(--t-border-color);
629
+ border-radius:var(--t-border-radius);
630
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
674
631
  }
675
632
 
676
- .tds-checkbox label{
677
- grid-area:1 / 2;
678
- font-size:var(--tds-checkbox-font-size);
679
- font-weight:var(--t-font-weight-normal);
680
- color:var(--tds-checkbox-label-color);
681
- cursor:var(--tds-checkbox-cursor);
633
+ .tds-combo-box-popover[data-entering]{
634
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
682
635
  }
683
636
 
684
- .tds-checkbox tds-indeterminate{
685
- display:flex;
637
+ .tds-combo-box-popover[data-exiting]{
638
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
686
639
  }
687
640
 
688
- .tds-checkbox input[type="checkbox"]{
689
- position:relative;
690
- width:1em;
691
- height:1em;
692
- margin:calc((1lh - 1em) / 2) 0 0;
693
- font-size:var(--tds-checkbox-font-size);
694
- line-height:inherit;
695
- -webkit-appearance:none;
696
- -moz-appearance:none;
697
- appearance:none;
698
- cursor:var(--tds-checkbox-cursor);
699
- background-color:var(--tds-checkbox-input-background-color);
700
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
- border-radius:var(--tds-checkbox-input-border-radius);
702
- transition-timing-function:var(--t-ease-in-out);
703
- transition-duration:var(--t-duration-200);
704
- transition-property:var(--tds-checkbox-transition-property);
641
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
642
+ will-change:opacity, transform;
705
643
  }
706
644
 
707
- :is(.tds-checkbox input[type="checkbox"])::before{
708
- position:absolute;
709
- top:50%;
710
- left:50%;
711
- visibility:var(--tds-checkbox-input-icon-visibility);
712
- width:100%;
713
- height:100%;
714
- content:"";
715
- background-color:var(--tds-checkbox-input-icon-fill);
716
- border-radius:var(--tds-checkbox-input-border-radius);
717
- opacity:var(--tds-checkbox-input-icon-opacity);
718
- -webkit-mask-image:var(--tds-checkbox-input-icon);
719
- mask-image:var(--tds-checkbox-input-icon);
720
- -webkit-mask-repeat:no-repeat;
721
- mask-repeat:no-repeat;
722
- -webkit-mask-size:contain;
723
- mask-size:contain;
724
- transform:translate(-50%, -50%);
725
- }
726
-
727
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
730
- }
731
-
732
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
733
- outline:var(--t-focus-ring-outline);
734
- outline-offset:var(--t-focus-ring-offset);
735
- }
736
-
737
- :is(.tds-checkbox input[type="checkbox"]):disabled{
738
- pointer-events:none;
739
- }
645
+ @keyframes tds-combo-box-popover{
646
+ from{
647
+ opacity:0;
648
+ transform:translateY(-8px);
649
+ }
650
+ }
740
651
 
741
652
  @media (prefers-reduced-motion: reduce){
742
-
743
- .tds-checkbox input[type="checkbox"]{
744
- --tds-checkbox-transition-property:none;
745
- }
653
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
654
+ animation:none;
746
655
  }
747
656
 
748
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
- --tds-checkbox-input-icon-visibility:visible;
752
- --tds-checkbox-input-icon-opacity:1;
657
+ .tds-combo-box-button > svg{
658
+ transition:none;
753
659
  }
660
+ }
754
661
 
755
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
758
- }
662
+ .tds-combo-box-list{
663
+ padding:0;
664
+ margin:0;
665
+ }
759
666
 
760
- .tds-checkbox:has(input:checked){
761
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
667
+ .tds-combo-box-list-item{
668
+ display:block;
669
+ padding-block:var(--t-spacing-1);
670
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
671
+ overflow:hidden;
672
+ text-overflow:ellipsis;
673
+ font-size:1rem;
674
+ color:var(--t-text-color);
675
+ white-space:nowrap;
676
+ cursor:default;
677
+ border-radius:var(--t-border-radius);
678
+ }
679
+
680
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
681
+ background:var(--t-fill-color-neutral-070);
762
682
  }
763
683
 
764
- .tds-checkbox:has(input:indeterminate){
765
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
684
+ .tds-combo-box-list-item[data-selected]{
685
+ background:var(--t-fill-color-button-interaction-ghost-active);
766
686
  }
767
687
 
768
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
- --tds-checkbox-description-color:var(--t-text-color-status-error);
771
- --tds-checkbox-description-invalid-icon-display:inline-block;
688
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
689
+ background:var(--t-fill-color-neutral-060);
772
690
  }
773
691
 
774
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
777
- }
692
+ .tds-combo-box-list-item[data-disabled]{
693
+ color:var(--t-form-color-disabled);
694
+ cursor:not-allowed;
695
+ }
778
696
 
779
- :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{
780
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
697
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
698
+ background:transparent;
782
699
  }
783
700
 
784
- :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){
785
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
- }
701
+ .tds-combo-box-empty-state{
702
+ position:relative;
703
+ min-block-size:var(--t-spacing-3);
704
+ padding-block:var(--t-spacing-1);
705
+ padding-inline:var(--t-spacing-2);
706
+ font-size:var(--t-font-size-md);
707
+ color:var(--t-text-color-secondary);
708
+ }
788
709
 
789
- .tds-checkbox:has(input:required) label::after{
790
- margin-left:.25ch;
791
- color:var(--t-text-color-status-error);
792
- content:"*";
793
- }
710
+ .tds-combo-box-load-more{
711
+ position:relative;
712
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
713
+ }
794
714
 
795
- .tds-checkbox:has(input:disabled){
796
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
715
+ .tds-combo-box-empty-state,
716
+ .tds-combo-box-load-more{
717
+ --tds-loading-spinner-visibility:visible;
718
+ --tds-loading-spinner-animation-play-state:running;
719
+ }
798
720
 
799
- --tds-checkbox-label-color:var(--t-form-color-disabled);
800
- --tds-checkbox-description-color:var(--t-form-color-disabled);
801
- --tds-checkbox-cursor:not-allowed;
721
+ .tds-combo-box-list-section:not(:first-child){
722
+ margin-block-start:var(--t-spacing-half);
802
723
  }
803
724
 
804
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
806
- }
807
-
808
- .tds-checkbox-description{
809
- display:flex;
810
- grid-area:2 / 2;
811
- gap:var(--t-spacing-half);
812
- align-items:flex-start;
813
- margin:0;
814
- font-size:var(--tds-checkbox-description-font-size);
815
- line-height:var(--tds-checkbox-description-line-height);
816
- color:var(--tds-checkbox-description-color);
817
- cursor:text;
818
- }
819
-
820
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
821
- display:var(--tds-checkbox-description-invalid-icon-display);
822
- flex-shrink:0;
823
- margin-top:calc(.5lh - .5em);
824
- line-height:var(--tds-checkbox-description-line-height);
825
- }
826
-
827
- .tds-checkbox--sm{
828
- --tds-checkbox-line-height:1.35;
829
- --tds-checkbox-input-size:var(--t-element-size-sm);
830
- --tds-checkbox-font-size:var(--t-font-size-sm);
831
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
832
- --tds-checkbox-description-line-height:1.3;
833
- }
834
-
835
- .tds-checkbox-group{
836
- --tds-checkbox-group-font-size:var(--t-font-size-md);
837
- --tds-checkbox-group-line-height:1.4;
838
- --tds-checkbox-group-gap:var(--t-spacing-1);
839
-
840
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
841
-
842
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
843
- --tds-checkbox-group-description-line-height:1.35;
844
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
845
- --tds-checkbox-group-description-invalid-icon-display:none;
846
- display:flex;
847
- flex-direction:column;
848
- gap:var(--tds-checkbox-group-gap);
849
- padding:0;
850
- margin:0;
851
-
852
- font-size:var(--tds-checkbox-group-font-size);
853
- line-height:var(--tds-checkbox-group-line-height);
854
- border:0;
855
- }
856
-
857
- .tds-checkbox-group legend{
858
- padding:0;
859
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
860
- }
861
-
862
- .tds-checkbox-group:has(.tds-checkbox-group-description){
863
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
864
- }
865
-
866
- .tds-checkbox-group[aria-invalid="true"]{
867
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
868
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
869
- }
870
-
871
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
872
- margin-left:.25ch;
873
- color:var(--t-text-color-status-error);
874
- content:"*";
875
- }
876
-
877
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
878
- content:none;
879
- }
880
-
881
- .tds-checkbox-group-fields{
882
- display:flex;
883
- flex-direction:column;
884
- gap:var(--tds-checkbox-group-gap);
885
- align-items:flex-start;
886
- }
887
-
888
- .tds-checkbox-group-description{
889
- display:flex;
890
- gap:var(--t-spacing-half);
891
- align-items:flex-start;
892
- margin:0;
893
- font-size:var(--tds-checkbox-group-description-font-size);
894
- line-height:var(--tds-checkbox-group-description-line-height);
895
- color:var(--tds-checkbox-group-description-color);
896
- cursor:text;
897
- }
898
-
899
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
900
- display:var(--tds-checkbox-group-description-invalid-icon-display);
901
- flex-shrink:0;
902
- margin-top:calc(.5lh - .5em);
903
- line-height:var(--tds-checkbox-group-description-line-height);
904
- }
905
-
906
- .tds-checkbox-group--sm{
907
- --tds-checkbox-group-line-height:1.35;
908
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
909
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
910
- --tds-checkbox-group-description-line-height:1.3;
911
- }
912
-
913
-
914
- :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{
915
- -webkit-appearance:none;
916
- appearance:none;
917
- }
918
-
919
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
920
- inline-size:1em;
921
- block-size:2em;
922
- }
923
-
924
- @supports (field-sizing: content){
925
- .tds-input--auto-width{
926
- inline-size:-moz-fit-content;
927
- inline-size:fit-content;
928
- min-inline-size:min(100%, 122px);
929
- }
930
-
931
- .tds-input--auto-width input{
932
- field-sizing:content;
933
- inline-size:auto;
934
- }
935
- }
725
+ .tds-combo-box-section-header{
726
+ padding-block:var(--t-spacing-1);
727
+ padding-inline:var(--t-spacing-1);
728
+ font-size:var(--t-font-size-sm);
729
+ font-weight:var(--t-font-weight-semibold);
730
+ color:var(--t-text-color-secondary);
731
+ }
936
732
 
937
733
  .tds-number-stepper{
938
734
  --tds-number-stepper-button-offset:4px;
@@ -1341,1373 +1137,1577 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1341
1137
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1342
1138
  }
1343
1139
 
1344
- .tds-radio{
1345
- --tds-radio-font-size:var(--t-font-size-md);
1346
- --tds-radio-cursor:pointer;
1347
- --tds-radio-line-height:1.4;
1348
- --tds-radio-transition-property:border-width;
1349
1140
 
1350
- --tds-radio-input-size:var(--t-element-size-md);
1351
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1352
- --tds-radio-input-border-color:var(--t-form-border-color);
1353
- --tds-radio-input-border-width:var(--t-form-border-width);
1354
- --tds-radio-input-background-color:transparent;
1141
+ :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{
1142
+ -webkit-appearance:none;
1143
+ appearance:none;
1144
+ }
1355
1145
 
1356
- --tds-radio-label-color:var(--t-form-color);
1146
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1147
+ inline-size:1em;
1148
+ block-size:2em;
1149
+ }
1357
1150
 
1358
- --tds-radio-description-font-size:var(--t-font-size-sm);
1359
- --tds-radio-description-line-height:1.35;
1360
- --tds-radio-description-color:var(--t-text-color-secondary);
1151
+ @supports (field-sizing: content){
1152
+ .tds-input--auto-width{
1153
+ inline-size:-moz-fit-content;
1154
+ inline-size:fit-content;
1155
+ min-inline-size:min(100%, 122px);
1156
+ }
1157
+
1158
+ .tds-input--auto-width input{
1159
+ field-sizing:content;
1160
+ inline-size:auto;
1161
+ }
1162
+ }
1361
1163
 
1164
+ .tds-toggle-switch{
1165
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1166
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1167
+ --tds-toggle-switch-cursor:pointer;
1168
+ --tds-toggle-switch-display:inline-grid;
1169
+ --tds-toggle-switch-line-height:1.4;
1170
+
1171
+ --tds-toggle-switch-label-color:var(--t-form-color);
1172
+
1173
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1174
+ --tds-toggle-switch-track-outline:none;
1175
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1176
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1177
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1178
+
1179
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1180
+ --tds-toggle-switch-thumb-transform:translateX(0);
1181
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1182
+
1183
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1184
+ --tds-toggle-switch-description-line-height:1.35;
1185
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1362
1186
  position:relative;
1363
- display:inline-grid;
1187
+
1188
+ display:var(--tds-toggle-switch-display);
1364
1189
  grid-template-columns:auto;
1365
1190
  grid-auto-columns:1fr;
1366
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1367
- line-height:var(--tds-radio-line-height);
1368
- cursor:var(--tds-radio-cursor);
1191
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1369
1192
  -webkit-user-select:none;
1370
1193
  -moz-user-select:none;
1371
1194
  user-select:none;
1372
1195
  }
1373
1196
 
1374
- .tds-radio label{
1375
- grid-area:1 / 2;
1376
- font-size:var(--tds-radio-font-size);
1377
- font-weight:var(--t-font-weight-normal);
1378
- color:var(--tds-radio-label-color);
1379
- cursor:var(--tds-radio-cursor);
1380
- }
1381
-
1382
- .tds-radio input[type="radio"]{
1383
- position:relative;
1384
- width:1em;
1385
- height:1em;
1386
- margin:calc((1lh - 1em) / 2) 0 0;
1387
- font-size:var(--tds-radio-font-size);
1388
- line-height:inherit;
1197
+ .tds-toggle-switch input[type="checkbox"]{
1198
+ position:absolute;
1199
+ width:var(--tds-toggle-switch-track-width);
1200
+ height:var(--tds-toggle-switch-track-height);
1201
+ margin:0;
1389
1202
  -webkit-appearance:none;
1390
1203
  -moz-appearance:none;
1391
1204
  appearance:none;
1392
- cursor:var(--tds-radio-cursor);
1393
- background-color:var(--tds-radio-input-background-color);
1394
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1395
- border-radius:var(--tds-radio-input-border-radius);
1396
- transition-timing-function:var(--t-ease-in-out);
1397
- transition-duration:var(--t-duration-200);
1398
- transition-property:var(--tds-radio-transition-property);
1205
+ cursor:var(--tds-toggle-switch-cursor);
1206
+ outline:var(--tds-toggle-switch-track-outline);
1207
+ outline-offset:var(--t-focus-ring-offset);
1208
+ background-color:transparent;
1209
+ border:0;
1210
+ border-radius:var(--t-border-radius-round);
1399
1211
  }
1400
1212
 
1401
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1402
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1403
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1404
- }
1405
-
1406
- :is(.tds-radio input[type="radio"]):focus-visible{
1407
- outline:var(--t-focus-ring-outline);
1408
- outline-offset:var(--t-focus-ring-offset);
1409
- }
1410
-
1411
- :is(.tds-radio input[type="radio"]):disabled{
1412
- pointer-events:none;
1213
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1214
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1413
1215
  }
1414
1216
 
1415
- @media (prefers-reduced-motion: reduce){
1217
+ .tds-toggle-switch label{
1218
+ display:inline-flex;
1219
+ grid-area:1 / 2;
1220
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1221
+ column-gap:var(--tds-toggle-switch-column-gap);
1222
+ margin-top:-.09375em;
1223
+ font-size:var(--tds-toggle-switch-font-size);
1224
+ font-weight:var(--t-font-weight-normal);
1225
+ line-height:var(--tds-toggle-switch-line-height);
1226
+ color:var(--tds-toggle-switch-label-color);
1227
+ cursor:var(--tds-toggle-switch-cursor);
1228
+ }
1416
1229
 
1417
- .tds-radio input[type="radio"]{
1418
- --tds-radio-transition-property:none;
1230
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1231
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1419
1232
  }
1420
- }
1421
1233
 
1422
- .tds-radio:has(input:checked){
1423
- --tds-radio-input-background-color:var(--t-form-background-color);
1424
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1425
- --tds-radio-input-border-width:4px;
1234
+ .tds-toggle-switch:has(input:checked){
1235
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1236
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1426
1237
  }
1427
1238
 
1428
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1429
- --tds-radio-input-background-color:var(--t-form-background-color);
1430
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1239
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1240
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1431
1241
  }
1432
1242
 
1433
- .tds-radio:has(input:user-invalid){
1434
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1243
+ .tds-toggle-switch:has(input:disabled){
1244
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1245
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1246
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1247
+ --tds-toggle-switch-cursor:not-allowed;
1435
1248
  }
1436
1249
 
1437
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1438
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1439
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1440
- }
1441
-
1442
- .tds-radio:has(input:disabled){
1443
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1444
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1250
+ .tds-toggle-switch-track{
1251
+ position:relative;
1252
+ flex-shrink:0;
1253
+ width:var(--tds-toggle-switch-track-width);
1254
+ height:var(--tds-toggle-switch-track-height);
1255
+ background-color:var(--tds-toggle-switch-track-background-color);
1256
+ border-radius:var(--t-border-radius-round);
1257
+ transition:var(--tds-toggle-switch-track-transition);
1258
+ }
1445
1259
 
1446
- --tds-radio-label-color:var(--t-form-color-disabled);
1447
- --tds-radio-description-color:var(--t-form-color-disabled);
1448
- --tds-radio-cursor:not-allowed;
1260
+ .tds-toggle-switch-track::before{
1261
+ position:absolute;
1262
+ top:var(--t-spacing-fourth);
1263
+ left:var(--t-spacing-fourth);
1264
+ width:var(--tds-toggle-switch-thumb-size);
1265
+ height:var(--tds-toggle-switch-thumb-size);
1266
+ content:"";
1267
+ background-color:#fff;
1268
+ border-radius:var(--t-border-radius-round);
1269
+ transform:var(--tds-toggle-switch-thumb-transform);
1270
+ transition:var(--tds-toggle-switch-thumb-transition);
1449
1271
  }
1450
1272
 
1451
- .tds-radio:has(input:disabled) input:checked{
1452
- --tds-radio-input-background-color:var(--t-form-background-color);
1453
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1454
- }
1273
+ @media (prefers-reduced-motion: reduce){
1455
1274
 
1456
- .tds-radio-description{
1275
+ .tds-toggle-switch-track{
1276
+ --tds-toggle-switch-track-transition:none;
1277
+ --tds-toggle-switch-thumb-transition:none;
1278
+ }
1279
+ }
1280
+
1281
+ .tds-toggle-switch-description{
1457
1282
  display:flex;
1458
1283
  grid-area:2 / 2;
1459
- gap:var(--t-spacing-half);
1460
1284
  align-items:flex-start;
1461
1285
  margin:0;
1462
- font-size:var(--tds-radio-description-font-size);
1463
- line-height:var(--tds-radio-description-line-height);
1464
- color:var(--tds-radio-description-color);
1286
+ font-size:var(--tds-toggle-switch-description-font-size);
1287
+ line-height:var(--tds-toggle-switch-description-line-height);
1288
+ color:var(--tds-toggle-switch-description-color);
1465
1289
  cursor:text;
1466
1290
  }
1467
1291
 
1468
- .tds-radio--sm{
1469
- --tds-radio-line-height:1.35;
1470
- --tds-radio-input-size:var(--t-element-size-sm);
1471
- --tds-radio-font-size:var(--t-font-size-sm);
1472
- --tds-radio-description-font-size:var(--t-font-size-xs);
1473
- --tds-radio-description-line-height:1.3;
1292
+ .tds-toggle-switch--sm{
1293
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1294
+ --tds-toggle-switch-line-height:1.35;
1295
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1296
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1297
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1298
+ --tds-toggle-switch-description-line-height:1.3;
1474
1299
  }
1475
1300
 
1476
- .tds-radio-group{
1477
- --tds-radio-group-font-size:var(--t-font-size-md);
1478
- --tds-radio-group-line-height:1.4;
1479
- --tds-radio-group-gap:var(--t-spacing-1);
1301
+ .tds-toggle-switch--hide-label{
1302
+ --tds-toggle-switch-display:inline-flex;
1303
+ }
1480
1304
 
1481
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1482
1305
 
1483
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1484
- --tds-radio-group-description-line-height:1.35;
1485
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1486
- --tds-radio-group-description-invalid-icon-display:none;
1487
- display:flex;
1488
- flex-direction:column;
1489
- gap:var(--tds-radio-group-gap);
1490
- padding:0;
1491
- margin:0;
1306
+ @media (prefers-reduced-motion: no-preference){
1492
1307
 
1493
- font-size:var(--tds-radio-group-font-size);
1494
- line-height:var(--tds-radio-group-line-height);
1495
- border:0;
1308
+ :root{
1309
+ interpolate-size:allow-keywords;
1496
1310
  }
1497
-
1498
- .tds-radio-group legend{
1499
- padding:0;
1500
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1501
1311
  }
1502
1312
 
1503
- .tds-radio-group:has(.tds-radio-group-description){
1504
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1505
- }
1313
+ @layer tds-component{
1314
+ tds-sidenav,
1315
+ .tds-sidenav{
1316
+ --tds-sidenav-indent:12px;
1317
+ --tds-sidenav-item-depth:0;
1506
1318
 
1507
- .tds-radio-group[aria-invalid="true"]{
1508
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1509
- --tds-radio-group-description-invalid-icon-display:inline-block;
1510
- }
1319
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1511
1320
 
1512
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1513
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1514
- }
1321
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1322
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1323
+ --tds-sidenav-collapse-closed-opacity:0;
1324
+ --tds-sidenav-collapse-open-opacity:1;
1325
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1326
+ --tds-sidenav-collapse-open-transform:translateY(0);
1515
1327
 
1516
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1517
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1518
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1519
- }
1328
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1329
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1330
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1331
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1520
1332
 
1521
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1522
- --tds-radio-input-background-color:var(--t-form-background-color);
1523
- }
1333
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1334
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1335
+ --tds-sidenav-item-nested-background-selected:transparent;
1524
1336
 
1525
- .tds-radio-group:has(input:required) legend::after{
1526
- margin-left:.25ch;
1527
- color:var(--t-text-color-status-error);
1528
- content:"*";
1337
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1338
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1339
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1340
+
1341
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1342
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1343
+ }
1344
+
1345
+ @media (prefers-reduced-motion: reduce){
1346
+ tds-sidenav,
1347
+ .tds-sidenav{
1348
+ --tds-sidenav-collapse-transition-enter:none;
1349
+ --tds-sidenav-collapse-transition-exit:none;
1350
+ --tds-sidenav-collapse-closed-transform:none;
1351
+ --tds-sidenav-collapse-open-transform:none;
1352
+ }
1529
1353
  }
1530
1354
 
1531
- .tds-radio-group-fields{
1532
- display:flex;
1533
- flex-direction:column;
1534
- gap:var(--tds-radio-group-gap);
1535
- align-items:flex-start;
1355
+ .tds-sidenav--theme-gray{
1356
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1357
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1358
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1359
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1360
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1361
+ }
1536
1362
  }
1537
1363
 
1538
- .tds-radio-group-description{
1539
- display:flex;
1540
- gap:var(--t-spacing-half);
1541
- align-items:flex-start;
1542
- margin:0;
1543
- font-size:var(--tds-radio-group-description-font-size);
1544
- line-height:var(--tds-radio-group-description-line-height);
1545
- color:var(--tds-radio-group-description-color);
1546
- cursor:text;
1547
- }
1364
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1365
+ display:flex;
1366
+ }
1548
1367
 
1549
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1550
- display:var(--tds-radio-group-description-invalid-icon-display);
1551
- flex-shrink:0;
1552
- margin-top:calc(.5lh - .5em);
1553
- line-height:var(--tds-radio-group-description-line-height);
1368
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1369
+ flex-direction:column;
1370
+ gap:var(--t-spacing-half);
1371
+ width:100%;
1554
1372
  }
1555
1373
 
1556
- .tds-radio-group--sm{
1557
- --tds-radio-group-line-height:1.35;
1558
- --tds-radio-group-font-size:var(--t-font-size-sm);
1559
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1560
- --tds-radio-group-description-line-height:1.3;
1374
+ .tds-sidenav-section-list{
1375
+ width:100%;
1376
+ padding:0;
1377
+ margin:0;
1378
+ list-style:none;
1561
1379
  }
1562
1380
 
1563
- .tds-input:has(textarea){
1564
- --tds-input-padding-block:6px;
1565
- --tds-input-resizer-size:var(--t-element-size-sm);
1566
- --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");
1381
+ .tds-sidenav-section-header{
1382
+ display:flex;
1383
+ align-items:baseline;
1384
+ justify-content:space-between;
1385
+ padding-top:var(--t-spacing-2);
1567
1386
  }
1568
1387
 
1569
- @supports (x: attr(x type(*))){
1570
-
1571
- .tds-input:has(textarea){
1572
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1573
- }
1388
+ .tds-sidenav-section-header h2{
1389
+ margin:0;
1390
+ font-size:var(--t-font-size-sm);
1391
+ font-weight:var(--t-font-weight-semibold);
1392
+ line-height:1.35;
1393
+ color:var(--t-text-color-secondary);
1394
+ text-transform:uppercase;
1574
1395
  }
1575
1396
 
1576
- .tds-input.tds-textarea--resize-vertical textarea{
1577
- resize:vertical;
1578
- }
1397
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1398
+ padding-top:0;
1399
+ }
1579
1400
 
1580
- .tds-input.tds-textarea--resize-none textarea{
1581
- resize:none;
1582
- }
1401
+ .tds-sidenav-section-header [slot="label-actions"]{
1402
+ display:flex;
1403
+ gap:var(--t-spacing-half);
1404
+ align-items:center;
1405
+ }
1583
1406
 
1584
- .tds-input.tds-textarea--resize-auto textarea{
1585
- resize:vertical;
1586
- }
1407
+ .tds-sidenav-section [slot="section-actions"]{
1408
+ display:flex;
1409
+ gap:12px;
1410
+ align-items:center;
1411
+ min-height:42px;
1412
+ padding:var(--t-spacing-1) 0;
1413
+ }
1587
1414
 
1588
- @supports (field-sizing: content){
1589
- .tds-input.tds-textarea--resize-auto textarea{
1590
- field-sizing:content;
1591
- resize:none;
1592
- }
1593
- }
1594
-
1595
- .tds-input textarea{
1596
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1597
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1598
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1599
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1600
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1601
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1602
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1603
- --tds-input-scrollbar-thumb-border-radius:999px;
1604
- --tds-input-scrollbar-thumb-border-width:3px;
1605
- --tds-input-scrollbar-track-margin-block:.125rem;
1606
- scrollbar-color:initial;
1607
- transition-timing-function:var(--t-ease-in-out);
1608
- transition-duration:var(--t-duration-200);
1609
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1415
+ .tds-sidenav-section-list,
1416
+ .tds-sidenav-item{
1417
+ width:100%;
1418
+ padding:0;
1419
+ margin:0;
1610
1420
  }
1611
1421
 
1612
- @media (pointer: fine){
1613
- :is(.tds-input textarea)::-webkit-scrollbar{
1614
- width:12px;
1615
- height:12px;
1616
- cursor:default;
1422
+ .tds-sidenav-item :is(a,button){
1423
+ position:relative;
1424
+ display:flex;
1425
+ gap:12px;
1426
+ align-items:center;
1427
+ width:100%;
1428
+ padding:12px;
1429
+ overflow:hidden;
1430
+ font-size:var(--t-font-size-sm);
1431
+ line-height:18px;
1432
+ color:var(--t-text-color-headline);
1433
+ white-space:nowrap;
1434
+ text-decoration:none;
1435
+ -webkit-appearance:none;
1436
+ -moz-appearance:none;
1437
+ appearance:none;
1438
+ cursor:pointer;
1439
+ background-color:var(--tds-sidenav-item-background, transparent);
1440
+ border:0;
1441
+ border-radius:var(--t-border-radius);
1442
+ transition:var(--tds-sidenav-item-transition);
1443
+ }
1444
+
1445
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1446
+ display:block;
1447
+ flex:1;
1448
+ overflow:hidden;
1449
+ text-overflow:ellipsis;
1450
+ text-align:left;
1451
+ white-space:nowrap;
1617
1452
  }
1618
1453
 
1619
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1620
- cursor:default;
1621
- background:var(--tds-input-scrollbar-thumb-color);
1622
- background-clip:content-box;
1623
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1624
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1454
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1455
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1456
+ color:var(--t-text-color-headline);
1457
+ text-decoration:none;
1625
1458
  }
1626
1459
 
1627
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1628
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1460
+ :is(.tds-sidenav-item :is(a,button)):active{
1461
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1629
1462
  }
1630
1463
 
1631
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1632
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1464
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1465
+ overflow:hidden;
1466
+ color:var(--tds-sidenav-item-icon-color);
1633
1467
  }
1634
1468
 
1635
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1636
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1469
+ :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{
1470
+ display:block;
1471
+ width:var(--tds-sidenav-item-icon-size);
1472
+ height:var(--tds-sidenav-item-icon-size);
1473
+ }
1474
+
1475
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1476
+ --tds-sidenav-indent:19px;
1637
1477
  }
1638
1478
 
1639
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1640
- background:var(--tds-input-scrollbar-surface-color);
1479
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1480
+ visibility:visible;
1481
+ block-size:auto;
1482
+ opacity:1;
1641
1483
  }
1642
1484
 
1643
- :is(.tds-input textarea)::-webkit-resizer{
1644
- background:var(--tds-input-resizer-icon) no-repeat;
1645
- background-position:right bottom;
1646
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1485
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1486
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1487
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1488
+
1489
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1490
+ font-weight:var(--t-font-weight-semibold);
1491
+ }
1492
+
1493
+ .tds-sidenav-item:has(.tds-sidenav-section){
1494
+ display:flex;
1495
+ flex-direction:column;
1496
+ gap:var(--t-spacing-half);
1497
+ }
1498
+
1499
+ .tds-sidenav-item .tds-sidenav-section-list{
1500
+ --tds-sidenav-item-depth:1;
1501
+ gap:0;
1502
+ }
1503
+
1504
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1505
+ visibility:hidden;
1506
+ block-size:0;
1507
+ overflow-y:clip;
1508
+ opacity:0;
1509
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1647
1510
  }
1648
1511
 
1649
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1650
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1651
- cursor:default;
1512
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1513
+ --tds-sidenav-item-depth:2;
1652
1514
  }
1653
1515
 
1654
- @supports (-moz-appearance: none){
1655
- :is(.tds-input textarea){
1656
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1657
- scrollbar-width:thin;
1516
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1517
+ min-height:var(--t-element-size-2xl);
1518
+ padding-block:9px;
1519
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1520
+ line-height:1;
1521
+ background-color:transparent;
1522
+ }
1523
+
1524
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1525
+ position:absolute;
1526
+ top:0;
1527
+ bottom:0;
1528
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1529
+ width:2px;
1530
+ content:"";
1531
+ background-color:var(--tds-sidenav-item-nested-border-color);
1532
+ transition:var(--tds-sidenav-item-transition);
1658
1533
  }
1659
1534
 
1660
- @media (hover){
1661
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1662
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1663
- }
1535
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1536
+ position:absolute;
1537
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1538
+ z-index:-1;
1539
+ height:100%;
1540
+ content:"";
1541
+ background-color:var(--tds-sidenav-item-nested-background);
1542
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1543
+ transition:var(--tds-sidenav-item-transition);
1664
1544
  }
1665
- }
1666
- }
1667
1545
 
1668
- .tds-combo-box{
1669
- --tds-combo-box-button-offset:4px;
1670
- }
1546
+ :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)){
1547
+ display:block;
1548
+ text-align:left;
1549
+ white-space:normal;
1550
+ }
1671
1551
 
1672
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1673
- transform:rotate(.5turn);
1674
- }
1552
+ :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{
1553
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1554
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1555
+ }
1675
1556
 
1676
- .tds-combo-box--lg{
1677
- --tds-combo-box-button-offset:5px;
1678
- }
1557
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1558
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1559
+ }
1679
1560
 
1680
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1681
- display:none;
1682
- }
1561
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1562
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1563
+ font-weight:var(--t-font-weight-medium);
1564
+ }
1683
1565
 
1684
- .tds-combo-box-input{
1566
+ .tds-sidenav-responsive-header{
1685
1567
  display:flex;
1686
- flex:1;
1568
+ gap:var(--t-spacing-2);
1687
1569
  align-items:center;
1688
- padding-block:var(--tds-field-padding-block);
1689
- padding-inline:var(--tds-field-padding-inline);
1690
- font-family:inherit;
1691
- font-size:inherit;
1692
- color:inherit;
1693
- outline:0;
1694
- background:transparent;
1695
- border:0;
1570
+ width:100%;
1696
1571
  }
1697
1572
 
1698
- .tds-combo-box-input:has( + .tds-combo-box-button){
1699
- padding-inline-end:0;
1573
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1574
+ order:0;
1700
1575
  }
1701
1576
 
1702
- .tds-combo-box-input::-moz-placeholder{
1703
- color:var(--tds-field-placeholder-color);
1704
- -moz-user-select:none;
1705
- user-select:none;
1577
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1578
+ flex:1;
1579
+ order:1;
1580
+ margin:0;
1581
+ font-size:var(--t-font-size-lg);
1582
+ font-weight:var(--t-font-weight-medium);
1583
+ color:var(--t-text-color-headline);
1706
1584
  }
1707
1585
 
1708
- .tds-combo-box-input::placeholder{
1709
- color:var(--tds-field-placeholder-color);
1710
- -webkit-user-select:none;
1711
- -moz-user-select:none;
1712
- user-select:none;
1586
+ @media (max-width: 719px){
1587
+ .tds-sidenav-collapse{
1588
+ z-index:10001;
1589
+ display:none;
1590
+ max-width:min(448px, calc(100vw - 48px));
1591
+ padding:0;
1592
+ margin:12px 0;
1593
+ position-area:bottom span-right;
1594
+ overflow:hidden;
1595
+ outline:0;
1596
+ background:var(--t-surface-color-card);
1597
+ border:0;
1598
+ border-radius:6px;
1599
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1600
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1601
+ transform:var(--tds-sidenav-collapse-open-transform);
1602
+ transition:var(--tds-sidenav-collapse-transition-enter);
1603
+ will-change:transform;
1713
1604
  }
1714
1605
 
1715
- .tds-combo-box-button{
1716
- flex-shrink:0;
1717
- align-self:center;
1718
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1719
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1720
- padding:0;
1721
- margin-inline-end:var(--tds-combo-box-button-offset);
1722
- }
1723
-
1724
- .tds-combo-box-button > svg{
1725
- inline-size:var(--tds-field-font-size);
1726
- block-size:var(--tds-field-font-size);
1727
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1606
+ .tds-sidenav-scroll-container{
1607
+ --webkit-overflow-scrolling:touch;
1608
+ display:block;
1609
+ width:100%;
1610
+ height:-moz-fit-content;
1611
+ height:fit-content;
1612
+ padding:var(--t-spacing-2);
1613
+ overflow-y:auto;
1728
1614
  }
1729
1615
 
1730
- .tds-combo-box-popover{
1731
- width:var(--trigger-width);
1732
- max-block-size:inherit;
1733
- padding:var(--t-spacing-1);
1734
- overflow:auto;
1735
- scroll-behavior:smooth;
1736
- overscroll-behavior:none;
1737
- -webkit-user-select:none;
1738
- -moz-user-select:none;
1739
- user-select:none;
1740
- outline:0;
1741
- scrollbar-color:#0004 #0000;
1742
- scrollbar-width:thin;
1743
- background:var(--t-surface-color-card);
1744
- background-clip:padding-box;
1745
- border:1px solid var(--t-border-color);
1746
- border-radius:var(--t-border-radius);
1747
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1748
- }
1749
-
1750
- .tds-combo-box-popover[data-entering]{
1751
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1616
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1617
+ display:none;
1752
1618
  }
1619
+ @supports selector(:popover-open){
1620
+ .tds-sidenav-collapse:popover-open{
1621
+ display:flex;
1622
+ }
1753
1623
 
1754
- .tds-combo-box-popover[data-exiting]{
1755
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1624
+ .tds-sidenav-collapse:not(:popover-open){
1625
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1626
+ transition:var(--tds-sidenav-collapse-transition-exit);
1627
+ }
1628
+
1629
+ @starting-style{
1630
+ .tds-sidenav-collapse:popover-open{
1631
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1632
+ transform:var(--tds-sidenav-collapse-closed-transform);
1633
+ }
1634
+ }
1756
1635
  }
1636
+ @supports not selector(:popover-open){
1637
+ .tds-sidenav-collapse.\:popover-open{
1638
+ display:flex;
1639
+ }
1757
1640
 
1758
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1759
- will-change:opacity, transform;
1641
+ .tds-sidenav-collapse:not(.\:popover-open){
1642
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1643
+ transition:var(--tds-sidenav-collapse-transition-exit);
1644
+ }
1760
1645
  }
1646
+ }
1761
1647
 
1762
- @keyframes tds-combo-box-popover{
1763
- from{
1764
- opacity:0;
1765
- transform:translateY(-8px);
1648
+ @media (min-width: 720px){
1649
+ .tds-sidenav-responsive-header{
1650
+ display:none;
1766
1651
  }
1767
1652
  }
1768
1653
 
1769
- @media (prefers-reduced-motion: reduce){
1770
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1771
- animation:none;
1654
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1655
+ display:none;
1772
1656
  }
1773
1657
 
1774
- .tds-combo-box-button > svg{
1775
- transition:none;
1776
- }
1777
- }
1658
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1659
+ display:block;
1660
+ }
1778
1661
 
1779
- .tds-combo-box-list{
1780
- padding:0;
1781
- margin:0;
1782
- }
1662
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1663
+ display:flex;
1664
+ flex-direction:column;
1665
+ }
1783
1666
 
1784
- .tds-combo-box-list-item{
1785
- display:block;
1786
- padding-block:var(--t-spacing-1);
1787
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1788
- overflow:hidden;
1789
- text-overflow:ellipsis;
1790
- font-size:1rem;
1791
- color:var(--t-text-color);
1792
- white-space:nowrap;
1793
- cursor:default;
1794
- border-radius:var(--t-border-radius);
1667
+ .tds-input{
1668
+ --tds-input-border-color:var(--t-form-border-color);
1669
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1670
+ --tds-input-background-color:var(--t-form-background-color);
1671
+ --tds-input-color:var(--t-form-color);
1672
+ --tds-input-font-size:var(--t-font-size-md);
1673
+ --tds-input-description-color:var(--t-text-color-secondary);
1674
+ --tds-input-description-invalid-icon-display:none;
1675
+ --tds-input-min-height:var(--t-container-size-md);
1676
+ --tds-input-padding-inline:var(--t-spacing-1);
1677
+
1678
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1679
+
1680
+ display:flex;
1681
+ flex-direction:column;
1682
+ gap:var(--t-spacing-half);
1795
1683
  }
1796
1684
 
1797
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1798
- background:var(--t-fill-color-neutral-070);
1685
+ .tds-input label{
1686
+ font-size:var(--t-font-size-md);
1687
+ font-weight:var(--t-font-weight-normal);
1688
+ color:var(--t-text-color);
1799
1689
  }
1800
1690
 
1801
- .tds-combo-box-list-item[data-selected]{
1802
- background:var(--t-fill-color-button-interaction-ghost-active);
1691
+ .tds-input :is(input,textarea){
1692
+ inline-size:100%;
1693
+ block-size:auto;
1694
+ min-block-size:var(--tds-input-min-height);
1695
+ padding-block:var(--tds-input-padding-block);
1696
+ padding-inline:var(--tds-input-padding-inline);
1697
+ font-family:inherit;
1698
+ font-size:var(--tds-input-font-size);
1699
+ color:var(--tds-input-color);
1700
+ -webkit-appearance:none;
1701
+ -moz-appearance:none;
1702
+ appearance:none;
1703
+ outline:var(--t-focus-ring-width) solid transparent;
1704
+ outline-offset:0;
1705
+ background-color:var(--tds-input-background-color);
1706
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
1707
+ border-radius:var(--t-form-border-radius);
1708
+ transition-timing-function:var(--t-ease-in-out);
1709
+ transition-duration:var(--t-duration-200);
1710
+ transition-property:var(--tds-input-transition-property);
1803
1711
  }
1804
1712
 
1805
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1806
- background:var(--t-fill-color-neutral-060);
1807
- }
1713
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1714
+ border-color:var(--tds-input-border-color-hover);
1715
+ }
1808
1716
 
1809
- .tds-combo-box-list-item[data-disabled]{
1810
- color:var(--t-form-color-disabled);
1811
- cursor:not-allowed;
1812
- }
1717
+ :is(.tds-input :is(input,textarea)):focus{
1718
+ outline-color:transparent;
1719
+ }
1813
1720
 
1814
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1815
- background:transparent;
1721
+ :is(.tds-input :is(input,textarea)):focus-visible{
1722
+ outline-color:var(--t-focus-ring-color);
1723
+ outline-offset:var(--t-focus-ring-offset);
1724
+ border-color:var(--t-form-border-color-focus);
1816
1725
  }
1817
1726
 
1818
- .tds-combo-box-empty-state{
1819
- position:relative;
1820
- min-block-size:var(--t-spacing-3);
1821
- padding-block:var(--t-spacing-1);
1822
- padding-inline:var(--t-spacing-2);
1823
- font-size:var(--t-font-size-md);
1824
- color:var(--t-text-color-secondary);
1825
- }
1727
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
1728
+ color:var(--t-form-placeholder-color);
1729
+ -moz-user-select:none;
1730
+ user-select:none;
1731
+ }
1826
1732
 
1827
- .tds-combo-box-load-more{
1828
- position:relative;
1829
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1830
- }
1733
+ :is(.tds-input :is(input,textarea))::placeholder{
1734
+ color:var(--t-form-placeholder-color);
1735
+ -webkit-user-select:none;
1736
+ -moz-user-select:none;
1737
+ user-select:none;
1738
+ }
1831
1739
 
1832
- .tds-combo-box-empty-state,
1833
- .tds-combo-box-load-more{
1834
- --tds-loading-spinner-visibility:visible;
1835
- --tds-loading-spinner-animation-play-state:running;
1836
- }
1740
+ @media (prefers-reduced-motion: reduce){
1837
1741
 
1838
- .tds-combo-box-list-section:not(:first-child){
1839
- margin-block-start:var(--t-spacing-half);
1742
+ .tds-input :is(input,textarea){
1743
+ --tds-input-transition-property:none;
1840
1744
  }
1745
+ }
1841
1746
 
1842
- .tds-combo-box-section-header{
1843
- padding-block:var(--t-spacing-1);
1844
- padding-inline:var(--t-spacing-1);
1845
- font-size:var(--t-font-size-sm);
1846
- font-weight:var(--t-font-weight-semibold);
1847
- color:var(--t-text-color-secondary);
1848
- }
1747
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1748
+ --tds-input-background-color:var(--t-form-background-color-error);
1749
+ --tds-input-border-color:var(--t-form-border-color-error);
1750
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1751
+ --tds-input-description-color:var(--t-text-color-status-error);
1752
+ --tds-input-description-invalid-icon-display:inline-block;
1753
+ }
1849
1754
 
1850
- .tds-toggle-switch{
1851
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1852
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1853
- --tds-toggle-switch-cursor:pointer;
1854
- --tds-toggle-switch-display:inline-grid;
1855
- --tds-toggle-switch-line-height:1.4;
1755
+ .tds-input:has(:is(input,textarea):required) label::after{
1756
+ margin-left:.25ch;
1757
+ color:var(--t-text-color-status-error);
1758
+ content:"*";
1759
+ }
1856
1760
 
1857
- --tds-toggle-switch-label-color:var(--t-form-color);
1761
+ .tds-input:where(:has(:is(input,textarea):disabled)){
1762
+ --tds-input-border-color:var(--t-form-border-color-disabled);
1763
+ --tds-input-background-color:var(--t-form-background-color-disabled);
1764
+ --tds-input-color:var(--t-form-color-disabled);
1765
+ }
1858
1766
 
1859
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1860
- --tds-toggle-switch-track-outline:none;
1861
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1862
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1863
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1767
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1768
+ cursor:not-allowed;
1769
+ }
1864
1770
 
1865
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1866
- --tds-toggle-switch-thumb-transform:translateX(0);
1867
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1771
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
1772
+ --tds-input-border-color:var(--t-form-border-color-readonly);
1773
+ --tds-input-background-color:var(--t-form-background-color-readonly);
1774
+ }
1868
1775
 
1869
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1870
- --tds-toggle-switch-description-line-height:1.35;
1871
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1872
- position:relative;
1776
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1777
+ border-color:var(--tds-input-border-color-hover);
1778
+ }
1873
1779
 
1874
- display:var(--tds-toggle-switch-display);
1875
- grid-template-columns:auto;
1876
- grid-auto-columns:1fr;
1877
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1878
- -webkit-user-select:none;
1879
- -moz-user-select:none;
1880
- user-select:none;
1881
- }
1780
+ .tds-input.tds-input--lg{
1781
+ --tds-input-min-height:var(--t-container-size-lg);
1782
+ --tds-input-font-size:var(--t-font-size-lg);
1783
+ }
1882
1784
 
1883
- .tds-toggle-switch input[type="checkbox"]{
1884
- position:absolute;
1885
- width:var(--tds-toggle-switch-track-width);
1886
- height:var(--tds-toggle-switch-track-height);
1887
- margin:0;
1888
- -webkit-appearance:none;
1889
- -moz-appearance:none;
1890
- appearance:none;
1891
- cursor:var(--tds-toggle-switch-cursor);
1892
- outline:var(--tds-toggle-switch-track-outline);
1893
- outline-offset:var(--t-focus-ring-offset);
1894
- background-color:transparent;
1895
- border:0;
1896
- border-radius:var(--t-border-radius-round);
1785
+ .tds-input-description{
1786
+ display:flex;
1787
+ gap:var(--t-spacing-half);
1788
+ align-items:flex-start;
1789
+ margin:0;
1790
+ font-size:var(--t-font-size-sm);
1791
+ line-height:1.35;
1792
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
1793
+ cursor:text;
1794
+ }
1795
+
1796
+ .tds-input-description .tds-input-description-invalid-icon{
1797
+ display:var(--tds-input-description-invalid-icon-display, none);
1798
+ flex-shrink:0;
1799
+ margin-block-start:calc(.5lh - .5em);
1800
+ line-height:1.35;
1897
1801
  }
1898
1802
 
1899
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1900
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1901
- }
1803
+ .tds-field{
1804
+ --tds-field-border-color:var(--t-form-border-color);
1805
+ --tds-field-border-color-hover:var(--t-form-border-color-hover);
1806
+ --tds-field-border-color-active:var(--t-form-border-color-focus);
1807
+ --tds-field-background-color:var(--t-form-background-color);
1808
+ --tds-field-color:var(--t-form-color);
1809
+ --tds-field-placeholder-color:var(--t-form-placeholder-color);
1810
+ --tds-field-font-size:var(--t-font-size-md);
1811
+ --tds-field-min-height:var(--t-container-size-md);
1812
+ --tds-field-padding-block:6px;
1813
+ --tds-field-padding-inline:var(--t-spacing-1);
1814
+ --tds-field-description-color:var(--t-text-color-secondary);
1815
+ --tds-field-description-invalid-icon-display:none;
1902
1816
 
1903
- .tds-toggle-switch label{
1904
- display:inline-flex;
1905
- grid-area:1 / 2;
1906
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1907
- column-gap:var(--tds-toggle-switch-column-gap);
1908
- margin-top:-.09375em;
1909
- font-size:var(--tds-toggle-switch-font-size);
1910
- font-weight:var(--t-font-weight-normal);
1911
- line-height:var(--tds-toggle-switch-line-height);
1912
- color:var(--tds-toggle-switch-label-color);
1913
- cursor:var(--tds-toggle-switch-cursor);
1817
+ position:relative;
1818
+ display:flex;
1819
+ flex-direction:column;
1820
+ gap:var(--t-spacing-half);
1821
+ }
1822
+
1823
+ .tds-field[data-required] .tds-field-label::after{
1824
+ margin-left:.25ch;
1825
+ color:var(--t-text-color-status-error);
1826
+ content:"*";
1914
1827
  }
1915
1828
 
1916
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1917
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1829
+ .tds-field[data-invalid]{
1830
+ --tds-field-border-color:var(--t-form-border-color-error);
1831
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1832
+ --tds-field-border-color-active:var(--t-form-border-color-error-hover);
1833
+ --tds-field-background-color:var(--t-form-background-color-error);
1834
+ --tds-field-description-color:var(--t-text-color-status-error);
1835
+ --tds-field-description-invalid-icon-display:inline-block;
1918
1836
  }
1919
1837
 
1920
- .tds-toggle-switch:has(input:checked){
1921
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1922
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1838
+ .tds-field[data-disabled]{
1839
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1840
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1841
+ --tds-field-color:var(--t-form-color-disabled);
1842
+ --tds-field-placeholder-color:var(--t-form-color-disabled);
1923
1843
  }
1924
1844
 
1925
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1926
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1845
+ .tds-field[data-disabled] .tds-field-control{
1846
+ cursor:not-allowed;
1927
1847
  }
1928
1848
 
1929
- .tds-toggle-switch:has(input:disabled){
1930
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1931
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1932
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1933
- --tds-toggle-switch-cursor:not-allowed;
1934
- }
1849
+ .tds-field--lg{
1850
+ --tds-field-min-height:var(--t-container-size-lg);
1851
+ --tds-field-font-size:var(--t-font-size-lg);
1852
+ }
1935
1853
 
1936
- .tds-toggle-switch-track{
1937
- position:relative;
1938
- flex-shrink:0;
1939
- width:var(--tds-toggle-switch-track-width);
1940
- height:var(--tds-toggle-switch-track-height);
1941
- background-color:var(--tds-toggle-switch-track-background-color);
1942
- border-radius:var(--t-border-radius-round);
1943
- transition:var(--tds-toggle-switch-track-transition);
1854
+ .tds-field-label{
1855
+ font-size:var(--t-font-size-md);
1856
+ font-weight:var(--t-font-weight-normal);
1857
+ color:var(--t-text-color);
1858
+ cursor:default;
1944
1859
  }
1945
1860
 
1946
- .tds-toggle-switch-track::before{
1947
- position:absolute;
1948
- top:var(--t-spacing-fourth);
1949
- left:var(--t-spacing-fourth);
1950
- width:var(--tds-toggle-switch-thumb-size);
1951
- height:var(--tds-toggle-switch-thumb-size);
1952
- content:"";
1953
- background-color:#fff;
1954
- border-radius:var(--t-border-radius-round);
1955
- transform:var(--tds-toggle-switch-thumb-transform);
1956
- transition:var(--tds-toggle-switch-thumb-transition);
1861
+ .tds-field-control{
1862
+ display:flex;
1863
+ align-items:center;
1864
+ inline-size:100%;
1865
+ min-block-size:var(--tds-field-min-height);
1866
+ font-family:inherit;
1867
+ font-size:var(--tds-field-font-size);
1868
+ line-height:1;
1869
+ color:var(--tds-field-color);
1870
+ -webkit-appearance:none;
1871
+ -moz-appearance:none;
1872
+ appearance:none;
1873
+ cursor:text;
1874
+ outline:var(--t-focus-ring-width) solid transparent;
1875
+ outline-offset:0;
1876
+ background-color:var(--tds-field-background-color);
1877
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1878
+ border-radius:var(--t-form-border-radius);
1879
+ transition-timing-function:var(--t-ease-in-out);
1880
+ transition-duration:var(--t-duration-200);
1881
+ transition-property:background-color, border-color, outline-color, outline-offset;
1882
+ }
1883
+
1884
+ .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
1885
+ border-color:var(--tds-field-border-color-hover);
1957
1886
  }
1958
1887
 
1959
- @media (prefers-reduced-motion: reduce){
1888
+ .tds-field-control[data-focus-within]{
1889
+ outline-color:var(--t-focus-ring-color);
1890
+ outline-offset:var(--t-focus-ring-offset);
1891
+ border-color:var(--tds-field-border-color-active);
1892
+ }
1960
1893
 
1961
- .tds-toggle-switch-track{
1962
- --tds-toggle-switch-track-transition:none;
1963
- --tds-toggle-switch-thumb-transition:none;
1964
- }
1894
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
1895
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1896
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1897
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1898
+ color:var(--t-form-color-readonly);
1965
1899
  }
1966
1900
 
1967
- .tds-toggle-switch-description{
1901
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
1902
+ border-color:var(--t-form-border-color-hover);
1903
+ }
1904
+
1905
+ .tds-field-description{
1968
1906
  display:flex;
1969
- grid-area:2 / 2;
1907
+ gap:var(--t-spacing-half);
1970
1908
  align-items:flex-start;
1971
1909
  margin:0;
1972
- font-size:var(--tds-toggle-switch-description-font-size);
1973
- line-height:var(--tds-toggle-switch-description-line-height);
1974
- color:var(--tds-toggle-switch-description-color);
1910
+ font-size:var(--t-font-size-sm);
1911
+ line-height:1.35;
1912
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
1975
1913
  cursor:text;
1976
1914
  }
1977
1915
 
1978
- .tds-toggle-switch--sm{
1979
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1980
- --tds-toggle-switch-line-height:1.35;
1981
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1982
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1983
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1984
- --tds-toggle-switch-description-line-height:1.3;
1985
- }
1916
+ .tds-field-description .tds-field-description-invalid-icon{
1917
+ display:var(--tds-field-description-invalid-icon-display, none);
1918
+ flex-shrink:0;
1919
+ margin-block-start:calc(.5lh - .5em);
1920
+ line-height:1.35;
1921
+ }
1986
1922
 
1987
- .tds-toggle-switch--hide-label{
1988
- --tds-toggle-switch-display:inline-flex;
1923
+ .tds-field-date-segment{
1924
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
1925
+ text-align:end;
1926
+ text-wrap:nowrap;
1927
+ caret-color:transparent;
1928
+ border-radius:var(--t-border-radius-sm);
1989
1929
  }
1990
1930
 
1991
- .tds-select{
1992
- --tds-select-border-color:var(--t-form-border-color);
1993
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1994
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1995
- --tds-select-background-color:var(--t-form-background-color);
1996
- --tds-select-color:var(--t-form-color);
1997
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1998
- --tds-select-font-size:var(--t-font-size-md);
1999
- --tds-select-min-height:var(--t-container-size-md);
2000
- --tds-select-padding-block:6px;
2001
- --tds-select-description-color:var(--t-text-color-secondary);
2002
- --tds-select-description-invalid-icon-display:none;
2003
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2004
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2005
- --tds-select-caret-size:1em;
2006
- --tds-select-caret-inline-offset:.75em;
2007
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1931
+ .tds-field-date-segment[data-placeholder]{
1932
+ color:var(--tds-field-placeholder-color);
1933
+ }
2008
1934
 
2009
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
2010
- --tds-select-dropdown-border:1px solid var(--t-border-color);
2011
- --tds-select-dropdown-padding:var(--t-spacing-1);
2012
- --tds-select-dropdown-margin-block:5px;
2013
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
2014
- --tds-select-dropdown-scrollbar-width:thin;
2015
- --tds-select-dropdown-border-radius:var(--t-border-radius);
2016
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2017
- --tds-select-dropdown-scroll-behavior:smooth;
2018
- --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2019
- --tds-select-dropdown-closed-opacity:0;
2020
- --tds-select-dropdown-open-opacity:1;
2021
- --tds-select-dropdown-closed-translate:0 -8px;
2022
- --tds-select-dropdown-open-translate:0 0;
1935
+ .tds-field-date-segment[data-focused]{
1936
+ color:var(--t-text-color-inverted);
1937
+ outline:0;
1938
+ background-color:var(--t-fill-color-interaction);
1939
+ }
2023
1940
 
2024
- --tds-select-option-gap:var(--t-spacing-1);
2025
- --tds-select-option-padding-block:var(--t-spacing-1);
2026
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2027
- --tds-select-option-font-size:1rem;
2028
- --tds-select-option-color:var(--t-text-color);
2029
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2030
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2031
- --tds-select-option-border-radius:var(--t-border-radius);
1941
+ .tds-field-date-segment-separator{
1942
+ padding-inline:0;
1943
+ color:var(--tds-field-placeholder-color);
1944
+ }
2032
1945
 
2033
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2034
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2035
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
2036
- --tds-select-group-label-font-size:var(--t-font-size-sm);
2037
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2038
- --tds-select-group-label-letter-spacing:0;
2039
- --tds-select-group-label-color:var(--t-text-color-secondary);
2040
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2041
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2042
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1946
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
1947
+ color:var(--tds-field-color);
1948
+ }
1949
+
1950
+ .tds-time-field-input{
1951
+ --tds-field-date-segment-padding-inline:1px;
1952
+ padding-block:var(--tds-field-padding-block);
1953
+ padding-inline:var(--tds-field-padding-inline);
1954
+ font-variant-numeric:tabular-nums;
1955
+ }
1956
+
1957
+ .tds-radio{
1958
+ --tds-radio-font-size:var(--t-font-size-md);
1959
+ --tds-radio-cursor:pointer;
1960
+ --tds-radio-line-height:1.4;
1961
+ --tds-radio-transition-property:border-width;
1962
+
1963
+ --tds-radio-input-size:var(--t-element-size-md);
1964
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1965
+ --tds-radio-input-border-color:var(--t-form-border-color);
1966
+ --tds-radio-input-border-width:var(--t-form-border-width);
1967
+ --tds-radio-input-background-color:transparent;
1968
+
1969
+ --tds-radio-label-color:var(--t-form-color);
1970
+
1971
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1972
+ --tds-radio-description-line-height:1.35;
1973
+ --tds-radio-description-color:var(--t-text-color-secondary);
2043
1974
 
2044
1975
  position:relative;
2045
- display:flex;
2046
- flex-direction:column;
2047
- gap:var(--t-spacing-half);
1976
+ display:inline-grid;
1977
+ grid-template-columns:auto;
1978
+ grid-auto-columns:1fr;
1979
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1980
+ line-height:var(--tds-radio-line-height);
1981
+ cursor:var(--tds-radio-cursor);
1982
+ -webkit-user-select:none;
1983
+ -moz-user-select:none;
1984
+ user-select:none;
2048
1985
  }
2049
1986
 
2050
- .tds-select :is(label,.tds-select-label){
2051
- font-size:var(--t-font-size-md);
1987
+ .tds-radio label{
1988
+ grid-area:1 / 2;
1989
+ font-size:var(--tds-radio-font-size);
2052
1990
  font-weight:var(--t-font-weight-normal);
2053
- color:var(--t-text-color);
2054
- cursor:default;
1991
+ color:var(--tds-radio-label-color);
1992
+ cursor:var(--tds-radio-cursor);
2055
1993
  }
2056
1994
 
2057
- .tds-select :is(select,button){
1995
+ .tds-radio input[type="radio"]{
2058
1996
  position:relative;
2059
- place-items:center;
2060
- inline-size:100%;
2061
- min-block-size:var(--tds-select-min-height);
2062
- padding-block:var(--tds-select-padding-block);
2063
- padding-inline:var(--t-spacing-1);
2064
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2065
- font-family:inherit;
2066
- font-size:var(--tds-select-font-size);
2067
- line-height:1;
2068
- color:var(--tds-select-color);
2069
- text-align:left;
1997
+ width:1em;
1998
+ height:1em;
1999
+ margin:calc((1lh - 1em) / 2) 0 0;
2000
+ font-size:var(--tds-radio-font-size);
2001
+ line-height:inherit;
2070
2002
  -webkit-appearance:none;
2071
2003
  -moz-appearance:none;
2072
2004
  appearance:none;
2073
- cursor:var(--tds-select-cursor, default);
2074
- outline:var(--t-focus-ring-width) solid transparent;
2075
- outline-offset:0;
2076
- background-color:var(--tds-select-background-color);
2077
- background-image:var(--tds-select-background-image);
2078
- background-repeat:no-repeat;
2079
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
2080
- background-size:var(--tds-select-caret-size);
2081
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
2082
- border-radius:var(--t-form-border-radius);
2005
+ cursor:var(--tds-radio-cursor);
2006
+ background-color:var(--tds-radio-input-background-color);
2007
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2008
+ border-radius:var(--tds-radio-input-border-radius);
2083
2009
  transition-timing-function:var(--t-ease-in-out);
2084
- transition-duration:var(--t-duration-300);
2085
- transition-property:var(--tds-select-transition-property);
2010
+ transition-duration:var(--t-duration-200);
2011
+ transition-property:var(--tds-radio-transition-property);
2086
2012
  }
2087
2013
 
2088
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2089
- border-color:var(--tds-select-border-color-hover);
2014
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2015
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2016
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2090
2017
  }
2091
2018
 
2092
- :is(.tds-select :is(select,button)):focus{
2093
- outline-color:var(--t-focus-ring-color);
2019
+ :is(.tds-radio input[type="radio"]):focus-visible{
2020
+ outline:var(--t-focus-ring-outline);
2094
2021
  outline-offset:var(--t-focus-ring-offset);
2095
- border-color:var(--tds-select-border-color-active);
2096
2022
  }
2097
2023
 
2098
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2099
- color:var(--tds-select-placeholder-color);
2024
+ :is(.tds-radio input[type="radio"]):disabled{
2025
+ pointer-events:none;
2100
2026
  }
2101
2027
 
2102
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2103
- --tds-select-border-color:var(--t-form-border-color-error);
2104
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2105
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2106
- --tds-select-background-color:var(--t-form-background-color-error);
2107
- --tds-select-description-color:var(--t-text-color-status-error);
2108
- --tds-select-description-invalid-icon-display:inline-block;
2109
- }
2028
+ @media (prefers-reduced-motion: reduce){
2110
2029
 
2111
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2112
- margin-left:.25ch;
2113
- color:var(--t-text-color-status-error);
2114
- content:"*";
2030
+ .tds-radio input[type="radio"]{
2031
+ --tds-radio-transition-property:none;
2032
+ }
2115
2033
  }
2116
2034
 
2117
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2118
- --tds-select-border-color:var(--t-form-border-color-disabled);
2119
- --tds-select-background-color:var(--t-form-background-color-disabled);
2120
- --tds-select-color:var(--t-form-color-disabled);
2121
- --tds-select-cursor:not-allowed;
2035
+ .tds-radio:has(input:checked){
2036
+ --tds-radio-input-background-color:var(--t-form-background-color);
2037
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2038
+ --tds-radio-input-border-width:4px;
2122
2039
  }
2123
2040
 
2124
- .tds-select:has( > [popover]:popover-open) > button{
2125
- border-color:var(--tds-select-border-color-active);
2041
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2042
+ --tds-radio-input-background-color:var(--t-form-background-color);
2043
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2044
+ }
2045
+
2046
+ .tds-radio:has(input:user-invalid){
2047
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2126
2048
  }
2127
2049
 
2128
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2129
- transform:rotate(.5turn);
2050
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2051
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2052
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2130
2053
  }
2131
2054
 
2132
- .tds-select :is(hr,li[role="separator"]){
2133
- margin-block:var(--t-spacing-half);
2134
- color:var(--tds-select-border-color);
2135
- border:0;
2136
- border-top:1px solid;
2137
- }
2055
+ .tds-radio:has(input:disabled){
2056
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2057
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2138
2058
 
2139
- .tds-select :is(li[role="option"],option:not([hidden])){
2140
- display:block;
2141
- padding-block:var(--tds-select-option-padding-block);
2142
- padding-inline:var(--tds-select-option-padding-inline);
2143
- overflow:hidden;
2144
- text-overflow:ellipsis;
2145
- font-size:var(--tds-select-option-font-size);
2146
- color:var(--tds-select-option-color);
2147
- white-space:nowrap;
2148
- cursor:default;
2149
- border-radius:var(--tds-select-option-border-radius);
2059
+ --tds-radio-label-color:var(--t-form-color-disabled);
2060
+ --tds-radio-description-color:var(--t-form-color-disabled);
2061
+ --tds-radio-cursor:not-allowed;
2150
2062
  }
2151
2063
 
2152
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2153
- outline:none;
2064
+ .tds-radio:has(input:disabled) input:checked{
2065
+ --tds-radio-input-background-color:var(--t-form-background-color);
2066
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2154
2067
  }
2155
2068
 
2156
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2157
- background:var(--tds-select-option-background-hover);
2158
- }
2069
+ .tds-radio-description{
2070
+ display:flex;
2071
+ grid-area:2 / 2;
2072
+ gap:var(--t-spacing-half);
2073
+ align-items:flex-start;
2074
+ margin:0;
2075
+ font-size:var(--tds-radio-description-font-size);
2076
+ line-height:var(--tds-radio-description-line-height);
2077
+ color:var(--tds-radio-description-color);
2078
+ cursor:text;
2079
+ }
2159
2080
 
2160
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2161
- background:var(--tds-select-option-background-active);
2162
- }
2081
+ .tds-radio--sm{
2082
+ --tds-radio-line-height:1.35;
2083
+ --tds-radio-input-size:var(--t-element-size-sm);
2084
+ --tds-radio-font-size:var(--t-font-size-sm);
2085
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2086
+ --tds-radio-description-line-height:1.3;
2087
+ }
2163
2088
 
2164
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2165
- color:var(--t-form-color-disabled);
2166
- cursor:not-allowed;
2167
- }
2089
+ .tds-input:has(textarea){
2090
+ --tds-input-padding-block:6px;
2091
+ --tds-input-resizer-size:var(--t-element-size-sm);
2092
+ --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");
2093
+ }
2168
2094
 
2169
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2170
- background:transparent;
2171
- }
2095
+ @supports (x: attr(x type(*))){
2172
2096
 
2173
- .tds-select :is(li[role="presentation"],legend){
2174
- position:sticky;
2175
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2176
- z-index:1;
2177
- float:inline-start;
2178
- inline-size:100%;
2179
- padding-block:var(--tds-select-group-label-padding-block);
2180
- padding-inline:var(--tds-select-group-label-padding-inline);
2181
- container-type:scroll-state;
2182
- font-size:var(--tds-select-group-label-font-size);
2183
- font-weight:var(--tds-select-group-label-font-weight);
2184
- letter-spacing:var(--tds-select-group-label-letter-spacing);
2185
- background:var(--tds-select-group-label-background);
2186
- text-box:trim-both cap alphabetic;
2097
+ .tds-input:has(textarea){
2098
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2099
+ }
2187
2100
  }
2188
2101
 
2189
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2190
- display:inline-flex;
2191
- gap:var(--t-spacing-half);
2192
- align-items:center;
2193
- color:var(--tds-select-group-label-color);
2194
- transition:var(--tds-select-group-label-transition);
2102
+ .tds-input.tds-textarea--resize-vertical textarea{
2103
+ resize:vertical;
2195
2104
  }
2196
2105
 
2197
- @container scroll-state(stuck){
2198
-
2199
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2200
- color:var(--tds-select-group-label-color-stuck);
2106
+ .tds-input.tds-textarea--resize-none textarea{
2107
+ resize:none;
2201
2108
  }
2202
2109
 
2203
- @media (forced-colors: active){
2204
-
2205
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2206
- color:var(--tds-select-group-label-color-stuck);
2110
+ .tds-input.tds-textarea--resize-auto textarea{
2111
+ resize:vertical;
2207
2112
  }
2208
- }
2113
+
2114
+ @supports (field-sizing: content){
2115
+ .tds-input.tds-textarea--resize-auto textarea{
2116
+ field-sizing:content;
2117
+ resize:none;
2209
2118
  }
2119
+ }
2210
2120
 
2211
- .tds-select.tds-select--lg{
2212
- --tds-select-min-height:var(--t-container-size-lg);
2213
- --tds-select-font-size:var(--t-font-size-lg);
2214
- }
2215
-
2216
- @media (prefers-reduced-motion: reduce){
2217
-
2218
- .tds-select{
2219
- --tds-select-transition-property:none;
2220
- --tds-select-dropdown-transition:none;
2221
- --tds-select-dropdown-scroll-behavior:auto;
2222
- --tds-select-dropdown-closed-translate:none;
2223
- --tds-select-dropdown-open-translate:none;
2224
- --tds-select-caret-transition:none;
2225
- }
2226
- }
2227
-
2228
- .tds-select-description{
2229
- display:flex;
2230
- gap:var(--t-spacing-half);
2231
- align-items:flex-start;
2232
- margin:0;
2233
- font-size:var(--t-font-size-sm);
2234
- line-height:1.35;
2235
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
2236
- cursor:text;
2121
+ .tds-input textarea{
2122
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2123
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2124
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2125
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2126
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2127
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2128
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2129
+ --tds-input-scrollbar-thumb-border-radius:999px;
2130
+ --tds-input-scrollbar-thumb-border-width:3px;
2131
+ --tds-input-scrollbar-track-margin-block:.125rem;
2132
+ scrollbar-color:initial;
2133
+ transition-timing-function:var(--t-ease-in-out);
2134
+ transition-duration:var(--t-duration-200);
2135
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2237
2136
  }
2238
2137
 
2239
- .tds-select-description .tds-select-description-invalid-icon{
2240
- display:var(--tds-select-description-invalid-icon-display, none);
2241
- flex-shrink:0;
2242
- margin-block-start:calc(.5lh - .5em);
2243
- line-height:1.35;
2244
- }
2138
+ @media (pointer: fine){
2139
+ :is(.tds-input textarea)::-webkit-scrollbar{
2140
+ width:12px;
2141
+ height:12px;
2142
+ cursor:default;
2143
+ }
2245
2144
 
2246
- .tds-select > .tds-select-hidden-select{
2247
- position:absolute;
2248
- inline-size:1px;
2249
- block-size:1px;
2250
- padding:0;
2251
- margin:0;
2252
- pointer-events:none;
2253
- opacity:0;
2254
- }
2145
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2146
+ cursor:default;
2147
+ background:var(--tds-input-scrollbar-thumb-color);
2148
+ background-clip:content-box;
2149
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2150
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2151
+ }
2255
2152
 
2256
- .tds-select:has( > button) > button{
2257
- display:block;
2258
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2259
- overflow:hidden;
2260
- text-overflow:ellipsis;
2261
- color:var(--tds-select-placeholder-color);
2262
- white-space:nowrap;
2263
- background-image:none;
2264
- anchor-name:--tds-select-anchor;
2265
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
2266
- -webkit-tap-highlight-color:transparent;
2267
- }
2153
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2154
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2155
+ }
2268
2156
 
2269
- :is(.tds-select:has( > button) > button)::after{
2270
- position:absolute;
2271
- inset-block:0;
2272
- inset-inline-end:var(--tds-select-caret-inline-offset);
2273
- width:var(--tds-select-caret-size);
2274
- height:var(--tds-select-caret-size);
2275
- margin-block:auto;
2276
- pointer-events:none;
2277
- content:var(--tds-select-background-image);
2278
- transform:rotate(0);
2279
- transition:var(--tds-select-caret-transition);
2157
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2158
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2280
2159
  }
2281
2160
 
2282
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2283
- color:var(--tds-select-color);
2284
- }
2161
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2162
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2163
+ }
2285
2164
 
2286
- .tds-select:has( > button) [popover]{
2287
- position-anchor:--tds-select-anchor;
2288
- inset:auto;
2289
- inline-size:-moz-max-content;
2290
- inline-size:max-content;
2291
- min-inline-size:anchor-size(width);
2292
- max-inline-size:100vi;
2293
- max-block-size:min(50vh, 20rem);
2294
- padding:var(--tds-select-dropdown-padding);
2295
- margin-block:var(--tds-select-dropdown-margin-block);
2296
- position-area:block-end span-inline-start;
2297
- position-try-fallbacks:flip-block, flip-inline;
2298
- overflow:auto;
2299
- overflow-x:hidden;
2300
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2301
- overscroll-behavior:none;
2302
- -webkit-user-select:none;
2303
- -moz-user-select:none;
2304
- user-select:none;
2305
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2306
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2307
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2308
- background:var(--tds-select-dropdown-background-color);
2309
- border:var(--tds-select-dropdown-border);
2310
- border-radius:var(--tds-select-dropdown-border-radius);
2311
- box-shadow:var(--tds-select-dropdown-box-shadow);
2312
- opacity:var(--tds-select-dropdown-open-opacity);
2313
- translate:var(--tds-select-dropdown-open-translate);
2314
- transition:var(--tds-select-dropdown-transition);
2315
- }
2165
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2166
+ background:var(--tds-input-scrollbar-surface-color);
2167
+ }
2316
2168
 
2317
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
2318
- opacity:var(--tds-select-dropdown-closed-opacity);
2319
- translate:var(--tds-select-dropdown-closed-translate);
2169
+ :is(.tds-input textarea)::-webkit-resizer{
2170
+ background:var(--tds-input-resizer-icon) no-repeat;
2171
+ background-position:right bottom;
2172
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2320
2173
  }
2321
2174
 
2322
- :is(.tds-select:has( > button) [popover]) ul{
2323
- padding:0;
2324
- margin:0;
2325
- list-style:none;
2175
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2176
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2177
+ cursor:default;
2326
2178
  }
2327
2179
 
2328
- @starting-style{
2329
- :is(.tds-select:has( > button) [popover]):popover-open{
2330
- opacity:var(--tds-select-dropdown-closed-opacity);
2331
- translate:var(--tds-select-dropdown-closed-translate);
2180
+ @supports (-moz-appearance: none){
2181
+ :is(.tds-input textarea){
2182
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2183
+ scrollbar-width:thin;
2332
2184
  }
2333
- }
2334
2185
 
2335
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2336
- .tds-select select:has(> button){
2337
- padding-inline-end:0;
2338
- background-image:none;
2339
- }
2340
- @media (hover) and (pointer: fine){
2341
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2342
- padding-block:0;
2343
- -webkit-appearance:base-select;
2344
- -moz-appearance:base-select;
2345
- appearance:base-select;
2186
+ @media (hover){
2187
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2188
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2189
+ }
2346
2190
  }
2347
2191
  }
2348
- :is(.tds-select select:has( > button))::picker-icon{
2349
- flex-shrink:0;
2350
- width:var(--tds-select-caret-size);
2351
- height:var(--tds-select-caret-size);
2352
- margin-inline-end:var(--tds-select-caret-inline-offset);
2353
- content:var(--tds-select-background-image);
2354
- transition:var(--tds-select-caret-transition);
2355
- }
2192
+ }
2356
2193
 
2357
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2358
- opacity:var(--tds-select-dropdown-closed-opacity);
2359
- translate:var(--tds-select-dropdown-closed-translate);
2360
- }
2194
+ .tds-radio-group{
2195
+ --tds-radio-group-font-size:var(--t-font-size-md);
2196
+ --tds-radio-group-line-height:1.4;
2197
+ --tds-radio-group-gap:var(--t-spacing-1);
2361
2198
 
2362
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2363
- outline-color:var(--t-focus-ring-color);
2364
- outline-offset:var(--t-focus-ring-offset);
2365
- border-color:var(--tds-select-border-color-active);
2366
- }
2199
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
2367
2200
 
2368
- :is(.tds-select select:has( > button)):open::picker-icon{
2369
- opacity:1;
2370
- transform:rotate(.5turn);
2371
- }
2201
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2202
+ --tds-radio-group-description-line-height:1.35;
2203
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2204
+ --tds-radio-group-description-invalid-icon-display:none;
2205
+ display:flex;
2206
+ flex-direction:column;
2207
+ gap:var(--tds-radio-group-gap);
2208
+ padding:0;
2209
+ margin:0;
2372
2210
 
2373
- :is(.tds-select select:has( > button)) selectedcontent{
2374
- overflow:hidden;
2375
- text-overflow:ellipsis;
2376
- line-height:calc(var(--tds-select-min-height) - 2px);
2377
- white-space:nowrap;
2378
- }
2211
+ font-size:var(--tds-radio-group-font-size);
2212
+ line-height:var(--tds-radio-group-line-height);
2213
+ border:0;
2214
+ }
2379
2215
 
2380
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2381
- color:var(--tds-select-placeholder-color);
2382
- }
2216
+ .tds-radio-group legend{
2217
+ padding:0;
2218
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
2219
+ }
2383
2220
 
2384
- :is(.tds-select select:has( > button))::picker(select){
2385
- inset:auto;
2386
- inline-size:-moz-max-content;
2387
- inline-size:max-content;
2388
- min-inline-size:anchor-size(width);
2389
- max-inline-size:100vi;
2390
- padding:var(--tds-select-dropdown-padding);
2391
- margin-block:var(--tds-select-dropdown-margin-block);
2392
- position-try-fallbacks:flip-block, flip-inline;
2393
- overflow:auto;
2394
- overflow-x:hidden;
2395
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2396
- overscroll-behavior:none;
2397
- -webkit-user-select:none;
2398
- -moz-user-select:none;
2399
- user-select:none;
2400
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2401
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2402
- background:var(--tds-select-dropdown-background-color);
2403
- border:var(--tds-select-dropdown-border);
2404
- border-radius:var(--tds-select-dropdown-border-radius);
2405
- box-shadow:var(--tds-select-dropdown-box-shadow);
2406
- opacity:var(--tds-select-dropdown-open-opacity);
2407
- translate:var(--tds-select-dropdown-open-translate);
2408
- transition:var(--tds-select-dropdown-transition);
2409
- }
2221
+ .tds-radio-group:has(.tds-radio-group-description){
2222
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
2223
+ }
2410
2224
 
2411
- :is(.tds-select select:has( > button)) option::checkmark{
2412
- display:none;
2225
+ .tds-radio-group[aria-invalid="true"]{
2226
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2227
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2228
+ }
2229
+
2230
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2231
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2413
2232
  }
2414
2233
 
2415
- @starting-style{
2416
- :is(.tds-select select:has( > button))::picker(select):popover-open{
2417
- opacity:var(--tds-select-dropdown-closed-opacity);
2418
- translate:var(--tds-select-dropdown-closed-translate);
2234
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2235
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2236
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2237
+ }
2238
+
2239
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2240
+ --tds-radio-input-background-color:var(--t-form-background-color);
2419
2241
  }
2242
+
2243
+ .tds-radio-group:has(input:required) legend::after{
2244
+ margin-left:.25ch;
2245
+ color:var(--t-text-color-status-error);
2246
+ content:"*";
2420
2247
  }
2248
+
2249
+ .tds-radio-group-fields{
2250
+ display:flex;
2251
+ flex-direction:column;
2252
+ gap:var(--tds-radio-group-gap);
2253
+ align-items:flex-start;
2421
2254
  }
2422
2255
 
2423
- .tds-time-field-input{
2424
- --tds-field-date-segment-padding-inline:1px;
2425
- padding-block:var(--tds-field-padding-block);
2426
- padding-inline:var(--tds-field-padding-inline);
2427
- font-variant-numeric:tabular-nums;
2256
+ .tds-radio-group-description{
2257
+ display:flex;
2258
+ gap:var(--t-spacing-half);
2259
+ align-items:flex-start;
2260
+ margin:0;
2261
+ font-size:var(--tds-radio-group-description-font-size);
2262
+ line-height:var(--tds-radio-group-description-line-height);
2263
+ color:var(--tds-radio-group-description-color);
2264
+ cursor:text;
2428
2265
  }
2429
2266
 
2430
- .tds-input{
2431
- --tds-input-border-color:var(--t-form-border-color);
2432
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2433
- --tds-input-background-color:var(--t-form-background-color);
2434
- --tds-input-color:var(--t-form-color);
2435
- --tds-input-font-size:var(--t-font-size-md);
2436
- --tds-input-description-color:var(--t-text-color-secondary);
2437
- --tds-input-description-invalid-icon-display:none;
2438
- --tds-input-min-height:var(--t-container-size-md);
2439
- --tds-input-padding-inline:var(--t-spacing-1);
2267
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2268
+ display:var(--tds-radio-group-description-invalid-icon-display);
2269
+ flex-shrink:0;
2270
+ margin-top:calc(.5lh - .5em);
2271
+ line-height:var(--tds-radio-group-description-line-height);
2272
+ }
2440
2273
 
2441
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2274
+ .tds-radio-group--sm{
2275
+ --tds-radio-group-line-height:1.35;
2276
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2277
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2278
+ --tds-radio-group-description-line-height:1.3;
2279
+ }
2442
2280
 
2281
+ .tds-select{
2282
+ --tds-select-border-color:var(--t-form-border-color);
2283
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
2284
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
2285
+ --tds-select-background-color:var(--t-form-background-color);
2286
+ --tds-select-color:var(--t-form-color);
2287
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
2288
+ --tds-select-font-size:var(--t-font-size-md);
2289
+ --tds-select-min-height:var(--t-container-size-md);
2290
+ --tds-select-padding-block:6px;
2291
+ --tds-select-description-color:var(--t-text-color-secondary);
2292
+ --tds-select-description-invalid-icon-display:none;
2293
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2294
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2295
+ --tds-select-caret-size:1em;
2296
+ --tds-select-caret-inline-offset:.75em;
2297
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2298
+
2299
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
2300
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
2301
+ --tds-select-dropdown-padding:var(--t-spacing-1);
2302
+ --tds-select-dropdown-margin-block:5px;
2303
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
2304
+ --tds-select-dropdown-scrollbar-width:thin;
2305
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
2306
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2307
+ --tds-select-dropdown-scroll-behavior:smooth;
2308
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2309
+ --tds-select-dropdown-closed-opacity:0;
2310
+ --tds-select-dropdown-open-opacity:1;
2311
+ --tds-select-dropdown-closed-translate:0 -8px;
2312
+ --tds-select-dropdown-open-translate:0 0;
2313
+
2314
+ --tds-select-option-gap:var(--t-spacing-1);
2315
+ --tds-select-option-padding-block:var(--t-spacing-1);
2316
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2317
+ --tds-select-option-font-size:1rem;
2318
+ --tds-select-option-color:var(--t-text-color);
2319
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2320
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2321
+ --tds-select-option-border-radius:var(--t-border-radius);
2322
+
2323
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2324
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2325
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
2326
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
2327
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2328
+ --tds-select-group-label-letter-spacing:0;
2329
+ --tds-select-group-label-color:var(--t-text-color-secondary);
2330
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2331
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2332
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2333
+
2334
+ position:relative;
2443
2335
  display:flex;
2444
2336
  flex-direction:column;
2445
2337
  gap:var(--t-spacing-half);
2446
2338
  }
2447
2339
 
2448
- .tds-input label{
2340
+ .tds-select :is(label,.tds-select-label){
2449
2341
  font-size:var(--t-font-size-md);
2450
2342
  font-weight:var(--t-font-weight-normal);
2451
2343
  color:var(--t-text-color);
2344
+ cursor:default;
2345
+ }
2346
+
2347
+ .tds-select :is(select,button){
2348
+ position:relative;
2349
+ place-items:center;
2350
+ inline-size:100%;
2351
+ min-block-size:var(--tds-select-min-height);
2352
+ padding-block:var(--tds-select-padding-block);
2353
+ padding-inline:var(--t-spacing-1);
2354
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2355
+ font-family:inherit;
2356
+ font-size:var(--tds-select-font-size);
2357
+ line-height:1;
2358
+ color:var(--tds-select-color);
2359
+ text-align:left;
2360
+ -webkit-appearance:none;
2361
+ -moz-appearance:none;
2362
+ appearance:none;
2363
+ cursor:var(--tds-select-cursor, default);
2364
+ outline:var(--t-focus-ring-width) solid transparent;
2365
+ outline-offset:0;
2366
+ background-color:var(--tds-select-background-color);
2367
+ background-image:var(--tds-select-background-image);
2368
+ background-repeat:no-repeat;
2369
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
2370
+ background-size:var(--tds-select-caret-size);
2371
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
2372
+ border-radius:var(--t-form-border-radius);
2373
+ transition-timing-function:var(--t-ease-in-out);
2374
+ transition-duration:var(--t-duration-300);
2375
+ transition-property:var(--tds-select-transition-property);
2376
+ }
2377
+
2378
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2379
+ border-color:var(--tds-select-border-color-hover);
2380
+ }
2381
+
2382
+ :is(.tds-select :is(select,button)):focus{
2383
+ outline-color:var(--t-focus-ring-color);
2384
+ outline-offset:var(--t-focus-ring-offset);
2385
+ border-color:var(--tds-select-border-color-active);
2386
+ }
2387
+
2388
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2389
+ color:var(--tds-select-placeholder-color);
2390
+ }
2391
+
2392
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2393
+ --tds-select-border-color:var(--t-form-border-color-error);
2394
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2395
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2396
+ --tds-select-background-color:var(--t-form-background-color-error);
2397
+ --tds-select-description-color:var(--t-text-color-status-error);
2398
+ --tds-select-description-invalid-icon-display:inline-block;
2399
+ }
2400
+
2401
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2402
+ margin-left:.25ch;
2403
+ color:var(--t-text-color-status-error);
2404
+ content:"*";
2405
+ }
2406
+
2407
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2408
+ --tds-select-border-color:var(--t-form-border-color-disabled);
2409
+ --tds-select-background-color:var(--t-form-background-color-disabled);
2410
+ --tds-select-color:var(--t-form-color-disabled);
2411
+ --tds-select-cursor:not-allowed;
2452
2412
  }
2453
2413
 
2454
- .tds-input :is(input,textarea){
2455
- inline-size:100%;
2456
- block-size:auto;
2457
- min-block-size:var(--tds-input-min-height);
2458
- padding-block:var(--tds-input-padding-block);
2459
- padding-inline:var(--tds-input-padding-inline);
2460
- font-family:inherit;
2461
- font-size:var(--tds-input-font-size);
2462
- color:var(--tds-input-color);
2463
- -webkit-appearance:none;
2464
- -moz-appearance:none;
2465
- appearance:none;
2466
- outline:var(--t-focus-ring-width) solid transparent;
2467
- outline-offset:0;
2468
- background-color:var(--tds-input-background-color);
2469
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2470
- border-radius:var(--t-form-border-radius);
2471
- transition-timing-function:var(--t-ease-in-out);
2472
- transition-duration:var(--t-duration-200);
2473
- transition-property:var(--tds-input-transition-property);
2414
+ .tds-select:has( > [popover]:popover-open) > button{
2415
+ border-color:var(--tds-select-border-color-active);
2474
2416
  }
2475
2417
 
2476
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2477
- border-color:var(--tds-input-border-color-hover);
2418
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2419
+ transform:rotate(.5turn);
2478
2420
  }
2479
2421
 
2480
- :is(.tds-input :is(input,textarea)):focus{
2481
- outline-color:transparent;
2422
+ .tds-select :is(hr,li[role="separator"]){
2423
+ margin-block:var(--t-spacing-half);
2424
+ color:var(--tds-select-border-color);
2425
+ border:0;
2426
+ border-top:1px solid;
2427
+ }
2428
+
2429
+ .tds-select :is(li[role="option"],option:not([hidden])){
2430
+ display:block;
2431
+ padding-block:var(--tds-select-option-padding-block);
2432
+ padding-inline:var(--tds-select-option-padding-inline);
2433
+ overflow:hidden;
2434
+ text-overflow:ellipsis;
2435
+ font-size:var(--tds-select-option-font-size);
2436
+ color:var(--tds-select-option-color);
2437
+ white-space:nowrap;
2438
+ cursor:default;
2439
+ border-radius:var(--tds-select-option-border-radius);
2440
+ }
2441
+
2442
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2443
+ outline:none;
2482
2444
  }
2483
2445
 
2484
- :is(.tds-input :is(input,textarea)):focus-visible{
2485
- outline-color:var(--t-focus-ring-color);
2486
- outline-offset:var(--t-focus-ring-offset);
2487
- border-color:var(--t-form-border-color-focus);
2446
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2447
+ background:var(--tds-select-option-background-hover);
2488
2448
  }
2489
2449
 
2490
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2491
- color:var(--t-form-placeholder-color);
2492
- -moz-user-select:none;
2493
- user-select:none;
2450
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2451
+ background:var(--tds-select-option-background-active);
2494
2452
  }
2495
2453
 
2496
- :is(.tds-input :is(input,textarea))::placeholder{
2497
- color:var(--t-form-placeholder-color);
2498
- -webkit-user-select:none;
2499
- -moz-user-select:none;
2500
- user-select:none;
2454
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2455
+ color:var(--t-form-color-disabled);
2456
+ cursor:not-allowed;
2501
2457
  }
2502
2458
 
2503
- @media (prefers-reduced-motion: reduce){
2459
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2460
+ background:transparent;
2461
+ }
2504
2462
 
2505
- .tds-input :is(input,textarea){
2506
- --tds-input-transition-property:none;
2463
+ .tds-select :is(li[role="presentation"],legend){
2464
+ position:sticky;
2465
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2466
+ z-index:1;
2467
+ float:inline-start;
2468
+ inline-size:100%;
2469
+ padding-block:var(--tds-select-group-label-padding-block);
2470
+ padding-inline:var(--tds-select-group-label-padding-inline);
2471
+ container-type:scroll-state;
2472
+ font-size:var(--tds-select-group-label-font-size);
2473
+ font-weight:var(--tds-select-group-label-font-weight);
2474
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
2475
+ background:var(--tds-select-group-label-background);
2476
+ text-box:trim-both cap alphabetic;
2507
2477
  }
2478
+
2479
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2480
+ display:inline-flex;
2481
+ gap:var(--t-spacing-half);
2482
+ align-items:center;
2483
+ color:var(--tds-select-group-label-color);
2484
+ transition:var(--tds-select-group-label-transition);
2508
2485
  }
2509
2486
 
2510
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2511
- --tds-input-background-color:var(--t-form-background-color-error);
2512
- --tds-input-border-color:var(--t-form-border-color-error);
2513
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2514
- --tds-input-description-color:var(--t-text-color-status-error);
2515
- --tds-input-description-invalid-icon-display:inline-block;
2516
- }
2487
+ @container scroll-state(stuck){
2517
2488
 
2518
- .tds-input:has(:is(input,textarea):required) label::after{
2519
- margin-left:.25ch;
2520
- color:var(--t-text-color-status-error);
2521
- content:"*";
2489
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2490
+ color:var(--tds-select-group-label-color-stuck);
2522
2491
  }
2523
2492
 
2524
- .tds-input:where(:has(:is(input,textarea):disabled)){
2525
- --tds-input-border-color:var(--t-form-border-color-disabled);
2526
- --tds-input-background-color:var(--t-form-background-color-disabled);
2527
- --tds-input-color:var(--t-form-color-disabled);
2528
- }
2493
+ @media (forced-colors: active){
2529
2494
 
2530
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2531
- cursor:not-allowed;
2495
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2496
+ color:var(--tds-select-group-label-color-stuck);
2532
2497
  }
2498
+ }
2499
+ }
2533
2500
 
2534
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2535
- --tds-input-border-color:var(--t-form-border-color-readonly);
2536
- --tds-input-background-color:var(--t-form-background-color-readonly);
2501
+ .tds-select.tds-select--lg{
2502
+ --tds-select-min-height:var(--t-container-size-lg);
2503
+ --tds-select-font-size:var(--t-font-size-lg);
2537
2504
  }
2538
2505
 
2539
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2540
- border-color:var(--tds-input-border-color-hover);
2541
- }
2506
+ @media (prefers-reduced-motion: reduce){
2542
2507
 
2543
- .tds-input.tds-input--lg{
2544
- --tds-input-min-height:var(--t-container-size-lg);
2545
- --tds-input-font-size:var(--t-font-size-lg);
2508
+ .tds-select{
2509
+ --tds-select-transition-property:none;
2510
+ --tds-select-dropdown-transition:none;
2511
+ --tds-select-dropdown-scroll-behavior:auto;
2512
+ --tds-select-dropdown-closed-translate:none;
2513
+ --tds-select-dropdown-open-translate:none;
2514
+ --tds-select-caret-transition:none;
2515
+ }
2546
2516
  }
2547
2517
 
2548
- .tds-input-description{
2518
+ .tds-select-description{
2549
2519
  display:flex;
2550
2520
  gap:var(--t-spacing-half);
2551
2521
  align-items:flex-start;
2552
2522
  margin:0;
2553
2523
  font-size:var(--t-font-size-sm);
2554
2524
  line-height:1.35;
2555
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2525
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
2556
2526
  cursor:text;
2557
2527
  }
2558
2528
 
2559
- .tds-input-description .tds-input-description-invalid-icon{
2560
- display:var(--tds-input-description-invalid-icon-display, none);
2529
+ .tds-select-description .tds-select-description-invalid-icon{
2530
+ display:var(--tds-select-description-invalid-icon-display, none);
2561
2531
  flex-shrink:0;
2562
2532
  margin-block-start:calc(.5lh - .5em);
2563
2533
  line-height:1.35;
2564
2534
  }
2565
2535
 
2566
- .tds-field{
2567
- --tds-field-border-color:var(--t-form-border-color);
2568
- --tds-field-border-color-hover:var(--t-form-border-color-hover);
2569
- --tds-field-border-color-active:var(--t-form-border-color-focus);
2570
- --tds-field-background-color:var(--t-form-background-color);
2571
- --tds-field-color:var(--t-form-color);
2572
- --tds-field-placeholder-color:var(--t-form-placeholder-color);
2573
- --tds-field-font-size:var(--t-font-size-md);
2574
- --tds-field-min-height:var(--t-container-size-md);
2575
- --tds-field-padding-block:6px;
2576
- --tds-field-padding-inline:var(--t-spacing-1);
2577
- --tds-field-description-color:var(--t-text-color-secondary);
2578
- --tds-field-description-invalid-icon-display:none;
2579
-
2580
- position:relative;
2581
- display:flex;
2582
- flex-direction:column;
2583
- gap:var(--t-spacing-half);
2536
+ .tds-select > .tds-select-hidden-select{
2537
+ position:absolute;
2538
+ inline-size:1px;
2539
+ block-size:1px;
2540
+ padding:0;
2541
+ margin:0;
2542
+ pointer-events:none;
2543
+ opacity:0;
2584
2544
  }
2585
2545
 
2586
- .tds-field[data-required] .tds-field-label::after{
2587
- margin-left:.25ch;
2588
- color:var(--t-text-color-status-error);
2589
- content:"*";
2546
+ .tds-select:has( > button) > button{
2547
+ display:block;
2548
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2549
+ overflow:hidden;
2550
+ text-overflow:ellipsis;
2551
+ color:var(--tds-select-placeholder-color);
2552
+ white-space:nowrap;
2553
+ background-image:none;
2554
+ anchor-name:--tds-select-anchor;
2555
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
2556
+ -webkit-tap-highlight-color:transparent;
2590
2557
  }
2591
2558
 
2592
- .tds-field[data-invalid]{
2593
- --tds-field-border-color:var(--t-form-border-color-error);
2594
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2595
- --tds-field-border-color-active:var(--t-form-border-color-error-hover);
2596
- --tds-field-background-color:var(--t-form-background-color-error);
2597
- --tds-field-description-color:var(--t-text-color-status-error);
2598
- --tds-field-description-invalid-icon-display:inline-block;
2559
+ :is(.tds-select:has( > button) > button)::after{
2560
+ position:absolute;
2561
+ inset-block:0;
2562
+ inset-inline-end:var(--tds-select-caret-inline-offset);
2563
+ width:var(--tds-select-caret-size);
2564
+ height:var(--tds-select-caret-size);
2565
+ margin-block:auto;
2566
+ pointer-events:none;
2567
+ content:var(--tds-select-background-image);
2568
+ transform:rotate(0);
2569
+ transition:var(--tds-select-caret-transition);
2570
+ }
2571
+
2572
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2573
+ color:var(--tds-select-color);
2599
2574
  }
2600
2575
 
2601
- .tds-field[data-disabled]{
2602
- --tds-field-border-color:var(--t-form-border-color-disabled);
2603
- --tds-field-background-color:var(--t-form-background-color-disabled);
2604
- --tds-field-color:var(--t-form-color-disabled);
2605
- --tds-field-placeholder-color:var(--t-form-color-disabled);
2576
+ .tds-select:has( > button) [popover]{
2577
+ position-anchor:--tds-select-anchor;
2578
+ inset:auto;
2579
+ inline-size:-moz-max-content;
2580
+ inline-size:max-content;
2581
+ min-inline-size:anchor-size(width);
2582
+ max-inline-size:100vi;
2583
+ max-block-size:min(50vh, 20rem);
2584
+ padding:var(--tds-select-dropdown-padding);
2585
+ margin-block:var(--tds-select-dropdown-margin-block);
2586
+ position-area:block-end span-inline-start;
2587
+ position-try-fallbacks:flip-block, flip-inline;
2588
+ overflow:auto;
2589
+ overflow-x:hidden;
2590
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2591
+ overscroll-behavior:none;
2592
+ -webkit-user-select:none;
2593
+ -moz-user-select:none;
2594
+ user-select:none;
2595
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2596
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2597
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2598
+ background:var(--tds-select-dropdown-background-color);
2599
+ border:var(--tds-select-dropdown-border);
2600
+ border-radius:var(--tds-select-dropdown-border-radius);
2601
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2602
+ opacity:var(--tds-select-dropdown-open-opacity);
2603
+ translate:var(--tds-select-dropdown-open-translate);
2604
+ transition:var(--tds-select-dropdown-transition);
2606
2605
  }
2607
2606
 
2608
- .tds-field[data-disabled] .tds-field-control{
2609
- cursor:not-allowed;
2607
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
2608
+ opacity:var(--tds-select-dropdown-closed-opacity);
2609
+ translate:var(--tds-select-dropdown-closed-translate);
2610
2610
  }
2611
2611
 
2612
- .tds-field--lg{
2613
- --tds-field-min-height:var(--t-container-size-lg);
2614
- --tds-field-font-size:var(--t-font-size-lg);
2615
- }
2616
-
2617
- .tds-field-label{
2618
- font-size:var(--t-font-size-md);
2619
- font-weight:var(--t-font-weight-normal);
2620
- color:var(--t-text-color);
2621
- cursor:default;
2622
- }
2623
-
2624
- .tds-field-control{
2625
- display:flex;
2626
- align-items:center;
2627
- inline-size:100%;
2628
- min-block-size:var(--tds-field-min-height);
2629
- font-family:inherit;
2630
- font-size:var(--tds-field-font-size);
2631
- line-height:1;
2632
- color:var(--tds-field-color);
2633
- -webkit-appearance:none;
2634
- -moz-appearance:none;
2635
- appearance:none;
2636
- cursor:text;
2637
- outline:var(--t-focus-ring-width) solid transparent;
2638
- outline-offset:0;
2639
- background-color:var(--tds-field-background-color);
2640
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
2641
- border-radius:var(--t-form-border-radius);
2642
- transition-timing-function:var(--t-ease-in-out);
2643
- transition-duration:var(--t-duration-200);
2644
- transition-property:background-color, border-color, outline-color, outline-offset;
2645
- }
2646
-
2647
- .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2648
- border-color:var(--tds-field-border-color-hover);
2649
- }
2612
+ :is(.tds-select:has( > button) [popover]) ul{
2613
+ padding:0;
2614
+ margin:0;
2615
+ list-style:none;
2616
+ }
2650
2617
 
2651
- .tds-field-control[data-focus-within]{
2652
- outline-color:var(--t-focus-ring-color);
2653
- outline-offset:var(--t-focus-ring-offset);
2654
- border-color:var(--tds-field-border-color-active);
2655
- }
2618
+ @starting-style{
2619
+ :is(.tds-select:has( > button) [popover]):popover-open{
2620
+ opacity:var(--tds-select-dropdown-closed-opacity);
2621
+ translate:var(--tds-select-dropdown-closed-translate);
2622
+ }
2623
+ }
2656
2624
 
2657
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2658
- --tds-field-border-color:var(--t-form-border-color-readonly);
2659
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2660
- --tds-field-background-color:var(--t-form-background-color-readonly);
2661
- color:var(--t-form-color-readonly);
2625
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2626
+ .tds-select select:has(> button){
2627
+ padding-inline-end:0;
2628
+ background-image:none;
2662
2629
  }
2630
+ @media (hover) and (pointer: fine){
2631
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2632
+ padding-block:0;
2633
+ -webkit-appearance:base-select;
2634
+ -moz-appearance:base-select;
2635
+ appearance:base-select;
2636
+ }
2637
+ }
2638
+ :is(.tds-select select:has( > button))::picker-icon{
2639
+ flex-shrink:0;
2640
+ width:var(--tds-select-caret-size);
2641
+ height:var(--tds-select-caret-size);
2642
+ margin-inline-end:var(--tds-select-caret-inline-offset);
2643
+ content:var(--tds-select-background-image);
2644
+ transition:var(--tds-select-caret-transition);
2645
+ }
2663
2646
 
2664
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2665
- border-color:var(--t-form-border-color-hover);
2647
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2648
+ opacity:var(--tds-select-dropdown-closed-opacity);
2649
+ translate:var(--tds-select-dropdown-closed-translate);
2666
2650
  }
2667
2651
 
2668
- .tds-field-description{
2669
- display:flex;
2670
- gap:var(--t-spacing-half);
2671
- align-items:flex-start;
2672
- margin:0;
2673
- font-size:var(--t-font-size-sm);
2674
- line-height:1.35;
2675
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
2676
- cursor:text;
2677
- }
2652
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2653
+ outline-color:var(--t-focus-ring-color);
2654
+ outline-offset:var(--t-focus-ring-offset);
2655
+ border-color:var(--tds-select-border-color-active);
2656
+ }
2678
2657
 
2679
- .tds-field-description .tds-field-description-invalid-icon{
2680
- display:var(--tds-field-description-invalid-icon-display, none);
2681
- flex-shrink:0;
2682
- margin-block-start:calc(.5lh - .5em);
2683
- line-height:1.35;
2684
- }
2658
+ :is(.tds-select select:has( > button)):open::picker-icon{
2659
+ opacity:1;
2660
+ transform:rotate(.5turn);
2661
+ }
2685
2662
 
2686
- .tds-field-date-segment{
2687
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2688
- text-align:end;
2689
- text-wrap:nowrap;
2690
- caret-color:transparent;
2691
- border-radius:var(--t-border-radius-sm);
2692
- }
2663
+ :is(.tds-select select:has( > button)) selectedcontent{
2664
+ overflow:hidden;
2665
+ text-overflow:ellipsis;
2666
+ line-height:calc(var(--tds-select-min-height) - 2px);
2667
+ white-space:nowrap;
2668
+ }
2693
2669
 
2694
- .tds-field-date-segment[data-placeholder]{
2695
- color:var(--tds-field-placeholder-color);
2696
- }
2670
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2671
+ color:var(--tds-select-placeholder-color);
2672
+ }
2697
2673
 
2698
- .tds-field-date-segment[data-focused]{
2699
- color:var(--t-text-color-inverted);
2700
- outline:0;
2701
- background-color:var(--t-fill-color-interaction);
2702
- }
2674
+ :is(.tds-select select:has( > button))::picker(select){
2675
+ inset:auto;
2676
+ inline-size:-moz-max-content;
2677
+ inline-size:max-content;
2678
+ min-inline-size:anchor-size(width);
2679
+ max-inline-size:100vi;
2680
+ padding:var(--tds-select-dropdown-padding);
2681
+ margin-block:var(--tds-select-dropdown-margin-block);
2682
+ position-try-fallbacks:flip-block, flip-inline;
2683
+ overflow:auto;
2684
+ overflow-x:hidden;
2685
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2686
+ overscroll-behavior:none;
2687
+ -webkit-user-select:none;
2688
+ -moz-user-select:none;
2689
+ user-select:none;
2690
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2691
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2692
+ background:var(--tds-select-dropdown-background-color);
2693
+ border:var(--tds-select-dropdown-border);
2694
+ border-radius:var(--tds-select-dropdown-border-radius);
2695
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2696
+ opacity:var(--tds-select-dropdown-open-opacity);
2697
+ translate:var(--tds-select-dropdown-open-translate);
2698
+ transition:var(--tds-select-dropdown-transition);
2699
+ }
2703
2700
 
2704
- .tds-field-date-segment-separator{
2705
- padding-inline:0;
2706
- color:var(--tds-field-placeholder-color);
2707
- }
2701
+ :is(.tds-select select:has( > button)) option::checkmark{
2702
+ display:none;
2703
+ }
2708
2704
 
2709
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2710
- color:var(--tds-field-color);
2705
+ @starting-style{
2706
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
2707
+ opacity:var(--tds-select-dropdown-closed-opacity);
2708
+ translate:var(--tds-select-dropdown-closed-translate);
2709
+ }
2710
+ }
2711
2711
  }
2712
2712
 
2713
2713
  .tds-loading-spinner{
@@ -4160,131 +4160,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4160
4160
  @media (prefers-color-scheme: dark){
4161
4161
  }
4162
4162
 
4163
- .tds-dropdown-popover{
4164
- min-inline-size:10rem;
4165
- max-inline-size:24rem;
4166
- padding:var(--t-spacing-1);
4167
- overflow:auto;
4168
- overscroll-behavior:none;
4169
- -webkit-user-select:none;
4170
- -moz-user-select:none;
4171
- user-select:none;
4172
- outline:0;
4173
- scrollbar-color:#0004 #0000;
4174
- scrollbar-width:thin;
4175
- background:var(--t-surface-color-card);
4176
- background-clip:padding-box;
4177
- border:1px solid var(--t-border-color);
4178
- border-radius:var(--t-border-radius);
4179
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4180
- }
4181
- .tds-dropdown-popover[data-entering]{
4182
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
4183
- }
4184
- .tds-dropdown-popover[data-exiting]{
4185
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
4186
- }
4187
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
4188
- will-change:opacity, transform;
4189
- }
4190
- @keyframes tds-dropdown-popover{
4191
- from{
4192
- opacity:0;
4193
- transform:translateY(-8px);
4194
- }
4195
- }
4196
- @media (prefers-reduced-motion: reduce){
4197
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
4198
- animation:none;
4199
- }
4200
- }
4201
- .tds-dropdown-popover [role="menu"]{
4202
- outline:0;
4203
- }
4204
- .tds-dropdown-item{
4205
- --tds-dropdown-item-color:var(--t-text-color);
4206
-
4207
- display:flex;
4208
- gap:var(--t-spacing-1);
4209
- align-items:center;
4210
- padding-block:var(--t-spacing-1);
4211
- padding-inline:var(--t-spacing-2);
4212
- font-size:1rem;
4213
- color:var(--tds-dropdown-item-color);
4214
- text-decoration:none;
4215
- cursor:default;
4216
- outline:0;
4217
- border-radius:var(--t-border-radius);
4218
- }
4219
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
4220
- background:var(--t-fill-color-neutral-070);
4221
- }
4222
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
4223
- background:var(--t-fill-color-neutral-060);
4224
- }
4225
- .tds-dropdown-item[data-disabled]{
4226
- --tds-dropdown-item-color:var(--t-form-color-disabled);
4227
-
4228
- cursor:not-allowed;
4229
- }
4230
- .tds-dropdown-item--destructive{
4231
- --tds-dropdown-item-color:var(--t-text-color-status-error);
4232
- }
4233
- .tds-dropdown-item--staff-only{
4234
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
4235
- }
4236
- a.tds-dropdown-item:is(:hover, :active){
4237
- color:var(--tds-dropdown-item-color);
4238
- }
4239
- .tds-dropdown-item [slot="prefix"],
4240
- .tds-dropdown-item [slot="suffix"]{
4241
- flex-shrink:0;
4242
- }
4243
- .tds-dropdown-item [slot="label"]{
4244
- flex:1;
4245
- min-width:0;
4246
- overflow:hidden;
4247
- text-overflow:ellipsis;
4248
- white-space:nowrap;
4249
- }
4250
- .tds-dropdown-item [slot="description"]{
4251
- font-size:var(--t-font-size-sm);
4252
- color:var(--t-text-color-secondary);
4253
- }
4254
- .tds-dropdown-item:has([slot="description"]){
4255
- display:grid;
4256
- grid-template-areas:"prefix label suffix" "prefix description suffix";
4257
- grid-template-columns:auto 1fr auto;
4258
- }
4259
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
4260
- grid-area:prefix;
4261
- }
4262
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
4263
- grid-area:label;
4264
- }
4265
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
4266
- grid-area:description;
4267
- }
4268
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
4269
- grid-area:suffix;
4270
- }
4271
- .tds-dropdown-section:not(:first-child){
4272
- margin-block-start:var(--t-spacing-half);
4273
- }
4274
- .tds-dropdown-section-label{
4275
- padding-block:var(--t-spacing-1);
4276
- padding-inline:var(--t-spacing-1);
4277
- font-size:var(--t-font-size-sm);
4278
- font-weight:var(--t-font-weight-semibold);
4279
- color:var(--t-text-color-secondary);
4280
- }
4281
- .tds-dropdown-separator{
4282
- margin-block:var(--t-spacing-half);
4283
- margin-inline:0;
4284
- border:0;
4285
- border-top:1px solid var(--t-border-color);
4286
- }
4287
-
4288
4163
  .t-banner{
4289
4164
  --t-banner-font-size:var(--t-font-size-md);
4290
4165
  --t-banner-font-color:var(--t-text-color);